From e1d380a930e73d8355a4695ca5f5b91f471c2394 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 28 四月 2025 13:32:12 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/midBottom.vue | 46 ++++++++++++++++++++++++++++++----------------
1 files changed, 30 insertions(+), 16 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/midBottom.vue b/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
index 7f9b1f3..8062e73 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midBottom.vue
@@ -1,12 +1,13 @@
<template>
<div class="charts-container">
- <div id="preWarning"></div>
+<!-- <div id="preWarning"></div>-->
<div class="table-wrapper">
<table class="scrollable-table">
<thead>
<tr>
- <th>预警信息</th>
- <th>预警时间</th>
+ <th>企业名称</th>
+ <th>预警情况</th>
+ <th>分类</th>
</tr>
</thead>
</table>
@@ -15,12 +16,14 @@
<table class="scrollable-table">
<tbody>
<tr v-for="(item,index) in warningData" :key="item.id">
- <td>{{ item.warningInfo }}</td>
- <td>{{ item.warningTime }}</td>
+ <td>{{ item.name }}</td>
+ <td>{{ item.info }}</td>
+ <td :class="{'red': item.type == '红色','yellow': item.type == '黄色','blue': item.type == '蓝色'}">{{ item.type }}</td>
</tr>
<tr v-for="(item,index) in loopData" :key="`loop-${item.id}`">
- <td>{{ item.warningInfo }}</td>
- <td>{{ item.warningTime }}</td>
+ <td>{{ item.name }}</td>
+ <td>{{ item.info }}</td>
+ <td :class="{'red': item.type == '红色','yellow': item.type == '黄色','blue': item.type == '蓝色'}">{{ item.type }}</td>
</tr>
</tbody>
</table>
@@ -36,16 +39,16 @@
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' }
+ {name: '企业1',info: 'XXXXXXXX',type: '红色' },
+ {name: '企业2',info: 'XXXXXXXX',type: '蓝色' },
+ {name: '企业3',info: 'XXXXXXXX',type: '黄色' },
+ {name: '企业4',info: 'XXXXXXXX',type: '蓝色' },
+ {name: '企业5',info: 'XXXXXXXX',type: '红色' },
+ {name: '企业6',info: 'XXXXXXXX',type: '黄色' },
+ {name: '企业7',info: 'XXXXXXXX',type: '蓝色' }
]
// 配置参数
-const visibleRows = 5 // 显示的行数
+const visibleRows = 7 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 36 // 行高，与CSS一致
const viewport = ref(null)
@@ -53,7 +56,7 @@
let animationFrame = null
onMounted(()=>{
- getList()
+ // getList()
// 设置视口高度
if (viewport.value) {
viewport.value.style.height = `${visibleRows * rowHeight}px`
@@ -214,6 +217,16 @@
box-sizing: border-box;
font-size: 12px;
font-weight: normal;
+ flex: 1;
+ }
+ .red{
+ color: red
+ }
+ .yellow{
+ color: yellow
+ }
+ .blue{
+ color: #51ccff
}
th {
position: sticky;
@@ -222,6 +235,7 @@
}
tr{
background: rgb(6,38,87);
+ display: flex;
&:nth-of-type(2n){
background: rgb(19,72,127);
--
Gitblit v1.9.2