newHazardousChemicalsLifeCycle.git

<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>
      </div>
    </div>
    <div id="areaMap"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted,onBeforeUnmount,ref,computed} from "vue";
import SUZHOU from './map.json'
// 表格数据
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 visibleRows = 8 // 显示的行数
const scrollSpeed = 1 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
const scrollPosition = ref(0)
let animationFrame = null
 
onMounted(()=>{
  initChart()
  // 设置视口高度
  if (viewport.value) {
    viewport.value.style.height = `${visibleRows * rowHeight}px`
  }
  // 延迟启动滚动，确保初始渲染完成
  setTimeout(() => {
    scrollAnimation()
  }, 100)
})
 
onBeforeUnmount(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
})
 
// 复制前几行数据用于循环
const loopData = computed(() => {
  return companyData.slice(0, visibleRows)
})
 
// 内容区域样式
const contentStyle = computed(() => {
  return {
    transform: `translateY(-${scrollPosition.value}px)`
  }
})
 
// 滚动动画
const scrollAnimation = () => {
  const totalHeight = companyData.length * rowHeight
  const loopHeight = loopData.value.length * rowHeight
  // 更新滚动位置
  scrollPosition.value += scrollSpeed
  // 当滚动到循环数据部分时，重置位置实现无缝衔接
  if (scrollPosition.value >= totalHeight) {
    scrollPosition.value -= totalHeight
  }
  animationFrame = requestAnimationFrame(scrollAnimation)
}
 
const initChart =()=>{
  //获取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)
    //注册地图
    echarts.registerMap('苏州市', SUZHOU)
    let option = {
      geo: {
        map: '苏州市',
        aspectScale: 0.8,
        layoutCenter: ['50%', '50%'], //地图位置
        layoutSize: '75%',
        itemStyle: {
          normal: {
            shadowColor: '#000',
            shadowOffsetX: 0,
            shadowOffsetY: 40,
            opacity: 0.1
          },
          emphasis: {
            areaColor: '#fff'
          }
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          console.log('params', params.value);
          //根据业务自己拓展要显示的内容
          var res = ''
          var name = params.name
          var value = params.value[params.seriesIndex + 1] || params.value
          res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
          return res
        }
      },
 
      series: [
        {
          tooltip: {
            trigger: 'item',
          },
          name: '苏州市数据',
          type: 'map',
          map: '苏州市', // 自定义扩展图表类型
          label: { // 文字
            show: true,
            color: '#fff',
            fontSize: 10
          },
          itemStyle: { // 地图样式
            shadowBlur: 10,
            shadowColor: '#000',
            areaColor: 'rgb(1,95,176)',  //区域颜色
            normal: {
              areaColor: 'rgb(1,95,176)',
              borderColor: '#02CDE6',
              borderWidth: 1
            },
            emphasis: {
              areaColor: 'rgb(3,26,65)',
              label: {
                color: '#fff'
              }
            }
          },
          data: data
        },
        // 区域散点图
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          symbolSize: 10,
          rippleEffect: {
            period: 3,
            scale: 10,
            brushType: 'fill'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: 'yellow',
              fontSize: 12
            }
          },
          data: [
              { name: '斜塘街道 11', value: [120.697614, 31.288664] },
            { name: '桑田岛 12', value: [120.807510, 31.350300] },
            { name: '车坊 2', value: [120.627614, 31.338664] }
          ],
          itemStyle: {
            //坐标点颜色
            normal: {
              show: true,
              color: 'skyblue',
              shadowBlur: 20,
              shadowColor: '#fff'
            },
            emphasis: {
              areaColor: '#fff'
            }
          }
        }
      ],
    }
    myEchart.setOption(option);
    window.addEventListener('resize', function () {
      myEchart.resize();
    });
  }
}
 
</script>
 
<style lang="postcss" scoped>
.charts-container{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
}
.table-wrapper {
  position: relative;
  width: 300px;
  margin-top: 30px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
 
  .scrollable-table {
    width: 100%;
    border-collapse: collapse;
 
    th,td {
      padding: 12px 15px;
      color: #fff;
      text-align: left;
      border-bottom: 1px solid rgba(255,255,255,.1);
      height: 40px; /* 与rowHeight一致 */
      box-sizing: border-box;
      font-size: 12px;
      font-weight: normal;
    }
    th {
      position: sticky;
      top: 0;
      z-index: 10; /* 确保表头在内容之上 */
    }
    tr{
      background: rgb(6,38,87);
 
      &:nth-of-type(2n){
        background: rgb(19,72,127);
      }
    }
    thead tr{
      background: rgba(0,0,0,0);
    }
  }
  .scroll-viewport {
    position: relative;
    overflow: hidden;
    .scroll-content {
      will-change: transform; /* 优化性能 */
    }
    .warning {
      color: #ff0000;
      animation: blink 1s infinite;
    }
  }
}
 
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}
 
  #areaMap{
    flex: 1;
    height: 500px;
  }
</style>