From 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期五, 01 九月 2023 16:10:37 +0800 Subject: [PATCH] 系统维护+系统监控器+调试工具的app 增加 --- src/Pool/TreeData.ts | 591 +++++++++++++++++++++++++++++++--------------------------- 1 files changed, 315 insertions(+), 276 deletions(-) diff --git a/src/Pool/TreeData.ts b/src/Pool/TreeData.ts index 02a52ec..c9983a8 100644 --- a/src/Pool/TreeData.ts +++ b/src/Pool/TreeData.ts @@ -5,241 +5,274 @@ addAreaTreeData, delAreaTreeData, updateAreaTreeData, + getGb28181Pool, refreshGB28181Tree, - updateCameraArea -} from "@/api/area"; -import { - findAllFile, - show, - changeEnable -} from "@/api/localVedio"; + updateCameraArea, + getCameraBaseImage +} from "@/api/area" export default class TreeDataPool { - public openeds: Array<boolean>; - public treeData: Array<object>; - public clusterData: Array<object>; - public gb28181Data: Array<object>; - public treeDataPure: Array<object>; - public gb28181DataPure: Array<object>; - public clusterDataPure: Array<object>; - public videoArr: Array<string | undefined | object>; - public searchCamType: number; - public searchInput: string; - public activeVideoIndex: number | string; - public activeVideoId: number | string; - public activeForceChoose: boolean; - public readonly: boolean; - public gbReadonly: boolean; - public multiple: boolean; - public searchFrom: string = ''; - public showTreeBox: boolean; - public selectedNodes: Array<string>; - public selectedNode: any; + public openeds: Array<boolean> + public activeTreeData: Array<object> + + public treeData: Array<object> + public clusterData: Array<object> + public gb28181Data: Array<object> + public treeDataPure: Array<object> + public gb28181DataPure: Array<object> + public clusterDataPure: Array<object> + public videoArr: Array<string | undefined | object> + public searchCamType: number + public searchInput: string + public activeVideoIndex: number | string + public activeVideoId: number | string + public activeForceChoose: boolean + public readonly: boolean + public gbReadonly: boolean + public multiple: boolean + public searchFrom: string = "" + public showTreeBox: boolean + public selectedNodes: Array<string> + public selectedNode: any // 璁板綍褰撳墠鎿嶄綔鐨勬爲 - public treeType: string; + public treeType: string // 璁板綍鏀惰捣鐨勮妭鐐� - public foldNodeList: object; + public foldNodeList: object //璁板綍宸︿晶tab锛歛ctiveName - public treeActiveName: string; - //鏈湴瑙嗛锛氳棰戝垎鏋愬鐞� - public vedioAnaliyseSwitch: boolean; - //鏈湴瑙嗛鍒楄〃 - public localVedioList: Array<any>; - //鏈湴瑙嗛褰撳墠椤� - public localCurrentPage: number; - //鏈湴瑙嗛姣忛〉鏌ヨ20鏉� - public localPageSize: number; - //鏈湴瑙嗛鎬绘潯鏁� - public localTotal: number; - //鍕鹃�夌殑鏈湴瑙嗛 - public checkedLocalVedio: Array<any>; - //褰撳墠閫変腑鐨勬湰鍦拌棰� - public clickLocalVideo: object; + public treeActiveName: string //鎺у埗寮�濮嬨�佹殏鍋滄寜閽樉绀虹姸鎬� - public btnStaus: string; + public btnStaus: string //鏈湴瑙嗛绫诲瀷 - public searchLocalType: number; + public searchLocalType: number //璁板綍澶嶅埗鐨勬憚鍍忔満id - public ctrlCameraId: string; + public ctrlCameraId: string //璁板綍澶嶅埗鐨勬憚鍍忔満name - public ctrlCameraName: string; + public ctrlCameraName: string + + // 鏄惁浣跨敤ztree + public zTree: boolean + + public checkedTreeNode: Array<object> + + // 閫変腑鐨勬憚鍍忔満涓暟 + public gb28181CheckedCount: number + // 鎬绘憚鍍忔満涓暟 + public gb28181ChildNodeCount: number + + // 鍥芥爣鎽勫儚鏈烘睜鐨勫簳鍥� + public cameraNameForBaseImage: string + public gb28181CameraBaseImage: string + public baseImageLoading: boolean constructor() { - this.openeds = [true, true, false]; - this.treeData = []; - this.gb28181Data = []; - this.clusterData = []; - this.treeDataPure = []; - this.gb28181DataPure = []; - this.clusterDataPure = []; - this.videoArr = [""]; - this.searchCamType = 0; - this.searchInput = ""; - this.activeVideoIndex = ""; - this.activeVideoId = ""; - this.activeForceChoose = false; - this.showTreeBox = true; - this.readonly = true; - this.gbReadonly = true; - this.multiple = false; - this.selectedNodes = []; - this.selectedNode = {}; - this.treeType = ""; - this.foldNodeList = {}; - this.vedioAnaliyseSwitch = false; - this.treeActiveName = "camera"; - this.searchLocalType = 0; - this.localVedioList = []; - this.checkedLocalVedio = []; - this.clickLocalVideo = {}; + this.openeds = [true, true, false] + this.activeTreeData = [] + this.treeData = [] + this.gb28181Data = [] + this.clusterData = [] + this.treeDataPure = [] + this.gb28181DataPure = [] + this.clusterDataPure = [] + this.videoArr = [""] + this.searchCamType = 0 + this.searchInput = "" + this.activeVideoIndex = "" + this.activeVideoId = "" + this.activeForceChoose = false + this.showTreeBox = true + this.readonly = true + this.gbReadonly = true + this.multiple = false + this.selectedNodes = [] + this.selectedNode = {} + this.treeType = "" + this.foldNodeList = {} + this.treeActiveName = "camera" + this.searchLocalType = 0 + //1:鏆傚仠鐘舵�侊紱2锛氱瓑寰呯姸鎬�;3:缃伆 - this.btnStaus = "3"; - this.localCurrentPage = 1; - this.localPageSize = 20; - this.localTotal = 0; - this.ctrlCameraId = ""; - this.ctrlCameraName = ""; + this.btnStaus = "3" + this.ctrlCameraId = "" + this.ctrlCameraName = "" + this.zTree = false + this.checkedTreeNode = [] + this.gb28181CheckedCount = 0 + this.gb28181ChildNodeCount = 0 + + this.cameraNameForBaseImage = "" + this.gb28181CameraBaseImage = "" + this.baseImageLoading = false } setVideoArr(index: number, value: object, vue: any): void { - vue.$set(this.videoArr, index, value); - this.activeForceChoose = false; + vue.$set(this.videoArr, index, value) + this.activeForceChoose = false } updateSelectedNodes() { - this.selectedNodes = []; + this.selectedNodes = [] if (!this.multiple) { - this.selectedNodes = [this.selectedNode.id]; - return; + this.selectedNodes = [this.selectedNode.id] + return } - let _selected = this.selectedNodes; + let _selected = this.selectedNodes function nodeFilter(node: any) { if (node.type === "4" && node.selected) { - _selected.push(node.id); + _selected.push(node.id) } if (node.children) { node.children.forEach((n: any) => { - nodeFilter(n); - }); + nodeFilter(n) + }) } } if (this.selectedNode.cameraType === 0) { - this.treeData.forEach((n: any) => { - nodeFilter(n); - }); + //鎽勫儚鏈烘爲 + if (this.treeActiveName == "camera") { + this.treeData.forEach((n: any) => { + nodeFilter(n) + }) + } else if (this.treeActiveName == "cluster") { + //闆嗙兢鏍� + this.clusterData.forEach((n: any) => { + nodeFilter(n) + }) + } } if (this.selectedNode.cameraType === 1) { this.gb28181Data.forEach((n: any) => { - nodeFilter(n); - }); + nodeFilter(n) + }) } - if (this.selectedNode.cameraType === -1) { - this.clusterData.forEach((n: any) => { - nodeFilter(n); - }); + // if (this.selectedNode.cameraType === -1) { + // this.clusterData.forEach((n: any) => { + // nodeFilter(n); + // }); + // } + } + + updateZTreeCheckNodes(checkedNodes) { + let _this = this + _this.selectedNodes = [] + if (!_this.multiple) { + _this.selectedNodes = [checkedNodes.id] + return } + + function nodeFilter(node: any) { + if (node.type === "4" && (node.selected || node.checked)) { + _this.selectedNodes.push(node.id) + } + if (node.children) { + node.children.forEach((n: any) => { + nodeFilter(n) + }) + } + } + + checkedNodes.forEach((n: any) => { + nodeFilter(n) + }) } getCameraInfoByIp(ipaddr) { - let camera = null; + let camera = null function nodeFilter(node: any) { if (node.rtsp && node.rtsp.indexOf(ipaddr) != -1) { - camera = node; - return; + camera = node + return } if (node.children) { node.children.forEach((n: any) => { - nodeFilter(n); - }); + nodeFilter(n) + }) } } this.treeData.forEach((n: any) => { - nodeFilter(n); - }); + nodeFilter(n) + }) if (!camera) { this.gb28181Data.forEach((n: any) => { - nodeFilter(n); - }); + nodeFilter(n) + }) } - return camera; + return camera } getCameraInfoById(id) { - let camera = null; + let camera = null function nodeFilter(node: any) { if (node.id === id) { - camera = node; - return; + camera = node + return } if (node.children) { node.children.forEach((n: any) => { - nodeFilter(n); - }); + nodeFilter(n) + }) } } this.treeData.forEach((n: any) => { - nodeFilter(n); - }); + nodeFilter(n) + }) if (!camera) { this.gb28181Data.forEach((n: any) => { - nodeFilter(n); - }); + nodeFilter(n) + }) } - return camera; + return camera } getParent(id: string, isGB: boolean): string { - let parent = "0"; + let parent = "0" function nodeFilter(node: Array<any>): any { for (let i = 0; i < node.length; i++) { if (node[i].id == id) { - return true; + return true } if (node[i].children && node[i].children.length > 0) { if (nodeFilter(node[i].children)) { - parent = node[i].id; + parent = node[i].id } } } - return false; + return false } if (isGB) { - nodeFilter(this.gb28181Data); + nodeFilter(this.gb28181Data) } else { - nodeFilter(this.treeData); + nodeFilter(this.treeData) } - return parent; + return parent } clean() { - this.treeData = JSON.parse(JSON.stringify(this.treeDataPure)); - this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure)); + this.treeData = JSON.parse(JSON.stringify(this.treeDataPure)) + this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure)) this.isFold(this.treeData) this.isFold(this.gb28181Data) - this.selectedNodes = []; - this.selectedNode = {}; - - this.cleanLocalVedio(); + this.selectedNodes = [] + this.selectedNode = {} } cleanTree(tree) { if (tree === "localTree") { - this.treeData = JSON.parse(JSON.stringify(this.treeDataPure)); + this.treeData = JSON.parse(JSON.stringify(this.treeDataPure)) } if (tree === "gb28182Tree") { - this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure)); + this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure)) } } @@ -247,9 +280,14 @@ if (!node) { return } - node.forEach(n => { + node.forEach((n) => { + // vue-js-tree 榛樿灞曞紑,鎺у埗閮ㄥ垎鎶樺彔. z-tree 榛樿鎶樺彔, 鎺у埗閮ㄥ垎灞曞紑 if (this.foldNodeList[n.id]) { - n.opened = false; + if (this.zTree) { + n.open = false + } else { + n.opened = false + } } if (n.children && n.children.length > 0) { this.isFold(n.children) @@ -261,12 +299,12 @@ if (!node) { return } - node.forEach(n => { + node.forEach((n) => { if (n.children && n.children.length > 0) { this.setDropDisable(n.children) } else { if (n.type === "4") { - n.dropDisabled = true; + n.dropDisabled = true } } }) @@ -276,36 +314,45 @@ if (!node) { return } - node.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; + node.sort(function(obj1: any, obj2: any) { + if (obj1.type == "menu") { + return -1 } - }); + var val1 = obj1.name + var val2 = obj2.name + if (val1 < val2) { + return -1 + } else if (val1 > val2) { + return 1 + } else { + return 0 + } + }) - node.forEach(n => { + node.forEach((n) => { if (n.children && n.children.length > 0) { + if (this.zTree) { + n.open = true + } this.sortTreeData(n.children) + } else { + if (n.type == "menu" && this.zTree) { + n.isParent = true + } } }) } async fetchLocalTree() { - let params:any = { + let params: any = { searchType: this.searchCamType, - cameraName: this.searchInput, + cameraName: this.searchInput //isPlatform: 1 - }; - debugger - if(this.searchFrom == 'cluster'){ + } + if (this.searchFrom == "cluster") { params.isPlatform = 1 } - const rsp: any = await getLocalCameraTree(params); + const rsp: any = await getLocalCameraTree(params) if (rsp && rsp.success) { this.treeData = rsp.data ? rsp.data : [] @@ -315,23 +362,22 @@ // 璁剧疆绂佹鎷栨嫿鎽勫儚鏈哄埌鎽勫儚鏈鸿妭鐐� this.setDropDisable(this.treeData) - this.treeDataPure = JSON.parse(JSON.stringify(this.treeData)); + this.treeDataPure = JSON.parse(JSON.stringify(this.treeData)) this.isFold(this.treeData) } } - async fetchClusterTree (){ + async fetchClusterTree() { const rsp: any = await getClusterTree({ searchType: this.searchCamType, cameraName: this.searchInput - }); - if(rsp && rsp.success){ - console.log(rsp.data); + }) + if (rsp && rsp.success) { this.clusterData = rsp.data ? rsp.data : [] - if(this.clusterData && this.clusterData.length > 0){ + if (this.clusterData && this.clusterData.length > 0) { this.sortTreeData(this.clusterData) } - this.clusterDataPure = JSON.parse(JSON.stringify(this.clusterData)); + this.clusterDataPure = JSON.parse(JSON.stringify(this.clusterData)) this.isFold(this.clusterData) } } @@ -340,7 +386,7 @@ const rsp: any = await getGB28181CameraTree({ searchType: this.searchCamType, cameraName: this.searchInput - }); + }) if (rsp && rsp.success) { this.gb28181Data = rsp.data ? rsp.data : [] @@ -348,7 +394,7 @@ this.sortTreeData(this.gb28181Data) } - this.gb28181DataPure = JSON.parse(JSON.stringify(this.gb28181Data)); + this.gb28181DataPure = JSON.parse(JSON.stringify(this.gb28181Data)) this.isFold(this.gb28181Data) } } @@ -360,25 +406,23 @@ if (this.openeds[1]) { this.fetchGbTree() } - - this.findAllFile({}) } async add(name: string, parent: string) { await addAreaTreeData({ name: name, parentId: parent - }); + }) - this.fetchTreeData(); + this.fetchTreeData() } async del(id: string) { await delAreaTreeData({ id: id - }); + }) - this.fetchTreeData(); + this.fetchTreeData() } async update(name: string, id: string, alias: string, isGb: boolean) { @@ -387,9 +431,9 @@ name: name, parentId: this.getParent(id, isGb), alias: alias - }); + }) - this.fetchTreeData(); + this.fetchTreeData() } async refreshGB28181() { @@ -397,110 +441,105 @@ // this.fetchGbTree() } - async findAllFile(params: any) { - params.fileName = this.searchInput, - params.type = this.searchLocalType - params.page = this.localCurrentPage - params.size = this.localPageSize - let res: any = await findAllFile(params) - if (res && res.success) { - let list = res.data.dataList.map(i => { - let obj: any = {} - Object.assign(obj, i) - if (i.ruleType == 0) { - obj.iconStatus2 = '0' - } else { - obj.iconStatus2 = '1' - } - if (!i.snapshot_url) { - // obj.snapshot_url = require('@/assets/nobody.png') - obj.snapshot_url = "" - } else { - obj.snapshot_url = '/httpImage/' + obj.snapshot_url - } - if (i.is_running) { - obj.iconStatus1 = '1' - } else if (i.progress == 100) { - obj.iconStatus1 = '2' - } else if (i.status == 1 && i.progress == 0 && i.hasRule) { - obj.iconStatus1 = '3' - } else if (!i.hasRule && i.progress == 0) { - obj.iconStatus1 = '4' - } - obj.checkStatus = false - obj.clickStatus = false - obj.showCheckBox = false - return obj - }) - this.localVedioList = list - this.localTotal = res.data.total - // console.log(this.localVedioList,this.searchInput,'鏈湴瑙嗛鍒楄〃') - } - } - - async show() { - let res: any = await show() - if (res && res.success) { - this.vedioAnaliyseSwitch = res.data.videoEnable - } - } - - async changeEnable() { - let res: any = await changeEnable({ - enable: this.vedioAnaliyseSwitch - }) - } - - getCheckedFiles() { - this.checkedLocalVedio = this.localVedioList.filter(i => { - return i.checkStatus - }) - this.clickLocalVideo = this.localVedioList.filter(i => { - return i.clickStatus - })[0] - - if (this.checkedLocalVedio.length === 0) { - this.btnStaus = '3' - return false; - } - this.checkedLocalVedio.every((i, index) => { - let t = '' - if (i.status == 0 && i.hasRule) { - t = '1' - } else if (i.status == 1 && i.hasRule && !i.is_running) { - t = '2' - } else { - t = '3' - } - if (index == 0) { - this.btnStaus = t - } else { - if (this.btnStaus !== t) { - this.btnStaus = '3' - return false - } - } - }) - } - - filterLocalVideoWell() { - if (this.localVedioList.length !== 0) { - this.localVedioList = this.localVedioList.filter(i => { - return i.progress == 100 - }) - } - } - - cleanLocalVedio() { - this.localVedioList.map(i => { - i.checkStatus = false - i.clickStatus = false - }) - this.checkedLocalVedio = [] - this.btnStaus = "3" - } - - async dropNode(cameraId, areaId) { + async dropNode(cameraId: string, areaId: string) { await updateCameraArea({ cameraId: cameraId, areaId: areaId }) } + + getAllChildrenNodes(treeNode, arr) { + for (var i = 0; i < treeNode.length; i++) { + var sonList = treeNode[i].children + if (!sonList) { + if (treeNode[i].type == "camera") { + arr.push(treeNode[i]) + + if (treeNode[i].checked) { + this.gb28181CheckedCount += 1 + } + } + } else { + this.getAllChildrenNodes(sonList, arr) + } + } + return arr + } + countChildrenNodes(treeNode) { + let arry = [] + + this.getAllChildrenNodes(treeNode, arry) + + return arry.length + } + + async fetchVideosvrCameras(update: Boolean) { + let fn = getGb28181Pool + if (update) { + fn = refreshGB28181Tree + } + const rsp: any = await fn() + + if (rsp && rsp.success) { + this.selectedNode = {} + this.treeData = rsp.data ? rsp.data : [] + if (this.treeData && this.treeData.length > 0) { + this.sortTreeData(this.treeData) + } + + // 璁剧疆绂佹鎷栨嫿鎽勫儚鏈哄埌鎽勫儚鏈鸿妭鐐� + this.setDropDisable(this.treeData) + this.isFold(this.treeData) + + this.gb28181CheckedCount = 0 + this.gb28181ChildNodeCount = this.countChildrenNodes(this.treeData) + this.activeTreeData = this.treeData + } + } + + removeNoCheckedNode(nodes: Array<any>) { + for (let i = 0; i < nodes.length; ) { + if (!nodes[i].checked) { + nodes.splice(i, 1) + continue + } + + if (nodes[i].children && nodes[i].children.length) { + this.removeNoCheckedNode(nodes[i].children) + } + i++ + } + } + + countCheckedNodes(nodes: Array<any>) { + let count = 0 + nodes.forEach((n) => { + if (n.type == "camera") { + count++ + } + }) + this.gb28181CheckedCount = count + } + + newTreeByChecked(nodes: Array<object>) { + let newTree = JSON.parse(JSON.stringify(nodes)) + this.removeNoCheckedNode(newTree) + + return newTree + } + + async showBaseImage(node: any) { + this.baseImageLoading = true + this.gb28181CameraBaseImage = "" + this.cameraNameForBaseImage = node.name + + try { + const rsp: any = await getCameraBaseImage({ id: node.id }) + + if (rsp && rsp.data) { + this.gb28181CameraBaseImage = rsp.data + } + } catch (error) { + console.log(error) + } + + this.baseImageLoading = false + } } -- Gitblit v1.8.0