修改大屏数据处理

src/views/recruitment/card/ListView.vue

@@ -4,9 +4,10 @@
     <!-- 表头保持固定 -->
     <ul class="header-list">
       <li class="singleBackground topLi">
-        <div> 序号</div>
+<!--        <div> 序号</div>-->
         <div>区域</div>
         <div>入职人数</div>
+        <div>占比</div>
       </li>
     </ul>
     <!-- 滚动区域 -->
@@ -15,9 +16,10 @@
         <div ref="scrollItemBox">
           <li v-for="(item, index) in pieData" :key="index" @click="visible = true"
             :class="{ 'singleBackground': index % 2 == 0, 'evenBackground': index % 2 == 1 }">
-            <div>{{ `${index + 1 >= 10 ? index + 1 : '0' + (index + 1)}` }}</div>
+<!--            <div>{{ `${index + 1 >= 10 ? index + 1 : '0' + (index + 1)}` }}</div>-->
             <div>{{ item.zone }}</div>
             <div>{{ item.count }}人</div>
+            <div>{{ item.proportion }}</div>
             <div></div>
           </li>
         </div>
@@ -81,98 +83,120 @@ import * as echarts from "echarts";
 const pieRef = ref(null);
 const pieData = [
   {
-    zone: "四川 - 成都",
-    count: 2920
+    "zone": "四川 - 成都",
+    "count": 2920,
+    "proportion": 29.87
   },
   {
-    zone: "省外",
-    count: 1490
+    "zone": "省外",
+    "count": 1490,
+    "proportion": 15.24
   },
   {
-    zone: "四川 - 南充",
-    count: 598
+    "zone": "四川 - 南充",
+    "count": 598,
+    "proportion": 6.12
   },
   {
-    zone: "四川 - 内江",
-    count: 473
+    "zone": "四川 - 内江",
+    "count": 473,
+    "proportion": 4.84
   },
   {
-    zone: "四川 - 乐山",
-    count: 421
+    "zone": "四川 - 乐山",
+    "count": 421,
+    "proportion": 4.31
   },
   {
-    zone: "四川 - 眉山",
-    count: 386
+    "zone": "四川 - 眉山",
+    "count": 386,
+    "proportion": 3.95
   },
   {
-    zone: "四川 - 巴中",
-    count: 373
+    "zone": "四川 - 巴中",
+    "count": 373,
+    "proportion": 3.82
   },
   {
-    zone: "四川 - 宜宾",
-    count: 313
+    "zone": "四川 - 宜宾",
+    "count": 313,
+    "proportion": 3.2
   },
   {
-    zone: "四川 - 达州",
-    count: 313
+    "zone": "四川 - 达州",
+    "count": 313,
+    "proportion": 3.2
   },
   {
-    zone: "四川 - 广元",
-    count: 300
+    "zone": "四川 - 广元",
+    "count": 300,
+    "proportion": 3.07
   },
   {
-    zone: "四川 - 泸州",
-    count: 294
+    "zone": "四川 - 泸州",
+    "count": 294,
+    "proportion": 3.01
   },
   {
-    zone: "四川 - 遂宁",
-    count: 278
+    "zone": "四川 - 遂宁",
+    "count": 278,
+    "proportion": 2.84
   },
   {
-    zone: "四川 - 自贡",
-    count: 276
+    "zone": "四川 - 自贡",
+    "count": 276,
+    "proportion": 2.82
   },
   {
-    zone: "四川 - 资阳",
-    count: 272
+    "zone": "四川 - 资阳",
+    "count": 272,
+    "proportion": 2.78
   },
   {
-    zone: "四川 - 绵阳",
-    count: 231
+    "zone": "四川 - 绵阳",
+    "count": 231,
+    "proportion": 2.36
   },
   {
-    zone: "四川 - 德阳",
-    count: 222
+    "zone": "四川 - 德阳",
+    "count": 222,
+    "proportion": 2.27
   },
   {
-    zone: "四川 - 凉山",
-    count: 177
+    "zone": "四川 - 凉山",
+    "count": 177,
+    "proportion": 1.81
   },
   {
-    zone: "四川 - 雅安",
-    count: 166
+    "zone": "四川 - 雅安",
+    "count": 166,
+    "proportion": 1.7
   },
   {
-    zone: "四川 - 广安",
-    count: 162
+    "zone": "四川 - 广安",
+    "count": 162,
+    "proportion": 1.66
   },
   {
-    zone: "四川 - 攀枝花",
-    count: 54
+    "zone": "四川 - 攀枝花",
+    "count": 54,
+    "proportion": 0.55
   },
   {
-    zone: "四川 - 阿坝",
-    count: 47
+    "zone": "四川 - 阿坝",
+    "count": 47,
+    "proportion": 0.48
   },
   {
-    zone: "四川 - 甘孜",
-    count: 9
+    "zone": "四川 - 甘孜",
+    "count": 9,
+    "proportion": 0.09
   }
 ]
 const visible = ref(false);
 // 滚动相关变量
 const scrollTop = ref(0); // 列表滚动高度
-const speed = ref(15); // 滚动速度
+const speed = ref(120); // 滚动速度
 const copyHtml = ref(''); // 复制的HTML内容
 const scrollItemBox = ref(null); // 滚动项容器引用
 let timer = null;
@@ -308,13 +332,13 @@ function closeModal() {
   }
 
   >div:first-child {
-    width: 20%;
+    width: 50%;
     text-align: left;
     font-weight: bold;
   }
 
   >div:nth-child(2) {
-    width: 50%;
+    width: 25%;
     text-align: center;
   }