|  |  | 
 |  |  |         <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> | 
 |  |  | 
 |  |  |             :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> | 
 |  |  |  | 
 |  |  | 
 |  |  |         deviceId: this.$route.params.deviceId, | 
 |  |  |         channelId: this.$route.params.channelId, | 
 |  |  |         recordsLoading: false, | 
 |  |  |         sliderTime: 0, | 
 |  |  |         seekTime: 0, | 
 |  |  |         recordStartTime: 0, | 
 |  |  |         streamId: "", | 
 |  |  |         hasAudio: false, | 
 |  |  |            detailFiles: [], | 
 |  |  | 
 |  |  |           "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", | 
 |  |  | 
 |  |  |         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) { | 
 |  |  | 
 |  |  |       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; | 
 |  |  | 
 |  |  |           method: 'get', | 
 |  |  |           url: '/api/playback/resume/' + this.streamId | 
 |  |  |         }).then((res)=> { | 
 |  |  |           this.$refs[this.activePlayer].play(this.videoUrl) | 
 |  |  |           this.$refs["recordVideoPlayer"].play(this.videoUrl) | 
 |  |  |         }); | 
 |  |  |       }, | 
 |  |  |       gbPause(){ | 
 |  |  | 
 |  |  |         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) { |