zy 2 年 前
コミット
de2deb9d23

BIN
neim-ui/public/largeScreenImg/kaiguan.png


+ 2 - 2
neim-ui/src/views/largeScreenPage/Subpage/emailResourcesInfo.vue

@@ -2,7 +2,7 @@
   <div class="page emailResourcesInfoPage">
     <div class="timeBox">{{ time }}</div>
     <div class="topTiltle">
-      <span class="title">资  源  信  息</span>
+      <span class="title">前 期 塔 资 源 信 息</span>
     </div>
     <div class="btuGroup">
       <div class="topBtu topLeftBtu" @click="back()">
@@ -128,7 +128,7 @@
                 </div>
                 <div class="contentBox">
                   <span class="numberBox">{{ environmentInfo.pa }}</span>
-                  <span class="textBox">压强(Pa)</span>
+                  <span class="textBox">压强(hPa)</span>
                 </div>
               </div>
               <div class="infoContentBottom">

+ 2 - 2
neim-ui/src/views/largeScreenPage/Subpage/realResourcesInfo.vue

@@ -2,7 +2,7 @@
   <div class="page emailResourcesInfoPage">
     <div class="timeBox">{{ time }}</div>
     <div class="topTiltle">
-      <span class="title">资  源  信  息</span>
+      <span class="title">在  运  资  源  信  息</span>
     </div>
     <div class="btuGroup">
       <div class="topBtu topLeftBtu" @click="back()">
@@ -114,7 +114,7 @@
                 </div>
                 <div class="contentBox">
                   <span class="numberBox">{{ environmentInfo.pa }}</span>
-                  <span class="textBox">压强(Pa)</span>
+                  <span class="textBox">压强(hPa)</span>
                 </div>
               </div>
               <div class="infoContentBottom">

+ 513 - 0
neim-ui/src/views/largeScreenPage/components/zaiXianBigeMap.vue

