在线监测点修改

src/components/tree/pms/pointTree.vue

@@ -1,42 +1,41 @@
 <template>
-    <div class="point-tree" style="height: 100%; width: 100%; display: flex; flex-direction: column">
+    <div class='point-tree' style='height: 100%; width: 100%; display: flex; flex-direction: column'>
         <el-select
-            v-model="formData.statisticalType"
-            placeholder="请选择"
-            style="min-width: unset; padding: 10px 10px 0"
-            @change="loadData"
+            v-model='formData.statisticalType'
+            placeholder='请选择'
+            style='min-width: unset; padding: 10px 10px 0'
+            @change='loadData'
         >
             <el-option
-                v-for="item in classificationData"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+                v-for='item in classificationData'
+                :key='item.id'
+                :label='item.name'
+                :value='item.id'
             ></el-option>
         </el-select>
-        <div style="flex: 1; overflow: hidden">
-            <Tree ref="treRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
+        <div style='flex: 1; overflow: hidden'>
+            <Tree ref='treRef' :data='tree' style='width: 100%; height: 100%' :canExpand='false'  v-bind='$attrs' />
         </div>
     </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, nextTick, watch } from 'vue'
+<script lang='ts' setup>
+import { nextTick, onMounted, ref, useAttrs } from 'vue'
 import Tree from '../index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 import { useDictData } from '@/stores/dictData'
 import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
 import { useConfig } from '@/stores/config'
-import { ElTree } from 'element-plus'
 
 defineOptions({
     name: 'pms/pointTree'
 })
 const emit = defineEmits(['init'])
+const attrs = useAttrs()
 const adminInfo = useAdminInfo()
 const dictData = useDictData()
 const config = useConfig()
 const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
-console.log(classificationData)
 const tree = ref()
 const treRef = ref()
 const formData = ref({
@@ -49,10 +48,10 @@ const formData = ref({
     statisticalType: classificationData[0].id,
     scale: null
 })
-
 const loadData = () => {
     let form = JSON.parse(JSON.stringify(formData.value))
     form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
+    let nodeKey = ''
     getTerminalTreeForFive(form).then(res => {
         console.log(res)
         res.data.forEach((item: any) => {
@@ -67,10 +66,11 @@ const loadData = () => {
                     item3.children.forEach((item4: any) => {
                         item4.icon = 'fa-solid fa-tower-observation'
                         item4.color = config.getColorVal('elementUiPrimary')
-                        item4.children.forEach((item5: anyObj, index: number) => {
-                            // if (!props.currentNodeKey && index === 0) {
-                            //     treRef.value.setCurrentKey(item5.id)
-                            // }
+                        item4.children.forEach((item5: anyObj) => {
+                            if ((!attrs['current-node-key']) && !nodeKey) {
+                                nodeKey = item5.id
+                                emit('init', item5)
+                            }
                             item5.icon = 'fa-solid fa-location-dot'
                             item5.color = config.getColorVal('elementUiPrimary')
                             if (item5.comFlag === 0) {
@@ -86,6 +86,12 @@ const loadData = () => {
             })
         })
         tree.value = res.data
+        if (nodeKey) {
+            nextTick(() => {
+                treRef.value.treeRef.setCurrentKey(nodeKey)
+                treRef.value.treeRef.setExpandedKeys(nodeKey)
+            })
+        }
     })
 }
 loadData()

src/components/tree/tree-v2.vue

@@ -0,0 +1,132 @@
+<template>
+    <div  :style="{ width: menuCollapse ? '40px' : props.width }"
+          style='transition: all 0.3s; overflow: hidden'>
+        <Icon
+            v-show='menuCollapse'
+            @click='onMenuCollapse'
+            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            :class="menuCollapse ? 'unfold' : ''"
+            size='18'
+            class='fold ml10 mt20 menu-collapse'
+            style='cursor: pointer'
+        />
+        <div id='tree-index' class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
+            <div style='display: flex; align-items: center' class='mb10'>
+                <el-input v-model='filterText' placeholder='请输入内容' clearable>
+                    <template #prefix>
+                        <Icon name='el-icon-Search' style='font-size: 16px' />
+                    </template>
+                </el-input>
+                <Icon
+                    @click='onMenuCollapse'
+                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                    :class="menuCollapse ? 'unfold' : ''"
+                    size='18'
+                    class='fold ml10 menu-collapse'
+                    style='cursor: pointer'
+                    v-if='props.canExpand'
+                />
+            </div>
+            <el-tree-v2
+                style='flex: 1; overflow: auto'
+                ref='treeRef'
+                :props='defaultProps'
+                highlight-current
+                default-expand-all
+                :filter-node-method='filterNode'
+                :height='treeHeight'
+                v-bind='$attrs'
+            >
+                <template #default='{ node, data }'>
+                    <span class='custom-tree-node'>
+                        <Icon
+                            :name='data.icon'
+                            style='font-size: 16px'
+                            :style='{ color: data.color }'
+                            v-if='data.icon'
+                        />
+                        <span style='margin-left: 4px'>{{ node.label }}</span>
+                    </span>
+                </template>
+            </el-tree-v2>
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import useCurrentInstance from '@/utils/useCurrentInstance'
+import { ElTree } from 'element-plus'
+import { onMounted, ref, watch } from 'vue'
+
+defineOptions({
+    name: 'govern/tree'
+})
+
+interface Props {
+    width?: string
+    canExpand?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    width: '280px',
+    canExpand: true
+})
+const treeHeight = ref(0)
+const { proxy } = useCurrentInstance()
+const menuCollapse = ref(false)
+const filterText = ref('')
+const defaultProps = {
+    label: 'name',
+    value: 'id'
+}
+watch(filterText, val => {
+    treeRef.value!.filter(val)
+})
+const onMenuCollapse = () => {
+    menuCollapse.value = !menuCollapse.value
+    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
+}
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.name.includes(value)
+}
+const treeRef = ref<InstanceType<typeof ElTree>>()
+defineExpose({ treeRef })
+onMounted(
+    () => {
+        let dom = document.getElementById('tree-index')
+        if (dom) {
+            treeHeight.value = dom.offsetHeight - 68
+        }
+    }
+)
+</script>
+
+<style lang='scss' scoped>
+.cn-tree {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+
+    :deep(.el-tree) {
+        border: 1px solid var(--el-border-color);
+    }
+
+    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+        background-color: var(--el-color-primary-light-7);
+    }
+
+    .menu-collapse {
+        color: var(--el-color-primary);
+    }
+}
+
+.custom-tree-node {
+    display: flex;
+    align-items: center;
+}
+</style>