feat: 首页数据对接

apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue

@@ -3,11 +3,56 @@ import type { EchartsUIType } from '@vben/plugins/echarts';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { onMounted, ref } from 'vue';
+import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
+import dayjs from 'dayjs';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
+// 添加日期选择相关逻辑
+const selectedDate = ref<string>(dayjs().format('YYYY-MM'));
+// 获取当月天数
+const getDaysInMonth = (date: string) => {
+  const year = parseInt(date.split('-')[0]);
+  const month = parseInt(date.split('-')[1]);
+  const daysInMonth = new Date(year, month, 0).getDate();
+  return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+};
 
-onMounted(() => {
+const handleDateChange = () => {
+  console.log('selectedDate', selectedDate.value);
+
+  getMeterRecordTrend();
+};
+const getMeterRecordTrend = async () => {
+      const res = await meterRecordTrend(
+    {
+       day: dayjs().format('YYYY-MM-DD'),
+    month: selectedDate.value || dayjs().format('YYYY-MM'),
+    year: dayjs().format('YYYY'),
+    meterType: 1,
+    meterId: null,
+    floorId: null,
+  }
+  );
+console.log(res);
+
+  // 处理返回的数据
+  const chartData = res.day.nowMonth.data || [];
+console.log(chartData);
+
+  // 创建一个映射，将日期和数值对应起来
+  const dataMap: Record<string, string> = {};
+  chartData.forEach(([day, value]: [string, string]) => {
+    dataMap[day] = value;
+  });
+
+  // 获取当月所有日期
+  const days = getDaysInMonth(selectedDate.value);
+
+  // 为没有数据的日期填充0，构建完整的数据数组
+  const seriesData = days.map(day => {
+    return parseFloat(dataMap[day.toString()] || '0');
+  });
   renderEcharts({
     grid: {
       bottom: 0,
@@ -19,29 +64,13 @@ onMounted(() => {
     series: [
       {
         areaStyle: {},
-        data: [
-          111, 2000, 6000, 16_000, 33_333, 55_555, 64_000, 33_333, 18_000,
-          36_000, 70_000, 42_444, 23_222, 13_000, 8000, 4000, 1200, 333, 222,
-          111,
-        ],
+        data: seriesData,
         itemStyle: {
           color: '#5ab1ef',
         },
         smooth: true,
         type: 'line',
-      },
-      {
-        areaStyle: {},
-        data: [
-          33, 66, 88, 333, 3333, 6200, 20_000, 3000, 1200, 13_000, 22_000,
-          11_000, 2221, 1201, 390, 198, 60, 30, 22, 11,
-        ],
-        itemStyle: {
-          color: '#019680',
-        },
-        smooth: true,
-        type: 'line',
-      },
+      }
     ],
     tooltip: {
       axisPointer: {
@@ -65,7 +94,7 @@ onMounted(() => {
         show: false,
       },
       boundaryGap: false,
-      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      data: days,
       splitLine: {
         lineStyle: {
           type: 'solid',
@@ -80,7 +109,7 @@ onMounted(() => {
         axisTick: {
           show: false,
         },
-        max: 80_000,
+        // max: 800,
         splitArea: {
           show: true,
         },
@@ -89,9 +118,15 @@ onMounted(() => {
       },
     ],
   });
+};
+onMounted(async () => {
+getMeterRecordTrend();
 });
+
 </script>
 
 <template>
+  <div>
   <EchartsUI ref="chartRef" />
+  </div>
 </template>