feat: 会议室查看

apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue

@@ -5,7 +5,8 @@ import { onMounted, ref } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-import { Button } from 'ant-design-vue';
+import { Button,Radio } from 'ant-design-vue';
+import type { RadioChangeEvent } from 'ant-design-vue';
 
 import { statisticsByTime,
   countByRentalType,
@@ -13,6 +14,7 @@ import { statisticsByTime,
   countRenewRate,
   countByCusScore,
   countOrderAndAmount,
+  countCustomers,
   countAchievedRate,
   countAchieved
  } from '#/api/property/reportStatistics';
@@ -42,17 +44,23 @@ const timeUnit = ref<number>(1)
 const countOrderAndAmountDataAmount = ref<number>(0);
 const countOrderAndAmountDataOrder = ref<number>(0);
 const countAchievedRateData = ref<any>(null);
+const countCustomersData = ref<any>(null);
+const xAxisData = ref<any[]>([]);
+const seriesData = ref<any[]>([]);
 onMounted(async () => {
     // 任务数
   const countOrderAndAmountData= await countOrderAndAmount();
   countOrderAndAmountDataAmount.value = countOrderAndAmountData.amount;
   countOrderAndAmountDataOrder.value = countOrderAndAmountData.num;
+  //活跃用户
+  const countCustomersDataRes: any = await countCustomers();
+  countCustomersData.value = countCustomersDataRes.count;
   const countAchievedRateDataRes: any = await countAchievedRate();
   countAchievedRateData.value = countAchievedRateDataRes.rate;
   // 查询订单数量趋势
   const res = await statisticsByTime({ timeUnit: timeUnit.value });
-  const xAxisData = res?.time ?? [];
-  const seriesData = res?.counts ?? [];
+  xAxisData.value = res?.time ?? [];
+  seriesData.value = res?.counts ?? [];
   // 租赁金额分布
   const data = await countByRentalType();//返回的内容是amount: 1, type: "单点"
   // 转换字段名为value和name
@@ -76,7 +84,7 @@ onMounted(async () => {
     tooltip: { trigger: 'axis' },
     xAxis: {
       type: 'category',
-      data: xAxisData,
+      data: xAxisData.value,
       boundaryGap: false,
     },
     yAxis: { type: 'value' },
@@ -84,7 +92,7 @@ onMounted(async () => {
       {
         name: '订单数',
         type: 'line',
-        data: seriesData ||[],
+        data: seriesData.value ||[],
         smooth: true,
       },
     ],
@@ -229,13 +237,29 @@ onMounted(async () => {
     ],
   });
 });
-const nodeOptions = [
-  { label: '日', value: 1 },
-  { label: '周', value: 2 },
-  { label: '月', value: 3 },
-];
-function handleAssociationChange(e: any) {
+// 切换视图模式
+async function handleViewModeChange(e: RadioChangeEvent): Promise<void> {
   timeUnit.value = e.target.value;
+  const res = await statisticsByTime({ timeUnit: timeUnit.value });
+  xAxisData.value = res?.time ?? [];
+  seriesData.value = res?.counts ?? [];
+  renderEcharts({
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      type: 'category',
+      data: xAxisData.value,
+      boundaryGap: false,
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        name: '订单数',
+        type: 'line',
+        data: seriesData.value ||[],
+        smooth: true,
+      },
+    ],
+  });
 }
 function formatNumber(num: number | string) {
   if (!num && num !== 0) {
@@ -277,6 +301,10 @@ function formatNumber(num: number | string) {
              <div class="title">累计租赁金额</div>
             <div class="number">{{ formatNumber(countOrderAndAmountDataOrder) }}</div>
           </div>
+          <div class="box">
+             <div class="title">当前活跃客户数</div>
+            <div class="number">{{ formatNumber(countCustomersData) }}</div>
+          </div>
           <div class="box">
              <div class="title">绿植养护完成率</div>
             <div class="number">{{ countAchievedRateData }}</div>
@@ -287,13 +315,11 @@ function formatNumber(num: number | string) {
             <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
               <span style="font-size: 18px; font-weight: bold;">订单数量趋势</span>
               <div>
-                <RadioGroup
-                  v-model:value="timeUnit"
-                  :options="nodeOptions"
-                  button-style="solid"
-                  option-type="button"
-                  @change="handleAssociationChange"
-                />
+                <Radio.Group v-model:value="timeUnit" @change="handleViewModeChange">
+                  <Radio.Button value=1>日</Radio.Button>
+                  <Radio.Button value=2>周</Radio.Button>
+                  <Radio.Button value=3>月</Radio.Button>
+                </Radio.Group>
               </div>
             </div>
             <EchartsUI
@@ -357,7 +383,6 @@ function formatNumber(num: number | string) {
   .box {
     height: 100%;
     margin: 40px;
-
     .title {
       display: flex;
       justify-content: space-between;
@@ -384,7 +409,8 @@ function formatNumber(num: number | string) {
         display: flex;
         justify-content: space-between;
         .box{
-          width: 300px;
+          width: 250px;
+          max-width: 300px;
           height: 120px;
           background-color: #fff;
           border-radius: 8px;