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) {
        // 如果没有新数据，则设置为空数据集并更新图表
        props.chartConfig.option.dataset = { dimensions: ['name', 'value'], source: [] };
    } else {
        props.chartConfig.option.dataset = newData;
    }


    const total = calculateTotal(props.chartConfig.option.dataset)
    if (props.chartConfig.option.graphic?.[0]) {
        props.chartConfig.option.graphic[0].style.text = total.toString()
    }

    // 统一显示为 "名称  百分比"
    props.chartConfig.option.legend.formatter = (name: string) => {
        const item = props.chartConfig.option.dataset.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 = props.chartConfig.option.dataset.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 函数在数据源变化时更新图表，这里保持不变
watch(
    () => props.chartConfig.option.dataset,
    newData => {
        if (newData) {
            updateChartData(newData)
        }
    },
    { deep: true, immediate: true }
)

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

/**
 * 格式化日期时间为 ISO 8601 字符串 (YYYY-MM-DDTHH:mm:ss.SSS)
 * JavaScript Date 对象只支持毫秒精度
 */
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');
    const milliseconds = date.getMilliseconds().toString().padStart(3, '0'); // 添加毫秒

    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`; // 使用 'T' 分隔符和毫秒
}

/**
 * 根据时间段生成开始和结束时间范围
 * 结束时间设置为该时间段的最后一天的 23:59:59.999
 */
function generateTimeRange(period: string): { startTime: string; endTime: string } {
    const now = new Date(); // 当前时间

    let startTimeDate: Date;
    let endTimeDate: Date;

    switch (period) {
        case 'day':
            startTimeDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0); // 当天 00:00:00.000
            endTimeDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999); // 当天 23:59:59.999
            break;
        case 'week':
            // 计算本周一到今天的起始和结束时间
            const dayOfWeek = now.getDay(); // 0(周日) to 6(周六)
            const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // 周日需要调整为上周一
            startTimeDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + diffToMonday, 0, 0, 0, 0);
            // 结束时间为今天 23:59:59.999
            endTimeDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
            break;
        case 'month':
            startTimeDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0); // 当月第一天 00:00:00.000
            // 获取当月最后一天 23:59:59.999
            endTimeDate = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
            break;
        case 'quarter':
            const currentMonth = now.getMonth();
            const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
            startTimeDate = new Date(now.getFullYear(), quarterStartMonth, 1, 0, 0, 0, 0); // 当季度第一天 00:00:00.000
            // 获取当季度最后一天 23:59:59.999
            endTimeDate = new Date(now.getFullYear(), quarterStartMonth + 3, 0, 23, 59, 59, 999);
            break;
        case 'year':
            startTimeDate = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0); // 当年第一天 00:00:00.000
            // 获取当年最后一天 23:59:59.999 (即下一年第一天的前一毫秒)
            endTimeDate = new Date(now.getFullYear(), 12, 0, 23, 59, 59, 999);
            break;
        default: // 默认按 'day' 处理
            startTimeDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
            endTimeDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
            break;
    }

    return {
        startTime: formatDateTime(startTimeDate),
        endTime: formatDateTime(endTimeDate),
    };
}

// 异步获取报警数据
async function fetchAlarmData({ startTime, endTime }: { startTime: string; endTime: string }) {
    try {
        const res: any = await axiosInstance.get(
            `/awjt/space/getNumberByAlarmLevel/${props.chartConfig.option.sceneID}`,
            {
                params: { startTime, endTime }, // 请求参数
                responseType: 'json',
                baseURL: ''
            }
        );

        if (res.state === true && res.value) {
            console.log("API 响应数据:", res);
            // 转换为图表需要的数据结构
            return {
                dimensions: ['name', 'value'],
                source: res.value.map((item: any) => ({
                    name: item.alarmLevel,
                    value: item.alarm_count
                }))
            };
        } else {
            console.warn('API 返回非预期数据结构或空数据:', res);
            return undefined;
        }
    } catch (error) {
        console.error('获取报警数据失败:', error);
        return undefined;
    }
}

// 组件挂载时初始化数据
onMounted(async () => {
    const timeRange = generateTimeRange(props.chartConfig.option.dateTime.selectValue);
    console.log("onMounted - 请求参数:", timeRange); // 打印初始请求参数
    const fetchedData = await fetchAlarmData(timeRange);
    updateChartData(fetchedData); // 直接调用 updateChartData
});

// 处理下拉选择器变化
const handleSelectChange = async (value: string) => {
    props.chartConfig.option.dateTime.selectValue = value; // 更新选中值
    const timeRange = generateTimeRange(value);
    console.log("handleSelectChange - 请求参数:", timeRange); // 打印新的请求参数
    const fetchedData = await fetchAlarmData(timeRange);
    updateChartData(fetchedData); // 直接调用 updateChartData
};
</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;
    white-space: nowrap;
    font-family: 'CustomFont';
    font-style: italic;
    letter-spacing: 0.5px;
    color: #eee;
    text-shadow: 1px 3px 10px #000000;
    font-size: 16px;
}


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