设备监控

src/components/tree/govern/deviceTree.vue

@@ -1,17 +1,19 @@
 <template>
-    <Tree :data="tree" />
+    <Tree ref="treRef" :data="tree" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import Tree from './index.vue'
+import { ref, nextTick } 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 emit = defineEmits(['init'])
 const config = useConfig()
 const tree = ref()
+const treRef = ref()
 getDeviceTree().then(res => {
     let arr: any[] = []
     res.data.forEach((item: any) => {
@@ -31,5 +33,13 @@ getDeviceTree().then(res => {
         })
     })
     tree.value = res.data
+    nextTick(() => {
+        treRef.value.treeRef.setCurrentKey(arr[0].id)
+        // 注册父组件事件
+        emit('init', {
+            level: 2,
+            ...arr[0]
+        })
+    })
 })
 </script>

src/components/tree/govern/pointTree.vue

@@ -0,0 +1,48 @@
+<template>
+    <Tree ref="treRef" :data="tree" />
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick } from 'vue'
+import Tree from '../index.vue'
+import { getLineTree } from '@/api/cs-device-boot/csLedger'
+import { useConfig } from '@/stores/config'
+defineOptions({
+    name: 'govern/deviceTree'
+})
+const emit = defineEmits(['init'])
+const config = useConfig()
+const tree = ref()
+const treRef = ref()
+getLineTree().then(res => {
+    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'
+            item.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.children.forEach((item4: any) => {
+                    item4.icon = 'el-icon-LocationFilled'
+                    arr.push(item4)
+                })
+            })
+        })
+    })
+    tree.value = res.data
+    nextTick(() => {
+        treRef.value.treeRef.setCurrentKey(arr[0].id)
+        // 注册父组件事件
+        emit('init', {
+            level: 2,
+            ...arr[0]
+        })
+    })
+})
+</script>

src/components/tree/index.vue

@@ -6,13 +6,14 @@
             </template>
         </el-input>
         <el-tree
-            style="flex: 1"
+            style="flex: 1;overflow: auto;"
             ref="treeRef"
             :props="defaultProps"
             v-bind="$attrs"
             highlight-current
             default-expand-all
             :filter-node-method="filterNode"
+            node-key="id"
         >
             <template #default="{ node, data }">
                 <span class="custom-tree-node">
@@ -43,6 +44,7 @@ const filterNode = (value: string, data: any) => {
     if (!value) return true
     return data.name.includes(value)
 }
+defineExpose({ treeRef })
 </script>
 <style lang="scss" scoped>
 .cn-tree {