fd_dwgz_zhyw/src/views/NewPages/iframe4.vue

<template>
  <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 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" /> -->
        <hlsVideo :code="pItem.code" :class="pItem.class" />
      </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">
      <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"
      /> -->
      <hlsVideo
        class="videoBoxiframe"
        width="95%"
        height="800px"
        :code="dialogVideoUrl"
      />
    </el-dialog>
  </div>
</template>

<script>
import personnel from "./personnel.vue";
import PanelSand from "@com/coms/panel/panel-sand.vue";
import hlsVideo from "../SandTable/component/hls.vue";
export default {
  setup() {},
  components: { personnel, PanelSand, hlsVideo },
  data() {
    return {
      showVideoDialog: false,
      dialogVideoUrl: "",
      // videoArray: [
      //   {
      //     url: "http://10.155.32.4:9984/ws.html",
      //     token: "?token=SBQ_FDC_SC&autoplay=true",
      //     switch: true,
      //   },
      //   {
      //     url: "http://10.155.32.4:9984/ws.html",
      //     token: "?token=NSS_FDC_SC&autoplay=true",
      //     switch: true,
      //   },
      //   {
      //     url: "http://10.155.32.4:9984/ws.html",
      //     token: "?token=QS_FDC_SC&autoplay=true",
      //     switch: true,
      //   },
      //   {
      //     url: "http://10.155.32.4:9984/ws.html",
      //     token: "?token=MHS_FDC_SC&autoplay=true",
      //     switch: true,
      //   },
      //   {
      //     url: "http://10.155.32.4:9984/ws.html",
      //     token: "?token=XS_FDC_SC&autoplay=true",
      //     switch: true,
      //   },
      //   {
      //     url: "http://10.155.32.4:9984/ws.html",
      //     token: "?token=PL_GDC_SC&autoplay=true",
      //     switch: true,
      //   },
      // ],
      videoArray: [
        { code: "SBQ_FDC_SC", class: "", switch: true },
        { code: "NSS_FDC_SC", class: "", switch: true },
        { code: "QS_FDC_SC", class: "", switch: true },
        { code: "MHS_FDC_SC", class: "", switch: true },
        { code: "XS_FDC_SC", class: "", switch: true },
        { code: "PL_GDC_SC", class: "", switch: true },
      ],
    };
  },
  methods: {
    openVideoDialog(item) {
      // if (item.url && item.token) {
      //   this.dialogVideoUrl = item.url + item.token;
      //   this.showVideoDialog = true;
      // }
      if (item.code) {
        this.dialogVideoUrl = item.code;
        this.showVideoDialog = true;
      }
    },
    jumpUrl(url) {
      this.$router.push(url);
    },
    openUrl(url) {
      window.open(url);
    },
  },
  created() {},
};
</script>

<style lang="less">
.iframe4 {
  background: url(../../assets/background-iframe4.png) no-repeat;
  background-size: 100% 100%;
  background-position-y: -5.1vh;
  display: flex;
  flex-wrap: wrap;
  height: 98vh;
  .iframe-1,
  .iframe-2,
  .iframe-3,
  .iframe-4 {
    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;
    .personnel {
      height: calc(36.6vh);
      .personnel-box-item {
        width: 11.5vw;
      }
    }
  }
  .iframe-2 {
    flex: 0 0 36.69vw;
    margin-left: 11.9vw;
    margin-top: 5.5vh;
    position: relative;
    .videoDiv {
      display: flex;
      height: 18.2vh;
      width: 12.2vw;
      float: left;
      position: relative;
      iframe {
        height: 18.2vh;
        width: 12.2vw;
        // float: left;
      }
      .mask {
        cursor: pointer;
        flex: 0 0 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
      }
    }
  }
  .iframe-3,
  .iframe-4 {
    margin-top: -2.2vh;
    height: calc(36.5vh);
    width: 36.77vw;
  }
  .iframe-3 {
    margin-left: 6.5vw;
    // background-color: seashell;
    iframe {
      height: 100%;
      width: 100%;
    }
  }
  .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>