<template>
|
<el-tree ref="tree" :data="node" :props="defaultProps" node-key="ID" default-expand-all class="camera-tree"
|
show-checkbox @check="handleCheckChange">
|
<template #default="{ node, data }">
|
<span class="custom-tree-node">
|
<i :class="data.Parental !== 0 ? 'el-icon-folder' : 'el-icon-video-camera'"></i>
|
<span>{{ node.label }}</span>
|
</span>
|
</template>
|
</el-tree>
|
</template>
|
|
<script>
|
export default {
|
name: 'TreeMenu',
|
props: {
|
node: Array, // 接收树数据
|
height: [Number, String],
|
setting: Object,
|
value: Array // 用于 v-model 的双向绑定
|
},
|
data() {
|
return {
|
results: [],
|
checkedKeysList: [],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
count: 1
|
};
|
},
|
mounted() {
|
this.checkedKeys(this.node)
|
this.$refs.tree.setCheckedKeys(this.checkedKeysList);
|
console.log("checkedKeysList",this.checkedKeysList)
|
// this.handleCheckChange()
|
},
|
methods: {
|
checkedKeys(node) {
|
if (node) {
|
for (const item of node) {
|
if (item.checked) {
|
this.checkedKeysList.push(item.ID)
|
}
|
if (item.children) {
|
this.checkedKeys(item.children)
|
}
|
}
|
}
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
this.results = [];
|
const treeArr = this.$refs.tree.getCheckedNodes(false, false) || []
|
const treeArr2 = this.$refs.tree.getHalfCheckedNodes(false, false) || []
|
// if (treeArr2&&treeArr2.value) {
|
// treeArr.push(...treeArr2.value)
|
// }
|
// console.log("checked", checked.checkedKeys)
|
// console.log("data", data)
|
// console.log("treeArr", treeArr)
|
// console.log("treeArr2", treeArr2)
|
//选择摄像机几路数量统计
|
// let checkCount = 0;
|
if (treeArr && treeArr.length > 0) {
|
for (const item of treeArr) {
|
// console.log("item",item)
|
this.results.push({
|
ID: item.ID,
|
ParentID: item.ParentID,
|
DeviceID: item.DeviceID,
|
DeviceName: item.DeviceName,
|
Name: item.label,
|
Parental: item.Parental,
|
Longitude: item.Longitude,
|
Latitude: item.Latitude
|
})
|
// if (item.Parental == 0) {
|
// checkCount = checkCount + 1;
|
// }
|
}
|
}
|
if (treeArr2 && treeArr2.length > 0) {
|
for (const item of treeArr2) {
|
// console.log("item",item)
|
this.results.push({
|
ID: item.ID,
|
ParentID: item.ParentID,
|
DeviceID: item.DeviceID,
|
DeviceName: item.DeviceName,
|
Name: item.label,
|
Parental: item.Parental,
|
Longitude: item.Longitude,
|
Latitude: item.Latitude
|
})
|
// if (item.Parental == 0) {
|
// checkCount = checkCount + 1;
|
// }
|
}
|
}
|
this.$emit('cehckDataUpload', treeArr.filter(node => node.checked).length)
|
},
|
getResults() {
|
return this.results;
|
},
|
// 供父组件调用的方法 - 获取当前选中的节点键值
|
getCheckedKeys() {
|
return this.$refs.tree.getCheckedKeys();
|
},
|
|
// 供父组件调用的方法 - 获取当前选中的节点所组成的数组
|
getCheckedNodes() {
|
return this.$refs.tree.getCheckedNodes();
|
},
|
// 供父组件调用的方法 - 获取当前选中的节点数据
|
getCurrentNode() {
|
return this.$refs.tree.getCurrentNode();
|
},
|
|
|
}
|
}
|
</script>
|
|
<style scoped></style>
|
