From 19a7ad5603a52dee94b7bddc95e5a1be3505a8af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Thu, 22 Feb 2024 14:51:05 +0800
Subject: [PATCH] pointtree

---
 src/components/tree/govern/deviceTree.vue     |  73 --------
 src/components/tree/govern/getMarketList.vue  |  29 ----
 src/components/tree/govern/pointTree.vue      |  52 ------
 src/components/tree/index.vue                 |  63 +++----
 src/components/tree/pms/pointTree.vue         |  70 +++-----
 .../monitoringPoint/online/index.vue          |  13 +-
 .../online/navigation/index.vue               |   8 +-
 .../monitoringPoint/online/store.ts           |  19 +++
 src/views/pms/voltageSags/overview/index.vue  | 161 +++++++++---------
 9 files changed, 178 insertions(+), 310 deletions(-)
 delete mode 100644 src/components/tree/govern/deviceTree.vue
 delete mode 100644 src/components/tree/govern/getMarketList.vue
 delete mode 100644 src/components/tree/govern/pointTree.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/store.ts

diff --git a/src/components/tree/govern/deviceTree.vue b/src/components/tree/govern/deviceTree.vue
deleted file mode 100644
index 7d83acd7..00000000
--- a/src/components/tree/govern/deviceTree.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <Tree
-        ref="treRef"
-        @check-change="handleCheckChange"
-        :default-checked-keys="defaultCheckedKeys"
-        :show-checkbox="props.showCheckbox"
-        :data="tree"
-    />
-</template>
-
-<script lang="ts" setup>
-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 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 => {
-    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 handleCheckChange = (data: any, checked: any, indeterminate: any) => {
-    emit('checkChange', {
-        data,
-        checked,
-        indeterminate
-    })
-}
-</script>
diff --git a/src/components/tree/govern/getMarketList.vue b/src/components/tree/govern/getMarketList.vue
deleted file mode 100644
index 8ddc598e..00000000
--- a/src/components/tree/govern/getMarketList.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <Tree ref="treRef" :data="tree" />
-</template>
-<script setup lang="ts">
-import { getMarketList } from '@/api/user-boot/user'
-import Tree from '../index.vue'
-import { useConfig } from '@/stores/config'
-import { ref, reactive, nextTick } from 'vue'
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-const emit = defineEmits(['selectUser'])
-getMarketList().then((res: any) => {
-    if (res.code === 'A0000') {
-        tree.value = res.data.map((item: any) => {
-            return {
-                ...item,
-                icon: 'el-icon-User',
-                color: 'royalblue'
-            }
-        })
-        emit('selectUser', tree.value[0])
-        nextTick(() => {
-            treRef.value.treeRef.setCurrentKey(tree.value[0].id)
-        })
-    }
-})
-</script>
-<style lang="scss" scoped></style>
diff --git a/src/components/tree/govern/pointTree.vue b/src/components/tree/govern/pointTree.vue
deleted file mode 100644
index 79642850..00000000
--- a/src/components/tree/govern/pointTree.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<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(() => {
-        if (arr.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
-            // 注册父组件事件
-            emit('init', {
-                level: 2,
-                ...arr[0]
-            })
-        } else {
-            emit('init')
-        }
-    })
-})
-</script>
diff --git a/src/components/tree/index.vue b/src/components/tree/index.vue
index 457232ba..e5ec9ce1 100644
--- a/src/components/tree/index.vue
+++ b/src/components/tree/index.vue
@@ -1,50 +1,50 @@
 <template>
-    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
+    <div  :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden'>
         <Icon
-            v-show="menuCollapse"
-            @click="onMenuCollapse"
+            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"
+            size='18'
+            class='fold ml10 mt20 menu-collapse'
+            style='cursor: pointer'
         />
-        <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
-            <div style="display: flex; align-items: center" class="mb10">
-                <el-input v-model="filterText" placeholder="请输入内容" clearable>
+        <div 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" />
+                        <Icon name='el-icon-Search' style='font-size: 16px' />
                     </template>
                 </el-input>
                 <Icon
-                    @click="onMenuCollapse"
+                    @click='onMenuCollapse'
                     :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                     :class="menuCollapse ? 'unfold' : ''"
