From ebf464b881a8996974fd5ba5062b4be2e764307b Mon Sep 17 00:00:00 2001
From: xjs <xjs@ycymedu.com>
Date: Tue, 27 May 2025 14:27:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96echarts=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/AskSection.vue           |  6 +-
 src/views/components/ChargingRanking.vue      |  6 +-
 src/views/components/OfflineStatus.vue        |  6 +-
 src/views/components/OnlineStatus.vue         |  6 +-
 src/views/components/OperatingTrends.vue      |  6 +-
 src/views/components/SixStatistics.vue        |  6 +-
 src/views/components/TodayPayment.vue         |  4 +-
 src/views/components/WinCustomer.vue          |  6 +-
 .../chartsComponents/StudentSourceChart.vue   | 91 +++++++++----------
 9 files changed, 68 insertions(+), 69 deletions(-)

diff --git a/src/views/components/AskSection.vue b/src/views/components/AskSection.vue
index 2bf7ace..b61e909 100644
--- a/src/views/components/AskSection.vue
+++ b/src/views/components/AskSection.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-[358px] relative bg-[#082059]">
-    <div class="flex h-full custom-border absolute top-0 left-0">
+  <div class="h-[358px] relative bg-[#082059] custom-border">
+    <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
       <SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
@@ -11,7 +11,7 @@
         </div>
       </div>
     </div>
-    <div class="w-full h-[calc(100%-36px)] mt-[36px]">
+    <div class="w-full h-[calc(100%-36px)]">
       <AskSectionChart :chart-data="askSectionData.stages || []" />
     </div>
   </div>
diff --git a/src/views/components/ChargingRanking.vue b/src/views/components/ChargingRanking.vue
index a2ea3be..16b561d 100644
--- a/src/views/components/ChargingRanking.vue
+++ b/src/views/components/ChargingRanking.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-[320px] relative bg-[#082059]">
-    <div class="flex h-full custom-border absolute top-0 left-0">
+  <div class="h-[320px] relative bg-[#082059] custom-border">
+    <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
       <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
@@ -8,7 +8,7 @@
         <div class="text-color text-[20px] ml-[9px] font-700" data-text="收费排行榜">收费排行榜</div>
       </div>
     </div>
-    <div class="w-[296px] h-[calc(100%-36px)] mt-[36px] flex flex-col">
+    <div class="w-[296px] h-[calc(100%-36px)] flex flex-col">
       <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
         <div class="text-[15px] text-[#84E8FF]">更多</div>
         <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
diff --git a/src/views/components/OfflineStatus.vue b/src/views/components/OfflineStatus.vue
index 57088f3..eb5e7e2 100644
--- a/src/views/components/OfflineStatus.vue
+++ b/src/views/components/OfflineStatus.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="w-[296px] h-[320px] relative bg-[#082059]">
-    <div class="flex h-full custom-border absolute top-0 left-0">
+  <div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
+    <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
       <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
@@ -8,7 +8,7 @@
         <div class="text-[20px] ml-[9px] font-700 text-color" data-text="线下详情">线下详情</div>
       </div>
     </div>
-    <div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
+    <div class="w-full h-[calc(100%-36px)] flex flex-col">
       <div class="ml-[22px] relative mt-[13px] flex items-center justify-center">
         <ProportionCharts :chart-data="chartData" class="" />
         <div class="leading-[1] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3 flex items-center flex-col font-700 italic">
diff --git a/src/views/components/OnlineStatus.vue b/src/views/components/OnlineStatus.vue
index ee8e1da..e5215cf 100644
--- a/src/views/components/OnlineStatus.vue
+++ b/src/views/components/OnlineStatus.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="w-[296px] h-[320px] relative bg-[#082059]">
-    <div class="flex h-full custom-border absolute top-0 left-0">
+  <div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
+    <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
         <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
@@ -8,7 +8,7 @@
       </div>
       <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
     </div>
-    <div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
+    <div class="w-full h-[calc(100%-36px)] flex flex-col">
       <div class="ml-[22px] relative mt-[13px] flex items-center justify-center">
         <ProportionCharts :chart-data="chartData" class="" />
         <div class="leading-[1] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3 flex items-center flex-col font-700 italic">
diff --git a/src/views/components/OperatingTrends.vue b/src/views/components/OperatingTrends.vue
index 25a112c..80fce06 100644
--- a/src/views/components/OperatingTrends.vue
+++ b/src/views/components/OperatingTrends.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-[358px] relative bg-[#082059]">
-    <div class="flex h-full custom-border absolute top-0 left-0">
+  <div class="h-[358px] relative bg-[#082059] custom-border">
+    <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
       <SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center flex  leading-[30px] items-baseline">
@@ -8,7 +8,7 @@
         <div class="text-[20px] ml-[9px] font-700 text-color" data-text="经营趋势">经营趋势</div>
       </div>
     </div>
-    <div class="w-full h-[calc(100%-36px)] mt-[36px]">
+    <div class="w-full h-[calc(100%-36px)]">
       <OperatingTrendsChart :chartDataArray="acqTrend" @date-change="handleDateChange" />
     </div>
   </div>
diff --git a/src/views/components/SixStatistics.vue b/src/views/components/SixStatistics.vue
index a31f424..3032f8f 100644
--- a/src/views/components/SixStatistics.vue
+++ b/src/views/components/SixStatistics.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="w-[296px] h-[320px] relative bg-[#082059]">
-    <div class="flex h-full custom-border absolute top-0 left-0">
+  <div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
+    <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
       <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
@@ -8,7 +8,7 @@
         <div class="text-[20px] ml-[9px] font-700 text-color" data-text="六纬志愿">六纬志愿</div>
       </div>
     </div>
-    <div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
+    <div class="w-full h-[calc(100%-36px)] flex flex-col">
       <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
         <div class="text-[15px] text-[#84E8FF]">更多</div>
         <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
diff --git a/src/views/components/TodayPayment.vue b/src/views/components/TodayPayment.vue
index b695408..3ddcffd 100644
--- a/src/views/components/TodayPayment.vue
+++ b/src/views/components/TodayPayment.vue
@@ -3,12 +3,12 @@
       <SvgComponent :content="groupSvg" class="w-[312px] h-[210px]" />
       <div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] pl-[14px] pr-[19px] flex items-center">
         <div class="relative w-[144px] h-[113px] flex items-center flex-col">
+          <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
           <div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div>
-          <div class="mb-[15px] z-10 font-700 leading-[1] flex items-baseline">
+          <div class="mb-[15px] font-700 leading-[1] flex items-baseline">
             <span class="text-[34px] italic text-color" :data-text="paymentData.toDayTotal">{{paymentData.toDayTotal || 0}}</span>
             <span class="text-[18px] text-color" data-text="人">人</span>
           </div>
-          <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
         </div>
         <div class="relative ml-[12px]">
           <SvgComponent :content="paymentBorderSvg" class="w-[127px] h-[104px] z-1" />
diff --git a/src/views/components/WinCustomer.vue b/src/views/components/WinCustomer.vue
index a47cb6d..686acc0 100644
--- a/src/views/components/WinCustomer.vue
+++ b/src/views/components/WinCustomer.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-[320px] relative bg-[#082059]">
-    <div class="flex h-full custom-border absolute top-0 left-0">
+  <div class="h-[320px] relative bg-[#082059] custom-border">
+    <div class="flex">
       <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
       <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
       <div class="absolute top-[2px] left-[15px] flex items-center">
@@ -8,7 +8,7 @@
         <div class="text-color text-[20px] ml-[9px] font-700" data-text="获客排行榜">获客排行榜</div>
       </div>
     </div>
-    <div class="w-[296px] h-[calc(100%-36px)] mt-[36px] flex flex-col">
+    <div class="w-[296px] h-[calc(100%-36px)] flex flex-col">
       <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
         <div class="text-[15px] text-[#84E8FF]">更多</div>
         <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
diff --git a/src/views/components/chartsComponents/StudentSourceChart.vue b/src/views/components/chartsComponents/StudentSourceChart.vue
index 48fe329..f760df7 100644
--- a/src/views/components/chartsComponents/StudentSourceChart.vue
+++ b/src/views/components/chartsComponents/StudentSourceChart.vue
@@ -135,8 +135,7 @@
           hovered: false,
           k: k,
         },
-        animation: true,
-        zlevel: 1,
+        animation: false,
       };
 
       if (pieData[i].itemStyle) {
@@ -234,52 +233,52 @@
             opacity: 1,
             borderWidth: 0,
           },
-          z: 1,
+          // z: 0,
         },
       ],
