0911

git commit -m 0911

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

@@ -2,13 +2,18 @@
   <div class="leftPage">
     <div class="topPage">
       <Title title="项目公告" />
-      <div class="content">
+      <div
+        class="content"
+        ref="contentRef"
+        id="event_scroll"
+        @mouseenter.native="autoScrollTable(true, false)"
+        @mouseleave.native="autoScrollTable(false, true)"
+      >
         <div class="content_item" v-for="item in news" :key="item.id">
-          <img src="@/assets/projectLarge/round.svg" alt="">
+          <img src="@/assets/projectLarge/round.svg" alt="" />
           <div class="ellipsis">
             {{ item.title }}
-            <span @click="showNewsDetail(item)" style="color: rgba(138, 149, 165, 1);">{{ item.id === newId ? '关闭' :
-              '查看' }}</span>
+            <span @click="showNewsDetail(item)" style="color: rgba(138, 149, 165, 1)">{{ item.id === newId ? '关闭' : '查看' }}</span>
           </div>
         </div>
       </div>
@@ -22,33 +27,33 @@
     <div class="endPage">
       <Title title="人员情况" />
       <div class="map">
-        <img src="@/assets/projectLarge/map.svg" alt="">
+        <img src="@/assets/projectLarge/map.svg" alt="" />
         <!-- <div ref="mapChartRef"></div> -->
       </div>
 
       <div class="attendance_tag">
         <div class="tag_item">
-          <img src="@/assets/projectLarge/people.svg" alt="">
+          <img src="@/assets/projectLarge/people.svg" alt="" />
           <div class="tag_title">出勤人</div>
           <div class="tag_info">
             {{ attendanceCount }}
-            <span style="font-size: 14px;">人</span>
+            <span style="font-size: 14px">人</span>
           </div>
         </div>
         <div class="tag_item">
-          <img src="@/assets/projectLarge/people.svg" alt="">
+          <img src="@/assets/projectLarge/people.svg" alt="" />
           <div class="tag_title">在岗人</div>
           <div class="tag_info">
             {{ peopleCount }}
-            <span style="font-size: 14px;">人</span>
+            <span style="font-size: 14px">人</span>
           </div>
         </div>
         <div class="tag_item">
-          <img src="@/assets/projectLarge/people.svg" alt="">
+          <img src="@/assets/projectLarge/people.svg" alt="" />
           <div class="tag_title">出勤率</div>
           <div class="tag_info">
             {{ attendanceRate }}
-            <span style="font-size: 14px;">%</span>
+            <span style="font-size: 14px">%</span>
           </div>
         </div>
       </div>
@@ -62,8 +67,9 @@
         </div>
         <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_number">
+            {{ item.attendanceNumber }} <span class="subfont">人/{{ item.allNumber }}</span>
+          </div>
           <div class="attendance_item_rate">{{ item.attendanceRate }} %</div>
           <div class="attendance_item_date subfont">{{ item.attendanceTime }}</div>
         </div>
@@ -73,10 +79,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
-import Title from './title.vue'
-import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
-import { mapOption } from './optionList'
+import { ref } from 'vue';
+import Title from './title.vue';
+import { getScreenNews, getScreenPeople } from '@/api/projectScreen/index';
+import { mapOption } from './optionList';
 import * as echarts from 'echarts';
 
 const props = defineProps({
@@ -84,78 +90,102 @@ const props = defineProps({
     type: String,
     default: ''
   }
-})
+});
 
-let mapChart = null
+let mapChart = null;
 const mapChartRef = ref<HTMLDivElement | null>(null);
-const news = ref([])
+const contentRef = ref<HTMLDivElement | null>(null);
+const news = ref([]);
 const newDetail = ref({
   title: '',
   content: ''
-})
-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 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 showNewsDetail = (item: any) => {
   if (newId.value === item.id) {
-    newId.value = ''
-    return
+    newId.value = '';
+    return;
   }
-  newDetail.value = item
-  newId.value = item.id
-}
+  newDetail.value = item;
+  newId.value = item.id;
+};
 
 /**
  * 获取项目人员出勤数据
  */
 const getPeopleData = async () => {
   const res = await getScreenPeople(props.projectId);
-  const { data, code } = res
+  const { data, code } = res;
   if (code === 200) {
-    attendanceCount.value = data.attendanceCount
-    attendanceRate.value = data.attendanceRate
-    peopleCount.value = data.peopleCount
-    teamAttendanceList.value = data.teamAttendanceList
+    attendanceCount.value = data.attendanceCount;
+    attendanceRate.value = data.attendanceRate;
+    peopleCount.value = data.peopleCount;
+    teamAttendanceList.value = data.teamAttendanceList;
   }
-}
+};
 
 /**
  * 获取项目新闻数据
  */
 const getNewsData = async () => {
   const res = await getScreenNews(props.projectId);
-  const { data, code } = res
+  const { data, code } = res;
   if (code === 200) {
-    news.value = data
+    news.value = data;
+    autoScrollTable(5);
   }
-}
+};
 
-/**
- * 初始化地图
- */
-const initMapChart = () => {
-  if (!mapChartRef.value) {
+var lastTime = 0;
+const state = reactive({
+  events: [],
+  outputList: [],
+  detialInfoShow: false,
+  notShowPro: [{ id: 37 }, { id: 44 }, { id: 48 }], //模块内容区域不展示的项目（中煤科工 广东户用光伏项目 兴隆光伏）
+  scrolltimerTable: null,
+  flagPause: true //滚动继续滚动
+});
+
+const autoScrollTable = (time, flag = true) => {
+  //表格自动滚动
+  const divData = document.getElementById('event_scroll');
+  if (!flag || !state.flagPause) {
+    cancelAnimationFrame(state.scrolltimerTable);
     return;
   }
-  mapChart = echarts.init(mapChartRef.value);
-  mapChart.setOption(mapOption);
-}
+  if (time - lastTime < 25) {
+    // 50毫秒更新一次
+    state.scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    return; // 如果时间未到，则返回，不执行动画更新
+  }
+  lastTime = time;
+  // 元素自增距离顶部1像素
+  divData.scrollTop += 1;
+  // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+  if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+    // 重置table距离顶部距离
+    divData.scrollTop = 0;
+    state.scrolltimerTable = requestAnimationFrame(autoScrollTable);
+  } else {
+    state.scrolltimerTable = requestAnimationFrame(autoScrollTable);
+  }
+};
 
 onMounted(() => {
   // nextTick(() => {
   //   initMapChart();
   // });
-  getPeopleData()
-  getNewsData()
-})
+  getPeopleData();
+  getNewsData();
+});
 
 onUnmounted(() => {
   // if (mapChart) {
@@ -163,7 +193,6 @@ onUnmounted(() => {
   //   mapChart = null;
   // }
 });
-
 </script>
 
 <style scoped lang="scss">