-                    size="18"
-                    class="fold ml10 menu-collapse"
-                    style="cursor: pointer"
+                    size='18'
+                    class='fold ml10 menu-collapse'
+                    style='cursor: pointer'
                     v-if='props.canExpand'
                 />
             </div>
             <el-tree
-                style="flex: 1; overflow: auto"
-                ref="treeRef"
-                :props="defaultProps"
-                v-bind="$attrs"
+                style='flex: 1; overflow: auto'
+                ref='treeRef'
+                :props='defaultProps'
                 highlight-current
                 default-expand-all
-                :filter-node-method="filterNode"
-                node-key="id"
+                :filter-node-method='filterNode'
+                node-key='id'
+                v-bind='$attrs'
             >
-                <template #default="{ node, data }">
-                    <span class="custom-tree-node">
+                <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"
+                            :name='data.icon'
+                            style='font-size: 16px'
+                            :style='{ color: data.color }'
+                            v-if='data.icon'
                         />
-                        <span style="margin-left: 4px">{{ node.label }}</span>
+                        <span style='margin-left: 4px'>{{ node.label }}</span>
                     </span>
                 </template>
             </el-tree>
@@ -52,7 +52,7 @@
     </div>
 </template>
 
-<script lang="ts" setup>
+<script lang='ts' setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
 import { ref, watch } from 'vue'
@@ -60,6 +60,7 @@ import { ref, watch } from 'vue'
 defineOptions({
     name: 'govern/tree'
 })
