修改项目树问题 绘制稳态治理分析页面

src/components/tree/govern/selectTree.vue

@@ -1,105 +1,64 @@
 <template>
-    <Tree ref="treRef" :width="width" :data="tree" default-expand-all  @checkedNodesChange="handleCheckedNodesChange"/>
+    <Tree
+        ref="treRef"
+        :width="width"
+        :data="tree"
+        default-expand-all
+        @checkedNodesChange="handleCheckedNodesChange"
+    />
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, onMounted, defineProps } from 'vue'
+import { ref } from 'vue'
 import Tree from '../select.vue'
 import { getLineTree } from '@/api/cs-device-boot/csLedger'
 import { useConfig } from '@/stores/config'
 import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
 import { useDictData } from '@/stores/dictData'
-// const props = defineProps(['template'])
+import { createLineTreeDecorators, decorateLineTree } from './lineTreeUtils'
+import { bootstrapWithTemplate, selectTreeNode } from './treeCommonUtils'
+
 interface Props {
     template?: boolean
 }
-const props = withDefaults(defineProps<Props>(), {
-    template: false
-})
-defineOptions({
-    name: 'govern/deviceTree'
-})
+
+const props = withDefaults(defineProps<Props>(), { template: false })
+
+defineOptions({ name: 'govern/selectTree' })
 
 const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy'])
+
 const config = useConfig()
-const tree = ref()
 const dictData = useDictData()
-const treRef = ref()
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof Tree>>()
 const width = ref('')
 
-const info = () => {
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+
+const handleCheckedNodesChange = (nodes: any[]) => emit('checkChange', nodes)
+
+async function loadTree() {
     tree.value = []
-    let arr3: any[] = []
-    getLineTree().then(res => {
-        //治理设备
-        res.data.map((item: any) => {
-           if (item.name == '监测设备') {
-                item.children.forEach((item: any) => {
-                    item.icon = 'el-icon-HomeFilled'
-                    item.level = 1
-                    item.color = config.getColorVal('elementUiPrimary')
-                    item.children.forEach((item2: any) => {
-                        item2.icon = 'el-icon-List'
-                        item2.level = 1
-                        item2.color = config.getColorVal('elementUiPrimary')
-                        item2.children.forEach((item3: any) => {
-                            item3.icon = 'el-icon-Platform'
-                            item3.level = 1
-                            item3.color =
-                                item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                            item3.children.forEach((item4: any) => {
-                                item4.icon = 'el-icon-Platform'
-                                item4.color =
-                                    item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                                // item4.color = '#e26257 !important'
-                                arr3.push(item4)
-                            })
-                        })
-                    })
-                })
-            }
-        })
-        tree.value = res.data.filter(item => item.name == '监测设备')
-        nextTick(() => {
-            if (arr3.length) {
-                //初始化选中
-                treRef.value.treeRef.setCurrentKey(arr3[0].id)
-                // 注册父组件事件
-                emit('init', {
-                    level: 2,
-                    ...arr3[0]
-                })
-                return
-            }
-            else {
-                emit('init')
-                return
-            }
-        })
+    const res = await getLineTree()
+    const leaves = decorateLineTree(res.data, '1', decorators, { disableParents: false })
+    tree.value = res.data.filter((item: any) => item.name === '监测设备')
+
+    const node = leaves.monitor[0]
+    if (!node) {
+        emit('init')
+        return
+    }
+
+    await selectTreeNode(treRef.value, node, {
+        onSelect: selected => emit('init', { level: 2, ...selected })
     })
 }
 
-// 处理子组件传递的勾选节点变化，并转发给父组件
-const handleCheckedNodesChange = (nodes: any[]) => {
-    // 先给父组件
-    emit('checkChange', nodes)
-}
-
-
-if (props.template) {
-    getTemplateByDept({ id: dictData.state.area[0]?.id })
-        .then((res: any) => {
-            emit('Policy', res.data)
-            info()
-        })
-        .catch(err => {
-            info()
-        })
-} else {
-    info()
-}
-
-
-
-onMounted(() => {})
+bootstrapWithTemplate(
+    props.template,
+    loadTree,
+    () => getTemplateByDept({ id: dictData.state.area[0]?.id }),
+    data => emit('Policy', data)
+)
 </script>