监控组件

app/src/components/Camera.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="camera-continer">
-
+    <video :src="url" controls="controls" v-if="url" width="100%" height="100%">
+      您的浏览器不支持 video 标签。
+    </video>
   </div>
 </template>
 <script>
-
 export default {
   name: "CameraContainer",
   components: {},
   data() {
     return {
-        url: null
+      url: null,
     };
   },
   props: {
@@ -20,18 +21,22 @@ export default {
     },
   },
   mounted() {
+    this.getData();
   },
   methods: {
     getData() {
-        
-    }
+      // TO-DO
+      console.log(this.id);
+      this.url =
+        "https://ycjk.cq119.gov.cn/rtp/77746e2c33126146cb83c81be23d0492.live.mp4?deviceId=50015200002000000001&key=";
+    },
   },
 };
 </script>
 
 <style scoped lang="less">
 .camera-continer {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 </style>

app/src/views/Test/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="display: flex;">
     <!-- 地图 -->
     <div class="map-exp">
       <div style="font-size: 20px">地图调用示例：</div>
@@ -33,8 +33,8 @@ export default {
   height: 500px;
 }
 .camrea-exp {
-  margin-top: 100px;
-  width: 500px;
+  margin-left: 100px;
+  width: 800px;
   height: 500px
 }
 </style>