guzijian / wvp-GB28181-pro · Commits

Commit 72a1f12208fce80ef6ff609ac83051ca50bf9e44

Authored by 648540858
1 parent 8b0662eb

优化国标录像UI

Inline Side-by-side
Showing 1 changed file with 46 additions and 29 deletions
web_src/src/components/GBRecordDetail.vue
  View file @72a1f12
... ... @@ -42,9 +42,24 @@
42 42 <div class="player-option-box">
43 43 <div>
44 44 <el-button-group >
  45 + <el-time-picker
  46 + size="mini"
  47 + is-range
  48 + align="left"
  49 + v-model="timeRange"
  50 + value-format="yyyy-MM-dd HH:mm:ss"
  51 + range-separator="至"
  52 + start-placeholder="开始时间"
  53 + end-placeholder="结束时间"
  54 + @change="timePickerChange"
  55 + placeholder="选择时间范围">
  56 + </el-time-picker>
  57 + </el-button-group>
  58 +
  59 + <el-button-group >
45 60 <el-button size="mini" class="iconfont icon-zanting" title="开始" @click="gbPause()"></el-button>
46 61 <el-button size="mini" class="iconfont icon-kaishi" title="暂停" @click="gbPlay()"></el-button>
47   - <el-dropdown size="mini" title="播放倍速" style="margin-left: 1px;" @command="gbScale">
  62 + <el-dropdown size="mini" title="播放倍速" @command="gbScale">
48 63 <el-button size="mini">
49 64 倍速 <i class="el-icon-arrow-down el-icon--right"></i>
50 65 </el-button>
... ... @@ -74,7 +89,7 @@
74 89 :marks="playTimeSliderMarks">
75 90 </el-slider>
76 91 <div class="slider-val-box">
77   - <div class="slider-val" v-for="item of detailFiles" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
  92 + <div class="slider-val" v-for="item of detailFiles" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
78 93 </div>
79 94 </div>
80 95  
... ... @@ -100,9 +115,6 @@
100 115 deviceId: this.$route.params.deviceId,
101 116 channelId: this.$route.params.channelId,
102 117 recordsLoading: false,
103   - sliderTime: 0,
104   - seekTime: 0,
105   - recordStartTime: 0,
106 118 streamId: "",
107 119 hasAudio: false,
108 120 detailFiles: [],
... ... @@ -129,7 +141,10 @@
129 141 "height": this.winHeight + "px",
130 142 },
131 143 winHeight: window.innerHeight - 240,
132   - playTime: 0,
  144 + playTime: null,
  145 + timeRange: null,
  146 + startTime: null,
  147 + endTime: null,
133 148 playTimeSliderMarks: {
134 149 0: "00:00",
135 150 3600: "01:00",
... ... @@ -166,6 +181,7 @@
166 181 this.recordListStyle.height = this.winHeight + "px";
167 182 this.playerStyle["height"] = this.winHeight + "px";
168 183 this.chooseDate = moment().format('YYYY-MM-DD')
  184 + this.setTime(this.chooseDate + " 00:00:00", this.chooseDate + " 23:59:59");
169 185 this.dateChange();
170 186 },
171 187 destroyed() {
... ... @@ -178,11 +194,9 @@
178 194 }
179 195 this.recordsLoading = true;
180 196 this.detailFiles = [];
181   - let startTime = this.chooseDate + " 00:00:00";
182   - let endTime = this.chooseDate + " 23:59:59";
183 197 this.$axios({
184 198 method: 'get',
185   - url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
  199 + url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.startTime + '&endTime=' + this.endTime
186 200 }).then((res)=>{
187 201 this.recordsLoading = false;
188 202 if(res.data.code === 0) {
... ... @@ -205,33 +219,37 @@
205 219 moment: function (v) {
206 220 return moment(v)
207 221 },
  222 + setTime: function (startTime, endTime){
  223 + this.startTime = startTime;
  224 + this.endTime = endTime;
  225 + let start = (new Date(this.startTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime())/1000;
  226 + let end = (new Date(this.endTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime())/1000;
  227 + console.log(start)
  228 + console.log(end)
  229 + this.playTime = [start, end];
  230 + this.timeRange = [startTime, endTime];
  231 + },
208 232 videoError: function (e) {
209 233 console.log("播放器错误：" + JSON.stringify(e));
210 234 },
211 235 checkedFile(file){
212 236 this.chooseFile = file;
  237 + this.setTime(file.startTime, file.endTime);
213 238 // 开始回放
214   - this.playRecord(file)
215   -
  239 + this.playRecord()
216 240 },
217   - playRecord: function (row) {
  241 + playRecord: function () {
218 242  
219   - let startTime = row.startTime
220   - this.recordStartTime = row.startTime
221   - this.showTimeText = row.startTime.split(" ")[1]
222   - let endTime = row.endTime
223   - this.sliderTime = 0;
224   - this.seekTime = new Date(endTime).getTime() - new Date(startTime).getTime();
225 243 if (this.streamId !== "") {
226 244 this.stopPlayRecord(()=> {
227 245 this.streamId = "";
228   - this.playRecord(row);
  246 + this.playRecord();
229 247 })
230 248 } else {
231 249 this.$axios({
232 250 method: 'get',
233   - url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' +
234   - endTime
  251 + url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.startTime + '&endTime=' +
  252 + this.endTime
235 253 }).then((res)=> {
236 254 if (res.data.code === 0) {
237 255 this.streamInfo = res.data.data;
... ... @@ -256,7 +274,7 @@
256 274 method: 'get',
257 275 url: '/api/playback/resume/' + this.streamId
258 276 }).then((res)=> {
259   - this.$refs[this.activePlayer].play(this.videoUrl)
  277 + this.$refs["recordVideoPlayer"].play(this.videoUrl)
260 278 });
261 279 },
262 280 gbPause(){
... ... @@ -347,19 +365,18 @@
347 365 return this.videoUrl;
348 366  
349 367 },
  368 + timePickerChange: function (val){
  369 + this.setTime(val[0], val[1])
  370 + },
350 371 playTimeChange(val){
351 372 console.log(val)
352   - let maxTime = this.getTimeForFile(this.detailFiles[this.detailFiles.length - 1])[1];
353 373  
354 374 let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[0]*1000).format("YYYY-MM-DD HH:mm:ss");
355 375 let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[1]*1000).format("YYYY-MM-DD HH:mm:ss");
356   - console.log(startTimeStr);
357   - console.log(endTimeStr);
358 376  
359   - this.checkedFile({
360   - startTime: startTimeStr,
361   - endTime: endTimeStr,
362   - });
  377 + this.setTime(startTimeStr, endTimeStr)
  378 +
  379 + this.playRecord();
363 380 },
364 381 setSliderFit() {
365 382 if (this.sliderMIn === 0 && this.sliderMax === 86400) {
... ...