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/LeftNav.vue | 223 +++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 157 insertions(+), 66 deletions(-)
diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue
index 90ad872..fc28117 100644
--- a/src/components/LeftNav.vue
+++ b/src/components/LeftNav.vue
@@ -4,14 +4,10 @@
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="isShow(cameraAuth)"
- >
+ <el-tab-pane label="鎽勫儚鏈�" name="camera" :style="`height:${height - 56}px;`" v-if="showCam">
<el-menu
:default-openeds="openeds"
background-color="#fff"
@@ -27,7 +23,6 @@
<el-select
v-model="TreeDataPool.searchCamType"
placeholder="璇烽�夋嫨"
-
@change="searchAreaData"
>
<el-option
@@ -43,7 +38,6 @@
placeholder="鎼滅储"
clearable
@input="querySearchAsync('camera')"
-
>
<i
class="el-icon-search el-input__icon"
@@ -52,7 +46,7 @@
@click="searchAreaData"
></i>
</el-input>
- <div class="tree-close">
+ <!-- <div class="tree-close">
<el-tooltip content="鏀惰捣鐩綍鏍�" placement="bottom" popper-class="atooltip">
<i
class="el-icon-s-fold"
@@ -60,7 +54,7 @@
@click="closeTree"
></i>
</el-tooltip>
- </div>
+ </div>-->
</li>
<!-- 娣诲姞鍖哄煙鍥炬爣 -->
@@ -78,6 +72,16 @@
<button @click="addCamera('0')">
<!-- <i class="el-icon-video-camera"></i> -->
<span class="iconfont iconshishishipin" style="font-size:14px;"></span>
+ </button>
+ </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>
@@ -108,6 +112,7 @@
:node="TreeDataPool.treeData"
:height="height"
@addDevice="addCamera"
+ @import="importCameras"
/>
</el-menu-item-group>
</el-submenu>
@@ -150,12 +155,12 @@
label="鏁版嵁鏍�"
name="dataStack"
:style="`height:${height - 56}px;`"
- v-if="isShow(dataStack)"
+ v-if="showDataStack"
>
<div class="local-vedio-area">
<!-- 鎼滅储 -->
<div class="search-input">
- <span style="display: inline-block;padding: 0px 3px;"></span>
+ <!-- <span style="display: inline-block;padding: 0px 3px;"></span> -->
<el-select
v-model="DataStackPool.searchType"
placeholder="璇烽�夋嫨"
@@ -187,13 +192,13 @@
></i>
</el-input>
<!-- 闅愯棌鏍戞寜閽� -->
- <div class="dev-tree-close">
+ <!-- <div class="dev-tree-close">
<i
class="el-icon-s-fold"
style="color: #3D68E1;line-height: 22px;font-size: 27px;"
@click="closeTree"
></i>
- </div>
+ </div>-->
</div>
<!-- 鏈湴瑙嗛婧愬垪琛� -->
@@ -216,22 +221,24 @@
</div>
<LocalVedioList :dataList="TreeDataPool.localVedioList"></LocalVedioList>
</div>
- <!-- 鍒嗛〉 -->
- <!-- <div class="paginationClass flex-box">
- <el-pagination
- @current-change="refrash"
- :current-page="TreeDataPool.localCurrentPage"
- :page-size="TreeDataPool.localPageSize"
- style="margin: 10px 0;"
- :total="TreeDataPool.localTotal"
- ></el-pagination>
- </div>-->
</div>
<file-upload v-show="fileUploadBox" @close="fileUploadBox= false" />
</el-tab-pane>
- <!-- <el-tab-pane label="鏈湴鍥剧墖" name="localPic" v-if="isShow('VIDEOCAMERA:image')">鏈湴鍥剧墖</el-tab-pane>
- <el-tab-pane label="鏈湴闊抽" name="localAudio" v-if="isShow('VIDEOCAMERA:audio')">鏈湴闊抽</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>
@@ -244,9 +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: {
@@ -270,6 +283,15 @@
},
computed: {
+ showTab() {
+ return true;
+ },
+ showCam() {
+ return this.appName === "Camera" || this.appName === "Search";
+ },
+ showDataStack() {
+ return this.appName === "DataStack" || this.appName === "Search";
+ },
showLock() {
return this.edit;
},
@@ -344,55 +366,27 @@
],
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.isShow('VIDEOCAMERA:camera')) {
+ if (this.showCam) {
this.TreeDataPool.treeActiveName = "camera"
+ this.TreeDataPool.fetchTreeData();
+
} else {
this.TreeDataPool.treeActiveName = "dataStack"
+ this.DataStackPool.fetchFiles();
+
}
- this.TreeDataPool.fetchTreeData().then(_ => {
- // todo
- // if (this.$route.path == '/Layout/Searching') {
- // this.TreeDataPool.filterLocalVideoWell()
- // }
- });
},
methods: {
- isShow(authority) {
- if (this.isAdmin) {
- return true;
- } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
- return true;
- } else {
- return false;
- }
- },
searchAreaData() {
this.TreeDataPool.fetchTreeData();
},
searchDataStack() {
- debugger
this.DataStackPool.fetchFiles();
},
lockSwitch() {
@@ -407,16 +401,16 @@
},
closeTree() {
this.TreeDataPool.showTreeBox = false;
- // bus.$emit('refreshCompareImg')
+ bus.$emit('refreshCompareImg')
},
addNode(event) {
this.$refs.tree.addNode(event, { id: 0 });
},
addCamera(node) {
- // bus.$emit("addCameraOnTree", node);
+ bus.$emit("addCameraOnTree", node);
},
addDir(node) {
- // bus.$emit("addDirOnTree", node);
+ bus.$emit("addDirOnTree", node);
},
menuOpen(index) {
this.TreeDataPool.openeds[index] = true;
@@ -528,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>
@@ -536,6 +615,10 @@
.left-tree-box {
float: left;
width: 100%;
+ .el-tabs__nav-prev,
+ .el-tabs__nav-next {
+ display: none;
+ }
.el-tabs--border-card {
border: none;
box-shadow: none;
@@ -577,7 +660,7 @@
.navTopSelect {
display: flex;
text-align: left;
-
+
.el-input__icon {
line-height: 34px;
}
@@ -598,6 +681,10 @@
font-size: 20px;
padding: 0px 5px;
}
+ // .el-input__inner:focus {
+ // outline: none;
+ // border-color: #3D68E1;
+ // }
.el-menu {
border-right: none;
}
@@ -749,6 +836,10 @@
.camera-add {
left: 128px;
}
+
+.import-btn {
+ left: 156px;
+}
.tree-font {
font-family: PingFangSC-Medium;
font-size: 14px;
--
Gitblit v1.8.0