修改大屏

马宇豪

2025-04-28 e1d380a930e73d8355a4695ca5f5b91f471c2394

 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>