guzijian / wvp-GB28181-pro · Commits

Commit 9b18c33dd87801f17a977a92ebb023b2c89ff1bb

Authored by Lawrence
1 parent 37e97a78

录像查询更换日期后先清空原先的查询列表

Inline Side-by-side
Showing 1 changed file with 421 additions and 423 deletions
web_src/src/components/gb28181/devicePlayer.vue
  View file @9b18c33
1 1 <template>
2   - <div id="devicePlayer">
3   - <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()">
4   - <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live ></LivePlayer>
5   - <div id="shared" style="text-align: right; margin-top: 1rem;">
6   - <el-tabs v-model="tabActiveName">
7   - <el-tab-pane label="实时视频" name="media">
8   - <div style="margin-bottom: 0.5rem;">
9   -<!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>-->
10   -<!-- <el-button type="primary" size="small" @click="startRecord()">录制</el-button>-->
11   -<!-- <el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>-->
12   - </div>
13   - <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
14   - <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
15   - <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
16   - </div>
17   - <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
18   - <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
19   - <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
20   - </div>
21   - <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
22   - <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
23   - <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
24   - </div>
25   - </el-tab-pane>
26   - <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
27   - <el-tab-pane label="录像查询" name="record">
28   - <el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期"
29   - @change="queryRecords()"></el-date-picker>
30   -<!-- <el-slider style="margin: 0 1rem 1rem 1rem;"-->
31   -<!-- v-model="timeVal"-->
32   -<!-- :min="timeMin"-->
33   -<!-- :max="timeMax"-->
34   -<!-- :step="5"-->
35   -<!-- :marks="getTimeMakrs()"-->
36   -<!-- :format-tooltip="formatTooltip">-->
37   -<!-- </el-slider>-->
38   -<!-- <range-slider :min="timeMin"-->
39   -<!-- :max="timeMax"-->
40   -<!-- :step="5"></range-slider>-->
  2 +<div id="devicePlayer">
  3 + <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()">
  4 + <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer>
  5 + <div id="shared" style="text-align: right; margin-top: 1rem;">
  6 + <el-tabs v-model="tabActiveName">
  7 + <el-tab-pane label="实时视频" name="media">
  8 + <div style="margin-bottom: 0.5rem;">
  9 + <!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>-->
  10 + <!-- <el-button type="primary" size="small" @click="startRecord()">录制</el-button>-->
  11 + <!-- <el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>-->
  12 + </div>
  13 + <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
  14 + <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
  15 + <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
  16 + </div>
  17 + <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
  18 + <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
  19 + <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
  20 + </div>
  21 + <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
  22 + <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
  23 + <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
  24 + </div>
  25 + </el-tab-pane>
  26 + <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
  27 + <el-tab-pane label="录像查询" name="record">
  28 + <el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="queryRecords()"></el-date-picker>
  29 + <!-- <el-slider style="margin: 0 1rem 1rem 1rem;"-->
  30 + <!-- v-model="timeVal"-->
  31 + <!-- :min="timeMin"-->
  32 + <!-- :max="timeMax"-->
  33 + <!-- :step="5"-->
  34 + <!-- :marks="getTimeMakrs()"-->
  35 + <!-- :format-tooltip="formatTooltip">-->
  36 + <!-- </el-slider>-->
  37 + <!-- <range-slider :min="timeMin"-->
  38 + <!-- :max="timeMax"-->
  39 + <!-- :step="5"></range-slider>-->
41 40  
42   -<!-- <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"-->
43   -<!-- @change="recordList()"></el-date-picker>-->
44   - <el-table :data="videoHistory.searchHistoryResult" height="150" v-load="recordsLoading">
45   - <el-table-column label="名称" prop="name"></el-table-column>
46   - <el-table-column label="文件" prop="filePath"></el-table-column>
47   - <el-table-column label="开始时间" prop="startTime" :formatter="timeFormatter"></el-table-column>
48   - <el-table-column label="结束时间" prop="endTime" :formatter="timeFormatter"></el-table-column>
  41 + <!-- <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"-->
  42 + <!-- @change="recordList()"></el-date-picker>-->
  43 + <el-table :data="videoHistory.searchHistoryResult" height="150" v-load="recordsLoading">
  44 + <el-table-column label="名称" prop="name"></el-table-column>
  45 + <el-table-column label="文件" prop="filePath"></el-table-column>
  46 + <el-table-column label="开始时间" prop="startTime" :formatter="timeFormatter"></el-table-column>
  47 + <el-table-column label="结束时间" prop="endTime" :formatter="timeFormatter"></el-table-column>
