页面

tpneim-ui/src/utils/bigemap/3dmap.js

@@ -1,9 +1,9 @@
 //map.js
 // 换成本地的服务器js文件即可
 let script = [
-  'http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js',
+  'http://127.0.0.1:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js',
   // '/js/bigemap-velocity.min.js',
-  '/jquery.min.js',
+  '/js/jquery.min.js',
   //如果有更多的JS要引用 ，也一起放到这个数组中
 ];
 export default new Promise(resolve => {
@@ -11,7 +11,7 @@ export default new Promise(resolve => {
   link.rel = "stylesheet";
   link.async = false;
   // 换成本地的服务器css文件即可
-  link.href = "http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css";
+  link.href = "http://127.0.0.1:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css";
   document.head.appendChild(link);
   let loads = script.map(v => {
     let script = document.createElement("script");

tpneim-ui/src/utils/bigemap/map.js

@@ -1,8 +1,9 @@
 //map.js
 // 换成本地的服务器js文件即可
 let script = [
-  'http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js',
-  'http://www.bigemap.com/public/js/tool/BMturf.min.js',
+  'http://127.0.0.1:9000/bigemap.js/v2.1.0/bigemap.js',
+  // 'http://www.bigemap.com/public/js/tool/BMturf.min.js',
+  '/js/BMturf.min.js',
   // '/js/bigemap-velocity.min.js',
   '/js/bigemap-velocity2.js',
   //如果有更多的JS要引用 ，也一起放到这个数组中
@@ -12,7 +13,7 @@ export default new Promise(resolve => {
   link.rel = "stylesheet";
   link.async = false;
   // 换成本地的服务器css文件即可
-  link.href = "http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css";
+  link.href = "http://127.0.0.1:9000/bigemap.js/v2.1.0/bigemap.css";
   document.head.appendChild(link);
   let loads = script.map(v => {
     let script = document.createElement("script");

tpneim-ui/src/views/largeScreenPage/Subpage/projectInfo.vue

@@ -69,7 +69,7 @@
         <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
           <span class="mapBtuText">光资源分布图</span>
         </div>
-        <div id="mapBtu3D" class="mapBtu mapBtuAfter">
+        <div id="mapBtu3D" class="mapBtu mapBtuAfter"  @click="dialog3DMap()">
           <span class="mapBtuText">3D地形图</span>
         </div>
       </div>
@@ -95,10 +95,9 @@
         <bige-map3-d :mapValue="mapValue" v-if="dialogVisible"/>
       </el-dialog>
     </div>
-
-<!--    <div v-if="mapMark === 'mapBtu3D'">-->
-<!--      <bige-map3-d ref="childMethod" :mapValue="mapValue"/>-->
-<!--    </div>-->
+    <div v-if="mapMark === 'mapBtu3D'">
+      <bige-map3-d ref="childMethod" :mapValue="mapValue"/>
+    </div>
     <div class="bottomPushBtu" @click="pushPreProjectResource()">
       <span>前期项目资源信息</span>
     </div>

tpneim-ui/src/views/largeScreenPage/Subpage/provincialEnergyStations.vue

@@ -25,7 +25,7 @@
           <div class="rightBg topBox">
             <div class="rightTiltleTextBg">
               <div class="rightMainTitle">
-                <span class="mainTitle">辽宁省新能源信息</span>
+                <span class="mainTitle">全省新能源信息</span>
               </div>
             </div>
             <div class="rightTopContent">
@@ -50,7 +50,7 @@
           <div class="rightBg bottomBox">
             <div class="rightTiltleTextBg">
               <div class="rightMainTitle">
-                <span class="mainTitle">新能源信息</span>
+                <span class="mainTitle">接入新能源信息</span>
               </div>
             </div>
 

tpneim-ui/src/views/largeScreenPage/components/3DbigeMap.vue

@@ -16,7 +16,8 @@ export default {
       immediate: true,
       handler(value) {
         if (value.params !== undefined) {
-          // console.log("3D地形图：" + value)
+          // console.log("3D地形图：",value)
+          console.log(value)
           this.mapData = value
           this.level = value.level
           this.center = {lng: value.center[1], lat: value.center[0]}
@@ -44,17 +45,17 @@ export default {
       //  高度
       let altitude = this.C * Math.pow((this.A - this.D) / (this.level - this.D) - 1, 1 / this.B)
       // console.log(this.C * Math.pow((this.A - this.D) / (this.level - this.D) - 1, 1 / this.B))
-      let center = this.center === [] ? [129.64920, 46.2844] : [this.center.lng, this.center.lat];
+      let center = this.center === [] ? [41.18692, 123.62915] : [this.center.lng, this.center.lat];
       bigemap3d.then(() => {
         // var center = [104.73673266358675,31.463626972537455];
         // console.log(center, 154);
         // window.bmgl.Config.HTTP_URL ='http://www.bigemap.com:9000';
-        window.bmgl.Config.HTTP_URL = 'http://49.4.78.194:17143';
-        // window.bmgl.Config.HTTP_URL = 'http://localhost:9000';
+        // window.bmgl.Config.HTTP_URL = 'http://49.4.78.194:17143';
+        window.bmgl.Config.HTTP_URL = 'http://localhost:9000';
         let viewer = new bmgl.Viewer('container', {
           // mapId: 'bigemap.zhongkexingtu',
-          terrainId: 'bigemap.re-gaocheng',
-          mapId:'bigemap.re-huafu',
+          terrainId: 'bigemap.liaoning-gaocheng',
+          mapId:'bigemap.a4u80hw4',
         });
         window.viewer=viewer;
         viewer.camera.setView({
@@ -70,8 +71,8 @@ export default {
         let helper = new bmgl.EventHelper();
         helper.add(viewer.scene.globe.tileLoadProgressEvent, e => {
           var layer=viewer.imageryLayers.get(0);
-          layer.imageryProvider._imageryProvider._resource._url=layer.imageryProvider._imageryProvider._resource._url.replace('9000','17143');
-          console.log(layer.imageryProvider._imageryProvider._resource._url)
+          // layer.imageryProvider._imageryProvider._resource._url=layer.imageryProvider._imageryProvider._resource._url.replace('9000','17143');
+          // console.log(layer.imageryProvider._imageryProvider._resource._url)
           helper.removeAll();
           helper=null;
         });
@@ -149,7 +150,7 @@ export default {
           }
           _self.level = Math.round(_self.D + (_self.A - _self.D) / (1 + Math.pow(height / _self.C, _self.B)));
           _self.center = {lng: window.bmgl.Math.toDegrees(p.latitude), lat: window.bmgl.Math.toDegrees(p.longitude)};
-          _self.$emit('changeZoom', _self.level)
+          // _self.$emit('changeZoom', _self.level)
           // console.log(_self.level,_self.center)
         }, window.bmgl.ScreenSpaceEventType.LEFT_DOWN);
         // 鼠标缩进触发事件
@@ -164,7 +165,7 @@ export default {
           // 高度转化成2D的地图级别
           _self.level = Math.round(_self.D + (_self.A - _self.D) / (1 + Math.pow(height / _self.C, _self.B)));
           _self.center = position;
-          _self.$emit('changeZoom', _self.level)
+          // _self.$emit('changeZoom', _self.level)
           // console.log(_self.level,_self.center)
         }, window.bmgl.ScreenSpaceEventType.WHEEL);
 
@@ -174,7 +175,7 @@ export default {
           var p = window.bmgl.Cartographic.fromCartesian(viewer.camera.position);
           _self.level = Math.round(_self.D + (_self.A - _self.D) / (1 + Math.pow(p.height / _self.C, _self.B)));
           _self.center = {lng: window.bmgl.Math.toDegrees(p.latitude), lat: window.bmgl.Math.toDegrees(p.longitude)};
-          _self.$emit('changeZoom', _self.level)
+          // _self.$emit('changeZoom', _self.level)
           // console.log(_self.level,_self.center)
           // console.log("-----------");
         })

tpneim-ui/src/views/largeScreenPage/index.vue

@@ -2,7 +2,8 @@
   <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"/></div>
+      <div class="kaiguanBox"><img src="../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px"/>
+      </div>
       <div class="mapImg"><img src="../../../public/largeScreenImg/tupian.png" style="width: 30px;height: 30px"
                                @click="clickBtu('mapImg')"/></div>
       <div class="topTiltle">
@@ -37,39 +38,49 @@
           </div>
         </div>
         <div class="mapBtuBg">
-          <div id="mapBtuOne" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuOne')">
+          <div id="mapBtuOne" class="mapBtu mapBtuBefore" @click="clickBtu('mapBtuOne')">
             <span class="mapBtuText">地形图</span>
           </div>
-          <!--          <div id="mapBtuTwo" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuTwo')">-->
-          <!--            <span class="mapBtuText">风场气象图</span>-->
-          <!--          </div>-->
-          <div id="mapBtuThree" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuThree')">
+          <div id="mapBtuTwo" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuTwo')">
+            <span class="mapBtuText">风场气象图</span>
+          </div>
+          <div id="mapBtuSix" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuSix')">
+            <span class="mapBtuText">3D地形图</span>
+          </div>
+          <div id="mapBtuThree" class="mapBtu mapBtuAfter" @click="clickBtu1('mapBtuThree')">
             <span class="mapBtuText">风资源分布图</span>
           </div>
           <!--          <div id="mapBtuFour" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFour')">-->
           <!--            <span class="mapBtuText">光辐射气象图</span>-->
           <!--          </div>-->
-          <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
+          <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu1('mapBtuFive')">
             <span class="mapBtuText">光资源分布图</span>
           </div>
 
-          <div id="mapImg" class="mapBtu mapBtuBefore" v-show="false"></div>
+<!--          <div id="mapImg" class="mapBtu mapBtuBefore" v-show="false"></div>-->
         </div>
         <div v-if="mapMark === 'mapImg'">
-          <img src="../../../public/largeScreenImg/mapimg.png" style="width: 100%;height: calc(91vh);object-fit: cover;"/>
+          <img src="../../../public/largeScreenImg/mapimg.png"
+               style="width: 100%;height: calc(91vh);object-fit: cover;"/>
         </div>
         <div v-if="mapMark === 'mapBtuOne'">
           <bige-map ref="childMethod" :mapValue="mapValue"/>
-<!--          <bige-map-e22 ref="childMethod" :mapValue="mapValue"/>-->
+          <!--          <bige-map-e22 ref="childMethod" :mapValue="mapValue"/>-->
+        </div>
+        <div v-if="mapMark === 'mapBtuTwo'">
+          <wind-render :mapValue="mapValue"/>
+        </div>
+        <div v-if="mapMark === 'mapBtuSix'">
+          <bige-map3-d :mapValue="mapValue"/>
         </div>
         <div v-if="mapMark === 'mapBtuThree'">
-<!--          <bige-heat-map ref="childMethod" :mapValue="mapValue"/>-->
+          <!--          <bige-heat-map ref="childMethod" :mapValue="mapValue"/>-->
         </div>
         <div v-if="mapMark === 'mapBtuFive'">
-<!--          <bige-heat-sun-map ref="childMethod" :mapValue="mapValue"/>-->
+          <!--          <bige-heat-sun-map ref="childMethod" :mapValue="mapValue"/>-->
         </div>
         <div v-if="mapMark === 'mapBtu'">
-<!--          <zai-xian-bige-map ref="childMethod" :mapValue="mapValue"/>-->
+          <!--          <zai-xian-bige-map ref="childMethod" :mapValue="mapValue"/>-->
         </div>
       </div>
     </div>
@@ -79,16 +90,18 @@
 <script>
 import bigeMap from "@/views/largeScreenPage/components/bigeMap";
 import bigeMapE22 from "../largeScreenPage/components/bigeMapE22";
+import bigeMap3D from "../largeScreenPage/components/3DbigeMap";
 import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
 import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";
 import zaiXianBigeMap from "@/views/largeScreenPage/components/zaiXianBigeMap";
+import windRender from "../windData/windRender";
 
 import {provincialEnergyInfo} from "@/api/biz/dataQuery/largeScreenPage";
 
 export default {
   name: "index",
   components: {
-    bigeMap, bigeHeatMap, bigeHeatSunMap, zaiXianBigeMap,bigeMapE22
+    bigeMap, bigeHeatMap, bigeHeatSunMap, zaiXianBigeMap, bigeMap3D,windRender
   },
   data() {
     return {
@@ -105,7 +118,7 @@ export default {
       mapMark: 'mapBtuOne',
       timer: null,
       time: '',
-      resourcesOverview:'辽宁山地平原相间分布，山脉与河流多呈西南—东北走向，具有由陆地向海洋过渡的自然地理条件，也使渡海而来的夏季风能深入到更高的纬度。辽宁省地势大体自北向南，自东、西两侧向中部倾斜。',
+      resourcesOverview: '辽宁山地平原相间分布，山脉与河流多呈西南—东北走向，具有由陆地向海洋过渡的自然地理条件，也使渡海而来的夏季风能深入到更高的纬度。辽宁省地势大体自北向南，自东、西两侧向中部倾斜。',
       //地图传值
       mapValue: {
         level: null,//地图层级
@@ -156,20 +169,32 @@ export default {
         this.mapMark = 'mapBtu'
       }
     },
+    clickBtu1(id) {
+      let clickItem = document.getElementById(id)
+      let activeItem = document.querySelector('.mapBtuBefore')
+      activeItem.classList.remove('mapBtuBefore')
+      activeItem.classList.add('mapBtuAfter')
+      clickItem.classList.remove('mapBtuAfter')
+      clickItem.classList.add('mapBtuBefore')
+    },
     clickBtu(id) {
       let center = [41.18692, 123.62915]
       let level = 7
       if (this.$refs.childMethod !== undefined) {
-        center = this.$refs.childMethod.center
+        let ccenter = this.$refs.childMethod.center
+        center = ccenter.length === 0 ? [] : [ccenter.lat, ccenter.lng]
         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 = id
+      this.mapValue = {
+        params: new Date(),
+        level: level === '' ? null : level,//地图层级
+        center: center,//中心坐标
+        allStationInfo: null,//场站坐标
+        allPointInfo:null
+      }
+      if(id === 'mapBtuOne' || id ==='mapBtuTwo'|| id ==='mapBtuSix'){
+        this.mapMark = id
+      }
       let clickItem = document.getElementById(id)
       let activeItem = document.querySelector('.mapBtuBefore')
       activeItem.classList.remove('mapBtuBefore')

tpneim-ui/src/views/windData/windRender.vue

@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <div id='map'></div>
+    <div class="select">
+      <label><input type="radio" name="data" id="radioOne" value="100"><span>100Mb</span></label>
+      <label><input type="radio" name="data" id="radioTwo" value="250"><span>250Mb</span></label>
+      <label><input type="radio" name="data" id="radioThree" value="500"><span>500Mb</span></label>
+      <label><input type="radio" name="data" id="radioFour" value="750"><span>750Mb</span></label>
+      <label><input type="radio" name="data" id="radioFive" value="1000"><span>1000Mb</span></label>
+    </div>
+
+    <div id="position">
+      <div id="zoom">
+        当前级别 : 7
+      </div>
+      <div id="move">
+        当前中心点: 纬度:0.00000,经度:0.00000
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import bigemap from '@/utils/bigemap/map'
+export default {
+  name: "windRender",
+  data(){
+    return{
+      map:null,
+      timeLis:['00','06',12,18]
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      bigemap.then(() => {
+        //软件配置信息地址，软件安装完成之后使用本地地址，如：http://localhost:9000
+        // BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
+        BM.Config.HTTP_URL = 'http://localhost:9000';
+        // var map = BM.map('map', 'bigemap.zhongkexingtu', {
+        var map = BM.map('map', 'bigemap.a4u80hw4', {
+          center: [30, 104],
+          minZoom: 7,
+          maxZoom: 10,
+          zoomControl: true,
+          attributionControl: false
+        }), velocityLayer;
+
+        fetch('/js/json/wind_data/20230629_00_atmoslev_1000_mb.json').then(response => {
+          // console.log(response)
+          return response.json()
+        }).then(data => {
+          // console.log(data)
+          velocityLayer = BM.velocityLayer({
+            displayValues: true,
+            displayOptions: {
+              velocityType: 'windy',
+              displayPosition: "topright",
+              displayEmptyString: "没有数据",
+              directionString: '风向',
+              speedString: '速度'
+            },
+            data: data,
+            minVelocity: 0.05,//最小速度
+            maxVelocity: 10,// 最大速度
+            colorScale: ['#009dff', '#00ffd2', '#00ff0f'],// 颜色比例, '#D400B7FF'
+            velocityScale: 0.02, //  速度比例default 0.005,
+          });
+          velocityLayer.addTo(map);
+        });
+        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/210000.json').then(res => res.json()).then(data => {
+          geo2 = window.BM.geoJSON(data, {
+            style: function () {
+              return {
+                color: '#ffffff',
+                weight: 3,
+                fillColor: '#faf9f9',
+                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;
+          // console.log(geo2.getBounds())
+          //限制拖动
+          // this.bMap.setMaxBounds([[43.489559, 128.791111], [38.719833, 110.846231]]);
+          // this.bMap.fitBounds([[43.489559, 128.791111], [38.719833, 110.846231]]);
+          this.bMap.setMaxBounds([[43.489559, 128.791111], [38.719833, 118.846231]]);
+          this.bMap.fitBounds([[43.489559, 128.791111], [38.719833, 118.846231]]);
+          // 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: 'transparent',
+            // fillColor: '#0A163A',
+            // fillOpacity: 0.7
+          }).addTo(this.bMap);
+
+          //初始化热力图
+          // this.setHeatMap(this.bMap);
+          //绑定事
+          this.bindEvents(this.bMap);
+          this.bMap.setView([41.40566, 122.70630], 7)
+        })
+
+        function setData(params) {
+          // console.log(params)
+          fetch(`/js/json/wind_data/20230629_06_atmoslev_${params}_mb.json`).then(response => {
+            return response.json()
+          }).then(data => {
+            velocityLayer.options.displayOptions.velocityType = `${params}Mb`
+            velocityLayer.setData(data)
+          })
+        }
+
+        document.querySelectorAll('.select input').forEach(A => {
+          A.onchange = () => {
+            setData(A.value)
+          }
+        })
+      })
+    },
+    //绑定事件-监听地图级别和拖动
+    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()
+        _self.$emit('changeZoom', this.getZoom())
+        document.getElementById('zoom').innerHTML = '当前级别 : ' + this.getZoom();
+      });
+    },
+  },
+}
+</script>
+<style>
+.my_default_tooltip {
+  color: transparent !important;
+  background: transparent !important;
+  border: none !important;
+  /*font-size: 18px;*/
+}
+.my_default_tooltip::before {
+  display: none;
+}
+</style>
+<style scoped>
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.bigemap-control-velocity {
+  background-color: rgba(255, 255, 255, 0.7);
+  padding: 0 5px;
+  margin: 0 !important;
+  color: #333;
+  font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+.velocity-overlay {
+  position: absolute;
+  z-index: 1;
+}
+
+.bigemap-canvas-layer {
+  opacity: 1;
+}
+
+.select {
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  right: .5%;
+  background-color: #f3f3f3;
+  border-radius: 5px;
+  color: black;
+}
+#position{
+  width: 320px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: #f3f3f3;
+  border-radius: 5px;
+  color: black;
+}
+</style>

tpneim-ui/src/views/windResources/windSpeedCurve/index.vue

@@ -126,7 +126,7 @@ export default {
   },
   mounted() {
     this.allOptions = defaultOption.allHeightOptions
-    this.getTimeFrame()
+    this.getlistEquipmentIdAndDataTime()
   },
   destroyed() {
     if (!this.wsChart) {
@@ -209,7 +209,7 @@ export default {
           this.avgWdText = this.avgWdText.slice(0, this.avgWdText.length - 1)
         }
         //曲线图
-        this.wdData = res.data.wd[0]
+        this.wdData = defaultData.wsWdData.wd[0]
         this.drawWdChart(this.wdData, this.timeData)
       // }).catch(err => {
       //   this.wsChart.hideLoading();