指标越限程度联调

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/F47Curve/index.vue
+++ b/src/components/cockpit/F47Curve/index.vue
@@ -12,12 +12,20 @@
            ref="chartRef"
            class="tall"
            :options="echartList"
-            :style="{ width: prop.width, height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)` }"
+            :style="{
+                width: prop.width,
+                height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
+            }"
            @chart-click="handleChartClick"
        />
        <el-dialog v-model="isWaveCharts" draggable title="瞬时/RMS波形" append-to-body width="70%">
-            <waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
-            @handleHideCharts="isWaveCharts = false" :wp="wp" />
+            <waveFormAnalysis
+                v-loading="loading"
+                v-if="isWaveCharts"
+                ref="waveFormAnalysisRef"
+                @handleHideCharts="isWaveCharts = false"
+                :wp="wp"
+            />
        </el-dialog>
    </div>
 </template>
@@ -27,10 +35,11 @@ import TableStore from '@/utils/tableStore'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getTimeOfTheMonth } from '@/utils/formatTime'
-import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue';
+import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { useRoute } from 'vue-router'
 import { useTimeCacheStore } from '@/stores/timeCache'
+import { analyseWave } from '@/api/common'

 const prop = defineProps({
    w: { type: String },
@@ -79,7 +88,10 @@ const loading = ref(false)

 const wp = ref({})

-const OverLimitDetailsRef = ref()
+const boxoList: any = ref({})
+
+const waveFormAnalysisRef: any = ref(null)
+
 const data = reactive({
    name: '事件个数',
    gs: 0,
@@ -93,7 +105,7 @@ const tableStore: any = new TableStore({
    showPage: false,

    column: [],
-     beforeSearchFun: () => {
+    beforeSearchFun: () => {
        // 尝试从缓存获取时间值
        let beginTime, endTime

@@ -419,7 +431,6 @@ onMounted(() => {

 // 点击事件处理函数
 const handleChartClick = (params: any) => {
-
    if (params.seriesName === '可容忍事件') {
        // 处理可容忍事件点击
        ElMessage.info(`点击了可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`)
@@ -432,9 +443,30 @@ const handleChartClick = (params: any) => {
 }

 // 可容忍事件点击处理函数
-const handleTolerableEventClick = (params: any) => {
-    console.log('可容忍事件详情:', params)
+const handleTolerableEventClick = async (row: any) => {
+    console.log('可容忍事件详情:', row)
    isWaveCharts.value = true
+    loading.value = true
+    isWaveCharts.value = true
+    await analyseWave(row.id)
+        .then(res => {
+            row.loading1 = false
+            if (res != undefined) {
+                boxoList.value = row
+                boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
+                boxoList.value.systemType = 'WX'
+                wp.value = res.data
+            }
+            loading.value = false
+        })
+        .catch(() => {
+            row.loading1 = false
+            loading.value = false
+        })
+
+    nextTick(() => {
+        waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
+    })
 }

 // 不可容忍事件点击处理函数
--- 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)
    }
 }
--- a/src/components/cockpit/indicatorFittingChart/components/harmonicRatio‌.vue
+++ b/src/components/cockpit/indicatorFittingChart/components/harmonicRatio‌.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog draggable title="谐波电压/电流含有率" v-model="dialogVisible" append-to-body width="70%">
+    <el-dialog draggable title="趋势图" v-model="dialogVisible" append-to-body width="70%">
        <!-- 总体指标占比详情谐波含有率 -->
        <div>
            <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
--- a/src/components/cockpit/indicatorFittingChart/index.vue
+++ b/src/components/cockpit/indicatorFittingChart/index.vue
@@ -11,7 +11,7 @@
        <Table
            ref="tableRef"
            @cell-click="cellClickEvent"
-            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -50 : 56}px )`"
+            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
        ></Table>
        <!-- 指标越限详情 -->
        <OverLimitDetails ref="OverLimitDetailsRef" />