修改大屏

马宇豪

2025-04-23 e2ddf84cce119757b3f6d63e9f68b0d1a78aa27b

 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,46 @@
  }
})

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){
    if(res.data && Array.isArray(res.data) && res.data.length>0){
      companyData.value = res.data
      console.log(companyData.value,555)
      const mapData = companyData.value.map(i=>{
        return {
          name: i.companyName + '(' + i.warningCount + ')',
          value: [i.longitude,i.latitude]
        }
      })
      console.log(mapData,'mapData')
      initChart(mapData)
    }

  }else{
    ElMessage.warning(res.message)
  }
}

// 复制前几行数据用于循环
const loopData = computed(() => {
  return companyData.slice(0, visibleRows)
  return companyData.value.slice(0, visibleRows)
})

// 内容区域样式
@@ -95,7 +144,7 @@

// 滚动动画
const scrollAnimation = () => {
  const totalHeight = companyData.length * rowHeight
  const totalHeight = companyData.value.length * rowHeight
  const loopHeight = loopData.value.length * rowHeight
  // 更新滚动位置
  scrollPosition.value += scrollSpeed
@@ -106,24 +155,10 @@
  animationFrame = requestAnimationFrame(scrollAnimation)
}

const initChart =()=>{
const initChart =(mapData)=>{
  //获取echart对象
  let dom = document.getElementById('areaMap')
  if (dom) {
    let data = [
      {
        name: "姑苏区",
        value: Math.round(Math.random() * 100)
      },
      {
        name: "虎丘区",
        value: Math.round(Math.random() * 100)
      },
      {
        name: "吴中区",
        value: Math.round(Math.random() * 100)
      },
    ]
    //初始化
    let myEchart = echarts.init(dom)
    //注册地图
@@ -195,7 +230,6 @@
              }
            }
          },
          data: data
        },
        // 区域散点图
        {
@@ -216,11 +250,7 @@
              fontSize: 12
            }
          },
          data: [
              { name: '斜塘街道 11', value: [120.697614, 31.288664] },
            { name: '桑田岛 12', value: [120.807510, 31.350300] },
            { name: '车坊 2', value: [120.627614, 31.338664] }
          ],
          data: mapData,
          itemStyle: {
            //坐标点颜色
            normal: {
@@ -252,10 +282,44 @@
  display: flex;
  align-items: flex-start;
}

.container-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}

.filter{
  width: 300px;
  margin-top: 50px;
}
: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 +360,12 @@
    .scroll-content {
      will-change: transform; /* 优化性能 */
    }
    .danger {
      color: #ff2f2f;
      animation: blink 1s infinite;
    }
    .warning {
      color: #ff0000;
      color: yellow;
      animation: blink 1s infinite;
    }
  }
@@ -305,7 +373,7 @@

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}