echarts的resize修改，谐波在线监测点重新布局

src/components/echarts/MyEchart.vue

@@ -15,6 +15,8 @@ const chartRef = ref<HTMLDivElement>()
 const props = defineProps(['options'])
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
+    // 不在视野中的时候不进行resize
+    if(chartRef.value!.offsetHeight == 0) return
     chart.getZr().painter.getViewportRoot().style.display = 'none'
     requestAnimationFrame(() => {
         chart.resize()
@@ -197,13 +199,25 @@ const handlerXAxis = () => {
         }
     }
 }
+let throttle: ReturnType<typeof setTimeout>
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        if (throttle) {
+            clearTimeout(throttle)
+        }
+        throttle = setTimeout(() => {
+            resizeHandler()
+        }, 100)
+    }
+})
 onMounted(() => {
     initChart()
-    window.addEventListener('resize', resizeHandler)
+    resizeObserver.observe(chartRef.value!)
 })
 defineExpose({ initChart })
 onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeHandler)
+    resizeObserver.unobserve(chartRef.value!)
     chart?.dispose()
 })
 watch(

src/components/tree/pms/pointTree.vue

@@ -1,25 +1,25 @@
 <template>
-    <div class='point-tree' style='height: 100%; width: 100%; display: flex; flex-direction: column'>
+    <div class="point-tree">
         <el-select
-            v-model='formData.statisticalType'
+            v-model="formData.statisticalType"
-            placeholder='请选择'
+            placeholder="请选择"
-            style='min-width: unset; padding: 10px 10px 0'
+            style="min-width: unset; padding: 10px 10px 0"
-            @change='loadData'
+            @change="loadData"
         >
             <el-option
-                v-for='item in classificationData'
+                v-for="item in classificationData"
-                :key='item.id'
+                :key="item.id"
-                :label='item.name'
+                :label="item.name"
-                :value='item.id'
+                :value="item.id"
             ></el-option>
         </el-select>
-        <div style='flex: 1; overflow: hidden'>
+        <div style="flex: 1; overflow: hidden">
-            <Tree ref='treRef' :data='tree' style='width: 100%; height: 100%' :canExpand='false'  v-bind='$attrs' />
+            <Tree ref="treRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
         </div>
     </div>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { nextTick, onMounted, ref, useAttrs } from 'vue'
 import Tree from '../index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
@@ -67,7 +67,7 @@ const loadData = () => {
                         item4.icon = 'fa-solid fa-tower-observation'
                         item4.color = config.getColorVal('elementUiPrimary')
                         item4.children.forEach((item5: anyObj) => {
-                            if ((!attrs['current-node-key']) && !nodeKey) {
+                            if (!attrs['current-node-key'] && !nodeKey) {
                                 nodeKey = item5.id
                                 emit('init', item5)
                             }
@@ -96,3 +96,13 @@ const loadData = () => {
 }
 loadData()
 </script>
+<style lang="scss">
+.point-tree {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border: 1px solid var(--el-border-color);
+}
+</style>

src/styles/element.scss

@@ -130,6 +130,13 @@
     }
 }
 
-.el-select{
+.el-select {
     min-width: 220px;
 }
+
+.el-tabs__content {
+    height: calc(100% - 40px);
+    .el-tab-pane{
+        height: 100%;
+    }
+}

src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue

@@ -1,38 +1,53 @@
 <template>
-    <div class='default-main' style='position: relative'>
+    <div class="default-main" style="padding: 10px">
-        <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
+        <splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
-            <el-tab-pane label='导航' name='1' :style='height' lazy>
+            <pane :size="size">
-                <Navigation @changeTab='changeTab' />
+                <PointTree
-            </el-tab-pane>
+                    :default-expand-all="false"
-            <el-tab-pane label='稳态综合评估' name='2' lazy :style='height' v-if='!isReload'>
+                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
+                    :current-node-key="monitoringPoint.state.lineId"
+                    @node-click="handleNodeClick"
+                    @init="handleNodeClick"
+                ></PointTree>
+            </pane>
+            <pane>
+                <div style="position: relative; height: 100%">
+                    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" style="height: 100%">
+                        <el-tab-pane label="稳态综合评估" name="1" lazy v-if="!isReload">
                             <Wentaizonghepinggu />
                         </el-tab-pane>
-            <el-tab-pane label='稳态指标合格率' name='3' lazy :style='height' v-if='!isReload'>
+                        <el-tab-pane label="稳态指标合格率" name="2" lazy v-if="!isReload">
                             <Wentaizhibiaohegelv />
                         </el-tab-pane>
-            <el-tab-pane label='稳态数据分析' name='4' lazy :style='height' v-if='!isReload'>
+                        <el-tab-pane label="稳态数据分析" name="3" lazy v-if="!isReload">
                             <Wentaishujufenxi />
                         </el-tab-pane>
-            <el-tab-pane label='谐波频普' name='5' lazy :style='height' v-if='!isReload'>
+                        <el-tab-pane label="谐波频普" name="4" lazy v-if="!isReload">
                             <Xiebopingpu />
                         </el-tab-pane>
-            <el-tab-pane label='告警数据统计' name='6' lazy :style='height' v-if='!isReload'>
+                        <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload">
                             <Gaojingshujutongji />
                         </el-tab-pane>
-            <el-tab-pane label='监测点运行状态' name='7' lazy :style='height' v-if='!isReload'>
+                        <el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload">
                             <Yunxingzhuangtai />
                         </el-tab-pane>
-            <el-tab-pane label='实时数据' name='8' lazy :style='height' v-if='!isReload'>
+                        <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload">
                             <Shishishuju />
                         </el-tab-pane>
                     </el-tabs>
-        <div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
+                    <div class="monitoring-point">当前位置：{{ monitoringPoint.state.lineName }}</div>
+                </div>
+            </pane>
+        </splitpanes>
     </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
-import { defineOptions, nextTick, ref, watch } from 'vue'
+import { defineOptions, watch, onMounted, ref, nextTick } from 'vue'
+import 'splitpanes/dist/splitpanes.css'
+import { Splitpanes, Pane } from 'splitpanes'
+import PointTree from '@/components/tree/pms/pointTree.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { mainHeight } from '@/utils/layout'
-import Navigation from './navigation/index.vue'
 import Wentaizonghepinggu from './wentaizonghepinggu/index.vue'
 import Wentaizhibiaohegelv from './wentaizhibiaohegelv/index.vue'
 import Wentaishujufenxi from './wentaishujufenxi/index.vue'
@@ -40,18 +55,28 @@ import Xiebopingpu from './xiebopingpu/index.vue'
 import Gaojingshujutongji from './gaojingshujutongji/index.vue'
 import Yunxingzhuangtai from './yunxingzhuangtai/index.vue'
 import Shishishuju from './shishishuju/index.vue'
-
-
 import router from '@/router'
-import { useMonitoringPoint } from '@/stores/monitoringPoint'
 
 defineOptions({
     name: 'harmonic-boot/monitor/online'
 })
-const isReload = ref(false)
+
 const monitoringPoint = useMonitoringPoint()
-const height = mainHeight(82)
+const size = ref(0)
+const isReload = ref(false)
+const height = mainHeight(40)
 const activeName = ref('2')
+onMounted(() => {
+    const dom = document.getElementById('navigation-splitpanes')
+    if (dom) {
+        size.value = Math.round((280 / dom.offsetHeight) * 100)
+    }
+})
+const handleNodeClick = (data: any, node: any) => {
+    if (data.level === 6) {
+        monitoringPoint.setValue('lineId', data.id)
+    }
+}
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {
@@ -62,18 +87,24 @@ watch(
     },
     { immediate: true }
 )
-watch(() => monitoringPoint.state.lineId, () => {
+watch(
+    () => monitoringPoint.state.lineId,
+    () => {
         //  刷新页面
         isReload.value = true
         nextTick(() => {
             isReload.value = false
         })
-})
+    }
+)
 const changeTab = (e: string) => {
     activeName.value = e
 }
 </script>
-<style lang='scss'>
+<style lang="scss">
+.splitpanes.default-theme .splitpanes__pane {
+    background: #eaeef1;
+}
 .monitoring-point {
     position: absolute;
     top: 12px;

src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/index.vue

@@ -1,43 +0,0 @@
-<template>
-    <splitpanes style='height: 100%;' class='default-theme' id='navigation-splitpanes'>
-        <pane :size='size'>
-            <PointTree :default-expand-all='false'
-                       :default-expanded-keys='monitoringPoint.state.lineId?[monitoringPoint.state.lineId]:[]'
-                       :current-node-key='monitoringPoint.state.lineId'
-                       @node-click='handleNodeClick'
-                       @init='handleNodeClick'
-            ></PointTree>
-        </pane>
-        <pane>
-            <Map v-bind='$attrs'></Map>
-        </pane>
-    </splitpanes>
-</template>
-<script setup lang='ts'>
-import { onMounted, ref } from 'vue'
-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 '@/stores/monitoringPoint'
-
-const monitoringPoint = useMonitoringPoint()
-const size = ref(0)
-onMounted(() => {
-    const dom = document.getElementById('navigation-splitpanes')
-    if (dom) {
-        size.value = Math.round(240 / dom.offsetHeight * 100)
-    }
-})
-const handleNodeClick = (data: any, node: any) => {
-    if (data.level === 6) {
-        monitoringPoint.setValue('lineId', data.id)
-    }
-}
-</script>
-<style lang='scss'>
-.splitpanes.default-theme .splitpanes__pane {
-    background: #eaeef1;
-}
-</style>

src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/map.vue

@@ -1,320 +0,0 @@
-<template>
-    <div style='position: relative; height: 100%' v-loading='loading'>
-        <div style='display: none'>
-            <DatePicker ref='datePickerRef'></DatePicker>
-        </div>
-        <div class='iconBox'>
-            <div class='div'>
-                <img src='@/assets/jcd.png' alt='' />
-                <span>变电站</span>
-            </div>
-            <div class='div'>
-                <img src='@/assets/rby.png' alt='' />
-                <span>热备用</span>
-            </div>
-            <div class='div'>
-                <img src='@/assets/ty.png' alt='' />
-                <span>停运</span>
-            </div>
-            <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='' />
-                <span>有暂降</span>
-            </div>
-            <div class='div' style='padding-left: 20px'>
-                <img src='@/assets/txzcwzj.png' alt='' />
-                <span>无暂降</span>
-            </div>
-            <div class='div' style='padding-left: 10px'>
-                <span>通讯异常</span>
-            </div>
-            <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='' />
-                <span>无暂降</span>
-            </div>
-        </div>
-        <baidu-map
-            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'
-            ></bm-map-type>
-            <!--  线-->
-            <bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
-            <!-- 变电站-->
-            <template v-if='zoom > 12'>
-                <bm-marker
-                    :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)'
-                ></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='网络参数'>
-                            {{ 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='生产厂家'>
-                            {{ infoWindowPoint.manufacturer }}
-                        </el-descriptions-item>
-                        <el-descriptions-item label='终端状态'>
-                            {{
-                                infoWindowPoint.runFlag == 0 ? '投运' : infoWindowPoint.runFlag == 1 ? '热备用' : '停运'
-                            }}
-                        </el-descriptions-item>
-                        <el-descriptions-item label='通讯状态'>
-                            {{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <div
-                                class='btn-warp'>
-                                <el-button type='primary' size='small' @click='changeTab("2")'>稳态综合评估</el-button>
-                                <el-button type='primary' size='small' @click='changeTab("3")'>稳态指标合格率
-                                </el-button>
-                                <el-button type='primary' size='small' @click='changeTab("4")'>稳态数据分析</el-button>
-                                <el-button type='primary' size='small' @click='changeTab("5")'>谐波频普</el-button>
-                                <el-button type='primary' size='small' @click='changeTab("6")'>告警数据统计</el-button>
-                                <el-button type='primary' size='small' @click='changeTab("7")'>监测点运行状态
-                                </el-button>
-                                <el-button type='primary' size='small' @click='changeTab("8")'>实时数据</el-button>
-                            </div>
-                        </el-descriptions-item>
-                    </el-descriptions>
-                    <el-descriptions
-                        :title='infoWindowPoint.subName'
-                        :column='1'
-                        v-else-if='infoWindowPoint.subId'
-                        style='padding-top: 10px'
-                    ></el-descriptions>
-                </bm-info-window>
-            </bm-marker>
-        </baidu-map>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
-import { nextTick, ref, watch } from 'vue'
-import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
-import DatePicker from '@/components/form/datePicker/index.vue'
-import { useAdminInfo } from '@/stores/adminInfo'
-import { useMonitoringPoint } from '@/stores/monitoringPoint'
-
-const emit = defineEmits(['changeTab'])
-const monitoringPoint = useMonitoringPoint()
-const adminInfo = useAdminInfo()
-const datePickerRef = ref()
-const zoom = ref(11)
-const loading = ref(true)
-const params = ref({
-    deptIndex: '',
-    monitorFlag: 2,
-    powerFlag: 2,
-    searchBeginTime: '',
-    searchEndTime: '',
-    serverName: 'event-boot',
-    statisticalType: {}
-})
-const center = ref({
-    lng: 0,
-    lat: 0
-})
-const infoWindowPoint = ref<anyObj>({
-    lng: 0,
-    lat: 0,
-    show: false
-})
-const areaLineInfo = ref<any>([])
-const siteList = ref<any>([])
-const polyline = ref<any>([])
-const lineId = ref('')
-const handler = async ({ BMap, map }: any) => {
-    params.value.deptIndex = adminInfo.$state.deptId
-    params.value.searchBeginTime = datePickerRef.value.timeValue[0]
-    params.value.searchEndTime = datePickerRef.value.timeValue[1]
-    let { data } = await getAreaLineInfo(params.value)
-    let r = 0.0035
-    data.forEach((item: any) => {
-        // 变电站图标
-        item.icon = {
-            url: new URL('@/assets/jcd.png', import.meta.url).href,
-            size: {
-                width: 40,
-                height: 40
-            }
-        }
-        if (item.children.length > 10 && item.children.length < 100) {
-            r = 0.0055
-        } else if (item.children.length >= 100) {
-            r = 0.01055
-        }
-        item.children.forEach((val: any, i: number) => {
-            val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
-            val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
-            // 监测点图标
-            val.icon = {
-                url: '',
-                size: {
-                    width: 40,
-                    height: 40
-                }
-            }
-            switch (val.runFlag) {
-                case 0:
-                    // 投运
-                    if (val.comFlag == 0) {
-                        // 异常
-                        if (val.noDealCount > 0) {
-                            // 异常有暂降
-                            val.icon.url = new URL('@/assets/txycyzj.gif', import.meta.url).href
-                        } else if (val.noDealCount == 0) {
-                            // 异常无暂降
-                            val.icon.url = new URL('@/assets/txzdwzj.png', import.meta.url).href
-                        }
-                    } else if (val.comFlag == 1) {
-                        // 正常
-                        if (val.noDealCount > 0) {
-                            // 正常有暂降
-                            val.icon.url = new URL('@/assets/txzcyzj.gif', import.meta.url).href
-                        } else if (val.noDealCount == 0) {
-                            // 正常无暂降
-                            val.icon.url = new URL('@/assets/txzcwzj.png', import.meta.url).href
-                        }
-                    }
-                    break
-                case 1:
-                    val.icon.url = new URL('@/assets/rby.png', import.meta.url).href
-                    break
-                case 2:
-                    val.icon.url = new URL('@/assets/ty.png', import.meta.url).href
-                    break
-                default:
-                    break
-            }
-            polyline.value.push([
-                {
-                    lng: item.lng,
-                    lat: item.lat
-                },
-                {
-                    lng: val.lng,
-                    lat: val.lat
-                }
-            ])
-        })
-
-        areaLineInfo.value.push(...item.children)
-    })
-    siteList.value = data
-    watch(
-        () => monitoringPoint.state.lineId,
-        (newLineId, oldLineId) => {
-            let value = areaLineInfo.value.find((item: any) => item.lineId == newLineId)
-            center.value.lng = value.lng
-            center.value.lat = value.lat
-            infoWindowPoint.value = value
-            infoWindowPoint.value.show = true
-            monitoringPoint.setValue('lineName', value.manufacturer + '>' + value.gdName + '>' + value.subName + '>' + value.lineName)
-        },
-        { immediate: true }
-    )
-    zoom.value = 15
-    setTimeout(() => {
-        loading.value = false
-    }, 1500)
-}
-
-const syncCenterAndZoom = (e: any) => {
-    zoom.value = e.target.getZoom()
-}
-const markerClick = (e: any) => {
-    infoWindowPoint.value = e
-    infoWindowPoint.value.show = true
-}
-const changeTab = (e: string) => {
-    emit('changeTab', e)
-}
-</script>
-<style lang='scss'>
-.bm-view {
-    width: 100%;
-    height: 100%;
-
-    .btn-warp {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-gap: 10px;
-
-        .el-button {
-            margin-left: 0;
-            margin-right: 0;
-            width: 100%;
-        }
-    }
-}
-
-.selectBox {
-    position: absolute;
-    top: 16px;
-    left: 165px;
-    z-index: 2000;
-    width: 240px;
-}
-
-.iconBox {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    z-index: 2000;
-    width: 150px;
-    height: 260px;
-    padding: 10px;
-    background: rgba(255, 255, 255, 0.75) !important;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-    font-size: 12px;
-
-    .div {
-        display: flex;
-        margin-bottom: 5px;
-
-        img {
-            height: 20px;
-            margin-right: 5px;
-        }
-    }
-}
-</style>

src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue

@@ -4,7 +4,7 @@
             <el-form-item label="日期">
                 <DatePicker ref="datePickerRef"></DatePicker>
             </el-form-item>
-            <el-form-item label="类型">
+            <el-form-item label="对比">
                 <el-select v-model="searchType" clearable placeholder="可选择同比、环比">
                     <el-option
                         v-for="item in searchTypeOptions"
@@ -231,6 +231,7 @@ const init = () => {
                 }
             },
             xAxis: {
+                name:'指标类型',
                 type: 'category',
                 axisLine: {
                     lineStyle: {

src/views/pqs/voltageSags/monitoringPoint/online/index.vue

@@ -1,23 +1,23 @@
 <template>
-    <div class='default-main' style='position: relative'>
+    <div class="default-main" style="position: relative">
-        <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
+        <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
-            <el-tab-pane label='导航' name='1' :style='height' lazy>
+            <el-tab-pane label="导航" name="1" :style="height" lazy>
-                <Navigation @changeTab='changeTab' />
+                <Navigation @changeTab="changeTab" />
             </el-tab-pane>
-            <el-tab-pane label='事件统计' name='2' lazy v-if='!isReload'>
+            <el-tab-pane label="事件统计" name="2" lazy v-if="!isReload">
                 <EventStatistics />
             </el-tab-pane>
-            <el-tab-pane label='事件分析' name='3' lazy v-if='!isReload'>
+            <el-tab-pane label="事件分析" name="3" lazy v-if="!isReload">
                 <EventStudy />
             </el-tab-pane>
-            <el-tab-pane label='运行情况' name='4' lazy :style='height' v-if='!isReload'>
+            <el-tab-pane label="运行情况" name="4" lazy :style="height" v-if="!isReload">
                 <RunningCondition />
             </el-tab-pane>
         </el-tabs>
-        <div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
+        <div class="monitoring-point">当前位置：{{ monitoringPoint.state.lineName }}</div>
     </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import { defineOptions, nextTick, ref, watch } from 'vue'
 import Navigation from './navigation/index.vue'
 import EventStatistics from './eventStatistics/index.vue'
@@ -44,18 +44,21 @@ watch(
     },
     { immediate: true }
 )
-watch(() => monitoringPoint.state.lineId, () => {
+watch(
+    () => monitoringPoint.state.lineId,
+    () => {
         //  刷新页面
         isReload.value = true
         nextTick(() => {
             isReload.value = false
         })
-})
+    }
+)
 const changeTab = (e: string) => {
     activeName.value = e
 }
 </script>
-<style lang='scss'>
+<style lang="scss">
 .monitoring-point {
     position: absolute;
     top: 12px;

src/views/pqs/voltageSags/monitoringPoint/online/navigation/index.vue

@@ -27,7 +27,7 @@ const size = ref(0)
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
     if (dom) {
-        size.value = Math.round(240 / dom.offsetHeight * 100)
+        size.value = Math.round(280 / dom.offsetHeight * 100)
     }
 })
 const handleNodeClick = (data: any, node: any) => {