admin-sjzx/src/views/pqs/harmonicMonitoring/area/onlinerate/components/charts.vue

<template>
    <div class="charts" style="position: relative; width: 100%">
        <div style="position: absolute; right: 60px; top: 5px; font-weight: bold"
            v-if="!loading && tableStore.table.data && tableStore.table.data.type && tableStore.table.data.type.length != 0">
            <el-tag style="
                    background: #A52a2a;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #A52a2a;
                    float: left;
                    margin-top: 2px;
                "></el-tag>
            <span style="color: #A52a2a; font-weight: 400; float: left">&nbsp&nbsp在线率<60% &nbsp&nbsp</span>
                    <el-tag size="mini" style="
                    background: #ffcc33;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #ffcc33;
                    float: left;
                    margin-top: 2px;
                "></el-tag>
                    <span style="color: #ffcc33; font-weight: 400; float: left">&nbsp&nbsp60%≤在线率<90% &nbsp&nbsp</span>
                            <el-tag style="
                    background: #339966;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #339966;
                    float: left;
                    margin-top: 2px;
                "></el-tag>
                            <span style="color: #339966; font-weight: 400; float: left">&nbsp&nbsp在线率≥90%</span>
        </div>
        <my-echart v-loading="loading" class="mt10" :style="`height: calc(${tableStore.table.height} - 120px)`"
            :options="options" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } 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'
const dictData = useDictData()
const options = ref({})


const TableHeaderRef = ref()
const tableStoreParams: any = ref({})
const loading = ref(false)
const getTableStoreParams = async (val: any) => {
    tableStoreParams.value = val
    loading.value = true
    setTimeout(() => {
        tableStore.index()
    }, 1500)
}
const tableStore = new TableStore({
    url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
    showPage: false,
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params = tableStoreParams.value
    },
    loadCallback: () => {
        // tableStore.table.data.type
        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
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        // bottom: '10px',
                        show: true,
                        title: '保存'
                        // yAxisIndex: 'none'
                    }
                },
                right: 0,
                top: -5
            },
            tooltip: {
                formatter: function (params: any) {
                    var tips = ''

                    for (var i = 0; i < params.length; i++) {
                        if (params[i].value == 1) {
                            tips += params[i].name + '</br>'
                            tips += params[i].marker + '在线率:暂无数据'
                        } else {
                            tips += params[i].name + '</br>'
                            tips += params[i].marker + '在线率:' + params[i].value.toFixed(2)
                        }
                    }
                    return tips
                }
            },
            grid: {
                top: '50px', // 等价于 y: '16%'
                left: '10px',
                right: '10px',
                bottom: '60px'
            },
            xAxis: {
                name: titleX,
                data: tableStore.table.data.type
            },
            yAxis: {
                name: '%',
                max: 100
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    data: tableStore.table.data.single,
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                            // 定制显示（按顺序）
                            color: function (params: any) {
                                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 > 1) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#A52a2a'
                                            }
                                        ],
                                        false
                                    )
                                } else if (params.value > 0 && params.value <= 1) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                        ],
                                        false
                                    )
                                }
                            }
                        }
                    },
                    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'
                                    }
                                }
                            }
                        ]
                    }
                }
            ]
        }

        loading.value = false
    }
})
// tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
// tableStore.table.params.monitorFlag = 2
// tableStore.table.params.powerFlag = 2
// tableStore.table.params.serverName = 'harmonicBoot'
// tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'

provide('tableStore', tableStore)

onMounted(() => { })
defineExpose({ getTableStoreParams })
</script>
<style scoped lang="scss"></style>