<template> <div style="width: 100%"> <div class="page-header" > <div class="page-title"> <el-page-header @back="goBack" content="国标录像"></el-page-header> </div> </div> <el-container> <el-aside width="300px"> <div class="record-list-box-box"> <el-date-picker size="mini" v-model="chooseDate" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="dateChange()"></el-date-picker> <div class="record-list-box" v-loading="recordsLoading" :style="recordListStyle"> <ul v-if="detailFiles.length >0" class="infinite-list record-list" > <li v-for="item in detailFiles" class="infinite-list-item record-list-item" > <el-tag v-if="chooseFile != item" @click="checkedFile(item)"> <i class="el-icon-video-camera" ></i> {{ moment(item.startTime).format('HH:mm:ss')}}-{{ moment(item.endTime).format('HH:mm:ss')}} </el-tag> <el-tag v-if="chooseFile == item" type="danger" > <i class="el-icon-video-camera" ></i> {{ moment(item.startTime).format('HH:mm:ss')}}-{{ moment(item.endTime).format('HH:mm:ss')}} </el-tag> <i style="color: #409EFF;margin-left: 5px;" class="el-icon-download" @click="downloadRecord(item)" ></i> </li> </ul> </div> <div size="mini" v-if="detailFiles.length ==0" class="record-list-no-val" >暂无数据</div> </div> </el-aside> <el-main style="padding-bottom: 10px;"> <div class="playBox" :style="playerStyle"> <player ref="recordVideoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasAudio="hasAudio" style="max-height: 100%" fluent autoplay live ></player> </div> <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="播放倍速" @command="gbScale"> <el-button size="mini"> 倍速 <i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="0.25">0.25倍速</el-dropdown-item> <el-dropdown-item command="0.5">0.5倍速</el-dropdown-item> <el-dropdown-item command="1.0">1倍速</el-dropdown-item> <el-dropdown-item command="2.0">2倍速</el-dropdown-item> <el-dropdown-item command="4.0">4倍速</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <el-button size="mini" class="iconfont icon-xiazai1" title="下载选定录像" @click="downloadRecord()"></el-button> <el-button v-if="sliderMIn === 0 && sliderMax === 86400" size="mini" class="iconfont icon-slider" title="放大滑块" @click="setSliderFit()"></el-button> <el-button v-if="sliderMIn !== 0 || sliderMax !== 86400" size="mini" class="iconfont icon-slider-right" title="恢复滑块" @click="setSliderFit()"></el-button> </el-button-group> </div> <el-slider class="playtime-slider" v-model="playTime" id="playtimeSlider" :disabled="detailFiles.length === 0" :min="sliderMIn" :max="sliderMax" :range="true" :format-tooltip="playTimeFormat" @change="playTimeChange" :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> </div> </el-main> </el-container> <recordDownload ref="recordDownload"></recordDownload> </div> </template> <script> import uiHeader from '../layout/UiHeader.vue' import player from './common/jessibuca.vue' import moment from 'moment' import recordDownload from './dialog/recordDownload.vue' export default { name: 'app', components: { uiHeader, player,recordDownload }, data() { return { deviceId: this.$route.params.deviceId, channelId: this.$route.params.channelId, recordsLoading: false, streamId: "", hasAudio: false, detailFiles: [], chooseDate: null, videoUrl: null, chooseFile: null, streamInfo: null, app: null, mediaServerId: null, ssrc: null, sliderMIn: 0, sliderMax: 86400, autoPlay: true, taskUpdate: null, tabVal: "running", recordListStyle: { height: this.winHeight + "px", overflow: "auto", margin: "10px auto 10px auto" }, playerStyle: { "margin": "0 auto 20px auto", "height": this.winHeight + "px", }, winHeight: window.innerHeight - 240, playTime: null, timeRange: null, startTime: null, endTime: null, playTimeSliderMarks: { 0: "00:00", 3600: "01:00", 7200: "02:00", 10800: "03:00", 14400: "04:00", 18000: "05:00", 21600: "06:00", 25200: "07:00", 28800: "08:00", 32400: "09:00", 36000: "10:00", 39600: "11:00", 43200: "12:00", 46800: "13:00", 50400: "14:00", 54000: "15:00", 57600: "16:00", 61200: "17:00", 64800: "18:00", 68400: "19:00", 72000: "20:00", 75600: "21:00", 79200: "22:00", 82800: "23:00", 86400: "24:00", }, }; }, computed: { }, mounted() { this.recordListStyle.height = this.winHeight + "px"; 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 = []; this.$axios({ method: 'get', 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) { // 处理时间信息 this.detailFiles = res.data.data.recordList; }else { this.$message({ showClose: true, message: res.data.msg, type: "error", }); } }).catch((e)=> { this.recordsLoading = false; // that.videoHistory.searchHistoryResult = falsificationData.recordData; }); }, 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() }, playRecord: function () { if (this.streamId !== "") { this.stopPlayRecord(()=> { this.streamId = ""; this.playRecord(); }) } else { this.$axios({ method: 'get', 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; this.app = this.streamInfo.app; this.streamId = this.streamInfo.stream; 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, message: res.data.msg, type: "error", }); } }); } }, gbPlay(){ console.log('前端控制:播放'); this.$axios({ method: 'get', url: '/api/playback/resume/' + this.streamId }).then((res)=> { this.$refs["recordVideoPlayer"].play(this.videoUrl) }); }, gbPause(){ console.log('前端控制:暂停'); this.$axios({ method: 'get', url: '/api/playback/pause/' + this.streamId }).then(function (res) {}); }, gbScale(command){ console.log('前端控制:倍速 ' + command); this.$axios({ method: 'get', url: `/api/playback/speed/${this.streamId }/${command}` }).then(function (res) {}); }, downloadRecord: function (row) { if (!row) { let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + this.playTime[0]*1000).format("YYYY-MM-DD HH:mm:ss"); let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + this.playTime[1]*1000).format("YYYY-MM-DD HH:mm:ss"); console.log(startTimeStr); console.log(endTimeStr); row = { startTime: startTimeStr, endTime: endTimeStr } } if (this.streamId !== "") { this.stopPlayRecord(()=> { this.streamId = ""; this.downloadRecord(row); }) }else { this.$axios({ method: 'get', url: '/api/gb_record/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' + row.endTime + '&downloadSpeed=4' }).then( (res)=> { if (res.data.code === 0) { let streamInfo = res.data.data; this.$refs.recordDownload.openDialog(this.deviceId, this.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId); }else { this.$message({ showClose: true, message: res.data.msg, type: "error", }); } }); } }, stopDownloadRecord: function (callback) { this.$refs["recordVideoPlayer"].pause(); this.videoUrl = ''; this.$axios({ method: 'get', url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.streamId }).then((res)=> { if (callback) callback(res) }); }, stopPlayRecord: function (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); let result = (timeForFile[2])/((this.sliderMax - this.sliderMIn)*1000) return result*100 }, getDataLeft(item){ let timeForFile = this.getTimeForFile(item); let differenceTime = timeForFile[0].getTime() - new Date(this.chooseDate + " 00:00:00").getTime() return parseFloat((differenceTime - this.sliderMIn * 1000)/((this.sliderMax - this.sliderMIn)*1000))*100 ; }, getUrlByStreamInfo(){ if (location.protocol === "https:") { this.videoUrl = this.streamInfo["wss_flv"] }else { this.videoUrl = this.streamInfo["ws_flv"] } return this.videoUrl; }, timePickerChange: function (val){ this.setTime(val[0], val[1]) }, playTimeChange(val){ console.log(val) 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"); this.setTime(startTimeStr, endTimeStr) this.playRecord(); }, setSliderFit() { if (this.sliderMIn === 0 && this.sliderMax === 86400) { if (this.detailFiles.length > 0){ let timeForFile = this.getTimeForFile(this.detailFiles[0]); let lastTimeForFile = this.getTimeForFile(this.detailFiles[this.detailFiles.length - 1]); let timeNum = timeForFile[0].getTime() - new Date(this.chooseDate + " " + "00:00:00").getTime() let lastTimeNum = lastTimeForFile[1].getTime() - new Date(this.chooseDate + " " + "00:00:00").getTime() this.playTime = parseInt(timeNum/1000) this.sliderMIn = parseInt(timeNum/1000 - timeNum/1000%(60*60)) this.sliderMax = parseInt(lastTimeNum/1000 - lastTimeNum/1000%(60*60)) + 60*60 this.playTime = [this.sliderMIn, this.sliderMax]; } }else { this.sliderMIn = 0; this.sliderMax = 86400; } }, getTimeForFile(file){ let startTime = new Date(file.startTime); let endTime = new Date(file.endTime); return [startTime, endTime, endTime.getTime() - startTime.getTime()]; }, playTimeFormat(val){ let h = parseInt(val/3600); let m = parseInt((val - h*3600)/60); let s = parseInt(val - h*3600 - m*60); let hStr = h; let mStr = m; let sStr = s; if (h < 10) { hStr = "0" + hStr; } if (m < 10) { mStr = "0" + mStr;s } if (s < 10) { sStr = "0" + sStr; } return hStr + ":" + mStr + ":" + sStr }, goBack(){ // 如果正在进行录像回放则,发送停止 if (this.streamId !== "") { this.stopPlayRecord(()=> { this.streamId = ""; }) } window.history.go(-1); }, } }; </script> <style> .el-slider__runway { background-color:rgba(206, 206, 206, 0.47) !important; } .el-slider__bar { background-color: rgba(153, 153, 153, 0) !important; } .playtime-slider { position: relative; z-index: 100; } .data-picker-true{ } .data-picker-true:after{ content: ""; position: absolute; width: 4px; height: 4px; background-color: #606060; border-radius: 4px; left: 45%; top: 74%; } .data-picker-false{ } .slider-val-box{ height: 6px; position: relative; top: -22px; } .slider-val{ height: 6px; background-color: #007CFF; position: absolute; } .record-list-box-box{ width: 250px; float: left; } .record-list-box{ overflow: auto; width: 220px; list-style: none; padding: 0; margin: 0; margin-top: 0px; padding: 1rem 0; background-color: #FFF; margin-top: 10px; } .record-list{ list-style: none; padding: 0; margin: 0; background-color: #FFF; } .record-list-no-val { position: absolute; color: #9f9f9f; top: 50%; left: 110px; } .record-list-item{ padding: 0; margin: 0; margin: 0.5rem 0; cursor: pointer; } .record-list-option { width: 10px; float: left; margin-top: 39px; } .player-option-box{ padding: 0 20px; } </style>