baozhida-building-system/src/views/system/floodlighting/modules/running.vue

<template>
    <div class="_running">
        <HeadlineTag type="right" value="运行统计"></HeadlineTag>
        <div class="_running_mains">
            <div class="flex_person">
                <div ref="chartAccessLeft" style="width: 100%;height: 100%;"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import HeadlineTag from '@/components/HeadlineTag'
import * as echarts from 'echarts'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})

const chartAccessLeft = ref(null);
let chartLeft = null;
let chartRight = null;
const initAccess = () => {
    let data = [
        {
            name: '设备总数',
            value: 0,
        },
        {
            name: '网关数量',
            value: 0,
        },
        {
            name: '策略总量',
            value: 0,
        },
        {
            name: '报警数量',
            value: 0,
        },
    ];
    let arrName = getArrayValue(data, 'name');
    let arrValue = getArrayValue(data, 'value');
    let sumValue = eval(arrValue.join('+'));
    let objData = array2obj(data, 'name');
    let optionData = getData(data);
    function getArrayValue(array, key) {
        var key = key || 'value';
        var res = [];
        if (array) {
            array.forEach(function (t) {
                res.push(t[key]);
            });
        }
        return res;
    }

    function array2obj(array, key) {
        var resObj = {};
        for (var i = 0; i < array.length; i++) {
            resObj[array[i][key]] = array[i];
        }
        return resObj;
    }

    function getData(data) {
        var res = {
            series: [],
            yAxis: [],
        };
        for (let i = 0; i < data.length; i++) {
            res.series.push({
                // name: '职员1',
                type: 'pie',
                clockwise: true, //顺时加载
                emphasis: {
                    scale: false
                },
                //鼠标移入变大
                radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
                center: ['30%', '55%'],
                label: {
                    show: false,
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    borderWidth: 5,
                },
                data: [
                    {
                        value: data[i].value,
                        name: data[i].name,
                    },
                    {
                        value: sumValue - data[i].value,
                        name: '',
                        itemStyle: {
                            color: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                        },
                        tooltip: {
                            show: false,
                        },
                        emphasis: {
                            scale: false
                        },

                    },
                ],
            });
            res.series.push({
                name: '',
                type: 'pie',
                silent: true,
                z: 1,
                clockwise: true, //顺时加载
                emphasis: {
                    scale: false
                },
                //鼠标移入变大
                radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
                center: ['30%', '55%'],
                label: {
                    show: false,
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    borderWidth: 5,
                },
                data: [
                    {
                        value: 7.5,
                        itemStyle: {
                            color: '#E3F0FF',
                            borderWidth: 0,
                        },
                        tooltip: {
                            show: false,
                        },
                        emphasis: {
                            scale: false
                        },

                    },
                    {
                        value: 2.5,
                        name: '',
                        itemStyle: {
                            color: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                        },
                        tooltip: {
                            show: false,
                        },
                        emphasis: {
                            scale: false
                        },

                    },
                ],
            });
            res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%');
        }
        return res;
    }

    chartLeft = echarts.init(chartAccessLeft.value);
    let option = {
        // backgroundColor: '#fff',
        legend: {//图例设置
            show: true,
            top: '35%',
            left: '60%',
            data: arrName,
            itemWidth: 15,
            itemHeight: 15,
            width: 70,
            padding: [0, 5],
            itemGap: 20,
            formatter: function (name) {
                return '{title|' + name + '}-{value|' + objData[name].value + '}';
            },
            textStyle: {
                rich: {
                    title: {
                        fontSize: 12,
                        lineHeight: 10,
                        color: '#fff',
                    },
                    value: {
                        fontSize: 12,
                        lineHeight: 10,
                        color: '#fff',
                    },
                },
            },
        },
        tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a}<br>{b}:{c}({d}%)',
            textStyle: {
                color: '#fafafa',
            },
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            extraCssText: 'backdrop-filter: blur(6px);',
        },
        color: ['#409eff', '#15acaa', '#FFC107', 'rgb(244, 67, 54)'],
        grid: {
            top: '20%',
            bottom: '48%',
            left: '20%',
            containLabel: false,
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    inside: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                    },
                    show: true,
                },
                data: optionData.yAxis,
            },
        ],
        xAxis: [
            {
                show: true,
            },
        ],
        series: optionData.series,
    };
    chartLeft.setOption(option)
};