@@ -0,0 +1,513 @@
+<template>
+  <div>
+    <div id='map'></div>
+    <div id="position">
+      <div id="zoom">
+        当前级别 : 6
+      </div>
+      <div id="move">
+        当前中心点: 纬度:0.00000,经度:0.00000
+      </div>
+    </div>
+    <!--    <el-radio-group v-model="leavel" @change="setData">-->
+    <!--      <el-radio class="radio" label="100">100Mb</el-radio>-->
+    <!--      <el-radio class="radio" label="250">250Mb</el-radio>-->
+    <!--      <el-radio class="radio" label="500">500Mb</el-radio>-->
+    <!--      <el-radio class="radio" label="1000">1000Mb</el-radio>-->
+    <!--    </el-radio-group>-->
+  </div>
+</template>
+
+<script>
+import bigemap from '@/utils/bigemap/map'
+import Tiff from "tiff.js";
+import axios from "axios";
+let map;
+export default {
+  name: "bigeMap",
+  props: {mapValue: Object},
+  watch: {
+    mapValue: {
+      immediate: true,
+      handler(value) {
+        if(value.params !== undefined){
+          console.log("地形图:"+value)
+          this.mapData = value
+          this.initBigeMap()
+        }
+
+      }
+    }
+  },
+  data() {
+    return {
+      bMap: null,
+      velocityLayer: null,
+      leavel: {},
+      latlngs: [[[0.0, 0.0], [0.0, 0.0]]],
+      cone: {},
+      mTime: null,
+      code: 230000,
+      mapData:{},// 传过来的值
+      href: window.location.href,
+      level:6,
+      center:[],
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    initBigeMap() {
+      let _self = this
+      bigemap.then(() => {
+        window.BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
+        // window.BM.Config.HTTP_URL = 'http://localhost:9000';
+        // window.BM.Config.HTTP_URL = 'http://192.168.1.181:9000';
+        // arcgis-satellite
+        // amap-satellite
+        // zhongkexingtu
+        let map = window.BM.map('map', 'bigemap.arcgis-satellite', {
+        // let map = window.BM.map('map', 'bigemap.6914xxtx', {
+          center: [30, 104],
+          minZoom: 6,
+          zoom: 11,
+          zoomControl: true,
+          attributionControl: false,
+          preferCanvas: true, //适用于数据量大时 地图反应速度加快
+        });
+        window.Bmap=map;
+        this.bMap=map;
+        //首尾需要一致
+        let mask = window.BMturf.polygon([[[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]]]);
+        let geo2;
+        fetch('/js/geojson/230000/' + this.code + '.geojson').then(res => res.json()).then(data => {
+        // fetch('/js/geojson/' + this.code + '.geojson').then(res => res.json()).then(data => {
+          geo2 = window.BM.geoJSON(data, {
+            style: function () {
+              return {
+                color: '#ffffff',
+                weight: 3,
+                fillColor: '#ffffff',
+                fillOpacity: 0
+              };
+            },
+            onEachFeature: function (feature, layer) {
+              feature.properties && feature.properties.name && layer.bindTooltip(feature.properties.name, {
+                direction: 'bottom',
+                className: 'my_default_tooltip',
+                permanent: true
+              });
+            }
+          }).on('mouseover', function (e) {
+            e.layer.setStyle({
+              color: '#ffffff',
+              weight: 1,
+              fillColor: 'transparent',
+              fillOpacity: 0
+            });
+          }).on('mouseout', function (e) {
+            e.layer.setStyle({
+              color: '#ffffff',
+              weight: 3,
+              fillColor: '#ffffff',
+              fillOpacity: 0
+            });
+          }).addTo(this.bMap);
+          window.geo2=geo2;
+          //限制拖动
+          this.bMap.setMaxBounds(geo2.getBounds());
+          this.bMap.fitBounds(geo2.getBounds());
+
+          const layers = geo2.getLayers();
+          for (const item of layers) {
+            const layer = item.feature;
+            mask = window.BMturf.mask(layer, mask);
+          }
+          window.BM.geoJSON(mask, {
+            color: 'orange',
+            fillColor: '#0A163A',
+            fillOpacity: 0.7
+          }).addTo(this.bMap);
+
+          //初始化热力图
+          // this.setHeatMap(this.bMap);
+          //绑定事件
+          this.bindEvents(this.bMap);
+          if(this.mapData.level !== null){
+            _self.level = this.mapData.level
+            _self.center = this.mapData.center
+            this.bMap.setView(this.mapData.center,this.mapData.level)
+            // this.bMap.setZoom(this.mapData.level)
+            // this.bMap.panTo(this.mapData.center)
+          }
+
+
+        })
+        let sIconurl = 'http://'+_self.href.split("//")[1].split("/")[0]+'/largeScreenImg/station.png'
+        let hfSIconurl = 'http://'+_self.href.split("//")[1].split("/")[0]+'/largeScreenImg/huafuStation.png'
+        let pIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/project.png'
+        let fjIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/img/fengji.png'
+
+        // 所有场站标记点位
+        if(this.mapData.allStationInfo !== null && this.mapData.allStationInfo !== undefined){
+          let data = this.mapData.allStationInfo
+          let station_icon = window.BM.icon({
+            iconUrl: sIconurl,
+            iconSize: [25, 43],
+            iconAnchor: [25, 43]
+          })
+          let hf_station_icon = window.BM.icon({
+            iconUrl: hfSIconurl,
+            iconSize: [35, 55],
+            iconAnchor: [35, 55]
+          })
+          for(let item of data.otherStation){
+            let coordinate = [Number(item.latitude),Number(item.longitude)]
+            let marker = window.BM.marker(coordinate,{
+              icon: station_icon,
+              riseOnHover: true
+            }).addTo(this.bMap);
+            marker.on('mouseover', function (e) {
+              marker.bindTooltip('<div>场站名称:' + item.stationName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
+                {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+            })
+            marker.on('mouseout', function () {
+              marker.bindTooltip().closeTooltip();
+            })
+          }
+          for(let item of data.HDStation){
+            let coordinate = [Number(item.latitude),Number(item.longitude)]
+            let marker = window.BM.marker(coordinate,{
+              icon: hf_station_icon,
+              riseOnHover: true
+            }).addTo(this.bMap);
+            marker.on('mouseover', function (e) {
+              marker.bindTooltip('<div>场站名称:' + item.stationName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
+                {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+            })
+            marker.on('mouseout', function () {
+              marker.bindTooltip().closeTooltip();
+            })
+          }
+        }
+
+        // 项目标记点位
+        if (this.mapData.projectInfo !== null && this.mapData.projectInfo !== undefined) {
+          let data = this.mapData.projectInfo
+          let station_icon = window.BM.icon({
+            iconUrl: pIconurl,
+            iconSize: [30, 50],
+            iconAnchor: [30, 50]
+          })
+          for (let item of data) {
+            let coordinate = [Number(item.latitude), Number(item.longitude)]
+            let marker = window.BM.marker(coordinate, {
+              icon: station_icon,
+              riseOnHover: true
+            }).addTo(this.bMap);
+            // 悬浮动作
+            marker.on('mouseover', function (e) {
+              marker.bindTooltip('<div>项目名称:' + item.projectNameEasy + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
+                {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+            })
+            marker.on('mouseout', function () {
+              marker.bindTooltip().closeTooltip();
+            })
+            // 点击动作
+            marker.on('click', function (e) {
+              let project = {id: item.id,projectSort: item.projectName}
+              sessionStorage.setItem("projectInfo", JSON.stringify(project))
+              _self.$store.dispatch('equipmentInfo/projectInfo', JSON.stringify(project))
+              _self.$router.push({path: "/homepage/projectInfo"})
+            })
+          }
+        }
+        // 华富场站标记点位
+        if (this.mapData.staionInfo !== null && this.mapData.staionInfo !== undefined) {
+          let data = this.mapData.staionInfo
+          let station_icon = window.BM.icon({
+            iconUrl: sIconurl,
+            iconSize: [30, 50],
+            iconAnchor: [30, 50],
+            className:'stationIcon',
+          })
+          for (let item of data) {
+            let coordinate = [Number(item.latitude), Number(item.longitude)]
+            let marker = window.BM.marker(coordinate, {
+              icon: station_icon,
+              riseOnHover: true
+            }).addTo(this.bMap);
+            // 悬浮动作
+            marker.on('mouseover', function (e) {
+              marker.bindTooltip('<div>场站名称:' + item.stationName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
+                {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+            })
+            marker.on('mouseout', function () {
+              marker.bindTooltip().closeTooltip();
+            })
+            // 点击动作
+            marker.on('click', function (e) {
+              let station = {id: item.id,stationName: item.stationName}
+              sessionStorage.setItem("stationInfo",JSON.stringify(station))
+              _self.$store.dispatch('equipmentInfo/stationInfo',JSON.stringify(station))
+              _self.$router.push({path: "/homepage/stationInfo"})
+            })
+          }
+        }
+        // 所有风机、塔、拐点标记点位
+        if (this.mapData.allPointInfo !== null && this.mapData.allPointInfo !== undefined) {
+          let data = this.mapData.allPointInfo
+          let station_icon = window.BM.icon({
+            iconUrl: pIconurl,
+            iconSize: [35, 55],
+            iconAnchor: [35, 55],
+            className:'stationIcon',
+          })
+          let fj_icon = window.BM.icon({
+            iconUrl: fjIconurl,
+            iconSize: [30, 30],
+            iconAnchor: [30, 30],
+            className:'stationIcon',
+          })
+          for(let item of data.fan){
+            let coordinate = [Number(item.latitudeFan),Number(item.longitudeFan)]
+            let marker = window.BM.marker(coordinate,{
+              icon: fj_icon,
+              riseOnHover: true
+            }).addTo(this.bMap);
+          }
+          for(let item of data.coordinatesList){
+            if(item.length>0){
+              let latlngs = []
+              for (let coor of item){
+                latlngs.push([Number(coor.latitude),Number(coor.longitude)])
+                window.BM.marker([Number(coor.latitude),Number(coor.longitude)]).addTo(this.bMap);
+              }
+              var polygon = BM.polygon(latlngs).addTo(this.bMap);
+              // 让地图适配当前的线段
+              this.bMap.fitBounds(polygon.getBounds());
+            }
+          }
+          for (let item of data.towerList) {
+            let coordinate = [Number(item.latitude), Number(item.longitude)]
+            let marker = window.BM.marker(coordinate, {
+              icon: station_icon,
+              riseOnHover: true
+            }).addTo(this.bMap);
+            // 悬浮动作
+            marker.on('mouseover', function (e) {
+              // console.log(item)
+              if(item.type === 'project'){
+                marker.bindTooltip('<div>项目名称:' + item.projectName + '</div>'+ '<div>测风塔名称:' + item.towerName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
+                  {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+              }else{
+                marker.bindTooltip('<div>场站名称:' + item.stationName + '</div>'+ '<div>测风塔名称:' + item.towerName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
+                  {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+              }
+
+            })
+            marker.on('mouseout', function () {
+              marker.bindTooltip().closeTooltip();
+            })
+            // 点击动作
+            marker.on('click', function (e) {
+              if(item.type === 'project'){
+                let project = {projectId:item.projectId,equipmentNo:item.towerNo}
+                sessionStorage.setItem("emailWindTowerInfo", JSON.stringify(project))
+                _self.$store.dispatch('equipmentInfo/emailWindTowerInfo', JSON.stringify(project))
+                _self.$router.push({path: "/homepage/emailResourcesInfo"})
+              }else {
+                let station = {stationId:item.stationId,equipmentNo:item.towerNo}
+                sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
+                _self.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
+                _self.$router.push({path: "/homepage/realResourcesInfo"})
+              }
+
+            })
+          }
+        }
+        /**
+         * 加载实时气象源动画效果
+         fetch("/js/json/wind_data/20230403_00_atmoslev_1000_mb.json")
+         .then((res) => {
+            return res.json();
+          })
+         .then((data) => {
+            this.velocityLayer = window.BM.velocityLayer({
+              displayValues: true,
+              displayOptions: {
+                velocityType: "windy",
+                displayPosition: "topright",
+                displayEmptyString: "没有数据",
+                directionString: "风向",
+                speedString: "速度",
+              },
+              data: data,
+              minVelocity: 0.05,
+              maxVelocity: 10,
+              colorScale: ["red", "green", "yellow", "pink"],
+              velocityScale: 0.02, //  default 0.005,
+            });
+            this.velocityLayer.addTo(this.bMmap);
+          });
+         */
+      })
+    },
+    //设置热力图效果
+    setHeatMap(map) {
+      axios.get("/img/heapmap/mean-wind-speed_rendering.tiff", {
+        responseType: "arraybuffer",
+      }).then((res) => {
+        const fr = new FileReader();
+        fr.onloadend = function (e) {
+          var image = new Tiff({buffer: e.target.result});
+          var imageUrl = image.toDataURL(),
+            imageBounds = [
+              [43.422993, 121.183134],
+              [53.564656, 135.091461],
+            ];
+          window.imgOverlay=window.BM.imageOverlay(imageUrl, imageBounds).addTo(map);
+          map.fitBounds(imageBounds);
+        };
+        fr.readAsArrayBuffer(new Blob([res.data]));
+      });
+    },
+    //绑定事件-监听地图级别和拖动
+    bindEvents(map){
+      let _self = this
+      map.on('moveend', function (e) {
+        const c = this.getCenter();
+        _self.center = this.getCenter()
+        document.getElementById('move').innerHTML = '当前中心点: 纬度:' + c.lat.toFixed(5) + ',经度:' + c.lng.toFixed(5);
+      });
+      //添加一个缩放事件
+      map.on('zoomend', function (e) {
+        _self.level = this.getZoom()
+        document.getElementById('zoom').innerHTML = '当前级别 : ' + this.getZoom();
+      });
+    },
+    setData(params) {
+      fetch(`/js/json/wind_data/20230403_00_atmoslev_` + params + `_mb.json`)
+        .then((res) => {
+          return res.json();
+        })
+        .then((data) => {
+          this.velocityLayer.options.displayOptions.velocityType = params + `Mb`;
+          this.velocityLayer.setData(data);
+        });
+    },
+    initRegion(code) {
+      sessionStorage.clear();
+      sessionStorage.setItem('latlngs', JSON.stringify(this.latlngs));
+      this.chons(code)
+    },
+    //加载地图方法
+    chons(code) {
+      fetch('/js/geojson/230000/' + code + '.geojson')
+        .then((res) => {
+          return res.json();
+        })
+        .then((data) => {
+          this.cone = this.BM.geoJSON(data, {
+            style: function () {
+              return {
+                color: '#ffffff',
+                fillColor: 'transparent',
+                weight: 1,
+                fillOpacity: 1
+              };
+            },
+          }).on('mouseover', function (e) {
+            const rel = e.layer.feature.properties;
+            e.layer.setStyle({
+              color: '#ffffff',
+              fillColor: 'transparent',
+              weight: 3,
+              fillOpacity: 1
+            });
+
+            //显示弹窗信息坐标
+            let x = rel.center['1'];
+            let y = rel.center['0'];
+            let coordinate = [[x, y]];
+
+            //组装参数
+            let adcode = rel.adcode;
+            let name = rel.name;
+            let level = rel.level;
+            let cont =
+              "<div>acode :" + adcode + "</div>" +
+              "<div>name <span style='margin-left: 2px'>:</span>" + name + "</div>" +
+              "<div>level <span style='margin-left: 7px'>:</span>" + level + "</div>";
+            //显示弹窗
+            if (!e.layer.getPopup()) {
+              e.layer.bindPopup(cont);
+            }
+            e.layer.openPopup();
+          }).on('mouseout', function (e) {
+            e.layer.setStyle({
+              color: '#ffffff',
+              fillColor: 'transparent',
+              weight: 1,
+              fillOpacity: 1
+            });
+            // 点击地图区域向下钻取
+            // }).on('click', (e) => {
+            //   const rel = e.layer.feature.properties;
+            //   const zb = e.layer._bounds;
+            //   if (code === rel.adcode) {
+            //     return false;
+            //   } else {
+            //     //定时器
+            //     clearTimeout(this.mTime);
+            //     this.mTime = setTimeout(() => {
+            //       //重新加载
+            //       this.chons(rel.adcode);
+            //       this.cone.remove();
+            //       //临时缓存
+            //       sessionStorage.setItem('diqu', JSON.stringify(rel.acroutes));
+            //       const latadd = sessionStorage.getItem('latlngs');
+            //       const lataddp = JSON.parse(latadd);
+            //       lataddp.push([[zb._northEast.lat, zb._northEast.lng], [zb._southWest.lat, zb._southWest.lng]]);
+            //       sessionStorage.setItem('latlngs', JSON.stringify(lataddp));
+            //       if (lataddp.slice(-1).length !== 0) {
+            //         this.bMap.fitBounds(lataddp.slice(-1));
+            //       }
+            //     }, 300);
+            //   }
+          }).addTo(this.bMap);
+        })
+    }
+  }
+}
+</script>
+<style>
+
+.infoToolTip{
+  color: white;
+  background: rgba(0, 133, 212, 0.75);
+  border: .5px solid #0085d4;
+}
+
+.my_default_tooltip{
+  color: transparent;
+  background: transparent;
+  border: none;
+  /*font-size: 18px;*/
+}
+.my_default_tooltip::before{
+  display: none;
+}
+</style>
+<style scoped>
+#map {
+  width: 100%;
+  height: calc(90vh);
+}
+
+.bigemap-popup-content-wrapper, .map-legends, .map-tooltip {
+  border-radius: 8px;
+  box-shadow: 5px 5px 5px rgb(0 0 0);
+}
+</style>

+ 25 - 1
neim-ui/src/views/largeScreenPage/index.vue

@@ -2,6 +2,7 @@
   <div style="height:calc(100vh);width:100%;background: #000">
     <div class="page largeScreeanHomePage">
       <div class="timeBox">{{ time }}</div>
+      <div class="kaiguanBox"><img src="../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px" @click="pushZaiXian()"/></div>
       <div class="topTiltle">
         <img
             class="titleImg"
@@ -63,6 +64,9 @@
         <div v-if="mapMark === 'mapBtuFive'">
           <bige-heat-sun-map ref="childMethod" :mapValue="mapValue"/>
         </div>
+        <div v-if="mapMark === 'mapBtu'">
+          <zai-xian-bige-map ref="childMethod" :mapValue="mapValue"/>
+        </div>
       </div>
     </div>
   </div>
@@ -72,12 +76,13 @@
 import bigeMap from "@/views/largeScreenPage/components/bigeMap";
 import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
 import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";
+import zaiXianBigeMap from "@/views/largeScreenPage/components/zaiXianBigeMap";
 import {provincialEnergyInfo} from "@/api/biz/dataQuery/largeScreenPage";
 
 export default {
   name: "index",
   components: {
-    bigeMap, bigeHeatMap, bigeHeatSunMap
+    bigeMap, bigeHeatMap, bigeHeatSunMap,zaiXianBigeMap
   },
   data() {
     return {
@@ -132,6 +137,19 @@ export default {
     pushNext() {
       this.$router.push({path: "/homepage/provincialEnergyStations"})
     },
+    pushZaiXian(){
+      if(this.mapMark === 'mapBtuOne'){
+        let center = this.$refs.childMethod.center
+        let level = this.$refs.childMethod.level
+        this.mapValue = {
+          params: new Date(),
+          level: level === ''?null:level,//地图层级
+          center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
+          allStationInfo: null,//场站坐标
+        }
+        this.mapMark = 'mapBtu'
+      }
+    },
     clickBtu(id) {
       console.log(this.$refs.childMethod)
       let center = this.$refs.childMethod.center
@@ -329,4 +347,10 @@ export default {
   align-items: center;
   margin-left: 20%;
 }
+.kaiguanBox{
+  cursor: pointer;
+  position: absolute;
+  left: 22%;
+  top: .5%;
+}
 </style>