feat(analytics-trends): 添加仪表类型选择

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

@@ -2,9 +2,18 @@
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-import { onMounted, ref, defineExpose } from 'vue';
+import { onMounted, ref, defineExpose, watch } from 'vue';
 import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
 import dayjs from 'dayjs';
+
+const props = defineProps({
+  meterType: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const meterType = ref<Number>(1);
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 // 添加日期选择相关逻辑
@@ -16,12 +25,12 @@ const getDaysInMonth = (date: any) => {
   const daysInMonth = new Date(year, month, 0).getDate();
   return Array.from({ length: daysInMonth }, (_, i) => i + 1);
 };
-const getMeterRecordTrend = async (selectedDate: any) => {
+const getMeterRecordTrend = async (selectedDate: any, meterType: any) => {
   const res = await meterRecordTrend({
     day: dayjs().format('YYYY-MM-DD'),
     month: selectedDate.value,
     year: dayjs().format('YYYY'),
-    meterType: 1,
+    meterType: meterType.value,
     meterId: null,
     floorId: null,
   });
@@ -109,7 +118,7 @@ const getMeterRecordTrend = async (selectedDate: any) => {
   });
 };
 onMounted(async () => {
-  getMeterRecordTrend(selectedDate);
+  getMeterRecordTrend(selectedDate, meterType);
 });
 // 暴露方法给父组件调用
 defineExpose({

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

@@ -12,7 +12,7 @@ import AnalyticsVisitsData from './analytics-visits-data.vue';
 import AnalyticsVisitsSales from './analytics-visits-sales.vue';
 import AnalyticsVisitsSource from './analytics-visits-source.vue';
 import { ref, onMounted } from 'vue';
-import { DatePicker } from 'ant-design-vue';
+import { DatePicker, message } from 'ant-design-vue';
 import { Radio } from 'ant-design-vue';
 import {
   getIndexCount,
@@ -52,7 +52,7 @@ const overviewItems = ref<any[]>([
 ]);
 
 //tab选择
-const timeUnit = ref(1);
+const meterType = ref<Number>(1);
 // 月份选择
 const selectedDate = ref<any>(null);
 const paramDate = ref(null);
@@ -65,12 +65,28 @@ const analyticsTrendsRef = ref<InstanceType<typeof AnalyticsTrends> | null>(
 );
 const handleDateChange = (date: any) => {
   paramDate.value = date.format('YYYY-MM');
+  console.log('meterType', meterType);
   // 调用子组件的方法
   if (
     analyticsTrendsRef.value &&
     analyticsTrendsRef.value.getMeterRecordTrend
   ) {
-    analyticsTrendsRef.value.getMeterRecordTrend(paramDate);
+    analyticsTrendsRef.value.getMeterRecordTrend(paramDate, meterType);
+  }
+};
+
+const handleMeterTypeChange = (e: Event) => {
+  if (!selectedDate.value) {
+    message.warning('请选择月份');
+    return;
+  }
+  paramDate.value = selectedDate.value.format('YYYY-MM');
+  // 调用子组件的方法
+  if (
+    analyticsTrendsRef.value &&
+    analyticsTrendsRef.value.getMeterRecordTrend
+  ) {
+    analyticsTrendsRef.value.getMeterRecordTrend(paramDate, meterType);
   }
 };
 
@@ -199,8 +215,13 @@ onMounted(() => {
         class="flex items-center justify-between p-5"
         style="width: 100%; height: 100px"
       >
-        <Radio.Group v-model:value="timeUnit" size="large">
+        <Radio.Group
+          size="large"
+          v-model:value="meterType"
+          @change="handleMeterTypeChange"
+        >
           <Radio.Button value="1">电量</Radio.Button>
+          <Radio.Button value="2">水量</Radio.Button>
         </Radio.Group>
         <DatePicker
           v-model:value="selectedDate"
@@ -210,15 +231,15 @@ onMounted(() => {
           @change="handleDateChange"
         />
       </div>
-      <div v-if="timeUnit == 1">
+      <div>
         <AnalyticsTrends
+          :meterType="meterType"
           ref="analyticsTrendsRef"
           :selected-date="selectedDate"
         />
       </div>
     </div>
 
-
     <div class="mt-5 w-full md:flex">
       <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="预警类型">
         <AnalyticsVisitsData :statisticsData="statisticsList" />