From 9e288b49be3b0c5e6f0bc65c6db1fa529d0e021b 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 15:26:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A8=B3=E6=80=81=E7=BB=BC=E5=90=88=E8=AF=84?=
 =?UTF-8?q?=E4=BC=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/harmonic-boot/asses.ts                |  11 +
 src/components/echarts/MyEchart.vue           |  12 +-
 src/components/echarts/color.ts               |   3 +-
 .../monitoringPoint/online/index.vue          |   2 +-
 .../online/wentaizonghepinggu/index.vue       | 321 ++++++++++--------
 .../online/runningCondition/index.vue         |  26 +-
 6 files changed, 211 insertions(+), 164 deletions(-)
 create mode 100644 src/api/harmonic-boot/asses.ts

diff --git a/src/api/harmonic-boot/asses.ts b/src/api/harmonic-boot/asses.ts
new file mode 100644
index 00000000..fd65189a
--- /dev/null
+++ b/src/api/harmonic-boot/asses.ts
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+export function getQualityAssessData(data: any) {
+    return request({
+        url: '/harmonic-boot/asses/getQualityAssessData',
+        method: 'post',
+        data: data
+    })
+}
+
+
diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue
index 09f65006..73631442 100644
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -1,14 +1,14 @@
 <template>
-    <div ref='chartRef' class='my-chart' />
+    <div ref="chartRef" class="my-chart" />
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
 import 'echarts-gl'
 import 'echarts/lib/component/dataZoom'
-import { color, gradeColor } from './color'
+import { color, gradeColor3 } from './color'
 
 const chartRef = ref<HTMLDivElement>()
 
@@ -112,7 +112,9 @@ const handlerBar = (options: any) => {
                             if (params.value == 0 || params.value == 3.14159) {
                                 return '#ccc'
                             } else {
-                                return color[params.seriesIndex]
+                                return props.options.color
+                                    ? props.options.color[params.seriesIndex]
+                                    : color[params.seriesIndex]
                             }
                         }
                     },
@@ -212,7 +214,7 @@ watch(
 )
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .my-chart {
     height: 100%;
     width: 100%;
diff --git a/src/components/echarts/color.ts b/src/components/echarts/color.ts
index ca9626ed..5bf9f66f 100644
--- a/src/components/echarts/color.ts
+++ b/src/components/echarts/color.ts
@@ -10,4 +10,5 @@ export const color = [
     '#66FFCC',
     '#B3B3B3'
 ]
-export const gradeColor = ['#339966', '#FFCC33', '#CC0000']
+export const gradeColor3 = ['#339966', '#FFCC33', '#CC0000']
+export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#CC0000']
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
index 94e5869d..d1a35a04 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
@@ -51,7 +51,7 @@ defineOptions({
 const isReload = ref(false)
 const monitoringPoint = useMonitoringPoint()
 const height = mainHeight(82)
-const activeName = ref('1')
+const activeName = ref('2')
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue
index 8c85bb77..0d31ebfd 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue
@@ -1,173 +1,206 @@
 <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>
-                <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 { getQualityAssessData } from '@/api/harmonic-boot/asses'
+import { gradeColor5 } from '@/components/echarts/color'
 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 gradeNames = ['优质', '良好', '一般', '较差', '极差']
+const grade = gradeColor5.map((item, index) => {
+    return {
+        name: gradeNames[index],
+        color: item
+    }
+})
 
 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
-            })
+    formData.id = monitoringPoint.state.lineId
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    getQualityAssessData(formData).then((res: any) => {
+        let data = res.data.syn[0]
+        if (data == 3.14159) {
+            data = 0.25
+        } else if (data == 3.1415) {
+            data = 0.15
         }
-    )
-}
+        options.value = {
+            title: {
+                text: '稳态综合评估',
+                x: 'center',
+                y: '0%'
+            },
+            tooltip: {
+                trigger: 'item',
+                axisPointer: {
+                    type: 'shadow',
+                    label: {
+                        color: '#fff',
+                        fontSize: 16
+                    }
+                },
+                textStyle: {
+                    color: '#fff',
+                    fontStyle: 'normal',
 
+                    opacity: 0.35,
+                    fontSize: 14
+                },
+                borderColor: '#fff',
+                backgroundColor: 'rgba(0,0,0,0.35)',
+                formatter: function (params: any) {
+                    if (params.value >= 5) {
+                        return params.name + ' : ' + '优质'
+                    } else if (params.value > 4 && params.value <= 5) {
+                        return params.name + ' : ' + '良好'
+                    } else if (params.value > 3 && params.value <= 4) {
+                        return params.name + ' : ' + '合格'
+                    } else if (params.value > 2 && params.value <= 3) {
+                        return params.name + ' : ' + '较差'
+                    } else if (params.value <= 2 && params.value >= 1) {
+                        return params.name + ' : ' + '极差'
+                    } else if (params.value >= 0.25 && params.value < 1) {
+                        return params.name + ' : ' + '暂无数据'
+                    } else if (params.value <= 0.15 && params.value >= 0) {
+                        return params.name + ' : ' + '/'
+                    }
+                }
+            },
+            xAxis: [
+                {
+                    name: '指标',
+                    type: 'category',
+                    data: ['稳态综合评估'],
+                    axisLabel: {
+                        margin: 10
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        symbol: ['none', 'arrow']
+                    }
+                }
+            ],
+            yAxis: {
+                name: '等级',
+                type: 'value',
+                min: 0,
+                max: 6,
+                axisLabel: {
+                    show: true,
+                    // 这里重新定义就可以
+                    formatter: function (value: number) {
+                        var texts = []
+                        if (value === 1) {
+                            texts.push('1级')
+                        } else if (value === 2) {
+                            texts.push('2级')
+                        } else if (value === 3) {
+                            texts.push('3级')
+                        } else if (value === 4) {
+                            texts.push('4级')
+                        } else if (value === 5) {
+                            texts.push('5级')
+                        }
+                        return texts
+                    }
+                },
+                axisLine: {
+                    show: true,
+                    symbol: ['none', 'arrow']
+                }
+            },
+            series: [
+                {
+                    name: '综合评估',
+                    type: 'bar',
+                    label: {
+                        show: true,
+                        position: 'top',
+                        distance: 2,
+                        color: '#fff',
+                        fontWeight: 'bolder'
+                    },
+                    barWidth: '45',
+                    data: [
+                        {
+                            value: data
+                        }
+                    ],
+                    markLine: {
+                        silent: false,
+                        symbol: 'circle',
+                        data: grade.map((item, index) => {
+                            return {
+                                yAxis: grade.length - index,
+                                name: item.name,
+                                lineStyle: {
+                                    color: item.color
+                                },
+                                label: {
+                                    color: item.color,
+                                    formatter: item.name
+                                }
+                            }
+                        })
+                    },
+                    itemStyle:{
+                        color: (params: any) => {
+                            if(params.value > 5){
+                                return gradeColor5[0]
+                            }else if(params.value > 4){
+                                return gradeColor5[1]
+                            }else if(params.value > 3){
+                                return gradeColor5[2]
+                            }else if(params.value > 2){
+                                return gradeColor5[3]
+                            }else{
+                                return gradeColor5[4]
+                            }
+                        }
+                    }
+                }
+            ],
+            options: {
+                dataZoom: null
+            }
+        }
+        nextTick(() => {
+            loading.value = false
+        })
+    })
+}
 
 onMounted(() => {
     init()
 })
