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 | 174 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 116 insertions(+), 58 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/midTop.vue b/src/views/hazardousChemicals/bigScreen/components/midTop.vue
index 2895e47..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>
@@ -41,32 +63,19 @@
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 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()
+ getList()
initChart()
// 设置视口高度
if (viewport.value) {
@@ -84,19 +93,35 @@
}
})
-// const getList = async () => {
-// const res = await getAvoidList({warningType: '', companyId: null})
-// if(res.code == 200){
-// companyData.value = res.data
-// console.log(companyData.value,555)
-// }else{
-// ElMessage.warning(res.message)
-// }
-// }
+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)
})
// 内容区域样式
@@ -108,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
@@ -265,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;
--
Gitblit v1.9.2