修改

.env.development

@@ -7,13 +7,13 @@ VITE_APP_ENV = 'development'
 # 开发环境
 # 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'
 # 罗成
 # VITE_APP_BASE_API = 'http://192.168.110.188:8899'
 # 朱银
-# VITE_APP_BASE_API = 'http://192.168.110.149:8899'
+VITE_APP_BASE_API = 'http://192.168.110.149:8899'
 #曾涛
 # VITE_APP_BASE_API = 'http://192.168.110.171:8899'
 

src/views/ProjectScreen/components/leftPage.vue

@@ -2,13 +2,12 @@
   <div class="leftPage">
     <div class="topPage">
       <Title title="项目公告" />
-      <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">
+      <div class="content" ref="contentRef" id="event_scroll" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
+        <div class="content_item" v-for="item in news" :key="item.id" @click="showNewsDetail(item)">
           <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 style="color: rgba(138, 149, 165, 1);">{{ item.id === newId ? '关闭' :
               '查看' }}</span>
           </div>
         </div>
@@ -18,6 +17,9 @@
     <div class="detailBox" :class="{ 'show': newId }">
       <!-- <div class="detail_title">{{ newDetail.title }}</div> -->
       <div class="detail_content" v-html="newDetail.content"></div>
+      <div class="close" @click="newId = ''">
+        <CircleClose style="width: 1.2em; height: 1.2em;" />
+      </div>
     </div>
 
     <div class="endPage">
@@ -77,8 +79,6 @@
 import { ref } from "vue"
 import Title from './title.vue'
 import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
-import { mapOption } from './optionList'
-import * as echarts from 'echarts';
 
 const props = defineProps({
   projectId: {
@@ -87,8 +87,6 @@ const props = defineProps({
   }
 })
 
-let mapChart = null
-const mapChartRef = ref<HTMLDivElement | null>(null);
 const contentRef = ref<HTMLDivElement | null>(null);
 const news = ref([])
 const newDetail = ref({
@@ -137,58 +135,51 @@ const getNewsData = async () => {
   const { data, code } = res
   if (code === 200) {
     news.value = data
-    autoScrollTable(5)
+    requestAnimationFrame((timestamp) => autoScrollTable(timestamp));
   }
 }
 
 var lastTime = 0;
-const state = reactive({
-  events: [],
-  outputList: [],
-  detialInfoShow: false,
-  notShowPro: [{ id: 37 }, { id: 44 }, { id: 48 }], //模块内容区域不展示的项目（中煤科工 广东户用光伏项目 兴隆光伏）
-  scrolltimerTable: null,
-  flagPause: true, //滚动继续滚动
-});
+var scrolltimerTable = null
 
-const autoScrollTable = (time, flag = true) => {
-  //表格自动滚动
+const autoScrollTable = (time: number) => {
   const divData = document.getElementById('event_scroll');
-  if (!flag || !state.flagPause) {
-    cancelAnimationFrame(state.scrolltimerTable);
-    return;
-  }
+
   if (time - lastTime < 25) {
-    // 50毫秒更新一次
-    state.scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    scrolltimerTable = requestAnimationFrame(autoScrollTable);
     return; // 如果时间未到，则返回，不执行动画更新
   }
   lastTime = time;
-  // 元素自增距离顶部1像素
   divData.scrollTop += 1;
-  // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
-  if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
-    // 重置table距离顶部距离
+  if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight - 1) {
     divData.scrollTop = 0;
-    state.scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    scrolltimerTable = requestAnimationFrame(autoScrollTable);
   } else {
-    state.scrolltimerTable = requestAnimationFrame(autoScrollTable);
+    scrolltimerTable = requestAnimationFrame(autoScrollTable);
+  }
+};
+
+// 暂停滚动
+const pauseScroll = () => {
+  if (scrolltimerTable) {
+    cancelAnimationFrame(scrolltimerTable);
+    scrolltimerTable = null;
+  }
+};
+
+// 恢复滚动
+const resumeScroll = () => {
+  if (!scrolltimerTable) {
+    requestAnimationFrame((timestamp) => autoScrollTable(timestamp));
   }
 };
 
 onMounted(() => {
-  // nextTick(() => {
-  //   initMapChart();
-  // });
   getPeopleData()
   getNewsData()
 })
 
 onUnmounted(() => {
-  // if (mapChart) {
-  //   mapChart.dispose();
-  //   mapChart = null;
-  // }
 });
 
 </script>
@@ -321,7 +312,7 @@ onUnmounted(() => {
   height: 300px;
   max-height: 500px;
   overflow-y: auto;
-  padding: 0 15px;
+  padding: 10px 15px;
   box-sizing: border-box;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 4px;
@@ -334,6 +325,13 @@ onUnmounted(() => {
     opacity: 1;
     z-index: 1;
   }
+
+  .close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer;
+  }
 }
 
 .detailBox::before {

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" />