|
@@ -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,18 +151,32 @@ 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%;
|
|
|
}
|
|
|
}
|
|
|
- .modal.el-dialog {
|
|
|
+ .el-dialog {
|
|
|
background: rgba(18, 29, 28, 0.95);
|
|
|
+ }
|
|
|
+ .iframe-4 {
|
|
|
+ margin-left: 11.9vw;
|
|
|
+ .iframe-4-body {
|
|
|
+ background-image: url("../../assets/3Dszls.png");
|
|
|
+ // background-color: aqua;
|
|
|
+ background-size: cover;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|