From 929cf4c7be11bfd1e134d0cb0d7cbbe94772ebdf Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期一, 07 九月 2020 15:35:14 +0800 Subject: [PATCH] 摄像机树增加导入功能 --- src/components/treeMenu/index.vue | 23 ++- src/scripts/httpRequest.ts | 17 -- package.json | 3 src/components/LeftNav.vue | 142 ++++++++++++++++++++--- src/pages/cameraAccess/components/CameraInfo.vue | 148 +---------------------- src/Pool/dataStack.ts | 12 + 6 files changed, 161 insertions(+), 184 deletions(-) diff --git a/package.json b/package.json index 1c891e3..10c41ff 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "vue-js-toggle-button": "^1.3.3", "vue-photo-preview": "^1.1.3", "vue-qrcode-component": "^2.1.1", - "vuex": "^3.5.1" + "vuex": "^3.5.1", + "xlsx": "^0.16.6" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.10.0", diff --git a/src/Pool/dataStack.ts b/src/Pool/dataStack.ts index 1a7becf..ddcc64f 100644 --- a/src/Pool/dataStack.ts +++ b/src/Pool/dataStack.ts @@ -41,7 +41,17 @@ public async fetchFiles() { const rsp: any = await getDataStackDirs({ name: this.searchInput, type: this.searchType, page: 1, size: 100 }); if (rsp && rsp.success) { - this.dirs = rsp.data.dataList; + this.dirs = rsp.data.dataList.sort(function (obj1: any, obj2: any) { + var val1 = obj1.name; + var val2 = obj2.name; + if (val1 < val2) { + return -1; + } else if (val1 > val2) { + return 1; + } else { + return 0; + } + }); } } diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue index cf99eea..fc28117 100644 --- a/src/components/LeftNav.vue +++ b/src/components/LeftNav.vue @@ -4,6 +4,7 @@ class="left-tree-box" :style="`height:${height}px;animation-duration: 0.7s`" v-show="TreeDataPool.showTreeBox" + v-loading="menuLoading" > <el-tabs v-model="TreeDataPool.treeActiveName" type="border-card" @tab-click="handleClick"> <el-tab-pane label="鎽勫儚鏈�" name="camera" :style="`height:${height - 56}px;`" v-if="showCam"> @@ -75,6 +76,16 @@ </el-tooltip> </div> + <!-- 瀵煎叆璁惧 --> + <div class="tree-edit import-btn" v-show="!TreeDataPool.readonly"> + <el-tooltip content="瀵煎叆璁惧" placement="bottom" popper-class="atooltip"> + <button @click="importCameras('0')"> + <!-- <i class="el-icon-video-camera"></i> --> + <span class="iconfont icondaoru" style="font-size:16px;"></span> + </button> + </el-tooltip> + </div> + <!-- 鏍戞搷浣滈攣 --> <div class="tree-edit tree-lock" v-show="showLock"> <button @click="lockSwitch"> @@ -101,6 +112,7 @@ :node="TreeDataPool.treeData" :height="height" @addDevice="addCamera" + @import="importCameras" /> </el-menu-item-group> </el-submenu> @@ -213,6 +225,20 @@ <file-upload v-show="fileUploadBox" @close="fileUploadBox= false" /> </el-tab-pane> </el-tabs> + + <!-- 瀵煎叆璁惧缁勪欢 浜嬩欢瑙﹀彂 --> + <el-upload + class="upload-btn" + action="https://jsonplaceholder.typicode.com/posts/" + accept=".xlsx" + :on-exceed="exceed" + :limit="10" + :on-remove="remove" + :http-request="uploadFile" + :show-file-list="false" + > + <button ref="import-btn" v-show="false"></button> + </el-upload> </div> </transition> </template> @@ -225,10 +251,15 @@ updateStatus } from "@/api/localVedio"; +import { + createCamera, +} from "@/api/camera"; + import bus from "@/plugin/bus" import TreeMenu from "@/components/treeMenu/index"; import LocalVedioList from '@/components/subComponents/LocalVedioList'; import FileUpload from '@/components/subComponents/FileUpload/index'; +import XLSX from 'xlsx' export default { components: { @@ -335,27 +366,11 @@ ], timeout: null, fileUploadBox: false, - loadingGBTree: false + loadingGBTree: false, + importAreaId: "", + menuLoading: false }; }, - // watch: { - // $route(to, from) { - // switch (to.name) { - // case "Searching": - // this.cameraAuth = "videoSearch:camera" - // this.dataStack = "videoSearch:dataStack" - // break - // case "VideoManage": - // this.cameraAuth = "VIDEOCAMERA:camera" - // this.dataStack = "VIDEOCAMERA:dataStack" - // break - // default: - // this.cameraAuth = "videoMonitor:camera" - // this.dataStack = "videoMonitor:dataStack" - // } - // // console.log("璺敱鍙樺寲锛�", to, from) - // } - // }, created() { if (this.showCam) { this.TreeDataPool.treeActiveName = "camera" @@ -507,6 +522,91 @@ refrash(current, pageSize) { this.TreeDataPool.localCurrentPage = current; }, + + importCameras(area) { + this.importAreaId = area + this.$refs["import-btn"].click() + }, + + async uploadFile(params) { + const _file = params.file; + const fileReader = new FileReader(); + fileReader.onload = (ev) => { + this.menuLoading = true; + try { + const data = ev.target.result; + const workbook = XLSX.read(data, { + type: 'binary' + }); + + for (let sheet in workbook.Sheets) { + //寰幆璇诲彇姣忎釜鏂囦欢 + const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); + //鑻ュ綋鍓峴heet娌℃湁鏁版嵁锛屽垯continue + if (sheetArray.length == 0) { + continue; + } + + let succeed = 0; + let failed = 0; + + for (let item in sheetArray) { + let camera = this.newCamera(); + camera.areaid = this.importAreaId; + camera.name = String(sheetArray[item].name); + camera.rtsp = String(sheetArray[item].rtsp); + camera.addr = String(sheetArray[item].addr); + + createCamera(camera).then(rsp => { + if (rsp && rsp.success) { + succeed++; + } else { + failed++; + } + }).catch(err => { + failed++; + }) + } + + let _this = this + setTimeout(() => { + this.menuLoading = false; + _this.$message({ + type: "success", + message: "鎿嶄綔瀹屾垚, 瀵煎叆鎴愬姛:" + succeed + "涓� 澶辫触:" + failed + "涓�" + }) + _this.TreeDataPool.fetchTreeData(); + }, 2000) + } + } catch (e) { + this.menuLoading = false + this.$message.warning('鏂囦欢绫诲瀷涓嶆纭紒'); + } + }; + fileReader.readAsBinaryString(_file); + }, + exceed() { + this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢"); + }, + //鍒犻櫎鏂囦欢 + remove() { + + }, + newCamera() { + return { + latitude: 0, + rtsp: "", + longitude: 0, + name: "", + addr: "", + areaid: "", + reserved: "", + run_type: -1, + username: "", + password: "", + sensors: [] + } + } } }; </script> @@ -736,6 +836,10 @@ .camera-add { left: 128px; } + +.import-btn { + left: 156px; +} .tree-font { font-family: PingFangSC-Medium; font-size: 14px; diff --git a/src/components/treeMenu/index.vue b/src/components/treeMenu/index.vue index bd8a7a7..7665569 100644 --- a/src/components/treeMenu/index.vue +++ b/src/components/treeMenu/index.vue @@ -97,6 +97,15 @@ ></span> </button> </el-tooltip> + + <el-tooltip content="瀵煎叆璁惧" placement="bottom" popper-class="atooltip"> + <button @click="importCameras(_.model.id)"> + <span + class="iconfont icondaoru" + style="font-size:17px; margin-left:9px; position:relative; top:2px;" + ></span> + </button> + </el-tooltip> </div> </div> </template> @@ -156,16 +165,10 @@ hoverNodeId: "", itemClickEvents: { dblclick: (VNode, item, e) => { - console.log('dblclick',item); - console.log('dblclick',this.TreeDataPool.videoArr); - console.log(this.app) - // if (item.type !== "4" || this.app !== "Video") { - // return; - // } if (item.type !== "4" || this.app !== "Camera") { return; } - console.log('activeForceChoose',this.TreeDataPool.activeForceChoose) + // console.log('activeForceChoose', this.TreeDataPool.activeForceChoose) this.TreeDataPool.activeVideoId = item.id; let videoArr = this.TreeDataPool.videoArr; let nullVideoIndex = ""; @@ -175,7 +178,6 @@ this.TreeDataPool.activeVideoIndex !== "" && this.TreeDataPool.activeVideoIndex <= videoArr.length - 1 ) { - console.log('setVideoArr') this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this); this.$nextTick(() => { this.TreeDataPool.setVideoArr( @@ -257,6 +259,9 @@ addCamera(node) { this.$emit("addDevice", node); }, + importCameras(node) { + this.$emit("import", node); + }, addNode(event, node) { this.dialogForm = { text: "", @@ -316,7 +321,7 @@ this.showDialog = true; }, itemClick(node, item, e) { - console.log('jsTree index.vue',item) + // console.log('jsTree index.vue', item) this.TreeDataPool.selectedNode = item; this.TreeDataPool.updateSelectedNodes(); this.TreeDataPool.treeType = this.treeName; diff --git a/src/pages/cameraAccess/components/CameraInfo.vue b/src/pages/cameraAccess/components/CameraInfo.vue index 83ef28a..24b9f41 100644 --- a/src/pages/cameraAccess/components/CameraInfo.vue +++ b/src/pages/cameraAccess/components/CameraInfo.vue @@ -207,25 +207,6 @@ 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: false }, // 璁板綍娣诲姞鐘舵�� isAdd: false, @@ -321,7 +302,7 @@ if (node.type === "4") { 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 = {} @@ -353,20 +334,22 @@ // 淇濆瓨 onSubmit(formName) { let list = this.$refs.cameraEditor.getResult() - console.log(list, "sensor") + // console.log(list, "sensor") // id涓虹┖锛屾柊澧炴憚鍍忔満 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]) + // 鏇存柊 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({ @@ -384,26 +367,7 @@ }); } 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 => { + createCamera(this.form).then(rsp => { if (rsp.success) { this.$notify({ type: "success", @@ -494,7 +458,7 @@ id: "", ip: "", reserved: "", - run_type: 0, + run_type: -1, isAI: false, username: "", password: "", @@ -508,96 +472,6 @@ this.isAdd = true; 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(); } } }; diff --git a/src/scripts/httpRequest.ts b/src/scripts/httpRequest.ts index 846a592..a4f3cb4 100644 --- a/src/scripts/httpRequest.ts +++ b/src/scripts/httpRequest.ts @@ -154,23 +154,6 @@ errJson.message = `杩炴帴鍑洪敊(${error.response.status})!` } - if (errJson.status >= 400 && errJson.status < 500) { - // 璺宠浆閿欒椤甸潰 - // router.push({ - // path: "/error", - // query: errJson - // }); - } else { - // 鏈嶅姟鍣ㄩ敊璇��鍑虹郴缁燂紝寮圭獥鎻愮ず - // Message({ - // showClose: true, - // message: errJson.message, - // type: "error" - // }); - // router.push({ - // path: "/login" - // }); - } } else { errJson.message = '杩炴帴鏈嶅姟鍣ㄥけ璐�!' Notification({ -- Gitblit v1.8.0