修改历史页面的名称列表

src/api/system/video.js

@@ -53,3 +53,11 @@ export function getHistoryStream(deviceSerial,accessToken,startTime,endTime) {
   })
 }
 
+// 查看全部的设备信息
+export function getHistoryCreams() {
+  return request({
+    url: '/hikvision/getAllYsCameras',
+    method: 'get'
+  })
+}
+

src/components/TopNav/index.vue

 <template>
   <el-menu
-    :default-active="currentIndex ? '/monitoring/video' : currentIndex"
+    :default-active="currentIndex"
     mode="horizontal"
     active-text-color="#ffd04b"
     @select="handleSelect"

src/views/history/index.vue

@@ -40,10 +40,7 @@
             placeholder="请输入监控点名称"
             clearable
           >
-            <el-option value="01" label="Camera 01">Camera 01</el-option>
-            <el-option value="02" label="Camera 02">Camera 02</el-option>
-            <el-option value="03" label="Camera 03">Camera 03</el-option>
-            <el-option value="04" label="Camera 04">Camera 04</el-option>
+            <el-option v-for="(item,index) in deviceNameList " :key = index :value="item" :label="item">{{ item }}</el-option>
           </el-select>
         </el-form-item>
 
@@ -249,12 +246,15 @@ import {
   updateHistable,
 } from "@/api/system/histable";
 import { parseTime } from "../../utils/ruoyi";
