添加预览 添加摄像头回放，详情

src/api/system/video.js

@@ -38,3 +38,18 @@ export function getStream(deviceSerial,accessToken) {
     }
   })
 }
+
+// 根据信息查询历史记录流
+export function getHistoryStream(deviceSerial,accessToken,startTime,endTime) {
+  return request({
+    url: '/hikvision/getYsHistoryStream',
+    method: 'get',
+    params: {
+      deviceSerial: deviceSerial
+      , accessToken: accessToken,
+      startTime: startTime,
+      endTime: endTime
+    }
+  })
+}
+

src/components/TopNav/index.vue

@@ -22,6 +22,8 @@
         <i style="width: 10px; height: 10px; margin-top: -12px"></i>
         首页
       </el-menu-item>
+    </template>
+      <template>
       <el-menu-item
         class="menuStyle"
         style="
@@ -38,6 +40,8 @@
         <i style="width: 10px; height: 10px; margin-top: -12px"></i>
         员工信息
       </el-menu-item>
+      </template>
+    <template>
       <el-menu-item
         class="menuStyle"
         style="
@@ -54,6 +58,8 @@
         <i style="width: 10px; height: 10px; margin-top: -12px"></i>
         历史记录
       </el-menu-item>
+    </template>
+    <template>
       <el-menu-item
         class="menuStyle"
         style="
@@ -211,7 +217,7 @@ export default {
     },
     getinfo() {
       let self = this;
-      self.backTag = this.$router.params.backTag;
+      // self.backTag = this.$router.params.backTag;
     },
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {

src/router/index.js

@@ -103,6 +103,20 @@ export const constantRoutes = [
       },
     ],
   },
