sis_zhfx/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">
      <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="mask"></div>
        <iframe :src="pItem.url + pItem.token" />
      </div>
    </div>
    <div class="iframe-3">
      <iframe src="http://192.168.1.52/webiui/#/online" frameborder="0"></iframe>
    </div>
    <div class="iframe-4">
      <!-- <personnel></personnel> -->
    </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" />
    </el-dialog>
  </div>
</template>

<script>
import personnel from "./personnel.vue";
import PanelSand from "@com/coms/panel/panel-sand.vue";
export default {
  setup() {},
  components: { personnel, PanelSand },
  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,
        },
      ],
    };
  },
  methods: {
    openVideoDialog(item) {
      if (item.url && item.token) {
        this.dialogVideoUrl = item.url + item.token;
        this.showVideoDialog = true;
      }
    },
  },
  created() {},
};
</script>

<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;
  display: flex;
  flex-wrap: wrap;
  height: 98vh;
  .iframe-1,
  .iframe-2,
  .iframe-3,
  .iframe-4 {
    // position: fixed;
    // z-index: 1;
    width: 36.8vw;
    height: 37.31vh;
  }

  .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;
    div {
      display: flex;
      height: 18.2vh;
      width: 12.2vw;
      float: left;
      position: relative;
      iframe {
        height: 18.2vh;
        width: 12.2vw;
        // float: left;
      }
      .mask {
        flex: 0 0 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
      }
    }
  }
  .iframe-3 {
    height: calc(36.6vh);
    margin-left: 6.5vw;
    margin-top: -0.7vh;
    background-color:seashell;
    iframe {
      height: 100%;
      width: 100%;
    }
  }
  .modal.el-dialog {
    background: rgba(18, 29, 28, 0.95);
    }
}
</style>