From e19fe4f585b93f7d91c7e6c533e586e5af06b524 Mon Sep 17 00:00:00 2001
From: chengyu <chengyu@zilber.cn>
Date: Fri, 16 May 2025 17:38:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/dahua/demo.html           |  20 ++-
 src/views/large-screen/api.js    |  39 +++++-
 src/views/large-screen/index.vue |   9 +-
 src/views/large-screen/video.vue | 215 +++++++++++++++++++++++++++++++
 4 files changed, 276 insertions(+), 7 deletions(-)
 create mode 100644 src/views/large-screen/video.vue

diff --git a/public/dahua/demo.html b/public/dahua/demo.html
index 01be4aff..095af42d 100644
--- a/public/dahua/demo.html
+++ b/public/dahua/demo.html
@@ -18,6 +18,9 @@
         }
         .container {
             display: flex;
+            padding: 0 10px !important;
+            margin: 0!important;
+            max-width: none;
         }
         .real-container,
         .record-container {
@@ -74,9 +77,9 @@
     <!-- 中间内容部分 -->
     <div class="container">
         <div class="real-container">
-            实时预览：
+            <span id="real-title">实时预览：</span>
             <div id="ws-real-player" style="height: 500px; margin-bottom: 20px;"></div>
-            <div>
+            <div id="real-btn-box">
                 <button type="button" class="btn btn-outline-primary" id="real-btn">实时预览</button>
                 <button type="button" class="btn btn-outline-primary" id="close-real">关闭预览</button>
                 <!-- <button type="button" class="btn btn-outline-primary" id="talk-btn">开始对讲</button> -->
@@ -99,6 +102,17 @@
     <script type="text/javascript" src="/dahua/lib/WSPlayer/PlaySDKInterface.js"></script>
     <script type="text/javascript" src="/dahua/lib/WSPlayer/WSPlayer.js"></script>
     <script type="module">
+        //获取参数real
+        let isReal = window.location.href.indexOf('real') !== -1 ? true : false;
+        if(isReal){
+            document.getElementsByClassName('record-container')[0].style.display = 'none';
+            document.getElementById('real-title').style.display = 'none';
+            document.getElementById('real-btn-box').style.display = 'none';
+            let readDom = document.getElementsByClassName('real-container')[0];
+            readDom.style.width = '100%';
+        } 
+
+
         // record-date默认今日
         document.getElementById('date').value = new Date().toISOString().split('T')[0];
         let cameraInfo;
@@ -116,7 +130,6 @@
                 recordInfo = event.data.data;
                 playRecord()
             }
-            
         });
         function isMobile() {
             // 正则表达式匹配常见的移动端平台关键字
@@ -165,6 +178,7 @@
                     case 'initializationCompleted':
                         console.log('初始化完成')
                         realPlayer.setPlayerAdapter("stretching")
+                        if(isReal) window.parent.postMessage({type: 'startVideo'}, '*')
                         // playReal()
                         // 初始化完成，可调用播放方法（适用于动态加载解码库）
                         // 若回调未触发时就使用实时预览/录像回放，则无法播放。
diff --git a/src/views/large-screen/api.js b/src/views/large-screen/api.js
index 0ed97656..848328c6 100644
--- a/src/views/large-screen/api.js
+++ b/src/views/large-screen/api.js
@@ -76,4 +76,41 @@ export const iwarnlist = (arg) => {
         params: arg,
         dataType: 'json'
     })
-}
\ No newline at end of file
+}
+
+// 查询设备数据：
+export const getDevicePage = (arg) => {
+    return axios.request({
+      url: '/dahua/brm/getDevicePage',
+      method: 'post',
+      data: arg,
+      dataType: 'json',
+    })
+  }
+  // 查询实时流：
+  export const getRtspUrl = (arg) => {
+    return axios.request({
+      url: '/dahua/video/getRtspUrl',
+      method: 'post',
+      data: arg,
+      dataType: 'json',
+    })
+  }
+  // 查询录像：
+  export const getPlaybackByTimeRtspUrl = (arg) => {
+    return axios.request({
+      url: '/dahua/video/getPlaybackByTimeRtspUrl ',
+      method: 'post',
+      data: arg,
+      dataType: 'json',
+    })
+  }
+  // 查询录像记录：
+  export const getRegularVideoRecords = (arg) => {
+    return axios.request({
+      url: '/dahua/video/getRegularVideoRecords ',
+      method: 'post',
+      data: arg,
+      dataType: 'json',
+    })
+  }
\ No newline at end of file
diff --git a/src/views/large-screen/index.vue b/src/views/large-screen/index.vue
index 06a5e294..8111a324 100644
--- a/src/views/large-screen/index.vue
+++ b/src/views/large-screen/index.vue
@@ -2,7 +2,7 @@
     <div class="data-screen" element-loading-text="加载中请稍后..." v-loading="state.loading">
         <div class="topheader">
             <div class="gradient">
