指标越限程度联调

2025-11-14 09:34:39 +08:00
parent d9efb37083
commit c1ebcfed6f
6 changed files with 196 additions and 104 deletions
--- a/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
+++ b/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
@@ -1,11 +1,9 @@
 <template>
    <!-- 指标日趋势图 -->
-    <el-dialog draggable title="指标日趋势图" v-model="dialogVisible" append-to-body width="70%">
-        <my-echart
-            class="tall"
-            :options="echartList"
-            style="width: 98%; height: 320px"
-        />
+    <el-dialog draggable :title="dialogTitle" v-model="dialogVisible" append-to-body width="70%">
+        <div :style="pageHeight">
+            <my-echart class="tall" :options="echartList" style="width: 98%" />
+        </div>
    </el-dialog>
 </template>

@@ -13,6 +11,9 @@
 import { ref, onMounted, provide, reactive, watch, h } from 'vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useConfig } from '@/stores/config'
+import { mainHeight } from '@/utils/layout'
+import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
+
 const prop = defineProps({
    width: { type: String },
    height: { type: String },
@@ -20,70 +21,130 @@ const prop = defineProps({
    timeValue: { type: Object }
 })

+const pageHeight = ref(mainHeight(332))
+
 const dialogVisible: any = ref(false)

+const dialogTitle = ref('')

 const config = useConfig()

-const echartList = ref({
-    title: {
-        text: '指标日趋势图',
-    },
-    xAxis: {
-        type: 'category',
-        data: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', 
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
-        ],
-        axisLabel: {
-            interval: 1
-        }
-    },
-    yAxis: {
-        type: 'value',
-        name: '数值'
-    },
-    grid: {
-        left: '10px',
-        right: '20px',
-        containLabel: true
-    },
-    options: {
-        series: [
-            {
-                name: '指标值',
-                type: 'line',
-                showSymbol: true,
-                smooth: true,
-                data: [
-                    10, 12, 15, 18, 22, 28, 
-                    35, 45, 60, 75, 88, 95,
-                    100, 98, 90, 80, 70, 60,
-                    50, 40, 30, 25, 20, 15
-                ],
-                itemStyle: {
-                    normal: {
-                        color: config.layout.elementUiPrimary[0]
+const dialogText = ref('')
+
+const echartList = ref()
+
+const init = () => {
+    echartList.value = {
+        title: {
+            text: dialogText.value,
+            textStyle: {
+                fontSize: 14,
+                rich: {
+                    lineName: {
+                        color: '#333',
+                        fontSize: 14
+                    },
+                    timeLabel: {
+                        color: '#333',
+                        fontSize: 14,
+                        padding: [0, 0, 0, 10]
+                    },
+                    name: {
+                        color: '#333',
+                        fontSize: 14,
+                        padding: [0, 0, 0, 10]
                    }
-                },
-                areaStyle: {
-                    opacity: 0.3
                }
            }
-        ]
+        },
+        xAxis: {
+            type: 'category',
+            data: []
+        },
+        yAxis: {
+            type: 'value',
+            name: '数值'
+        },
+        grid: {
+            left: '1%',
+            right: '45px',
+            bottom: '40px',
+            top: '15%',
+            containLabel: true
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100
+            }
+        ],
+        options: {
+            series: []
+        }
    }
-})
+}

+const initData = async (row: any) => {
+    limitExtentDayData({ code: row.code, lineId: row.lineId, time: row.time }).then(res => {
+        if (res.data && res.data.length > 0) {
+            // 重新初始化图表
+            init()

-onMounted(() => {
-    
-})
+            // 从第一条数据中提取时间作为x轴数据
+            const firstItem = res.data[0]
+            const xAxisData = firstItem.time.split(',')

+            // 定义相位颜色映射
+            const phaseColors: any = {
+                A: '#DAA520',
+                B: '#2E8B57',
+                C: '#A52a2a'
+            }
+
+            // 处理每条相位数据
+            const seriesData = res.data.map((item: any) => {
+                const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
+
+                return {
+                    name: `${item.phasic}相`,
+                    type: 'line',
+                    showSymbol: true,
+                    smooth: true,
+                    data: values,
+                    itemStyle: {
+                        normal: {
+                            // 根据相位设置对应颜色
+                            color: phaseColors[item.phasic] || config.layout.elementUiPrimary[0]
+                        }
+                    }
+                }
+            })
+
+            // 更新图表配置
+            echartList.value.xAxis.data = xAxisData
+            echartList.value.options.series = seriesData
+        }
+    })
+}
+
+onMounted(() => {})

 const open = async (row: any) => {
    dialogVisible.value = true
+    dialogTitle.value = row.name + '日趋势图'
+    dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
+    nextTick(() => {
+        initData(row)
+    })
 }

 defineExpose({ open })
--- a/src/components/cockpit/exceedanceLevel/index.vue
+++ b/src/components/cockpit/exceedanceLevel/index.vue
@@ -66,34 +66,6 @@ const fullscreen = computed(() => {

 const echartList = ref()

-// const echartList = ref({
-//     title: {
-//         text: '指标越限严重度'
-//     },
-
-//     xAxis: {
-//         data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
-//     },
-
-//     yAxis: {
-//         name: '%', // 给X轴加单位
-//         interval: 20
-//     },
-//     grid: {
-//         left: '10px',
-//         right: '20px'
-//     },
-//     options: {
-//         series: [
-//             {
-//                 type: 'bar',
-//                 name: '越限占比',
-//                 data: [0, 7.5, 36, 0, 80],
-//                 barMaxWidth: 30
-//             }
-//         ]
-//     }
-// })
 const dailyTrendChartRef = ref()
 const tableStore: any = new TableStore({
    url: '/harmonic-boot/limitRateDetailD/limitExtentData',
@@ -122,7 +94,7 @@ const tableStore: any = new TableStore({
            minWidth: '60',
            render: 'customTemplate',
            customTemplate: (row: any) => {
-                return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
+                return `<span style='cursor: pointer;text-decoration: underline;'>${row.maxValue}</span>`
            }
        },
        {
@@ -138,12 +110,32 @@ const tableStore: any = new TableStore({
        {
            title: '发生日期',
            field: 'time',
-            minWidth: '100'
+            minWidth: '60',
+            render: 'customTemplate',
+            customTemplate: (row: any) => {
+                if (
+                    row.time !== null &&
+                    row.time !== undefined &&
+                    row.time !== ''
+                ) {
+                    return `<span>${row.time}</span>`
+                } else {
+                    return `<span>/</span>`
+                }
+            }
        },
        {
            title: '越限最高监测点',
            field: 'lineName',
-            minWidth: '90'
+            minWidth: '90',
+            render: 'customTemplate',
+            customTemplate: (row: any) => {
+                if (row.lineName !== null && row.lineName !== undefined && row.lineName !== '') {
+                    return `<span>${row.lineName}</span>`
+                } else {
+                    return `<span>/</span>`
+                }
+            }
        }
    ],
    beforeSearchFun: () => {
@@ -166,12 +158,12 @@ const tableStore: any = new TableStore({
        // 定义 x 轴标签顺序
        const xAxisLabels = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']

-        // 根据指标名称顺序提取对应的 maxValue 数据
+        // 根据指标名称顺序提取对应的 extent 数据
        const chartData = xAxisLabels.map(label => {
            // 在表格数据中查找对应指标名称的数据项
            const item = tableStore.table.data.find((row: any) => row.name === label)
-            // 如果找到对应项，则返回 maxValue 值，否则返回 0
-            return item ? parseFloat(item.maxValue) || 0 : 0
+            // 如果找到对应项，则返回 extent 值，否则返回 0
+            return item ? item.extent || 0 : 0
        })
        echartList.value = {
            title: {
@@ -183,8 +175,8 @@ const tableStore: any = new TableStore({
            },

            yAxis: {
-                name: '%', // 给X轴加单位
-                interval: 20
+                name: '%' // 给X轴加单位
+                // interval: 20
            },
            grid: {
                left: '10px',
@@ -211,8 +203,7 @@ provide('tableStore', tableStore)

 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
-    if (column.field != 'name') {
-        console.log(row)
+    if (column.field == 'maxValue' && row.lineId) {
        dailyTrendChartRef.value.open(row)
    }
 }