+import { getHistoryCreams } from "@/api/system/video"
 
 export default {
   name: "Histable",
   dicts: ["history_state"],
   data() {
     return {
+      // 设备名称列表
+      deviceNameList: [],
       carryRowCode: {
         id: "",
         monitoringName: "",
@@ -308,6 +308,15 @@ export default {
       return (this.currentPage - 1) * this.total;
     },
   },
+  mounted() {
+    getHistoryCreams().then(res => {
+      if(res.code == 200) {
+        this.deviceNameList = res.data
+      } else {
+        this.$message.error("获取设备列表失败")
+      }
+    })
+  },
 
   methods: {
     handleSizeChange(val) {

src/views/video/detail.vue

 
 <template>
   <div style="background-color: #D4D9E5">
-    <div class="hello-ezuikit-js" style="padding:20px 30px;display: flex;background-color: white;margin: 20px 30px">
+    <div class="hello-ezuikit-js" style="padding:20px 30px;display: flex;margin: 20px 10px">
       <div id="video-container-out" :style="{width: '100%', height: '83vh', backgroundColor: '#424246', marginRight: '30px' ,boxShadow: '#2b2f3a 0px 0px 20px'}" @dblclick="handleDoubleClick">
         <div id="video-container" style="width: 100%; height: 78vh" @click="abv" >
         </div>
@@ -161,7 +161,7 @@ export default {
         // simple - 极简版; pcLive-pc直播；pcRec-pc回放；  mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
         template: 'simple', //模板
         plugin: ['talk'], // 加载插件，talk-对讲
-        width: 1770,
+        width: 1830,
         height: 750,
       })
     },

src/views/video/index.vue

 
 <template>
   <div style="background-color: #D4D9E5">
-    <div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
-      <div id="video-container-out" :style="{width: 910 + 'px', height: 435 + 'px', backgroundColor: '#424246', marginRight: '30px' ,boxShadow: '#2b2f3a 0px 0px 20px'}" @dblclick="handleDoubleClick(0)">
-        <div id="video-container" style="width: 910px; height: 400px" @click="abv" >
+    <div class="hello-ezuikit-js" style="padding:13px 30px;display: flex">
+      <div id="video-container-out" :style="{width: 910 + 'px', height: 415 + 'px', backgroundColor: '#424246', marginRight: '30px' ,boxShadow: '#2b2f3a 0px 0px 20px'}" @dblclick="handleDoubleClick(0)">
+        <div id="video-container" style="width: 910px; height: 380px" @click="abv" >
         </div>
         <div style="display: flex;">
           <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
@@ -16,8 +16,8 @@
                      @click="capturePicture"></el-button>
         </div>
       </div>
-      <div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246" @dblclick="handleDoubleClick(1)">
-        <div id="video-container1" style="width: 910px; height: 400px">
+      <div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;boxShadow: #2b2f3a 0px 0px 20px" @dblclick="handleDoubleClick(1)">
+        <div id="video-container1" style="width: 910px; height: 380px">
         </div>
         <div style="display: flex;">
           <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
@@ -32,11 +32,11 @@
       </div>
 
     </div>
-    <div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
-      <div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246;margin-right: 30px"  @dblclick="handleDoubleClick(2)">
-        <div id="video-container2" style="width: 910px; height: 400px">
+    <div class="hello-ezuikit-js" style="padding:10px 30px;display: flex">
+      <div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;margin-right: 30px;boxShadow: #2b2f3a 0px 0px 20px"  @dblclick="handleDoubleClick(2)">
+        <div id="video-container2" style="width: 910px; height: 380px">
         </div>
-        <div style="display: flex;justify-content: space-between">
+        <div style="display: flex;">
           <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
                      @click="fulScreen2"></el-button>
           <el-button v-if="recordButton2" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@@ -47,10 +47,10 @@
                      @click="capturePicture2"></el-button>
         </div>
       </div>
-      <div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246"  @dblclick="handleDoubleClick(3)">
-        <div id="video-container3" style="width: 910px; height: 400px">
+      <div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;boxShadow: #2b2f3a 0px 0px 20px"  @dblclick="handleDoubleClick(3)">
+        <div id="video-container3" style="width: 910px; height: 380px">
         </div>
-        <div style="display: flex;justify-content: space-between">
+        <div style="display: flex;">
           <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
                      @click="fulScreen"></el-button>
           <el-button v-if="recordButton3" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@@ -159,7 +159,7 @@ export default {
           if (res.data.code == 200){
             //成功
             this.getInit(this.accessToken,res.data.data.url)
-            this.getInit1(this.accessToken,res.data.data.url)
+            // this.getInit1(this.accessToken,res.data.data.url)
             // this.getInit2(this.accessToken,res.data.data.url)
             // this.getInit3(this.accessToken,res.data.data.url)
           } else {
@@ -185,17 +185,18 @@ export default {
           console.info('视频流是5',res)
         })
       } else if(this.deviceList.length == 4) {
+
         getStream(this.deviceList[0],this.accessToken).then(res => {
-          console.info('视频流是6',res)
+          this.getInit(this.accessToken,res.data.data.url)
         })
         getStream(this.deviceList[1],this.accessToken).then(res => {
-          console.info('视频流是7',res)
+          this.getInit1(this.accessToken,res.data.data.url)
         })
         getStream(this.deviceList[2],this.accessToken).then(res => {
-          console.info('视频流是8',res)
+          this.getInit2(this.accessToken,res.data.data.url)
         })
         getStream(this.deviceList[3],this.accessToken).then(res => {
-          console.info('视频流是9',res)
+          this.getInit3(this.accessToken,res.data.data.url)
         })
       } else {
         this.$message.error("设备超出请联系管理员进行扩充")
@@ -208,12 +209,12 @@ export default {
       this.player = new EZUIKit.EZUIKitPlayer({
         id: 'video-container', // 视频容器ID
         accessToken: token,
-        url: 'ezopen://open.ys7.com/AW5687499/1.hd.local.rec?begin=20240805100000&end=20240805235959',
+        url: videoUrl,
         // simple - 极简版; pcLive-pc直播；pcRec-pc回放；  mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
         template: 'simple', //模板
         plugin: ['talk'], // 加载插件，talk-对讲
         width: 910,
-        height: 400,
+        height: 380,
       })
     },
     getInit1(token,videoUrl){
@@ -226,7 +227,7 @@ export default {
         template: 'simple', //模板
         plugin: ['talk'], // 加载插件，talk-对讲
         width: 910,
-        height: 400,
+        height: 380,
       })
     },
     getInit2(token,videoUrl){
@@ -239,7 +240,7 @@ export default {
         template: 'simple', //模板
         plugin: ['talk'], // 加载插件，talk-对讲
         width: 910,
-        height: 400,
+        height: 380,
       })
     },
     getInit3(token,videoUrl){
@@ -251,8 +252,8 @@ export default {
         // simple - 极简版; pcLive-pc直播；pcRec-pc回放；  mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
         template: 'simple', //模板
         plugin: ['talk'], // 加载插件，talk-对讲
-        width: this.containerWidth,
-        height: this.containerHeight - 35,
+        width: 910,
+        height: 380,
       })
     },
     fulScreen() {