49 48  
50   - <el-table-column label="操作" >
51   - <template slot-scope="scope">
52   - <el-button icon="el-icon-video-play" size="mini" @click="playRecord(scope.row)">播放</el-button>
53   - </template>
54   - </el-table-column>
55   - </el-table>
56   - </el-tab-pane>
57   - <!--遥控界面-->
58   - <el-tab-pane label="云台控制" name="control">
59   - <div style="display: flex; justify-content: center;">
60   - <div class="control-wrapper">
61   - <div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
62   - <i class="el-icon-caret-top"></i>
63   - <div class="control-inner-btn control-inner"></div>
64   - </div>
65   - <div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
66   - <i class="el-icon-caret-left"></i>
67   - <div class="control-inner-btn control-inner"></div>
68   - </div>
69   - <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
70   - <i class="el-icon-caret-bottom"></i>
71   - <div class="control-inner-btn control-inner"></div>
72   - </div>
73   - <div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
74   - <i class="el-icon-caret-right"></i>
75   - <div class="control-inner-btn control-inner"></div>
76   - </div>
77   - <div class="control-round">
78   - <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
79   - </div>
80   - <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i
81   - class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
82   - <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)"
83   - @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
84   - </div>
85   - </div>
  49 + <el-table-column label="操作">
  50 + <template slot-scope="scope">
  51 + <el-button icon="el-icon-video-play" size="mini" @click="playRecord(scope.row)">播放</el-button>
  52 + </template>
  53 + </el-table-column>
  54 + </el-table>
  55 + </el-tab-pane>
  56 + <!--遥控界面-->
  57 + <el-tab-pane label="云台控制" name="control">
  58 + <div style="display: flex; justify-content: center;">
  59 + <div class="control-wrapper">
  60 + <div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
  61 + <i class="el-icon-caret-top"></i>
  62 + <div class="control-inner-btn control-inner"></div>
  63 + </div>
  64 + <div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
  65 + <i class="el-icon-caret-left"></i>
  66 + <div class="control-inner-btn control-inner"></div>
  67 + </div>
  68 + <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
  69 + <i class="el-icon-caret-bottom"></i>
  70 + <div class="control-inner-btn control-inner"></div>
  71 + </div>
  72 + <div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
  73 + <i class="el-icon-caret-right"></i>
  74 + <div class="control-inner-btn control-inner"></div>
  75 + </div>
  76 + <div class="control-round">
  77 + <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
  78 + </div>
  79 + <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
  80 + <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
  81 + </div>
  82 + </div>
86 83  
87   - </el-tab-pane>
88   - </el-tabs>
89   - </div>
90   - </el-dialog>
91   - </div>
  84 + </el-tab-pane>
  85 + </el-tabs>
  86 + </div>
  87 + </el-dialog>
  88 +</div>