watch(() => props.resultData, (newVal) => {
    if (chartLeft && newVal && Object.keys(newVal).length != 0) {
        let data = [
            {
                name: '设备总数',
                value: newVal.DeviceCount,
            },
            {
                name: '网关数量',
                value: newVal.GatewayCount,
            },
            {
                name: '策略总量',
                value: newVal.OffCount,
            },
            {
                name: '报警数量',
                value: newVal.AlarmCount,
            },
        ];
        let arrName = getArrayValue(data, 'name');
        let arrValue = getArrayValue(data, 'value');
        let sumValue = eval(arrValue.join('+'));
        let objData = array2obj(data, 'name');
        let optionData = getData(data);
        function getArrayValue(array, key) {
            var key = key || 'value';
            var res = [];
            if (array) {
                array.forEach(function (t) {
                    res.push(t[key]);
                });
            }
            return res;
        }

        function array2obj(array, key) {
            var resObj = {};
            for (var i = 0; i < array.length; i++) {
                resObj[array[i][key]] = array[i];
            }
            return resObj;
        }

        function getData(data) {
            var res = {
                series: [],
                yAxis: [],
            };
            for (let i = 0; i < data.length; i++) {
                res.series.push({
                    // name: '职员1',
                    type: 'pie',
                    clockwise: true, //顺时加载
                    emphasis: {
                        scale: false
                    },
                    //鼠标移入变大
                    radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
                    center: ['30%', '55%'],
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        borderWidth: 5,
                    },
                    data: [
                        {
                            value: data[i].value,
                            name: data[i].name,
                        },
                        {
                            value: sumValue - data[i].value,
                            name: '',
                            itemStyle: {
                                color: 'rgba(0,0,0,0)',
                                borderWidth: 0,
                            },
                            tooltip: {
                                show: false,
                            },
                            emphasis: {
                                scale: false
                            },

                        },
                    ],
                });
                res.series.push({
                    name: '',
                    type: 'pie',
                    silent: true,
                    z: 1,
                    clockwise: true, //顺时加载
                    emphasis: {
                        scale: false
                    },
                    //鼠标移入变大
                    radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
                    center: ['30%', '55%'],
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        borderWidth: 5,
                    },
                    data: [
                        {
                            value: 7.5,
                            itemStyle: {
                                color: '#E3F0FF',
                                borderWidth: 0,
                            },
                            tooltip: {
                                show: false,
                            },
                            emphasis: {
                                scale: false
                            },

                        },
                        {
                            value: 2.5,
                            name: '',
                            itemStyle: {
                                color: 'rgba(0,0,0,0)',
                                borderWidth: 0,
                            },
                            tooltip: {
                                show: false,
                            },
                            emphasis: {
                                scale: false
                            },

                        },
                    ],
                });
                res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%');
            }
            return res;
        }
        chartLeft.setOption({
            legend: {
                data: arrName,
                formatter: function (name) {
                    return '{title|' + name + '}-{value|' + objData[name].value + '}';
                },
            },
            xAxis: [
                {
                    show: true,
                },
            ],
            yAxis: [{
                type: 'category',
                data: optionData.yAxis,
            }],
            series: optionData.series,
        })
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
    initAccess()
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartLeft?.resize();
    chartRight?.resize();
});
</script>
<style lang="scss" scoped>
._running {
    display: flex;
    flex-direction: column;

    &_mains {
        flex: 1;
        display: flex;

        &_left {
            width: 150px;
            height: 150px;
            position: relative;
            flex-shrink: 0;

            &_tuan {
                width: 100%;
                height: 100%;
                background: url("@/assets/images/content_circle.png");
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                animation: scanning 4s linear infinite;
            }

            &_conter {
                position: absolute;
                left: 0;
                top: 0;
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #fff;

                &_num {
                    font-size: 18px;
                }

                &_text {
                    font-size: 12px;
                }
            }
        }

        &_right {
            margin-left: 10px;
            flex: 1;
            color: #fff;

            &_item {
                display: flex;
                align-items: center;
                gap: 40px;
                padding: 5px 0;

                &_tuan {
                    display: flex;
                    align-items: center;

                    &_flag {
                        display: block;
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                }

                &__txt {
                    font-size: 24px;
                }
            }
        }
    }
}

.flex_person {
    flex: 1;
    width: 100%;
    height: 100%;
}

@keyframes scanning {
    to {
        transform: rotate(1turn);
    }
}
</style>