From 4271e03da068f8cfcaabc455e95bffc05673ef13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LAPTOP-S9HJSOEB=5C=E6=98=8A=E5=A4=A9?=
 <wang.haotian@hzleaper.com>
Date: Thu, 25 Jul 2024 16:16:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=90=83=E6=9C=BA=E5=9B=9E=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/http/http-api.js          |   5 +
 src/router/index.js               |   9 +
 src/views/videoPlayback/index.vue | 410 ++++++++++++++++++++++++++++++
 3 files changed, 424 insertions(+)
 create mode 100644 src/views/videoPlayback/index.vue

diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index d094c23..bdd5d84 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -25,6 +25,11 @@ export default  {
         url: "/street/list",
         name: "获取全部巷道列表"
     },
+    cameraRecord: {
+        method: "POST",
+        url: "/cameraRecord/record",
+        name: "球机回放信息"
+    },
     addStreet: {
         method: "POST",
         url: "/street",
diff --git a/src/router/index.js b/src/router/index.js
index e9677a3..3d69287 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -104,6 +104,15 @@ const routes = [
 
             },
 
+            {
+                path: 'videoPlayback',
+                name: 'videoPlayback',
+                meta: {
+                    icon: 'tag',
+                    name: '记录回放',
+                },
+                component: () => import('@/views/videoPlayback/index'),
+            },
             {
                 path: 'historyMonitoring',
                 name: 'historyMonitoring',
diff --git a/src/views/videoPlayback/index.vue b/src/views/videoPlayback/index.vue
new file mode 100644
index 0000000..6659811
--- /dev/null
+++ b/src/views/videoPlayback/index.vue
@@ -0,0 +1,410 @@
+<template>
+    
+  <a-row type="flex" :gutter="30">
+
+    <a-col :flex="1"> 
+    时间：<a-date-picker v-model="date" format="YYYY-MM-DD" placeholder="请选择时间" @change="cameraRecord"/>
+    <section style="height: 80vh;overflow: hidden; 
+  overflow-y: scroll;">    
+        <a-tree
+    :tree-data="treeData"
+    :check-strictly="true"
+    @select="handleCheck">
+        </a-tree>
+    </section>
+
+</a-col>
+    <a-col :flex="13"> 
+        <div>
+    <div class="time-display">
+    <!-- 视频 -->
+    <video ref="videoPlayer" muted style=" display: flex;"  width="100%" >
+      <source :src="currentVideoUrl" type="video/mp4" />
+    </video>
+    </div>
+    <!-- 滑动轴 -->
+    <div class="zoom-buttons" width="100%" >
+    <!-- <a-button-group>
+      <a-button  icon="arrows-alt" :disabled="zoom" @click="handleZoomIn"></a-button> 
+      <a-button  icon="shrink" :disabled="shrink" @click="handleZoomOut"></a-button>
+    </a-button-group> -->
+  </div>
+
+    <a-slider
+      ref="slider"
+      :marks="marks"
+      class="progress-bar"
+      :max="totalDuration"
+      :tip-formatter="formatter"
+      :value="currentTime" 
+      :disabled="Object.keys(urls).length === 0"
+      @change="onSliderChange"
+    />
+    
+    <div class="time-display">
+    <a-button-group>
+      <a-button icon="step-backward" :disabled="Object.keys(urls).length === 0" @click="moveForward(-5)" />
+      <a-button v-if="isPlaying" :disabled="Object.keys(urls).length === 0" icon="pause" @click="pauseVideo" />
+      <a-button v-else icon="play-circle" :disabled="Object.keys(urls).length === 0" @click="playVideo" />
+      <a-button icon="step-forward" :disabled="Object.keys(urls).length === 0" @click="moveForward(5)" />
+    </a-button-group>
+  </div>
+  </div>
+</a-col>
+   
+  </a-row>
+ 
+</template>
+
+<script>
+import { Slider, Button, ButtonGroup } from 'ant-design-vue';
+
+
+import moment from 'moment'
+
+import { message } from 'ant-design-vue';
+export default {
+    components: {
+        ASlider: Slider,
+        AButton: Button,
+        AButtonGroup: ButtonGroup,
+    },
+    data() {
+        return {
+            totalDuration: 24*60*60, // 假设视频总时长为60s
+            //数据轴上的数值
+            currentTime: 0,
+            //数据轴上的开始时间
+            startTimeLong: 0,
+            //数据轴上的结束时间
+            endTimeLong: 24*60*60,
+            //当天记录的结束的时间绝对值
+            maxTimeLong:24*60*60,
+            //当天记录的开始的时间绝对值
+            minTimeLong: 0*60*60,
+            date:  this.getYesterday() ,
+            currentVideoUrl: '', // 当前视频的 URL
+            value1: '2023-10-11',
+            urls:{
+            },
+            URLStartTime: 0,
+            isPlaying: false, // 视频是否正在播放
+            marks:{},
+            zoom:false,
+            shrink:true,
+            treeData: [],
+            cameraId:'',
+        };
+    },
+    mounted() {
+        const video = this.$refs.videoPlayer;
+        video.addEventListener('timeupdate', this.onVideoTimeUpdate);
+        video.addEventListener('ended', this.playNextVideo);
+        console.log(this.getTimeMap());
+        this.totalDuration = this.endTimeLong -this.startTimeLong;
+        this.marks = this.getTimeMap();
+        console.log(this.date);
+        this.getTree()
+        this.cameraRecord()
+    },
+    beforeDestroy() {
+        const video = this.$refs.videoPlayer;
+        video.removeEventListener('timeupdate', this.onVideoTimeUpdate);
+        video.removeEventListener('ended', this.playNextVideo);
+    },
+    methods: { 
+        getYesterday(){
+            const now = moment();
+            return now.subtract(1, 'days')
+        },
+        scaleTime(rate) {
+            const middle = this.startTimeLong +this.currentTime;
+
+            // 计算开始时间到中间时间的毫秒数
+            const startToMiddleMs = middle - this.startTimeLong;
+            // 计算结束时间到中间时间的毫秒数
+            const endToMiddleMs = this.endTimeLong - middle;
+            // 缩小或放大开始时间
+            const scaledStart = middle -Math.floor( startToMiddleMs * rate);
+            console.log("开始缩小时间"+ scaledStart);
+            // 缩小或放大结束时间
+            const scaledEnd =middle +Math.floor( endToMiddleMs * rate);
+            console.log("结束缩小时间"+ scaledEnd);
+
+            // 检查是否超出当天时间的范围并赋值
+            this.startTimeLong = this.minTimeLong>scaledStart?this.minTimeLong : scaledStart;
+            this.endTimeLong = this.maxTimeLong<scaledEnd?this.maxTimeLong : scaledEnd;
+            //时间修改
+
+
+
+            if(this.minTimeLong<scaledStart || this.maxTimeLong>scaledEnd){
+                this.shrink=false;
+            }else{
+                this.shrink=true;
+            }
+            console.log("zhou"+middle);
+            this.updateslider(middle)
+        },
+        formatTime(seconds) {
+            seconds = seconds%(60*60*24);
+            const hour = Math.floor(seconds / 3600);
+            const minute = Math.floor((seconds % 3600) / 60);
+            const second = seconds % 60;
+
+            return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
+        },
+        // 点击放大按钮触发的方法
+        handleZoomIn() {
+
+            this.scaleTime(0.5)
+        },
+        // 点击缩小按钮触发的方法
+        handleZoomOut() {
+            this.scaleTime(2)
+        },
+        //根据开始时间修改时间轴（轴位置不变，请在外部修改）
+        updateslider(middle){
+
+            this.totalDuration = this.endTimeLong - this.startTimeLong;
+            console.log("轴上数值为："+(middle-this.startTimeLong));
+            this.currentTime = (middle-this.startTimeLong);
+            this.marks = this.getTimeMap();
+        },
+        getTree(){
+            this.$api.httpApi.getAllStreet({
+            }).then(res => {
+                console.log("update data")
+                for(let i = 0;i<res.data.length;i++){
+                    // 创建空对象
+                    const obj = {};
+                    // 添加属性和值
+                    obj["title"] = res.data[i].name;
+                    obj["key"] = res.data[i].id;
+                    obj["type"] = 0
+                    obj["children"] =[];
+                    if( res.data[i].camera1Id !=""){
+                        const obj1 = {};
+                        obj1["title"] = res.data[i].camera1Name
+                        obj1["key"] = res.data[i].camera1Id
+                        obj1["type"] = 1
+                        obj["children"].push(obj1)
+                    }
+                    if( res.data[i].camera2Id !=""){
+                        const obj1 = {};
+                        obj1["title"] = res.data[i].camera2Name
+                        obj1["key"] = res.data[i].camera2Id
+                        obj1["type"] = 1
+                        obj["children"].push(obj1)
+                    }
+                    this.treeData.push(obj)
+                }
+                console.log(this.treeData);
+            }).catch(err => {
+
+            });
+        },
+        getTimeMap() {
+            const diff  = this.endTimeLong - this.startTimeLong; // 计算时间差，单位为秒
+            console.log(diff + "       qqq");
+            const map = {};
+            if (diff >= 60 * 60 * 3) {
+                this.TimeMapErgodic(60*60,map);
+		    } else if (diff >= 60 * 60) {
+		        // 如果大于等于1小时小于3小时每15分钟一个标识
+                this.TimeMapErgodic(15*60,map);
+    		} else if (diff >= 60*20) {
+                this.zoom = false;
+    		    // 如果大于等于20分钟小于1小时每5分钟一个标识
+                this.TimeMapErgodic(5*60,map);
+    		} else if (diff >= 5* 60) {
+                this.zoom = false;
+    		// 如果大于等于5分钟小于20分钟每分钟一个标识
+                this.TimeMapErgodic(60,map);
+    		} else if (diff >= 30) {
+                this.zoom = false;
+    		    // 如果小于5分钟大于1m每30s一个标识
+                console.log("如果小于5分钟大于1m每30s一个标识");
+                console.log(startTime +"        "+endTime)
+                this.TimeMapErgodic(30,map);
+    		} else if (diff >= 10) {
+                this.zoom = true;
+    		    // 如果小于1m大于10s 5s标识
+                this.TimeMapErgodic(5,map);
+    		} else {
+                this.zoom = true;
+    		    // 如果小于10s 1s标识
+                this.TimeMapErgodic(1,map);
+	    	}
+            return map;
+        },
+        //遍历获取time映射
+        TimeMapErgodic(interval,map){
+            const startTime  =Math.ceil(this.startTimeLong/(interval)) *interval;
+            const endTime  =Math.floor(this.endTimeLong/(interval))*interval;
+            for (let i = startTime ; i<= endTime; i+=interval) {
+
+	    		const minuteDiff = (i - this.startTimeLong) ;
+	    		map[minuteDiff] = `${String(Math.floor(i/(60*60))).padStart(2, '0')}:${String(Math.floor((i%(60*60))/(60))).padStart(2, '0')}:${String((i%(60))).padStart(2, '0')}`;
+	    	}
+            return map;
+        },
+        //将秒数转为 时分秒
+        formatter(value)  {
+            const i = this.startTimeLong + value
+            // 格式化输出新的时间
+            const hours = String(Math.floor(i/(60*60))).padStart(2, '0');
+            const minutes = String(Math.floor((i%(60*60))/(60))).padStart(2, '0');
+            const seconds = String(Math.floor((i%(60)))).padStart(2, '0');
+
+            return `${hours}:${minutes}:${seconds}`;
+        },
+        //二分法
+        binarySearchMax(arr, target) {
+            let left = 0;
+            let right = arr.length - 1;
+            let max = -Infinity;
+            console.log(arr);
+            while (left <= right) {
+                const mid = Math.floor((left + right) / 2);
+
+                if (arr[mid] <= target) {
+                    max = Math.max(max, arr[mid]);
+                    left = mid + 1;
+                } else {
+                    right = mid - 1;
+                }
+            }
+            return max;
+        },
+        //横轴改变
+        onSliderChange(value) {
+            console.log(value);
+            this.URLStartTime = this.binarySearchMax(Object.keys(this.urls),value+this.minTimeLong);
+            this.currentVideoUrl = this.urls[this.URLStartTime] 
+            this.currentTime = value;
+            const video = this.$refs.videoPlayer;
+
+            video.currentTime = value +this.startTimeLong-this.URLStartTime ;
+        },
+        //视频时间改变
+        onVideoTimeUpdate() {
+            const video = this.$refs.videoPlayer;
+            console.log("视频时间"+(this.URLStartTime + video.currentTime));
+            this.currentTime =this.URLStartTime + video.currentTime-this.startTimeLong;
+        },
+        //向后
+        moveForward(duration) {
+            console.log("111");
+            const newTime = this.currentTime + duration;
+            if (newTime >= 0 ||newTime <= this.totalDuration) {
+                this.currentTime = newTime;
+                const video = this.$refs.videoPlayer;
+                video.currentTime = newTime;
+            }
+        },
+        playVideo() {
+            const video = this.$refs.videoPlayer;
+            this.isPlaying = true;
+            console.log( this.currentTime +this.startTimeLong - this.URLStartTime);
+            video.currentTime = this.currentTime +this.startTimeLong - this.URLStartTime
+            video.play();
+        },
+        pauseVideo() {
+            const video = this.$refs.videoPlayer;
+            this.isPlaying = false;
+            video.pause();
+        },
+        playNextVideo() { 
+            let nextKey =this.URLStartTime;
+
+            const keys = Object.keys(this.urls);
+
+            // 找到当前键的索引
+            const currentIndex = keys.indexOf(this.URLStartTime.toString());
+            console.log(keys);
+            if (currentIndex !== -1 && currentIndex < keys.length - 1) {
+                nextKey = Number(keys[currentIndex + 1]);
+                const video = this.$refs.videoPlayer;
+                this.URLStartTime = nextKey;
+                
+                this.currentVideoUrl = this.urls[nextKey] ;
+                this.currentTime =this.URLStartTime;
+                video.currentTime =0;
+                video.play();
+            }
+
+        },
+        handleCheck(selectedKeys, e){
+            if(e.selectedNodes[0].data.props.type == 1){
+                this.cameraId = e.selectedNodes[0].data.key;
+                console.log(e.selectedNodes[0].data);
+                this.cameraRecord()
+            }
+            console.log(e.selectedNodes[0].data.props);
+        },
+        cameraRecord(){
+            this.$api.httpApi.cameraRecord({
+                data: {
+                    date: this.date._d.getFullYear() + '-' + (this.date._d.getMonth() + 1) + '-' + this.date._d.getDate(),
+                    cameraId: this.cameraId,
+                }
+            }).then(res => {
+                console.log("update data")
+                if( (res.data.startTimeLong !== null && res.data.startTimeLong !== undefined && res.data.startTimeLong !== "")
+                ||( res.data.endTimeLong !== null && res.data.endTimeLong!== undefined &&res.data.endTimeLong !== '')){
+                }
+                if(res.data.urls !== null && res.data.urls !== undefined && Object.keys(res.data.urls).length >0){
+                    
+                    this.startTimeLong = res.data.startTimeLong
+                    this.endTimeLong = res.data.endTimeLong
+                    this.minTimeLong = res.data.startTimeLong
+                    this.maxTimeLong = res.data.endTimeLong
+                    this.currentTime = 0
+                    this.totalDuration =  res.data.endTimeLong - res.data.startTimeLong
+                    this.currentVideoUrl = res.data.urls[0].url
+                    const video = this.$refs.videoPlayer;
+                    video.currentTime = 0 ;
+                    const map = {};
+                    for(let i = 0;i<res.data.urls.length;i++){
+                        map[res.data.urls[i].startTimeLong] = res.data.urls[i].url
+                    }
+                    this.urls = map
+                    
+                    this.marks = this.getTimeMap();
+                    console.log(map);
+                }else{
+                    if(this.cameraId !== null && this.cameraId !== undefined && this.cameraId !== ""){
+                        message.info('此摄像头该日期未录像');
+                    }
+                    
+                }
+            }).catch(err => {
+                console.log(err);
+
+            });
+        }
+    },
+};
+</script>
+
+<style>
+  .progress-bar .ant-slider-rail {
+    background-color: lightgray;
+  }
+
+  .progress-bar .ant-slider-track {
+    background-color: dodgerblue;
+  }
+
+  .time-display {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .zoom-buttons {
+  text-align: right;
+  margin-bottom: 16px;
+}
+</style>