From b9fef6cde056cc800eb29883b8b274f869a2308c 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 18:47:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A8=B3=E6=80=81=E6=8C=87=E6=A0=87=E5=90=88?=
 =?UTF-8?q?=E6=A0=BC=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/harmonic-boot/pollution.ts            |   9 +
 src/components/form/datePicker/index.vue      |  34 +-
 src/components/table/index.vue                |   7 +-
 .../online/wentaizhibiaohegelv/index.vue      | 399 ++++++++++++------
 .../online/wentaizonghepinggu/index.vue       |   5 +-
 5 files changed, 311 insertions(+), 143 deletions(-)
 create mode 100644 src/api/harmonic-boot/pollution.ts

diff --git a/src/api/harmonic-boot/pollution.ts b/src/api/harmonic-boot/pollution.ts
new file mode 100644
index 00000000..ed637c2b
--- /dev/null
+++ b/src/api/harmonic-boot/pollution.ts
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getSteadyData(data: any) {
+    return request({
+        url: '/harmonic-boot/pollution/getSteadyData',
+        method: 'post',
+        data: data
+    })
+}
diff --git a/src/components/form/datePicker/index.vue b/src/components/form/datePicker/index.vue
index 4ceaf558..207ac964 100644
--- a/src/components/form/datePicker/index.vue
+++ b/src/components/form/datePicker/index.vue
@@ -451,7 +451,39 @@ const setTimeOptions = (list: any) => {
     timeOptions.value = list
 }
 
