el-select实现分屏效果

news2024/11/20 13:25:49

动态绑定class值，多种判断

:class="type === 8 ? 'home-stye-2' : type === 24 ? 'home-stye-1' : 'home-stye-3'"

  <div class="home-right-top">
        <div class="home-right-top-video">
          <el-row :gutter="20">
            <el-col :span="type" v-for="(item, index) in typeList" :key="item.id"
              :class="type === 8 ? 'home-stye-2' : type === 24 ? 'home-stye-1' : 'home-stye-3'">
              <div class="videoEvent">
//ifram视频嵌套
                <iframe id="iframe"
                  :src="liveNvrUrl + `/play.html?channel=` + item.channelNo + `&protocol=WEBRTC&stretch=no&iframe=yes&autoplay=no&controls=no`"
                  allowfullscreen class="video" @click="iframeClick(index)">
                </iframe>
              </div>
//摄像仪名称 点击摄像仪名称实现全屏
              <div class="camera-name" @click="handleVideoClick(item.id, item.channelNo, item.voiceCall)">摄像仪名称 : {{
                item.cameraName }}
               </div>
            </el-col>
          </el-row>
        </div>
        <div class="home-right-top-text">
          <span class="full-screen" @click="fullScreenClick">全屏</span>
          <span>
//分屏下拉款选择
            <el-select v-model="cameraValue" placeholder="分屏" style="width: 100px;" size="mini" @change="changeSize">
              <el-option v-for="item in cameraOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </span>
         
          
        </div>
      </div>

js部分定义变量及方法，主要查阅对象为分屏和全屏方法

data(){
return{
      typeNewList: [], //获取后端返回数组
       typeList: [], //展示页面数组
       liveNvrUrl: '', 
 cameraValue: '', //select绑定值
 type: 24,
  cameraIndex: null,//截取数量

    }
}，
  mounted() {
    this.getCameraStatus()
    this.getWebSocket()  // 链接服务
    this.getLiveNvr()    //获取liveNvr地址
  },
  methods: {
      //获取liveNvr地址
    getLiveNvr() {
      getConfigKey("liveNvr").then(res => {
        this.liveNvrUrl = res.msg;
      })
    },
  // 链接服务
    getWebSocket() {
      function debounce(func, delay) {
        let timeoutId;
        return function (...args) {
          clearTimeout(timeoutId);
          timeoutId = setTimeout(() => {
            func.apply(this, args);
          }, delay);
        };
      }
      const wsuri = 'ws://192.168.10.6:8081/websocket/message'
      let ws = new WebSocket(wsuri)
      var _this = this
      ws.onopen = function (event) {

      }
      const debouncedFunction = debounce(function (event) {
        if (event.data !== '连接成功') {
          let result = event.data
          let data = JSON.parse(result)
          _this.cameraOnlineList.unshift(data)
        }
        // 执行的代码
      }, 200);
      ws.onmessage = function (e) {
        debouncedFunction(e)
      }
      ws.onclose = function (event) {
      }
    },
//初始化数据
    getCameraStatus() {
      getCameraStatus().then(res => {
        this.allCamera = res.cameraStatus.number
        this.offlineCamera = res.cameraStatus.offDrillingNumber
        this.onlineCamera = res.cameraStatus.onDrillingNumber
      })
      // 摄像仪通道
      listCameraBase().then(response => {
        this.typeNewList = response.rows
        this.handleVideoClick(this.typeNewList[0].id, this.typeNewList[0].channelNo, this.typeNewList[0].voiceCall);
        this.changeSize(this.type)
      });

    },
 // 监控视频事件
    handleVideoClick(videoId, channelNo, voiceCall) {
      this.currentChannel = channelNo;
      this.currentVideoId = videoId;
      this.currentVoiceCall = voiceCall;
      this.drillInformation = []
      this.value = '';
      this.drillValue = '';
      const videoIdInt = videoId
      getTaskIdByCameraId(videoIdInt).then((response) => {
        if (response.data === undefined) {
          this.$modal.msgError("当前相机无在执行任务");
          this.taskPlanList = [];
          return false
        }
        this.taskPlanList = response.data; //任务信息数据
        // 调用钻孔放法或接口数据，绑定对应的id来获取对应数据
        if (
          response.data.taskDetailInfoList &&
          response.data.taskDetailInfoList.length > 0
        ) {
          this.drillOptions = response.data.taskDetailInfoList; //钻孔数据
          this.selectedHoleCode = response.data.taskDetailInfoList[0].holeCode; // 假设选择第一个钻孔编号
        }
      });
    },

 // 分屏  初始化方法中调用this.changeSize(this.type)
    changeSize(value) {
      let arr = this.typeNewList;
      this.cameraIndex = 0;
      this.type = value;
      if (value === 24) {
        this.cameraIndex = 1;
      }
      if (value === 8) {
        this.cameraIndex = 6;
      }
      if (value === 6) {
        this.cameraIndex = 12;
      }
      this.typeList = arr.slice(0, this.cameraIndex);
     
    },

  // 全屏
    fullScreenClick() {
      this.typeList = []
      this.cameraValue = ''
      this.type = 24;
      this.typeList = this.typeNewList.filter(item => item.id === this.currentVideoId)
    },
}

css分屏样式

  .home-right-top-video {
        width: 100%;
        height: calc(100% - 40px);

        .el-row {
          height: 100%;
//2*3

          .home-stye-2 {
            border-radius: 4px;
            height: calc(100% / 2 - 10px);
            margin-bottom: 10px;
            position: relative;

            .bg-purple {
              position: absolute;
              top: 0;
              height: 100%;
            }

            .videoEvent {
              width: 100%;
              height: 100%;

              .video {
                width: 100%;
                height: 100%;
              }
            }

            .camera-name {
              position: absolute;
              top: 5px;
              left: 20px;
              height: 100%;
              color: #1ea0f7;
              font-size: 16px;
              cursor: pointer;
            }
          }
//1*1
          .home-stye-1 {
            border-radius: 4px;
            height: calc(100% - 10px);
            margin-bottom: 10px;
            position: relative;

            .videoEvent {
              width: 100%;
              height: 100%;

              .video {
                width: 100%;
                height: 100%;
              }
            }

            .camera-name {
              position: absolute;
              top: 5px;
              left: 20px;
              height: 100%;
              color: #1ea0f7;
              font-size: 16px;
              cursor: pointer;
            }
        
              }
            }
          }
//3*4
          .home-stye-3 {
            border-radius: 4px;
            height: calc(100% / 3 - 10px);
            margin-bottom: 10px;
            position: relative;

            .videoEvent {
              width: 100%;
              height: 100%;

              .video {
                width: 100%;
                height: 100%;
              }
            }

            .camera-name {
              position: absolute;
              top: 5px;
              left: 20px;
              height: 100%;
              color: #1ea0f7;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }
      }