From cc515b627e843df2c2b3baccdc63aeed8aec6780 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: Fri, 1 Mar 2024 15:11:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E6=95=B0=E6=8D=AE=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/harmonic-boot/normLimit.ts            |  16 +
 src/components/secondSheet/index.vue          |  16 +
 .../online/gaojingshujutongji/index.vue       | 559 +++++++++++++-----
 .../monitoringPoint/online/index.vue          |   6 +-
 .../online/wentaishujufenxi/index.vue         |   2 +-
 5 files changed, 444 insertions(+), 155 deletions(-)
 create mode 100644 src/api/harmonic-boot/normLimit.ts
 create mode 100644 src/components/secondSheet/index.vue

diff --git a/src/api/harmonic-boot/normLimit.ts b/src/api/harmonic-boot/normLimit.ts
new file mode 100644
index 00000000..116db097
--- /dev/null
+++ b/src/api/harmonic-boot/normLimit.ts
@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function getHistoryTableData(data:any) {
+    return request({
+        url: '/harmonic-boot/normLimit/getHistoryTableData',
+        method: 'post',
+        data: data
+    })
+}
+export function  getHistoryLineData(data:any) {
+    return request({
+        url: '/harmonic-boot/harmonic/getHistoryLineData',
+        method: 'post',
+        data: data
+    })
+}
\ No newline at end of file
diff --git a/src/components/secondSheet/index.vue b/src/components/secondSheet/index.vue
new file mode 100644
index 00000000..d9bcc44e
--- /dev/null
+++ b/src/components/secondSheet/index.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="second-sheet">
+        <slot></slot>
+    </div>
+</template>
+<!-- 注意：父元素要有定位属性 -->
+<style lang="scss">
+.second-sheet {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 2;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/gaojingshujutongji/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/gaojingshujutongji/index.vue
index 8c85bb77..2773a98f 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/gaojingshujutongji/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/gaojingshujutongji/index.vue
@@ -1,173 +1,430 @@
 <template>
-    <div style='display: flex;flex-direction: column;height: 100%'>
-        <el-form :inline='true'>
-            <el-form-item label='日期'>
-                <DatePicker ref='datePickerRef'></DatePicker>
+    <div style="display: flex; flex-direction: column; height: 100%; position: relative" v-loading="loading">
+        <el-form :inline="true">
+            <el-form-item label="多监测点">
+                <el-checkbox v-model="checked" @change="checkChange" />
+            </el-form-item>
+            <el-form-item label="日期">
+                <DatePicker ref="datePickerRef"></DatePicker>
+            </el-form-item>
+            <el-form-item label="指标类型:">
+                <el-select
+                    v-model="formData.condition"
+                    multiple
+                    collapse-tags
+                    :multiple-limit="5"
+                    filterable
+                    placeholder="请选择指标"
+                    @change="conditionChange"
+                >
+                    <el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
+                        <el-option
+                            v-for="item in group.options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-option-group>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="谐波次数:" v-if="showXieBoCiShu">
+                <el-select style="width: 100%" v-model="formData.harmonic" placeholder="请选择谐波">
+                    <el-option
+                        v-for="item in harmonicOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item v-if="showJianXieBoCiShu" label="间谐波次数:">
+                <el-select style="width: 100%" v-model="formData.inHarmonic" placeholder="请选择间谐波">
+                    <el-option
+                        v-for="item in inharmonicOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
             </el-form-item>
             <el-form-item>
-                <el-button type='primary' @click='init'>查询</el-button>
+                <el-button type="primary" @click="init">查询</el-button>
             </el-form-item>
         </el-form>
-        <div style='flex: 1;' class='mt10'>
-            <my-echart :options='options' />
+        <div style="flex: 1; overflow: hidden" class="mt10">
+            <vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
+                <vxe-column field="subName" title="变电站" min-width="120px"></vxe-column>
+                <vxe-column field="lineName" title="监测点名称" min-width="120px"></vxe-column>
+                <vxe-column field="targetName" title="指标类型" min-width="120px"></vxe-column>
+                <vxe-column field="phaseType" title="相别" min-width="100px"></vxe-column>
+                <vxe-column field="scale" title="电压等级" min-width="100px"></vxe-column>
+                <vxe-column field="timeId" title="时间" min-width="130px"></vxe-column>
+                <vxe-column field="unit" title="单位" min-width="100px"></vxe-column>
+                <vxe-column field="maxData" title="最大值(%)" min-width="100px">
+                    <template #default="scope">
+                        <el-button
+                            @click="showCharts(scope.row, 3, '最大值')"
+                            :style="{ color: scope.row.statisticalType === 3 ? '#cc0000' : '#07d75a' }"
+                            type="text"
+                            size="small"
+                        >
+                            {{ scope.row.maxData }}
+                        </el-button>
+                        <el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
+                    </template>
+                </vxe-column>
+                <vxe-column field="minData" title="最小值(%)" min-width="100px">
+                    <template #default="scope">
+                        <el-button
+                            @click="showCharts(scope.row, 2, '最小值')"
+                            :style="{ color: scope.row.statisticalType === 2 ? '#cc0000' : '#07d75a' }"
+                            type="text"
+                            size="small"
+                        >
+                            {{ scope.row.minData }}
+                        </el-button>
+                        <el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
+                    </template>
+                </vxe-column>
+                <vxe-column field="avgData" title="平均值(%)" min-width="100px">
+                    <template #default="scope">
+                        <el-button
+                            @click="showCharts(scope.row, 1, '平均值')"
+                            :style="{ color: scope.row.statisticalType === 1 ? '#cc0000' : '#07d75a' }"
+                            type="text"
+                            size="small"
+                        >
+                            {{ scope.row.avgData }}
+                        </el-button>
+                        <el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
+                    </template>
+                </vxe-column>
+                <vxe-column field="cp95Data" title="CP95值(%)" min-width="100px">
+                    <template #default="scope">
+                        <el-button
+                            @click="showCharts(scope.row, 4, 'CP95值')"
+                            :style="{ color: scope.row.statisticalType === 4 ? '#cc0000' : '#07d75a' }"
+                            type="text"
+                            size="small"
+                        >
+                            {{ scope.row.cp95Data }}
+                        </el-button>
+                        <el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
+                    </template>
+                </vxe-column>
+            </vxe-table>
+            <SecondSheet v-if="options" style="background: #fff; z-index: 10">
+                <el-button
+                    style="position: absolute; right: 0; top: 0; cursor: pointer; z-index: 3"
+                    type="primary"
+                    size="small"
+                    @click="close"
+                >
+                    返回
+                </el-button>
+                <MyEChart :options="options"></MyEChart>
+            </SecondSheet>
         </div>
     </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import { nextTick, onMounted, reactive, ref } from 'vue'
+import { Close } from '@element-plus/icons-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'
+import { indexOptions, harmonicOptions, inharmonicOptions } from '@/utils/dictionary'
+import { getHistoryTableData, getHistoryLineData } from '@/api/harmonic-boot/normLimit'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import SecondSheet from '@/components/secondSheet/index.vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
 
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
-const formData = reactive({
-    lineIndex: monitoringPoint.state.lineId,
-    startTime: '',
-    endTime: ''
+const checked = ref(monitoringPoint.state.showCheckBox)
+const formData = reactive<{
+    lineId: string[]
+    searchBeginTime: string
+    searchEndTime: string
+    condition: string[]
+    harmonic: number
+    inHarmonic: number
+}>({
+    lineId: [],
+    searchBeginTime: '',
+    searchEndTime: '',
+    condition: ['10', '11', '12'],
+    harmonic: 2,
+    inHarmonic: 1
 })
-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
-            })
-        }
-    )
-}
-
+const tableData = ref([])
+const showXieBoCiShu = ref(false)
+const showJianXieBoCiShu = ref(false)
+const options = ref<any>(null)
 
 onMounted(() => {
     init()
 })
