增加项目公告滚动效果

.env.development

@@ -5,9 +5,9 @@ VITE_APP_TITLE = 煤科建管平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.180:8899'
+# VITE_APP_BASE_API = 'http://192.168.110.180:8899'
 # 李陈杰 209
-# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
+VITE_APP_BASE_API = 'http://192.168.110.209:8899'
 # 曾涛
 # VITE_APP_BASE_API = 'http://192.168.110.180:8899'
 # 罗成

src/views/ProjectScreen/components/leftPage.vue

@@ -2,7 +2,8 @@
   <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="">
           <div class="ellipsis">
@@ -63,7 +64,7 @@
         <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>
+          }}</span></div>
           <div class="attendance_item_rate">{{ item.attendanceRate }} %</div>
           <div class="attendance_item_date subfont">{{ item.attendanceTime }}</div>
         </div>
@@ -88,6 +89,7 @@ const props = defineProps({
 
 let mapChart = null
 const mapChartRef = ref<HTMLDivElement | null>(null);
+const contentRef = ref<HTMLDivElement | null>(null);
 const news = ref([])
 const newDetail = ref({
   title: '',
@@ -135,19 +137,44 @@ const getNewsData = async () => {
   const { data, code } = res
   if (code === 200) {
     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(() => {

src/views/ProjectScreen/index.vue

@@ -6,7 +6,7 @@
         <leftPage :projectId="projectId" />
       </div>
       <div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
-        <centerPage :projectId="projectId" :isHide="isFull" />
+        <!-- <centerPage :projectId="projectId" :isHide="isFull" /> -->
       </div>
       <div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
         <rightPage :projectId="projectId" />