-                智慧工地数据看板
+                辽沈集团新火工区项目智慧工地数据看板
             </div>
             <div class="xitong" @click="Jump()"></div>
         </div>
@@ -222,7 +222,8 @@
                 </div>
                 <!-- 门禁记录 -->
                 <div class="center-top-item">
-                    <div class="boxtitle">门禁记录</div>
+                    <myVideo></myVideo>
+                    <!-- <div class="boxtitle">门禁记录</div>
                     <div class="center-item">
                         <div class="alarm-table-header">
                             <div>序号</div>
@@ -267,7 +268,7 @@
                                 </div>
                             </vue3-seamless-scroll>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
                 <!-- 施工人员工种分析  and   车辆机械设备统计 -->
                 <div class="right-top-item">
@@ -291,6 +292,7 @@
 </template>
 <script setup>
 import promptfrom from "../../components/prompt/index";
+import myVideo from './video.vue'
 import { ref, onMounted, reactive, nextTick } from 'vue'
 import { echartsZhu, echartsBing } from "./echartsOptions";
 import { echart } from "../../echarts";
@@ -940,6 +942,7 @@ function engineeringLog(params) {
     background: linear-gradient(270.0000000000008deg, #F2F7FF 0%, #D4F7FF 50%, #F2F7FF 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    font-size: 2rem;
 }
 
 .data-screen {
diff --git a/src/views/large-screen/video.vue b/src/views/large-screen/video.vue
new file mode 100644
index 00000000..35e88903
--- /dev/null
+++ b/src/views/large-screen/video.vue
@@ -0,0 +1,215 @@
+<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
+  }).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-container">
+    <!-- 监控摄像头名称列表 -->
+    <div class="camera-name-list">
+      <template v-for="(camera, index) in state.cameraList" :key="index">
+        <span 
+          class="camera-name" 
+          @click="switchCamera(index)"
+          :class="{ active: state.currentCameraIndex === index }"
+        >
+          {{ camera.deviceName }}
+          <el-tag style="scale: 0.8;position: absolute;top: -10px;right:-15px;border-radius: 20px;" :type="camera.isOnline == 1 ? 'success':'danger'">{{ camera.isOnline == 1 ? '在线' : '离线' }}</el-tag>
+        </span>
+      </template>
+    </div>
+    <!-- 摄像头展示区域 -->
+    <div class="camera-display">
+      <iframe id="video" src="/dahua/demo.html?real=true" style="width:100%;height:100%;" frameborder="0"></iframe>
+      <!-- <video 
+        v-if="state.currentCameraIndex !== -1" 
+        :src="cameraList[state.currentCameraIndex].source" 
+        controls 
+        autoplay 
+        muted
+      ></video> -->
+      <!-- <p v-else>请选择摄像头</p> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 20px;
+  height: calc(100vh - 135px);
+}
+
+.camera-name-list {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 130px;
+  height: 100%;
+  overflow-y:  auto;
+}
+
+.camera-name {
+  padding: 8px 32px;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: white;
+  position: relative;
+}
+
+.camera-name:hover {
+  background-color: #e0e0e0;
+  transform: translateY(-2px);
+}
+
+.camera-name.active {
+  background-color: #2196F3;
+  color: white;
+  border-color: #2196F3;
+}
+
+.camera-display {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+video {
+  width: 100%;
+  height: auto;
+}
+
+p {
+  text-align: center;
+  color: #666;
+  font-size: 18px;
+}
+</style>