From 0175cda6150656bc74b34c6f6c71edd1e1fc653c Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 04 二月 2021 18:22:54 +0800
Subject: [PATCH] treee, 修复tab切换时树的选中状态.添加区域
---
src/Pool/TreeData.ts | 391 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 230 insertions(+), 161 deletions(-)
diff --git a/src/Pool/TreeData.ts b/src/Pool/TreeData.ts
index 0e77acd..6984c74 100644
--- a/src/Pool/TreeData.ts
+++ b/src/Pool/TreeData.ts
@@ -1,235 +1,276 @@
import {
getLocalCameraTree,
getGB28181CameraTree,
+ getClusterTree,
addAreaTreeData,
delAreaTreeData,
updateAreaTreeData,
refreshGB28181Tree,
updateCameraArea
-} from "@/api/area";
-import {
- findAllFile,
- show,
- changeEnable
-} from "@/api/localVedio";
+} from '@/api/area'
+import { findAllFile, show, changeEnable } from '@/api/localVedio'
export default class TreeDataPool {
- public openeds: Array<boolean>;
- public treeData: Array<object>;
- public gb28181Data: Array<object>;
- public treeDataPure: Array<object>;
- public gb28181DataPure: 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 showTreeBox: boolean;
- public selectedNodes: Array<string>;
- public selectedNode: any;
+ 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 treeType: string;
+ public treeType: string
// 璁板綍鏀惰捣鐨勮妭鐐�
- public foldNodeList: object;
+ public foldNodeList: object
//璁板綍宸︿晶tab锛歛ctiveName
- public treeActiveName: string;
+ public treeActiveName: string
//鏈湴瑙嗛锛氳棰戝垎鏋愬鐞�
- public vedioAnaliyseSwitch: boolean;
+ public vedioAnaliyseSwitch: boolean
//鏈湴瑙嗛鍒楄〃
- public localVedioList: Array<any>;
+ public localVedioList: Array<any>
//鏈湴瑙嗛褰撳墠椤�
- public localCurrentPage: number;
+ public localCurrentPage: number
//鏈湴瑙嗛姣忛〉鏌ヨ20鏉�
- public localPageSize: number;
+ public localPageSize: number
//鏈湴瑙嗛鎬绘潯鏁�
- public localTotal: number;
+ public localTotal: number
//鍕鹃�夌殑鏈湴瑙嗛
- public checkedLocalVedio: Array<any>;
+ public checkedLocalVedio: Array<any>
//褰撳墠閫変腑鐨勬湰鍦拌棰�
- public clickLocalVideo: object;
+ public clickLocalVideo: object
//鎺у埗寮�濮嬨�佹殏鍋滄寜閽樉绀虹姸鎬�
- 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
+
+ public zTree: boolean
constructor() {
- this.openeds = [true, true, false];
- this.treeData = [];
- this.gb28181Data = [];
- this.treeDataPure = [];
- this.gb28181DataPure = [];
- 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.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 = {}
//1:鏆傚仠鐘舵�侊紱2锛氱瓑寰呯姸鎬�;3:缃伆
- this.btnStaus = "3";
- this.localCurrentPage = 1;
- this.localPageSize = 20;
- this.localTotal = 0;
- this.ctrlCameraId = "";
- this.ctrlCameraName = "";
+ this.btnStaus = '3'
+ this.localCurrentPage = 1
+ this.localPageSize = 20
+ this.localTotal = 0
+ this.ctrlCameraId = ''
+ this.ctrlCameraName = ''
+ this.zTree = 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);
+ if (node.type === '4' && node.selected) {
+ _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);
+ // });
+ // }
+ }
+
+ 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.selectedNodes = []
+ this.selectedNode = {}
- this.cleanLocalVedio();
+ this.cleanLocalVedio()
}
cleanTree(tree) {
- if (tree === "localTree") {
- this.treeData = JSON.parse(JSON.stringify(this.treeDataPure));
+ if (tree === 'localTree') {
+ this.treeData = JSON.parse(JSON.stringify(this.treeDataPure))
}
- if (tree === "gb28182Tree") {
- this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure));
+ if (tree === 'gb28182Tree') {
+ this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure))
}
}
@@ -238,8 +279,13 @@
return
}
node.forEach(n => {
+ // vue-js-tree 榛樿灞曞紑,鎺у埗閮ㄥ垎鎶樺彔. z-tree 榛樿鎶樺彔, 鎺у埗閮ㄥ垎灞曞紑
if (this.foldNodeList[n.id]) {
- n.opened = false;
+ if (this.zTree) {
+ n.open = true
+ } else {
+ n.opened = false
+ }
}
if (n.children && n.children.length > 0) {
this.isFold(n.children)
@@ -255,39 +301,72 @@
if (n.children && n.children.length > 0) {
this.setDropDisable(n.children)
} else {
- if (n.type === "4") {
- n.dropDisabled = true;
+ if (n.type === '4') {
+ n.dropDisabled = true
}
}
})
}
+ sortTreeData(node) {
+ 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.forEach(n => {
+ if (n.children && n.children.length > 0) {
+ this.sortTreeData(n.children)
+ }
+ })
+ }
+
async fetchLocalTree() {
- const rsp: any = await getLocalCameraTree({
+ let params: any = {
searchType: this.searchCamType,
cameraName: this.searchInput
- });
+ //isPlatform: 1
+ }
+ if (this.searchFrom == 'cluster') {
+ params.isPlatform = 1
+ }
+ const rsp: any = await getLocalCameraTree(params)
if (rsp && rsp.success) {
this.treeData = rsp.data ? rsp.data : []
if (this.treeData && this.treeData.length > 0) {
- this.treeData.sort(function (obj1: any, obj2: any) {
- var val1 = obj1.id;
- var val2 = obj2.id;
- if (val1 < val2) {
- return -1;
- } else if (val1 > val2) {
- return 1;
- } else {
- return 0;
- }
- });
+ this.sortTreeData(this.treeData)
}
// 璁剧疆绂佹鎷栨嫿鎽勫儚鏈哄埌鎽勫儚鏈鸿妭鐐�
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() {
+ const rsp: any = await getClusterTree({
+ searchType: this.searchCamType,
+ cameraName: this.searchInput
+ })
+ if (rsp && rsp.success) {
+ this.clusterData = rsp.data ? rsp.data : []
+ if (this.clusterData && this.clusterData.length > 0) {
+ this.sortTreeData(this.clusterData)
+ }
+ this.clusterDataPure = JSON.parse(JSON.stringify(this.clusterData))
+ this.isFold(this.clusterData)
}
}
@@ -295,25 +374,15 @@
const rsp: any = await getGB28181CameraTree({
searchType: this.searchCamType,
cameraName: this.searchInput
- });
+ })
if (rsp && rsp.success) {
this.gb28181Data = rsp.data ? rsp.data : []
if (this.gb28181Data && this.gb28181Data.length > 0) {
- this.gb28181Data.sort(function (obj1: any, obj2: any) {
- var val1 = obj1.id;
- var val2 = obj2.id;
- if (val1 < val2) {
- return -1;
- } else if (val1 > val2) {
- return 1;
- } else {
- return 0;
- }
- });
+ this.sortTreeData(this.gb28181Data)
}
- this.gb28181DataPure = JSON.parse(JSON.stringify(this.gb28181Data));
+ this.gb28181DataPure = JSON.parse(JSON.stringify(this.gb28181Data))
this.isFold(this.gb28181Data)
}
}
@@ -325,6 +394,7 @@
if (this.openeds[1]) {
this.fetchGbTree()
}
+
this.findAllFile({})
}
@@ -332,17 +402,17 @@
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) {
@@ -351,9 +421,9 @@
name: name,
parentId: this.getParent(id, isGb),
alias: alias
- });
+ })
- this.fetchTreeData();
+ this.fetchTreeData()
}
async refreshGB28181() {
@@ -362,8 +432,7 @@
}
async findAllFile(params: any) {
- params.fileName = this.searchInput,
- params.type = this.searchLocalType
+ ; (params.fileName = this.searchInput), (params.type = this.searchLocalType)
params.page = this.localCurrentPage
params.size = this.localPageSize
let res: any = await findAllFile(params)
@@ -378,7 +447,7 @@
}
if (!i.snapshot_url) {
// obj.snapshot_url = require('@/assets/nobody.png')
- obj.snapshot_url = ""
+ obj.snapshot_url = ''
} else {
obj.snapshot_url = '/httpImage/' + obj.snapshot_url
}
@@ -425,7 +494,7 @@
if (this.checkedLocalVedio.length === 0) {
this.btnStaus = '3'
- return false;
+ return false
}
this.checkedLocalVedio.every((i, index) => {
let t = ''
@@ -461,7 +530,7 @@
i.clickStatus = false
})
this.checkedLocalVedio = []
- this.btnStaus = "3"
+ this.btnStaus = '3'
}
async dropNode(cameraId, areaId) {
--
Gitblit v1.8.0