src/views/system/Home/Index.vue

@@ -104,7 +104,7 @@
                 </div>
                 <vue3ScrollSeamless
                   class="scroll-wrap text-color " :classOptions="classOptions"
-                  :dataList="list" v-if="list.length > 0">
+                  :dataList="list">
                   <div v-if="list.length > 0">
                     <el-row
                       v-for="(item, i) of list" :key="i" class="shouye"
@@ -187,7 +187,7 @@
                         </el-col> -->
                         <el-col :span="6" class="center" style="padding: 10px; border: none;">
                           <div style="font-weight: 900">{{ item.studentName }}</div>
-                        </el-col> 123123
+                        </el-col>
                         <el-col :span="6" class="center" style="padding: 10px; border: none;">
                           <div>{{ item.userNumber }}</div>
                         </el-col>
@@ -243,7 +243,7 @@
             <div ref="chartRef" class="chart-container" style="height: 280px;">
             <el-card style="border-radius:10px;border: 3px solid rgba(110,153,243,0.32)">
             <el-skeleton :loading="loading" animated>
-              <Echart :options="pieOptionsData" :height="230" autoresize/>
+              <Echart :options="pieOptionsData" :height="230" @finished="resizeChart" autoresize/>
             </el-skeleton>
             </el-card>
             </div>
@@ -541,23 +541,23 @@ const getGraduateCount = async () => {
   }
 };
 
-// const resizeChart = () => {
-//   // console.log(chartRef.value,"eee")
-//   if (chartInstance.value && chartRef.value) {
-//     // console.log(chartRef.value,"eee")
-//     const width = chartRef.value.offsetWidth;
-//     // 根据容器宽度计算内外径比例
-//     const innerRadius = width > 600 ? '50%' : '20%';
-//     const outerRadius = width > 600 ? '100%' : '35%';
-//     const labelLength = width > 600 ? 35 : 15;
-//
-//     // 更新饼图配置项
-//     pieOptionsData.series[0].radius = [innerRadius, outerRadius];
-//     pieOptionsData.series[0].labelLine.length = labelLength;
-//     pieOptionsData.series[0].labelLine.length2 = labelLength / 2;
-//     chartInstance.value.setOption(pieOptionsData, true);
-//   }
-// };
+const resizeChart = () => {
+  // console.log(chartRef.value,"eee")
+  if (chartInstance.value && chartRef.value) {
+    // console.log(chartRef.value,"eee")
+    const width = chartRef.value.offsetWidth;
+    // 根据容器宽度计算内外径比例
+    const innerRadius = width > 600 ? '50%' : '20%';
+    const outerRadius = width > 600 ? '100%' : '35%';
+    const labelLength = width > 600 ? 35 : 15;
+
+    // 更新饼图配置项
+    pieOptionsData.series[0].radius = [innerRadius, outerRadius];
+    pieOptionsData.series[0].labelLine.length = labelLength;
+    pieOptionsData.series[0].labelLine.length2 = labelLength / 2;
+    chartInstance.value.setOption(pieOptionsData, true);
+  }
+};
 
 
 /**周出勤情况 */
@@ -584,10 +584,9 @@ const getStudentAttendanceError = async () => {
   const data = await StudentAttendanceApi.getDayStudentErrorAttendance()
   // console.log("缺勤列表", data);
   list2.splice(0, list2.length, ...data);
-  console.log(list2, "list2");
 }
 const class2Options = reactive({
-  step: 0.7,//滚动速度值越大越快，但是值太小会卡顿
+  step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
   limitMoveNum: list2.length,//无缝滚动列表元素的长度，一般设置为列表的长度
   direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
 });
@@ -596,12 +595,9 @@ const class2Options = reactive({
 //打卡滚动列表
 const list = reactive([]);
 const getStudentAttendance = async () => {
-  console.log("jiazaiqian 实时打卡状态",list,list.length);
   const data = await StudentAttendanceApi.getDayStudentAttendance()
   console.log("打卡列表", data);
   list.splice(0, list.length, ...data);
-  console.log(list, "list21");
-
 }
 const classOptions = reactive({
   step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
@@ -647,18 +643,18 @@ const list1Options = reactive({
         chartInstance.value = echarts.init(chartRef.value);
         chartInstance.value.setOption(pieOptionsData);
 
-        // window.addEventListener('resize', resizeChart);
-        // resizeChart();
+        window.addEventListener('resize', resizeChart);
+        resizeChart();
       }
     })
 });
 
-// onUnmounted(() => {
-//   if (chartInstance.value) {
-//     window.removeEventListener('resize', resizeChart);
-//     chartInstance.value.dispose();
-//   }
-// });
+onUnmounted(() => {
+  if (chartInstance.value) {
+    window.removeEventListener('resize', resizeChart);
+    chartInstance.value.dispose();
+  }
+});
 
 const getAllApi = async () => {
   await Promise.all([