admin-govern/src/components/cockpit/transientDistribution/index.vue

<template>
    <div>
        <!--暂态事件概率分布 -->
        <TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
        <my-echart
            class="tall"
            :options="echartList"
            :style="{
                width: prop.width,
                height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
            }"
        />
        <my-echart
            class="mt10"
            :options="echartList1"
            :style="{
                width: prop.width,
                height: `calc(${prop.height} / 2  - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
            }"
        />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
import TableHeader from '@/components/table/header/index.vue'

const prop = defineProps({
    w: { type: [String, Number] },
    h: { type: [String, Number] },
    width: { type: [String, Number] },
    height: { type: [String, Number] },
    timeKey: { type: [String, Number] },
    timeValue: { type: Object }
})

const headerHeight = ref(57)

const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
    headerHeight.value = height

    if (datePickerValue && datePickerValue.timeValue) {
        // 更新时间参数
        tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
        tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
    }
}

// 计算是否全屏展示
const fullscreen = computed(() => {
    const w = Number(prop.w)
    const h = Number(prop.h)
    if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
        // 执行相应逻辑
        return true
    } else {
        return false
    }
})

const config = useConfig()

const echartList = ref({})

const echartList1 = ref({})

// const echartList1 = ref({
//     title: {
//         text: '越限时间概率分布'
//     },

//     xAxis: {
//         // name: '时间',
//         // data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
//         type: 'time',
//         axisLabel: {
//             formatter: {
//                 day: '{MM}-{dd}',
//                 month: '{MM}',
//                 year: '{yyyy}'
//             }
//         }
//     },

//     yAxis: {
//         name: '次' // 给X轴加单位
//     },
//     grid: {
//         left: '10px',
//         right: '20px'
//     },
//     options: {
//         series: [
//             {
//                 type: 'line',
//                 showSymbol: false,
//                 // smooth: true,
//                 name: '电压中断',
//                 color: '#FF9100',
//                 data: [
//                     ['2025-10-16 07:00:00', 10],
//                     ['2025-10-16 07:15:00', 10],
//                     ['2025-10-16 07:30:00', 10],
//                     ['2025-10-16 07:45:00', 10],
//                     ['2025-10-16 08:00:00', 30],
//                     ['2025-10-16 08:15:00', 50],
//                     ['2025-10-16 08:30:00', 60],
//                     ['2025-10-16 08:45:00', 70],
//                     ['2025-10-16 09:00:00', 100],
//                     ['2025-10-16 09:15:00', 120],
//                     ['2025-10-16 09:30:00', 130],
//                     ['2025-10-16 09:45:00', 140],
//                     ['2025-10-16 10:00:00', 160],
//                     ['2025-10-16 10:15:00', 160],
//                     ['2025-10-16 10:30:00', 130],
//                     ['2025-10-16 10:45:00', 120],
//                     ['2025-10-16 11:00:00', 140],
//                     ['2025-10-16 11:15:00', 80],
//                     ['2025-10-16 11:30:00', 70],
//                     ['2025-10-16 11:45:00', 90],
//                     ['2025-10-16 12:00:00', 60],
//                     ['2025-10-16 12:15:00', 60],
//                     ['2025-10-16 12:30:00', 60],
//                     ['2025-10-16 12:45:00', 60]
//                 ]
//             },
//             {
//                 type: 'line',
//                 showSymbol: false,
//                 // smooth: true,
//                 color: '#FFBF00',
//                 name: '电压暂降',
//                 data: [
//                     ['2025-10-16 07:00:00', 1],
//                     ['2025-10-16 07:15:00', 1],
//                     ['2025-10-16 07:30:00', 1],
//                     ['2025-10-16 07:45:00', 1],
//                     ['2025-10-16 08:00:00', 3],
//                     ['2025-10-16 08:15:00', 5],
//                     ['2025-10-16 08:30:00', 6],
//                     ['2025-10-16 08:45:00', 7],
//                     ['2025-10-16 09:00:00', 10],
//                     ['2025-10-16 09:15:00', 12],
//                     ['2025-10-16 09:30:00', 13],
//                     ['2025-10-16 09:45:00', 14],
//                     ['2025-10-16 10:00:00', 16],
//                     ['2025-10-16 10:15:00', 16],
//                     ['2025-10-16 10:30:00', 13],
//                     ['2025-10-16 10:45:00', 12],
//                     ['2025-10-16 11:00:00', 14],
//                     ['2025-10-16 11:15:00', 8],
//                     ['2025-10-16 11:30:00', 7],
//                     ['2025-10-16 11:45:00', 9],
//                     ['2025-10-16 12:00:00', 6],
//                     ['2025-10-16 12:15:00', 6],
//                     ['2025-10-16 12:30:00', 6],
//                     ['2025-10-16 12:45:00', 6]
//                 ]
//             },
//             {
//                 type: 'line',
//                 showSymbol: false,
//                 // smooth: true,
//                 name: '电压暂升',
//                 color: config.layout.elementUiPrimary[0],
//                 data: [
//                     ['2025-10-16 07:00:00', 19],
//                     ['2025-10-16 07:15:00', 19],
//                     ['2025-10-16 07:30:00', 19],
//                     ['2025-10-16 07:45:00', 19],
//                     ['2025-10-16 08:00:00', 39],
//                     ['2025-10-16 08:15:00', 59],
//                     ['2025-10-16 08:30:00', 69],
//                     ['2025-10-16 08:45:00', 79],
//                     ['2025-10-16 09:00:00', 109],
//                     ['2025-10-16 09:15:00', 129],
//                     ['2025-10-16 09:30:00', 139],
//                     ['2025-10-16 09:45:00', 149],
//                     ['2025-10-16 10:00:00', 169],
//                     ['2025-10-16 10:15:00', 169],
//                     ['2025-10-16 10:30:00', 139],
//                     ['2025-10-16 10:45:00', 129],
//                     ['2025-10-16 11:00:00', 149],
//                     ['2025-10-16 11:15:00', 89],
//                     ['2025-10-16 11:30:00', 79],
//                     ['2025-10-16 11:45:00', 99],
//                     ['2025-10-16 12:00:00', 69],
//                     ['2025-10-16 12:15:00', 69],
//                     ['2025-10-16 12:30:00', 69],
//                     ['2025-10-16 12:45:00', 69]
//                 ]
//             }
//         ]
//     }
// })
const processDataForChart = (rawData: any[]) => {
    // 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
    const chartData = rawData.map(item => [item.x, item.y, item.z])

    return chartData
}

const tableStore: any = new TableStore({
    url: '/cs-harmonic-boot/csevent/getEventCoords',
    method: 'POST',
    showPage: false,
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
    },
    loadCallback: () => {
        const processedData = processDataForChart(tableStore.table.data.innerList || [])
        const trendList = tableStore.table.data.trendList || []
        const xlist = tableStore.table.data.xlist || []

        // 处理趋势图数据
        const seriesData = [
            {
                name: '电压中断',
                type: 'line',
                showSymbol: false,
                color: '#FF9100',
                data: trendList[0]?.map((value: number, index: number) => [xlist[index], value]) || []
            },
            {
                name: '电压暂降',
                type: 'line',
                showSymbol: false,
                color: '#FFBF00',
                data: trendList[1]?.map((value: number, index: number) => [xlist[index], value]) || []
            },
            {
                name: '电压暂升',
                type: 'line',
                showSymbol: false,
                color: config.layout.elementUiPrimary[0],
                data: trendList[2]?.map((value: number, index: number) => [xlist[index], value]) || []
            }
        ]

        // 获取x轴和y轴的标签值
        const xLabels = [
            '0-10%',
            '10%-20%',
            '20%-30%',
            '30%-40%',
            '40%-50%',
            '50%-60%',
            '60%-70%',
            '70%-80%',
            '80%-90%',
            '90%-100%'
        ]
        const yLabels = ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s']

        echartList.value = {
            options: {
                xAxis: null,
                yAxis: null,
                dataZoom: null,
                backgroundColor: '#fff',
                tooltip: {
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.55)',
                    borderWidth: 0,
                    formatter: function (params: any) {
                        console.log(params, '99000')
                        var tips = ''

                        tips += '持续时间: ' + yLabels[params.value[1]] + '</br>'
                        tips += '特征幅值: ' + xLabels[params.value[0]] + '</br>'
                        tips += '事件次数: ' + params.value[2] + '</br>'
                        return tips
                    }
                },
                title: {
                    text: '暂态事件概率分布',
                    x: 'center'
                },
                visualMap: {
                    max: 500,
                    show: false,
                    inRange: {
                        color: ['#313695', '#00BB00', '#ff8000', '#a50026']
                    }
                },
                xAxis3D: {
                    type: 'category',
                    name: '特征幅值',
                    data: xLabels,
                    axisLine: {
                        lineStyle: {
                            color: '#111'
                        }
                    },
                    axisLabel: {
                        color: '#111'
                    }
                },
                yAxis3D: {
                    type: 'category',
                    name: '持续时间',
                    data: yLabels,
                    nameTextStyle: {
                        color: '#111'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#111'
                        }
                    },
                    axisLabel: {
                        color: '#111'
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#111'],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                zAxis3D: {
                    type: 'value',
                    splitNumber: 10,
                    minInterval: 10,
                    name: '暂态事件次数'
                },
                grid3D: {
                    viewControl: {
                        projection: 'perspective',
                        distance: 250
                    },
                    boxWidth: 200,
                    boxDepth: 80,
                    light: {
                        main: {
                            intensity: 1.2
                        },
                        ambient: {
                            intensity: 0.3
                        }
                    }
                },
                series: [
                    {
                        type: 'bar3D',
                        data: processedData,
                        shading: 'realistic',
                        label: {
                            show: false,
                            textStyle: {
                                fontSize: 16,
                                borderWidth: 1
                            }
                        },
                        itemStyle: {
                            opacity: 1
                        },
                        emphasis: {
                            label: {
                                textStyle: {
                                    fontSize: 20,
                                    color: '#900'
                                }
                            },
                            itemStyle: {
                                color: '#900'
                            }
                        }
                    }
                ]
            }
        }

        echartList1.value = {
            title: {
                text: '越限时间概率分布'
            },
            xAxis: {
                type: 'category',
                data: xlist,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            yAxis: {
                name: '次'
            },
            grid: {
                left: '10px',
                right: '20px'
            },
            series: seriesData
        }
    }
})

const tableRef = ref()
provide('tableRef', tableRef)

provide('tableStore', tableStore)

onMounted(() => {
    tableStore.index()
})
watch(
    () => prop.timeKey,
    val => {
        tableStore.index()
    }
)
watch(
    () => prop.timeValue,
    (newVal, oldVal) => {
        // 当外部时间值变化时，更新表格的时间参数
        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
            tableStore.table.params.searchBeginTime = newVal[0]
            tableStore.table.params.searchEndTime = newVal[1]
            tableStore.index()
        }
    },
    {
        deep: true
    }
)
const addMenu = () => {}
</script>
<style lang="scss" scoped></style>