-defineExpose({ timeValue, interval, timeFlag, setTimeOptions })
+// 获取时间范围的同比
+function getYearOnYear(startDate: string, endDate: string): [string, string] {
+    const startYearAgo = new Date(startDate)
+    startYearAgo.setFullYear(startYearAgo.getFullYear() - 1)
+
+    const endYearAgo = new Date(endDate)
+    endYearAgo.setFullYear(endYearAgo.getFullYear() - 1)
+
+    return [formatDate(startYearAgo), formatDate(endYearAgo)]
+}
+
+// 获取时间范围的环比
+function getMonthOnMonth(startDate: string, endDate: string): [string, string] {
+    const start = new Date(startDate)
+    const end = new Date(endDate)
+
+    const diffTime = end.getTime() - start.getTime() + 60 * 60 * 24 * 1000 // 计算时间差
+    const startMonthAgo = new Date(start)
+    startMonthAgo.setTime(startMonthAgo.getTime() - diffTime) // 将开始时间向前推移相同的时间差
+
+    const endMonthAgo = new Date(start)
+    endMonthAgo.setDate(start.getDate() - 1) // 结束时间是开始时间的前一天
+
+    return [formatDate(startMonthAgo), formatDate(endMonthAgo)]
+}
+// 格式化日期为 YYYY-MM-DD
+function formatDate(date: Date): string {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+}
+defineExpose({ timeValue, interval, timeFlag, setTimeOptions, getYearOnYear, getMonthOnMonth })
 </script>
 
 <style scoped>
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index ad9aaf6e..03617faa 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -137,11 +137,8 @@ const pageSizes = computed(() => {
  * 记录选择的项
  */
 const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
-    const $table = tableRef.value
-    if ($table) {
-        const records = $table.getCheckboxRecords()
-        tableStore.onTableAction('selection-change', records)
-    }
+    const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
+    tableStore.onTableAction('selection-change', records)
 }
 
 const getRef = () => {
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
index 8c85bb77..baa5818d 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
@@ -1,173 +1,300 @@
 <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%">
+        <el-form :inline="true">
+            <el-form-item label="日期">
+                <DatePicker ref="datePickerRef"></DatePicker>
+            </el-form-item>
+            <el-form-item label="类型">
+                <el-select v-model="searchType" clearable placeholder="可选择同比、环比">
+                    <el-option
+                        v-for="item in searchTypeOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </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" class="mt10">
+            <my-echart :options="options" />
         </div>
     </div>
 </template>
-<script setup lang='ts'>
+<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'
-
+import { getSteadyData } from '@/api/harmonic-boot/pollution'
+import { gradeColor3 } from '@/components/echarts/color'
+import { formatter } from 'element-plus'
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
 const formData = reactive({
-    lineIndex: monitoringPoint.state.lineId,
-    startTime: '',
-    endTime: ''
+    id: '',
+    searchBeginTime: '',
+    searchEndTime: '',
+    periodBeginTime: '',
+    periodEndTime: ''
 })
 const options = ref({})
-
+const searchType = ref('')
+const searchTypeOptions = [
+    {
+        label: '同比',
+        value: '1'
+    },
+    {
+        label: '环比',
+        value: '2'
+    }
+]
+const gradeNames = ['优质', '良好', '一般', '较差', '极差']
 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: {
+    formData.id = monitoringPoint.state.lineId
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    if (searchType.value == '1') {
+        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
+            formData.searchBeginTime,
+            formData.searchEndTime
+        )
+    } else if (searchType.value == '2') {
+        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
+            formData.searchBeginTime,
+            formData.searchEndTime
+        )
+    } else {
+        formData.periodBeginTime = ''
+        formData.periodEndTime = ''
+    }
+    getSteadyData(formData).then((res: any) => {
+        const { steadyInfoData, steadyInfoList } = res.data
+        let yData = [],
+            yData2 = []
+        for (let i = 0; i < steadyInfoList.length; i++) {
+            if (steadyInfoList[i] == 3.1415) {
+                steadyInfoList[i] = 1
+                yData.push(steadyInfoList[i])
+            } else if (steadyInfoList[i] == 3.14159) {
+                steadyInfoList[i] = 1
+                yData.push(steadyInfoList[i])
+            } else if (steadyInfoList[i] !== 3.14159) {
+                yData.push(steadyInfoList[i])
+            }
+        }
+        for (let i = 0; i < steadyInfoData.length; i++) {
+            if (steadyInfoData[i] == 3.1415) {
+                steadyInfoData[i] = 1
+                yData2.push(steadyInfoData[i])
+            } else if (steadyInfoData[i] == 3.14159) {
+                steadyInfoData[i] = 1
+                yData2.push(steadyInfoData[i])
+            } else if (steadyInfoData[i] !== 3.14159) {
+                yData2.push(steadyInfoData[i])
+            }
+        }
+        let series: any[] = [
+            {
+                name: formData.searchBeginTime + '至' + formData.searchEndTime,
+                type: 'bar',
+                barMaxWidth: 30,
+                label: {
                     show: true,
-                    left: 10,
-                    data: ['概率分布', '占比'],
-
-                    textStyle: {
-                        rich: {
-                            a: {
-                                verticalAlign: 'middle'
-                            }
-                        },
-
-                        padding: [2, 0, 0, 0] //[上、右、下、左]
-                    }
+                    position: 'top',
+                    distance: 2,
+                    color: '#fff',
+                    fontWeight: 'bolder'
                 },
-
-                tooltip: {
-                    //提示框组件
-                    trigger: 'axis',
-
-                    axisPointer: {
-                        type: 'shadow',
-                        label: {
-                            color: '#fff',
-                            fontSize: 16
+                data: yData,
+                markLine: {
+                    silent: false,
+                    symbol: 'circle',
+                    data: [
+                        {
+                            name: '',
+                            yAxis: 100,
+                            lineStyle: {
+                                color: gradeColor3[0]
+                            },
+                            label: {
+                                show: true,
+                                formatter: '优质',
+                                color: gradeColor3[0]
+                            }
+                        },
+                        {
+                            name: '',
+                            yAxis: 90,
+                            lineStyle: {
+                                color: gradeColor3[1]
+                            },
+                            label: {
+                                show: true,
+                                color: gradeColor3[1],
+                                formatter: '良好'
+                            }
+                        },
+                        {
+                            name: '',
+                            yAxis: 60,
+                            lineStyle: {
+                                color: gradeColor3[2]
+                            },
+                            label: {
+                                show: true,
+                                color: gradeColor3[2],
+                                formatter: '合格'
+                            }
                         }
-                    },
-                    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
-                            }
+                itemStyle: {
+                    color: (params: any) => {
+                        if (params.value > 90) {
+                            return gradeColor3[0]
+                        } else if (params.value > 60) {
+                            return gradeColor3[1]
+                        } else {
+                            return gradeColor3[2]
                         }
                     }
-                ],
-                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
+        ]
+        if (searchType.value) {
+            series.push({
+                name: formData.periodBeginTime + '至' + formData.periodEndTime,
+                type: 'bar',
+                barMaxWidth: 30,
+                label: {
+                    show: true,
+                    position: 'top',
+                    distance: 2,
+                    color: '#fff',
+                    fontWeight: 'bolder'
+                },
+                data: yData2,
+                itemStyle: {
+                    color: (params: any) => {
+                        if (params.value > 90) {
+                            return gradeColor3[0]
+                        } else if (params.value > 60) {
+                            return gradeColor3[1]
+                        } else {
+                            return gradeColor3[2]
+                        }
+                    }
+                }
             })
         }
-    )
+        options.value = {
+            title: {
+                text: '稳态指标合格率'
+            },
+            legend: {
+                show: false
+            },
+            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) {
+                    //console.log(params)
+                    let msg = ''
+                    msg += params[0].name + '<br/>'
+                    for (let i in params) {
+                        if (params[i].data == 1) {
+                            msg += params[i].seriesName + ':暂无数据<br/>'
+                        } else {
+                            msg += params[i].seriesName + ':' + params[i].data + '<br/>'
+                        }
+                    }
+                    return msg
+                }
+            },
+            xAxis: {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        width: 1
+                    },
+                    symbol: ['none', 'arrow']
+                },
+                axisLabel: {
+                    textStyle: {
+                        fontFamily: 'dinproRegular'
+                    }
+                },
+                data: [
+                    '频率偏差',
+                    '闪变',
+                    '三相电压不平衡',
+                    '谐波电压',
+                    '谐波电流',
+                    '电压偏差',
+                    '负序电流',
+                    '间谐波电压含有率'
+                ]
+            },
+            yAxis: [
+                {
+                    name: '%',
+                    type: 'value',
+                    min: 0,
+                    max: 100,
+                    position: 'left',
+                    splitLine: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            width: 1
+                        },
+                        symbol: ['none', 'arrow']
+                    }
+                },
+                {
+                    position: 'left',
+                    axisLine: {
+                        show: true,
+                        symbol: ['none', 'arrow']
+                    },
+                    splitLine: {
+                        //分割线配置
+                        lineStyle: {
+                            color: '#fff'
+                        }
+                    }
+                }
+            ],
+            series
+        }
+        nextTick(() => {
+            loading.value = false
+        })
+    })
 }
 
-
 onMounted(() => {
     init()
 })
-
 </script>
 <style></style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue
index 0d31ebfd..5049c901 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue
@@ -93,6 +93,9 @@ const init = () => {
                     }
                 }
             },
+            legend: {
+                show: false
+            },
             xAxis: [
                 {
                     name: '指标',
@@ -113,7 +116,7 @@ const init = () => {
                 name: '等级',
                 type: 'value',
                 min: 0,
-                max: 6,
+                max: 5,
                 axisLabel: {
                     show: true,
                     // 这里重新定义就可以