xjs
/
payment-statistics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: number of refunds

master
Mu Yi 2025-07-18 18:01:04 +08:00
parent d881498d6e
commit f693405056
2 changed files with 23 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/appComponents/HeaderStatic.vue
View File

@ -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(() => {

49
src/views/components/PaymentTotal.vue
View File

@ -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-[#69D4FF]">
计划:
<span class="text-[15px]">{{paymentData.estimatedTotal}}</span>
<span class="text-[13px]">人</span>
<div class="text-[#6B89BC]">当前值{{ paymentData.chargeTotal }}人</div>
<div class="text-[#6B89BC]">退款{{ paymentData.refundTotal || 0 }}人</div>
<div class="text-[#69D4FF]">计划:{{ paymentData.estimatedTotal }}人</div>
</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
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>
<div 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>
</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 colors = ["#0783FA","#07D1FA","#20E6A4","#FFD15C","#9A68FF"]
const paymentData = inject("paymentData", ref({ chargeTotal: 0, estimatedTotal: 0, items: [], refundTotal: 0 }));
const colors = ["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C", "#9A68FF"];
const chartData = ref<any>([]);
watchEffect(() => {
if(paymentData.value.items){
chartData.value = paymentData.value.items.map((item:any,index) => {
return {...item,color:colors[index % colors.length]}
})
if (paymentData.value.items) {
chartData.value = paymentData.value.items.map((item: any, index) => {
return { ...item, color: colors[index % colors.length] };
});
}
})
});
const lightningBoxSvg = ref("");
const getLightningBoxSvg = async () => {
@ -80,7 +70,6 @@
lightningBoxSvg.value = svg;
};
onBeforeMount(() => {
getGroupBackgroundSvg();
getLightningBoxSvg();
@ -92,13 +81,7 @@
.border-image {
border: 1px solid;
border-image: linear-gradient(
90deg,
#217ac600,
#227cc8,
#217ac600
)
1 1;
border-image: linear-gradient(90deg, #217ac600, #227cc8, #217ac600) 1 1;
opacity: 0.3;
}