+  {
+    path: "/detail",
+    component: Layout,
+    hidden: false,
+    redirect: "/detail",
+    children: [
+      {
+        path: "detail",
+        component: () => import("@/views/video/detail"),
+        name: "Detail",
+        meta: { title: "视频详情", icon: "user" },
+      },
+    ],
+  },
   {
     path: "/monitoringPlayback",
     component: Layout,

src/views/video/index.vue

@@ -2,8 +2,8 @@
 <template>
   <div style="background-color: #D4D9E5">
     <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;box-shadow: #2b2f3a 0px 0px 20px" @click="abv">
-        <div id="video-container" style="width: 910px; height: 400px" @click="abv">
+      <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>
         <div style="display: flex;">
           <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
@@ -16,7 +16,7 @@
                      @click="capturePicture"></el-button>
         </div>
       </div>
-      <div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246">
+      <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>
         <div style="display: flex;">
@@ -33,7 +33,7 @@
 
     </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">
+      <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>
         <div style="display: flex;justify-content: space-between">
@@ -47,7 +47,7 @@
                      @click="capturePicture2"></el-button>
         </div>
       </div>
-      <div id="video-container-out" style="width: 910px; height: 435px;background-color: #424246">
+      <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>
         <div style="display: flex;justify-content: space-between">
@@ -72,6 +72,9 @@ export default {
   name: 'EZUIKitJs',
   data() {
     return {
+      containerWidth: 910,
+      containerHeight: 435,
+      isZoomed: false,
       // 录制按钮
       recordButton: true,
       recordButton1: true,
@@ -96,6 +99,26 @@ export default {
 
   },
   methods: {
+    handleDoubleClick(index) {
+      var devideCode = ''
+      switch (index) {
+          case 0:
+            devideCode = this.deviceList[0];break;
+        case 1:
+          devideCode = this.deviceList[1];break;
+        case 2:
+          devideCode = this.deviceList[2];break;
+        case 3:
+          devideCode = this.deviceList[3];break;
+      }
+      this.$router.push({
+        path: "/detail/detail",
+        query: {
+          deviceSerial: devideCode,
+          accessToken: this.accessToken
+        },
+      });
+    },
     abv(){
       // 跳转详情页面
       console.info('4456')
@@ -228,8 +251,8 @@ export default {
         // simple - 极简版; pcLive-pc直播；pcRec-pc回放；  mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
         template: 'simple', //模板
         plugin: ['talk'], // 加载插件，talk-对讲
-        width: 910,
-        height: 400,
+        width: this.containerWidth,
+        height: this.containerHeight - 35,
       })
     },
     fulScreen() {

src/views/video/playback.vue

 <template>
   <div class="playback">
-    <div ref="playWndBack" class="video-watch" id="playWndBack"></div>
+    <div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
+      <div id="video-container-out" style="width: 1404px; height: 750px;background-color: #424246;margin-right: 30px;box-shadow: #2b2f3a 0px 0px 20px" >
+        <div id="video-container" style="width: 1404px; height: 700px" >
+        </div>
+        <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="recordButton" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
+                     @click="startSave"></el-button>
+          <el-button v-if="!recordButton" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
+                     @click="stopSave">录制中</el-button>
+          <el-button icon="el-icon-camera" style="border: transparent;background-color: transparent;font-size: large" plain
+                     @click="capturePicture"></el-button>
+        </div>
+      </div>
+    </div>
     <div style="margin-right: 30px;margin-top: 60px">
       <el-form label-position="right" label-width="100px" :model="formLabelAlign">
         <el-form-item label="监控点名称">
@@ -25,15 +40,35 @@
 </template>
 
 <script>
+import EZUIKit from '../../../public/js/ezuikit'  //引入第三方插件
 import {getCameras} from "@/api/system/video";
 import videoParams from "@/views/video/videoParams";
 import {listHistable, getHistable, delHistable, addHistable, updateHistable} from "@/api/system/histable";
+import {getAccessToken,getDeviceList,getStream,getHistoryStream} from '@/api/system/video'
 
 
 export default {
   name: "playback",
   data() {
     return {
+      // startTime
+      startTime: '',
+      // endTime
+      endTime: '',
+      // 录制按钮
+      recordButton: true,
+      recordButton1: true,
+      recordButton2: true,
+      recordButton3: true,
+      // 设备信息列表
+      deviceList: [],
+      // token值
+      accessToken: '',
+      showButton: false,
+      player: null,
+      player1: null,
+      player2: null,
+      player3: null,
       carryRowCode:{},
       oWebControl: null,
       initCount: 0,
@@ -50,9 +85,22 @@ export default {
   },
   created() {
     this.carryRowCode = this.$route.query.carryRowCode;
+    this.startTime = this.$route.query.monitoringStarttime
+    this.endTime = this.$route.query.monitoringFinallytime
+    console.info('时间参数')
+    console.info(this.startTime)
+    console.info(this.endTime)
   },
   mounted() {
-    this.getIndex()
+    console.info('路由传递数据',this.$route.query.carryRowCode)
+    this.carryRowCode = this.$route.query.carryRowCode;
+    this.startTime = this.$route.query.carryRowCode.monitoringStarttime
+    this.endTime = this.$route.query.carryRowCode.monitoringFinallytime
+    console.info('时间参数')
+    console.info(this.startTime)
+    console.info(this.endTime)
+    // this.getIndex()
+    this.getToken()
   },
   beforeRouteLeave(to, from, next) {
     if (this.oWebControl != null){
@@ -71,10 +119,74 @@ export default {
   beforeDestroy() {
   },
   methods: {
-    getIndex() {
-      this.cameraIndexCode = '275e201d228c4073b462ad1d9865d3cc'
-      this.initPlugin();
+    fulScreen() {
+      this.player.fullScreen()
+    },
+    startSave() {
+      var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
+      // 将开始录制按钮隐藏
+      this.recordButton = false
+      startSavePromise.then((data) => {
+        console.log("promise 获取 数据", data);
+      });
+    },
+    // 结束录制
+    stopSave() {
+      var stopSavePromise = this.player.stopSave();
+      // 显示开始录制
+      this.recordButton = true
+      stopSavePromise.then((data) => {
+        console.log("promise 获取 数据", data);
+      });
+    },
+    capturePicture() {
+      var capturePicturePromise = this.player.capturePicture(
+        `${new Date().getTime()}`
+      );
+      capturePicturePromise.then((data) => {
+        console.log("promise 获取 数据", data);
+      });
+    },
+    getToken() {
+      getAccessToken().then(response => {
+        console.log('查看获取的token值',response)
+        if (response.data.code == 200) {
+          console.log('查看获取的token值',response.data.data)
+          this.accessToken = response.data.data.accessToken
+          this.getHistoryStream(response.data.data.accessToken)
+          // this.getInit(this.accessToken)
+        }
+      })
+    },
+    // 根据传递的设备编号以及token以及开始时间结束时间获取获取url
+    getHistoryStream(token){
+      console.info('1111')
+      getHistoryStream(this.carryRowCode,token,this.startTime,this.endTime).then(res => {
+        console.info("4564",res)
+        if(res.data){
+          this.getInit()
+        }
+      })
     },
+
+    getInit(token,videoUrl){
+      console.info('视频流是',videoUrl)
+      this.player = new EZUIKit.EZUIKitPlayer({
+        id: 'video-container', // 视频容器ID
+        accessToken: 'at.9lcurm31d95uy8x214qfw0d84a2ks1mf-7egp0jjnr5-0whlhqz-j7dkim7lh',
+        url: 'ezopen://open.ys7.com/AW5687499/1.hd.local.rec?begin=20240805100000&end=20240805235959',
+        // simple - 极简版; pcLive-pc直播；pcRec-pc回放；  mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
+        template: 'simple', //模板
+        plugin: ['talk'], // 加载插件，talk-对讲
+        width: 1404,
+        height: 700,
+      })
+    },
+
+    // getIndex() {
+    //   this.cameraIndexCode = '275e201d228c4073b462ad1d9865d3cc'
+    //   this.initPlugin();
+    // },
     startPreview() {
       var cameraIndexCode  = this.cameraIndexCode;         //获取输入的监控点编号值，必填
       var startTimeStamp = new Date('2024-07-01'.replace('-', '/').replace('-', '/')).getTime();    //回放开始时间戳，必填
@@ -236,7 +348,7 @@ export default {
   margin-top: 20px;
   margin-left: 40px;
   margin-right: 40px;
-  height: 1000px;
+  height: 820px;
   background: white;
 }
 .video-watch{