|  |  |  | 
|---|
|  |  |  | <i class="el-icon-video-camera"  ></i> | 
|---|
|  |  |  | {{ item.substring(0,17)}} | 
|---|
|  |  |  | </el-tag> | 
|---|
|  |  |  | <!--                <a class="el-icon-download" style="color: #409EFF;font-weight: 600;margin-left: 10px;" :href="`${basePath}/${mediaServerId}/record/${recordFile.app}/${recordFile.stream}/${chooseDate}/${item}`" download />--> | 
|---|
|  |  |  | <a class="el-icon-download" style="color: #409EFF;font-weight: 600;margin-left: 10px;" :href="`${basePath}/download.html?url=${recordFile.app}/${recordFile.stream}/${chooseDate}/${item}`" target="_blank" /> | 
|---|
|  |  |  | <a class="el-icon-download" style="color: #409EFF;font-weight: 600;margin-left: 10px;" :href="`${getFileBasePath()}/download.html?url=download/${recordFile.app}/${recordFile.stream}/${chooseDate}/${item}`" target="_blank" /> | 
|---|
|  |  |  | </li> | 
|---|
|  |  |  | </ul> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | </el-aside> | 
|---|
|  |  |  | <el-main style="padding: 22px"> | 
|---|
|  |  |  | <div class="playBox" :style="playerStyle"> | 
|---|
|  |  |  | <player ref="recordVideoPlayer" :videoUrl="videoUrl"  fluent autoplay :height="true" ></player> | 
|---|
|  |  |  | <player ref="recordVideoPlayer" :videoUrl="videoUrl" :height="true" style="width: 100%" ></player> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="player-option-box" > | 
|---|
|  |  |  | <el-slider | 
|---|
|  |  |  | 
|---|
|  |  |  | <li class="task-list-item" v-for="(item, index) in taskListEnded" :key="index"> | 
|---|
|  |  |  | <div class="task-list-item-box" style="height: 2rem;line-height: 2rem;"> | 
|---|
|  |  |  | <span>{{ item.startTime.substr(10) }}-{{item.endTime.substr(10)}}</span> | 
|---|
|  |  |  | <a class="el-icon-download download-btn" :href="mediaServerPath  + '/download.html?url=../' + item.recordFile" target="_blank"> | 
|---|
|  |  |  | <a class="el-icon-download download-btn" :href="getFileBasePath()  + '/download.html?url=download/' + item.recordFile" target="_blank"> | 
|---|
|  |  |  | </a> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </li> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | // TODO 根据查询的时间列表设置滑轨的最大值与最小值, | 
|---|
|  |  |  | import uiHeader from './UiHeader.vue' | 
|---|
|  |  |  | import uiHeader from '../layout/UiHeader.vue' | 
|---|
|  |  |  | import player from './dialog/easyPlayer.vue' | 
|---|
|  |  |  | import moment  from 'moment' | 
|---|
|  |  |  | import axios from "axios"; | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'app', | 
|---|
|  |  |  | components: { | 
|---|
|  |  |  | uiHeader, player | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | props: ['recordFile', 'mediaServerId', 'dateFiles', 'mediaServerPath'], | 
|---|
|  |  |  | props: ['recordFile', 'mediaServerId', 'dateFiles'], | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | basePath: `${this.mediaServerPath}/record`, | 
|---|
|  |  |  | dateFilesObj: [], | 
|---|
|  |  |  | detailFiles: [], | 
|---|
|  |  |  | chooseDate: null, | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.queryRecordDetails(()=>{ | 
|---|
|  |  |  | if (this.detailFiles.length > 0){ | 
|---|
|  |  |  | console.log(this.detailFiles) | 
|---|
|  |  |  | 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 + " " + this.timeFormat).getTime() | 
|---|
|  |  |  | console.log(timeNum) | 
|---|
|  |  |  | let lastTimeNum = lastTimeForFile[1].getTime() - new Date(this.chooseDate + " " + this.timeFormat).getTime() | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.playTime = parseInt(timeNum/1000) | 
|---|
|  |  |  | this.sliderMIn = parseInt(timeNum/1000 - timeNum/1000%(60*60)) | 
|---|
|  |  |  | console.log(this.sliderMIn ) | 
|---|
|  |  |  | this.sliderMax = parseInt(lastTimeNum/1000 - lastTimeNum/1000%(60*60)) + 60*60 | 
|---|
|  |  |  | console.log(this.sliderMax ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | count: that.count | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | that.total = res.data.data.total; | 
|---|
|  |  |  | that.detailFiles = that.detailFiles.concat(res.data.data.list); | 
|---|
|  |  |  | if (res.data.code === 0) { | 
|---|
|  |  |  | that.total = res.data.data.total; | 
|---|
|  |  |  | that.detailFiles = that.detailFiles.concat(res.data.data.list); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | that.loading = false; | 
|---|
|  |  |  | if (callback) callback(); | 
|---|
|  |  |  | }).catch(function (error) { | 
|---|
|  |  |  | 
|---|
|  |  |  | if (file == null) { | 
|---|
|  |  |  | this.videoUrl = ""; | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | // TODO 控制列表滚动条 | 
|---|
|  |  |  | this.videoUrl = `${this.basePath}/${this.recordFile.app}/${this.recordFile.stream}/${this.chooseDate}/${this.choosedFile}` | 
|---|
|  |  |  | this.videoUrl = `${this.getFileBasePath()}/download/${this.recordFile.app}/${this.recordFile.stream}/${this.chooseDate}/${this.choosedFile}` | 
|---|
|  |  |  |  | 
|---|
|  |  |  | console.log(this.videoUrl) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | getFileBasePath(){ | 
|---|
|  |  |  | let basePath = "" | 
|---|
|  |  |  | if (axios.defaults.baseURL.startsWith("http")) { | 
|---|
|  |  |  | basePath = `${axios.defaults.baseURL}/record_proxy/${this.mediaServerId}` | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | basePath = `${window.location.origin}${axios.defaults.baseURL}/record_proxy/${this.mediaServerId}` | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return basePath; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | getDataWidth(item){ | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getTimeForFile(file){ | 
|---|
|  |  |  | console.log(file) | 
|---|
|  |  |  | let timeStr = file.substring(0,17); | 
|---|
|  |  |  | if(timeStr.indexOf("~") > 0){ | 
|---|
|  |  |  | timeStr = timeStr.replaceAll("-",":") | 
|---|
|  |  |  | } | 
|---|
|  |  |  | let timeArr = timeStr.split("~"); | 
|---|
|  |  |  | let timeArr = timeStr.split("-"); | 
|---|
|  |  |  | let starTime = new Date(this.chooseDate + " " + timeArr[0]); | 
|---|
|  |  |  | let endTime = new Date(this.chooseDate + " " + timeArr[1]); | 
|---|
|  |  |  | if(this.checkIsOver24h(starTime,endTime)){ | 
|---|
|  |  |  | 
|---|
|  |  |  | let h = parseInt(val/3600); | 
|---|
|  |  |  | let m = parseInt((val - h*3600)/60); | 
|---|
|  |  |  | let s = parseInt(val - h*3600 - m*60); | 
|---|
|  |  |  | return h + ":" + m + ":" + s | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | deleteRecord(){ | 
|---|
|  |  |  | // TODO | 
|---|
|  |  |  | 
|---|
|  |  |  | count: that.count | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | if (res.data.code == 0) { | 
|---|
|  |  |  | if (res.data.code === 0) { | 
|---|
|  |  |  | that.total = res.data.data.total; | 
|---|
|  |  |  | that.recordList = res.data.data.list; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | endTime: moment(this.taskTimeRange[1]).format('YYYY-MM-DD HH:mm:ss'), | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | if (res.data.code === 0 && res.data.msg === "success") { | 
|---|
|  |  |  | if (res.data.code === 0 ) { | 
|---|
|  |  |  | that.showTaskBox = false | 
|---|
|  |  |  | that.getTaskList(false); | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | 
|---|
|  |  |  | isEnd: isEnd, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | if (res.data.code == 0) { | 
|---|
|  |  |  | if (res.data.code === 0) { | 
|---|
|  |  |  | if (isEnd){ | 
|---|
|  |  |  | that.taskListEnded = res.data.data; | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | 
|---|
|  |  |  | }).catch(function (error) { | 
|---|
|  |  |  | console.log(error); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | goBack(){ | 
|---|
|  |  |  | this.$router.push('/cloudRecord'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|