Przeglądaj źródła

Merge branch 'master' of http://172.16.90.201:3000/castgroup_forest/castgroup_bigscreen

gcz 2 lat temu
rodzic
commit
b1be3f0f4f
1 zmienionych plików z 294 dodań i 160 usunięć
  1. 294 160
      src/components/amapTow.vue

+ 294 - 160
src/components/amapTow.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-10-19 09:32:46
  * @LastEditors: wangcc
- * @LastEditTime: 2022-10-27 17:43:25
+ * @LastEditTime: 2022-11-01 14:41:59
  * @FilePath: \castgroup_bigscreen\src\components\amapTow.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -39,7 +39,8 @@ import {
   financeBaseDetail,
   farmInfo,
   smallClassDetail,
-  treePlant
+  treePlant,
+  projectList
 } from '@/service/index.js';
 import axios from 'axios';
 export default {
@@ -93,19 +94,23 @@ export default {
       smallClassPolygonArr: [],
       // 林木结构小班边界
       treesPolygonArr: [],
+      // 项目列表
+      projectMarkerArr: [],
       treeCompMarkers: [],
       townPolygonArr: [],
       economicsArr: [],
       selectData: {},
       districtData: {},
-      streetData: {}
+      streetData: {},
+      // 项目小班数
+      projectSmallClassArr: []
     };
   },
   watch: {
     '$store.state.addr.parentId': {
       handler(val) {
         // 加载小班边界
-        this.getSmallClass();
+        // this.getSmallClass();
         this.parentId = val;
         if (this.$store.state.addr.mapLevel == 'street') {
           this.parentId = val.substring(0, 6);
@@ -130,6 +135,12 @@ export default {
               this.leftPage
             );
           }
+          if (this.townPolygons) {
+            this.map.remove(this.townPolygons);
+          }
+          if (this.townPolygonArr) {
+            this.map.remove(this.townPolygonArr);
+          }
           if (
             this.polygon ||
             this.streetMarkerArr ||
@@ -137,7 +148,8 @@ export default {
             this.forestMarkerArr ||
             this.smallClassNArr ||
             this.forestMarkerArr ||
-            this.townPolygonArr
+            this.townPolygonArr ||
+            this.smallClassPolygonArr
           ) {
             this.map.remove(this.polygon);
             this.map.remove(this.streetMarkerArr);
@@ -146,6 +158,7 @@ export default {
             this.map.remove(this.smallClassNArr);
             this.map.remove(this.forestMarkerArr);
             this.map.remove(this.townPolygonArr);
+            this.map.remove(this.smallClassPolygonArr);
           }
         }
       }
@@ -164,18 +177,26 @@ export default {
           this.parentId = '520000';
           this.$store.state.addr.parentName = '贵州省';
         }
+        console.log(val);
         if (this.parentId) {
-          this.getSmallClass(val);
-          this.mapPolygon();
+          if (this.$store.state.addr.mapLevel == 'street') {
+            this.getSmallClass(val);
+          }
+        }
+        this.mapPolygon();
+        if (val == 'forest' || val == 'treeSpecies') {
+          this.getProjectList();
         }
         if (val != 'forest') {
           this.map.remove(this.forestMarkerArr);
           this.map.remove(this.smallClassNArr);
           this.map.remove(this.smallClassPolygonArr);
+          this.map.remove(this.projectMarkerArr);
         }
         if (val != 'treeSpecies') {
           this.map.remove(this.forestMarkerArr);
           this.map.remove(this.treesPolygonArr);
+          this.map.remove(this.projectMarkerArr);
         }
         if (val != 'economics') {
           this.map.remove(this.economicsArr);
@@ -186,6 +207,13 @@ export default {
         }
       }
     },
+    '$store.state.addr.mapLevel': {
+      handler(val) {
+        if (val === 'street') {
+          this.getSmallClass();
+        }
+      }
+    },
     '$store.state.addr.smallClassSearch': {
       deep: true,
       immediate: true,
@@ -431,6 +459,47 @@ export default {
           }
         }
       }
+    },
+    '$store.state.addr.smallClassMap': {
+      handler(val) {
+        console.log(val);
+        if (val) {
+          if (this.projectSmallClassArr) {
+            this.map.remove(this.projectSmallClassArr);
+          }
+          let capitals = { animations: 'scaless' };
+          val.forEach((element) => {
+            let lnglat = new AMap.LngLat(element.longitude, element.latitude);
+            var projectSmallClass = new AMap.Text({
+              map: this.map,
+              text: ' ',
+              textAlign: 'center',
+              verticalAlign: 'middle', //middle 、bottom
+              draggable: true,
+              cursor: 'pointer',
+              angle: 2,
+              style: {
+                width: '1px',
+                height: '1px',
+                'border-radius': '50%',
+                'border-width': 0,
+                'text-align': 'center',
+                'font-size': '12px',
+                color: 'blue',
+                'background-color': 'red',
+                // '-moz-box-shadow': '0px 0px 20px 2px '+capitals[i].color,
+                // 'box-shadow': '0px 0px 20px 2px '+capitals[i].color,
+                animation:
+                  capitals.animations +
+                  '1s infinite cubic-bezier(0, 0, 0.49, 1.02)'
+                // 'animation': 'myfirst 1s infinite'
+              },
+              position: lnglat
+            });
+            this.projectSmallClassArr.push(projectSmallClass);
+          });
+        }
+      }
     }
   },
   computed: {
@@ -601,46 +670,61 @@ export default {
           adName = props.name;
           adcode = props.adcode;
           mapLevel = props.level;
-          for (let item of this.forestFarmData) {
-            if (props.name == item.cityName || props.name == item.countyName) {
-              mapLevel = props.level;
-              adName = props.name;
-              this.$store.dispatch('searchArea', {
-                parentId: props.adcode,
-                name: props.name,
-                mapLevel: props.level
-              });
-              let valCode = props.adcode + '000000';
-              let areaId = '';
-              this.vuexCityList.forEach((item) => {
-                if (valCode == item.areaCode) {
-                  areaId = item.areaId;
-                }
-              });
-              this.vuexDistrictList.forEach((item) => {
-                if (valCode == item.areaCode) {
-                  areaId = item.areaId;
-                }
-              });
-              if (props.level == 'city') {
-                this.changeSelectCity({
-                  value: valCode,
-                  label: props.name,
-                  areaId: areaId
-                });
-              } else if (props.level == 'district') {
-                this.changeSelectDistrict({
-                  value: valCode,
-                  label: props.name,
-                  areaId: areaId
-                });
-              }
-              this.map.remove(this.treesMarkerArr);
+          // for (let item of this.forestFarmData) {
+          //   if (props.name == item.cityName || props.name == item.countyName) {
+          mapLevel = props.level;
+          adName = props.name;
+          this.$store.dispatch('searchArea', {
+            parentId: props.adcode,
+            name: props.name,
+            mapLevel: props.level
+          });
+          let valCode = props.adcode + '000000';
+          let areaId = '';
+          this.vuexCityList.forEach((item) => {
+            if (valCode == item.areaCode) {
+              areaId = item.areaId;
+            }
+          });
+          this.vuexDistrictList.forEach((item) => {
+            if (valCode == item.areaCode) {
+              areaId = item.areaId;
             }
+          });
+          if (props.level == 'city') {
+            this.changeSelectCity({
+              value: valCode,
+              label: props.name,
+              areaId: areaId
+            });
+          } else if (props.level == 'district') {
+            this.changeSelectDistrict({
+              value: valCode,
+              label: props.name,
+              areaId: areaId
+            });
+          }
+          if (this.projectMarkerArr) {
+            this.map.remove(this.projectMarkerArr);
+          }
+          if (this.economicsArr) {
+            this.map.remove(this.economicsArr);
+          }
+          if (this.baseMarkerArr) {
+            this.map.remove(this.baseMarkerArr);
+          }
+          if (this.eventMarkersArr) {
+            this.map.remove(this.eventMarkersArr);
+          }
+          if (this.treesMarkerArr) {
+            this.map.remove(this.treesMarkerArr);
           }
         }
+        //   }
+        // }
       });
       this.switch2AreaNode(adcode);
+      // this.getProjectList();
     },
     //根据Hover状态设置相关样式
     toggleHoverFeature(feature, isHover, position) {
@@ -671,7 +755,7 @@ export default {
     //绘制某个区域的边界
     renderAreaPolygons(areaNode) {
       // 加载小班边界
-      this.getSmallClass();
+      // this.getSmallClass();
       let _this = this;
       //更新地图视野
       if (this.$store.state.addr.mapLevel != 'street') {
@@ -730,9 +814,11 @@ export default {
         height: 10000
       });
       this.polygon.setPath(pathArray);
-
+      if (this.leftPage == 'forest' || this.leftPage == 'treeSpecies') {
+        this.getProjectList();
+      }
       if (areaPolygon.properties.level != 'district') {
-        this.setMarker();
+        // this.setMarker();
       } else {
         this.map.remove(this.treesMarkerArr);
       }
@@ -848,61 +934,92 @@ export default {
       });
     },
     // 加载林场
-    setMarker() {
-      this.forestFarmData = [];
-      if (this.treesMarkerArr.length > 0) {
-        this.map.remove(this.treesMarkerArr);
-      }
-      farmInfo().then((res) => {
-        this.forestFarmData = res.rows;
-        let parentMarker = require('@/assets/img/pre-marker.png');
-        this.forestFarmData.forEach((item) => {
-          let selectCity = this.$store.state.addr.selectCity.label;
-          switch (this.$store.state.addr.selectCity.label) {
-            case '黔西南州':
-              selectCity = '黔西南布依族苗族自治州';
-              break;
-            case '黔东南州':
-              selectCity = '黔东南苗族侗族自治州';
-              break;
-            case '黔南州':
-              selectCity = '黔南布依族苗族自治州';
-              break;
-          }
-          if (this.$store.state.addr.selectCity.label) {
-            if (selectCity == item.cityName) {
-              let lngLat = [item.longitude, item.latitude];
-              this.treesMarker = new AMap.Marker({
+    // setMarker() {
+    //   this.forestFarmData = [];
+    //   if (this.treesMarkerArr.length > 0) {
+    //     this.map.remove(this.treesMarkerArr);
+    //   }
+    //   farmInfo().then((res) => {
+    //     this.forestFarmData = res.rows;
+    //     let parentMarker = require('@/assets/img/pre-marker.png');
+    //     this.forestFarmData.forEach((item) => {
+    //       let selectCity = this.$store.state.addr.selectCity.label;
+    //       switch (this.$store.state.addr.selectCity.label) {
+    //         case '黔西南州':
+    //           selectCity = '黔西南布依族苗族自治州';
+    //           break;
+    //         case '黔东南州':
+    //           selectCity = '黔东南苗族侗族自治州';
+    //           break;
+    //         case '黔南州':
+    //           selectCity = '黔南布依族苗族自治州';
+    //           break;
+    //       }
+    //       if (this.$store.state.addr.selectCity.label) {
+    //         if (selectCity == item.cityName) {
+    //           let lngLat = [item.longitude, item.latitude];
+    //           this.treesMarker = new AMap.Marker({
+    //             map: this.map,
+    //             position: lngLat,
+    //             icon: parentMarker,
+    //             anchor: 'bottom-center',
+    //             offset: new AMap.Pixel(0, 0)
+    //           });
+    //           this.treesMarker.setLabel({
+    //             direction: 'bottom',
+    //             offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+    //             content: `<div>${item.forestName}</div>` //设置文本标注内容
+    //           });
+    //           this.treesMarkerArr.push(this.treesMarker);
+    //         }
+    //       } else {
+    //         let lngLat = [item.longitude, item.latitude];
+    //         this.treesMarker = new AMap.Marker({
+    //           map: this.map,
+    //           position: lngLat,
+    //           icon: parentMarker,
+    //           anchor: 'bottom-center',
+    //           offset: new AMap.Pixel(0, 0)
+    //         });
+    //         this.treesMarker.setLabel({
+    //           direction: 'bottom',
+    //           offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+    //           content: `<div>${item.forestName}</div>` //设置文本标注内容
+    //         });
+    //         this.treesMarkerArr.push(this.treesMarker);
+    //       }
+    //     });
+    //   });
+    // },
+    // 查询项目列表
+    getProjectList() {
+      let params = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      projectList(params).then((res) => {
+        if (res.code == 200) {
+          let infoIcon = new AMap.Icon({
+            size: new AMap.Size(20, 25), // 图标尺寸
+            image: require('@/assets/img/infoMarker.png'),
+            imageSize: new AMap.Size(20, 25) // 根据所设置的大小拉伸或压缩图片
+          });
+          res.rows.forEach((element) => {
+            if (element.longitude && element.latitude) {
+              let lnglat = new AMap.LngLat(element.longitude, element.latitude);
+              var projectMarker = new AMap.Marker({
                 map: this.map,
-                position: lngLat,
-                icon: parentMarker,
-                anchor: 'bottom-center',
-                offset: new AMap.Pixel(0, 0)
-              });
-              this.treesMarker.setLabel({
-                direction: 'bottom',
-                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-                content: `<div>${item.forestName}</div>` //设置文本标注内容
+                position: lnglat,
+                offset: new AMap.Pixel(0, -30),
+                icon: infoIcon,
+                zIndex: 999,
+                topWhenClick: true
               });
-              this.treesMarkerArr.push(this.treesMarker);
+              this.projectMarkerArr.push(projectMarker);
             }
-          } else {
-            let lngLat = [item.longitude, item.latitude];
-            this.treesMarker = new AMap.Marker({
-              map: this.map,
-              position: lngLat,
-              icon: parentMarker,
-              anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0)
-            });
-            this.treesMarker.setLabel({
-              direction: 'bottom',
-              offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-              content: `<div>${item.forestName}</div>` //设置文本标注内容
-            });
-            this.treesMarkerArr.push(this.treesMarker);
-          }
-        });
+          });
+        }
       });
     },
     // 加载乡镇边界
@@ -980,9 +1097,9 @@ export default {
       let that = this;
       that.smallClassMapArr = [];
       let params = {
-        cityId: that.$store.state.addr.selectCity.areaId,
-        countyId: that.$store.state.addr.selectDistrict.areaId
-        // townId: this.$store.state.addr.selectStreet.areaId
+        // cityId: that.$store.state.addr.selectCity.areaId,
+        // countyId: that.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
       };
       if (that.smallClassPolygonArr.length > 0) {
         that.map.remove(that.smallClassPolygonArr);
@@ -990,41 +1107,18 @@ export default {
       if (that.treesPolygonArr.length > 0) {
         that.map.remove(that.treesPolygonArr);
       }
-      let pageData = {
-        pageNum: 0,
-        pageSize: 25
-      };
+      // let pageData = {
+      //   pageNum: 0,
+      //   pageSize: 25
+      // };
       console.log(that.leftPage);
       let mapLevel = that.$store.state.addr.mapLevel;
-      let res = await smallClassMap({ ...params, ...pageData });
-      console.log(res.rows);
-      if (res.code == 200 && res.total > 25) {
-        const total = res.total;
-        const totalPage = Math.ceil(total / pageData.pageSize);
-        const render = (page, mapLevel) => {
-          if (page >= totalPage) return;
-          requestAnimationFrame(() => {
-            render(page + 1, mapLevel);
-            pageData.pageNum = page;
-            smallClassMap({ ...params, ...pageData }).then((response) => {
-              if (response.code == 200) {
-                response.rows.forEach((item) => {
-                  // if (item.smallId != null) {
-                  // }
-                  // this.smallClassMapArr.push(item);
-                  if (that.leftPage === 'forest') {
-                    this.addForestPolygon(item);
-                  } else if (this.leftPage === 'treeSpecies') {
-                    this.addTreeSpeciesPolygon(item);
-                  }
-                });
-              }
-            });
-          });
-        };
-        render(pageData.pageNum, mapLevel);
-      } else {
+      let res = await smallClassMap({ ...params });
+      if (res.code == 200) {
         res.rows.forEach((item) => {
+          // if (item.smallId != null) {
+          // }
+          // this.smallClassMapArr.push(item);
           if (that.leftPage === 'forest') {
             this.addForestPolygon(item);
           } else if (this.leftPage === 'treeSpecies') {
@@ -1032,31 +1126,67 @@ export default {
           }
         });
       }
+      console.log(res.rows);
+      // if (res.code == 200 && res.total > 25) {
+      //   const total = res.total;
+      //   const totalPage = Math.ceil(total / pageData.pageSize);
+      //   const render = (page, mapLevel) => {
+      //     if (page >= totalPage) return;
+      //     requestAnimationFrame(() => {
+      //       render(page + 1, mapLevel);
+      //       pageData.pageNum = page;
+      //       smallClassMap({ ...params, ...pageData }).then((response) => {
+      //         if (response.code == 200) {
+      //           response.rows.forEach((item) => {
+      //             // if (item.smallId != null) {
+      //             // }
+      //             // this.smallClassMapArr.push(item);
+      //             if (that.leftPage === 'forest') {
+      //               this.addForestPolygon(item);
+      //             } else if (this.leftPage === 'treeSpecies') {
+      //               this.addTreeSpeciesPolygon(item);
+      //             }
+      //           });
+      //         }
+      //       });
+      //     });
+      //   };
+      //   render(pageData.pageNum, mapLevel);
+      // } else {
+      //   res.rows.forEach((item) => {
+      //     if (that.leftPage === 'forest') {
+      //       this.addForestPolygon(item);
+      //     } else if (this.leftPage === 'treeSpecies') {
+      //       this.addTreeSpeciesPolygon(item);
+      //     }
+      //   });
+      // }
     },
     mapPolygon() {
-      if (this.smallClassMapArr) {
-        if (this.leftPage === 'forest') {
-          // this.addForestPolygon(this.smallClassMapArr);
-          if (
-            this.$store.state.addr.mapLevel == 'district' ||
-            this.$store.state.addr.mapLevel == 'street'
-          ) {
-            this.getForestSample(this.leftPage);
-          }
-        } else if (this.leftPage === 'treeSpecies') {
-          // this.addTreeSpeciesPolygon();
-          if (
-            this.$store.state.addr.mapLevel == 'district' ||
-            this.$store.state.addr.mapLevel == 'street'
-          ) {
-            this.getRightScrollData(this.leftPage);
-          }
-        } else if (this.leftPage === 'economics') {
-          this.getEconomics();
-        } else if (this.leftPage === 'event') {
-          this.getEven();
+      // if (this.smallClassMapArr) {
+      console.log(this.leftPage);
+      if (this.leftPage === 'forest') {
+        // this.addForestPolygon(this.smallClassMapArr);
+        if (
+          // this.$store.state.addr.mapLevel == 'district' ||
+          this.$store.state.addr.mapLevel == 'street'
+        ) {
+          this.getForestSample(this.leftPage);
+        }
+      } else if (this.leftPage === 'treeSpecies') {
+        // this.addTreeSpeciesPolygon();
+        if (
+          // this.$store.state.addr.mapLevel == 'district' ||
+          this.$store.state.addr.mapLevel == 'street'
+        ) {
+          this.getRightScrollData(this.leftPage);
         }
+      } else if (this.leftPage === 'economics') {
+        this.getEconomics();
+      } else if (this.leftPage === 'event') {
+        this.getEven();
       }
+      // }
     },
     addForestPolygon(item) {
       let that = this;
@@ -1236,9 +1366,9 @@ export default {
     // 获取样地数据
     getForestSample(page) {
       forestSample({
-        cityId: this.$store.state.addr.selectCity.areaId,
-        countyId: this.$store.state.addr.selectDistrict.areaId
-        // townId: this.$store.state.addr.selectStreet.areaId
+        // cityId: this.$store.state.addr.selectCity.areaId,
+        // countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
       }).then((res) => {
         let sampleMarker = require('@/assets/img/sample-marker.png');
         let iconMeta = [28, 28];
@@ -1427,9 +1557,9 @@ export default {
     // 获取小班列表
     getRightScrollData(page) {
       rightScrollData({
-        cityId: this.$store.state.addr.selectCity.areaId,
-        countyId: this.$store.state.addr.selectDistrict.areaId
-        // townId: this.$store.state.addr.selectStreet.areaId
+        // cityId: this.$store.state.addr.selectCity.areaId,
+        // countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
       }).then((res) => {
         let sampleMarker = require('@/assets/img/sanjiaod.png');
         let iconMeta = [16, 10];
@@ -1439,7 +1569,11 @@ export default {
     // 事件信息
     getEven() {
       let _this = this;
-      alarmDataApi().then((res) => {
+      alarmDataApi({
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      }).then((res) => {
         res.data.forEach((item) => {
           let lanLatArr = [item.longitude, item.latitude];
           let baseIcon = '';