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

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" />