smart-factory/src/views/large-screen/video.vue

<script setup>
import { reactive, onMounted } from 'vue'
import { getRtspUrl, getDevicePage, getPlaybackByTimeRtspUrl, getRegularVideoRecords } from './api'
import { ElMessage } from 'element-plus'

const state = reactive({
  currentCameraIndex: 0,
  cameraList: [],
  cameraInfo: null
})
const switchCamera = (index) => {
  state.currentCameraIndex = index;
  startVideo();
}
const startVideo = () => {
  let index = state.currentCameraIndex;
  let channelCode = state.cameraList[index].units && state.cameraList[index].units[0].channels[0].channelCode;
  if (!channelCode) {
    ElMessage({
      message: '设备异常',
      type: 'error'
    })
    return;
  }
  getRtspUrl({
    data: {
      channelId: channelCode,
      dataType: "1",
      streamType: "1"
    }
  }).then(res => {
    state.cameraInfo = {
      channelId: channelCode,
      url: res.data.url,
      token: res.data.token
    }
    //发送消息给子页面
    let video = document.getElementById('video')
    video.contentWindow.postMessage({
      type: 'startVideo',
      data: { ...state.cameraInfo }
    }, '*')
  })
}
const playRecord = (date) => {
  let index = state.currentCameraIndex;
  let channelCode = state.cameraList[index].units && state.cameraList[index].units[0].channels[0].channelCode;
  if (!channelCode) {
    ElMessage({
      message: '设备异常',
      type: 'error'
    })
    return;
  }
  //获取当日的开始时间和结束时间
  let current = new Date(date);
  let startTime = parseInt(current.setHours(0, 0, 0, 0) / 1000);
  let endTime = parseInt(current.setHours(23, 59, 59, 999) / 1000);
  getRegularVideoRecords({
    data: {
      channelId: channelCode,
      recordSource: '1',
      startTime,
      endTime,
      streamType: "1",
      recordType: "1"
    }
  }).then(res => {
    console.log('res :>> ', res);
    let records = res.data.records;
    getPlaybackByTimeRtspUrl({
      data: {
        channelId: records[0].channelId,
        recordSource: records[0].recordSource,
        startTime: records[0].startTime,
        endTime: records[0].endTime,
        streamType: records[0].streamType,
        recordType: records[0].recordType
      }
    }).then(res => {
      let recordInfo = {
        records: records,
        channelId: records[0].channelId,
        url: res.data.url,
        token: res.data.token,
        startTime: records[0].startTime,
        endTime: records[0].endTime,
        streamType: records[0].streamType,
        recordType: records[0].recordType
      }
      //发送消息给子页面
      let video = document.getElementById('video')
      console.log('video :>> ', video);
      video.contentWindow.postMessage({
        type: 'playRecord',
        data: JSON.parse(JSON.stringify(recordInfo))
      }, '*')
    })
  })

}
onMounted(() => {
  getDevicePage({
    "pageNum": 1,
    "pageSize": 100,
  }).then((res) => {
    state.cameraList = res.data.pageData
    const index = state.cameraList.findIndex(item => item.isOnline === 1);
    state.currentCameraIndex = index
  }).catch((err) => {

  });
  // 监听子页面的消息
  window.addEventListener('message', (event) => {
    console.log('event :>> ', event.data);
    if (event.data.type === 'startVideo') {

      startVideo();
    } else if (event.data.type === 'playRecord') {
      playRecord(event.data.date);
    }
  });
})

</script>

<template>
  <div class="app-containertwo">
    <!-- 监控摄像头名称列表 -->
    <div class="camera-name-list">
      <!--  -->
      <div :class="state.currentCameraIndex === index ? 'active' : ''" @click="switchCamera(index)" class="camera-item"
        v-for="(camera, index) in state.cameraList" :key="index">
        <div style="width:4.375rem;margin-right: 1.25rem;text-align: center;position: relative;">
          <texttooltip :content="camera.deviceName" :class="state.currentCameraIndex === index ? 'wid202' : 'wid201'"
            refName=" tooltipOverd"></texttooltip>
          <el-tag style="scale: 0.7;position: absolute;top:-1.25rem;right:-.9375rem;border-radius: 1.25rem;"
            :type="camera.isOnline == 1 ? 'success' : 'danger'">{{ camera.isOnline == 1 ? '在线' : '离线' }}</el-tag>
        </div>
      </div>
      <!-- <template v-for="(camera, index) in state.cameraList" :key="index">
        <span class="camera-name" @click="switchCamera(index)" :class="{ active: state.currentCameraIndex === index }">
          {{ camera.deviceName }}
        </span>
      </template> -->
    </div>
    <!-- 摄像头展示区域 -->
    <div class="camera-display">
      <iframe v-if="state.cameraList.length > 0" id="video" src="/dahua/demo.html?real=true"
        style="width:100%;height:100%;" frameborder="0"></iframe>
      
    </div>
  </div>
</template>

<style scoped>
.wid202 {
  background: linear-gradient(90deg, #FFFFFF 0%, #FFF8C2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wid201 {
  background: linear-gradient(90deg, #FFFFFF 0%, #45B1FE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.camera-item {
  cursor: pointer;
  width: 100%;
  background: url('../../assets/images/videoitembj.png') no-repeat;
  background-size: 100% 100%;
  /* margin-top: -1.25rem; */
  display: flex;
  flex-shrink: 0;
  height: 3.125rem;
  align-items: center;
  justify-content: flex-end;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: .875rem;
  margin-bottom: .625rem;
  color: #fff;
}

.app-containertwo {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 0;
}

.camera-name-list {
  width: 11.5625rem;
  height: 100%;
  margin-right: 1.25rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.camera-name {
  padding: .5rem 2rem;
  border: .0625rem solid #ccc;
  border-radius: 1.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
  position: relative;
}

.camera-name:hover {
  background-color: #e0e0e0;
  transform: translateY(-.125rem);
}

.active {
  background: url('../../assets/images/videoitembjtwo.png') no-repeat;
  background-size: 100% 100%;
  /* background-color: #2196F3;
  color: white;
  border-color: #2196F3; */
}

.camera-display {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

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

p {
  text-align: center;
  color: #666;
  font-size: 1.125rem;
}
</style>