92 89 </template>
93 90  
94 91 <script>
95   - import LivePlayer from '@liveqing/liveplayer'
96   - export default {
97   - name: 'devicePlayer',
98   - props: {},
99   - components: {
100   - LivePlayer
101   - },
102   - computed: {
103   - getPlayerShared: function() {
  92 +import LivePlayer from '@liveqing/liveplayer'
  93 +export default {
  94 + name: 'devicePlayer',
  95 + props: {},
  96 + components: {
  97 + LivePlayer
  98 + },
  99 + computed: {
  100 + getPlayerShared: function () {
  101 + return {
  102 + sharedUrl: window.location.host + '/' + this.videoUrl,
  103 + sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
  104 + sharedRtmp: this.videoUrl
  105 + };
  106 + }
  107 + },
  108 + created() {},
  109 + data() {
104 110 return {
105   - sharedUrl: window.location.host + '/' + this.videoUrl,
106   - sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
107   - sharedRtmp: this.videoUrl
108   - };
109   - }
110   - },
111   - created() {
112   - },
113   - data() {
114   - return {
115   - video:'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
116   - videoUrl: '',
117   - videoHistory: {
118   - date: '',
119   - searchHistoryResult: [] //媒体流历史记录搜索结果
120   - },
121   - timeMakrs:{
122   - // 0 : "0:00",
123   - // // 60 : "1:00",
124   - // 120 : "2:00",
125   - // // 180 : "3:00",
126   - // 240 : "4:00",
127   - // // 300 : "5:00",
128   - // 360 : "6:00",
129   - // // 420 : "7:00",
130   - // 480 : "8:00",
131   - // 540 : "9:00",
132   - 600: "10:00",
133   - // 660 : "11:00",
134   - 720 : "12:00",
135   - // 780 : "13:00",
136   - 840 : "14:00",
137   - // 900 : "15:00",
138   - 960 : "16:00",
139   - // 1020 : "17:00",
140   - 1080 : "18:00",
141   - // 1140 : "19:00",
142   - // 1200 : "20:00",
143   - // // 1260 : "21:00",
144   - // 1320 : "22:00",
145   - // // 1380 : "23:00",
146   - // 1440 : "24:00"
147   - },
148   - showVideoDialog: false,
149   - ssrc: '',
150   - deviceId: '',
151   - channelId: '',
152   - tabActiveName: 'media',
153   - hasaudio: false,
154   - loadingRecords: false,
155   - recordsLoading: false,
156   - timeVal: 0,
157   - timeMin: 0,
158   - timeMax: 1440,
  111 + video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
  112 + videoUrl: '',
  113 + videoHistory: {
  114 + date: '',
  115 + searchHistoryResult: [] //媒体流历史记录搜索结果
  116 + },
  117 + timeMakrs: {
  118 + // 0 : "0:00",
  119 + // // 60 : "1:00",
  120 + // 120 : "2:00",
  121 + // // 180 : "3:00",
  122 + // 240 : "4:00",
  123 + // // 300 : "5:00",
  124 + // 360 : "6:00",
  125 + // // 420 : "7:00",
  126 + // 480 : "8:00",
  127 + // 540 : "9:00",
  128 + 600: "10:00",
  129 + // 660 : "11:00",
  130 + 720: "12:00",
  131 + // 780 : "13:00",
  132 + 840: "14:00",
  133 + // 900 : "15:00",
  134 + 960: "16:00",
  135 + // 1020 : "17:00",
  136 + 1080: "18:00",
  137 + // 1140 : "19:00",
  138 + // 1200 : "20:00",
  139 + // // 1260 : "21:00",
  140 + // 1320 : "22:00",
  141 + // // 1380 : "23:00",
  142 + // 1440 : "24:00"
  143 + },
  144 + showVideoDialog: false,
  145 + ssrc: '',
  146 + deviceId: '',
  147 + channelId: '',
  148 + tabActiveName: 'media',
  149 + hasaudio: false,
  150 + loadingRecords: false,
  151 + recordsLoading: false,
  152 + timeVal: 0,
  153 + timeMin: 0,
  154 + timeMax: 1440,
159 155  
160   - };
161   - },
162   - methods: {
163   - openDialog: function (tab, deviceId, channelId, param) {
164   - this.tabActiveName = tab;
165   - this.channelId = channelId;
166   - this.deviceId = deviceId;
167   - this.ssrc = "";
168   - this.videoUrl = ""
169   - if (!!this.$refs.videoPlayer) {
170   - this.$refs.videoPlayer.pause();
171   - }
  156 + };
  157 + },
  158 + methods: {
  159 + openDialog: function (tab, deviceId, channelId, param) {
  160 + this.tabActiveName = tab;
  161 + this.channelId = channelId;
  162 + this.deviceId = deviceId;
  163 + this.ssrc = "";
  164 + this.videoUrl = ""
  165 + if (!!this.$refs.videoPlayer) {
  166 + this.$refs.videoPlayer.pause();
  167 + }
172 168  
173   - switch(tab) {
174   - case "media":
175   - this.play(param.streamInfo, param.hasAudio)
176   - break;
177   - case "record":
178   - this.showVideoDialog = true;
  169 + switch (tab) {
  170 + case "media":
  171 + this.play(param.streamInfo, param.hasAudio)
  172 + break;
  173 + case "record":
  174 + this.showVideoDialog = true;
179 175  
180   - this.videoHistory.date = param.date;
181   - this.queryRecords()
182   - break;
183   - case "control":
184   - break;
185   - }
186   - },
187   - timeAxisSelTime:function (val) {
188   - console.log(val)
189   - },
190   - getTimeMakrs(){
191   - return this.timeMakrs;
192   - },
  176 + this.videoHistory.date = param.date;
  177 + this.queryRecords()
  178 + break;
  179 + case "control":
  180 + break;
  181 + }
  182 + },
  183 + timeAxisSelTime: function (val) {
  184 + console.log(val)
  185 + },
  186 + getTimeMakrs() {
  187 + return this.timeMakrs;
  188 + },
193 189 play: function (streamInfo, hasAudio) {
194 190 this.hasaudio = hasAudio;
195 191 // 根据媒体流信息二次判断
... ... @@ -236,276 +232,278 @@
236 232 );
237 233 },
238 234  
239   - queryRecords: function() {
240   - if (!this.videoHistory.date) {
241   - return;
242   - }
243   - this.recordsLoading = true;
244   - let that = this;
245   - var startTime = this.videoHistory.date + " 00:00:00";
246   - var endTime = this.videoHistory.date + " 23:59:59";
247   - this.$axios({
248   - method: 'get',
249   - url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
250   - }).then(function(res) {
251   - // 处理时间信息
252   - that.videoHistory.searchHistoryResult = res.data.recordList;
253   - that.recordsLoading = false;
254   - }).catch(function(e) {
255   - // that.videoHistory.searchHistoryResult = falsificationData.recordData;
256   - });
  235 + queryRecords: function () {
  236 + if (!this.videoHistory.date) {
  237 + return;
  238 + }
  239 + this.recordsLoading = true;
  240 + this.videoHistory.searchHistoryResult = [];
  241 + let that = this;
  242 + var startTime = this.videoHistory.date + " 00:00:00";
  243 + var endTime = this.videoHistory.date + " 23:59:59";
  244 + this.$axios({
  245 + method: 'get',
  246 + url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
  247 + }).then(function (res) {
  248 + // 处理时间信息
  249 + that.videoHistory.searchHistoryResult = res.data.recordList;
  250 + that.recordsLoading = false;
  251 + }).catch(function (e) {
  252 + console.log(e.message);
  253 + // that.videoHistory.searchHistoryResult = falsificationData.recordData;
  254 + });
257 255  
258   - },
259   - onTimeChange: function (video) {
260   - // this.queryRecords()
261   - },
262   - playRecord: function(row) {
263   - let that = this;
264   - if (that.ssrc != "") {
265   - that.stopPlayRecord(function (){
266   - that.ssrc = "",
267   - that.playRecord(row);
268   - })
269   - }else {
270   - this.$axios({
271   - method: 'get',
272   - url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
273   - row.endTime
274   - }).then(function(res) {
275   - var streamInfo = res.data;
276   - that.ssrc = streamInfo.ssrc;
277   - that.videoUrl = streamInfo.ws_flv;
278   - });
279   - }
280   - },
281   - stopPlayRecord: function (callback) {
282   - this.$refs.videoPlayer.pause();
283   - this.videoUrl = '';
284   - this.$axios({
285   - method: 'get',
286   - url: '/api/playback/' + this.ssrc + '/stop'
287   - }).then(function(res) {
288   - if (callback) callback()
289   - });
290   - },
291   - ptzCamera: function(leftRight, upDown, zoom) {
292   - console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
293   - let that = this;
294   - this.$axios({
295   - method: 'post',
296   - url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
297   - '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
298   - }).then(function(res) {});
299   - },
300   - //////////////////////播放器事件处理//////////////////////////
301   - videoError:function(e){
302   - console.log("播放器错误："+JSON.stringify(e));
303   - },
304   - formatTooltip:function(val) {
305   - var h = parseInt(val/60);
306   - var hStr = h< 10 ? ("0" + h):h;
307   - var s = val%60;
308   - var sStr = s< 10 ? ("0" + s):s;
309   - return h + ":" + sStr;
310   - },
311   - timeFormatter: function (row, column, cellValue, index) {
312   - return cellValue.split( " ")[1];
313   - },
314   - mergeTime: function (timeArray) {
315   - var resultArray = [];
316   - for (let i = 0; i < timeArray.length; i++) {
317   - var startTime = new Date(timeArray[i].startTime);
318   - var endTime = new Date(timeArray[i].endTime);
319   - if (i ==0) {
320   - resultArray[0] = {
321   - startTime: startTime,
322   - endTime: endTime
  256 + },
  257 + onTimeChange: function (video) {
  258 + // this.queryRecords()
  259 + },
  260 + playRecord: function (row) {
  261 + let that = this;
  262 + if (that.ssrc != "") {
  263 + that.stopPlayRecord(function () {
  264 + that.ssrc = "",
  265 + that.playRecord(row);
  266 + })
  267 + } else {
  268 + this.$axios({
  269 + method: 'get',
  270 + url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
  271 + row.endTime
  272 + }).then(function (res) {
  273 + var streamInfo = res.data;
  274 + that.ssrc = streamInfo.ssrc;
  275 + that.videoUrl = streamInfo.ws_flv;
  276 + });
323 277 }
324   - }
325   - for (let j = 0; j < resultArray.length; j++) {
326   - if (startTime > resultArray[j].endTime ) { // 合并
327   - if (startTime - resultArray[j].endTime <= 1000){
328   - resultArray[j].endTime = endTime;
329   - }else {
330   - resultArray[resultArray.length] = {
331   - startTime: startTime,
332   - endTime: endTime
  278 + },
  279 + stopPlayRecord: function (callback) {
  280 + this.$refs.videoPlayer.pause();
  281 + this.videoUrl = '';
  282 + this.$axios({
  283 + method: 'get',
  284 + url: '/api/playback/' + this.ssrc + '/stop'
  285 + }).then(function (res) {
  286 + if (callback) callback()
  287 + });
  288 + },
  289 + ptzCamera: function (leftRight, upDown, zoom) {
  290 + console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
  291 + let that = this;
  292 + this.$axios({
  293 + method: 'post',
  294 + url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
  295 + '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
  296 + }).then(function (res) {});
  297 + },
  298 + //////////////////////播放器事件处理//////////////////////////
  299 + videoError: function (e) {
  300 + console.log("播放器错误：" + JSON.stringify(e));
  301 + },
  302 + formatTooltip: function (val) {
  303 + var h = parseInt(val / 60);
  304 + var hStr = h < 10 ? ("0" + h) : h;
  305 + var s = val % 60;
  306 + var sStr = s < 10 ? ("0" + s) : s;
  307 + return h + ":" + sStr;
  308 + },
  309 + timeFormatter: function (row, column, cellValue, index) {
  310 + return cellValue.split(" ")[1];
  311 + },
  312 + mergeTime: function (timeArray) {
  313 + var resultArray = [];
  314 + for (let i = 0; i < timeArray.length; i++) {
  315 + var startTime = new Date(timeArray[i].startTime);
  316 + var endTime = new Date(timeArray[i].endTime);
  317 + if (i == 0) {
  318 + resultArray[0] = {
  319 + startTime: startTime,
  320 + endTime: endTime
  321 + }
333 322 }
334   - }
335   - }else if(resultArray[j].startTime > endTime ) { // 合并
336   - if (resultArray[j].startTime - endTime <= 1000) {
337   - resultArray[j].startTime = startTime;
338   - }else {
339   - resultArray[resultArray.length] = {
340   - startTime: startTime,
341   - endTime: endTime
  323 + for (let j = 0; j < resultArray.length; j++) {
  324 + if (startTime > resultArray[j].endTime) { // 合并
  325 + if (startTime - resultArray[j].endTime <= 1000) {
  326 + resultArray[j].endTime = endTime;
  327 + } else {
  328 + resultArray[resultArray.length] = {
  329 + startTime: startTime,
  330 + endTime: endTime
  331 + }
  332 + }
  333 + } else if (resultArray[j].startTime > endTime) { // 合并
  334 + if (resultArray[j].startTime - endTime <= 1000) {
  335 + resultArray[j].startTime = startTime;
  336 + } else {
  337 + resultArray[resultArray.length] = {
  338 + startTime: startTime,
  339 + endTime: endTime
  340 + }
  341 + }
  342 + }
342 343 }
343   - }
344 344 }
345   - }
  345 + console.log(resultArray)
  346 + return resultArray;
346 347 }
347   - console.log(resultArray)
348   - return resultArray;
349   - }
350   - }
351   - };
  348 + }
  349 +};
352 350 </script>
353 351  
354 352 <style>
355   - .control-wrapper {
356   - position: relative;
357   - width: 6.25rem;
358   - height: 6.25rem;
359   - max-width: 6.25rem;
360   - max-height: 6.25rem;
361   - margin: 0 auto;
362   - border-radius: 100%;
363   - float: left;
364   - }
  353 +.control-wrapper {
  354 + position: relative;
  355 + width: 6.25rem;
  356 + height: 6.25rem;
  357 + max-width: 6.25rem;
  358 + max-height: 6.25rem;
  359 + margin: 0 auto;
  360 + border-radius: 100%;
  361 + float: left;
  362 +}
365 363  
366   - .control-btn {
367   - display: flex;
368   - justify-content: center;
369   - position: absolute;
370   - width: 44%;
371   - height: 44%;
372   - border-radius: 5px;
373   - border: 1px solid #78aee4;
374   - box-sizing: border-box;
375   - transition: all 0.3s linear;
376   - }
  364 +.control-btn {
  365 + display: flex;
  366 + justify-content: center;
  367 + position: absolute;
  368 + width: 44%;
  369 + height: 44%;
  370 + border-radius: 5px;
  371 + border: 1px solid #78aee4;
  372 + box-sizing: border-box;
  373 + transition: all 0.3s linear;
  374 +}
377 375  
378   - .control-btn i {
379   - font-size: 20px;
380   - color: #78aee4;
381   - display: flex;
382   - justify-content: center;
383   - align-items: center;
384   - }
  376 +.control-btn i {
  377 + font-size: 20px;
  378 + color: #78aee4;
  379 + display: flex;
  380 + justify-content: center;
  381 + align-items: center;
  382 +}
385 383  
386   - .control-round {
387   - position: absolute;
388   - top: 21%;
389   - left: 21%;
390   - width: 58%;
391   - height: 58%;
392   - background: #fff;
393   - border-radius: 100%;
394   - }
  384 +.control-round {
  385 + position: absolute;
  386 + top: 21%;
  387 + left: 21%;
  388 + width: 58%;
  389 + height: 58%;
  390 + background: #fff;
  391 + border-radius: 100%;
  392 +}
395 393  
396   - .control-round-inner {
397   - position: absolute;
398   - left: 15%;
399   - top: 15%;
400   - display: flex;
401   - justify-content: center;
402   - align-items: center;
403   - width: 70%;
404   - height: 70%;
405   - font-size: 40px;
406   - color: #78aee4;
407   - border: 1px solid #78aee4;
408   - border-radius: 100%;
409   - transition: all 0.3s linear;
410   - }
  394 +.control-round-inner {
  395 + position: absolute;
  396 + left: 15%;
  397 + top: 15%;
  398 + display: flex;
  399 + justify-content: center;
  400 + align-items: center;
  401 + width: 70%;
  402 + height: 70%;
  403 + font-size: 40px;
  404 + color: #78aee4;
  405 + border: 1px solid #78aee4;
  406 + border-radius: 100%;
  407 + transition: all 0.3s linear;
  408 +}
411 409  
412   - .control-inner-btn {
413   - position: absolute;
414   - width: 60%;
415   - height: 60%;
416   - background: #fafafa;
417   - }
  410 +.control-inner-btn {
  411 + position: absolute;
  412 + width: 60%;
  413 + height: 60%;
  414 + background: #fafafa;
  415 +}
418 416  
419   - .control-top {
420   - top: -8%;
421   - left: 27%;
422   - transform: rotate(-45deg);
423   - border-radius: 5px 100% 5px 0;
424   - }
  417 +.control-top {
  418 + top: -8%;
  419 + left: 27%;
  420 + transform: rotate(-45deg);
  421 + border-radius: 5px 100% 5px 0;
  422 +}
425 423  
426   - .control-top i {
427   - transform: rotate(45deg);
428   - border-radius: 5px 100% 5px 0;
429   - }
  424 +.control-top i {
  425 + transform: rotate(45deg);
  426 + border-radius: 5px 100% 5px 0;
  427 +}
430 428  
431   - .control-top .control-inner {
432   - left: -1px;
433   - bottom: 0;
434   - border-top: 1px solid #78aee4;
435   - border-right: 1px solid #78aee4;
436   - border-radius: 0 100% 0 0;
437   - }
  429 +.control-top .control-inner {
  430 + left: -1px;
  431 + bottom: 0;
  432 + border-top: 1px solid #78aee4;
  433 + border-right: 1px solid #78aee4;
  434 + border-radius: 0 100% 0 0;
  435 +}
438 436  
439   - .control-top .fa {
440   - transform: rotate(45deg) translateY(-7px);
441   - }
  437 +.control-top .fa {
  438 + transform: rotate(45deg) translateY(-7px);
  439 +}
442 440  
443   - .control-left {
444   - top: 27%;
445   - left: -8%;
446   - transform: rotate(45deg);
447   - border-radius: 5px 0 5px 100%;
448   - }
  441 +.control-left {
  442 + top: 27%;
  443 + left: -8%;
  444 + transform: rotate(45deg);
  445 + border-radius: 5px 0 5px 100%;
  446 +}
449 447  
450   - .control-left i {
451   - transform: rotate(-45deg);
452   - }
  448 +.control-left i {
  449 + transform: rotate(-45deg);
  450 +}
453 451  
454   - .control-left .control-inner {
455   - right: -1px;
456   - top: -1px;
457   - border-bottom: 1px solid #78aee4;
458   - border-left: 1px solid #78aee4;
459   - border-radius: 0 0 0 100%;
460   - }
  452 +.control-left .control-inner {
  453 + right: -1px;
  454 + top: -1px;
  455 + border-bottom: 1px solid #78aee4;
  456 + border-left: 1px solid #78aee4;
  457 + border-radius: 0 0 0 100%;
  458 +}
461 459  
462   - .control-left .fa {
463   - transform: rotate(-45deg) translateX(-7px);
464   - }
  460 +.control-left .fa {
  461 + transform: rotate(-45deg) translateX(-7px);
  462 +}
465 463  
466   - .control-right {
467   - top: 27%;
468   - right: -8%;
469   - transform: rotate(45deg);
470   - border-radius: 5px 100% 5px 0;
471   - }
  464 +.control-right {
  465 + top: 27%;
  466 + right: -8%;
  467 + transform: rotate(45deg);
  468 + border-radius: 5px 100% 5px 0;
  469 +}
472 470  
473   - .control-right i {
474   - transform: rotate(-45deg);
475   - }
  471 +.control-right i {
  472 + transform: rotate(-45deg);
  473 +}
476 474  
477   - .control-right .control-inner {
478   - left: -1px;
479   - bottom: -1px;
480   - border-top: 1px solid #78aee4;
481   - border-right: 1px solid #78aee4;
482   - border-radius: 0 100% 0 0;
483   - }
  475 +.control-right .control-inner {
  476 + left: -1px;
  477 + bottom: -1px;
  478 + border-top: 1px solid #78aee4;
  479 + border-right: 1px solid #78aee4;
  480 + border-radius: 0 100% 0 0;
  481 +}
484 482  
485   - .control-right .fa {
486   - transform: rotate(-45deg) translateX(7px);
487   - }
  483 +.control-right .fa {
  484 + transform: rotate(-45deg) translateX(7px);
  485 +}
488 486  
489   - .control-bottom {
490   - left: 27%;
491   - bottom: -8%;
492   - transform: rotate(45deg);
493   - border-radius: 0 5px 100% 5px;
494   - }
  487 +.control-bottom {
  488 + left: 27%;
  489 + bottom: -8%;
  490 + transform: rotate(45deg);
  491 + border-radius: 0 5px 100% 5px;
  492 +}
495 493  
496   - .control-bottom i {
497   - transform: rotate(-45deg);
498   - }
  494 +.control-bottom i {
  495 + transform: rotate(-45deg);
  496 +}
499 497  
500   - .control-bottom .control-inner {
501   - top: -1px;
502   - left: -1px;
503   - border-bottom: 1px solid #78aee4;
504   - border-right: 1px solid #78aee4;
505   - border-radius: 0 0 100% 0;
506   - }
  498 +.control-bottom .control-inner {
  499 + top: -1px;
  500 + left: -1px;
  501 + border-bottom: 1px solid #78aee4;
  502 + border-right: 1px solid #78aee4;
  503 + border-radius: 0 0 100% 0;
  504 +}
507 505  
508   - .control-bottom .fa {
509   - transform: rotate(-45deg) translateY(7px);
510   - }
  506 +.control-bottom .fa {
  507 + transform: rotate(-45deg) translateY(7px);
  508 +}
511 509 </style>
... ...