Merge branch 'szq' of http://xny.yj-3d.com:3000/taoge/new_project into ljx

src/views/projectLarge/ProjectScreen/components/leftPage.vue

@@ -68,12 +68,15 @@
           <div class="attendance_item_title">出勤率</div>
           <div class="attendance_item_title">出勤时间</div>
         </div>
+      </div>
+
+      <div class="attendance_list scroll">
         <div v-for="item in teamAttendanceList" :key="item.id" class="attendance_item">
           <div class="attendance_item_title">{{ item.teamName }}</div>
           <div class="attendance_item_number">
             {{ item.attendanceNumber }} <span class="subfont">人/{{ item.allNumber }}</span>
           </div>
-          <div class="attendance_item_rate">{{ item.attendanceRate }} %</div>
+          <div class="attendance_item_rate">{{ item.attendanceRate != '0' ? item.attendanceRate : `${item.attendanceRate}.00` }} %</div>
           <div class="attendance_item_date subfont">{{ item.attendanceTime }}</div>
         </div>
       </div>
@@ -107,7 +110,7 @@ const newId = ref('');
 const attendanceCount = ref(0);
 const attendanceRate = ref(0);
 const peopleCount = ref(0);
-const teamAttendanceList = ref([{ id: '', teamName: '', attendanceNumber: 0, allNumber: 0, attendanceRate: 0, attendanceTime: '' }]);
+const teamAttendanceList = ref([]);
 
 /**
  * 显示新闻详情
@@ -128,6 +131,7 @@ const getPeopleData = async () => {
   const res = await getScreenPeople(props.projectId);
   const { data, code } = res;
   if (code === 200) {
+    console.log(data);
     attendanceCount.value = data.attendanceCount;
     attendanceRate.value = data.attendanceRate;
     peopleCount.value = data.peopleCount;
@@ -148,14 +152,8 @@ const getNewsData = async () => {
 };
 
 var lastTime = 0;
-const state = reactive({
-  events: [],
-  outputList: [],
-  detialInfoShow: false,
-  notShowPro: [{ id: 37 }, { id: 44 }, { id: 48 }], //模块内容区域不展示的项目（中煤科工 广东户用光伏项目 兴隆光伏）
-  scrolltimerTable: null,
-  flagPause: true //滚动继续滚动
-});
+var scrolltimerTable = null;
+var rotate = false;
 
 const autoScrollTable = (time: number) => {
   const divData = document.getElementById('event_scroll');
@@ -165,10 +163,21 @@ const autoScrollTable = (time: number) => {
     return; // 如果时间未到，则返回，不执行动画更新
   }
   lastTime = time;
-  divData.scrollTop += 1;
-  if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight - 1) {
-    divData.scrollTop = 0;
-    scrolltimerTable = requestAnimationFrame(autoScrollTable);
+  if (rotate) {
+    divData.scrollTop -= 1;
+  } else {
+    divData.scrollTop += 1;
+  }
+  if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+    rotate = true;
+    setTimeout(() => {
+      scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    }, 1000);
+  } else if (divData.scrollTop == 0) {
+    rotate = false;
+    setTimeout(() => {
+      scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    }, 1000);
   } else {
     scrolltimerTable = requestAnimationFrame(autoScrollTable);
   }
@@ -306,7 +315,9 @@ onUnmounted(() => {});
 }
 
 .attendance_list {
-  padding: 0px 30px;
+  width: calc(100% - 30px);
+  padding: 0px 15px;
+  margin: 0 auto;
   font-size: 14px;
 
   .attendance_item {
@@ -314,6 +325,22 @@ onUnmounted(() => {});
     grid-template-columns: 3fr 2fr 2fr 3fr;
     margin-top: 20px;
   }
+
+  &.scroll {
+    margin-top: 10px;
+    height: 280px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track {
+      background: rgba(204, 204, 204, 0.1);
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(29, 214, 255, 0.78);
+      border-radius: 10px;
+    }
+  }
 }
 
 .subfont {
@@ -330,7 +357,9 @@ onUnmounted(() => {});
   overflow-y: auto;
   padding: 10px 15px;
   box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(138, 157, 161, 0.5);
+  border: 2px dashed rgba(29, 214, 255, 0.3);
+  border-right: none;
   border-radius: 4px;
   transition: all 0.3s ease;
   opacity: 0;
@@ -349,22 +378,4 @@ onUnmounted(() => {});
     cursor: pointer;
   }
 }
-
-.detailBox::before {
-  content: '';
-  /* 绝对定位相对于父元素 */
-  position: absolute;
-  /* 定位到左侧中间位置 */
-  left: -10px;
-  top: 50%;
-  /* 垂直居中 */
-  transform: translateY(-50%);
-  /* 利用边框创建三角形 */
-  border-width: 10px 10px 10px 0;
-  border-style: solid;
-  /* 三角形颜色与背景匹配，左侧边框透明 */
-  border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
-  /* 确保三角形在内容下方 */
-  z-index: -1;
-}
 </style>