|
|
<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="60%"
|
|
|
>
|
|
|
<source
|
|
|
:src="'http://192.168.1.110:8007'+currentVideoUrl"
|
|
|
type="video/mp4"
|
|
|
/>
|
|
|
</video>
|
|
|
</div>
|
|
|
<!-- 滑动轴 'http://192.168.1.110:8007'+currentVideoUrl -->
|
|
|
<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: {},
|
|
|
mapByTime: {},
|
|
|
URLStartTime: 0,
|
|
|
isPlaying: false, // 视频是否正在播放
|
|
|
marks: {},
|
|
|
zoom: false,
|
|
|
shrink: true,
|
|
|
treeData: [],
|
|
|
cameraId: "",
|
|
|
playObject: {},
|
|
|
getSuccessUrl: [],
|
|
|
};
|
|
|
},
|
|
|
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: {
|
|
|
videoControl(seconds) {
|
|
|
//获取playObject参数
|
|
|
this.binarySearchMax(seconds);
|
|
|
//后台获取资源
|
|
|
if (!this.getSuccessUrl.includes(this.currentVideoUrl)) {
|
|
|
//加载视频
|
|
|
this.$api.httpApi
|
|
|
.cameraRecordConvetor({
|
|
|
data: {
|
|
|
url: this.currentVideoUrl,
|
|
|
},
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.getSuccessUrl.push(this.currentVideoUrl);
|
|
|
});
|
|
|
}
|
|
|
//读取MP4文件
|
|
|
|
|
|
const video = this.$refs.videoPlayer;
|
|
|
this.isPlaying = true;
|
|
|
|
|
|
video.load(); // 重新加载视频资源
|
|
|
//计算时间
|
|
|
video.currentTime =
|
|
|
this.currentTime - this.playObject.startTimeLong;
|
|
|
//播放或停止
|
|
|
if (this.isPlaying) {
|
|
|
video.play();
|
|
|
} else {
|
|
|
video.pause();
|
|
|
}
|
|
|
},
|
|
|
//获取前一天
|
|
|
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}`;
|
|
|
},
|
|
|
//当改变横轴时，获取视频开始时间和url
|
|
|
binarySearchMax(target) {
|
|
|
var maxSmaller = null;
|
|
|
let nums = Object.keys(this.mapByTime);
|
|
|
//console.log(nums);
|
|
|
let num = 0;
|
|
|
for (let numString of nums) {
|
|
|
num = parseInt(this.mapByTime[numString].endTimeLong);
|
|
|
if (target < num) {
|
|
|
this.playObject = this.mapByTime[numString];
|
|
|
if (
|
|
|
!(
|
|
|
target >
|
|
|
parseInt(this.mapByTime[numString].startTimeLong)
|
|
|
)
|
|
|
) {
|
|
|
this.currentTime = parseInt(
|
|
|
this.mapByTime[numString].startTimeLong
|
|
|
);
|
|
|
} else {
|
|
|
this.currentTime = target;
|
|
|
}
|
|
|
this.currentVideoUrl = this.playObject.url;
|
|
|
|
|
|
console.log(this.currentVideoUrl);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
return maxSmaller;
|
|
|
},
|
|
|
//横轴改变
|
|
|
onSliderChange(value) {
|
|
|
this.videoControl(value);
|
|
|
},
|
|
|
//视频时间改变
|
|
|
onVideoTimeUpdate() {
|
|
|
const video = this.$refs.videoPlayer;
|
|
|
console.log(
|
|
|
"视频时间" + (this.playObject.startTimeLong + video.currentTime)
|
|
|
);
|
|
|
this.currentTime =
|
|
|
this.playObject.startTimeLong +
|
|
|
video.currentTime -
|
|
|
this.startTimeLong;
|
|
|
},
|
|
|
//左右调整
|
|
|
moveForward(duration) {
|
|
|
console.log("111");
|
|
|
this.videoControl(this.currentTime + duration)
|
|
|
|
|
|
},
|
|
|
playVideo() {
|
|
|
console.log(this.currentVideoUrl);
|
|
|
if (this.currentVideoUrl == null || this.currentVideoUrl == "") {
|
|
|
this.binarySearchMax(0);
|
|
|
}
|
|
|
//加载视频
|
|
|
console.log(this.getSuccessUrl.includes(this.currentVideoUrl));
|
|
|
|
|
|
if (!this.getSuccessUrl.includes(this.currentVideoUrl)) {
|
|
|
//加载视频
|
|
|
this.$api.httpApi
|
|
|
.cameraRecordConvetor({
|
|
|
data: {
|
|
|
url: this.currentVideoUrl,
|
|
|
},
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.getSuccessUrl.push(this.currentVideoUrl);
|
|
|
});
|
|
|
}
|
|
|
const video = this.$refs.videoPlayer;
|
|
|
this.isPlaying = true;
|
|
|
|
|
|
video.load(); // 重新加载视频资源
|
|
|
video.currentTime =
|
|
|
this.currentTime - this.playObject.startTimeLong;
|
|
|
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];
|
|
|
video.load(); // 重新加载视频资源
|
|
|
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;
|
|
|
const map = {};
|
|
|
const mapByTime = {};
|
|
|
for (let i = 0; i < res.data.urls.length; i++) {
|
|
|
map[res.data.urls[i].startTimeLong] =
|
|
|
res.data.urls[i].url;
|
|
|
}
|
|
|
|
|
|
for (let i = 0; i < res.data.urls.length; i++) {
|
|
|
mapByTime[res.data.urls[i].startTimeLong] =
|
|
|
res.data.urls[i];
|
|
|
}
|
|
|
this.urls = map;
|
|
|
this.mapByTime = mapByTime;
|
|
|
|
|
|
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>
|