From 235a109b3b461c7acbd1d7bb4f7e920075de2b9e Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 24 四月 2025 15:40:51 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/midBottom.vue | 142 ++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 139 insertions(+), 3 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/midBottom.vue b/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
index eca8b81..7f9b1f3 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
@@ -1,19 +1,99 @@
<template>
<div class="charts-container">
<div id="preWarning"></div>
+ <div class="table-wrapper">
+ <table class="scrollable-table">
+ <thead>
+ <tr>
+ <th>预警信息</th>
+ <th>预警时间</th>
+ </tr>
+ </thead>
+ </table>
+ <div class="scroll-viewport" ref="viewport">
+ <div class="scroll-content" :style="contentStyle">
+ <table class="scrollable-table">
+ <tbody>
+ <tr v-for="(item,index) in warningData" :key="item.id">
+ <td>{{ item.warningInfo }}</td>
+ <td>{{ item.warningTime }}</td>
+ </tr>
+ <tr v-for="(item,index) in loopData" :key="`loop-${item.id}`">
+ <td>{{ item.warningInfo }}</td>
+ <td>{{ item.warningTime }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
-import {onMounted} from "vue";
+import {computed, onBeforeUnmount, onMounted, ref} from "vue";
import {getCompanyMessage, getDailywarningCount} from "@/api/monitor/screenCharts";
import {ElMessage} from "element-plus";
+const warningData = [
+ {warningInfo: '超期预警',warningTime: '2025-04-24 13:18:41' },
+ {warningInfo: '超期预警',warningTime: '2025-04-23 13:00:21' },
+ {warningInfo: '超期预警',warningTime: '2025-04-20 10:11:34' },
+ {warningInfo: '超期预警',warningTime: '2025-04-18 09:28:51' },
+ {warningInfo: '超期预警',warningTime: '2025-04-16 08:18:21' },
+ {warningInfo: '超期预警',warningTime: '2025-04-15 05:12:21' },
+ {warningInfo: '超期预警',warningTime: '2025-04-14 04:11:41' }
+]
+// 配置参数
+const visibleRows = 5 // 显示的行数
+const scrollSpeed = 0.5 // 每次滚动的像素数
+const rowHeight = 36 // 行高，与CSS一致
+const viewport = ref(null)
+const scrollPosition = ref(0)
+let animationFrame = null
+
onMounted(()=>{
getList()
-
+// 设置视口高度
+ if (viewport.value) {
+ viewport.value.style.height = `${visibleRows * rowHeight}px`
+ }
+ // 延迟启动滚动，确保初始渲染完成
+ setTimeout(() => {
+ scrollAnimation()
+ }, 100)
})
+onBeforeUnmount(() => {
+ if (animationFrame) {
+ cancelAnimationFrame(animationFrame)
+ }
+})
+
+// 复制前几行数据用于循环
+const loopData = computed(() => {
+ return warningData.slice(0, visibleRows)
+})
+
+// 内容区域样式
+const contentStyle = computed(() => {
+ return {
+ transform: `translateY(-${scrollPosition.value}px)`
+ }
+})
+
+// 滚动动画
+const scrollAnimation = () => {
+ const totalHeight = warningData.length * rowHeight
+ const loopHeight = loopData.value.length * rowHeight
+ // 更新滚动位置
+ scrollPosition.value += scrollSpeed
+ // 当滚动到循环数据部分时，重置位置实现无缝衔接
+ if (scrollPosition.value >= totalHeight) {
+ scrollPosition.value -= totalHeight
+ }
+ animationFrame = requestAnimationFrame(scrollAnimation)
+}
const getList = async () => {
const res = await getDailywarningCount()
@@ -105,10 +185,66 @@
.charts-container{
width: 100%;
height: 100%;
+ display: flex;
}
#preWarning{
- width: 100%;
+ flex: 2;
height: 100%;
}
+
+.table-wrapper {
+ position: relative;
+ flex: 1;
+ height: 100%;
+ border: 1px solid rgba(255,255,255,.1);
+ border-radius: 2px;
+ overflow: hidden;
+
+ .scrollable-table {
+ width: 100%;
+ border-collapse: collapse;
+
+ th,td {
+ padding: 12px 15px;
+ color: #fff;
+ text-align: left;
+ border-bottom: 1px solid rgba(255,255,255,.1);
+ height: 36px; /* 与rowHeight一致 */
+ box-sizing: border-box;
+ font-size: 12px;
+ font-weight: normal;
+ }
+ th {
+ position: sticky;
+ top: 0;
+ z-index: 10; /* 确保表头在内容之上 */
+ }
+ tr{
+ background: rgb(6,38,87);
+
+ &:nth-of-type(2n){
+ background: rgb(19,72,127);
+ }
+ }
+ thead tr{
+ background: rgba(0,0,0,0);
+ }
+ }
+ .scroll-viewport {
+ position: relative;
+ overflow: hidden;
+ .scroll-content {
+ will-change: transform; /* 优化性能 */
+ }
+ .danger {
+ color: #ff2f2f;
+ animation: blink 1s infinite;
+ }
+ .warning {
+ color: yellow;
+ animation: blink 1s infinite;
+ }
+ }
+}
</style>
--
Gitblit v1.9.2