稳态指标合格率

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
+    })
+}

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>

src/components/table/index.vue

@@ -137,11 +137,8 @@ const pageSizes = computed(() => {
  * 记录选择的项
  */
 const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
-    const $table = tableRef.value
+    const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
-    if ($table) {
+    tableStore.onTableAction('selection-change', records)
-        const records = $table.getCheckboxRecords()
-        tableStore.onTableAction('selection-change', records)
-    }
 }
 
 const getRef = () => {

src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue

@@ -1,173 +1,300 @@
 <template>
-    <div style='display: flex;flex-direction: column;height: 100%'>
+    <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline='true'>
+        <el-form :inline="true">
-            <el-form-item label='日期'>
+            <el-form-item label="日期">
-                <DatePicker ref='datePickerRef'></DatePicker>
+                <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'>
+        <div style="flex: 1" class="mt10">
-            <my-echart :options='options' />
+            <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,
+    id: '',
-    startTime: '',
+    searchBeginTime: '',
-    endTime: ''
+    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.id = monitoringPoint.state.lineId
-    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
-    formData.endTime = datePickerRef.value.timeValue[1]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
-    getProbabilityDistribution(formData).then(
+    if (searchType.value == '1') {
-        (res: any) => {
+        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
-            let data = res.data
+            formData.searchBeginTime,
-            let sisttime = data.sisttime
+            formData.searchEndTime
-            let persisttime = data.persisttime
+        )
-            options.value = {
+    } else if (searchType.value == '2') {
-                backgroundColor: '#fff', //背景色,
+        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
-                title: {
+            formData.searchBeginTime,
-                    text: '持续时间的概率分布函数',
+            formData.searchEndTime
-                    x: 'center'
+        )
-                },
+    } else {
-                legend: {
+        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,
+                    position: 'top',
-                    data: ['概率分布', '占比'],
+                    distance: 2,
-
+                    color: '#fff',
-                    textStyle: {
+                    fontWeight: 'bolder'
-                        rich: {
-                            a: {
-                                verticalAlign: 'middle'
-                            }
-                        },
-
-                        padding: [2, 0, 0, 0] //[上、右、下、左]
-                    }
                 },
-
+                data: yData,
-                tooltip: {
+                markLine: {
-                    //提示框组件
+                    silent: false,
-                    trigger: 'axis',
+                    symbol: 'circle',
-
+                    data: [
-                    axisPointer: {
+                        {
-                        type: 'shadow',
+                            name: '',
-                        label: {
+                            yAxis: 100,
-                            color: '#fff',
+                            lineStyle: {
-                            fontSize: 16
+                                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,
+                itemStyle: {
-                xAxis: [
+                    color: (params: any) => {
-                    {
+                        if (params.value > 90) {
-                        type: 'category',
+                            return gradeColor3[0]
-                        name: '暂降幅值',
+                        } else if (params.value > 60) {
-                        nameGap: 10,
+                            return gradeColor3[1]
-                        nameTextStyle: {
+                        } else {
-                            fontSize: 12
+                            return gradeColor3[2]
-                        },
-                        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
+        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>

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,
                     // 这里重新定义就可以