feat：危险房子圆环更新接口以及请求

src/packages/components/Charts/HazardousChemicalsSpace/PieCenterHaz/config.ts

@@ -69,7 +69,8 @@ const option = {
             center: ['30%', '48%'],
             silent: true,
             z: 1,
-            data: [{ value: 1, name: '', itemStyle: { 
+            data: [{
+                value: 1, name: '', itemStyle: {
                     color: {
                         type: 'linear',
                         x: 0,
@@ -82,7 +83,8 @@ const option = {
                             { offset: 1, color: 'rgba(200, 200, 200, 0.01)' },
                         ]
                     }
-            } }],
+                }
+            }],
             label: { show: false },
             labelLine: { show: false }
         },
@@ -160,8 +162,7 @@ const option = {
                     show: false,
                 },
                 itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0, 0, 0, 0.35)' }
-            },
+            }
-            data: dataJson.source
         },
         // 内部渐变装饰环（在空洞边缘，提升质感）
         {

src/packages/components/Charts/HazardousChemicalsSpace/PieCenterHaz/index.vue

@@ -4,11 +4,8 @@
         <div class="header-title">报警统计</div>
         <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
         <!-- 使用新的下拉选择器组件 -->
-        <CustomSelect 
+        <CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
-            :options="option.dateTime.dataset" 
+            @change="handleSelectChange" />
-            :selectedValue="option.dateTime.selectValue"
-            @change="handleSelectChange"
-        />
     </div>
 
 </template>
@@ -27,6 +24,7 @@ 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: {
@@ -54,7 +52,7 @@ const option = computed(() => {
 function calculateTotal(data: any) {
     if (!data || !data.source) return 0
     return data.source.reduce((total: number, item: any) => {
-        return total + (item[data.dimensions[1]] || 0)
+        return total + (item.value || 0)
     }, 0)
 }
 
@@ -65,18 +63,20 @@ function calculatePercentage(value: number, total: number) {
 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[newData.dimensions[0]] === name)
+        const item = newData.source.find((it: any) => it.name === name)
-        if (!item) return null
+        if (!item) return name
-        const val = item[newData.dimensions[1]] ?? 0
+        const val = item.value ?? 0
         let p = calculatePercentage(val, total)
-        // return `{row|${name}    ${p}%}`
         if(Number(p)<10){
             p=' '+p
         }
@@ -153,26 +153,123 @@ watch(
     () => props.chartConfig.option.dataset,
     newData => {
         if (newData) {
-            props.chartConfig.option.dataset = newData
             updateChartData(newData)
         }
     },
-    { deep: false, immediate: true }
+    { deep: true, immediate: true }
 )
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-    props.chartConfig.option.dataset = newData
     updateChartData(newData)
 })
 
-onMounted(() => {
+onMounted(async () => {
-    updateChartData(props.chartConfig.option.dataset)
+    // 初始化时立即获取数据
-})
+    const timeRange = generateTimeRange(props.chartConfig.option.dateTime.selectValue);
-
+    const fetchedData = await fetchAlarmData(timeRange);
-// 处理下拉选择器变化
+    if (fetchedData) {
-const handleSelectChange = (value: any) => {
+        updateChartData(fetchedData);
-    props.chartConfig.option.dateTime.selectValue = value
+    } 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>