guzijian / wvp-GB28181-pro · Commits

Commit 33a5911f943478b887203c26988dc4e0dd449220

Authored by 648540858
1 parent be7082f5

优化回放控制界面

Inline Side-by-side
Showing 1 changed file with 38 additions and 24 deletions
web_src/src/components/dialog/devicePlayer.vue
  View file @33a5911
@@ -39,30 +39,34 @@ @@ -39,30 +39,34 @@
39 </el-tab-pane> 39 </el-tab-pane>
40 <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> 40 <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
41 <el-tab-pane label="录像查询" name="record" v-if="showRrecord"> 41 <el-tab-pane label="录像查询" name="record" v-if="showRrecord">
42 - <div style="float: left">  
43 - <span>录像控制</span>  
44 - <el-button-group style="margin-left: 1rem">  
45 - <el-button size="mini" class="iconfont icon-zanting" title="开始" @click="gbPause()"></el-button>  
46 - <el-button size="mini" class="iconfont icon-kaishi" title="暂停" @click="gbPlay()"></el-button>  
47 - <el-dropdown size="mini" title="播放倍速" @command="gbScale">  
48 - <el-button size="mini">  
49 - 倍速 <i class="el-icon-arrow-down el-icon--right"></i>  
50 - </el-button>  
51 - <el-dropdown-menu slot="dropdown">  
52 - <el-dropdown-item command="0.25">0.25倍速</el-dropdown-item>  
53 - <el-dropdown-item command="0.5">0.5倍速</el-dropdown-item>  
54 - <el-dropdown-item command="1.0">1倍速</el-dropdown-item>  
55 - <el-dropdown-item command="2.0">2倍速</el-dropdown-item>  
56 - <el-dropdown-item command="4.0">4倍速</el-dropdown-item>  
57 - </el-dropdown-menu>  
58 - </el-dropdown>  
59 - </el-button-group>  
60 - </div>  
61 - <el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="queryRecords()"></el-date-picker>  
62 - <div class="block" >  
63 - <span class="demonstration" style="padding: 12px 36px 12px 0;float: left;">{{Math.floor(seekTime * sliderTime / 100000)}}秒</span>  
64 - <el-slider style="width: 80%; float:left;" v-model="sliderTime" @change="gbSeek" :show-tooltip="false"></el-slider>  
65 - </div> 42 + <div style="width: 100%;">
  43 + <div style="width: 100%; text-align: left">
  44 + <span>录像控制</span>
  45 + <el-button-group style="margin-left: 1rem;">
  46 + <el-button size="mini" class="iconfont icon-zanting" title="开始" @click="gbPause()"></el-button>
  47 + <el-button size="mini" class="iconfont icon-kaishi" title="暂停" @click="gbPlay()"></el-button>
  48 + <el-dropdown size="mini" title="播放倍速" style="margin-left: 1px;" @command="gbScale">
  49 + <el-button size="mini">
  50 + 倍速 <i class="el-icon-arrow-down el-icon--right"></i>
  51 + </el-button>
  52 + <el-dropdown-menu slot="dropdown">
  53 + <el-dropdown-item command="0.25">0.25倍速</el-dropdown-item>
  54 + <el-dropdown-item command="0.5">0.5倍速</el-dropdown-item>
  55 + <el-dropdown-item command="1.0">1倍速</el-dropdown-item>
  56 + <el-dropdown-item command="2.0">2倍速</el-dropdown-item>
  57 + <el-dropdown-item command="4.0">4倍速</el-dropdown-item>
  58 + </el-dropdown-menu>
  59 + </el-dropdown>
  60 + </el-button-group>
  61 + <el-date-picker style="float: right;" size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="queryRecords()"></el-date-picker>
  62 + </div>
  63 + <div style="width: 100%; text-align: left">
  64 + <span class="demonstration" style="padding: 12px 36px 12px 0;float: left;">{{showTimeText}}</span>
  65 + <el-slider style="width: 80%; float:left;" v-model="sliderTime" @change="gbSeek" :show-tooltip="false"></el-slider>
  66 + </div>
  67 + </div>
  68 +
  69 +
66 <el-table :data="videoHistory.searchHistoryResult" height="150" v-loading="recordsLoading"> 70 <el-table :data="videoHistory.searchHistoryResult" height="150" v-loading="recordsLoading">
67 <el-table-column label="名称" prop="name"></el-table-column> 71 <el-table-column label="名称" prop="name"></el-table-column>
68 <el-table-column label="文件" prop="filePath"></el-table-column> 72 <el-table-column label="文件" prop="filePath"></el-table-column>
@@ -235,6 +239,8 @@ export default { @@ -235,6 +239,8 @@ export default {
235 tracksNotLoaded: false, 239 tracksNotLoaded: false,
236 sliderTime: 0, 240 sliderTime: 0,
237 seekTime: 0, 241 seekTime: 0,
  242 + recordStartTime: 0,
  243 + showTimeText: "00:00:00",
238 }; 244 };
239 }, 245 },
240 methods: { 246 methods: {
@@ -460,7 +466,10 @@ export default { @@ -460,7 +466,10 @@ export default {
460 let that = this; 466 let that = this;
461 467
462 let startTime = row.startTime 468 let startTime = row.startTime
  469 + this.recordStartTime = row.startTime
  470 + this.showTimeText = row.startTime.split(" ")[1]
463 let endtime = row.endTime 471 let endtime = row.endTime
  472 + this.sliderTime = 0;
464 this.seekTime = new Date(endtime).getTime() - new Date(startTime).getTime(); 473 this.seekTime = new Date(endtime).getTime() - new Date(startTime).getTime();
465 console.log(this.seekTime) 474 console.log(this.seekTime)
466 if (that.streamId != "") { 475 if (that.streamId != "") {
@@ -638,6 +647,11 @@ export default { @@ -638,6 +647,11 @@ export default {
638 console.log('前端控制：seek '); 647 console.log('前端控制：seek ');
639 console.log(this.seekTime); 648 console.log(this.seekTime);
640 console.log(this.sliderTime); 649 console.log(this.sliderTime);
  650 + let showTime = new Date(new Date(this.recordStartTime).getTime() + this.seekTime * val / 100)
  651 + let hour = showTime.getHours();
  652 + let minutes = showTime.getMinutes();
  653 + let seconds = showTime.getSeconds();
  654 + this.showTimeText = (hour < 10?("0" + hour):hour) + ":" + (minutes<10?("0" + minutes):minutes) + ":" + (seconds<10?("0" + seconds):seconds)
641 this.$axios({ 655 this.$axios({
642 method: 'get', 656 method: 'get',
643 url: `/api/playback/seek/${this.streamId }/` + Math.floor(this.seekTime * val / 100000) 657 url: `/api/playback/seek/${this.streamId }/` + Math.floor(this.seekTime * val / 100000)