|  |  | 
 |  |  | <template> | 
 |  |  |    <div id="recordDetail"> | 
 |  |  |       <el-container> | 
 |  |  |  | 
 |  |  |       <el-aside width="300px"> | 
 |  |  |  | 
 |  |  |         <div class="record-list-box-box"> | 
 |  |  |           <el-date-picker size="mini" v-model="chooseDate" :picker-options="pickerOptions" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="dateChange()"></el-date-picker> | 
 |  |  |           <div class="record-list-box" :style="recordListStyle"> | 
 |  |  |             <ul v-if="detailFiles.length >0" class="infinite-list record-list" v-infinite-scroll="infiniteScroll" > | 
 |  |  |               <li v-for="item in detailFiles" class="infinite-list-item record-list-item" @click="chooseFile(item)"> | 
 |  |  |                 <el-tag v-if="choosedFile != item"> | 
 |  |  |               <li v-for="item in detailFiles" class="infinite-list-item record-list-item" > | 
 |  |  |                 <el-tag v-if="choosedFile != item" @click="chooseFile(item)"> | 
 |  |  |                   <i class="el-icon-video-camera"  ></i> | 
 |  |  |                   {{ item.substring(0,17)}} | 
 |  |  |                 </el-tag> | 
 |  |  | 
 |  |  |                   <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}/download.html?url=record/${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 in taskListEnded"> | 
 |  |  |                 <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="basePath + '/' + item.recordFile" download > | 
 |  |  |                   <a class="el-icon-download download-btn" :href="basePath  + '/download.html?url=../' + 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' | 
 |  |  |    export default { | 
 |  |  | 
 |  |  |       components: { | 
 |  |  |          uiHeader, player | 
 |  |  |       }, | 
 |  |  |     props: ['recordFile', 'mediaServerId', 'dateFiles'], | 
 |  |  |     props: ['recordFile', 'mediaServerId', 'dateFiles', 'mediaServerPath'], | 
 |  |  |       data() { | 
 |  |  |          return { | 
 |  |  |         basePath: process.env.NODE_ENV === 'development'?`${location.origin}/debug/zlm`:`${location.origin}/zlm`, | 
 |  |  |         basePath: `${this.mediaServerPath}`, | 
 |  |  |            dateFilesObj: [], | 
 |  |  |            detailFiles: [], | 
 |  |  |         chooseDate: null, | 
 |  |  | 
 |  |  |             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) { | 
 |  |  | 
 |  |  |           this.videoUrl = ""; | 
 |  |  |         }else { | 
 |  |  |              // TODO 控制列表滚动条 | 
 |  |  |           this.videoUrl = `${this.basePath}/${this.mediaServerId}/record/${this.recordFile.app}/${this.recordFile.stream}/${this.chooseDate}/${this.choosedFile}` | 
 |  |  |           this.videoUrl = `${this.basePath}/record/${this.recordFile.app}/${this.recordFile.stream}/${this.chooseDate}/${this.choosedFile}` | 
 |  |  |           console.log(this.videoUrl) | 
 |  |  |         } | 
 |  |  |  | 
 |  |  | 
 |  |  |         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'); | 
 |  |  |       } | 
 |  |  |       } | 
 |  |  |    }; |