-
 </script>
 <style></style>
diff --git a/src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue b/src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue
index a66f92b6..db0f6761 100644
--- a/src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue
+++ b/src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue
@@ -11,12 +11,12 @@
         <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>
+                <el-tag style='width: 20px;height: 12px' :style='{background: gradeColor3[2]}'></el-tag>
+                <span class='ml2' :style='{color: gradeColor3[2]}'> {{ 'X<60%' }} </span>
+                <el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor3[1]}'></el-tag>
+                <span class='ml2' :style='{color: gradeColor3[1]}'>{{ '60%≤X<90%' }} </span>
+                <el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor3[0]}'></el-tag>
+                <span class='ml2' :style='{color: gradeColor3[0]}'>  {{ 'X≥90 %' }}</span>
             </div>
             <my-echart :options='secondOptions' style='flex: 1;height: 100%' />
             <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
@@ -29,7 +29,7 @@ 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'
+import { gradeColor3 } from '@/components/echarts/color'
 
 const datePickerRef = ref()
 const loading = ref(true)
@@ -158,11 +158,11 @@ const initFirst = () => {
                             return '#ccc'
                         } else {
                             if (params.value < 60) {
-                                return gradeColor[2]
+                                return gradeColor3[2]
                             } else if (params.value < 90) {
-                                return gradeColor[1]
+                                return gradeColor3[1]
                             } else {
-                                return gradeColor[0]
+                                return gradeColor3[0]
                             }
                         }
                     }
@@ -174,7 +174,7 @@ const initFirst = () => {
                         {
                             yAxis: 100,
                             lineStyle: {
-                                color: gradeColor[0]
+                                color: gradeColor3[0]
                             },
                             label: {
                                 position: 'end',
@@ -184,7 +184,7 @@ const initFirst = () => {
                         {
                             yAxis: 90,
                             lineStyle: {
-                                color: gradeColor[1]
+                                color: gradeColor3[1]
                             },
                             label: {
                                 position: 'end',
@@ -194,7 +194,7 @@ const initFirst = () => {
                         {
                             yAxis: 60,
                             lineStyle: {
-                                color: gradeColor[2]
+                                color: gradeColor3[2]
                             },
                             label: {
                                 position: 'end',