113 lines
2.8 KiB
Vue
113 lines
2.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";
|
|
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: '启用'
|
|
},
|
|
children: [
|
|
{
|
|
label: '立仓',
|
|
id: '0-1',
|
|
url: '/jz/glb/scene.gltf',
|
|
info: {
|
|
name: '立仓',
|
|
type: '生产设备',
|
|
status: '启用'
|
|
},
|
|
|
|
},
|
|
{
|
|
label: '糖浆罐',
|
|
id: '0-2',
|
|
url: '/seraphine/scene.gltf',
|
|
info: {
|
|
name: '糖浆罐',
|
|
type: '生产设备',
|
|
status: '启用'
|
|
},
|
|
},
|
|
],
|
|
}
|
|
],
|
|
checkedkeys: ""
|
|
});
|
|
const { deviceValue, treeData, checkedkeys } = toRefs(data);
|
|
const emit = defineEmits(['handleNodeClick'])
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
checkedkeys.value = treeData.value[0].children[0].id;
|
|
handleNodeClick(treeData.value[0].children[0]);
|
|
})
|
|
});
|
|
const handleNodeClick = (value) => {
|
|
bimStore().setActivateDeviceTree(value);
|
|
emit('handleNodeClick', value)
|
|
}
|
|
|
|
|
|
</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: #3cbfdf;
|
|
}
|
|
|
|
.el-select {
|
|
margin: 10px;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background: transparent;
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
color: #3cbfdf;
|
|
}
|
|
}
|
|
</style> |