Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-admin

src/views/dataV/layOut.vue

@@ -7,7 +7,7 @@
       element-loading-background="#263840"
       element-loading-text="地图加载中"
       element-loading-spinner="el-icon-loading"
-      :style="{ height: '100vh', width: '100vw', transform: `${scale}` }"
+      :style="{ height: 'calc(100vh - 310px)', width: '67%', 'margin-top': '65px', transform: `${scale}` }"
     />
     <div class="boxTop" />
     <div v-if="type != 'pageThree' && type != 'pageFive'" class="boxCentLeft">

src/views/dataV/map.js

@@ -1,6 +1,6 @@
-import { listDevice } from '@/api/iot/device'
+import { listDevice } from '@/api/iot/device';
-import { listLand } from '@/api/agriculture/land'
+import { listLand } from '@/api/agriculture/land';
-import { getDicts } from '@/api/system/dict/data'
+import { getDicts } from '@/api/system/dict/data';
 const mapMixin = {
   data() {
     return {
@@ -9,37 +9,38 @@ const mapMixin = {
       baseUrl: process.env.VUE_APP_BASE_API,
       loading: false,
       landType: [],
-      deviceType: []
+      deviceType: [],
-    }
+    };
   },
   watch: {
     baseId: {
-      handler: async function(n) {
+      handler: async function (n) {
         if (n) {
-          await this.$nextTick()
+          await this.$nextTick();
           if (this.type == 'pageThree') {
-            this.loading = true
+            this.loading = true;
             // 获去地块数据
-            const res = await listLand({ baseId: this.baseId })
+            const res = await listLand({ baseId: this.baseId });
-            this.area = res.rows
+            this.area = res.rows;
+
             // 获取设备数据
-            const res1 = await listDevice({ baseId: this.baseId })
+            const res1 = await listDevice({ baseId: this.baseId });
             this.device = res1.rows.map((item) => ({
               ...item,
-              imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl
+              imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl,
-            }))
+            }));
-            this.initMap()
+            this.initMap();
             getDicts('agriculture_land_type').then((response) => {
-              this.landType = response.data
+              this.landType = response.data;
-            })
+            });
             getDicts('iot_device_status').then((response) => {
-              this.deviceType = response.data
+              this.deviceType = response.data;
-            })
+            });
           }
         }
       },
-      immediate: true
+      immediate: true,
-    }
+    },
   },
   async mounted() {},
   methods: {
@@ -48,26 +49,24 @@ const mapMixin = {
       this.map = new this.AMap.Map('indexMap', {
         // 设置地图容器id
         mapStyle: 'amap://styles/grey',
-        zoom: 16, // 初始化地图级别
+        zoom: 12, // 初始化地图级别
-        // center: baseCoordinate, //初始化地图中心点位置
+        doubleClickZoom: false,
-        doubleClickZoom: false
+      });
-      })
+      await this.createAreaPolygon();
-      await this.createAreaPolygon()
+      await this.createDevicePoint();
-      await this.createDevicePoint()
-      this.map.setFitView()
     },
     /** 绘制地块 */
     createAreaPolygon() {
-      const label = []
+      const label = [];
-      const overlayGroup = []
+      const overlayGroup = [];
       this.area.forEach((item) => {
         if (item.landPath) {
-          const path = []
+          const path = [];
-          const pointList = []
+          const pointList = [];
           item.landPath.split('|').forEach((point) => {
-            path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]))
+            path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
-            pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])])
+            pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
-          })
+          });
           const polygon = new this.AMap.Polygon({
             path: path,
             fillColor: item.fillColor,
@@ -76,13 +75,14 @@ const mapMixin = {
             strokeWeight: item.strokeWeight,
             strokeOpacity: item.strokeOpacity,
             extData: {
-              ...item
+              ...item,
-            }
+            },
-          })
+          });
           polygon.on('click', (e) => {
-            this.createInfoWindow(e)
+            this.createInfoWindow(e);
-          })
+          });
-          overlayGroup.push(polygon)
+
+          overlayGroup.push(polygon);
           // 添加地块名称
           label.push(
             new this.AMap.Text({
@@ -93,119 +93,120 @@ const mapMixin = {
                 background: 'transparent',
                 color: '#fff',
                 border: 'none',
-                fontSize: '16px'
+                fontSize: '16px',
-              }
+              },
             })
-          )
+          );
         }
-      })
+      });
-      this.map.add(new this.AMap.OverlayGroup(label))
+      this.map.add(new this.AMap.OverlayGroup(label));
-      this.map.add(new this.AMap.OverlayGroup(overlayGroup))
+      this.map.add(new this.AMap.OverlayGroup(overlayGroup));
+      this.map.setFitView(overlayGroup);
     },
     /**  创建设备marker点 */
     createDevicePoint() {
-      const devicePointList = []
+      const devicePointList = [];
       this.device.forEach((device) => {
         if ((device.longitude, device.latitude)) {
           const marker = new this.AMap.Marker({
             icon: new this.AMap.Icon({
               image: this.baseUrl + device.imgUrl,
-              imageSize: new this.AMap.Size(32, 32)
+              imageSize: new this.AMap.Size(32, 32),
             }),
             position: [device.longitude, device.latitude],
             title: device.deviceName,
             anchor: 'bottom-center',
             extData: {
-              ...device
+              ...device,
-            }
+            },
-          })
+          });
           marker.on('click', (e) => {
-            this.createInfoWindow2(e)
+            this.createInfoWindow2(e);
-          })
+          });
-          devicePointList.push(marker)
+          devicePointList.push(marker);
         }
