From a47a7ccb5475d288e64939fce5a0f35e55a9de53 Mon Sep 17 00:00:00 2001 From: Lawrence <1934378145@qq.com> Date: 星期一, 11 一月 2021 09:13:03 +0800 Subject: [PATCH] 修正个别错误 --- web_src/src/components/gb28181/devicePlayer.vue | 451 +++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 376 insertions(+), 75 deletions(-) diff --git a/web_src/src/components/gb28181/devicePlayer.vue b/web_src/src/components/gb28181/devicePlayer.vue index a86455c..c99ce79 100644 --- a/web_src/src/components/gb28181/devicePlayer.vue +++ b/web_src/src/components/gb28181/devicePlayer.vue @@ -1,14 +1,16 @@ <template> -<div id="devicePlayer"> - <el-dialog title="瑙嗛鎾斁" top="0" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()"> - <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> +<div id="devicePlayer" v-loading="isLoging"> + + <el-dialog title="瑙嗛鎾斁" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()"> + <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> --> + <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></player> <div id="shared" style="text-align: right; margin-top: 1rem;"> - <el-tabs v-model="tabActiveName"> - <el-tab-pane label="濯掍綋娴佷俊鎭�" name="media"> + <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick"> + <el-tab-pane label="瀹炴椂瑙嗛" name="media"> <div style="margin-bottom: 0.5rem;"> - <el-button type="primary" size="small" @click="playRecord(true, '')">鎾斁</el-button> - <el-button type="primary" size="small" @click="startRecord()">褰曞埗</el-button> - <el-button type="primary" size="small" @click="stopRecord()">鍋滄褰曞埗</el-button> + <!-- <el-button type="primary" size="small" @click="playRecord(true, '')">鎾斁</el-button>--> + <!-- <el-button type="primary" size="small" @click="startRecord()">褰曞埗</el-button>--> + <!-- <el-button type="primary" size="small" @click="stopRecord()">鍋滄褰曞埗</el-button>--> </div> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <span style="width: 5rem; line-height: 2.5rem; text-align: right;">鎾斁鍦板潃锛�</span> @@ -24,49 +26,106 @@ </div> </el-tab-pane> <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> - <el-tab-pane label="褰曞儚鏌ヨ" name="second"> - <el-date-picker v-model="videoHistory.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="寮�濮嬫椂闂�" @change="recordList()"></el-date-picker> - <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="缁撴潫鏃堕棿" @change="recordList()"></el-date-picker> - <el-table :data="videoHistory.searchHistoryResult" style="width: 100%"> - <el-table-column label="鍚嶇О" prop="name" width="150"></el-table-column> - <el-table-column label="鏂囦欢" prop="filePath" width="300"></el-table-column> - <el-table-column label="寮�濮嬫椂闂�" prop="startTime" width="160"></el-table-column> - <el-table-column label="缁撴潫鏃堕棿" prop="endTime" width="160"></el-table-column> + <el-tab-pane label="褰曞儚鏌ヨ" name="record"> + <el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="鏃ユ湡" @change="queryRecords()"></el-date-picker> + <el-table :data="videoHistory.searchHistoryResult" height="150" v-loading="recordsLoading"> + <el-table-column label="鍚嶇О" prop="name"></el-table-column> + <el-table-column label="鏂囦欢" prop="filePath"></el-table-column> + <el-table-column label="寮�濮嬫椂闂�" prop="startTime" :formatter="timeFormatter"></el-table-column> + <el-table-column label="缁撴潫鏃堕棿" prop="endTime" :formatter="timeFormatter"></el-table-column> <el-table-column label="鎿嶄綔"> <template slot-scope="scope"> - <el-button type="primary" size="mini" @click="playRecord(false, scope.row)">鎾斁</el-button> + <el-button icon="el-icon-video-play" size="mini" @click="playRecord(scope.row)">鎾斁</el-button> </template> </el-table-column> </el-table> </el-tab-pane> <!--閬ユ帶鐣岄潰--> - <el-tab-pane label="浜戝彴鎺у埗" name="third"> - <div style="display: flex; justify-content: center;"> + <el-tab-pane label="浜戝彴鎺у埗" name="control"> + <div style="display: flex; justify-content: left;"> <div class="control-wrapper"> - <div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)"> + <div class="control-btn control-top" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)"> <i class="el-icon-caret-top"></i> <div class="control-inner-btn control-inner"></div> </div> - <div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)"> + <div class="control-btn control-left" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)"> <i class="el-icon-caret-left"></i> <div class="control-inner-btn control-inner"></div> </div> - <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)"> + <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)"> <i class="el-icon-caret-bottom"></i> <div class="control-inner-btn control-inner"></div> </div> - <div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)"> + <div class="control-btn control-right" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)"> <i class="el-icon-caret-right"></i> <div class="control-inner-btn control-inner"></div> </div> <div class="control-round"> <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div> </div> - - <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> - <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> + <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 1)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-in control-zoom-btn" style="font-size: 1.875rem;"></i></div> + <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out control-zoom-btn"></i></div> + <div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 9rem;"> + <el-slider v-model="controSpeed" :max="255"></el-slider> + </div> </div> + + <div class="control-panel"> + <el-button-group> + <el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center" size="medium" type="info">棰勭疆浣嶇紪鍙�</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 0rem; width: 6rem" size="mini" v-model="presetPos" controls-position="right" :precision="0" :step="1" :min="1" :max="255"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="presetPosition(129, presetPos)">璁剧疆</el-button> + <el-button style="position: absolute; left: 27rem; top: 0rem; width: 5rem" size="mini" type="primary" icon="el-icon-place" @click="presetPosition(130, presetPos)">璋冪敤</el-button> + <el-button style="position: absolute; left: 16rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="presetPosition(131, presetPos)">鍒犻櫎</el-button> + <el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">宸¤埅閫熷害</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(134, cruisingGroup, cruisingSpeed)">璁剧疆</el-button> + <el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">鍋滅暀鏃堕棿</el-tag> + <el-input-number style="position: absolute; left: 21rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingTime" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> + <el-button style="position: absolute; left: 27rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-timer" @click="setSpeedOrTime(135, cruisingGroup, cruisingTime)">璁剧疆</el-button> + <el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center" size="medium" type="info">宸¤埅缁勭紪鍙�</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 4.5rem; width: 6rem" size="mini" v-model="cruisingGroup" controls-position="right" :precision="0" :min="0" :max="255"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="setCommand(132, cruisingGroup, presetPos)">娣诲姞鐐�</el-button> + <el-button style="position: absolute; left: 16rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="setCommand(133, cruisingGroup, presetPos)">鍒犻櫎鐐�</el-button> + <el-button style="position: absolute; left: 21rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete" @click="setCommand(133, cruisingGroup, 0)">鍒犻櫎缁�</el-button> + <el-button style="position: absolute; left: 27rem; top: 5rem; width: 5rem" size="mini" type="primary" icon="el-icon-video-camera-solid" @click="setCommand(136, cruisingGroup, 0)">宸¤埅</el-button> + <el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center" size="medium" type="info">鎵弿閫熷害</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 7rem; width: 6rem" size="mini" v-model="scanSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 7rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(138, scanGroup, scanSpeed)">璁剧疆</el-button> + <el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center" size="medium" type="info">鎵弿缁勭紪鍙�</el-tag> + <el-input-number style="position: absolute; left: 5rem; top: 9rem; width: 6rem" size="mini" v-model="scanGroup" controls-position="right" :precision="0" :step="1" :min="0" :max="255"></el-input-number> + <el-button style="position: absolute; left: 11rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-left" @click="setCommand(137, scanGroup, 1)">宸﹁竟鐣�</el-button> + <el-button style="position: absolute; left: 16rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-right" @click="setCommand(137, scanGroup, 2)">鍙宠竟鐣�</el-button> + <el-button style="position: absolute; left: 27rem; top: 7rem; width: 5rem" size="mini" type="primary" icon="el-icon-video-camera-solid" @click="setCommand(137, scanGroup, 0)">鎵弿</el-button> + <el-button style="position: absolute; left: 27rem; top: 9rem; width: 5rem" size="mini" type="danger" icon="el-icon-switch-button" @click="ptzCamera(0, 0, 0)">鍋滄</el-button> + </el-button-group> + </div> + </div> + </el-tab-pane> + <el-tab-pane label="缂栫爜淇℃伅" name="codec" v-loading="tracksLoading"> + <p> + 鏃犳硶鎾斁鎴栬�呮病鏈夊0闊�?   璇曚竴璇� + <el-button size="mini" type="primary" v-if="!coverPlaying" @click="coverPlay">杞爜鎾斁</el-button> + <el-button size="mini" type="danger" v-if="coverPlaying" @click="convertStopClick">鍋滄杞爜</el-button> + </p> + <div class="trank" > + <div v-for="(item, index) in tracks"> + <span >娴� {{index}}</span> + <div class="trankInfo" v-if="item.codec_type == 0"> + <p>鏍煎紡: {{item.codec_id_name}}</p> + <p>绫诲瀷: 瑙嗛</p> + <p>鍒嗚鲸鐜�: {{item.width}} x {{item.height}}</p> + <p>甯х巼: {{item.fps}}</p> + </div> + <div class="trankInfo" v-if="item.codec_type == 1"> + <p>鏍煎紡: {{item.codec_id_name}}</p> + <p>绫诲瀷: 闊抽</p> + <p>閲囨牱浣嶆暟: {{item.sample_bit}}</p> + <p>閲囨牱鐜�: {{item.sample_rate}}</p> + </div> + </div> + </div> </el-tab-pane> @@ -77,12 +136,12 @@ </template> <script> -import LivePlayer from '@liveqing/liveplayer' +import player from './player.vue' export default { name: 'devicePlayer', props: {}, components: { - LivePlayer + player, }, computed: { getPlayerShared: function () { @@ -93,59 +152,178 @@ }; } }, - created() { - // this.videoHistory.searchHistoryResult = falsificationData.recordData.recordList; - }, + created() {}, data() { return { video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4', videoUrl: '', videoHistory: { - startTime: '', - endTime: '', + date: '', searchHistoryResult: [] //濯掍綋娴佸巻鍙茶褰曟悳绱㈢粨鏋� }, showVideoDialog: false, - normalssrc: '', - ssrc: '', + streamId: '', + convertKey: '', deviceId: '', channelId: '', tabActiveName: 'media', - hasaudio: false - + hasaudio: false, + loadingRecords: false, + recordsLoading: false, + isLoging: false, + controSpeed: 30, + timeVal: 0, + timeMin: 0, + timeMax: 1440, + presetPos: 1, + cruisingSpeed: 100, + cruisingTime: 5, + cruisingGroup: 0, + scanSpeed: 100, + scanGroup: 0, + tracks: [], + coverPlaying:false, + tracksLoading: false }; }, methods: { - - play: function (streamInfo, deviceId, channelId, hasAudio) { - this.hasaudio = hasAudio; - // 鏍规嵁濯掍綋娴佷俊鎭簩娆″垽鏂� - if (!!streamInfo.tracks && streamInfo.tracks.length > 0) { - var realHasAudio = false; - for (let i = 0; i < streamInfo.tracks.length; i++) { - if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") { // 鍒ゆ柇涓篈AC闊抽 - realHasAudio = true; + tabHandleClick: function(tab, event) { + console.log(tab) + var that = this; + that.tracks = []; + that.tracksLoading = true; + if (tab.name == "codec") { + this.$axios({ + method: 'get', + url: '/zlm/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app=rtp&stream='+ this.streamId + }).then(function (res) { + that.tracksLoading = false; + if (res.data.code == 0 && res.data.online) { + that.tracks = res.data.tracks; + }else{ + that.$message({ + showClose: true, + message: '鑾峰彇缂栫爜淇℃伅澶辫触,', + type: 'warning' + }); } - } - this.hasaudio = realHasAudio && this.hasaudio; + }).catch(function (e) {}); } - this.ssrc = streamInfo.ssrc; - this.deviceId = deviceId; + }, + openDialog: function (tab, deviceId, channelId, param) { + this.tabActiveName = tab; this.channelId = channelId; - // this.$refs.videoPlayer.hasaudio = hasAudio; - // this.videoUrl = streamInfo.flv + "?" + new Date().getTime(); + this.deviceId = deviceId; + this.streamId = ""; + this.videoUrl = "" + if (!!this.$refs.videoPlayer) { + this.$refs.videoPlayer.pause(); + } + switch (tab) { + case "media": + this.play(param.streamInfo, param.hasAudio) + break; + case "record": + this.showVideoDialog = true; + + this.videoHistory.date = param.date; + this.queryRecords() + break; + case "control": + break; + } + }, + timeAxisSelTime: function (val) { + console.log(val) + }, + play: function (streamInfo, hasAudio) { + + this.hasaudio = hasAudio; + this.isLoging = false; this.videoUrl = streamInfo.ws_flv; - this.showVideoDialog = true; - console.log(this.ssrc); + this.streamId = streamInfo.streamId; + this.playFromStreamInfo(false, streamInfo) + }, + coverPlay: function () { + var that = this; + this.coverPlaying = true; + this.$refs.videoPlayer.pause() + that.$axios({ + method: 'post', + url: '/api/play/' + that.streamId + '/convert' + }).then(function (res) { + if (res.data.code == 0) { + that.convertKey = res.data.key; + setTimeout(()=>{ + that.isLoging = false; + that.playFromStreamInfo(false, res.data.data); + }, 2000) + } else { + that.isLoging = false; + that.coverPlaying = false; + that.$message({ + showClose: true, + message: '杞爜澶辫触', + type: 'error' + }); + } + }).catch(function (e) { + console.log(e) + that.coverPlaying = false; + that.$message({ + showClose: true, + message: '鎾斁閿欒', + type: 'error' + }); + }); + }, + convertStopClick: function() { + this.convertStop(()=>{ + this.$refs.videoPlayer.play(this.videoUrl) + }); + }, + convertStop: function(callback) { + var that = this; + that.$refs.videoPlayer.pause() + this.$axios({ + method: 'post', + url: '/api/play/convert/stop/' + this.convertKey + }).then(function (res) { + if (res.data.code == 0) { + console.log(res.data.msg) + }else { + console.error(res.data.msg) + } + if (callback )callback(); + }).catch(function (e) {}); + that.coverPlaying = false; + that.convertKey = ""; + // if (callback )callback(); + }, + + playFromStreamInfo: function (realHasAudio, streamInfo) { + this.showVideoDialog = true; + this.hasaudio = realHasAudio && this.hasaudio; + this.$refs.videoPlayer.play(streamInfo.ws_flv) }, close: function () { console.log('鍏抽棴瑙嗛'); - this.$refs.videoPlayer.pause(); + if (!!this.$refs.videoPlayer){ + this.$refs.videoPlayer.pause(); + } this.videoUrl = ''; + this.coverPlaying = false; this.showVideoDialog = false; + if (this.convertKey != '') { + this.convertStop(); + } + this.convertKey = '' }, + copySharedInfo: function (data) { console.log('澶嶅埗鍐呭锛�' + data); + this.coverPlaying = false; + this.tracks = [] let _this = this; this.$copyText(data).then( function (e) { @@ -165,51 +343,145 @@ ); }, - recordList: function () { - if (!this.videoHistory.startTime || !this.videoHistory.endTime) { + queryRecords: function () { + if (!this.videoHistory.date) { return; } + this.recordsLoading = true; + this.videoHistory.searchHistoryResult = []; let that = this; + var startTime = this.videoHistory.date + " 00:00:00"; + var endTime = this.videoHistory.date + " 23:59:59"; this.$axios({ method: 'get', - url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.videoHistory - .startTime + '&endTime=' + this.videoHistory.endTime + url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime }).then(function (res) { - console.log(JSON.stringify(res)); + // 澶勭悊鏃堕棿淇℃伅 + that.videoHistory.searchHistoryResult = res.data.recordList; + that.recordsLoading = false; }).catch(function (e) { + console.log(e.message); // that.videoHistory.searchHistoryResult = falsificationData.recordData; }); }, - playRecord: function (isBackLive, rowData) { + onTimeChange: function (video) { + // this.queryRecords() + }, + playRecord: function (row) { let that = this; - if (isBackLive) { - this.videoUrl = this.getVideoUrlBySsrc(this.normalssrc); - return; + if (that.streamId != "") { + that.stopPlayRecord(function () { + that.streamId = "", + that.playRecord(row); + }) + } else { + this.$axios({ + method: 'get', + url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' + + row.endTime + }).then(function (res) { + var streamInfo = res.data; + that.streamId = streamInfo.streamId; + that.videoUrl = streamInfo.ws_flv; + }); } + }, + stopPlayRecord: function (callback) { + this.$refs.videoPlayer.pause(); + this.videoUrl = ''; this.$axios({ method: 'get', - url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + rowData.startTime + '&endTime=' + - rowData.endTime + url: '/api/playback/' + this.streamId + '/stop' }).then(function (res) { - let ssrc = res.data.ssrc; - that.videoUrl = that.getVideoUrlBySsrc(ssrc); - //that.videoUrl='http://hls.cntv.kcdnvip.com/asp/hls/main/0303000a/3/default/f466089412c04a759c5515dbfcc3ac3d/main.m3u8?maxbr=2048'; + if (callback) callback() }); - }, ptzCamera: function (leftRight, upDown, zoom) { console.log('浜戝彴鎺у埗锛�' + leftRight + ' : ' + upDown + " : " + zoom); let that = this; this.$axios({ method: 'post', - url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown + - '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50' + // url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown + + // '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50' + url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + (zoom * 16 + upDown * 4 + leftRight) + '&horizonSpeed=' + this.controSpeed + '&verticalSpeed=' + this.controSpeed + '&zoomSpeed=' + this.controSpeed }).then(function (res) {}); }, //////////////////////鎾斁鍣ㄤ簨浠跺鐞�////////////////////////// videoError: function (e) { console.log("鎾斁鍣ㄩ敊璇細" + JSON.stringify(e)); + }, + presetPosition: function (cmdCode, presetPos) { + console.log('棰勭疆浣嶆帶鍒讹細' + this.presetPos + ' : 0x' + cmdCode.toString(16)); + let that = this; + this.$axios({ + method: 'post', + url: '/api/frontEndCommand/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '¶meter1=0¶meter2=' + presetPos + '&combindCode2=0' + }).then(function (res) {}); + }, + setSpeedOrTime: function (cmdCode, groupNum, parameter) { + let that = this; + let parameter2 = parameter % 256; + let combindCode2 = Math.floor(parameter / 256) * 16; + console.log('鍓嶇鎺у埗锛�0x' + cmdCode.toString(16) + ' 0x' + groupNum.toString(16) + ' 0x' + parameter2.toString(16) + ' 0x' + combindCode2.toString(16)); + this.$axios({ + method: 'post', + url: '/api/frontEndCommand/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '¶meter1=' + groupNum + '¶meter2=' + parameter2 + '&combindCode2=' + combindCode2 + }).then(function (res) {}); + }, + setCommand: function (cmdCode, groupNum, parameter) { + let that = this; + console.log('鍓嶇鎺у埗锛�0x' + cmdCode.toString(16) + ' 0x' + groupNum.toString(16) + ' 0x' + parameter.toString(16) + ' 0x0'); + this.$axios({ + method: 'post', + url: '/api/frontEndCommand/' + this.deviceId + '/' + this.channelId + '?cmdCode=' + cmdCode + '¶meter1=' + groupNum + '¶meter2=' + parameter + '&combindCode2=0' + }).then(function (res) {}); + }, + formatTooltip: function (val) { + var h = parseInt(val / 60); + var hStr = h < 10 ? ("0" + h) : h; + var s = val % 60; + var sStr = s < 10 ? ("0" + s) : s; + return h + ":" + sStr; + }, + timeFormatter: function (row, column, cellValue, index) { + return cellValue.split(" ")[1]; + }, + mergeTime: function (timeArray) { + var resultArray = []; + for (let i = 0; i < timeArray.length; i++) { + var startTime = new Date(timeArray[i].startTime); + var endTime = new Date(timeArray[i].endTime); + if (i == 0) { + resultArray[0] = { + startTime: startTime, + endTime: endTime + } + } + for (let j = 0; j < resultArray.length; j++) { + if (startTime > resultArray[j].endTime) { // 鍚堝苟 + if (startTime - resultArray[j].endTime <= 1000) { + resultArray[j].endTime = endTime; + } else { + resultArray[resultArray.length] = { + startTime: startTime, + endTime: endTime + } + } + } else if (resultArray[j].startTime > endTime) { // 鍚堝苟 + if (resultArray[j].startTime - endTime <= 1000) { + resultArray[j].startTime = startTime; + } else { + resultArray[resultArray.length] = { + startTime: startTime, + endTime: endTime + } + } + } + } + } + console.log(resultArray) + return resultArray; } } }; @@ -222,9 +494,18 @@ height: 6.25rem; max-width: 6.25rem; max-height: 6.25rem; - margin: 0 auto; border-radius: 100%; + margin-top: 1.5rem; + margin-left: 0.5rem; float: left; +} + +.control-panel { + position: relative; + top: 0; + left: 5rem; + height: 11rem; + max-height: 11rem; } .control-btn { @@ -238,6 +519,9 @@ box-sizing: border-box; transition: all 0.3s linear; } +.control-btn:hover { + cursor:pointer +} .control-btn i { font-size: 20px; @@ -245,6 +529,12 @@ display: flex; justify-content: center; align-items: center; +} +.control-btn i:hover { + cursor:pointer +} +.control-zoom-btn:hover { + cursor:pointer } .control-round { @@ -259,8 +549,8 @@ .control-round-inner { position: absolute; - left: 15%; - top: 15%; + left: 13%; + top: 13%; display: flex; justify-content: center; align-items: center; @@ -372,4 +662,15 @@ .control-bottom .fa { transform: rotate(-45deg) translateY(7px); } +.trank { + width: 80%; + height: 180px; + text-align: left; + padding: 0 10%; + overflow: auto; +} +.trankInfo { + width: 80%; + padding: 0 10%; +} </style> -- Gitblit v1.8.0