修改大屏

马宇豪

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

 src/views/hazardousChemicals/bigScreen/components/midTop.vue

@@ -85,7 +85,7 @@
// 表格数据
const companyData = ref([])
// 配置参数
const visibleRows = 8 // 显示的行数
const visibleRows = 10 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
@@ -94,7 +94,7 @@

onMounted(()=>{
  getList()
  initChart()
  // initChart()
  // 设置视口高度
  if (viewport.value) {
    viewport.value.style.height = `${visibleRows * rowHeight}px`
@@ -153,11 +153,10 @@
      companyData.value = res.data
      const mapData = companyData.value.map(i=>{
        return {
          name: i.companyName + '(' + i.warningCount + ')',
          name: i.companyName + '\n' + i.warningCount,
          value: [i.longitude,i.latitude]
        }
      })
      console.log(mapData,'mapData')
      initChart(mapData)
    }

@@ -202,6 +201,7 @@
    let option = {
      geo: {
        map: '苏州市',
        roam: 'scale',
        aspectScale: 0.8,
        layoutCenter: ['50%', '50%'], //地图位置
        layoutSize: '75%',
@@ -271,10 +271,10 @@
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          symbolSize: 10,
          symbolSize: 4,
          rippleEffect: {
            period: 3,
            scale: 10,
            period: 2,
            scale: 6,
            brushType: 'fill'
          },
          label: {
@@ -283,7 +283,7 @@
              position: 'right',
              formatter: '{b}',
              color: 'yellow',
              fontSize: 12
              fontSize: 14
            }
          },
          data: mapData,
@@ -291,8 +291,8 @@
            //坐标点颜色
            normal: {
              show: true,
              color: 'skyblue',
              shadowBlur: 20,
              color: 'orange',
              shadowBlur: 6,
              shadowColor: '#fff'
            },
            emphasis: {
@@ -317,18 +317,18 @@
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px
}

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

.filter{
  width: 300px;
  margin-top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
}
@@ -354,9 +354,11 @@
    }
  }
}


.table-wrapper {
  position: relative;
  width: 300px;
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
@@ -415,8 +417,14 @@
  100% { opacity: 1; }
}

  #areaMap{
    flex: 1;
    height: 500px;
  }
#areaMap{
  flex: 2;
  height: 100%;
}
:deep(.BMap_cpyCtrl) {
  display: none !important;
}
:deep(.anchorBL) {
  display: none !important;
}
</style>

 src/views/hazardousChemicals/bigScreen/components/midTop2.vue

@@ -86,7 +86,7 @@
// 表格数据
const companyData = ref([])
// 配置参数
const visibleRows = 8 // 显示的行数
const visibleRows = 10 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
@@ -103,8 +103,6 @@
  setTimeout(() => {
    scrollAnimation()
  }, 100)
  initMap()

})

onBeforeUnmount(() => {
@@ -148,63 +146,76 @@
  }
]

