安全管控-首页

src/views/NewPages/iframe4.vue

@@ -2,19 +2,23 @@
   <div class="iframe4">
     <!-- <iframe src="http://10.75.17.10/doc/page/preview.asp" frameborder="0" class="iframe-2"></iframe> -->
     <div class="iframe-1">
+      <div class="iframe4-title" @click="jumpUrl('/save/personnel')">人员健康</div>
       <personnel></personnel>
     </div>
     <div class="iframe-2">
-      <div v-for="(pItem, pIndex) in videoArray" :key="pIndex" width="95%" height="48vh" @click="openVideoDialog(pItem)">
+      <div class="iframe4-title">视频监视</div>
+      <div class="videoDiv" v-for="(pItem, pIndex) in videoArray" :key="pIndex" width="95%" height="48vh" @click="openVideoDialog(pItem)">
         <div class="mask"></div>
         <iframe :src="pItem.url + pItem.token" />
       </div>
     </div>
     <div class="iframe-3">
+      <div class="iframe4-title" @click="openUrl('http://192.168.1.52/webiui/#/online')">智能安全帽</div>
       <iframe src="http://192.168.1.52/webiui/#/online" frameborder="0"></iframe>
     </div>
     <div class="iframe-4">
-      <!-- <personnel></personnel> -->
+      <div class="iframe4-title">数字孪生</div>
+      <div class="iframe-4-body"></div>
     </div>
     <el-dialog top="50px" v-model="showVideoDialog" width="80vw" :destroy-on-close="true" :custom-class="videoDialogClass">
       <iframe class="videoBoxiframe" width="100%" height="600px" :src="dialogVideoUrl" />
@@ -73,6 +77,12 @@ export default {
         this.showVideoDialog = true;
       }
     },
+    jumpUrl(url) {
+      this.$router.push(url);
+    },
+    openUrl(url) {
+      window.open(url);
+    },
   },
   created() {},
 };
@@ -80,8 +90,6 @@ export default {
 
 <style lang="less">
 .iframe4 {
-  // width: 98.5vw;
-  // height: 98.5vh;
   background: url(../../assets/background-iframe4.png) no-repeat;
   background-size: 100% 100%;
   background-position-y: -5.1vh;
@@ -92,12 +100,19 @@ export default {
   .iframe-2,
   .iframe-3,
   .iframe-4 {
-    // position: fixed;
-    // z-index: 1;
     width: 36.8vw;
     height: 37.31vh;
   }
-
+  .iframe4-title {
+    position: absolute;
+    text-align: center;
+    width: 36.8vw;
+    margin-top: -3.3vh;
+    text-align: center;
+    font-size: 14pt;
+    color: #b3bdc0;
+    cursor: pointer;
+  }
   .iframe-1 {
     margin-left: 6.5vw;
     margin-top: 5.3vh;
@@ -113,7 +128,7 @@ export default {
     margin-left: 11.9vw;
     margin-top: 5.5vh;
     position: relative;
-    div {
+    .videoDiv {
       display: flex;
       height: 18.2vh;
       width: 12.2vw;
@@ -125,6 +140,7 @@ export default {
         // float: left;
       }
       .mask {
+        cursor: pointer;
         flex: 0 0 100%;
         position: absolute;
         left: 0;
@@ -135,11 +151,15 @@ export default {
       }
     }
   }
+  .iframe-3,
+  .iframe-4 {
+    margin-top: -2.2vh;
+    height: calc(36.5vh);
+    width: 36.77vw;
+  }
   .iframe-3 {
-    height: calc(36.6vh);
     margin-left: 6.5vw;
-    margin-top: -0.7vh;
-    background-color:seashell;
+    // background-color: seashell;
     iframe {
       height: 100%;
       width: 100%;
@@ -148,5 +168,15 @@ export default {
   .el-dialog {
     background: rgba(18, 29, 28, 0.95);
   }
+  .iframe-4 {
+    margin-left: 11.9vw;
+    .iframe-4-body {
+      background-image: url("../../assets/save_4.png");
+      // background-color: aqua;
+      background-size: cover;
+      height: 100%;
+      width: 100%;
+    }
+  }
 }
 </style>