| | |
| | | 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"> |
| | |
| | | @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" |
| | |
| | | @click="closeTree" |
| | | ></i> |
| | | </el-tooltip> |
| | | </div> |
| | | </div>--> |
| | | </li> |
| | | |
| | | <!-- 添加区域图标 --> |
| | |
| | | <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> |
| | |
| | | :node="TreeDataPool.treeData" |
| | | :height="height" |
| | | @addDevice="addCamera" |
| | | @import="importCameras" |
| | | /> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | |
| | | </el-menu> |
| | | </el-tab-pane> |
| | | <el-tab-pane |
| | | label="集群" |
| | | name="cluster" |
| | | :style="`height:${height - 56}px;`" |
| | | v-if="showCluster" |
| | | > |
| | | <div class="local-vedio-area"> |
| | | <!-- 搜索 --> |
| | | <div class="navTopSelect"> |
| | | <div class="search-input flex-box"> |
| | | <el-select |
| | | v-model="TreeDataPool.searchCamType" |
| | | placeholder="请选择" |
| | | @change="searchClusterData" |
| | | > |
| | | <el-option |
| | | v-for="item in searchTypeOptions" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | <span style="display: inline-block;padding: 0px 3px;"></span> |
| | | <el-input |
| | | v-model="TreeDataPool.searchInput" |
| | | placeholder="搜索" |
| | | clearable |
| | | @input="querySearchAsync('cluster')" |
| | | > |
| | | <i |
| | | class="el-icon-search el-input__icon" |
| | | style="color:#DCDFE6" |
| | | slot="prefix" |
| | | @click="searchClusterData" |
| | | ></i> |
| | | </el-input> |
| | | </div> |
| | | </div> |
| | | <div class="cluster-list"> |
| | | <tree-menu |
| | | ref="tree" |
| | | :app="appName" |
| | | :treeName="'localTree'" |
| | | :node="TreeDataPool.clusterData" |
| | | :height="height" |
| | | @addDevice="addCamera" |
| | | @import="importCameras" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane |
| | | label="数据栈" |
| | | name="dataStack" |
| | | :style="`height:${height - 56}px;`" |
| | |
| | | <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="请选择" |
| | |
| | | ></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> |
| | | |
| | | <!-- 本地视频源列表 --> |
| | |
| | | <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> |
| | |
| | | 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: { |
| | |
| | | }, |
| | | |
| | | computed: { |
| | | showTab() { |
| | | showTab () { |
| | | return true; |
| | | }, |
| | | showCam() { |
| | | return this.appName === "Camera" || this.appName === "Search"; |
| | | showCam () { |
| | | return this.appName === "Camera" || this.appName === 'Cluster' || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin)); |
| | | }, |
| | | showDataStack() { |
| | | return this.appName === "DataStack" || this.appName === "Search"; |
| | | showCluster () { |
| | | return this.appName === "Cluster"; |
| | | }, |
| | | showLock() { |
| | | // 数据栈配置必须显示。 检索通过权限控制显示, 未安装数据栈也不显示 |
| | | showDataStack () { |
| | | if (this.appName === "DataStack") { |
| | | return true; |
| | | } |
| | | |
| | | if (this.appName === "Search") { |
| | | // 未安装数据栈配置 |
| | | if (this.installedApps.indexOf("dataStack") >= 0) { |
| | | if (this.isAdmin) { |
| | | return true; |
| | | } |
| | | |
| | | if (this.buttonAuthority.indexOf("search:stack") >= 0) { |
| | | return true; |
| | | } |
| | | } |
| | | } |
| | | |
| | | return false; |
| | | }, |
| | | showLock () { |
| | | return this.edit; |
| | | }, |
| | | openeds() { |
| | | openeds () { |
| | | let arry = []; |
| | | for (let i = 0; i < this.TreeDataPool.openeds.length; i++) { |
| | | if (this.TreeDataPool.openeds[i]) { |
| | |
| | | } |
| | | return arry; |
| | | }, |
| | | isAdmin() { |
| | | isAdmin () { |
| | | if ( |
| | | sessionStorage.getItem("userInfo") && |
| | | sessionStorage.getItem("userInfo") !== "" |
| | |
| | | return false; |
| | | } |
| | | }, |
| | | data() { |
| | | data () { |
| | | return { |
| | | cameraAuth: "videoMonitor:camera", |
| | | dataStack: "videoMonitor:dataStack", |
| | | activeIndexVideo: "", |
| | | buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], |
| | | installedApps: sessionStorage.getItem("apps") || [], |
| | | loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "用户名", |
| | | searchTypeOptions: [ |
| | | { |
| | |
| | | ], |
| | | 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() { |
| | | created () { |
| | | console.log(this.appName) |
| | | console.log(this.showCam) |
| | | if (this.showCam) { |
| | | this.TreeDataPool.treeActiveName = "camera" |
| | | this.TreeDataPool.fetchTreeData(); |
| | |
| | | this.DataStackPool.fetchFiles(); |
| | | |
| | | } |
| | | if (this.showCluster) { |
| | | this.TreeDataPool.treeActiveName = "cluster" |
| | | this.TreeDataPool.fetchClusterTree(); |
| | | } |
| | | }, |
| | | methods: { |
| | | searchAreaData() { |
| | | searchAreaData () { |
| | | this.TreeDataPool.fetchTreeData(); |
| | | }, |
| | | searchDataStack() { |
| | | searchDataStack () { |
| | | this.DataStackPool.fetchFiles(); |
| | | }, |
| | | lockSwitch() { |
| | | this.TreeDataPool.readonly = !this.TreeDataPool.readonly; |
| | | console.log(this.TreeDataPool.readonly) |
| | | searchClusterData () { |
| | | this.TreeDataPool.fetchClusterTree(); |
| | | }, |
| | | gbLockSwitch() { |
| | | lockSwitch () { |
| | | this.TreeDataPool.readonly = !this.TreeDataPool.readonly; |
| | | }, |
| | | gbLockSwitch () { |
| | | this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly; |
| | | }, |
| | | dataStackLockSwitch() { |
| | | dataStackLockSwitch () { |
| | | this.DataStackPool.readonly = !this.DataStackPool.readonly; |
| | | }, |
| | | closeTree() { |
| | | closeTree () { |
| | | this.TreeDataPool.showTreeBox = false; |
| | | // bus.$emit('refreshCompareImg') |
| | | bus.$emit('refreshCompareImg') |
| | | }, |
| | | addNode(event) { |
| | | addNode (event) { |
| | | this.$refs.tree.addNode(event, { id: 0 }); |
| | | }, |
| | | addCamera(node) { |
| | | // bus.$emit("addCameraOnTree", node); |
| | | addCamera (node) { |
| | | bus.$emit("addCameraOnTree", node); |
| | | }, |
| | | addDir(node) { |
| | | // bus.$emit("addDirOnTree", node); |
| | | addDir (node) { |
| | | bus.$emit("addDirOnTree", node); |
| | | }, |
| | | menuOpen(index) { |
| | | menuOpen (index) { |
| | | this.TreeDataPool.openeds[index] = true; |
| | | }, |
| | | menuClose(index) { |
| | | menuClose (index) { |
| | | this.TreeDataPool.openeds[index] = false; |
| | | }, |
| | | refreshGB() { |
| | | refreshGB () { |
| | | // 防止重复刷新 |
| | | if (this.loadingGBTree) { |
| | | return; |
| | |
| | | this.loadingGBTree = false; |
| | | }, 1000 * 60); |
| | | }, |
| | | querySearchAsync(type) { |
| | | querySearchAsync (type) { |
| | | clearTimeout(this.timeout); |
| | | this.timeout = setTimeout(() => { |
| | | if (type === "camera") { |
| | |
| | | } |
| | | }, 500); |
| | | }, |
| | | handleClick(event) { |
| | | handleClick (event) { |
| | | if (event.name == 'dataStack') { |
| | | this.DataStackPool.fetchFiles(); |
| | | this.DataStackPool.clean(); |
| | |
| | | this.TreeDataPool.treeActiveName = event.name |
| | | console.log("当前激活name:", this.TreeDataPool.treeActiveName) |
| | | }, |
| | | async changeEnable() { |
| | | async changeEnable () { |
| | | if (this.PollData.localVideo === 0) { |
| | | this.$notify({ |
| | | title: "失败", |
| | |
| | | console.log(res, '切换本地文件分析开关') |
| | | } |
| | | }, |
| | | getCheckedFiles() { |
| | | getCheckedFiles () { |
| | | let list1 = this.TreeDataPool.localVedioList.filter(i => { |
| | | return i.checkStatus |
| | | }) |
| | | return list1 |
| | | }, |
| | | async stopVedio(status) { |
| | | async stopVedio (status) { |
| | | // let list1 = this.getCheckedFiles(); |
| | | if (this.TreeDataPool.checkedLocalVedio.length == 0) { |
| | | this.$notify({ |
| | |
| | | console.log(res, '开启暂停参数') |
| | | } |
| | | }, |
| | | async deleteLocalFiles() { |
| | | async deleteLocalFiles () { |
| | | let list1 = this.getCheckedFiles(); |
| | | console.log(list1, '已勾选的视频') |
| | | if (list1.length == 0) { |
| | |
| | | } |
| | | }, |
| | | |
| | | refrash(current, pageSize) { |
| | | 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]); |
| | | //若当前sheet没有数据,则continue |
| | | if (sheetArray.length == 0) { |
| | | continue; |
| | | } |
| | | |
| | | let succeed = 0; |
| | | let failed = 0; |
| | | let promiseArr = []; |
| | | 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); |
| | | |
| | | promiseArr.push(createCamera(camera)); |
| | | } |
| | | let _this = this; |
| | | Promise.allSettled(promiseArr).then(res => { |
| | | res.forEach(item => { |
| | | if (item.status === 'fulfilled') { |
| | | succeed++; |
| | | } else { |
| | | failed++; |
| | | } |
| | | }); |
| | | _this.menuLoading = false; |
| | | _this.$message({ |
| | | type: "success", |
| | | message: "操作完成, 导入成功:" + succeed + "个 失败:" + failed + "个" |
| | | }) |
| | | _this.TreeDataPool.fetchTreeData(); |
| | | }).catch(e => { |
| | | console.log(e) |
| | | }); |
| | | |
| | | } |
| | | } catch (e) { |
| | | this.menuLoading = false |
| | | this.$message.warning('文件类型不正确!'); |
| | | } |
| | | }; |
| | | fileReader.readAsBinaryString(_file); |
| | | }, |
| | | exceed () { |
| | | this.$message.error("最多只能上传1个xls文件"); |
| | | }, |
| | | //删除文件 |
| | | remove () { |
| | | |
| | | }, |
| | | newCamera () { |
| | | return { |
| | | latitude: 0, |
| | | rtsp: "", |
| | | longitude: 0, |
| | | name: "", |
| | | addr: "", |
| | | areaid: "", |
| | | reserved: "", |
| | | run_type: -1, |
| | | username: "", |
| | | password: "", |
| | | sensors: [] |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | |
| | | .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; |
| | | .el-tabs__header { |
| | | display: none; |
| | | border-bottom: none; |
| | | margin: 0 0 15px; |
| | | //margin: 0 0 15px; |
| | | } |
| | | .el-tabs__content { |
| | | padding: 0; |
| | |
| | | font-size: 20px; |
| | | padding: 0px 5px; |
| | | } |
| | | // .el-input__inner:focus { |
| | | // outline: none; |
| | | // border-color: #3D68E1; |
| | | // } |
| | | .el-menu { |
| | | border-right: none; |
| | | } |
| | |
| | | .search-input { |
| | | padding-top: 8px; |
| | | padding-bottom: 12px; |
| | | text-align: left; |
| | | .dev-tree-close { |
| | | width: 10%; |
| | | margin-left: 10px; |
| | |
| | | .camera-add { |
| | | left: 128px; |
| | | } |
| | | |
| | | .import-btn { |
| | | left: 156px; |
| | | } |
| | | .tree-font { |
| | | font-family: PingFangSC-Medium; |
| | | font-size: 14px; |
| | |
| | | color: #606266; |
| | | } |
| | | } |
| | | .flex-box{ |
| | | display: flex; |
| | | } |
| | | </style> |