feat: 绿植租赁方案添加产品数量

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

@@ -7,7 +7,15 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Button } from 'ant-design-vue';
 
-import { statisticsByTime } from '#/api/property/reportStatistics';
+import { statisticsByTime,
+  countByRentalType,
+  countByCusType,
+  countRenewRate,
+  countByCusScore,
+  countOrderAndAmount,
+  countAchievedRate,
+  countAchieved
+ } from '#/api/property/reportStatistics';
 
 const orderLineRef = ref<EchartsUIType>();
 const leasePieRef = ref<EchartsUIType>();
@@ -31,11 +39,39 @@ const { renderEcharts: renderMaintenanceQualityScoresPei } = useEcharts(
 );
 const timeUnit = ref<number>(1)
 
+const countOrderAndAmountDataAmount = ref<number>(0);
+const countOrderAndAmountDataOrder = ref<number>(0);
+const countAchievedRateData = ref<any>(null);
 onMounted(async () => {
+    // 任务数
+  const countOrderAndAmountData= await countOrderAndAmount();
+  countOrderAndAmountDataAmount.value = countOrderAndAmountData.amount;
+  countOrderAndAmountDataOrder.value = countOrderAndAmountData.num;
+  const countAchievedRateDataRes: any = await countAchievedRate();
+  countAchievedRateData.value = countAchievedRateDataRes.rate;
   // 查询订单数量趋势
   const res = await statisticsByTime({ timeUnit: timeUnit.value });
   const xAxisData = res?.time ?? [];
   const seriesData = res?.counts ?? [];
+  // 租赁金额分布
+  const data = await countByRentalType();//返回的内容是amount: 1, type: "单点"
+  // 转换字段名为value和name
+  const convertedData = data.map((item: { amount: number; type: string }) => ({
+    value: item.amount,
+    name: item.type
+  }));
+  // 客户类型分配
+  const countByCusTypeData:any = await countByCusType();
+  //客户续租率趋势
+  const countRenewRateData:any = await countRenewRate();
+  // 养护任务完成情况
+  const countAchievedData:any = await countAchieved();
+  // 养护质量评分分布
+  const countByCusScoreData:any = await countByCusScore();
+  const countByCusScoreDataList = countByCusScoreData.map((item: { score: string; count: number }) => ({
+  value: item.count,
+  name: item.score
+  }));
   renderEcharts({
     tooltip: { trigger: 'axis' },
     xAxis: {
@@ -48,7 +84,7 @@ onMounted(async () => {
       {
         name: '订单数',
         type: 'line',
-        data: seriesData,
+        data: seriesData ||[],
         smooth: true,
       },
     ],
@@ -59,17 +95,11 @@ onMounted(async () => {
     legend: { orient: 'vertical', left: 'left' },
     series: [
       {
-        name: '金额',
+        // name: '金额',
         type: 'pie',
         radius: '60%',
         center: ['50%', '50%'],
-        data: [
-          { value: 1048, name: '办公楼' },
-          { value: 735, name: '商场' },
-          { value: 580, name: '酒店' },
-          { value: 484, name: '医院' },
-          { value: 300, name: '其他' },
-        ],
+        data:convertedData || [],
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
@@ -89,15 +119,15 @@ onMounted(async () => {
     tooltip: { trigger: 'axis' },
     xAxis: {
       type: 'category',
-      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-      boundaryGap: false,
+      data: countByCusTypeData.type || [],
+      boundaryGap: true,
     },
     yAxis: { type: 'value' },
     series: [
       {
         name: '订单数',
         type: 'bar',
-        data: [120, 132, 101, 134, 90, 230],
+        data: countByCusTypeData.counts || [],
       },
     ],
   });
@@ -106,7 +136,7 @@ onMounted(async () => {
     tooltip: { trigger: 'axis' },
     xAxis: {
       type: 'category',
-      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      data: countRenewRateData.month || [],
       boundaryGap: false,
     },
     yAxis: { type: 'value' },
@@ -114,7 +144,7 @@ onMounted(async () => {
       {
         name: '订单数',
         type: 'line',
-        data: [120, 132, 101, 134, 90, 230],
+        data: countRenewRateData.rate || [],
         smooth: true,
       },
     ],
@@ -131,7 +161,7 @@ onMounted(async () => {
     xAxis: [
       {
         type: 'category',
-        data: ['朝阳区', '海淀区', '西城区', '东城区'],
+        data: countAchievedData.type || [],
       },
     ],
     yAxis: [
@@ -157,18 +187,18 @@ onMounted(async () => {
       {
         name: '计划任务数',
         type: 'bar',
-        data: [156, 140, 130, 120],
+        data: countAchievedData.toral || [],
       },
       {
         name: '已完成数',
         type: 'bar',
-        data: [152, 135, 125, 110],
+        data: countAchievedData.finish || [],
       },
       {
         name: '完成率',
         type: 'line',
         yAxisIndex: 1,
-        data: [97.4, 96.4, 96.2, 91.7],
+        data: countAchievedData.rate || [],
       },
     ],
   });
@@ -190,13 +220,7 @@ onMounted(async () => {
         type: 'pie',
         radius: '60%',
         center: ['50%', '50%'],
-        data: [
-          { value: 12.43, name: '一星' },
-          { value: 12.26, name: '两星' },
-          { value: 16.87, name: '三星' },
-          { value: 25.75, name: '四星' },
-          { value: 32.68, name: '五星' },
-        ],
+        data: countByCusScoreDataList || [],
         label: {
           formatter: '{b} {d}%',
           show: true,
@@ -211,9 +235,23 @@ const nodeOptions = [
   { label: '月', value: 3 },
 ];
 function handleAssociationChange(e: any) {
-  console.log(e);
   timeUnit.value = e.target.value;
 }
+function formatNumber(num: number | string) {
+  if (!num && num !== 0) {
+    return '';
+  }
+  num = num.toString();
+  const parts = num.split('.');
+  let integerPart: string = parts[0] || '0';
+  const decimalPart = parts.length > 1 ? '.' + parts[1] : '';
+  const rgx = /(\d+)(\d{3})/;//整体表示匹配一组由多个数字后跟三个数字组成的字符串
+  while (rgx.test(integerPart)) {
+    integerPart = integerPart.replace(rgx, `$1${','}$2`);
+  }
+
+  return integerPart + decimalPart;
+}
 </script>
 <template>
   <div class="main">
@@ -232,12 +270,17 @@ function handleAssociationChange(e: any) {
         <div class="row">
           <div class="box">
             <div class="title">总订单数</div>
-            <div class="number">13,132</div>
-            <div class="percent">8.9%</div>
+            <div class="number">{{formatNumber(countOrderAndAmountDataAmount)}}</div>
+            <!-- <div class="percent">8.9%</div> -->
+          </div>
+          <div class="box">
+             <div class="title">累计租赁金额</div>
+            <div class="number">{{ formatNumber(countOrderAndAmountDataOrder) }}</div>
+          </div>
+          <div class="box">
+             <div class="title">绿植养护完成率</div>
+            <div class="number">{{ countAchievedRateData }}</div>
           </div>
-          <div class="box"></div>
-          <div class="box"></div>
-          <div class="box"></div>
         </div>
         <div class="row-first">
           <div class="item1">
@@ -251,7 +294,6 @@ function handleAssociationChange(e: any) {
                   option-type="button"
                   @change="handleAssociationChange"
                 />
-
               </div>
             </div>
             <EchartsUI
@@ -378,7 +420,7 @@ function handleAssociationChange(e: any) {
       .row-third {
         height: 400px;
         margin-bottom: 50px;
-        
+
       }
 
       .row-fouth {