feat: 增加未标记

src/views/components/AskSection.vue

@@ -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>

src/views/components/StudentSource.vue

@@ -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 justify-center">
-          <div class="flex flex-col ml-[9px] items-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 justify-center">
-          <div class="flex flex-col ml-[9px] items-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" }}
       ];
   }
 

src/views/components/chartsComponents/StudentSourceChart.vue

@@ -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",