add:监控视频播放页面

src/views/demonstrate/index.vue

@@ -12,11 +12,21 @@
         >
       </el-tree>
     </div> -->
+    <!-- 弹窗 -->
+    <el-dialog title="监控视频" :visible.sync="videoDialog" width="60%">
+      <iframe
+        :src="`http://10.7.148.106:10800/play.html?channel=${channel}&iframe=yes&aspect=640x360`"
+        width="640"
+        height="360"
+        allowfullscreen
+        allow="autoplay; fullscreen"
+      ></iframe>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import iFrame from '@/components/iFrame';
+import iFrame from "@/components/iFrame";
 
 export default {
   name: "demonstrate",
@@ -24,52 +34,69 @@ export default {
   data() {
     return {
       intervalId: null,
-      msg:null,
-      btnItems:[{
+      msg: null,
+      btnItems: [
+        {
           id: 1,
-          label: '人工设置',
-          children: [{
+          label: "人工设置",
+          children: [
+            {
               id: 5,
-            label: '添加人工',
-            val:'2-0'
-          },{
+              label: "添加人工",
+              val: "2-0",
+            },
+            {
               id: 6,
-            label: '设置完成',
-            val:'2-1'
-          }]
-        }, {
+              label: "设置完成",
+              val: "2-1",
+            },
+          ],
+        },
+        {
           id: 2,
-          label: '障碍设置',
-          children: [{
+          label: "障碍设置",
+          children: [
+            {
               id: 7,
-            label: '塌方',
-            val:'3-0'
-          }, {
+              label: "塌方",
+              val: "3-0",
+            },
+            {
               id: 8,
-            label: '渗水',
-            val:'3-1'
-          }, {
+              label: "渗水",
+              val: "3-1",
+            },
+            {
               id: 8,
-            label: '设置完成',
-            val:'3-2'
-          }]
-        }, {
+              label: "设置完成",
+              val: "3-2",
+            },
+          ],
+        },
+        {
           id: 3,
-          label: '避险',
-          children: [{
+          label: "避险",
+          children: [
+            {
               id: 9,
-            label: '井下避险',
-            val:'4-0'
-          }, {
+              label: "井下避险",
+              val: "4-0",
+            },
+            {
               id: 10,
-            label: '全员撤离',
-            val:'4-1'
-          }]
-        }, {
+              label: "全员撤离",
+              val: "4-1",
+            },
+          ],
+        },
+        {
           id: 4,
-          label: '初始化',
-          val:'5-0'
-        }],
+          label: "初始化",
+          val: "5-0",
+        },
+      ],
+      videoDialog: false,
+      channel: "",
     };
   },
   mounted() {
@@ -84,61 +111,69 @@ export default {
 
       this.intervalId = setInterval(this.checkLocalStorage, 1000);
     });
+    //从路由里面拿参数
+    this.channel = this.$route.query.channel;
+    if (this.channel) {
+      // 打开弹窗
+      this.videoDialog = true;
+    } else {
+      // 关闭弹窗
+      this.videoDialog = false;
+    }
   },
   methods: {
-    nodeClick(obj){
-      if(obj.val){
-        this.sendTo3D(obj.val)
+    nodeClick(obj) {
+      if (obj.val) {
+        this.sendTo3D(obj.val);
       }
     },
     checkLocalStorage() {
-      let name = localStorage.getItem('name');
+      let name = localStorage.getItem("name");
       if (name) {
         // console.log('找到:', name);
         clearInterval(this.intervalId);
         this.msg = name;
       } else {
-        console.log('Name not found, continuing to check...');
+        console.log("Name not found, continuing to check...");
       }
     },
     sendTo3D(val) {
       localStorage.removeItem("to3d");
       localStorage.setItem("to3d", val);
     },
-    
   },
   beforeDestroy() {
     localStorage.removeItem("to3d");
     localStorage.removeItem("name");
     clearInterval(this.intervalId);
-  }
+  },
 };
 </script>
 <style scoped lang="scss">
-.demonstrate{
+.demonstrate {
   position: relative;
-  .u3d-iframe{
+  .u3d-iframe {
     width: 100%;
   }
-  .u3d-btn{
+  .u3d-btn {
     width: 140px;
     position: absolute;
     bottom: 0;
     left: 0%;
     top: 10%;
-    .u3d-btn-item{
+    .u3d-btn-item {
       font-size: 30px;
       line-height: 1.5em;
       font-weight: bold;
       color: #0394d0;
       cursor: pointer;
-      &:hover{
-        color:rgba(13, 29, 55);
+      &:hover {
+        color: rgba(13, 29, 55);
       }
     }
   }
 }
-::v-deep .el-tree{
+::v-deep .el-tree {
   background: none;
 }
 </style>