From e488943bbd3af738c5a356df7e5b0f57f51f2920 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: Wed, 28 Feb 2024 14:19:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=90=E6=B3=A2=E7=9B=91=E6=B5=8B=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store.ts => stores/monitoringPoint.ts}    |   0
 .../eventStatistics/ITICquxianfenxi/index.vue | 352 ++++++++++++++++++
 .../eventStatistics/SEMIF47fenxi/index.vue    | 338 +++++++++++++++++
 .../chixushijiangailvfenbu/index.vue          | 173 +++++++++
 .../dianyazanjiangbiaojimidu/index.vue        | 299 +++++++++++++++
 .../online/eventStatistics/index.vue          |  51 +++
 .../zanjiangfenbutongji/index.vue             | 325 ++++++++++++++++
 .../zanjiangfuzhigailvfenbu/index.vue         | 185 +++++++++
 .../online/eventStudy/index.vue               | 122 ++++++
 .../monitoringPoint/online/index.vue          |  72 ++++
 .../online/navigation/index.vue               |  43 +++
 .../monitoringPoint/online/navigation/map.vue | 320 ++++++++++++++++
 .../online/runningCondition/index.vue         | 329 ++++++++++++++++
 .../eventStatistics/ITICquxianfenxi/index.vue |   2 +-
 .../eventStatistics/SEMIF47fenxi/index.vue    |   2 +-
 .../chixushijiangailvfenbu/index.vue          |   2 +-
 .../dianyazanjiangbiaojimidu/index.vue        |   2 +-
 .../zanjiangfenbutongji/index.vue             |   2 +-
 .../zanjiangfuzhigailvfenbu/index.vue         |   2 +-
 .../online/eventStudy/index.vue               |   2 +-
 .../monitoringPoint/online/index.vue          |   2 +-
 .../online/navigation/index.vue               |   2 +-
 .../monitoringPoint/online/navigation/map.vue |   2 +-
 .../online/runningCondition/index.vue         |   2 +-
 24 files changed, 2620 insertions(+), 11 deletions(-)
 rename src/{views/pqs/voltageSags/monitoringPoint/online/store.ts => stores/monitoringPoint.ts} (100%)
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStudy/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/map.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/monitoringPoint/online/runningCondition/index.vue

diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/store.ts b/src/stores/monitoringPoint.ts
similarity index 100%
rename from src/views/pqs/voltageSags/monitoringPoint/online/store.ts
rename to src/stores/monitoringPoint.ts
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
new file mode 100644
index 00000000..b63720c4
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
@@ -0,0 +1,352 @@
+<template>
+    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
+        <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 { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { getPlot } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const loading = ref(true)
+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 = () => {
+    loading.value = true
+    formData.lineIndex = monitoringPoint.state.lineId
+    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}个)`
+                    text: `ITIC曲线`
+                },
+                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
+                        }
+                    ]
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+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>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
new file mode 100644
index 00000000..1e0206c6
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
@@ -0,0 +1,338 @@
+<template>
+    <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 { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { getPlot } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const data = reactive({
+    name: '事件个数',
+    gs: 0,
+    krr: 0,
+    bkrr: 0
+})
+const options = ref({})
+
+const init = () => {
+    loading.value = true
+    formData.lineIndex = monitoringPoint.state.lineId
+    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: `SEMI F47曲线`
+                },
+                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',
+                        max: function(value: any) {
+                            return value.max + 20
+                        },
+                        splitNumber: 10,
+                        minInterval: 0.1,
+                        name: '%'
+                    }
+                ],
+                options: {
+                    dataZoom: null,
+                    series: [
+                        {
+                            name: '边界线',
+                            type: 'line',
+                            data: [
+                                [0.05, 0],
+                                [0.05, 50],
+                                [0.2, 50],
+                                [0.2, 70],
+                                [0.5, 70],
+                                [0.5, 80],
+                                [10, 80],
+                                [1000, 80]
+                            ],
+                            showSymbol: false,
+                            tooltips: {
+                                show: false
+                            }
+                        },
+                        {
+                            name: '可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointI
+                        },
+                        {
+                            name: '不可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointIun
+                        }
+                    ]
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+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>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
new file mode 100644
index 00000000..8c85bb77
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
@@ -0,0 +1,173 @@
+<template>
+    <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>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
+    </div>
+</template>
+<script setup lang='ts'>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { getProbabilityDistribution } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const options = ref({})
+
+const init = () => {
+    loading.value = true
+    formData.lineIndex = monitoringPoint.state.lineId
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    getProbabilityDistribution(formData).then(
+        (res: any) => {
+            let data = res.data
+            let sisttime = data.sisttime
+            let persisttime = data.persisttime
+            options.value = {
+                backgroundColor: '#fff', //背景色,
+                title: {
+                    text: '持续时间的概率分布函数',
+                    x: 'center'
+                },
+                legend: {
+                    show: true,
+                    left: 10,
+                    data: ['概率分布', '占比'],
+
+                    textStyle: {
+                        rich: {
+                            a: {
+                                verticalAlign: 'middle'
+                            }
+                        },
+
+                        padding: [2, 0, 0, 0] //[上、右、下、左]
+                    }
+                },
+
+                tooltip: {
+                    //提示框组件
+                    trigger: 'axis',
+
+                    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
+                },
+                calculable: true,
+                xAxis: [
+                    {
+                        type: 'category',
+                        name: '暂降幅值',
+                        nameGap: 10,
+                        nameTextStyle: {
+                            fontSize: 12
+                        },
+                        data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '概率分布',
+                        nameTextStyle: {
+                            fontSize: 15
+                        },
+                        axisLabel: {
+                            formatter: '{value}%'
+                        },
+                        axisLine: {
+                            show: true
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                type: 'dashed',
+                                opacity: 0.5
+                            }
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '占比',
+
+                        nameTextStyle: {
+                            fontSize: 15
+                        },
+                        axisLine: {
+                            show: true
+                        },
+
+                        splitLine: {
+                            lineStyle: {
+                                type: 'dashed',
+                                opacity: 0.5
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '概率分布',
+                        type: 'line',
+                        data: sisttime,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
+                    },
+                    {
+                        name: '占比',
+                        type: 'bar',
+                        data: persisttime,
+                        barWidth: 30,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
+                    }
+                ],
+                options: {
+                    dataZoom: null
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+
+onMounted(() => {
+    init()
+})
+
+</script>
+<style></style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
new file mode 100644
index 00000000..eced34e6
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
@@ -0,0 +1,299 @@
+<template>
+    <div v-loading='loading' class='dianyazanjiangbaojimidu'>
+        <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>
+        <div class='mt10 dianyazanjiang'>
+            <div class='first'>
+                <div class='mb10'>DISDIP表格(国际发配电联盟UNIPEDE)</div>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='firstData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
+                        <vxe-colgroup title='持续事件'>
+                            <vxe-column field='twentyMs' title='20ms'></vxe-column>
+                            <vxe-column field='oneHundredMs' title='100ms'></vxe-column>
+                            <vxe-column field='fiveHundredMs' title='500ms'></vxe-column>
+                            <vxe-column field='oneS' title='1s'></vxe-column>
+                            <vxe-column field='threeS' title='2s'></vxe-column>
+                            <vxe-column field='twentyS' title='20s'></vxe-column>
+                            <vxe-column field='sixtyS' title='60s'></vxe-column>
+                            <vxe-column field='oneEightyS' title='180s'></vxe-column>
+                        </vxe-colgroup>
+                    </vxe-table>
+                </div>
+            </div>
+            <div class='second'>
+                <div class='mb10'>EC61000-4-11(用电终端的电压暂降抗度)</div>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='secondData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
+                        <vxe-colgroup title='持续事件'>
+                            <vxe-column field='tenTwentyMs' title='10-20ms'></vxe-column>
+                            <vxe-column field='twentyOneHundredMs' title='20-100ms'></vxe-column>
+                            <vxe-column field='zeroPiontOneTwoS' title='0.1-0.2s'></vxe-column>
+                            <vxe-column field='zeroPiontFive1S' title='0.2-0.5s'></vxe-column>
+                            <vxe-column field='zeroPiontTwoFiveS' title='0.5-1s'></vxe-column>
+                            <vxe-column field='role' title='>1s'></vxe-column>
+                        </vxe-colgroup>
+                    </vxe-table>
+                </div>
+            </div>
+            <div class='third'>
+                <div class='mb10'>IEC61000-2-8(公共用电暂降测量统计)</div>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='120px'></vxe-colgroup>
+                        <vxe-colgroup title='持续事件'>
+                            <vxe-column field='q' title='0.01-0.1s' align='center'></vxe-column>
+                            <vxe-column field='w' title='0.1-0.25s' align='center'></vxe-column>
+                            <vxe-column field='e' title='0.25-0.5s' align='center'></vxe-column>
+                            <vxe-column field='r' title='0.5-1s' align='center'></vxe-column>
+                            <vxe-column field='t' title='1-3s' align='center'></vxe-column>
+                            <vxe-column field='y' title='3-20s' align='center'></vxe-column>
+                            <vxe-column field='u' title='20-60s' align='center'></vxe-column>
+                            <vxe-column field='i' title='60-180s' align='center'></vxe-column>
+                        </vxe-colgroup>
+                    </vxe-table>
+                </div>
+            </div>
+            <div class='charts' id='charts'>
+                <MyEchart :options='options' />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang='ts'>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { eventDisdip, getCoords, IEC28, IEC411 } from '@/api/event-boot/monitor'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const options = ref({})
+const firstData = ref([])
+const secondData = ref([])
+const thirdData = ref([])
+const chartsData = ref([])
+
+const init = () => {
+    formData.lineIndex = monitoringPoint.state.lineId
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    loading.value = true
+    Promise.all([eventDisdip(formData), IEC411(formData), IEC28(formData), getCoords(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data
+        thirdData.value = res[2].data
+        chartsData.value = res[3].data
+        options.value = {
+            options: {
+                xAxis: null,
+                yAxis: null,
+                dataZoom: null,
+                backgroundColor: '#fff',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                title: {
+                    text: '暂降密度图',
+                    x: 'center'
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        // dataView: { show: true },
+                        // dataZoom: { show: true },
+                        //restore: { show: true },
+                        // saveAsImage: { show: true },
+                        myFull: {
+                            show: true,
+                            title: '全屏查看',
+                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
+                            onclick: () => {
+                                let element = document.getElementById('charts') as HTMLElement
+                                // 全屏，如果已经全屏，则退出全屏
+                                if (document.fullscreenElement) {
+                                    if (document.exitFullscreen) {
+                                        document.exitFullscreen()
+                                    }
+                                } else {
+                                    if (element.requestFullscreen) {
+                                        element.requestFullscreen()
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                visualMap: {
+                    max: 20,
+                    show: false,
+                    inRange: {
+                        color: ['#313695', '#00BB00', '#ff8000', '#a50026']
+                    }
+                },
+                xAxis3D: {
+                    type: 'category',
+                    name: '剩余电压(%)',
+                    data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#111'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#111'
+                    }
+                },
+                yAxis3D: {
+                    type: 'category',
+                    name: '持续时间(cyc)',
+                    data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
+                    nameTextStyle: {
+                        color: '#111'
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#111'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#111'
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            // 使用深浅的间隔色
+                            color: ['#111'],
+                            type: 'dashed',
+                            opacity: 0.5
+                        }
+                    }
+                },
+                zAxis3D: {
+                    type: 'value',
+                    splitNumber: 10,
+                    minInterval: 10,
+                    name: '次数'
+                },
+                grid3D: {
+                    viewControl: {
+                        projection: 'perspective',
+                        distance: 250
+                    },
+                    boxWidth: 200,
+                    boxDepth: 80,
+                    light: {
+                        main: {
+                            intensity: 1.2
+                        },
+                        ambient: {
+                            intensity: 0.3
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar3D',
+                        data: chartsData.value.map(function(item: any) {
+                            return {
+                                value: [item['x'], item['y'], item['z']]
+                            }
+                        }),
+                        shading: 'realistic',
+                        label: {
+                            show: false,
+                            textStyle: {
+                                fontSize: 16,
+                                borderWidth: 1
+                            }
+                        },
+
+                        itemStyle: {
+                            opacity: 1
+                        },
+                        emphasis: {
+                            label: {
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: '#900'
+                                }
+                            },
+                            itemStyle: {
+                                color: '#900'
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+        loading.value = false
+    })
+}
+onMounted(() => {
+    init()
+})
+</script>
+<style lang='scss'>
+.dianyazanjiangbaojimidu {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: scroll;
+
+    .dianyazanjiang {
+        flex: 1;
+        min-width: 1200px;
+        min-height: 800px;
+        display: grid;
+        grid-template-areas:
+        'first charts'
+        'second charts'
+        'third third '
+        'third third ';
+        grid-template-rows: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 10px;
+
+        .first {
+            grid-area: first;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .second {
+            grid-area: second;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .third {
+            grid-area: third;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .charts {
+            grid-area: charts;
+            overflow: hidden;
+        }
+    }
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/index.vue
new file mode 100644
index 00000000..70f2e1d2
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <el-tabs v-model='activeName' type='border-card' class='event-statistics' tab-position='left' :style='height'>
+        <el-tab-pane lazy label='ITIC曲线分析' name='1'>
+            <ITICquxianfenxi />
+        </el-tab-pane>
+        <el-tab-pane lazy label='SEMI F47 分析' name='2'>
+            <SEMIF47fenxi />
+        </el-tab-pane>
+        <el-tab-pane lazy label='电压暂降表及密度' name='3'>
+            <Dianyazanjiangbiaojimidu />
+        </el-tab-pane>
+        <el-tab-pane lazy label='暂降分布统计' name='4'>
+            <Zanjiangfenbutongji />
+        </el-tab-pane>
+        <el-tab-pane lazy label='暂降幅值概率分布' name='5'>
+            <Zanjiangfuzhigailvfenbu />
+        </el-tab-pane>
+        <el-tab-pane lazy 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 lang='scss'>
+.event-statistics {
+    .el-tabs__header.is-left {
+        margin-right: 0;
+    }
+
+    .el-tabs__content {
+        height: 100%;
+
+        .el-tab-pane {
+            height: 100%;
+        }
+    }
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
new file mode 100644
index 00000000..65a74237
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
@@ -0,0 +1,325 @@
+<template>
+    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
+        <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>
+        <div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
+            <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
+            <div style='width: 712px;height: 100%;display: flex;flex-direction: column'>
+                <my-echart :options='secondOptions' style='flex: 1' />
+                <my-echart :options='thirdOptions' style='flex: 1' />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang='ts'>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
+import { color } from '@/components/echarts/color'
+
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: '',
+    flag: 1
+})
+const firstOptions = ref<any>({})
+const secondOptions = ref<any>({})
+const thirdOptions = ref<any>({})
+const firstData = ref<any>([])
+const secondData = ref<any>([])
+const thirdData = ref<any>([])
+
+
+const init = () => {
+
+    loading.value = true
+    formData.lineIndex = monitoringPoint.state.lineId
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    formData.flag = datePickerRef.value.interval
+    Promise.all([getReasonTypeTime(formData), getStatistic(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data.reason
+        thirdData.value = res[1].data.types
+        initFirst()
+        initSecond()
+        initThird()
+        loading.value = false
+    })
+}
+const initFirst = () => {
+    let months = new Array()
+    let handle = new Array()
+    for (let i = 0; i < firstData.value.length; i++) {
+        if ((firstData.value[i].month == '01') || (i == 0)) {
+            if (formData.flag == 0) {
+                months[i] = firstData.value[i].month
+            } else {
+                months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            }
+        } else {
+            if (formData.flag == 0) {
+                months[i] = firstData.value[i].month
+            } else {
+                months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            }
+        }
+        handle[i] = firstData.value[i].times
+    }
+
+    firstOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        title: {
+            text:
+                formData.flag == 3
+                    ? '月份统计'
+                    : formData.flag == 2
+                        ? '季度统计'
+                        : formData.flag == 1
+                            ? '年份统计'
+                            : '',
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'axis',
+            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)',
+            formatter: function(params: any) {
+                let tips = ''
+                tips += '<font>时间:' + params[0].name + '</font><br/>'
+                tips += '<font>暂降次数:' + params[0].data + '</font>'
+                return tips
+            }
+        },
+        legend: {
+            data: ['暂降次数'],
+            x: 'right'
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: months,
+                name: '时间'
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '次',
+                minInterval: 1
+            }
+        ],
+        series: [
+            {
+                name: '暂降次数',
+                type: 'bar',
+                barMinHeight: 10,
+                itemStyle: {
+                    normal: {
+                        color: function(params: any) {
+                            if (params.data == 0) {
+                                return '#ccc'
+                            } else {
+                                return color[0]
+                            }
+                        },
+                        label: {
+                            show: true,
+                            textStyle: {
+                                label: { show: true, position: 'top' }
+                            }
+                        }
+                    }
+                },
+                data: handle
+            }
+        ]
+    }
+}
+const initSecond = () => {
+    let reaArray = []
+    let valueArray = []
+    secondData.value.reverse()
+    for (let i = 0; i < secondData.value.length; i++) {
+        reaArray.push(secondData.value[i].reason)
+        valueArray.push({
+            name: secondData.value[i].reason,
+            value: secondData.value[i].times
+        })
+    }
+    secondOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        animation: false,
+        title: {
+            text: '暂降原因',
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'item',
+            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)',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: reaArray
+        },
+        series: [
+            {
+                name: '暂降原因',
+                type: 'pie',
+                radius: '70%',
+                center: ['50%', '53%'],
+                label: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                lableLine: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                data: valueArray,
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    }
+}
+const initThird = () => {
+    let typeArray = []
+    let valueArray = []
+    for (let i = 0; i < thirdData.value.length; i++) {
+        typeArray.push(thirdData.value[i].type)
+        valueArray.push({
+                name: thirdData.value[i].type,
+                value: thirdData.value[i].times
+            }
+        )
+    }
+    thirdOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        animation: false,
+        title: {
+            text: '暂降类型',
+            x: 'center'
+        },
+
+        tooltip: {
+            trigger: 'item',
+            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)',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: typeArray
+        },
+        series: [
+            {
+                name: '暂降类型',
+                type: 'pie',
+                radius: '70%',
+                center: ['50%', '60%'],
+                label: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                lableLine: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                data: valueArray,
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    }
+}
+
+onMounted(() => {
+    init()
+})
+
+</script>
+<style lang='scss'>
+.zanjiangfenbutongji {
+    display: flex;
+    overflow: hidden;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
new file mode 100644
index 00000000..95348471
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
@@ -0,0 +1,185 @@
+<template>
+    <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>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
+    </div>
+</template>
+<script setup lang='ts'>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { getProbabilityDistribution } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const options = ref({})
+
+const init = () => {
+    loading.value = true
+    formData.lineIndex = monitoringPoint.state.lineId
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    getProbabilityDistribution(formData).then(
+        (res: any) => {
+            let data = res.data
+            let eventValue = data.eventvalue
+            let pereventValue = data.pereventvalue
+            options.value = {
+                backgroundColor: '#fff', //背景色,
+                title: {
+                    text: '暂降幅值的概率分布函数',
+                    x: 'center'
+                },
+                legend: {
+                    show: true,
+                    left: 10,
+                    data: ['概率分布', '占比'],
+
+                    textStyle: {
+                        rich: {
+                            a: {
+                                verticalAlign: 'middle'
+                            }
+                        },
+
+                        padding: [2, 0, 0, 0] //[上、右、下、左]
+                    }
+                },
+
+                tooltip: {
+                    //提示框组件
+                    trigger: 'axis',
+
+                    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
+                },
+                calculable: true,
+                xAxis: [
+                    {
+                        type: 'category',
+                        name: '暂降幅值',
+                        nameGap: 10,
+                        nameTextStyle: {
+                            fontSize: 12
+                        },
+                        data: [
+                            '0',
+                            '10%',
+                            '20%',
+                            '30%',
+                            '40%',
+                            '50%',
+                            '60%',
+                            '70%',
+                            '80%',
+                            '90%',
+                            '100%'
+                        ]
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '概率分布',
+                        nameTextStyle: {
+                            fontSize: 15
+                        },
+                        axisLabel: {
+                            formatter: '{value}%'
+                        },
+                        axisLine: {
+                            show: true
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                type: 'dashed',
+                                opacity: 0.5
+                            }
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '占比',
+
+                        nameTextStyle: {
+                            fontSize: 15
+                        },
+                        axisLine: {
+                            show: true
+                        },
+
+                        splitLine: {
+                            lineStyle: {
+                                type: 'dashed',
+                                opacity: 0.5
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '占比',
+                        type: 'bar',
+                        data: pereventValue,
+                        barWidth: 30,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
+                    },
+                    {
+                        name: '概率分布',
+                        type: 'line',
+                        data: eventValue,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
+                    }
+                ],
+                options: {
+                    dataZoom: null
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+
+onMounted(() => {
+    init()
+})
+
+</script>
+<style></style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStudy/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStudy/index.vue
new file mode 100644
index 00000000..ec000b60
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/eventStudy/index.vue
@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <!-- 表头 -->
+        <TableHeader date-picker>
+            <template v-slot:operation>
+                <el-button :icon='Download' type='primary' @click='download'>波形下载</el-button>
+            </template>
+        </TableHeader>
+        <!-- 表格 -->
+        <Table ref='tableRef' :checkboxConfig='checkboxConfig' />
+    </div>
+</template>
+<script setup lang='ts'>
+import { Download } from '@element-plus/icons-vue'
+import { ref, onMounted, provide, reactive } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { mainHeight } from '@/utils/layout'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { useDictData } from '@/stores/dictData'
+import { checkUser } from '@/api/user-boot/user'
+import { VxeTablePropTypes } from 'vxe-table'
+import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
+
+const dictData = useDictData()
+const eventTypeOptions = dictData.getBasicData('Event_Statis')
+const monitoringPoint = useMonitoringPoint()
+const tableStore = new TableStore({
+    publicHeight: 60,
+    url: '/event-boot/monitor/getMonitorEventAnalyseQuery',
+    method: 'POST',
+    column: [
+        { width: '60', type: 'checkbox' },
+        { title: '序号', type: 'seq', width: '60' },
+        { title: '变电站名称', field: 'subName', minWidth: '130' },
+        { title: '监测点名称', field: 'lineName', minWidth: '130' },
+        { title: '网络参数', field: 'ip', minWidth: '130' },
+        { title: '电压等级(kV)', field: 'voltageScale', width: '100' },
+        { title: '暂降发生时刻', field: 'startTime', width: '200' },
+        { title: '暂降类型', field: 'advanceType', minWidth: '130' },
+        { title: '暂降原因', field: 'advanceReason', minWidth: '130' },
+        { title: '触发类型', field: 'eventTypeName', minWidth: '80' },
+        { title: '暂降(骤升)幅值(%)', field: 'featureAmplitude', minWidth: '80' },
+        { title: '持续时间(s)', field: 'duration', minWidth: '80' },
+        { title: '严重度', field: 'severity', minWidth: '80' },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '波形查看',
+                    type: 'primary',
+                    icon: 'el-icon-Lock',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.fileFlag === 0
+                    },
+                    click: row => {
+                        getMonitorEventAnalyseWave({
+                            id: row.eventId,
+                            systemType: 0,
+                            type: 0
+                        }).then(res => {
+                            console.log(res)
+                            ElMessage.error('暂无可下载的波形文件!')
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        tableStore.table.params.lineId = monitoringPoint.state.lineId
+        console.log('beforeSearchFun')
+    },
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.eventTypeName = eventTypeOptions.find(item2 => item2.id === item.eventType)?.name
+            item.featureAmplitude = (item.featureAmplitude * 100).toFixed(0)
+        })
+    }
+})
+provide('tableStore', tableStore)
+tableStore.table.params.searchState = 0
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
+    checkMethod: ({ row }) => {
+        return row.fileFlag === 1
+    }
+})
+const download = () => {
+    if (!tableStore.table.selection.length) {
+        ElMessage.warning('请选择数据')
+        return
+    }
+    downloadWaveFile({
+        lineId: tableStore.table.selection.map((item: any) => item.eventId)
+    }).then((res: any) => {
+        if (res.type == 'application/json') {
+            ElMessage.warning('暂无可下载的波形文件!')
+            return
+        }
+        ElMessage.success('下载中。。。!')
+        let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a') // 创建a标签
+        link.href = url
+        link.download = '波形分析下载' // 设置下载的文件名
+        document.body.appendChild(link)
+        link.click() //执行下载
+        document.body.removeChild(link) //释放标签
+    })
+}
+</script>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
new file mode 100644
index 00000000..5badf61d
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
@@ -0,0 +1,72 @@
+<template>
+    <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' lazy>
+                <Navigation @changeTab='changeTab' />
+            </el-tab-pane>
+            <el-tab-pane label='稳态综合评估' name='2' lazy v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='稳态指标合格率' name='3' lazy v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='稳态数据分析' name='4' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='谐波频普' name='5' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='告警数据统计' name='6' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='监测点运行状态' name='7' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='实时数据' name='7' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+        </el-tabs>
+        <div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
+    </div>
+</template>
+<script setup lang='ts'>
+import { defineOptions, nextTick, 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 '@/stores/monitoringPoint'
+
+defineOptions({
+    name: 'harmonic-boot/monitor/online'
+})
+const isReload = ref(false)
+const monitoringPoint = useMonitoringPoint()
+const height = mainHeight(82)
+const activeName = ref('1')
+watch(
+    () => router.currentRoute.value.query.lineId,
+    (newLineId, oldLineId) => {
+        if (!newLineId) return
+        // 在这里处理 lineId 的变化
+        monitoringPoint.setValue('lineId', router.currentRoute.value.query.lineId)
+        monitoringPoint.setValue('lineName', router.currentRoute.value.query.lineName)
+    },
+    { immediate: true }
+)
+watch(() => monitoringPoint.state.lineId, () => {
+    //  刷新页面
+    isReload.value = true
+    nextTick(() => {
+        isReload.value = false
+    })
+})
+const changeTab = (e: string) => {
+    activeName.value = e
+}
+</script>
+<style lang='scss'>
+.monitoring-point {
+    position: absolute;
+    top: 12px;
+    right: 10px;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--el-color-primary);
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/index.vue
new file mode 100644
index 00000000..efb10c98
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/index.vue
@@ -0,0 +1,43 @@
+<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>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/map.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/map.vue
new file mode 100644
index 00000000..93cdcc3b
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/navigation/map.vue
@@ -0,0 +1,320 @@
+<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>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/runningCondition/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/runningCondition/index.vue
new file mode 100644
index 00000000..a66f92b6
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/runningCondition/index.vue
@@ -0,0 +1,329 @@
+<template>
+    <div v-loading='loading' class='running-condition'>
+        <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>
+        <div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
+            <div
+                style='position: absolute; right: 10px; top: 10px;  z-index: 2;display: flex;align-items: center;font-size: 12px'>
+                <el-tag style='width: 20px;height: 12px' :style='{background: gradeColor[2]}'></el-tag>
+                <span class='ml2' :style='{color: gradeColor[2]}'> {{ 'X<60%' }} </span>
+                <el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor[1]}'></el-tag>
+                <span class='ml2' :style='{color: gradeColor[1]}'>{{ '60%≤X<90%' }} </span>
+                <el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor[0]}'></el-tag>
+                <span class='ml2' :style='{color: gradeColor[0]}'>  {{ 'X≥90 %' }}</span>
+            </div>
+            <my-echart :options='secondOptions' style='flex: 1;height: 100%' />
+            <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
+        </div>
+    </div>
+</template>
+<script setup lang='ts'>
+import { nextTick, onMounted, reactive, ref, watch } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
+import { gradeColor } from '@/components/echarts/color'
+
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    id: '',
+    searchBeginTime: '',
+    searchEndTime: '',
+    timeFlag: 1
+})
+const firstOptions = ref<any>({})
+const secondOptions = ref<any>({})
+const firstData = ref<any>([])
+const secondData = ref<any>([])
+
+const init = () => {
+    loading.value = true
+    formData.id = monitoringPoint.state.lineId
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    formData.timeFlag = datePickerRef.value.interval
+    Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data
+        initFirst()
+        initSecond()
+        loading.value = false
+    })
+}
+const initFirst = () => {
+    let months = new Array()
+    let handle = new Array()
+    let year = firstData.value[0].year
+
+    for (let i = 0; i < firstData.value.length; i++) {
+        if (formData.timeFlag == 0) {
+            months[i] = firstData.value[i].month
+            months[0] = firstData.value[i].month + '\n' + '(' + year + ')'
+        } else {
+            months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            months[0] = firstData.value[i].month + '-' + firstData.value[i].day + '\n' + '(' + year + ')'
+        }
+        handle.push(firstData.value[i].onlineRate)
+    }
+    firstOptions.value = {
+        title: {
+            text: '在线率统计',
+            x: 'center',
+            textStyle: {
+                fontWeight: 'normal'
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+            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)',
+            formatter: function(params: any) {
+                let tips = ''
+                tips += '时间:' + year + '-' + params[0].name + '</br/>'
+                for (let i = 0; i < params.length; i++) {
+                    if (params[i].value == 3.14159) {
+                        tips += '在线率' + ':暂无数据<br/>'
+                    } else {
+                        tips += '在线率' + ':' + params[i].value + '%<br/>'
+                    }
+                }
+                return tips
+            }
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: months,
+                name: '时间',
+                nameTextStyle: {
+                    verticalAlign: 'top', //标题位置
+                    padding: [-5, 0, 0, -10]
+                },
+
+                splitLine: {
+                    show: false
+                },
+                axisLine: {
+                    show: true
+                }
+            }
+        ],
+        yAxis: [
+            {
+                min: 0,
+                max: 100,
+                type: 'value',
+                name: '%',
+                axisLine: {
+                    show: true
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        // 使用深浅的间隔色
+                        type: 'dashed',
+                        opacity: 0.5
+                    }
+                }
+            }
+        ],
+        series: [
+            {
+                type: 'bar',
+                data: handle,
+                itemStyle: {
+                    color: (params: any) => {
+                        if (params.value == 3.14159) {
+                            return '#ccc'
+                        } else {
+                            if (params.value < 60) {
+                                return gradeColor[2]
+                            } else if (params.value < 90) {
+                                return gradeColor[1]
+                            } else {
+                                return gradeColor[0]
+                            }
+                        }
+                    }
+                },
+                markLine: {
+                    silent: false,
+                    symbol: 'circle',
+                    data: [
+                        {
+                            yAxis: 100,
+                            lineStyle: {
+                                color: gradeColor[0]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '100%'
+                            }
+                        },
+                        {
+                            yAxis: 90,
+                            lineStyle: {
+                                color: gradeColor[1]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '90%'
+                            }
+                        },
+                        {
+                            yAxis: 60,
+                            lineStyle: {
+                                color: gradeColor[2]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '60%'
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}
+const initSecond = () => {
+    let list = secondData.value.type
+    let items = secondData.value.updateTime
+
+    for (let i = 0; i < items.length; i++) {
+        if (i != 0) {
+            i
+            items[i] = items[i].slice(11)
+        } else if (i == 0) {
+            let date = items[i].slice(11)
+            let t = items[i].slice(0, 10)
+            items[i] = '(' + date + ')' + '\n' + t
+        }
+    }
+    secondOptions.value = {
+        tooltip: {
+            trigger: 'axis',
+            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)',
+            formatter: function(params: any) {
+                let res = '时间: ' + params[0].name + '<br/>运行状态：'
+                let texts = ''
+                if (params[0].value === 2 || params[0].value === '2') {
+                    texts = '退出'
+                } else if (params[0].value === 0 || params[0].value === '0') {
+                    texts = '中断'
+                } else if (params[0].value === 1 || params[0].value === '1') {
+                    texts = '正常'
+                }
+                res = res + texts
+                return res
+            }
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                end: 100,
+                bottom: '25px'
+            },
+
+            { height: 13, start: 0, bottom: '25px', end: 100 }
+        ],
+
+        xAxis: {
+            name: '时间',
+            type: 'category',
+            data: items,
+            boundaryGap: false
+
+        },
+        yAxis: {
+            name: '状态',
+            type: 'value',
+            axisLine: {
+                show: true
+            },
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: 'blue'
+                },
+                // 这里重新定义就可以
+                formatter: function(value: number) {
+                    let texts = []
+                    if (value === 2) {
+                        texts.push('退出')
+                    } else if (value === 0) {
+                        texts.push('中断')
+                    } else if (value === 1) {
+                        texts.push('正常')
+                    }
+                    return texts
+                }
+            }
+        },
+        series: [
+            {
+                name: '运行状态',
+                type: 'line',
+                step: 'end',
+                data: list
+            }
+        ]
+    }
+}
+onMounted(() => {
+    init()
+})
+
+</script>
+<style lang='scss'>
+.running-condition {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 14px;
+    border: 1px solid var(--el-border-color);
+
+    .zanjiangfenbutongji {
+        position: relative;
+        display: flex;
+        overflow: hidden;
+    }
+}
+</style>
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
index c9be5f3c..b63720c4 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
@@ -28,7 +28,7 @@
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/views/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getPlot } from '@/api/event-boot/monitor'
 
 const datePickerRef = ref()
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
index 1c6bd140..1e0206c6 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
@@ -28,7 +28,7 @@
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/views/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getPlot } from '@/api/event-boot/monitor'
 
 const datePickerRef = ref()
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
index 6e39b463..8c85bb77 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
@@ -17,7 +17,7 @@
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/views/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getProbabilityDistribution } from '@/api/event-boot/monitor'
 
 const datePickerRef = ref()
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
index acb46bd7..eced34e6 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
@@ -71,7 +71,7 @@
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/views/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { eventDisdip, getCoords, IEC28, IEC411 } from '@/api/event-boot/monitor'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
index c0f31807..65a74237 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
@@ -21,7 +21,7 @@
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/views/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
 import { color } from '@/components/echarts/color'
 
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
index 38f77011..95348471 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
@@ -17,7 +17,7 @@
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/views/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getProbabilityDistribution } from '@/api/event-boot/monitor'
 
 const datePickerRef = ref()
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/eventStudy/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/eventStudy/index.vue
index 219f1959..ec000b60 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/eventStudy/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/eventStudy/index.vue
@@ -18,7 +18,7 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { mainHeight } from '@/utils/layout'
-import { useMonitoringPoint } from '@/views/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { useDictData } from '@/stores/dictData'
 import { checkUser } from '@/api/user-boot/user'
 import { VxeTablePropTypes } from 'vxe-table'
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/index.vue
index 3590dd3c..b7127a24 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/index.vue
@@ -25,7 +25,7 @@ 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/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 
 defineOptions({
     name: 'Descentsystem/monitoringpoint'
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/navigation/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/navigation/index.vue
index 7aed72f7..efb10c98 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/navigation/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/navigation/index.vue
@@ -20,7 +20,7 @@ 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/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 
 const monitoringPoint = useMonitoringPoint()
 const size = ref(0)
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/navigation/map.vue b/src/views/pqs/voltageSags/monitoringPoint/online/navigation/map.vue
index 1f2ab285..09e3366d 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/navigation/map.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/navigation/map.vue
@@ -121,7 +121,7 @@ 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/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 
 const emit = defineEmits(['changeTab'])
 const monitoringPoint = useMonitoringPoint()
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue
index 59b76b3d..a66f92b6 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue
@@ -27,7 +27,7 @@
 import { nextTick, onMounted, reactive, ref, watch } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/views/pqs/voltageSags/monitoringPoint/online/store'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
 import { gradeColor } from '@/components/echarts/color'