在线监测点修改

src/api/event-boot/monitor.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+//ITIC SEMI 获取数据
+export function getPlot(data: any) {
+    return request({
+        url: '/event-boot/monitor/getPlot',
+        method: 'post',
+        data
+    })
+}

src/components/echarts/MyEchart.vue

@@ -1,8 +1,8 @@
 <template>
-    <div ref="chartRef" class="my-chart" />
+    <div ref='chartRef' class='my-chart' />
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
@@ -71,7 +71,7 @@ const initChart = () => {
             top: '50px',
             left: '10px',
             right: '60px',
-            bottom: '40px',
+            bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
             containLabel: true
         },
         xAxis: handlerXAxis(),
@@ -172,8 +172,8 @@ const handlerXAxis = () => {
     if (Array.isArray(props.options.xAxis)) {
         return props.options.xAxis.map((item: any) => {
             return {
-                ...item,
-                ...temp
+                ...temp,
+                ...item
             }
         })
     } else {
@@ -200,7 +200,7 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .my-chart {
     height: 100%;
     width: 100%;

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>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue

@@ -1,10 +1,345 @@
 <template>
-    <div class='default-main'>
-
+    <div style='display: flex;flex-direction: column;height: 100%'>
+        <el-form :inline='true'>
+            <el-form-item label='时间间隔'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <el-descriptions
+            class='mt2'
+            direction='vertical'
+            :column='4'
+            border
+        >
+            <el-descriptions-item align='center' label='名称'>{{ data.name }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='事件总数'>{{ data.gs }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='可容忍'>{{ data.krr }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='不可容忍'> {{ data.bkrr }}</el-descriptions-item>
+        </el-descriptions>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getPlot } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const data = reactive({
+    name: '事件个数',
+    gs: 0,
+    krr: 0,
+    bkrr: 0
+})
+const options = ref({})
+
+const init = () => {
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    getPlot(formData).then(
+        (res: any) => {
+            const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
+            data.gs = res.data.voltageToleranceCurveDataList.length
+            data.krr = gongData.pointI.length
+            data.bkrr = gongData.pointIun.length
+            console.log(gongData)
+            options.value = {
+                // backgroundColor: "#f9f9f9", //地图背景色深蓝
+                title: {
+                    text: `ITIC曲线(总统计:${gongData.pointI.length + gongData.pointIun.length}个,可容忍:${gongData.pointI.length}个,不可容忍:${gongData.pointIun.length}个)`
+                },
+                legend: {
+                    data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
+                    x: 'left'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    show: true,
+                    axisPointer: {
+                        type: 'shadow',
+                        label: {
+                            color: '#fff',
+                            fontSize: 16
+                        }
+                    },
+                    textStyle: {
+                        color: '#fff',
+                        fontStyle: 'normal',
+                        opacity: 0.35,
+                        fontSize: 14
+                    },
+                    backgroundColor: 'rgba(0,0,0,0.35)',
+                    borderWidth: 0,
+                    formatter: function(a:any) {
+                        var relVal = ''
+                        relVal =
+                            '<font style=\'color:' +
+                            '\'>发生时间:' +
+                            a.value[2] +
+                            '</font><br/>'
+                        relVal +=
+                            '<font style=\'color:' +
+                            '\'>持续时间:' +
+                            a.value[0] +
+                            's</font><br/>'
+                        relVal +=
+                            '<font style=\'color:' +
+                            '\'>特征幅值:' +
+                            a.value[1].toFixed(2) +
+                            '%</font>'
+                        return relVal
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'log',
+                        min: 0.001,
+                        max: 1000,
+                        splitLine: {
+                            show: false
+                        },
+                        name: 's'
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        splitNumber: 10,
+                        minInterval: 3,
+                        name: '%',
+                    }
+                ],
+                options: {
+                    dataZoom:null,
+                    series: [
+                        {
+                            name: '上限',
+                            type: 'line',
+                            data: [
+                                [0.001, 200],
+                                [0.003, 140],
+                                [0.003, 120],
+                                [0.5, 120],
+                                [0.5, 110],
+                                [10, 110],
+                                [1000, 110]
+                            ],
+                            showSymbol: false,
+                            tooltips: {
+                                show: false
+                            }
+                        },
+                        {
+                            name: '下限',
+                            type: 'line',
+                            data: [
+                                [0.02, 0],
+                                [0.02, 70],
+                                [0.5, 70],
+                                [0.5, 80],
+                                [10, 80],
+                                [10, 90],
+                                [1000, 90]
+                            ],
+                            showSymbol: false,
+                            tooltips: {
+                                show: false
+                            }
+                        },
+                        {
+                            name: '可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointI
+                        },
+                        {
+                            name: '不可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointIun
+                        }
+                    ]
+                }
+            }
+        }
+    )
+}
+
+function gongfunction(arr: any) {
+    let standI = 0
+    let unstandI = 0
+    let standF = 0
+    let unstandF = 0
+    let total = 0
+    let pointIun = []
+    let pointI = []
+    let pointF = []
+    let pointFun = []
+    total = arr.length
+    if (total == 0) {
+    } else {
+        for (let i = 0; i < arr.length; i++) {
+            let point = []
+            let xx = arr[i].persistTime
+            let yy = arr[i].eventValue
+            let time = arr[i].time
+            let eventId = arr[i].eventId
+            // let index =arr[i].eventDetailIndex;
+            point = [xx, yy, time, eventId]
+
+            if (xx <= 0.003) {
+                let line = 0
+                line = 250 - 30000 * xx
+                if (yy > line) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.02) {
+                if (yy > 120) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.5) {
+                if (yy > 120 || yy < 70) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 10) {
+                if (yy > 110 || yy < 80) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else {
+                if (yy > 110 || yy < 90) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            }
+
+            if (xx < 0.05) {
+                standF++
+                pointF.push({
+                    value: point,
+                    itemStyle: { normal: { color: 'green' } }
+                })
+            } else if (xx < 0.2) {
+                if (yy > 50) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else if (xx < 0.5) {
+                if (yy > 70) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else {
+                if (yy > 80) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            }
+        }
+    }
+    return {
+        standI,
+        unstandI,
+        pointI,
+        pointIun,
+        standF,
+        unstandF,
+        pointF,
+        pointFun
+    }
+}
+
+onMounted(() => {
+    init()
+})
 
 </script>
 <style></style>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue

@@ -1,20 +1,49 @@
 <template>
-    <div class='default-main'>
-        <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
-            <el-tab-pane label='导航' name='1'>
-            </el-tab-pane>
-            <el-tab-pane label='事件统计' name='2'>
-            </el-tab-pane>
-            <el-tab-pane label='事件分析' name='3'>
-            </el-tab-pane>
-            <el-tab-pane label='运行情况' name='4'>
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+    <el-tabs v-model='activeName' type='border-card' class='event-statistics' tab-position='left' :style='height'>
+        <el-tab-pane label='ITIC曲线分析' name='1' >
+            <ITICquxianfenxi />
+        </el-tab-pane>
+        <el-tab-pane label='SEMI F47 分析' name='2' >
+            <SEMIF47fenxi />
+        </el-tab-pane>
+        <el-tab-pane label='电压暂降表及密度' name='3' >
+            <Dianyazanjiangbiaojimidu />
+        </el-tab-pane>
+        <el-tab-pane label='暂降分布统计' name='4' >
+            <Zanjiangfenbutongji />
+        </el-tab-pane>
+        <el-tab-pane label='暂降幅值概率分布' name='5' >
+            <Zanjiangfuzhigailvfenbu />
+        </el-tab-pane>
+        <el-tab-pane label='持续时间概率分布' name='6' >
+            <Chixushijiangailvfenbu />
+        </el-tab-pane>
+    </el-tabs>
 </template>
 <script setup lang='ts'>
 import { ref } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import ITICquxianfenxi from './ITICquxianfenxi/index.vue'
+import SEMIF47fenxi from './SEMIF47fenxi/index.vue'
+import Dianyazanjiangbiaojimidu from './dianyazanjiangbiaojimidu/index.vue'
+import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
+import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
+import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
 
 const activeName = ref('1')
+const height = mainHeight(84)
+
 </script>
-<style></style>
+<style lang='scss'>
+.event-statistics {
+    .el-tabs__header.is-left{
+        margin-right: 0;
+    }
+    .el-tabs__content{
+        height: 100%;
+        .el-tab-pane{
+            height: 100%;
+        }
+    }
+}
+</style>

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

@@ -1,19 +1,20 @@
 <template>
-    <div class='default-main'>
+    <div class='default-main' style='position: relative'>
         <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
             <el-tab-pane label='导航' name='1' :style='height'>
-                <Navigation />
+                <Navigation @changeTab='changeTab' />
             </el-tab-pane>
-            <el-tab-pane label='事件统计' name='2'>
+            <el-tab-pane label='事件统计' name='2' >
                 <EventStatistics />
             </el-tab-pane>
-            <el-tab-pane label='事件分析' name='3'>
+            <el-tab-pane label='事件分析' name='3' >
                 <EventStudy />
             </el-tab-pane>
-            <el-tab-pane label='运行情况' name='4'>
+            <el-tab-pane label='运行情况' name='4' >
                 <RunningCondition />
             </el-tab-pane>
         </el-tabs>
+        <div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
     </div>
 </template>
 <script setup lang='ts'>
@@ -31,14 +32,28 @@ defineOptions({
 })
 const monitoringPoint = useMonitoringPoint()
 const height = mainHeight(82)
-const activeName = ref('1')
+const activeName = ref('2')
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {
+        if (!newLineId) return
         // 在这里处理 lineId 的变化
-        monitoringPoint.setValue('lineId', newLineId)
+        monitoringPoint.setValue('lineId', router.currentRoute.value.query.lineId)
+        monitoringPoint.setValue('lineName', router.currentRoute.value.query.lineName)
     },
     { immediate: true }
 )
+const changeTab = (e: string) => {
+    activeName.value = e
+}
 </script>
-<style></style>
+<style lang='scss'>
+.monitoring-point {
+    position: absolute;
+    top: 12px;
+    right: 10px;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--el-color-primary);
+}
+</style>

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

@@ -1,16 +1,20 @@
 <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]'
-                       :current-node-key='monitoringPoint.state.lineId'></PointTree>
+            <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></Map>
+            <Map v-bind='$attrs'></Map>
         </pane>
     </splitpanes>
 </template>
 <script setup lang='ts'>
-import { defineOptions, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import 'splitpanes/dist/splitpanes.css'
 import { Splitpanes, Pane } from 'splitpanes'
 import PointTree from '@/components/tree/pms/pointTree.vue'
@@ -23,9 +27,14 @@ const size = ref(0)
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
     if (dom) {
-        size.value = parseInt(240 / dom.offsetHeight * 100)
+        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 {

src/views/pms/voltageSags/monitoringPoint/online/navigation/map.vue

@@ -91,21 +91,16 @@
                         </el-descriptions-item>
                         <el-descriptions-item label='终端状态'>
                             {{
-                                infoWindowPoint.runFlag == 0
-                                    ? '投运'
-                                    : infoWindowPoint.runFlag == 1
-                                        ? '热备用'
-                                        : '停运'
+                                infoWindowPoint.runFlag == 0 ? '投运' : infoWindowPoint.runFlag == 1 ? '热备用' : '停运'
                             }}
                         </el-descriptions-item>
                         <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'>
-                                未处理事件({{ infoWindowPoint.noDealCount }})
-                            </el-button>
+                            <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-descriptions-item>
                     </el-descriptions>
                     <el-descriptions
@@ -122,17 +117,18 @@
 
 <script setup lang='ts'>
 import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
-import { ref } from 'vue'
+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 '@/views/pms/voltageSags/monitoringPoint/online/store'
 
-
+const emit = defineEmits(['changeTab'])
+const monitoringPoint = useMonitoringPoint()
 const adminInfo = useAdminInfo()
 const datePickerRef = ref()
 const zoom = ref(11)
 const loading = ref(true)
-const popupEvent = ref()
 const params = ref({
     deptIndex: '',
     monitorFlag: 2,
@@ -233,10 +229,18 @@ const handler = async ({ BMap, map }: any) => {
         areaLineInfo.value.push(...item.children)
     })
     siteList.value = data
-    center.value.lng = areaLineInfo.value[0].lng
-    center.value.lat = areaLineInfo.value[0].lat
-    infoWindowPoint.value = areaLineInfo.value[0]
-    infoWindowPoint.value.show = true
+    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
@@ -250,12 +254,8 @@ const markerClick = (e: any) => {
     infoWindowPoint.value = e
     infoWindowPoint.value.show = true
 }
-const lookEvent = (e: any) => {
-    popupEvent.value.open({
-        id: infoWindowPoint.value.lineId,
-        searchBeginTime: datePickerRef.value.timeValue[0],
-        searchEndTime: datePickerRef.value.timeValue[1]
-    })
+const changeTab = (e: string) => {
+    emit('changeTab', e)
 }
 </script>
 <style lang='scss' scoped>

src/views/pms/voltageSags/monitoringPoint/online/store.ts

@@ -3,17 +3,22 @@ import { defineStore } from 'pinia'
 
 interface MonitoringPoint {
     lineId: string
+    lineName: string
 }
 
 export const useMonitoringPoint = defineStore(
     'monitoringPoint',
     () => {
         const state: MonitoringPoint = reactive({
-            lineId: ''
+            lineId: '',
+            lineName: '',
         })
         const setValue = (key: keyof MonitoringPoint, val: any) => {
             state[key] = val
         }
         return { state, setValue }
+    },
+    {
+        persist: true
     }
 )

src/views/pms/voltageSags/overview/index.vue

@@ -297,10 +297,13 @@ const lookEvent = (e: any) => {
     })
 }
 const lookPoint = () => {
-    router.push({
+    console.log(infoWindowPoint.value)
+    router.replace({
         name: 'Descentsystem/monitoringpoint',
         query: {
-            lineId: infoWindowPoint.value.lineId
+            lineId: infoWindowPoint.value.lineId,
+            lineName: infoWindowPoint.value.manufacturer + '>' + infoWindowPoint.value.gdName + '>' + infoWindowPoint.value.subName + '>' + infoWindowPoint.value.lineName
+
         }
     })
 }