go-viee-fetch-Demo/src/packages/components/Charts/HazardousChemicalsSpace/PieCenterHaz/index.vue

<template>
    <div class="go-border-box">
        <img src="./assets/title.svg" class="svg" />
        <div class="header-title">报警统计</div>
        <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
        <!-- 使用新的下拉选择器组件 -->
        <CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
            @change="handleSelectChange" />
    </div>

</template>

<script setup lang="ts">
import { computed, PropType, onMounted, watch, ref, onUnmounted } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GraphicComponent } from 'echarts/components'
import CustomSelect from './select.vue'
import dataJson from './data.json'
import axiosInstance from '@/api/axios';

const props = defineProps({
    themeSetting: {
        type: Object,
        required: true
    },
    themeColor: {
        type: Object,
        required: true
    },
    chartConfig: {
        type: Object as PropType<config>,
        required: true
    }
})

const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)

use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, GraphicComponent])

const option = computed(() => {
    return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})

function calculateTotal(data: any) {
    if (!data || !data.source) return 0
    return data.source.reduce((total: number, item: any) => {
        return total + (item.value || 0)
    }, 0)
}

function calculatePercentage(value: number, total: number) {
    return total > 0 ? ((value / total) * 100).toFixed(1) : '0.0'
}

const updateChartData = (newData: any) => {
    if (!newData) return

    // 确保数据被正确设置到图表配置中
    props.chartConfig.option.dataset = newData
    
    const total = calculateTotal(newData)
    if (props.chartConfig.option.graphic?.[0]) {
        props.chartConfig.option.graphic[0].style.text = total.toString()
    }

    // 统一显示为 "名称  百分比"
    props.chartConfig.option.legend.formatter = (name: string) => {
        const item = newData.source.find((it: any) => it.name === name)
        if (!item) return name
        const val = item.value ?? 0
        let p = calculatePercentage(val, total)
        if(Number(p)<10){
            p=' '+p
        }
        return `{name|${name}}{value|${p}}{unit|%}`;
    }

    // 每行独立渐变背景
    props.chartConfig.option.legend.textStyle = {
        color: '#fff',
        rich: {
            name: {
                width: 80,
                padding: [8, 0, 8, 10],
                color: '#999',
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(58, 160, 255, 0)' },
                        { offset: 0.5, color: 'rgba(58, 160, 255, 0.05)' },
                        { offset: 1, color: 'rgba(58, 160, 255, 0.15)' }
                    ]
                },
            },
            value: {
                width: 30,
                padding: [8, 0, 8, 0],
                textAlign: 'right',
                fontFamily: 'monospace',
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(58, 160, 255, 0)' },
                        { offset: 0.5, color: 'rgba(58, 160, 255, 0.05)' },
                        { offset: 1, color: 'rgba(58, 160, 255, 0.15)' }
                    ]
                },
            },
            unit: {
                width: 10,
                padding: [8, 10, 8, 0],
                textAlign: 'left',
                color: '#999',
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(58, 160, 255, 0)' },
                        { offset: 0.5, color: 'rgba(58, 160, 255, 0.05)' },
                        { offset: 1, color: 'rgba(58, 160, 255, 0.15)' }
                    ]
                },
            },
        }
    }

    const totalValue = newData.source.reduce((total: number, item: any) => {
        return total + (item.value || 0)
    }, 0)
    props.chartConfig.option.series[props.chartConfig.option.series.length-1].label.formatter = `{a|${totalValue}}\n\n{b|总数}`
}

watch(
    () => props.chartConfig.option.dataset,
    newData => {
        if (newData) {
            updateChartData(newData)
        }
    },
    { deep: true, immediate: true }
)

const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
    updateChartData(newData)
})

