admin-sjzx/src/views/cockpit/qualifiedRate.vue

<template>
    <!-- 稳态合格率统计图 -->
    <my-echart :style="{ width: prop.width, height: prop.height }" :options="options" />
</template>
<script setup lang="ts">
import { ref, onMounted, provide, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import * as echarts from 'echarts/core'
import { getTimeOfTheMonth } from '@/utils/formatTime'
const prop = defineProps({
    width: { type: String },
    height: { type: String },
    timeKey: { type: String }
})
const dictData = useDictData()
const options = ref({})
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])

const itemStyle = {
    normal: {
        // 随机显示
        //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

        // 定制显示（按顺序）
        color: function (params) {
            if (params.value >= 90) {
                return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                        {
                            offset: 1,
                            color: '#339966'
                        }
                    ],
                    false
                )
            } else if (params.value >= 60 && params.value <= 90) {
                return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                        {
                            offset: 1,
                            color: '#FFCC33'
                        }
                    ],
                    false
                )
            } else if (params.value <= 60 && params.value !== 3.14159) {
                return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                        {
                            offset: 1,
                            color: '#A52a2a'
                        }
                    ],
                    false
                )
            } else if (params.value == 3.14159) {
                return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                        {
                            offset: 1,
                            color: '#cccccc'
                        }
                    ],
                    false
                )
            }
        }
    }
}

const tableStore = new TableStore({
    url: '/harmonic-boot/steadyQualify/getSteadyQualifyCensus',
    showPage: false,
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.searchBeginTime = getTimeOfTheMonth(prop.timeKey)[0]
        tableStore.table.params.searchEndTime = getTimeOfTheMonth(prop.timeKey)[1]
    },
    loadCallback: () => {
        let code = tableStore.table.params.statisticalType.code
        let title = '',
            titleX = ''
        if (code == 'Power_Network') {
            title = '区域'
            titleX = '区域'
        } else if (code == 'Manufacturer') {
            title = '终端厂家'
            titleX = '终端\n厂家'
        } else if (code == 'Voltage_Level') {
            title = '电压等级'
            titleX = '电压\n等级'
        } else if (code == 'Load_Type') {
            title = '干扰源类型'
            titleX = '干扰\n源类型'
        } else if (code == 'Report_Type') {
            title = '上报类型'
            titleX = '上报\n类型'
        }
        options.value = {
            title: {
                text: title
            },
            legend: {
                show: false
            },

            tooltip: {
                formatter: function (params: any) {
                    let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
                    params.forEach((item: any) => {
                        const value = item.value === 3.14159 ? '暂无数据' : item.value // 处理特殊值
                        tips += `<div style=" display: flex;justify-content: space-between;">
                           <span>${item.marker}
                            ${item.seriesName}:
                           </span>　${value} 
                            </div>` // 统一格式
                    })
                    return tips
                }
            },

            xAxis: {
                name: titleX,
                data: tableStore.table.data.type
            },
            yAxis: {
                name: '%',
                max: 100
            },
            series: [
                {
                    name: '频率偏差',
                    type: 'bar',
                    itemStyle: itemStyle,
                    data: tableStore.table.data.freqOffset,
                    markLine: {
                        silent: false,
                        symbol: 'circle',
                        data: [
                            {
                                name: '',
                                yAxis: 100,
                                lineStyle: {
                                    color: '#339966'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#339966'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 90,
                                lineStyle: {
                                    color: '#FFCC33'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#FFCC33'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 60,
                                lineStyle: {
                                    color: '#A52a2a'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#A52a2a'
                                    }
                                }
                            }
                        ]
                    }
                },
                {
                    name: '闪变',
                    type: 'bar',
                    itemStyle: itemStyle,
                    data: tableStore.table.data.flicker
                },
                {
                    name: '三相电压不平衡',
                    type: 'bar',
                    itemStyle: itemStyle,
                    data: tableStore.table.data.voltageUnbalance
                },
                {
                    name: '谐波电压',
                    type: 'bar',
                    itemStyle: itemStyle,
                    data: tableStore.table.data.harmonicVoltage
                },
                {
                    name: '电压偏差',
                    type: 'bar',
                    itemStyle: itemStyle,
                    data: tableStore.table.data.voltageOffset
                },
                {
                    name: '谐波电流',
                    type: 'bar',
                    itemStyle: itemStyle,
                    data: tableStore.table.data.harmonicCurrent
                },
                {
                    name: '负序电流',
                    type: 'bar',
                    itemStyle: itemStyle,
                    data: tableStore.table.data.negativeCurrent
                },
                {
                    name: '间谐波电压含有率',
                    type: 'bar',
                    itemStyle: itemStyle,
                    data: tableStore.table.data.interHarmonic
                }
            ]
        }
    }
})
tableStore.table.params.deptIndex = dictData.state.area[0].id

tableStore.table.params.statisticalType = classificationData[0]
tableStore.table.params.scale = []
tableStore.table.params.manufacturer = []
tableStore.table.params.loadType = []
tableStore.table.params.serverName = 'harmonicBoot'
tableStore.table.params.powerFlag = 0
provide('tableStore', tableStore)

onMounted(() => {
    tableStore.index()
})
watch(
    () => prop.timeKey,
    val => {
        tableStore.index()
    }
)
</script>
<style scoped lang="scss"></style>