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

<template>
    <div>
        <!--指标越限概率分布 -->
        <TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen">
            <template v-slot:select>
                <el-form-item label="监测点">
                    <el-select size="small" v-model="tableStore.table.params.lineId">
                        <el-option
                            v-for="item in lineList"
                            :key="item.lineId"
                            :label="item.name"
                            :value="item.lineId"
                        />
                    </el-select>
                </el-form-item>
            </template>
        </TableHeader>
        <div v-loading="tableStore.table.loading">
            <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>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'

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 options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))

const lineList = 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 echartList = ref()

const echartList1 = ref()

const probabilityData = ref()

const initLineList = async () => {
    cslineList({}).then(res => {
        lineList.value = res.data
        tableStore.table.params.lineId = lineList.value[0].lineId
        tableStore.index()
    })
}

// 越限程度概率分布
const initProbabilityData = () => {
    // 只有当 lineList 已加载且有数据时才设置默认 lineId
    if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
        tableStore.table.params.lineId = lineList.value[0].lineId
    }
    const params = {
        searchBeginTime: tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
        searchEndTime: tableStore.table.params.searchEndTime || prop.timeValue?.[1],
        lineId: tableStore.table.params.lineId
    }
    limitProbabilityData(params).then((res: any) => {
        probabilityData.value = res.data

        // 处理接口返回的数据，转换为图表所需格式
        if (res.data && Array.isArray(res.data)) {
            // 定义指标类型顺序
            const indicatorOrder = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相电压不平衡度', '频率偏差']
            // 按照指定顺序排序数据
            const sortedData = [...res.data].sort((a, b) => {
                return indicatorOrder.indexOf(a.indexName) - indicatorOrder.indexOf(b.indexName)
            })

            // 构造 series 数据
            const seriesData: any = []
            let maxValue: any = 0 // 用于存储数据中的最大值
            // 遍历每个越限程度区间（0-20%, 20-40%, 40-60%, 60-80%, 80-100%）
            for (let xIndex = 0; xIndex < 5; xIndex++) {
                // 遍历每个指标类型
                sortedData.forEach((item, yIndex) => {
                    // 从 extentGrades 中获取对应区间的值
                    const extentGrade = item.extentGrades[xIndex]
                    const value = extentGrade ? (Object.values(extentGrade)[0] as number) : 0
                    seriesData.push([xIndex, yIndex, value])

                    // 更新最大值
                    if (value > maxValue) {
                        maxValue = value
                    }
                })
            }

            // 计算 z 轴最大值（最大值加 5）
            const zAxisMax = Math.ceil(maxValue) + 5
            // 构造 yAxis 数据（指标类型名称）
            const yAxisData = sortedData.map(item => item.indexName)

            echartList.value = {
                options: {
                    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 yIndex = params.value[1] //获取y轴索引
                            var tips = ''
                            tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
                            tips += '越限程度: ' + params.seriesName + '</br>'
                            tips += '越限次数: ' + params.value[2] + '</br>'
                            return tips
                        }
                    },
                    title: {
                        text: '指标越限概率分布',
                        x: 'center',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal'
                        }
                    },
                    // 移除或隐藏 visualMap 组件
                    visualMap: {
                        show: false, // 设置为 false 隐藏右侧颜色条
                        min: 0,
                        // max: 100,
                        max: zAxisMax, // 使用计算出的最大值加5
                        inRange: {
                            color: ['#313695', '#00BB00', '#ff8000', '#d73027', '#a50026']
                        }
                    },
                    // 添加 legend 配置并设置为不显示
                    legend: {
                        show: false // 隐藏图例
                    },
                    xAxis3D: {
                        type: 'category',
                        name: '越限程度',
                        nameLocation: 'middle',
                        nameGap: 30,
                        data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%'],
                        axisLine: {
                            lineStyle: {
                                color: '#111'
                            }
                        },
                        axisLabel: {
                            color: '#111',
                            margin: 15
                        },
                        nameTextStyle: {
                            color: '#111'
                        }
                    },
                    yAxis3D: {
                        type: 'category',
                        name: '指标类型',
                        nameLocation: 'middle',
                        nameGap: 30,
                        data: yAxisData,
                        nameTextStyle: {
                            color: '#111'
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#111'
                            }
                        },
                        axisLabel: {
                            color: '#111',
                            margin: 15
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#111'],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    },
                    zAxis3D: {
                        type: 'value',
                        name: '越限次数',
                        nameLocation: 'middle',
                        nameGap: 30,
                        nameTextStyle: {
                            color: '#111'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#111'
                            }
                        },
                        axisLabel: {
                            color: '#111'
                        },
                        min: 0,
                        max: zAxisMax // 使用计算出的最大值加5
                        // max: 100
                    },
                    grid3D: {
                        viewControl: {
                            projection: 'perspective',
                            distance: 250,
                            rotateSensitivity: 10,
                            zoomSensitivity: 2
                        },
                        boxWidth: 150,
                        boxDepth: 100,
                        boxHeight: 100,
                        light: {
                            main: {
                                intensity: 1.2
                            },
                            ambient: {
                                intensity: 0.4
                            }
                        }
                    },
                    series: [
                        {
                            type: 'bar3D',
                            name: '0-20%',
                            data: seriesData.filter((item: any) => item[0] === 0),
                            shading: 'realistic',
                            label: {
                                show: false
                            },
                            itemStyle: {
                                opacity: 0.9
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 14,
                                        color: '#000'
                                    }
                                },
                                itemStyle: {
                                    color: '#ff8000'
                                }
                            }
                        },
                        {
                            type: 'bar3D',
                            name: '20-40%',
                            data: seriesData.filter((item: any) => item[0] === 1),
                            shading: 'realistic',
                            label: {
                                show: false
                            },
                            itemStyle: {
                                opacity: 0.9
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 14,
                                        color: '#000'
                                    }
                                },
                                itemStyle: {
                                    color: '#ff8000'
                                }
                            }
                        },
                        {
                            type: 'bar3D',
                            name: '40-60%',
                            data: seriesData.filter((item: any) => item[0] === 2),
                            shading: 'realistic',
                            label: {
                                show: false
                            },
                            itemStyle: {
                                opacity: 0.9
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 14,
                                        color: '#000'
                                    }
                                },
                                itemStyle: {
                                    color: '#ff8000'
                                }
                            }
                        },
                        {
                            type: 'bar3D',
                            name: '60-80%',
                            data: seriesData.filter((item: any) => item[0] === 3),
                            shading: 'realistic',
                            label: {
                                show: false
                            },
                            itemStyle: {
                                opacity: 0.9
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 14,
                                        color: '#000'
                                    }
                                },
                                itemStyle: {
                                    color: '#ff8000'
                                }
                            }
                        },
                        {
                            type: 'bar3D',
                            name: '80-100%',
                            data: seriesData.filter((item: any) => item[0] === 4),
                            shading: 'realistic',
                            label: {
                                show: false
                            },
                            itemStyle: {
                                opacity: 0.9
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 14,
                                        color: '#000'
                                    }
                                },
                                itemStyle: {
                                    color: '#ff8000'
                                }
                            }
                        }
                    ]
                }
            }
        }
    })
}

const tableStore: any = new TableStore({
    url: '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
    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]
        // 只有当 lineList 已加载且有数据时才设置默认 lineId
        if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
            tableStore.table.params.lineId = lineList.value[0].lineId
        }
    },
    loadCallback: () => {
        // 处理返回的数据，将其转换为图表所需格式
        const indexNames: any = [...new Set(tableStore.table.data.map((item: any) => item.indexName))]
        const timePeriods = [...new Set(tableStore.table.data.map((item: any) => item.timePeriod))]

        // 构建系列数据
        const seriesData = indexNames.map((indexName: string) => {
            const dataIndex = tableStore.table.data.filter((item: any) => item.indexName === indexName)
            return {
                name: indexName,
                type: 'line',
                symbol: 'none',
                data: dataIndex.map((item: any) => [item.timePeriod, item.times])
            }
        })

        echartList1.value = {
            title: {
                text: '越限时间概率分布'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: indexNames
            },
            xAxis: {
                type: 'category',
                name: '时间段',
                data: timePeriods
            },
            yAxis: {
                type: 'value'
                // name: '次数'
            },
            series: seriesData
        }
        initProbabilityData()
    }
})

provide('tableStore', tableStore)

onMounted(() => {
    initLineList()
})
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>