-
+const init = () => {
+    loading.value = true
+    formData.lineId = checked.value ? monitoringPoint.state.lineIds : [monitoringPoint.state.lineId]
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    getHistoryTableData(formData).then((res: any) => {
+        tableData.value = res.data.map((item: any) => {
+            return {
+                ...item,
+                maxData: item.maxData.toFixed(2),
+                minData: item.minData.toFixed(2),
+                avgData: item.avgData.toFixed(2),
+                cp95Data: item.cp95Data.toFixed(2)
+            }
+        })
+        nextTick(() => {
+            loading.value = false
+        })
+    })
+}
+const checkChange = () => {
+    if (checked.value) {
+        monitoringPoint.setShowCheckBox(true)
+    } else {
+        monitoringPoint.setShowCheckBox(false)
+        init()
+    }
+}
+const close = () => {
+    console.log('====================================')
+    console.log(2123123)
+    console.log('====================================')
+    options.value = null
+}
+const showCharts = (row: any, valueType: number, name: string) => {
+    getHistoryLineData({
+        lineId: row.lineId,
+        number: row.number,
+        phaseType: row.phaseType,
+        searchTime: row.timeId,
+        targetCode: row.targetCode,
+        valueType
+    }).then(res => {
+        options.value = {
+            title: {
+                text: row.subName + ' ' + row.lineName + ' ' + row.targetName + ' ' + row.phaseType + '相' + name
+            },
+            legend: {
+                show: false
+            },
+            xAxis: {
+                type: 'category',
+                name: '时间',
+                data: res.data[0]?.value.map((item: any[]) => item[0])
+            },
+            yAxis: {
+                name: '%',
+                type: 'value'
+            },
+            series: [
+                {
+                    name: name,
+                    data: res.data[0]?.value.map((item: any[]) => item[1]),
+                    type: 'line'
+                }
+            ],
+            options: {
+                grid: {
+                    top: '50px',
+                    left: '40px',
+                    right: '60px',
+                    bottom: '10px',
+                    containLabel: true
+                },
+                dataZoom: null
+            }
+        }
+    })
+}
+const conditionChange = () => {
+    //判断一个指标时
+    if (formData.condition.length == 1) {
+        if (
+            formData.condition.includes('40') ||
+            formData.condition.includes('43') ||
+            formData.condition.includes('44') ||
+            formData.condition.includes('45')
+        ) {
+            showXieBoCiShu.value = true
+        } else {
+            showXieBoCiShu.value = false
+        }
+        if (
+            formData.condition.includes('46') ||
+            formData.condition.includes('47') ||
+            formData.condition.includes('48') ||
+            formData.condition.includes('49')
+        ) {
+            showJianXieBoCiShu.value = true
+        } else {
+            showJianXieBoCiShu.value = false
+        }
+    }
+    //判断2个指标时
+    if (formData.condition.length == 2) {
+        if (
+            formData.condition.includes('40') ||
+            formData.condition.includes('43') ||
+            formData.condition.includes('44') ||
+            (formData.condition.includes('45') && formData.condition.includes('46')) ||
+            formData.condition.includes('47') ||
+            formData.condition.includes('48') ||
+            formData.condition.includes('49')
+        ) {
+            showXieBoCiShu.value = true
+            showJianXieBoCiShu.value = true
+        }
+        if (
+            formData.condition.includes('40') ||
+            formData.condition.includes('43') ||
+            formData.condition.includes('44') ||
+            formData.condition.includes('45')
+        ) {
+            showXieBoCiShu.value = true
+        } else {
+            showXieBoCiShu.value = false
+        }
+        if (
+            formData.condition.includes('46') ||
+            formData.condition.includes('47') ||
+            formData.condition.includes('48') ||
+            formData.condition.includes('49')
+        ) {
+            showJianXieBoCiShu.value = true
+        } else {
+            showJianXieBoCiShu.value = false
+        }
+    }
+    //判断3个指标时
+    if (formData.condition.length == 3) {
+        if (
+            (formData.condition.includes('40') ||
+                formData.condition.includes('43') ||
+                formData.condition.includes('44') ||
+                formData.condition.includes('45')) &&
+            (formData.condition.includes('46') ||
+                formData.condition.includes('47') ||
+                formData.condition.includes('48') ||
+                formData.condition.includes('49'))
+        ) {
+            showXieBoCiShu.value = true
+            showJianXieBoCiShu.value = true
+        } else {
+            showXieBoCiShu.value = false
+            showJianXieBoCiShu.value = false
+        }
+        if (
+            formData.condition.includes('46') ||
+            formData.condition.includes('47') ||
+            formData.condition.includes('48') ||
+            formData.condition.includes('49')
+        ) {
+            showJianXieBoCiShu.value = true
+        } else {
+            showJianXieBoCiShu.value = false
+        }
+        if (
+            formData.condition.includes('40') ||
+            formData.condition.includes('43') ||
+            formData.condition.includes('44') ||
+            formData.condition.includes('45')
+        ) {
+            showXieBoCiShu.value = true
+        } else {
+            showXieBoCiShu.value = false
+        }
+    }
+    //判断4个指标时
+    if (formData.condition.length == 4) {
+        if (
+            (formData.condition.includes('40') ||
+                formData.condition.includes('43') ||
+                formData.condition.includes('44') ||
+                formData.condition.includes('45')) &&
+            (formData.condition.includes('46') ||
+                formData.condition.includes('47') ||
+                formData.condition.includes('48') ||
+                formData.condition.includes('49'))
+        ) {
+            showXieBoCiShu.value = true
+            showJianXieBoCiShu.value = true
+        } else {
+            showXieBoCiShu.value = false
+            showJianXieBoCiShu.value = false
+        }
+        if (
+            formData.condition.includes('46') ||
+            formData.condition.includes('47') ||
+            formData.condition.includes('48') ||
+            formData.condition.includes('49')
+        ) {
+            showJianXieBoCiShu.value = true
+        } else {
+            showJianXieBoCiShu.value = false
+        }
+        if (
+            formData.condition.includes('40') ||
+            formData.condition.includes('43') ||
+            formData.condition.includes('44') ||
+            formData.condition.includes('45')
+        ) {
+            showXieBoCiShu.value = true
+        } else {
+            showXieBoCiShu.value = false
+        }
+    }
+    //判断5个指标时
+    if (formData.condition.length == 5) {
+        if (
+            (formData.condition.includes('40') ||
+                formData.condition.includes('43') ||
+                formData.condition.includes('44') ||
+                formData.condition.includes('45')) &&
+            (formData.condition.includes('46') ||
+                formData.condition.includes('47') ||
+                formData.condition.includes('48') ||
+                formData.condition.includes('49'))
+        ) {
+            showXieBoCiShu.value = true
+            showJianXieBoCiShu.value = true
+        } else {
+            showXieBoCiShu.value = false
+            showJianXieBoCiShu.value = false
+        }
+        if (
+            formData.condition.includes('46') ||
+            formData.condition.includes('47') ||
+            formData.condition.includes('48') ||
+            formData.condition.includes('49')
+        ) {
+            showJianXieBoCiShu.value = true
+        } else {
+            showJianXieBoCiShu.value = false
+        }
+        if (
+            formData.condition.includes('40') ||
+            formData.condition.includes('43') ||
+            formData.condition.includes('44') ||
+            formData.condition.includes('45')
+        ) {
+            showXieBoCiShu.value = true
+        } else {
+            showXieBoCiShu.value = false
+        }
+    }
+    //判断无指标时
+    if (formData.condition.length == 0) {
+        showJianXieBoCiShu.value = false
+        showXieBoCiShu.value = false
+    }
+}
 </script>
 <style></style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
index f492147c..d33e7acf 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
@@ -39,12 +39,12 @@
                             <Shishishuju />
                         </el-tab-pane>
                     </el-tabs>
-                    <div
+                    <!-- <div
                         class="monitoring-point"
                         v-if="!monitoringPoint.state.showCheckBox && monitoringPoint.state.lineName"
                     >
                         当前位置：{{ monitoringPoint.state.lineName }}
-                    </div>
+                    </div> -->
                 </div>
             </pane>
         </splitpanes>
@@ -75,7 +75,7 @@ const pointTree = ref()
 const size = ref(0)
 const isReload = ref(false)
 const height = mainHeight(40)
-const activeName = ref('4')
+const activeName = ref('5')
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
     if (dom) {
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
index 2ad147f6..789c2956 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
@@ -12,7 +12,7 @@
                     v-model="formData.condition"
                     multiple
                     collapse-tags
-                    :multiple-limit="checked ? 3 : 1"
+                    :multiple-limit="5"
                     filterable
                     placeholder="请选择指标"
                     @change="conditionChange"