修改冀北现场反馈问题

src/components/table/header/index.vue

@@ -182,7 +182,7 @@ const handlerHeight = () => {
     }
 }
 const computedSearchRow = () => {
-    if (!headerForm.value.$el) return
+    if (!headerForm.value?.$el) return
     // 清空headerFormSecond.value.$el下的元素
     while (headerFormSecond.value.$el.firstChild) {
         headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)

src/components/tree/index.vue

@@ -59,7 +59,7 @@
                             effect="customized"
                             placement="bottom-start"
                             :offset="0"
-                            v-if=" data.level == 6"
+                            v-if="data.level == 6"
                         >
                             <template #content>
                                 <el-button type="primary" plain @click="viewDetails(data)">
@@ -74,18 +74,16 @@
             </el-tree>
         </div>
         <!-- 变电站详情 -->
-           <SubstationDetails ref="SubstationRef"/>
-         <!-- 监测点详情 -->
-         <MonitoringPointDetails ref="MonitoringPointRef"/>
-        
-        
+        <SubstationDetails ref="SubstationRef" />
+        <!-- 监测点详情 -->
+        <MonitoringPointDetails ref="MonitoringPointRef" />
     </div>
 </template>
 
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import MonitoringPointDetails from './details/monitoringPointDetails.vue'
 import SubstationDetails from './details/substationDetails.vue'
@@ -110,6 +108,7 @@ const menuCollapse = ref(false)
 const MonitoringPointRef = ref()
 const SubstationRef = ref()
 const filterText = ref('')
+const treeRef = ref()
 const defaultProps = {
     label: 'name',
     value: 'id'
@@ -148,13 +147,13 @@ const onMenuCollapse = () => {
 }
 // 查看详情
 const viewDetails = (data: any) => {
-    console.log("🚀 ~ viewDetails ~ data:", data)
+    console.log('🚀 ~ viewDetails ~ data:', data)
     if (data.level == 3) {
         // 变电站详情
         // substationDetails
         SubstationRef.value.open(data)
     } else {
-        // 监测点详情 
+        // 监测点详情
         MonitoringPointRef.value.open(data)
     }
 
@@ -194,12 +193,40 @@ const chooseNode = (value: string, data: any, node: any) => {
     // 没匹配到返回false
     return false
 }
+
+onMounted(async () => {
+    // 等待树渲染完成
+    await nextTick()
+    // 可以等待更长时间确保树完全展开
+})
+
+const scrollToNode = (id: string) => {
+    console.log("🚀 ~ scrollToNode ~ id:", id)
+    if (!treeRef.value) return
+
+    // 获取目标节点的元素
+    const targetNode = treeRef.value.getNode(id)
+    if (!targetNode) return
+
+    // 获取节点的DOM元素
+    const nodeElement = document.querySelector(`[data-key="${id}"]`)
+    if (nodeElement) {
+        // 滚动到节点位置
+        nodeElement.scrollIntoView({
+            behavior: 'smooth', // 平滑滚动
+            block: 'center', // 垂直方向居中
+            inline: 'nearest' // 水平方向最近
+        })
+
+        // 如果需要高亮当前节点
+        treeRef.value.setCurrentKey(id)
+    }
+}
 // 添加树
 const onAddTree = () => {
     emit('onAddTree')
 }
-const treeRef = ref<InstanceType<typeof ElTree>>()
-defineExpose({ treeRef })
+defineExpose({ treeRef, scrollToNode })
 </script>
 
 <style lang="scss" scoped>

src/components/tree/pqs/assessTree.vue

@@ -14,9 +14,7 @@ import { useDictData } from '@/stores/dictData'
 import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
 import { useConfig } from '@/stores/config'
 import { defineProps } from 'vue'
-import {
-    getTree
-} from '@/api/advance-boot/assess'
+import { getTree } from '@/api/advance-boot/assess'
 
 defineOptions({
     name: 'pms/pointTree'
@@ -46,25 +44,24 @@ const formData = ref({
     scale: null
 })
 
-
 // 添加数据转换函数
 const transformTreeData = (data: any[]) => {
-    if (!data || !Array.isArray(data)) return [];
+    if (!data || !Array.isArray(data)) return []
     return data.map(item => {
         // 创建新对象，确保不修改原始数据
         const newItem: any = {
-            name: item.treeName , 
-            id: item.treeId ,
+            name: item.treeName,
+            id: item.treeId,
             children: []
-        };
-   
+        }
+
         // 递归处理子节点
         if (item.children && Array.isArray(item.children)) {
-            newItem.children = transformTreeData(item.children);
+            newItem.children = transformTreeData(item.children)
         }
-        return newItem;
-    });
-};
+        return newItem
+    })
+}
 
 const loadData = () => {
     let obj = classificationData.find(function (i) {
@@ -73,19 +70,22 @@ const loadData = () => {
     let form = JSON.parse(JSON.stringify(formData.value))
     form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
     let nodeKey = ''
-    getTree({}).then(res => { 
-         // 转换数据结构为指定格式
-         const transformedData = transformTreeData(res.data);
-       
-           // 确保有数据再进行处理
-           if (transformedData && transformedData.length > 0 && 
-            transformedData[0].children && transformedData[0].children.length > 0) {
-            
+    getTree({}).then(res => {
+        // 转换数据结构为指定格式
+        const transformedData = transformTreeData(res.data)
+
+        // 确保有数据再进行处理
+        if (
+            transformedData &&
+            transformedData.length > 0 &&
+            transformedData[0].children &&
+            transformedData[0].children.length > 0
+        ) {
             nodeKey = transformedData[0].children[0].id
             emit('init', transformedData[0].children[0])
 
             tree.value = transformedData
-            
+
             if (nodeKey) {
                 nextTick(() => {
                     treeRef.value.treeRef.setCurrentKey(nodeKey)
@@ -94,7 +94,15 @@ const loadData = () => {
         }
     })
 }
+const scrollToNode = (id: string) => {
+    // 树滚动
+    treeRef.value.scrollToNode(id)
+}
 loadData()
+defineExpose({
+    tree,
+    scrollToNode
+})
 </script>
 <style lang="scss">
 .point-tree {

src/components/tree/pqs/pointTree.vue

@@ -135,11 +135,17 @@ const loadData = () => {
         if (nodeKey) {
             nextTick(() => {
                 treeRef.value.treeRef.setCurrentKey(nodeKey)
+
                 // treeRef.value.treeRef.setExpandedKeys(nodeKey)
             })
         }
     })
 }
+const scrollToNode = (id: string) => {
+    // 树滚动
+    treeRef.value.scrollToNode(id)
+}
+defineExpose({ treeRef, scrollToNode, tree })
 loadData()
 </script>
 <style lang="scss">