const initMap=()=>{
  var map = new BMapGL.Map("areaMap");
const initMap=(mapData)=>{
  let map = new BMapGL.Map("areaMap",{
    backgroundColor: [0, 0, 0, 0]
  });
  map.setMapType(BMAP_NORMAL_MAP);
  var point = new BMapGL.Point(120.752833, 31.333439);
  map.centerAndZoom(point, 12);
  let centerPoint = new BMapGL.Point(120.702833, 31.333439);
  map.centerAndZoom(centerPoint, 12);
  map.enableScrollWheelZoom(true);
  map.setTilt(40);
  map.setTilt(30);
  map.setMapStyleV2({
    styleId: 'c66f44df4e55ce8f0fa90205997df335'
  });
  // var bd = new BMapGL.Boundary();
  // bd.get('苏州市工业园区', function (rs) {
  //   // console.log('外轮廓：', rs.boundaries[0])
  //   // console.log('内镂空：', rs.boundaries[1])
  //   var hole = new BMapGL.Polygon(rs.boundaries, {
  //     fillColor: 'blue',
  //     fillOpacity: 0.2
  //   });
  //   map.addOverlay(hole);
  // });
  var bd1 = new BMapGL.Boundary();
  bd1.get('苏州市工业园区', function (rs) {

  let bd1 = new BMapGL.Boundary();
  bd1.get('苏州市', function (rs) {
    let count = rs.boundaries.length;
    for (let i = 0; i < count; i++) {
      let path = [];
      let str = rs.boundaries[i].replace(' ', '');
      let points = str.split(';');
      for (let j = 0; j < points.length; j++) {
        let lng = points[j].split(',')[0];
        let lat = points[j].split(',')[1];
        let lng = Number(points[j].split(',')[0]);
        let lat = Number(points[j].split(',')[1]);
        path.push(new BMapGL.Point(lng, lat));
      }
      let prism = new BMapGL.Prism(path, 200, {
      let mapMask = new BMapGL.MapMask(path, {
        isBuildingMask: true,
        isPoiMask: true,
        isMapMask: true,
        showRegion: 'inside',
        topFillColor: '#5679ea',
        topFillOpacity: 0.6,
        topFillOpacity: 0.5,
        sideFillColor: '#5679ea',
        sideFillOpacity: 0.9
      });
      let border = new BMapGL.Polyline(path, {
        strokeColor: '#4ca7a2',
        strokeWeight: 1,
        strokeOpacity: 1
      });
      let prism = new BMapGL.Prism(path, 500, {
        topFillColor: '#5679ea',
        topFillOpacity: 0.4,
        sideFillColor: '#5679ea',
        sideFillOpacity: 1
      });
      map.addOverlay(mapMask);
      map.addOverlay(border);
      map.addOverlay(prism);
    }
  });
  // var circle = new BMapGL.Circle(new BMapGL.Point(120.742833,31.333439),1000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
  // map.addOverlay(circle);
  var point = new BMapGL.Point(120.742833,31.333439);
  var content = '企业一（10）';
  var label = new BMapGL.Label(content, {
    position: point,
    offset: new BMapGL.Size(-20, -10)
  })
  map.addOverlay(label);
  label.setStyle({
    color: '#11FEEE',
    fontSize: '14px',
    border: 'none',
    backgroundColor: '#293075'
  })
  label.setPosition(point)

  for(let i of mapData){
    let pointMarker = new BMapGL.Marker(new BMapGL.Point(i.value[0],i.value[1]));
    map.addOverlay(pointMarker);
    var point = new BMapGL.Point(i.value[0],i.value[1]);
    var content = i.name;
    var label = new BMapGL.Label(content, {
      position: point,
    })
    map.addOverlay(label);
    label.setStyle({
      color: '#11FEEE',
      fontSize: '11px',
      border: 'none',
      backgroundColor: '#293075'
    })
  }


}
const getList = async () => {
  const res = await getCompanyMessage(companyType.value)
@@ -217,7 +228,7 @@
          value: [i.longitude,i.latitude]
        }
      })
      // initChart(mapData)
      initMap(mapData)
    }

  }else{
@@ -380,15 +391,14 @@
}

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

.filter{
  width: 300px;
  margin-top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
}
@@ -418,7 +428,7 @@

.table-wrapper {
  position: relative;
  width: 300px;
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
@@ -478,8 +488,13 @@
}

  #areaMap{
    flex: 1;
    flex: 2;
    height: 100%;
    background: none !important;
  }

  :deep(.bmap-container){
    background-image: none !important;
  }
:deep(.BMap_cpyCtrl) {
  display: none !important;
@@ -487,4 +502,12 @@
:deep(.anchorBL) {
  display: none !important;
}
:deep(.BMapLabel){
  min-width: 50px;
  white-space: pre-wrap !important;
}

:deep(.BMap_mask){
  background: #082c61 !important;
}
</style>

 src/views/hazardousChemicals/bigScreen/index.vue

@@ -1,12 +1,12 @@
<template>
  <div class="data-dashboard">
  <div :class="isFull?'data-dashboard1':'data-dashboard2'">
    <header class="dashboard-header">
      <div class="header-left">
        <div class="current-time">{{ currentTime }}</div>
        <div class="current-date">{{ currentDate }}</div>
      </div>
      <div class="header-center">
        <h1 class="dashboard-title">独墅湖科教创新区危化品智慧管控平台</h1>
        <h1 class="dashboard-title">独墅湖科教创新区危化品智慧管控一张图</h1>
      </div>
      <div class="header-right">
        <div class="weather-info">
@@ -48,7 +48,7 @@
        </div>
        <div class="chart-container chart-4">
          <div class="chart-title">
            <img :src="leftArrow"><span>实时预警信息</span><img :src="rightArrow">
            <img :src="leftArrow"><span>企业安全风险预警情况和分类</span><img :src="rightArrow">
          </div>
          <div class="chart-placeholder">
            <mid-bottom></mid-bottom>
@@ -135,7 +135,7 @@
</script>

<style lang="postcss">
.data-dashboard {
.data-dashboard1,.data-dashboard2 {
  width: 100%;
  height: 100%;
  display: flex;
@@ -278,4 +278,13 @@
    }
  }
}
.data-dashboard2{
  width: 100%;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  background-color: #031A41;
  color: #fff;
  overflow: hidden;
}
</style>