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 39 </el-tab-pane>
40 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 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 70 <el-table :data="videoHistory.searchHistoryResult" height="150" v-loading="recordsLoading">
67 71 <el-table-column label="名称" prop="name"></el-table-column>
68 72 <el-table-column label="文件" prop="filePath"></el-table-column>
... ... @@ -235,6 +239,8 @@ export default {
235 239 tracksNotLoaded: false,
236 240 sliderTime: 0,
237 241 seekTime: 0,
  242 + recordStartTime: 0,
  243 + showTimeText: "00:00:00",
238 244 };
239 245 },
240 246 methods: {
... ... @@ -460,7 +466,10 @@ export default {
460 466 let that = this;
461 467  
462 468 let startTime = row.startTime
  469 + this.recordStartTime = row.startTime
  470 + this.showTimeText = row.startTime.split(" ")[1]
463 471 let endtime = row.endTime
  472 + this.sliderTime = 0;
464 473 this.seekTime = new Date(endtime).getTime() - new Date(startTime).getTime();
465 474 console.log(this.seekTime)
466 475 if (that.streamId != "") {
... ... @@ -638,6 +647,11 @@ export default {
638 647 console.log('前端控制：seek ');
639 648 console.log(this.seekTime);
640 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 655 this.$axios({
642 656 method: 'get',
643 657 url: `/api/playback/seek/${this.streamId }/` + Math.floor(this.seekTime * val / 100000)
... ...