-      })
+      });
-      this.map.add(new this.AMap.OverlayGroup(devicePointList))
+      this.map.add(new this.AMap.OverlayGroup(devicePointList));
-      this.loading = false
+      this.loading = false;
     },
     /** 获取地块中心点 */
     getAreaCenter(location) {
-      var total = location.length
+      var total = location.length;
-      var X = 0
+      var X = 0;
-      var Y = 0
+      var Y = 0;
-      var Z = 0
+      var Z = 0;
       location.forEach((lnglat) => {
-        var lng = (lnglat[0] * Math.PI) / 180
+        var lng = (lnglat[0] * Math.PI) / 180;
-        var lat = (lnglat[1] * Math.PI) / 180
+        var lat = (lnglat[1] * Math.PI) / 180;
-        var x, y, z
+        var x, y, z;
-        x = Math.cos(lat) * Math.cos(lng)
+        x = Math.cos(lat) * Math.cos(lng);
-        y = Math.cos(lat) * Math.sin(lng)
+        y = Math.cos(lat) * Math.sin(lng);
-        z = Math.sin(lat)
+        z = Math.sin(lat);
-        X += x
+        X += x;
-        Y += y
+        Y += y;
-        Z += z
+        Z += z;
-      })
+      });
-      X = X / total
+      X = X / total;
-      Y = Y / total
+      Y = Y / total;
-      Z = Z / total
+      Z = Z / total;
 
-      var Lng = Math.atan2(Y, X)
+      var Lng = Math.atan2(Y, X);
-      var Hyp = Math.sqrt(X * X + Y * Y)
+      var Hyp = Math.sqrt(X * X + Y * Y);
-      var Lat = Math.atan2(Z, Hyp)
+      var Lat = Math.atan2(Z, Hyp);
-      return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)]
+      return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)];
     },
     /** 信息窗体 */
     createInfoWindow(e) {
-      var info = document.createElement('div')
+      var info = document.createElement('div');
-      info.className = 'InfoBox'
+      info.className = 'InfoBox';
-      var title = document.createElement('div')
+      var title = document.createElement('div');
-      title.className = 'title'
+      title.className = 'title';
-      title.innerHTML = `${e.target._opts.extData.landName}`
+      title.innerHTML = `${e.target._opts.extData.landName}`;
-      var type = document.createElement('div')
+      var type = document.createElement('div');
-      var typeName = ''
+      var typeName = '';
       this.landType.forEach((item) => {
         if (item.dictValue == e.target._opts.extData.landType) {
-          typeName = item.dictLabel
+          typeName = item.dictLabel;
         }
-      })
+      });
-      type.className = 'type'
+      type.className = 'type';
       type.innerHTML = `<div class="item">类型：<div class="tag">${typeName}</div></div>
-                            <div class="item">面积：${e.target._opts.extData.landArea}亩</div>`
+                            <div class="item">面积：${e.target._opts.extData.landArea}亩</div>`;
-      info.appendChild(title)
+      info.appendChild(title);
-      info.appendChild(type)
+      info.appendChild(type);
       const infoWindow = new this.AMap.InfoWindow({
         anchor: 'bottom-center',
-        content: info // 使用默认信息窗体框样式，显示信息内容
+        content: info, // 使用默认信息窗体框样式，显示信息内容
-      })
+      });
-      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()))
+      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
     },
     createInfoWindow2(e) {
-      var info = document.createElement('div')
+      var info = document.createElement('div');
-      info.className = 'InfoBox'
+      info.className = 'InfoBox';
-      var title = document.createElement('div')
+      var title = document.createElement('div');
-      title.className = 'title'
+      title.className = 'title';
-      title.innerHTML = `${e.target._opts.extData.deviceName}`
+      title.innerHTML = `${e.target._opts.extData.deviceName}`;
-      var num = document.createElement('div')
+      var num = document.createElement('div');
-      num.className = 'num'
+      num.className = 'num';
-      num.innerHTML = `<div>编号：${e.target._opts.extData.serialNumber}</div>`
+      num.innerHTML = `<div>编号：${e.target._opts.extData.serialNumber}</div>`;
-      var tips = document.createElement('div')
+      var tips = document.createElement('div');
-      tips.className = 'tips'
+      tips.className = 'tips';
-      var statusName = ''
+      var statusName = '';
       this.deviceType.forEach((item) => {
         if (item.dictValue == e.target._opts.extData.status) {
-          statusName = item.dictLabel
+          statusName = item.dictLabel;
         }
-      })
+      });
-      tips.innerHTML = `${statusName}`
+      tips.innerHTML = `${statusName}`;
-      info.appendChild(title)
+      info.appendChild(title);
-      info.appendChild(num)
+      info.appendChild(num);
-      info.appendChild(tips)
+      info.appendChild(tips);
       const infoWindow = new this.AMap.InfoWindow({
         anchor: 'bottom-center',
-        content: info // 使用默认信息窗体框样式，显示信息内容
+        content: info, // 使用默认信息窗体框样式，显示信息内容
-      })
+      });
-      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()))
+      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
-    }
+    },
-  }
+  },
-}
+};
-export default mapMixin
+export default mapMixin;