feat

apps/web-antd/src/views/screen/property/analytics-trends.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { onMounted, ref, defineExpose } from 'vue';
+import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
+import dayjs from 'dayjs';
+import * as echarts from "echarts";
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+// 添加日期选择相关逻辑
+const selectedDate = ref<string>(dayjs().format('YYYY-MM'));
+// 获取当月天数
+const getDaysInMonth = (date: any) => {
+  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);
+};
+const getMeterRecordTrend = async (selectedDate: any) => {
+  const res = await meterRecordTrend({
+    day: dayjs().format('YYYY-MM-DD'),
+    month: selectedDate.value,
+    year: dayjs().format('YYYY'),
+    meterType: 1,
+    meterId: null,
+    floorId: null,
+  });
+
+  // 处理返回的数据
+  const chartData = res.day.nowMonth.data || [];
+
+  // 创建一个映射，将日期和数值对应起来
+  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: 125,
+      containLabel: true,
+      left: '2%',
+      right: '8%',
+      top: '8%',
+    },
+    series: [
+      {
+        areaStyle: {},
+        data: seriesData,
+        itemStyle: {
+          color: '#3ec6ff',
+        },
+        smooth: true,
+        type: 'line',
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1, // 上→下
+            [
+              { offset: 0, color: '#32B7E9' },
+              { offset: 1, color: 'rgba(50,183,233,0)' },
+            ],
+          ),
+        },
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
+    xAxis: {
+      name: '月',
+      axisTick: {
+        show: false,
+      },
+      boundaryGap: false,
+      data: days,
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: false,
+      },
+      type: 'category',
+      axisLabel: { color: '#fff' },
+    },
+    yAxis: [
+      {
+        name: 'KW.h',
+        axisTick: {
+          show: false,
+        },
+        // max: 800,
+        splitArea: {
+          show: false,
+        },
+        splitNumber: 4,
+        type: 'value',
+        axisLabel: { color: '#fff' },
+        splitLine: { lineStyle: { color: '#1e90ff22' } },
+      },
+    ],
+  });
+};
+onMounted(async () => {
+  getMeterRecordTrend(selectedDate);
+});
+// 暴露方法给父组件调用
+defineExpose({
+  getMeterRecordTrend,
+});
+</script>
+
+<template>
+  <div>
+    <EchartsUI ref="chartRef" />
+  </div>
+</template>