+
 interface Props {
     width?: string
     canExpand?: boolean
@@ -91,7 +92,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .cn-tree {
     flex-shrink: 0;
     display: flex;
@@ -100,16 +101,20 @@ defineExpose({ treeRef })
     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;
diff --git a/src/components/tree/pms/pointTree.vue b/src/components/tree/pms/pointTree.vue
index 352b05ba..a772969c 100644
--- a/src/components/tree/pms/pointTree.vue
+++ b/src/components/tree/pms/pointTree.vue
@@ -1,23 +1,32 @@
 <template>
-    <div 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'>
-            <el-option v-for='item in classificationData' :key='item.id' :label='item.name'
-                       :value='item.id'></el-option>
+    <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"
+        >
+            <el-option
+                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' />
+        <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 } from 'vue'
+<script lang="ts" setup>
+import { ref, nextTick, watch } 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'
@@ -40,13 +49,12 @@ const formData = ref({
     statisticalType: classificationData[0].id,
     scale: null
 })
-console.log(formData)
+
 const loadData = () => {
     let form = JSON.parse(JSON.stringify(formData.value))
     form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
     getTerminalTreeForFive(form).then(res => {
         console.log(res)
-        let arr: any[] = []
         res.data.forEach((item: any) => {
             item.icon = 'fa-solid fa-synagogue'
             item.color = config.getColorVal('elementUiPrimary')
@@ -59,7 +67,10 @@ const loadData = () => {
                     item3.children.forEach((item4: any) => {
                         item4.icon = 'fa-solid fa-tower-observation'
                         item4.color = config.getColorVal('elementUiPrimary')
-                        item4.children.forEach((item5: any) => {
+                        item4.children.forEach((item5: anyObj, index: number) => {
+                            // if (!props.currentNodeKey && index === 0) {
+                            //     treRef.value.setCurrentKey(item5.id)
+                            // }
                             item5.icon = 'fa-solid fa-location-dot'
                             item5.color = config.getColorVal('elementUiPrimary')
                             if (item5.comFlag === 0) {
@@ -78,39 +89,4 @@ const loadData = () => {
     })
 }
 loadData()
-// getTerminalTreeForFive().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(() => {
-//         if (arr.length) {
-//             treRef.value.treeRef.setCurrentKey(arr[0].id)
-//             // 注册父组件事件
-//             emit('init', {
-//                 level: 2,
-//                 ...arr[0]
-//             })
-//         } else {
-//             emit('init')
-//         }
-//     })
-// })
 </script>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/index.vue
index c6671fc2..262c3483 100644
--- a/src/views/pms/voltageSags/monitoringPoint/online/index.vue
+++ b/src/views/pms/voltageSags/monitoringPoint/online/index.vue
@@ -17,17 +17,28 @@
     </div>
 </template>
 <script setup lang='ts'>
-import { defineOptions, ref } from 'vue'
+import { defineOptions, ref, watch } from 'vue'
 import Navigation from './navigation/index.vue'
 import EventStatistics from './eventStatistics/index.vue'
 import EventStudy from './eventStudy/index.vue'
 import RunningCondition from './runningCondition/index.vue'
 import { mainHeight } from '@/utils/layout'
+import router from '@/router'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
 
 defineOptions({
     name: 'Descentsystem/monitoringpoint'
 })
+const monitoringPoint = useMonitoringPoint()
 const height = mainHeight(82)
 const activeName = ref('1')
+watch(
+    () => router.currentRoute.value.query.lineId,
+    (newLineId, oldLineId) => {
+        // 在这里处理 lineId 的变化
+        monitoringPoint.setValue('lineId', newLineId)
+    },
+    { immediate: true }
+)
 </script>
 <style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue
index d4d1f424..9a443c57 100644
--- a/src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue
+++ b/src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue
@@ -1,7 +1,8 @@
 <template>
     <splitpanes style='height: 100%;' class='default-theme' id='navigation-splitpanes'>
         <pane :size='size'>
-            <PointTree></PointTree>
+            <PointTree :default-expand-all='false' :default-expanded-keys='[monitoringPoint.state.lineId]'
+                       :current-node-key='monitoringPoint.state.lineId'></PointTree>
         </pane>
         <pane>
             <Map></Map>
@@ -14,9 +15,10 @@ import 'splitpanes/dist/splitpanes.css'
 import { Splitpanes, Pane } from 'splitpanes'
 import PointTree from '@/components/tree/pms/pointTree.vue'
 import Map from './map.vue'
+import Tree from '@/components/tree/index.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
 
-
-
+const monitoringPoint = useMonitoringPoint()
 const size = ref(0)
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/store.ts b/src/views/pms/voltageSags/monitoringPoint/online/store.ts
new file mode 100644
index 00000000..3eeaf837
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/store.ts
@@ -0,0 +1,19 @@
+import { reactive } from 'vue'
+import { defineStore } from 'pinia'
+
+interface MonitoringPoint {
+    lineId: string
+}
+
+export const useMonitoringPoint = defineStore(
+    'monitoringPoint',
+    () => {
+        const state: MonitoringPoint = reactive({
+            lineId: ''
+        })
+        const setValue = (key: keyof MonitoringPoint, val: any) => {
+            state[key] = val
+        }
+        return { state, setValue }
+    }
+)
diff --git a/src/views/pms/voltageSags/overview/index.vue b/src/views/pms/voltageSags/overview/index.vue
index 5c61f0c4..f7a5809f 100644
--- a/src/views/pms/voltageSags/overview/index.vue
+++ b/src/views/pms/voltageSags/overview/index.vue
@@ -1,149 +1,149 @@
 <template>
-    <div style="padding: 10px; display: flex; height: 100%" v-loading="loading">
-        <div style="position: relative; flex: 1">
-            <div style="display: none">
-                <DatePicker ref="datePickerRef"></DatePicker>
+    <div style='padding: 10px; display: flex; height: 100%' v-loading='loading'>
+        <div style='position: relative; flex: 1'>
+            <div style='display: none'>
+                <DatePicker ref='datePickerRef'></DatePicker>
             </div>
-            <div class="iconBox">
-                <div class="div">
-                    <img src="@/assets/jcd.png" alt="" />
+            <div class='iconBox'>
+                <div class='div'>
+                    <img src='@/assets/jcd.png' alt='' />
                     <span>变电站</span>
                 </div>
-                <div class="div">
-                    <img src="@/assets/rby.png" alt="" />
+                <div class='div'>
+                    <img src='@/assets/rby.png' alt='' />
                     <span>热备用</span>
                 </div>
-                <div class="div">
-                    <img src="@/assets/ty.png" alt="" />
+                <div class='div'>
+                    <img src='@/assets/ty.png' alt='' />
                     <span>停运</span>
                 </div>
-                <div class="div">投运</div>
-                <div class="div" style="padding-left: 10px">
+                <div class='div'>投运</div>
+                <div class='div' style='padding-left: 10px'>
                     <span>通讯正常</span>
                 </div>
-                <div class="div" style="padding-left: 20px">
-                    <img src="@/assets/txzcyzj.gif" alt="" />
+                <div class='div' style='padding-left: 20px'>
+                    <img src='@/assets/txzcyzj.gif' alt='' />
                     <span>有暂降</span>
                 </div>
-                <div class="div" style="padding-left: 20px">
-                    <img src="@/assets/txzcwzj.png" alt="" />
+                <div class='div' style='padding-left: 20px'>
+                    <img src='@/assets/txzcwzj.png' alt='' />
                     <span>无暂降</span>
                 </div>
-                <div class="div" style="padding-left: 10px">
+                <div class='div' style='padding-left: 10px'>
                     <span>通讯异常</span>
                 </div>
-                <div class="div" style="padding-left: 20px">
-                    <img src="@/assets/txycyzj.gif" alt="" />
+                <div class='div' style='padding-left: 20px'>
+                    <img src='@/assets/txycyzj.gif' alt='' />
                     <span>有暂降</span>
                 </div>
-                <div class="div" style="padding-left: 20px">
-                    <img src="@/assets/txzdwzj.png" alt="" />
+                <div class='div' style='padding-left: 20px'>
+                    <img src='@/assets/txzdwzj.png' alt='' />
                     <span>无暂降</span>
                 </div>
             </div>
-            <div class="selectBox">
+            <div class='selectBox'>
                 <el-select
-                    @change="pointChange"
-                    :popper-append-to-body="false"
+                    @change='pointChange'
+                    :popper-append-to-body='false'
                     filterable
                     clearable
-                    v-model="lineId"
-                    placeholder="输入监测点名称查询"
+                    v-model='lineId'
+                    placeholder='输入监测点名称查询'
                 >
                     <el-option
-                        v-for="item in areaLineInfo"
-                        :key="item.lineId"
-                        :label="item.lineName"
-                        :value="item.lineId"
+                        v-for='item in areaLineInfo'
+                        :key='item.lineId'
+                        :label='item.lineName'
+                        :value='item.lineId'
                     ></el-option>
                 </el-select>
             </div>
             <baidu-map
-                class="bm-view"
-                :zoom="zoom"
-                :map-click="false"
-                :scroll-wheel-zoom="true"
-                :center="center"
-                @ready="handler"
-                @zoomend="syncCenterAndZoom"
+                class='bm-view'
+                :zoom='zoom'
+                :map-click='false'
+                :scroll-wheel-zoom='true'
+                :center='center'
+                @ready='handler'
+                @zoomend='syncCenterAndZoom'
             >
                 <bm-map-type
                     :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
-                    anchor="BMAP_ANCHOR_TOP_RIGHT"
+                    anchor='BMAP_ANCHOR_TOP_RIGHT'
                 ></bm-map-type>
                 <!--  线-->
-                <bm-polyline :path="path" v-for="(path, index) in polyline" :key="index"></bm-polyline>
+                <bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
                 <!-- 变电站-->
-                <template v-if="zoom > 12">
+                <template v-if='zoom > 12'>
                     <bm-marker
-                        :position="path"
-                        v-for="path in siteList"
-                        :key="path.subId"
-                        :icon="path.icon"
-                        @click="markerClick(path)"
+                        :position='path'
+                        v-for='path in siteList'
+                        :key='path.subId'
+                        :icon='path.icon'
+                        @click='markerClick(path)'
                     ></bm-marker>
                 </template>
                 <!-- 点 -->
                 <BmlMarkerClusterer>
                     <bm-marker
-                        :position="path"
-                        v-for="path in areaLineInfo"
-                        :key="path.lineId"
-                        :icon="path.icon"
-                        @click="markerClick(path)"
+                        :position='path'
+                        v-for='path in areaLineInfo'
+                        :key='path.lineId'
+                        :icon='path.icon'
+                        @click='markerClick(path)'
                     ></bm-marker>
                 </BmlMarkerClusterer>
-                <bm-marker :position="infoWindowPoint" :icon="{ url: '1', size: { width: 0, height: 0 } }">
-                    <bm-info-window :show="infoWindowPoint.show" @close="infoWindowPoint.show = false">
-                        <el-descriptions :title="infoWindowPoint.lineName" :column="1" v-if="infoWindowPoint.lineId">
-                            <el-descriptions-item label="供电公司">{{ infoWindowPoint.gdName }}</el-descriptions-item>
-                            <el-descriptions-item label="变电站">{{ infoWindowPoint.subName }}</el-descriptions-item>
-                            <el-descriptions-item label="母线">{{ infoWindowPoint.voltageName }}</el-descriptions-item>
-                            <el-descriptions-item label="网络参数">
+                <bm-marker :position='infoWindowPoint' :icon="{ url: '1', size: { width: 0, height: 0 } }">
+                    <bm-info-window :show='infoWindowPoint.show' @close='infoWindowPoint.show = false'>
+                        <el-descriptions :title='infoWindowPoint.lineName' :column='1' v-if='infoWindowPoint.lineId'>
+                            <el-descriptions-item label='供电公司'>{{ infoWindowPoint.gdName }}</el-descriptions-item>
+                            <el-descriptions-item label='变电站'>{{ infoWindowPoint.subName }}</el-descriptions-item>
+                            <el-descriptions-item label='母线'>{{ infoWindowPoint.voltageName }}</el-descriptions-item>
+                            <el-descriptions-item label='网络参数'>
                                 {{ infoWindowPoint.ip }}
                             </el-descriptions-item>
-                            <el-descriptions-item label="PT变化">{{ infoWindowPoint.pt2 }}</el-descriptions-item>
-                            <el-descriptions-item label="CT变化">{{ infoWindowPoint.ct2 }}</el-descriptions-item>
-                            <el-descriptions-item label="生产厂家">
+                            <el-descriptions-item label='PT变化'>{{ infoWindowPoint.pt2 }}</el-descriptions-item>
+                            <el-descriptions-item label='CT变化'>{{ infoWindowPoint.ct2 }}</el-descriptions-item>
+                            <el-descriptions-item label='生产厂家'>
                                 {{ infoWindowPoint.manufacturer }}
                             </el-descriptions-item>
-                            <el-descriptions-item label="终端状态">
+                            <el-descriptions-item label='终端状态'>
                                 {{
                                     infoWindowPoint.runFlag == 0
                                         ? '投运'
                                         : infoWindowPoint.runFlag == 1
-                                        ? '热备用'
-                                        : '停运'
+                                            ? '热备用'
+                                            : '停运'
                                 }}
                             </el-descriptions-item>
-                            <el-descriptions-item label="通讯状态">
+                            <el-descriptions-item label='通讯状态'>
                                 {{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
                             </el-descriptions-item>
                             <el-descriptions-item>
-                                <el-button type="primary" size="small">查看监测点</el-button>
-                                <el-button type="primary" size="small" @click="lookEvent">
+                                <el-button type='primary' size='small' @click='lookPoint'>查看监测点</el-button>
+                                <el-button type='primary' size='small' @click='lookEvent'>
                                     未处理事件({{ infoWindowPoint.noDealCount }})
                                 </el-button>
                             </el-descriptions-item>
                         </el-descriptions>
                         <el-descriptions
-                            :title="infoWindowPoint.subName"
-                            :column="1"
-                            v-else-if="infoWindowPoint.subId"
-                            style="padding-top: 10px"
+                            :title='infoWindowPoint.subName'
+                            :column='1'
+                            v-else-if='infoWindowPoint.subId'
+                            style='padding-top: 10px'
                         ></el-descriptions>
                     </bm-info-window>
                 </bm-marker>
             </baidu-map>
         </div>
-        <div style="width: 600px; height: 100%">
-            <Right :params="params" v-if="params.deptIndex"></Right>
+        <div style='width: 600px; height: 100%'>
+            <Right :params='params' v-if='params.deptIndex'></Right>
         </div>
-        <PopupEvent ref="popupEvent"></PopupEvent>
+        <PopupEvent ref='popupEvent'></PopupEvent>
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
 import { ref } from 'vue'
 import { mainHeight } from '@/utils/layout'
@@ -152,6 +152,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 import Right from './right.vue'
 import PopupEvent from './popupEvent.vue'
+import router from '@/router'
 
 defineOptions({
     name: 'Descentsystem/overview'
@@ -295,8 +296,16 @@ const lookEvent = (e: any) => {
         searchEndTime: datePickerRef.value.timeValue[1]
     })
 }
+const lookPoint = () => {
+    router.push({
+        name: 'Descentsystem/monitoringpoint',
+        query: {
+            lineId: infoWindowPoint.value.lineId
+        }
+    })
+}
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .bm-view {
     width: 100%;
     height: 100%;