feat: number of refunds

src/views/appComponents/HeaderStatic.vue

@@ -3,10 +3,14 @@
 
     <div class="mt-[3.5rem] custom-border px-[2.5rem] pt-[1.5rem] h-full">
       <div class="text-[#44C1EF] italic text-[3.5rem] font-700 mb-[2.5rem]">总缴费</div>
-      <div class="mb-[3.75rem] z-10 font-700 leading-[1] flex items-baseline">
+      <div class="mb-[1.75rem] z-10 font-700 leading-[1] flex items-baseline">
         <span class="text-[5.5rem] italic text-color" :data-text="`${paymentData.chargeTotal || 0}`">{{ paymentData.chargeTotal || 0 }}</span>
         <span class="text-[3rem] text-color" data-text="人">人</span>
       </div>
+      <div class="z-10 font-700 leading-[1] flex items-baseline">
+        <span class="text-[3rem] italic text-color" :data-text="`退款:${paymentData.refundTotal || 0}`">退款:{{ paymentData.refundTotal || 0 }}</span>
+        <span class="text-[3rem] text-color" data-text="人">人</span>
+      </div>
     </div>
 
     <div class="mt-[3.5rem] custom-border px-[3.5rem] justify-items-center pt-[1.5rem] h-full">
@@ -48,7 +52,7 @@
 <script lang="ts" setup>
   import SvgIcon from "@/components/svg-icon/SvgIcon.vue";
 
-  const paymentData = inject("paymentData", ref({ chargeTotal: 0, estimatedTotal: 0, items: [], toDayTotal: 0, yesterdayTotal: 0 }));
+  const paymentData = inject("paymentData", ref({ chargeTotal: 0, estimatedTotal: 0, items: [], toDayTotal: 0, yesterdayTotal: 0,refundTotal:0 }));
   const gainData = inject("gainData", ref({ acqTotal: 0, goalTotal: 0, toDayAcq: 0, yestertDayAcq: 0 }));
 
   const paymentDifferent = computed(() => {

src/views/components/PaymentTotal.vue

@@ -6,33 +6,25 @@
         <div class="w-[154px] h-[124px] flex items-center flex-col">
           <div class="text-[#44C1EF] italic text-[20px] font-700">总缴费</div>
           <div class="mb-[15px] z-10 font-700 leading-[1] flex items-baseline">
-            <span class="text-[40px] italic text-color" :data-text="`${paymentData.chargeTotal || 0}`">{{paymentData.chargeTotal ||0}}</span>
+            <span class="text-[40px] italic text-color" :data-text="`${paymentData.chargeTotal || 0}`">{{ paymentData.chargeTotal || 0 }}</span>
             <span class="text-[20px] text-color" data-text="人">人</span>
           </div>
           <SvgComponent :content="lightningBoxSvg" class="box-light translate-y-[-70%]" />
         </div>
         <div>
           <div class="flex items-center justify-between text-[12px]">
-            <div class="text-[#6B89BC]">当前值{{paymentData.chargeTotal}}人</div>
+            <div class="text-[#6B89BC]">当前值{{ paymentData.chargeTotal }}人</div>
-            <div class="text-[#69D4FF]">
+            <div class="text-[#6B89BC]">退款{{ paymentData.refundTotal || 0 }}人</div>
-              计划:
+            <div class="text-[#69D4FF]">计划:{{ paymentData.estimatedTotal }}人</div>
-              <span class="text-[15px]">{{paymentData.estimatedTotal}}</span>
-              <span class="text-[13px]">人</span>
-            </div>
           </div>
         </div>
-        <YProgress :percentage="Math.round(paymentData.chargeTotal/paymentData.estimatedTotal * 100)" height="12px" class="mt-[7px]" />
+        <YProgress :percentage="Math.round((paymentData.chargeTotal / paymentData.estimatedTotal) * 100)" height="12px" class="mt-[7px]" />
       </div>
       <div class="ml-[4px] relative w-[143px] h-[143px] flex flex-col">
         <ProportionCharts :chart-data="chartData" class="" />
-        <div
+        <div class="w-max h-max text-[18px] text-[#fff] font-700 italic translate-x-[150%] translate-y-[-185%] flex flex-col">
-          class="w-max h-max text-[18px] text-[#fff] font-700  italic  translate-x-[150%] translate-y-[-185%] flex flex-col">
+          <span>缴费</span>
-          <span>
+          <span>占比</span>
-            缴费
-          </span>
-          <span>
-            占比
-          </span>
         </div>
       </div>
       <ul class="ml-[10px] flex flex-col justify-evenly h-full flex-1">
@@ -60,19 +52,17 @@
     groupSvg.value = svg;
   };
 
-  const paymentData = inject("paymentData",ref({chargeTotal:0,estimatedTotal:0,items:[]}))
+  const paymentData = inject("paymentData", ref({ chargeTotal: 0, estimatedTotal: 0, items: [], refundTotal: 0 }));
-  const colors = ["#0783FA","#07D1FA","#20E6A4","#FFD15C","#9A68FF"]
+  const colors = ["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C", "#9A68FF"];
   const chartData = ref<any>([]);
 
   watchEffect(() => {
-    if(paymentData.value.items){
+    if (paymentData.value.items) {
-      chartData.value = paymentData.value.items.map((item:any,index) => {
+      chartData.value = paymentData.value.items.map((item: any, index) => {
-        return {...item,color:colors[index % colors.length]}
+        return { ...item, color: colors[index % colors.length] };
-      })
+      });
     }
-  })
+  });
-
-
 
   const lightningBoxSvg = ref("");
   const getLightningBoxSvg = async () => {
@@ -80,7 +70,6 @@
     lightningBoxSvg.value = svg;
   };
 
-
   onBeforeMount(() => {
     getGroupBackgroundSvg();
     getLightningBoxSvg();
@@ -92,14 +81,8 @@
 
   .border-image {
     border: 1px solid;
-    border-image: linear-gradient(
+    border-image: linear-gradient(90deg, #217ac600, #227cc8, #217ac600) 1 1;
-        90deg,
+    opacity: 0.3;
-        #217ac600,
-        #227cc8,
-        #217ac600
-      )
-      1 1;
-      opacity: 0.3;
   }
 
   .rotate-animation {