233 lines
6.8 KiB
Vue
233 lines
6.8 KiB
Vue
<template>
|
|
<div class="treeDiv">
|
|
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
|
<el-select v-model="deviceValue" class="m-2" placeholder="Select" size="large">
|
|
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
|
|
:current-node-key="checkedkeys" @node-click="handleNodeClick" />
|
|
</dv-border-box-10>
|
|
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import bimStore from '@/store/modules/bim';
|
|
import { nextTick } from "vue";
|
|
import Bus from '@/utils/bus.js'
|
|
const myTree = ref("myTree");
|
|
const deviceOptions = [
|
|
{
|
|
value: '0',
|
|
label: '漳州工厂',
|
|
}
|
|
]
|
|
|
|
const defaultProps = {
|
|
children: 'children',
|
|
label: 'label',
|
|
}
|
|
|
|
const data = reactive({
|
|
deviceValue: '0',
|
|
treeData: [
|
|
{
|
|
label: '生产设备',
|
|
id: '0',
|
|
info: {
|
|
name: '生产设备',
|
|
type: '生产设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2025-12-15'
|
|
},
|
|
children: [
|
|
{
|
|
label: '立仓',
|
|
id: '0-1',
|
|
clickName: 'set1',
|
|
info: {
|
|
name: '立仓',
|
|
type: '生产设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2028-10-15'
|
|
|
|
},
|
|
children: []
|
|
|
|
},
|
|
{
|
|
label: '过滤槽',
|
|
id: '0-2',
|
|
clickName: 'set6',
|
|
info: {
|
|
name: '过滤槽',
|
|
type: '生产设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2067-12-30'
|
|
},
|
|
children: []
|
|
|
|
},
|
|
{
|
|
label: '设备二',
|
|
id: '0-3',
|
|
clickName: 'set2',
|
|
info: {
|
|
name: '设备二',
|
|
type: '生产设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2025-12-15'
|
|
},
|
|
children: []
|
|
},
|
|
{
|
|
label: '设备三',
|
|
id: '0-4',
|
|
clickName: 'set3',
|
|
info: {
|
|
name: '设备三',
|
|
type: '空调设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2025-12-15'
|
|
},
|
|
children: []
|
|
},
|
|
{
|
|
label: '设备四',
|
|
id: '0-5',
|
|
clickName: 'set4',
|
|
info: {
|
|
name: '设备四',
|
|
type: '安防设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2025-12-15'
|
|
},
|
|
children: []
|
|
},
|
|
{
|
|
label: '设备五',
|
|
id: '0-6',
|
|
clickName: 'set5',
|
|
info: {
|
|
name: '设备五',
|
|
type: '安防设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2025-12-15'
|
|
},
|
|
children: []
|
|
},
|
|
{
|
|
label: '设备七',
|
|
id: '0-7',
|
|
clickName: 'set7',
|
|
info: {
|
|
name: '设备七',
|
|
type: '安防设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2025-12-15'
|
|
},
|
|
children: []
|
|
},
|
|
{
|
|
label: '设备八',
|
|
id: '0-8',
|
|
clickName: 'set8',
|
|
info: {
|
|
name: '设备八',
|
|
type: '安防设备',
|
|
status: '启用',
|
|
location: '漳州厂区糖化间',
|
|
belong: '漳州厂区',
|
|
date: '2025-12-15'
|
|
},
|
|
children: []
|
|
},
|
|
],
|
|
}
|
|
],
|
|
checkedkeys: ""
|
|
});
|
|
const { deviceValue, treeData, checkedkeys } = toRefs(data);
|
|
const emit = defineEmits(['handleNodeClick'])
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
checkedkeys.value = treeData.value[0].id;
|
|
handleNodeClick(treeData.value[0]);
|
|
})
|
|
});
|
|
|
|
Bus.on('handleTreeClick1', (obj) => {
|
|
let o = treeData.value[0].children.find(ele => {
|
|
return ele.clickName == obj.parent.name;
|
|
})
|
|
console.log(123, obj.parent.name);
|
|
if (o) {
|
|
nextTick(() => {
|
|
checkedkeys.value = o.id;
|
|
handleNodeClick(o);
|
|
})
|
|
}
|
|
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
Bus.off("handleTreeClick")// 清除监听
|
|
});
|
|
const handleNodeClick = (value) => {
|
|
bimStore().setActivateDeviceTree(value);
|
|
const isParent = value.children.length > 0;
|
|
emit('handleNodeClick', value, isParent);
|
|
setTimeout(() => {
|
|
Bus.emit('clickDevice', isParent);
|
|
}, 100)
|
|
}
|
|
|
|
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.treeDiv {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
// border: 1px solid red;
|
|
width: 240px;
|
|
height: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.el-tree {
|
|
width: 224px;
|
|
margin: 0 10px;
|
|
background: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
.el-select {
|
|
margin: 10px;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background: transparent;
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
color: #3cbfdf;
|
|
}
|
|
}
|
|
</style> |