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 <template> 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 </template> 89 </template>
93 90
94 <script> 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 return { 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 play: function (streamInfo, hasAudio) { 189 play: function (streamInfo, hasAudio) {
194 this.hasaudio = hasAudio; 190 this.hasaudio = hasAudio;
195 // 根据媒体流信息二次判断 191 // 根据媒体流信息二次判断
@@ -236,276 +232,278 @@ @@ -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 </script> 350 </script>
353 351
354 <style> 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 </style> 509 </style>