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 echartList = ref({
//     options: {
//         xAxis: null,
//         yAxis: null,
//         dataZoom: null,
//         backgroundColor: '#fff',
//         tooltip: {
//             // trigger: 'axis'
//             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)
//                 var tips = ''
//                 for (var i = 0; i < params.length; i++) {
//                     tips += params[i].name + '</br/>'
//                     tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
//                 }
//                 return tips
//             }
//         },
//         title: {
//             text: '暂态事件概率分布',
//             x: 'center'
//         },

//         visualMap: {
//             max: 20,
//             show: false,
//             inRange: {
//                 color: ['#313695', '#00BB00', '#ff8000', '#a50026']
//             }
//         },
//         xAxis3D: {
//             type: 'category',
//             name: '特征幅值',
//             data: [
//                 '0-10%',
//                 '10%-20%',
//                 '20%-30%',
//                 '30%-40%',
//                 '40%-50%',
//                 '50%-60%',
//                 '60%-70%',
//                 '70%-80%',
//                 '80%-90%',
//                 '90%-100%'
//             ],
//             axisLine: {
//                 lineStyle: {
//                     color: '#111'
//                 }
//             },
//             axisLabel: {
//                 color: '#111'
//             }
//         },
//         yAxis3D: {
//             type: 'category',
//             name: '持续时间',
//             data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'],
//             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: [
//                     [0, 0, 1],
//                     [0, 1, 1],
//                     [0.2, 1]
//                 ],
//                 shading: 'realistic',
//                 label: {
//                     show: false,
//                     textStyle: {
//                         fontSize: 16,
//                         borderWidth: 1
//                     }
//                 },

//                 itemStyle: {
//                     opacity: 1
//                 },
//                 emphasis: {
//                     label: {
//                         textStyle: {
//                             fontSize: 20,
//                             color: '#900'
//                         }
//                     },
//                     itemStyle: {
//                         color: '#900'
//                     }
//                 }
//             }
//         ]
//     }
// })
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 || []);
        
        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,'333455')
                            var tips = ''
                            tips += '持续时间: ' + params.value[1] + '</br>'
                            tips += '特征幅值: ' + params.seriesName + '</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: [
                        '0-10%',
                        '10%-20%',
                        '20%-30%',
                        '30%-40%',
                        '40%-50%',
                        '50%-60%',
                        '60%-70%',
                        '70%-80%',
                        '80%-90%',
                        '90%-100%'
                    ],
                    axisLine: {
                        lineStyle: {
                            color: '#111'
                        }
                    },
                    axisLabel: {
                        color: '#111'
                    }
                },
                yAxis3D: {
                    type: 'category',
                    name: '持续时间',
                    data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'],
                    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'
                            }
                        }
                    }
                ]
            }
        }
    }
})

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>