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