From 2cd70eb41584033214fe707b9f16b5037fc2beba Mon Sep 17 00:00:00 2001 From: shi <936384804@qq.com> Date: Thu, 11 Sep 2025 17:01:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- .../ProjectScreen/components/leftPage.vue | 78 +++++++++---------- src/views/ProjectScreen/index.vue | 2 +- 3 files changed, 41 insertions(+), 43 deletions(-) diff --git a/.env.development b/.env.development index f83de7e..f584a24 100644 --- a/.env.development +++ b/.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' diff --git a/src/views/ProjectScreen/components/leftPage.vue b/src/views/ProjectScreen/components/leftPage.vue index 8e3e734..fb26e7a 100644 --- a/src/views/ProjectScreen/components/leftPage.vue +++ b/src/views/ProjectScreen/components/leftPage.vue @@ -2,13 +2,12 @@
- <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"> @@ -64,7 +66,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> @@ -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 { diff --git a/src/views/ProjectScreen/index.vue b/src/views/ProjectScreen/index.vue index 290056a..f58a18f 100644 --- a/src/views/ProjectScreen/index.vue +++ b/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" />