名额

src/views/Home/Index.vue

@@ -276,7 +276,7 @@ import { useWatermark } from '@/hooks/web/useWatermark'
 import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
 import { pieOptions, barOptions } from './echarts-data'
 import { reactive, onMounted, watchEffect } from "vue";
-import { vue3ScrollSeamless } from "vue3-scroll-seamless";
+import {vue3ScrollSeamless} from "vue3-scroll-seamless";
 import * as UserApi from '@/api/system/user'
 import * as  DeptApi from '@/api/system/dept'
 import  { StudentAttendanceApi } from '@/api/system/studentAttendance'

src/views/system/Home/Index.vue

@@ -104,7 +104,7 @@
                 </div>
                 <vue3ScrollSeamless
                   class="scroll-wrap text-color " :classOptions="classOptions"
-                  :dataList="list">
+                  :dataList="list" v-if="list.length > 0">
                   <div v-if="list.length > 0">
                     <el-row
                       v-for="(item, i) of list" :key="i" class="shouye"
@@ -178,13 +178,10 @@
                     </div>
                   </div>
 
-                  <vue3ScrollSeamless
-class="scroll-wraps text-color" :classOptions="class2Options"
-                                      :dataList="list2">
+                  <vue3ScrollSeamless class="scroll-wraps text-color" :classOptions="class2Options"
+                                      :dataList="list2" v-if="list2.length > 0">
                     <div v-if="list2.length > 0">
-                      <el-row
-v-for="(item, i) of list2" :key="i" class="shouye"
-                              style="margin-bottom: 5px; display: flex; justify-content: center;background :rgba(147,208,255,0.18);padding:2px">
+                      <el-row v-for="(item, i) of list2" :key="i" class="shouye" style="margin-bottom: 5px; display: flex; justify-content: center;background :rgba(147,208,255,0.18);padding:2px">
                         <!-- <el-col :span="6" class="center" style="padding: 10px; border: none;">
                           <div>{{ item.ID }}</div>
                         </el-col> -->
@@ -207,17 +204,14 @@ v-for="(item, i) of list2" :key="i" class="shouye"
                       暂无预测记录
                     </div> -->
                   </vue3ScrollSeamless>
-                  <div
-v-if="list2.length == 0"
-                       style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
+                  <div v-if="list2.length == 0" style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
                     <el-empty description="暂无数据"/>
                   </div>
                 </div>
               </el-card>
             </el-col>
             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-              <el-card
-class=" mb-27px h-465px mt-40px "
+              <el-card class=" mb-27px h-465px mt-40px "
                        style="border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <template #header>
                   <div class="h-7 flex justify-between fw-800 text-20px">
@@ -249,7 +243,7 @@ class=" mb-27px h-465px mt-40px "
             <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" @finished="resizeChart" autoresize/>
+              <Echart :options="pieOptionsData" :height="230" autoresize/>
             </el-skeleton>
             </el-card>
             </div>
@@ -264,24 +258,19 @@ class=" mb-27px h-465px mt-40px "
               <div class="demoss">
                 <div class="header">
                   <el-row class="shouye h-40px" style="border: none;">
-                    <el-col
-:span="12" class="center text-18px"
+                    <el-col :span="12" class="center text-18px"
                             style="border: none;padding: 8px;margin-left: 5px; margin-top: -5px;">
                       <div style="font-weight:550">工作间</div>
                     </el-col>
-                    <el-col
-:span="12" class="center text-18px"
+                    <el-col :span="12" class="center text-18px"
                             style="border: none;padding: 8px;margin-left: -15px; margin-top: -5px;">
                       <div style="font-weight:550">达成率</div>
                     </el-col>
                   </el-row>
                 </div>
-                <vue3ScrollSeamless
-class="scroll-wrapss  text-color" :classOptions="list1Options"
-                                    :dataList="list1">
+                <vue3ScrollSeamless v-if="list1.length != 0" class="scroll-wrapss text-color" :classOptions="list1Options" :dataList="list1">
                   <div v-if="list1.length > 0">
-                    <el-row
-v-for="(item, i) of list1" :key="i" class="shouye"
+                    <el-row v-for="(item, i) of list1" :key="i" class="shouye"
                             style="margin-bottom: 10px ;  display: flex; justify-content: center;background: rgba(138,193,248,0.17);padding: 2px">
                       <!-- 增加行与行之间的间距 -->
                       <el-col :span="12" class="center" style="padding: 15px;"> <!-- 增加内边距 -->
@@ -292,8 +281,7 @@ v-for="(item, i) of list1" :key="i" class="shouye"
                       </el-col>
                     </el-row>
                   </div>
-                  <div
-v-if="list1.length == 0"
+                  <div v-if="list1.length == 0"
                        style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
                     暂无预测记录
                   </div>
@@ -553,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);
+//   }
+// };
 
 
 /**周出勤情况 */
@@ -596,9 +584,10 @@ 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.5,//滚动速度值越大越快，但是值太小会卡顿
+  step: 0.7,//滚动速度值越大越快，但是值太小会卡顿
   limitMoveNum: list2.length,//无缝滚动列表元素的长度，一般设置为列表的长度
   direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
 });
@@ -607,9 +596,12 @@ 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,//滚动速度值越大越快，但是值太小会卡顿
@@ -655,18 +647,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([