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

src/components/tree/govern/deviceInfoTree.vue

@@ -1,107 +1,64 @@
-<template>
-    <Tree
-        ref="treRef"
-        @checkTreeNodeChange="handleCheckChange"
-        :default-checked-keys="defaultCheckedKeys"
-        :show-checkbox="props.showCheckbox"
-        :data="tree"
-    />
-</template>
-
-<script lang="ts" setup>
-import { ref, nextTick, defineProps } from 'vue'
-import Tree from '../index.vue'
-import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
-import { useConfig } from '@/stores/config'
-defineOptions({
-    name: 'govern/deviceTree'
-})
-const props = withDefaults(
-    defineProps<{
-        showCheckbox?: boolean
-        defaultCheckedKeys?: any
-    }>(),
-    {
-        showCheckbox: false,
-        defaultCheckedKeys: []
-    }
-)
-
-const emit = defineEmits(['init', 'checkChange'])
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-getDeviceTree().then(res => {
-    return
-    let arr: any[] = []
-    res.data.forEach((item: any) => {
-        item.icon = 'el-icon-HomeFilled'
-        item.color = config.getColorVal('elementUiPrimary')
-        item.children.forEach((item2: any) => {
-            item2.icon = 'el-icon-List'
-            item2.color = config.getColorVal('elementUiPrimary')
-            item2.children.forEach((item3: any) => {
-                item3.icon = 'el-icon-Platform'
-                item3.color = config.getColorVal('elementUiPrimary')
-                if (item3.comFlag === 1) {
-                    item3.color = '#e26257 !important'
-                }
-                arr.push(item3)
-            })
-        })
-    })
-    tree.value = res.data
-    nextTick(() => {
-        if (arr.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
-            // 注册父组件事件
-            emit('init', {
-                level: 2,
-                ...arr[0]
-            })
-        } else {
-            emit('init')
-        }
-    })
-})
-const getTreeList = (list: any) => {
-    let arr: any[] = []
-    list.forEach((item: any) => {
-        item.icon = 'el-icon-HomeFilled'
-        item.color = config.getColorVal('elementUiPrimary')
-        item.children.forEach((item2: any) => {
-            item2.icon = 'el-icon-List'
-            item2.color = config.getColorVal('elementUiPrimary')
-            item2.children?.forEach((item3: any) => {
-                item3.icon = 'el-icon-Platform'
-                item3.color = config.getColorVal('elementUiPrimary')
-                if (item3.comFlag === 1) {
-                    item3.color = '#e26257 !important'
-                    item3.color = item3.comFlag == 3 ? '#e26257 !important' : config.getColorVal('elementUiPrimary')
-                }
-                arr.push(item3)
-            })
-        })
-    })
-    tree.value = list
-    nextTick(() => {
-        if (arr.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
-            // 注册父组件事件
-            emit('init', {
-                level: 2,
-                ...arr[0]
-            })
-        } else {
-            emit('init')
-        }
-    })
-}
-//接收tree选择的数据后传递给父级组件
-const handleCheckChange = (data: any) => {
-    emit('checkChange', {
-        data
-    })
-}
-defineExpose({ getTreeList })
-</script>
+<template>
+    <Tree
+        ref="treRef"
+        @checkTreeNodeChange="handleCheckChange"
+        :default-checked-keys="defaultCheckedKeys"
+        :show-checkbox="props.showCheckbox"
+        :data="tree"
+    />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Tree from '../index.vue'
+import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
+import { useConfig } from '@/stores/config'
+import { createLineTreeDecorators } from './lineTreeUtils'
+import { decorateDeviceInfoTree } from './deviceTreeUtils'
+import { selectTreeNode } from './treeCommonUtils'
+
+defineOptions({ name: 'govern/deviceInfoTree' })
+
+const props = withDefaults(
+    defineProps<{
+        showCheckbox?: boolean
+        defaultCheckedKeys?: any[]
+    }>(),
+    {
+        showCheckbox: false,
+        defaultCheckedKeys: () => []
+    }
+)
+
+const emit = defineEmits(['init', 'checkChange'])
+
+const config = useConfig()
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof Tree>>()
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+
+async function initTree(list: any[]) {
+    const leaves = decorateDeviceInfoTree(list, decorators)
+    tree.value = list
+
+    const node = leaves[0]
+    if (!node) {
+        emit('init')
+        return
+    }
+
+    await selectTreeNode(treRef.value, node, {
+        onSelect: selected => emit('init', { level: 2, ...selected })
+    })
+}
+
+getDeviceTree().then(res => initTree(res.data))
+
+const getTreeList = (list: any[]) => initTree(list)
+
+const handleCheckChange = (data: any) => {
+    emit('checkChange', { data })
+}
+
+defineExpose({ getTreeList })
+</script>