From 91f2640c8919e7cbe41c8c437e4f7fd60345e062 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Tue, 22 Apr 2025 10:47:00 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/midTop.vue | 177 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 126 insertions(+), 51 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/midTop.vue b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
index d9a5dd8..4a26014 100644
--- a/src/views/hazardousChemicals/bigScreen/components/midTop.vue
+++ b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
@@ -1,34 +1,56 @@
<template>
<div class="charts-container">
- <div class="table-wrapper">
- <table class="scrollable-table">
- <thead>
- <tr>
- <th>排名</th>
- <th>企业名称</th>
- <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 in companyData" :key="item.id">
- <td>{{ item.rank }}</td>
- <td>{{ item.company }}</td>
- <td>{{ item.warehouse }}</td>
- <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td>
- </tr>
- <tr v-for="item in loopData" :key="`loop-${item.id}`">
- <td>{{ item.rank }}</td>
- <td>{{ item.company }}</td>
- <td>{{ item.warehouse }}</td>
- <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td>
- </tr>
- </tbody>
- </table>
+ <div class="container-left">
+ <div class="filter">
+ <el-select
+ clearable
+ :teleported="false"
+ v-model="companyType"
+ filterable
+ placeholder="请选择企业类型"
+ style="width: 100%"
+ remote
+ remote-show-suffix
+ :remote-method="getList"
+ >
+ <el-option
+ v-for="item in typeList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ <div class="table-wrapper">
+ <table class="scrollable-table">
+ <thead>
+ <tr>
+ <th>序号</th>
+ <th>企业名称</th>
+ <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 companyData" :key="item.id">
+ <td>{{ index + 1 }}</td>
+ <td>{{ item.companyName }}</td>
+ <td>{{ item.warehouseCount }}</td>
+ <td>{{ item.warningCount }}</td>
+ </tr>
+ <tr v-for="(item,index) in loopData" :key="`loop-${item.id}`">
+ <td>{{ index + 1 }}</td>
+ <td>{{ item.companyName }}</td>
+ <td>{{ item.warehouseCount }}</td>
+ <td>{{ item.warningCount }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</div>
@@ -37,33 +59,23 @@
</template>
<script setup>
import * as echarts from 'echarts';
-import {onMounted,onBeforeUnmount,ref,computed} from "vue";
+import {onMounted, onBeforeUnmount, ref, computed, reactive} from "vue";
import SUZHOU from './map.json'
+import {getAvoidList} from "@/api/hazardousChemicals/avoid";
+import {ElMessage} from "element-plus";
+import {getCompanyMessage} from "@/api/monitor/screenCharts";
// 表格数据
-const companyData = [
- { id: 1, rank: 1, company: '化工企业A', warehouse: '仓库1', warning: '相忌预警' },
- { id: 2, rank: 2, company: '化工企业B', warehouse: '仓库2', warning: '' },
- { id: 3, rank: 3, company: '化工企业C', warehouse: '仓库3', warning: '超期预警' },
- { id: 4, rank: 4, company: '化工企业D', warehouse: '仓库4', warning: '' },
- { id: 5, rank: 5, company: '化工企业E', warehouse: '仓库5', warning: '' },
- { id: 6, rank: 6, company: '化工企业F', warehouse: '仓库6', warning: '超期预警' },
- { id: 7, rank: 7, company: '化工企业G', warehouse: '仓库7', warning: '' },
- { id: 8, rank: 8, company: '化工企业H', warehouse: '仓库8', warning: '' },
- { id: 9, rank: 9, company: '化工企业I', warehouse: '仓库9', warning: '' },
- { id: 10, rank: 10, company: '化工企业J', warehouse: '仓库10', warning: '' },
- { id: 11, rank: 11, company: '化工企业K', warehouse: '仓库11', warning: '' },
- { id: 12, rank: 12, company: '化工企业L', warehouse: '仓库12', warning: '' },
-]
-
+const companyData = ref([])
// 配置参数
const visibleRows = 8 // 显示的行数
-const scrollSpeed = 1 // 每次滚动的像素数
+const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
const scrollPosition = ref(0)
let animationFrame = null
onMounted(()=>{
+ getList()
initChart()
// 设置视口高度
if (viewport.value) {
@@ -81,9 +93,35 @@
}
})
+const companyType = ref('')
+const typeList = [
+ {
+ id: 0,
+ name: '研发类'
+ },
+ {
+ id: 1,
+ name: '生产类'
+ },
+ {
+ id: 2,
+ name: '中试类'
+ }
+]
+
+const getList = async () => {
+ const res = await getCompanyMessage(companyType.value)
+ if(res.code == 200){
+ companyData.value = res.data
+ // console.log(companyData.value,555)
+ }else{
+ ElMessage.warning(res.message)
+ }
+}
+
// 复制前几行数据用于循环
const loopData = computed(() => {
- return companyData.slice(0, visibleRows)
+ return companyData.value.slice(0, visibleRows)
})
// 内容区域样式
@@ -95,7 +133,7 @@
// 滚动动画
const scrollAnimation = () => {
- const totalHeight = companyData.length * rowHeight
+ const totalHeight = companyData.value.length * rowHeight
const loopHeight = loopData.value.length * rowHeight
// 更新滚动位置
scrollPosition.value += scrollSpeed
@@ -252,10 +290,43 @@
display: flex;
align-items: flex-start;
}
+
+.container-left{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 300px;
+}
+
+.filter{
+ width: 300px;
+}
+:deep(.el-input__wrapper){
+ height: 28px;
+ box-shadow: none;
+ border: 1px solid #11FEEE;
+ background: rgba(6,24,88,.6);
+ color: #fff;
+}
+:deep(.el-input__inner){
+ color: #02CDE6;
+}
+:deep(.el-input .el-select__caret){
+ color: #02CDE6
+}
+:deep(.el-popper.is-light){
+ background: rgb(8,44,97);
+ .el-select-dropdown__item{
+ color: #fff;
+ &:hover{
+ background: #015fb0;
+ }
+ }
+}
.table-wrapper {
position: relative;
width: 300px;
- margin-top: 30px;
+ margin-top: 10px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 2px;
overflow: hidden;
@@ -296,8 +367,12 @@
.scroll-content {
will-change: transform; /* 优化性能 */
}
+ .danger {
+ color: #ff2f2f;
+ animation: blink 1s infinite;
+ }
.warning {
- color: #ff0000;
+ color: yellow;
animation: blink 1s infinite;
}
}
@@ -305,7 +380,7 @@
@keyframes blink {
0% { opacity: 1; }
- 50% { opacity: 0.7; }
+ 50% { opacity: 0.8; }
100% { opacity: 1; }
}
--
Gitblit v1.9.2