修改冀北现场反馈问题

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>