修改大屏

马宇豪

2025-04-28 e1d380a930e73d8355a4695ca5f5b91f471c2394

 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);