From fa44bcc2861fe56e8af50fbd8f56065250a2ece3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期四, 06 一月 2022 10:08:07 +0800 Subject: [PATCH] 报错处理 --- src/pages/cameraAccess/components/CameraInfo.vue | 511 +++++++++++++++++++++++++++---------------------------- 1 files changed, 251 insertions(+), 260 deletions(-) diff --git a/src/pages/cameraAccess/components/CameraInfo.vue b/src/pages/cameraAccess/components/CameraInfo.vue index 3c7dd49..a7a559a 100644 --- a/src/pages/cameraAccess/components/CameraInfo.vue +++ b/src/pages/cameraAccess/components/CameraInfo.vue @@ -4,12 +4,17 @@ <el-row> <el-col :span="9"> <el-form-item label="RTSP鍦板潃" :span="11" prop="rtsp"> - <el-input v-model="form.rtsp" placeholder="rtsp://" :disabled="isDisabled" size="small"></el-input> + <el-input + v-model="form.rtsp" + placeholder="rtsp://" + :disabled="isDisabled" + size="small" + ></el-input> </el-form-item> </el-col> <el-col :span="9" :offset="1"> - <el-form-item label="鍧愭爣" style="width:100%;"> - <label slot="label"> 鍧愭爣</label> + <el-form-item label="鍧愭爣" style="width: 100%"> + <label slot="label">鍧愭爣</label> <el-col :span="11"> <el-input v-model="form.latitude" @@ -31,23 +36,33 @@ </el-row> <el-row> <el-col :span="9"> - <el-form-item label="璁惧鍚嶇О" style="width:100%" prop="name"> - <el-input v-model="form.name" placeholder="璇疯緭鍏ヨ澶囧悕绉�" :disabled="isDisabled" size="small"></el-input> + <el-form-item label="璁惧鍚嶇О" style="width: 100%" prop="name"> + <el-input + v-model="form.name" + placeholder="璇疯緭鍏ヨ澶囧悕绉�" + :disabled="isDisabled" + size="small" + ></el-input> </el-form-item> </el-col> <el-col :span="9" :offset="1"> - <el-form-item label="璁惧鍦板潃" style="width:100%" prop="addr"> - <el-input v-model="form.addr" placeholder="璇疯緭鍏ュ湴鍧�鎻忚堪" :disabled="!form.rtsp" size="small"></el-input> + <el-form-item label="璁惧鍦板潃" style="width: 100%" prop="addr"> + <el-input + v-model="form.addr" + placeholder="璇疯緭鍏ュ湴鍧�鎻忚堪" + :disabled="isDisabled" + size="small" + ></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="9"> - <el-form-item label="澶勭悊鍒嗚鲸鐜�" style="width:100%"> + <el-form-item label="澶勭悊鍒嗚鲸鐜�" style="width: 100%"> <el-select v-model="form.resolution" placeholder="鏈満鍒嗚鲸鐜�" - style="position: absolute;left: 0;" + style="position: absolute; left: 0" size="small" > <el-option @@ -59,12 +74,13 @@ </el-select> </el-form-item> </el-col> - <el-col :span="9" :offset="1" style="padding-left: 11px;"> + <el-col :span="9" :offset="1"> <el-form-item label="浜嬩欢澹伴煶"> - <div class="flex-wrap" style="margin-left:-10px"> - <el-switch v-model="form.voiceEnable" active-color="#409eff" :width="50"></el-switch> - <el-select - v-model="form.voiceId" + <div class="flex-wrap" style="margin-top: 10px"> + <el-switch v-model="form.voiceEnable" :width="50"></el-switch> + <!-- 灞忚斀澹伴煶閫夋嫨,璋冩暣鍒板満鏅� --> + <!-- <el-select + v-model="voice" placeholder="閫夋嫨澹伴煶" size="small" value-key="id" @@ -77,57 +93,79 @@ :value="item" ></el-option> </el-select> - <span class="player-btn" @click="togglePlayer"> + <span class="player-btn" @click="togglePlayer" style="cursor:pointer;"> <i + v-if="togglePlay" class="el-icon-video-play" style="font-size:26px; vertical-align:middle; color:#409eff" ></i> - </span> + <i + v-else + class="el-icon-video-pause" + style="font-size:26px; vertical-align:middle; color:#409eff" + ></i> + </span>--> </div> </el-form-item> </el-col> </el-row> <el-row v-show="isGb28182"> <el-col :span="9"> - <el-form-item label="璁惧鍒悕" style="width:100%" prop="alias"> - <el-input v-model="form.alias" placeholder="璇疯緭鍏ヨ澶囧埆鍚�" size="small"></el-input> + <el-form-item label="璁惧鍒悕" style="width: 100%" prop="alias"> + <el-input + v-model="form.alias" + placeholder="璇疯緭鍏ヨ澶囧埆鍚�" + size="small" + ></el-input> </el-form-item> </el-col> </el-row> <el-row> <!-- 娣诲姞浼犳劅鍣� --> - <CameraInfoEditor ref="cameraEditor" :Carmeras="form" :sensors="sensors"></CameraInfoEditor> + <CameraInfoEditor + ref="cameraEditor" + :Carmeras="form" + :sensors="sensors" + ></CameraInfoEditor> </el-row> <el-row style="padding-top: 15px"> - <el-col :span="19" style="text-align: right;"> + <el-col :span="19" style="text-align: right"> <el-button size="small" type="primary" @click="onSubmit('addForm')" :disabled="conDisabled" - >淇濆瓨</el-button> + >淇濆瓨</el-button + > <el-button type="danger" size="small" @click="deleteCamera" v-if="!isAdd" :disabled="isDisabled" - >鍒犻櫎鎽勫儚鏈�</el-button> + >鍒犻櫎鎽勫儚鏈�</el-button + > </el-col> </el-row> <el-divider></el-divider> <input v-model="form.id" type="hidden" /> <input v-model="form.areaid" type="hidden" /> <el-row> - <el-col :span="12" style="text-align: right;"> - <el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">杩炴帴娴嬭瘯</el-button> + <el-col :span="12" style="text-align: right"> + <el-button + size="small" + type="primary" + @click="cameraConnet" + :disabled="conDisabled" + >杩炴帴娴嬭瘯</el-button + > </el-col> </el-row> - <el-row style="padding-top: 15px"> + <el-row style="padding: 15px 0"> <el-col :span="12"> - <camera-player + <!-- <camera-player :cameraName="videoItem.name" :cameraID="videoItem.id" :isGb="videoItem.cameraType === 1" @@ -135,7 +173,26 @@ :isRunning="false" v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState" ></camera-player> - <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video> + <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video> --> + <wasm-player + :cameraName="videoItem.name" + :cameraID="videoItem.id" + :isGb="videoItem.cameraType === 1" + :rtspUrl="videoItem.rtsp" + :isRunning="false" + :showArea="false" + v-if=" + videoItem !== '' && + videoItem !== undefined && + videoItem !== null && + visibilityState + " + ></wasm-player> + <video + v-else + poster="/images/cameraAccess/video-poster.png" + preload="none" + ></video> </el-col> <!-- 绯荤粺杩愯淇℃伅 --> @@ -143,10 +200,10 @@ <div class="sysinfo-box"> <div style="width: 70%"> <ul> - <li style="width:100%"> + <li style="width: 100%"> <info-card - style="width:100%;min-width: 440px" - :realtime="PollData.RealTimeSum" + style="width: 100%; min-width: 440px" + :realtime="PollData.RealTimeValidCount" :polling="PollData.PollValidCount" :dataStack="PollData.stackChannelCount" ></info-card> @@ -157,7 +214,10 @@ :style="`width:80%;height:174px;position: relative;left: -12px;`" v-if="PollData.barCharts && PollData.barCharts.length !== 0" > - <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar> + <eChartsBar + ref="cpuMeneryCharts" + :xAxisData="PollData.barCharts" + ></eChartsBar> </div> </div> </el-col> @@ -167,36 +227,36 @@ </template> <script> import { - checkCameraConnet, createCamera, updateCameraInfo, getCameraInfo, - delCamera + delCamera, } from "@/api/camera"; import { getSoundList } from "@/api/event"; -import { changeRunType } from "@/api/pollConfig"; +import WasmPlayer from "@/components/wasmPlayer"; import CameraPlayer from "@/components/player"; -import eChartsBar from '@/components/subComponents/eChartsBar' +import eChartsBar from "@/components/subComponents/eChartsBar"; -import InfoCard from "./infoCard" -import CameraInfoEditor from './CameraInfoEditor' +import InfoCard from "./infoCard"; +import CameraInfoEditor from "./CameraInfoEditor"; export default { name: "CameraInfo", components: { - CameraPlayer, + // CameraPlayer, + WasmPlayer, InfoCard, eChartsBar, - CameraInfoEditor + CameraInfoEditor, }, props: { cameraList: { default: () => { return []; }, - type: Array - } + type: Array, + }, }, data() { return { @@ -205,50 +265,31 @@ soundList: [], togglePlay: true, eventAudio: new Audio(), - soundPath: '', - form: { - latitude: 0, - rtsp: "", - longitude: 0, - name: "", - addr: "", - alias: "", - areaid: "", - brand: "", - id: "", - ip: "", - reserved: "", - run_type: 0, - isAI: false, - username: "", - password: "", - cameraType: 0, - resolution: "", - voiceId: "", - voiceEnable: true - }, + soundPath: "", + form: {}, // 璁板綍娣诲姞鐘舵�� isAdd: false, addParentId: "", rules: { name: [ - { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" } + { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }, ], rtsp: [ - { required: true, message: "RTSP鍦板潃涓嶈兘涓虹┖", trigger: "blur" } + { required: true, message: "RTSP鍦板潃涓嶈兘涓虹┖", trigger: "blur" }, ], addr: [ - { required: true, message: "璁惧鍦板潃涓嶈兘涓虹┖", trigger: "blur" } - ] + { required: true, message: "璁惧鍦板潃涓嶈兘涓虹┖", trigger: "blur" }, + ], }, resolutionList: [], //浼犳劅鍣ㄥ垪琛� - sensors: [] + sensors: [], + voice: null, }; }, computed: { isSelected() { - return this.TreeDataPool.selectedNode.type !== "4" + return this.TreeDataPool.selectedNode.type !== "4"; }, isGb28182() { return this.TreeDataPool.selectedNode.cameraType === 1; @@ -262,7 +303,7 @@ }, conDisabled() { return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4"; - } + }, }, mounted() { this.initFormData(); @@ -270,37 +311,45 @@ this.visibilitychange(); }); this.getSounds(); + + this.eventAudio.addEventListener("ended", () => { + this.togglePlay = true; + }); }, methods: { getSounds() { - getSoundList().then(res => { - if (res.success) { - this.soundList = res.data.list - } - }).catch( - e => console.log(e) - ) + getSoundList() + .then((res) => { + if (res.success) { + this.soundList = res.data; + } + }) + .catch((e) => console.log(e)); }, selSound(sound) { this.soundPath = sound.path; - this.form.voiceId = sound.id + this.form.voiceId = sound.id; + this.togglePlay = true; + this.eventAudio.pause(); + // this.eventAudio. }, togglePlayer() { if (!this.soundPath) { this.$notify({ - type: 'info', - message: '璇峰厛閫夋嫨涓�涓0闊�!' - }) + type: "info", + message: "璇峰厛閫夋嫨涓�涓0闊�!", + }); return false; } this.eventAudio.src = this.soundPath; - if (this.togglePlay) { this.eventAudio.play(); + this.togglePlay = false; } else { - this.eventAudio.pause() + this.eventAudio.pause(); + this.togglePlay = true; } - this.togglePlay = !this.togglePlay + // this.togglePlay = !this.togglePlay }, visibilitychange() { switch (document.visibilityState) { @@ -316,111 +365,139 @@ this.isAdd = false; this.videoItem = null; this.$refs.addForm.resetFields(); + this.voice = null; + // this.initFormData(); // this.$refs.addForm.clearValidate(); if (node.type === "4") { - getCameraInfo(node.id).then(res => { + getCameraInfo(node.id).then((res) => { if (res.success) { - console.log(res, '鑾峰彇鎽勫儚鏈轰俊鎭�') + // console.log(res, '鑾峰彇鎽勫儚鏈轰俊鎭�') if (res.data.resolutions) { - let list = res.data.resolutions.map(i => { - let obj = {} + let list = res.data.resolutions.map((i) => { + let obj = {}; if (i.width == 0 && i.height == 0) { - obj.label = "鏈満鍒嗚鲸鐜�" - obj.value = "0*0" + obj.label = "鏈満鍒嗚鲸鐜�"; + obj.value = "0*0"; } else { - obj.label = i.width + "*" + i.height - obj.value = i.width + "*" + i.height + obj.label = i.width + "*" + i.height; + obj.value = i.width + "*" + i.height; } - return obj - }) - this.resolutionList = list - this.sensors = res.data.sensors + return obj; + }); + this.resolutionList = list; + this.sensors = res.data.sensors; } + this.$nextTick(() => { - Object.assign(this.form, res.data) + this.initFormData(); + Object.assign(this.form, res.data); + + this.soundList.forEach((element) => { + if (this.form.voiceId == element.id) { + this.voice = element; + } + }); + if (this.form.run_type !== -1) { - this.form.isAI = true + this.form.isAI = true; } else { - this.form.isAI = false + this.form.isAI = false; } - this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height - }) + this.form.resolution = + this.form.resolution_width + "*" + this.form.resolution_height; + }); } }); } }, // 淇濆瓨 onSubmit(formName) { - let list = this.$refs.cameraEditor.getResult() - console.log(list, "sensor") - // id涓虹┖锛屾柊澧炴憚鍍忔満 - this.$refs[formName].validate(async valid => { + let list = this.$refs.cameraEditor.getResult(); + this.$refs[formName].validate(async (valid) => { if (valid) { const isRequire = this.verifyRequrie(); if (!isRequire) return false; + + this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) + ? 0 + : parseFloat(this.form.latitude); + this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) + ? 0 + : parseFloat(this.form.longitude); + this.form.sensors = list; + this.form.resolution_width = Number( + this.form.resolution.split("*")[0] + ); + this.form.resolution_height = Number( + this.form.resolution.split("*")[1] + ); + let _this = this; // 鏇存柊 if (this.form.id !== "") { - this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182); - this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude); - this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude); - this.form.sensors = list - this.form.resolution_width = Number(this.form.resolution.split("*")[0]) - this.form.resolution_height = Number(this.form.resolution.split("*")[1]) - updateCameraInfo(this.form).then(rsp => { - if (rsp.success) { - this.$notify({ - type: "success", - message: "鎽勫儚鏈轰俊鎭慨鏀规垚鍔燂紒" - }); - this.TreeDataPool.fetchTreeData(); - } else { - this.selectCamera(this.TreeDataPool.selectedNode); + this.form.areaid = this.TreeDataPool.getParent( + this.form.id, + this.isGb28182 + ); + console.log(this.TreeDataPool.selectedNode); + updateCameraInfo(this.form) + .then((rsp) => { + if (rsp.success) { + this.$notify({ + type: "success", + message: "鎽勫儚鏈轰俊鎭慨鏀规垚鍔燂紒", + }); + this.TreeDataPool.fetchTreeData(); + console.log(this.TreeDataPool.selectedNode); + //_this.$root.$children[0].$refs['leftTree'].$refs.tree.ztreeObj.checkNode(_this.TreeDataPool.selectedNode, true, false, false); + //閫変腑淇敼鍚庣殑鑺傜偣 + let { evt, treeId } = + _this.$root.$children[0].$refs["leftTree"].$refs.tree; + console.log(evt, treeId); + // this.$nextTick(()=>{ + //_this.$root.$children[0].$refs['leftTree'].$refs.tree.handleCreated() + // }) + } else { + this.selectCamera(this.TreeDataPool.selectedNode); + this.$notify({ + type: "error", + message: "鎽勫儚鏈轰俊鎭慨鏀瑰け璐ワ紒", + }); + } + }) + .catch((err) => { this.$notify({ type: "error", - message: "鎽勫儚鏈轰俊鎭慨鏀瑰け璐ワ紒" + message: err.msg, }); - } - }); + }); } else { this.form.areaid = this.addParentId; - this.form.sensors = list - const { ...json } = this.form; - createCamera({ - latitude: parseFloat(json.latitude), - rtsp: this.form.rtsp, - longitude: parseFloat(json.longitude), - name: this.form.name, - addr: this.form.addr, - areaid: this.form.areaid, - brand: this.form.brand, - id: this.form.id, - ip: this.form.ip, - port: parseFloat(json.port), - reserved: this.form.reserved, - run_type: this.form.isAI ? this.form.run_type : -1, - username: this.form.username, - password: this.form.password, - areaId: this.form.areaId, - sensors: this.form.sensors - }).then(rsp => { - if (rsp.success) { - this.$notify({ - type: "success", - message: "鎽勫儚鏈烘坊鍔犳垚鍔燂紒" - }); - this.TreeDataPool.selectedNode = rsp.data; - this.TreeDataPool.fetchTreeData(); - // 鍚庣杩斿洖缁撴灉涓�0锛屾煡璇㈠悗涓�4 - this.TreeDataPool.selectedNode.type = "4"; - this.selectCamera(this.TreeDataPool.selectedNode); - } else { + createCamera(this.form) + .then((rsp) => { + if (rsp.success) { + this.$notify({ + type: "success", + message: "鎽勫儚鏈烘坊鍔犳垚鍔燂紒", + }); + this.TreeDataPool.selectedNode = rsp.data; + this.TreeDataPool.fetchTreeData(); + // 鍚庣杩斿洖缁撴灉涓�0锛屾煡璇㈠悗涓�4 + this.TreeDataPool.selectedNode.type = "4"; + this.selectCamera(this.TreeDataPool.selectedNode); + } else { + this.$notify({ + type: "error", + message: "鎽勫儚鏈烘坊鍔犲け璐ワ紒", + }); + } + }) + .catch((err) => { this.$notify({ type: "error", - message: "鎽勫儚鏈烘坊鍔犲け璐ワ紒" + message: err.msg, }); - } - }); + }); } } }); @@ -434,9 +511,9 @@ rtsp: this.form.rtsp, id: this.form.id, isRunning: this.form.run_enable, - cameraType: this.form.type + cameraType: this.form.type, }; - }) + }); }, // * 楠岃瘉蹇呴�夐」 verifyRequrie() { @@ -449,7 +526,7 @@ if (this.form.rtsp === "") { this.$notify({ type: "warning", - message: "璇疯緭鍏ユ纭殑rtsp鍦板潃" + message: "璇疯緭鍏ユ纭殑rtsp鍦板潃", }); return false; } @@ -460,21 +537,21 @@ this.$confirm("鏄惁鍒犻櫎姝ゆ憚鍍忔満锛�", { center: true, cancelButtonClass: "comfirm-class-cancle", - confirmButtonClass: "comfirm-class-sure" + confirmButtonClass: "comfirm-class-sure", }).then(() => { - delCamera(this.form.id).then(res => { + delCamera(this.form.id).then((res) => { if (res.success) { this.initFormData(); this.$notify({ type: "success", - message: "鍒犻櫎鎴愬姛锛�" + message: "鍒犻櫎鎴愬姛锛�", }); this.TreeDataPool.fetchTreeData(); this.TreeDataPool.selectedNode = {}; } else { this.$notify({ type: "error", - message: "鍒犻櫎澶辫触锛�" + message: "鍒犻櫎澶辫触锛�", }); } }); @@ -494,13 +571,13 @@ id: "", ip: "", reserved: "", - run_type: 0, + run_type: -1, isAI: false, username: "", password: "", resolution: "", voiceId: "", - voiceEnable: true + voiceEnable: false, }; }, // 娣诲姞璁惧 @@ -509,106 +586,16 @@ this.addParentId = node; this.initFormData(); }, - //瀹炴椂銆佽疆璇㈠垏鎹� - changePoll(row) { - // console.log(row,'瀹炴椂銆佽疆璇㈠垏鎹�',this.form,this.PollData.RealTimeSum) - //鍒ゆ柇鏄柊澧炶繕鏄洿鏂� - if (this.form.id && this.form.id !== undefined) { - if (this.PollData.RealTimeSum < 16) { - if (row.value) { - this.form.run_type = 1 - } else { - this.form.run_type = 0 - } - changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then( - rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }); - } else { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }); - } - } - ); - } else { - if (this.form.run_type === 1) { - this.form.run_type = 0 - changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then( - rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }); - } else { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }); - } - } - ); - } - this.$nextTick(() => { - this.$set(this.form, 'run_type', 0) - }) - // this.$notify({ - // type: 'warning', - // message: '瀹炴椂澶勭悊璺暟宸茶揪鏈�澶у鐞嗚矾鏁帮紒' - // }) - } - this.TreeDataPool.fetchTreeData(); - this.PollData.statisticTaskInfo(); - } - }, - //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊 - pollEnable(row) { - // console.log(row,'瀹炴椂銆佽疆璇㈠垏鎹�') - if (row) { - if (this.PollData.RealTimeSum < 16) { - this.form.run_type = 1 - } else { - this.form.run_type = 0 - } - } else { - this.form.run_type = -1 - } - if (this.form.id && this.form.id !== undefined) { - changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then( - rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }); - } else { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }); - } - this.selectCamera(this.TreeDataPool.selectedNode) - } - ); - } - this.TreeDataPool.fetchTreeData(); - this.PollData.statisticTaskInfo(); - } - } + }, }; </script> <style lang="scss"> .camera-info { width: 100%; - - margin-left: 20px; - + + margin: 20px 0 20px 20px; + .ai-select { text-align: left; } @@ -647,5 +634,9 @@ } } } + + .video-player { + height: 450px; + } } </style> \ No newline at end of file -- Gitblit v1.8.0