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

<template>
    <div>
        <!--暂态事件概率分布 -->
        <TableHeader ref="TableHeaderRef"  :timeKeyList="prop.timeKey" :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'
import { getTime } from '@/utils/formatTime'

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

const TableHeaderRef = ref()

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 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: () => {
       setTime()
    },
    loadCallback: () => {
        const processedData = processDataForChart(tableStore.table.data.innerList || [])
        const trendList = tableStore.table.data.trendList || []
        const xlist = tableStore.table.data.xlist || []

        // 处理趋势图数据
        const seriesData = trendList.map((item: any) => {
            // 根据接口返回的name字段确定系列名称和颜色
            let name = ''
            let color = ''

            switch (item.name) {
                case 'Evt_Sys_DipStr':
                    name = '电压暂降'
                    color = '#FFBF00'
                    break
                case 'Evt_Sys_IntrStr':
                    name = '电压中断'
                    color = '#FF9100'
                    break
                case 'Evt_Sys_SwlStr':
                    name = '电压暂升'
                    color = config.layout.elementUiPrimary[0]
                    break
                default:
                    name = item.name
                    color = '#000000'
            }

            return {
                name: name,
                type: 'line',
                showSymbol: false,
                color: color,
                data: item.trendList?.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) {
                        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,
                      nameGap: 40,
                   
                },
                yAxis3D: {
                    type: 'category',
                    name: '持续时间',
                    data: yLabels,
                     nameGap: 40,
                  
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                zAxis3D: {
                    type: 'value',
                    minInterval: 10,
                    name: '暂态事件次数',
                       nameGap: 30,
                },
                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
                            }
                        },
                      
                        
                    }
                ]
            }
        }

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

const setTime = () => {
    const time = getTime(
        (TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
        prop.timeKey,
        fullscreen.value
            ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
            : prop.timeValue
    )

    if (Array.isArray(time)) {
        tableStore.table.params.searchBeginTime = time[0]
        tableStore.table.params.searchEndTime = time[1]
        TableHeaderRef.value?.setInterval(time[2] - 0)
        TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
    } else {
        console.warn('获取时间失败，time 不是一个有效数组')
    }
}

watch(
    () => prop.timeKey,
    val => {
        tableStore.index()
    }
)

watch(
    () => prop.timeValue,
    (newVal, oldVal) => {
         tableStore.index()
    },
    {
        deep: true
    }
)
</script>
<style lang="scss" scoped></style>