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

feat: 增加未标记

master
xjs 2025-05-26 14:53:12 +08:00
parent 1212314175
commit 21da1b661a
3 changed files with 62 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/components/AskSection.vue
View File

@ -4,7 +4,7 @@
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">咨询学段</div>
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">咨询学段<span class="text-[14px]">(已标记)</span></div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
</div>

21
src/views/components/StudentSource.vue
View File

@ -14,8 +14,7 @@
<StudentSourceChart class="w-full h-full" :chartData="chartData" :ringSize="0.8" />
<div class="flex items-center justify-between mx-[20px] my-[33px]">
<div class="flex items-center">
<SvgComponent :content="onlineSvg" class="w-[53px] h-[38px]" />
<div class="flex flex-col ml-[9px] items-center">
<div class="flex flex-col ml-[9px] items-center justify-center">
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent font-700">
<span class="text-[18px]">{{ onlineTotal }}</span>
<span class="text-[14px]">人</span>
@ -24,8 +23,7 @@
</div>
</div>
<div class="flex items-center">
<SvgComponent :content="offlineSvg" class="w-[53px] h-[38px]" />
<div class="flex flex-col ml-[9px] items-center">
<div class="flex flex-col ml-[9px] items-center justify-center">
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent font-700">
<span class="text-[18px]">{{ offlineTotal }}</span>
<span class="text-[14px]">人</span>
@ -33,6 +31,15 @@
<span class="text-[#C7F0FF] text-[12px]">线下来源</span>
</div>
</div>
<div class="flex items-center">
<div class="flex flex-col ml-[9px] items-center justify-center">
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent font-700">
<span class="text-[18px]">{{ unMarkTotal }}</span>
<span class="text-[14px]">人</span>
</div>
<span class="text-[#C7F0FF] text-[12px]">未标记</span>
</div>
</div>
</div>
</div>
</div>
@ -73,10 +80,12 @@
};
const askSectionData = inject("askSectionData", ref<{ online: any[]; offline: any[] }>({ online: [], offline: [] }));
const gainData = inject("gainData",ref({acqTotal:0}))
const onlineTotal = ref(0);
const offlineTotal = ref(0);
const unMarkTotal = ref(0)
const chartData = ref<any[]>([]);
watch(
() => askSectionData.value,
@ -92,9 +101,13 @@
if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
offlineTotal.value = askSectionData.value.offline.reduce((acc, curr) => acc + curr.total, 0);
}
if(gainData.value.acqTotal && askSectionData.value.offline && askSectionData.value.online){
unMarkTotal.value = gainData.value.acqTotal - offlineTotal.value - onlineTotal.value
}
chartData.value = [
{ name: "线下", value: offlineTotal.value, itemStyle: { color: "rgba(147, 219, 255, 1)" } },
{ name: "线上", value: onlineTotal.value, itemStyle: { color: "rgb(79, 214, 169)" } },
{name:'未标记',value: unMarkTotal.value,itemStyle: { color: "#FF4E4E" }}
];
}

45
src/views/components/chartsComponents/StudentSourceChart.vue
View File

@ -191,7 +191,50 @@
autoRotate: false,
},
},
series: series,
series: [
...series,
{
name: "pie2d",
type: "pie",
labelLine: {
length: 18,
length2: 18,
smooth: true,
minTurnAngle: 20,
},
label: {
show: true,
position: "outside",
color: "inherit",
rich: {
a: {
width: 5,
height: 5,
borderRadius: 50,
backgroundColor: "inherit",
},
b: {
fontSize: 12,
},
c: {
fontSize: 12,
},
},
formatter: "{a|} {b|{b}}{d|{d}}%",
},
startAngle: 30,
clockwise: false,
radius: ["30%", "60%"],
padAngle: 360,
center: ["50%", "50%"],
data: props.chartData,
itemStyle: {
opacity: 1,
borderWidth: 0,
},
z: 1,
},
],
graphic: [
{
id: "backgroundImg",