-      graphic: [
-        // {
-        //   id: "backgroundImg",
-        //   elements: [
-        //     {
-        //       type: "image",
-        //       left: "center",
-        //       top: "33%",
-        //       style: {
-        //         image: "/images/particleBase.png",
-        //         width: 254,
-        //         height: 106,
-        //       },
-        //       z: 0,
-        //       cursor: "point",
-        //       origin: [127, 53],
-        //       // keyframeAnimation: [
-        //       //   {
-        //       //     duration: 1600,
-        //       //     loop: true,
-        //       //     keyframes: [
-        //       //       {
-        //       //         percent: 0,
-        //       //         scaleX: 1.1,
-        //       //         scaleY: 1.1,
-        //       //       },
-        //       //       {
-        //       //         percent: 0.3,
-        //       //         scaleX: 1,
-        //       //         scaleY: 1,
-        //       //       },
-        //       //       {
-        //       //         percent: 1,
-        //       //         scaleX: 1.1,
-        //       //         scaleY: 1.1,
-        //       //       },
-        //       //     ],
-        //       //   },
-        //       // ],
-        //     },
-        //   ],
-        // },
-      ],
+      // graphic: [
+      //   // {
+      //   //   id: "backgroundImg",
+      //   //   elements: [
+      //   //     {
+      //   //       type: "image",
+      //   //       left: "center",
+      //   //       top: "33%",
+      //   //       style: {
+      //   //         image: "/images/particleBase.png",
+      //   //         width: 254,
+      //   //         height: 106,
+      //   //       },
+      //   //       z: 0,
+      //   //       cursor: "point",
+      //   //       origin: [127, 53],
+      //   //       // keyframeAnimation: [
+      //   //       //   {
+      //   //       //     duration: 1600,
+      //   //       //     loop: true,
+      //   //       //     keyframes: [
+      //   //       //       {
+      //   //       //         percent: 0,
+      //   //       //         scaleX: 1.1,
+      //   //       //         scaleY: 1.1,
+      //   //       //       },
+      //   //       //       {
+      //   //       //         percent: 0.3,
+      //   //       //         scaleX: 1,
+      //   //       //         scaleY: 1,
+      //   //       //       },
+      //   //       //       {
+      //   //       //         percent: 1,
+      //   //       //         scaleX: 1.1,
+      //   //       //         scaleY: 1.1,
+      //   //       //       },
+      //   //       //     ],
+      //   //       //   },
+      //   //       // ],
+      //   //     },
+      //   //   ],
+      //   // },
+      // ],
     };
   };