From c6dfb63f8fd5f04fa00ac6c45da2eb6bcc5cada4 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期一, 25 三月 2024 23:59:50 +0800
Subject: [PATCH] 优化hook通知
---
web_src/src/components/GBRecordDetail.vue | 107 ++++++++++++++++++++++++++++++++++-------------------
1 files changed, 69 insertions(+), 38 deletions(-)
diff --git a/web_src/src/components/GBRecordDetail.vue b/web_src/src/components/GBRecordDetail.vue
old mode 100644
new mode 100755
index feb2443..37ec377
--- a/web_src/src/components/GBRecordDetail.vue
+++ b/web_src/src/components/GBRecordDetail.vue
@@ -42,9 +42,24 @@
<div class="player-option-box">
<div>
<el-button-group >
+ <el-time-picker
+ size="mini"
+ is-range
+ align="left"
+ v-model="timeRange"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫椂闂�"
+ end-placeholder="缁撴潫鏃堕棿"
+ @change="timePickerChange"
+ placeholder="閫夋嫨鏃堕棿鑼冨洿">
+ </el-time-picker>
+ </el-button-group>
+
+ <el-button-group >
<el-button size="mini" class="iconfont icon-zanting" title="寮�濮�" @click="gbPause()"></el-button>
<el-button size="mini" class="iconfont icon-kaishi" title="鏆傚仠" @click="gbPlay()"></el-button>
- <el-dropdown size="mini" title="鎾斁鍊嶉��" style="margin-left: 1px;" @command="gbScale">
+ <el-dropdown size="mini" title="鎾斁鍊嶉��" @command="gbScale">
<el-button size="mini">
鍊嶉�� <i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
@@ -74,7 +89,7 @@
:marks="playTimeSliderMarks">
</el-slider>
<div class="slider-val-box">
- <div class="slider-val" v-for="item of detailFiles" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
+ <div class="slider-val" v-for="item of detailFiles" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
</div>
</div>
@@ -100,9 +115,6 @@
deviceId: this.$route.params.deviceId,
channelId: this.$route.params.channelId,
recordsLoading: false,
- sliderTime: 0,
- seekTime: 0,
- recordStartTime: 0,
streamId: "",
hasAudio: false,
detailFiles: [],
@@ -129,7 +141,10 @@
"height": this.winHeight + "px",
},
winHeight: window.innerHeight - 240,
- playTime: 0,
+ playTime: null,
+ timeRange: null,
+ startTime: null,
+ endTime: null,
playTimeSliderMarks: {
0: "00:00",
3600: "01:00",
@@ -167,22 +182,24 @@
this.playerStyle["height"] = this.winHeight + "px";
this.chooseDate = moment().format('YYYY-MM-DD')
this.dateChange();
+ window.addEventListener('beforeunload', this.stopPlayRecord)
},
destroyed() {
this.$destroy('recordVideoPlayer');
+ window.removeEventListener('beforeunload', this.stopPlayRecord)
},
methods: {
dateChange(){
if (!this.chooseDate) {
return;
}
+
+ this.setTime(this.chooseDate + " 00:00:00", this.chooseDate + " 23:59:59");
this.recordsLoading = true;
this.detailFiles = [];
- let startTime = this.chooseDate + " 00:00:00";
- let endTime = this.chooseDate + " 23:59:59";
this.$axios({
method: 'get',
- url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
+ url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.startTime + '&endTime=' + this.endTime
}).then((res)=>{
this.recordsLoading = false;
if(res.data.code === 0) {
@@ -205,33 +222,37 @@
moment: function (v) {
return moment(v)
},
+ setTime: function (startTime, endTime){
+ this.startTime = startTime;
+ this.endTime = endTime;
+ let start = (new Date(this.startTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime())/1000;
+ let end = (new Date(this.endTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime())/1000;
+ console.log(start)
+ console.log(end)
+ this.playTime = [start, end];
+ this.timeRange = [startTime, endTime];
+ },
videoError: function (e) {
console.log("鎾斁鍣ㄩ敊璇細" + JSON.stringify(e));
},
checkedFile(file){
this.chooseFile = file;
+ this.setTime(file.startTime, file.endTime);
// 寮�濮嬪洖鏀�
- this.playRecord(file)
-
+ this.playRecord()
},
- playRecord: function (row) {
+ playRecord: function () {
- let startTime = row.startTime
- this.recordStartTime = row.startTime
- this.showTimeText = row.startTime.split(" ")[1]
- let endTime = row.endTime
- this.sliderTime = 0;
- this.seekTime = new Date(endTime).getTime() - new Date(startTime).getTime();
if (this.streamId !== "") {
this.stopPlayRecord(()=> {
this.streamId = "";
- this.playRecord(row);
+ this.playRecord();
})
} else {
this.$axios({
method: 'get',
- url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' +
- endTime
+ url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.startTime + '&endTime=' +
+ this.endTime
}).then((res)=> {
if (res.data.code === 0) {
this.streamInfo = res.data.data;
@@ -240,6 +261,7 @@
this.mediaServerId = this.streamInfo.mediaServerId;
this.ssrc = this.streamInfo.ssrc;
this.videoUrl = this.getUrlByStreamInfo();
+ this.hasAudio = this.streamInfo.tracks && this.streamInfo.tracks.length > 1
}else {
this.$message({
showClose: true,
@@ -256,7 +278,7 @@
method: 'get',
url: '/api/playback/resume/' + this.streamId
}).then((res)=> {
- this.$refs[this.activePlayer].play(this.videoUrl)
+ this.$refs["recordVideoPlayer"].play(this.videoUrl)
});
},
gbPause(){
@@ -319,14 +341,18 @@
});
},
stopPlayRecord: function (callback) {
- this.$refs["recordVideoPlayer"].pause();
- this.videoUrl = '';
- this.$axios({
- method: 'get',
- url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId + "/" + this.streamId
- }).then(function (res) {
- if (callback) callback()
- });
+ console.log("鍋滄褰曞儚鍥炴斁")
+ if (this.streamId !== "") {
+ this.$refs["recordVideoPlayer"].pause();
+ this.videoUrl = '';
+ this.$axios({
+ method: 'get',
+ url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId + "/" + this.streamId
+ }).then(function (res) {
+ if (callback) callback()
+ });
+ }
+
},
getDataWidth(item){
let timeForFile = this.getTimeForFile(item);
@@ -347,19 +373,18 @@
return this.videoUrl;
},
+ timePickerChange: function (val){
+ this.setTime(val[0], val[1])
+ },
playTimeChange(val){
console.log(val)
- let maxTime = this.getTimeForFile(this.detailFiles[this.detailFiles.length - 1])[1];
let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[0]*1000).format("YYYY-MM-DD HH:mm:ss");
let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[1]*1000).format("YYYY-MM-DD HH:mm:ss");
- console.log(startTimeStr);
- console.log(endTimeStr);
- this.checkedFile({
- startTime: startTimeStr,
- endTime: endTimeStr,
- });
+ this.setTime(startTimeStr, endTimeStr)
+
+ this.playRecord();
},
setSliderFit() {
if (this.sliderMIn === 0 && this.sliderMax === 86400) {
@@ -405,8 +430,14 @@
return hStr + ":" + mStr + ":" + sStr
},
goBack(){
+ // 濡傛灉姝ｅ湪杩涜褰曞儚鍥炴斁鍒欙紝鍙戦�佸仠姝�
+ if (this.streamId !== "") {
+ this.stopPlayRecord(()=> {
+ this.streamId = "";
+ })
+ }
window.history.go(-1);
- }
+ },
}
};
</script>
--
Gitblit v1.8.0