onMounted(async () => {
    // 初始化时立即获取数据
    const timeRange = generateTimeRange(props.chartConfig.option.dateTime.selectValue);
    const fetchedData = await fetchAlarmData(timeRange);
    if (fetchedData) {
        updateChartData(fetchedData);
    } else {
        // 如果获取失败，使用默认数据
        updateChartData(props.chartConfig.option.dataset);
    }
});
// 处理下拉选择器变化
function formatDateTime(date: Date): string {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function generateTimeRange(period: string): { startTime: string; endTime: string } {
    const now = new Date();
    let startTime: Date;
    let endTime: Date;
    endTime = new Date(now);
    endTime.setDate(endTime.getDate() + 1);
    endTime.setHours(0, 0, 0, 0);
    switch (period) {
        case 'day':
            startTime = new Date(now);
            startTime.setHours(0, 0, 0, 0);
            break;
        case 'week':
            startTime = new Date(now);
            startTime.setDate(startTime.getDate() - 7);
            startTime.setHours(0, 0, 0, 0);
            break;
        case 'month':
            startTime = new Date(now.getFullYear(), now.getMonth(), 1);
            startTime.setHours(0, 0, 0, 0);
            break;
        case 'quarter':
            const currentMonth = now.getMonth();
            const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
            startTime = new Date(now.getFullYear(), quarterStartMonth, 1);
            startTime.setHours(0, 0, 0, 0);
            break;
        case 'year':
            startTime = new Date(now.getFullYear(), 0, 1);
            startTime.setHours(0, 0, 0, 0);
            break;
        default:
            startTime = new Date(now);
            startTime.setHours(0, 0, 0, 0);
            break;
    }
    return {
        startTime: formatDateTime(startTime),
        endTime: formatDateTime(endTime),
    };
}
async function fetchAlarmData({ startTime, endTime }: { startTime: string; endTime: string }) {
    try {
        const res = await axiosInstance({
            method: 'GET',
            url: '/getAlarmdataRecord',
            params: { startTime, endTime },
            responseType: 'json',
        });
        if (Array.isArray(res)) {
            // 转换为图表需要的数据结构
            return {
                dimensions: ['name', 'value'],
                source: res.map((item: any) => ({
                    name: item.alarmLevel,
                    value: item.alarmNun
                }))
            };
        } else {
            console.warn('API returned unexpected data structure:', res);
            return undefined;
        }
    } catch (error) {
        console.error('Error fetching alarm data:', error);
        return undefined;
    }
}
async function dataHandle(newData: any) {
    if (!newData) {
        props.chartConfig.option.dataset = { dimensions: ['name', 'value'], source: [] };
        updateChartData(props.chartConfig.option.dataset);
        return;
    }
    updateChartData(newData);
}
const handleSelectChange = async (value: string) => {
    props.chartConfig.option.dateTime.selectValue = value;
    const { startTime, endTime } = generateTimeRange(value);
    const fetchedData = await fetchAlarmData({ startTime, endTime });
    await dataHandle(fetchedData);
};
onMounted(async () => {
    const timeRange = generateTimeRange(props.chartConfig.option.dateTime.selectValue);
    const fetchedData = await fetchAlarmData(timeRange);
    await dataHandle(fetchedData);
});
</script>

<style lang="scss" scoped>
@include go(border-box) {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    // 不渐变
    // background-color: #0E121B;
    // 渐变
    background: linear-gradient(to top,
            rgba(14, 18, 27, 1) 0%,
            rgba(14, 18, 27, 0.6) 100%);

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 5px;
        padding: 2px;
        /* 边框宽度 */
        background: linear-gradient(to top,
                rgba(128, 128, 128, 0.3),
                rgba(128, 128, 128, 0));
        -webkit-mask:
            linear-gradient(#fff, #fff) content-box,
            linear-gradient(#fff, #fff);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
}

.header-title {
    position: absolute;
    top: 0;
    height: 45px;
    line-height: 45px;
    left: 80px;
    font-size: 16px;
    font-weight: bold;
    color: #eee;
    font-style: italic;
    text-shadow: 0 0 10px #00E5FF;
    white-space: nowrap;
}


.svg {
    width: 100%;
    height: 45px;
}
</style>