修改地图选项切换为不返回省级并刷新数据到相应切换项

src/components/alarm.vue

@@ -1,5 +1,5 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
   <div class="alarm-wrap">
@@ -59,9 +59,7 @@ export default {
       'changeSelectStreet'
     ]),
     jumpMap(item) {
-      console.log(item);
       this.alarData = item;
-      if (this.$store.state.addr.mapLevel === 'province') {
         this.vuexCityList.forEach((element) => {
           if (item.cityId === element.areaId) {
             this.changeSelectCity({
@@ -72,11 +70,10 @@ export default {
             this.$store.dispatch('searchArea', {
               parentId: element.areaCode.substring(0, 6),
               name: item.cityName,
-              mapLevel: 'city'
+              mapLevel: this.$store.state.addr.mapLevel
             });
           }
         });
-      }
     },
     jumpDistrict() {
       if (this.vuexDistrictList) {
@@ -90,7 +87,7 @@ export default {
             this.$store.dispatch('searchArea', {
               parentId: element.areaCode.substring(0, 6),
               name: element.areaName,
-              mapLevel: 'district'
+              mapLevel: this.$store.state.addr.mapLevel
             });
           }
         });

src/components/amap.vue

@@ -43,7 +43,17 @@ export default {
       smallClassMapArr: [],
       smallMarker: null,
       treeCompData: {},
-      treeSmallLabel: null
+      treeSmallLabel: null,
+      leftPage: 'forest',
+      parentId: '',
+      // 行政区
+      polygon: null,
+      // 城市标注点
+      cityMarker: null,
+      smallClassPolygon: null,
+      forestMarker: null,
+      rightScrollMarker: null,
+      markerData: {}
     };
   },
 
@@ -55,33 +65,83 @@ export default {
     '$store.state.addr.parentId': {
       handler(val) {
         if (this.map) {
+          this.parentId = val;
           this.switch2AreaNode(
             val,
             this.$store.state.addr.mapLevel,
-            this.$store.state.addr.selectCity
+            this.$store.state.addr.selectCity,
+            this.leftPage
           );
           this.getDistrict(
             this.$store.state.addr.parentName,
             this.$store.state.addr.mapLevel
           );
-          console.log(this.$store.state.addr.parentName);
-          console.log(this.$store.state.addr.mapLevel);
-          this.map.clearMap();
+          // this.map.clearMap();
+          // this.map.remove(this.polygon);
+        }
+      }
+    },
+    '$store.state.addr.page': {
+      handler(val) {
+        console.log(val);
+        this.leftPage = val;
+        // if (this.$store.state.addr.mapLevel === 'district') {
+        //   if (this.leftPage === 'forest') {
+        //     this.getForestSample(val);
+        //   } else if (this.leftPage === 'treeSpecies') {
+        //     this.getRightScrollData(val);
+        //   } else if (this.leftPage === 'event') {
+        //     this.getEven();
+        //   } else if (this.leftPage === 'economics') {
+        //     this.getEconomics();
+        //   }
+        // }
+        if (!this.smallClassMapArr) {
+          this.$store.dispatch('getSmallClassMap', {
+            cityId: this.$store.state.addr.selectCity.areaId,
+            countyId: this.$store.state.addr.selectDistrict.areaId,
+            townId: this.$store.state.addr.selectStreet.areaId
+          });
+        }
+        if (this.parentId) {
+          this.switch2AreaNode(
+            this.parentId,
+            this.$store.state.addr.mapLevel,
+            this.$store.state.addr.selectCity,
+            this.leftPage
+          );
+          this.getDistrict(
+            this.$store.state.addr.parentName,
+            this.$store.state.addr.mapLevel
+          );
+        }
+      }
+    },
+    '$store.state.addr.smallClassMapArr': {
+      handler(val) {
+        if (val.code == 200) {
+          this.smallClassMapArr = val.rows;
+          // smallClassPolygon
+          // this.map.setLayers(this.smallClassPolygon);
+          if (this.$store.state.addr.mapLevel === 'district') {
+            if (this.leftPage === 'forest') {
+              this.addForestPolygon();
+            } else if (this.leftPage === 'treeSpecies') {
+              this.addTreeSpeciesPolygon();
+            } else if (this.leftPage === 'event') {
+              this.getEven();
+            } else if (this.leftPage === 'economics') {
+              this.getEconomics();
+            }
+          }
         }
       }
     }
-    // '$store.state.addr.page':{
-    //   handler(val) {
-    //     console.log(val);
-    //   }
-    // }
   },
   computed: {
     ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
   },
-  created() {
-    this.getSmallClass();
-  },
+  created() {},
   methods: {
     ...mapMutations([
       'changeSelectCity',
@@ -145,7 +205,19 @@ export default {
       });
     },
     getDistrict(adName, mapLevel) {
+      switch (adName) {
+        case '黔西南州':
+          adName = '黔西南布依族苗族自治州';
+          break;
+        case '黔东南州':
+          adName = '黔东南苗族侗族自治州';
+          break;
+        case '黔南州':
+          adName = '黔南布依族苗族自治州';
+          break;
+      }
       let that = this;
+      this.map.clearMap();
       AMap.plugin(['AMap.DistrictSearch'], function () {
         var district = new AMap.DistrictSearch({
           // 返回行政区边界坐标等具体信息
@@ -162,59 +234,41 @@ export default {
             new AMap.LngLat(360, -90, true),
             new AMap.LngLat(360, 90, true)
           ];
-          var holes = result.districtList[0].boundaries;
-          var pathArray = [outer];
-          pathArray.push.apply(pathArray, holes);
-          var polygon = new AMap.Polygon({
-            pathL: pathArray,
-            strokeColor: '#00eeff',
-            strokeWeight: 1,
-            fillColor: '#0c1b05', // 遮罩背景色
-            fillOpacity: 0.8
-          });
-          polygon.setPath(pathArray);
-          that.map.add(polygon);
-          var cityArr = result.districtList[0].districtList;
-          for (let i = 0; i < cityArr.length; i++) {
-            let marker = new AMap.Text({
-              //c城市指示标
-              text: cityArr[i].name,
-              zIndex: 120,
-              anchor: 'center', // 设置文本标记锚点
-              cursor: 'pointer',
-              style: {
-                padding: '0px 6px',
-                color: '#fff',
-                border: 'none',
-                fontSize: '12px',
-                'background-color': '#E6810C'
-              },
-              position: [cityArr[i].center.lng, cityArr[i].center.lat]
+          if (result.districtList != undefined) {
+            var holes = result.districtList[0].boundaries;
+            var pathArray = [outer];
+            pathArray.push.apply(pathArray, holes);
+            that.polygon = new AMap.Polygon({
+              pathL: pathArray,
+              strokeColor: '#00eeff',
+              strokeWeight: 1,
+              fillColor: '#0c1b05', // 遮罩背景色
+              fillOpacity: 0.8
             });
-            that.map.add(marker);
+            that.polygon.setPath(pathArray);
+            that.map.add(that.polygon);
+            var cityArr = result.districtList[0].districtList;
+            for (let i = 0; i < cityArr.length; i++) {
+              that.cityMarker = new AMap.Text({
+                //c城市指示标
+                text: cityArr[i].name,
+                zIndex: 120,
+                anchor: 'center', // 设置文本标记锚点
+                cursor: 'pointer',
+                style: {
+                  padding: '0px 6px',
+                  color: '#fff',
+                  border: 'none',
+                  fontSize: '12px',
+                  'background-color': '#E6810C'
+                },
+                position: [cityArr[i].center.lng, cityArr[i].center.lat]
+              });
+              that.map.add(that.cityMarker);
+            }
+          } else {
+            return false;
           }
-
-          // AMap.plugin(['AMap.Object3DLayer', 'AMap.Object3D'], function () {
-          //   //object3Dlayer可以看做一个容器,用来放多个3d对象
-          //   let object3Dlayer = new AMap.Object3DLayer();
-          //   //把object3Dlayer添加到map对象中
-          //   that.map.add(object3Dlayer);
-          //   var wall = new AMap.Object3D.Wall({
-          //     //版块边界线
-          //     path: holes,
-          //     //墙的高度
-          //     height: 80000,
-          //     //墙的颜色
-          //     color: '#0dcdd1'
-          //   });
-          //   //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面  默认为front
-          //   wall.backOrFront = 'both';
-          //   // 是否允许使用透明颜色
-          //   wall.transparent = true;
-          //   //将wall放到object3Dlayer中
-          //   object3Dlayer.add(wall);
-          //   console.log('object3Dlayer');
-          // });
         });
       });
     },
@@ -260,6 +314,7 @@ export default {
 
         // that.getDistrict(adName, mapLevel);
         // this.switch2AreaNode(props.adcode);
+
         this.$store.dispatch('searchArea', {
           parentId: props.adcode,
           name: props.name,
@@ -290,9 +345,15 @@ export default {
             areaId: areaId
           });
         }
+
+        this.$store.dispatch('getSmallClassMap', {
+          cityId: this.$store.state.addr.selectCity.areaId,
+          countyId: this.$store.state.addr.selectDistrict.areaId,
+          townId: this.$store.state.addr.selectStreet.areaId
+        });
       });
-      this.switch2AreaNode(adcode);
       that.getDistrict(adName, mapLevel);
+      this.switch2AreaNode(adcode);
     },
     //根据Hover状态设置相关样式
     toggleHoverFeature(feature, isHover, position) {
@@ -358,13 +419,12 @@ export default {
       this.renderAreaPolygons(areaNode);
     },
     //切换区域
-    switch2AreaNode(adcode, mapLevel, selectCity, callback) {
-      if (
-        this.currentAreaNode &&
-        '' + this.currentAreaNode.getAdcode() === '' + adcode
-      ) {
-        return;
-      }
+    switch2AreaNode(adcode, mapLevel, selectCity, page, callback) {
+      // if (
+      //   this.currentAreaNode &&'' + this.currentAreaNode.getAdcode() === '' + adcode
+      // ) {
+      //   return;
+      // }
       this.loadAreaNode(adcode, (error, areaNode) => {
         if (error) {
           if (callback) {
@@ -372,7 +432,6 @@ export default {
           }
           return;
         }
-
         this.currentAreaNode = areaNode;
         if (
           mapLevel == 'city' ||
@@ -382,13 +441,15 @@ export default {
           this.setMarker();
         }
         if (mapLevel === 'district') {
-          if (this.$store.state.addr.page === 'forest') {
+          if (page === 'forest') {
             this.addForestPolygon();
-          } else if (this.$store.state.addr.page === 'treeSpecies') {
+            this.getForestSample(page);
+          } else if (page === 'treeSpecies') {
             this.addTreeSpeciesPolygon();
-          } else if (this.$store.state.addr.page === 'event') {
+            this.getRightScrollData(page);
+          } else if (page === 'event') {
             this.getEven();
-          } else if (this.$store.state.addr.page === 'economics') {
+          } else if (page === 'economics') {
             this.getEconomics();
           }
         }
@@ -410,23 +471,20 @@ export default {
           window.console.error(error);
           return;
         }
-
         if (callback) {
           callback(null, areaNode);
         }
       });
     },
-    getSmallClass() {
-      let that = this;
-      smallClassMap().then((res) => {
-        this.smallClassMapArr = res.rows;
-      });
-    },
+    // getSmallClass() {
+    //   let that = this;
+    //     this.smallClassMapArr = this.$store.state.addr.smallClassMapArr;
+    // },
     addForestPolygon() {
       let that = this;
       this.smallClassMapArr.forEach((item) => {
         let polyData = JSON.parse(item.mapInfo);
-        let polygon = new AMap.Polygon({
+        that.smallClassPolygon = new AMap.Polygon({
           map: this.map,
           path: polyData.features[0].geometry.coordinates,
           strokeOpacity: 1,
@@ -437,8 +495,7 @@ export default {
           cursor: 'pointer'
         });
         var lanLatArr = [];
-
-        polygon.on('mouseover', (e) => {
+        that.smallClassPolygon.on('mouseover', (e) => {
           lanLatArr = [e.lnglat.lng, e.lnglat.lat];
           let smallLabel =
             "<div class='info-small'>" +
@@ -474,46 +531,74 @@ export default {
             content: smallLabel //设置文本标注内容
           });
           this.smallMarker.setMap(this.map);
-          polygon.setOptions({
+          that.smallClassPolygon.setOptions({
             fillOpacity: 0.7,
             fillColor: 'yellow'
           });
         });
-        polygon.on('mouseout', () => {
+        that.smallClassPolygon.on('mouseout', () => {
           if (this.smallMarker) {
             this.smallMarker.setMap(null);
             this.smallMarker = null;
           }
-          polygon.setOptions({
+          that.smallClassPolygon.setOptions({
             fillOpacity: 0,
             fillColor: '#ccebc5'
           });
         });
-        this.map.add(polygon);
+        this.map.add(that.smallClassPolygon);
       });
-      forestSample().then((res) => {
+    },
+    // 获取样地数据
+    getForestSample(page) {
+      forestSample({
+        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];
-        let sampleIcon = new AMap.Icon({
-          size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
-          image: sampleMarker,
-          imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
-        });
-        res.rows.forEach((item) => {
-          let lngLat = [item.longitude, item.latitude];
-          var marker = new AMap.Marker({
+        this.setMarkers(res, sampleMarker, iconMeta, page);
+      });
+    },
+    // 添加地图标注（样地、树种）
+    setMarkers(res, sampleMarker, iconMeta, page) {
+      if (this.forestMarker) {
+        this.forestMarker.setMap(null);
+        this.forestMarker = null;
+      }
+      this.markerData = res;
+      let iconMarker = sampleMarker;
+      let iconMetaSet = iconMeta;
+      let sampleIcon = new AMap.Icon({
+        size: new AMap.Size(iconMetaSet[0], iconMetaSet[1]), // 图标尺寸
+        image: iconMarker,
+        imageSize: new AMap.Size(iconMetaSet[0], iconMetaSet[1]) // 根据所设置的大小拉伸或压缩图片
+      });
+      this.markerData.rows.forEach((item) => {
+        let lngLat = [item.longitude, item.latitude];
+        if (item.longitude && item.latitude) {
+          this.forestMarker = new AMap.Marker({
             position: lngLat,
             icon: sampleIcon,
             anchor: 'bottom-center',
             offset: new AMap.Pixel(0, 0)
           });
-          marker.setLabel({
-            direction: 'right',
-            offset: new AMap.Pixel(-8, 0), //设置文本标注偏移量
-            content: `<div style="color:#05dfff">${item.smallNumber}-${item.sampleNumber}</div>` //设置文本标注内容
-          });
-          marker.setMap(this.map);
-        });
+          if (page === 'forest') {
+            this.forestMarker.setLabel({
+              direction: 'right',
+              offset: new AMap.Pixel(-8, 0), //设置文本标注偏移量
+              content: `<div style="color:#05dfff">${item.smallNumber}-${item.sampleNumber}</div>` //设置文本标注内容
+            });
+          } else if (page === 'treeSpecies') {
+            this.forestMarker.setLabel({
+              direction: 'top',
+              offset: new AMap.Pixel(-2, 6), //设置文本标注偏移量
+              content: `<div class="label-treecomp">${item.treeComp}<span class="smallH">${item.smallNumber}</span></div>` //设置文本标注内容
+            });
+          }
+          this.map.add(this.forestMarker);
+        }
       });
     },
     addTreeSpeciesPolygon() {
@@ -535,6 +620,9 @@ export default {
           rightScrollData({ smallNumber: item.smallNumber }).then((res) => {
             this.treeCompData = res.rows[0];
           });
+          if (!this.treeCompData) {
+            return false;
+          }
           let treeCompData = this.treeCompData;
           let treeSmallLabel =
             "<div class='info-small'>" +
@@ -577,6 +665,7 @@ export default {
             offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
             content: treeSmallLabel //设置文本标注内容
           });
+
           this.smallMarker.setMap(this.map);
           polygon.setOptions({
             fillOpacity: 0.7,
@@ -595,33 +684,20 @@ export default {
         });
         this.map.add(polygon);
       });
-      rightScrollData().then((res) => {
+    },
+    // 获取小班列表
+    getRightScrollData(page) {
+      rightScrollData({
+        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];
-        let sampleIcon = new AMap.Icon({
-          size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
-          image: sampleMarker,
-          imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
-        });
-        res.rows.forEach((item) => {
-          let lngLat = [item.longitude, item.latitude];
-          if (item.longitude && item.latitude) {
-            var marker = new AMap.Marker({
-              position: lngLat,
-              icon: sampleIcon,
-              anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0)
-            });
-            marker.setLabel({
-              direction: 'top',
-              offset: new AMap.Pixel(-2, 6), //设置文本标注偏移量
-              content: `<div class="label-treecomp">${item.treeComp}<span class="smallH">${item.smallNumber}</span></div>` //设置文本标注内容
-            });
-            marker.setMap(this.map);
-          }
-        });
+        this.setMarkers(res, sampleMarker, iconMeta, page);
       });
     },
+    // 事件信息
     getEven() {
       alarmDataApi().then((res) => {
         res.data.forEach((item) => {
@@ -706,6 +782,7 @@ export default {
         });
       });
     },
+    // 林业经济
     getEconomics() {
       this.smallClassMapArr.forEach((item) => {
         let polyData = JSON.parse(item.mapInfo);

src/store/addr/index.js

@@ -1,13 +1,13 @@
 /*
  * @LastEditors: gcz
  */
-import { searchApi } from "@/service/index.js";
+import { searchApi,smallClassMap } from "@/service/index.js";
 const addr = {
   state: {
     page: "forest",
     parentId: "520000",
     parentName: '',
-    mapLevel: '',
+    mapLevel: 'province',
     vuexSelectCity: "",
     vuexSelectDistrict: "",
     vuexSelectStreet: "",
@@ -19,7 +19,9 @@ const addr = {
     vuexStreetList: [],
     selectCity: {},
     selectDistrict: {},
-    selectStreet: {}
+    selectStreet: {},
+    // 获取小班边界地图
+    smallClassMapArr: []
   },
   mutations: {
     // 更改页面标识
@@ -55,6 +57,10 @@ const addr = {
         state.parentId = n.parentId;
         state.parentName = n.name;
         state.mapLevel = n.mapLevel;
+    },
+    // 获取小班边界
+    getSmallClassMapArr(state,calssmap) {
+      state.smallClassMapArr = calssmap
     }
   },
   actions: {
@@ -79,7 +85,12 @@ const addr = {
         commit("changeParentId", params)
       });
     },
-
+    // 获取小班边界
+    getSmallClassMap({ commit }, params = {}) {
+      smallClassMap(params).then((res) => {
+        commit("getSmallClassMapArr",res)
+      });
+    }
   }
 };
 

src/store/getters.js

@@ -10,6 +10,7 @@ const getters = {
     selectCity: state => state.addr.selectCity,
     selectDistrict: state => state.addr.selectDistrict,
     selectStreet: state => state.addr.selectStreet,
+    smallClassMapArr: state => state.addr.smallClassMapArr
 }
 
 export default getters

src/utils/request.js

@@ -25,7 +25,7 @@ const defaultOptions = {
         Accept: 'application/json',
         'Content-Type': contentTypes.json,
     },
-    timeout: 15000,
+    timeout: 30000,
 }
 
 export const callApi = ({

src/views/index.vue

@@ -1,305 +1,357 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
-  <div class=''>
-    <Map></Map> 
+  <div class>
+    <Map></Map>
     <Header></Header>
 
     <section class="nav-wrap">
-      <div class="nav-item" :class="{active:(index+1)==page}" v-for="(item,index) in navList" @click="navClick(index+1)" :key="index">
-        {{item.text}}
-      </div>
+      <div
+        class="nav-item"
+        :class="{active:(index+1)==page}"
+        v-for="(item,index) in navList"
+        @click="navClick(index+1)"
+        :key="index"
+      >{{item.text}}</div>
     </section>
 
     <Alarm v-if="page==6&&alarmData.length>=1" :data="alarmData" />
 
-    <section class="left-wrap " v-if="$store.state.addr.page=='forest'">
-      <Numerical class="" :data="page1numerical" />
-      <MyEcharts class="blur-wrap u-p-t" mid="page1Char1" ref="page1Char1" :option="page1Char1" height="30vh" style="padding-left:20px" />
-      <MyEcharts class="blur-wrap u-m-t u-p-t" mid="page1Char2" ref="page1Char2" :option="page1Char2" height="30vh" style="padding-left:20px" />
+    <section class="left-wrap" v-if="$store.state.addr.page=='forest'">
+      <Numerical class :data="page1numerical" />
+      <MyEcharts
+        class="blur-wrap u-p-t"
+        mid="page1Char1"
+        ref="page1Char1"
+        :option="page1Char1"
+        height="30vh"
+        style="padding-left:20px"
+      />
+      <MyEcharts
+        class="blur-wrap u-m-t u-p-t"
+        mid="page1Char2"
+        ref="page1Char2"
+        :option="page1Char2"
+        height="30vh"
+        style="padding-left:20px"
+      />
     </section>
 
-    <section class="left-wrap " v-if="$store.state.addr.page=='treeSpecies'">
-      <MyEcharts class="blur-wrap u-p-t" mid="page2Char1" :option="page2Char1" ref="page2Char1" height="30vh" />
-      <MyEcharts class="blur-wrap u-m-t u-p-t" mid="page2Char2" :option="page2Char2" ref="page2Char2" height="40vh" />
+    <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
+      <MyEcharts
+        class="blur-wrap u-p-t"
+        mid="page2Char1"
+        :option="page2Char1"
+        ref="page2Char1"
+        height="30vh"
+      />
+      <MyEcharts
+        class="blur-wrap u-m-t u-p-t"
+        mid="page2Char2"
+        :option="page2Char2"
+        ref="page2Char2"
+        height="40vh"
+      />
     </section>
 
     <!-- 林业经济 -->
-    <section class="left-wrap " v-if="$store.state.addr.page=='economics'">
+    <section class="left-wrap" v-if="$store.state.addr.page=='economics'">
       <Typeslide :data="typeSlideData" />
-      <Numerical class="" :data="page5numerical" />
-      <MyEcharts class="blur-wrap u-p-t" mid="page5Char1" ref="page5Char1" :option="page5Char1" height="30vh" />
-      <MyEcharts class="blur-wrap u-m-t u-p-t" mid="page5Char2" ref="page5Char2" :option="page5Char2" height="30vh" />
+      <Numerical class :data="page5numerical" />
+      <MyEcharts
+        class="blur-wrap u-p-t"
+        mid="page5Char1"
+        ref="page5Char1"
+        :option="page5Char1"
+        height="30vh"
+      />
+      <MyEcharts
+        class="blur-wrap u-m-t u-p-t"
+        mid="page5Char2"
+        ref="page5Char2"
+        :option="page5Char2"
+        height="30vh"
+      />
     </section>
 
     <!-- 事件信息 -->
-    <section class="left-wrap " v-if="$store.state.addr.page=='event'">
-      <Numerical class="" :data="page6numerical" />
-      <MyEcharts class="blur-wrap u-p-t" mid="page6Char1" ref="page6Char1" :option="page6Char1" height="30vh" />
+    <section class="left-wrap" v-if="$store.state.addr.page=='event'">
+      <Numerical class :data="page6numerical" />
+      <MyEcharts
+        class="blur-wrap u-p-t"
+        mid="page6Char1"
+        ref="page6Char1"
+        :option="page6Char1"
+        height="30vh"
+      />
     </section>
-    
+
     <section class="right-wrap">
       <PickerAddr />
       <div class="xiaoban u-flex">
         <div class="title">小班查询：</div>
         <el-input v-model="xiaobaninput" placeholder="请输入小班号">
-        <i class="el-icon-search el-input__icon" slot="suffix" @click="xiaobansearch">
-        </i>
+          <i class="el-icon-search el-input__icon" slot="suffix" @click="xiaobansearch"></i>
         </el-input>
       </div>
       <section class="scroll-board-wrap blur-wrap">
-        <dv-scroll-board :key="scrollBoardKey" class="scroll-board-01" :config="scrollBoardConfig" ref="scrollBoard" @click="scrollBoardClick" :style="scrollBoardStyle" />
+        <dv-scroll-board
+          :key="scrollBoardKey"
+          class="scroll-board-01"
+          :config="scrollBoardConfig"
+          ref="scrollBoard"
+          @click="scrollBoardClick"
+          :style="scrollBoardStyle"
+        />
       </section>
     </section>
-    
-
-
   </div>
 </template>
 
 <script>
-  import Map from "../components/amap.vue";
-  import Header from "../components/header";
-  import MyEcharts from "../components/echarts";
-  import Numerical from "../components/numerical";
-  import Alarm from "../components/alarm";
-  import PickerAddr from "../components/pickerAddr";
-  import Typeslide from "../components/typeslide";
-
-  import { Message } from 'element-ui';
-
-  import { debounce } from '@/utils/mdebounce';
-  import {sliceArray} from '@/utils/sliceArray';
+import Map from '../components/amap.vue';
+import Header from '../components/header';
+import MyEcharts from '../components/echarts';
+import Numerical from '../components/numerical';
+import Alarm from '../components/alarm';
+import PickerAddr from '../components/pickerAddr';
+import Typeslide from '../components/typeslide';
 
-  import {
-    page1numerical,
-    page1echarts01,
-    page1echarts02,
-    rightScrollData,
-    alarmDataApi,
-    page2echarts01,
-    page2echarts02,
-    page5numerical,
-    typeSlideApi,
-    page5echarts01,
-    page5echarts02,
-    page6numerical,
-    page6echarts01,
-  } from "../service/index";
+import { Message } from 'element-ui';
 
-  import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
-  import page1Char1Schema from '../dataSchema/page1Char1Schema';
-  import page1Char2Schema from '../dataSchema/page1Char2Schema';
-  import page2Char1Schema from '../dataSchema/page2Char1Schema';
-  import page2Char2Schema from '../dataSchema/page2Char2Schema';
-  import page6Char1Schema from '../dataSchema/page6Char1Schema';
-  
-  
+import { debounce } from '@/utils/mdebounce';
+import { sliceArray } from '@/utils/sliceArray';
 
-  // import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
-  export default {
-    name: '',
-    components: {
-      Map,
-      Header,
-      MyEcharts,
-      Numerical,
-      Alarm,
-      PickerAddr,
-      Typeslide
-    },
-    data () {
-      return {
-        page:1,
-        // addrOptions: regionDataPlus,
-        addrSelectedOptions: ['520000',''],
-        navList:[
-          {text:'森林资源',en:'forest'},
-          {text:'林木结构',en:'treeSpecies'},
-          {text:'碳汇管理',en:'sink'},
-          {text:'林下经济',en:'economics'},
-          {text:'土地流转',en:'circulation'},
-          {text:'事件信息',en:'event'},
-        ],
-        scrollBoardKey:Date.now(),
-        scrollBoardStyle:{
-          width:'100%',
-          height:'72vh'
+import {
+  page1numerical,
+  page1echarts01,
+  page1echarts02,
+  rightScrollData,
+  alarmDataApi,
+  page2echarts01,
+  page2echarts02,
+  page5numerical,
+  typeSlideApi,
+  page5echarts01,
+  page5echarts02,
+  page6numerical,
+  page6echarts01,
+  smallClassMap
+} from '../service/index';
 
-        },
-        scrollBoardConfig:scrollBoardSchema,
-        page1numerical:[
-          {name:'蓄积量',number:'2309',unit:'立方米'},
-          {name:'占地面积',number:'55.4',unit:'万亩'}
-        ],
-        alarmData:[
-          // {msg:'三都林场01小班于15：00：00发现火情，请尽快处理！'},
-          // {msg:'测试1！'},
-          // {msg:'测试22222222！'},
-        ],
-        page1Char1:page1Char1Schema,
-        page1Char2:page1Char2Schema,
-        page2Char1:page2Char1Schema,
-        page2Char2:page2Char2Schema,
-        page5numerical:[],
-        typeSlideData:[],
-        page5Char1:{},
-        page5Char2:{},
-        page6numerical:[],
-        page6Char1:page6Char1Schema,
-        xiaobaninput:'',
+import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
+import page1Char1Schema from '../dataSchema/page1Char1Schema';
+import page1Char2Schema from '../dataSchema/page1Char2Schema';
+import page2Char1Schema from '../dataSchema/page2Char1Schema';
+import page2Char2Schema from '../dataSchema/page2Char2Schema';
+import page6Char1Schema from '../dataSchema/page6Char1Schema';
 
-        
-      };
+// import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
+export default {
+  name: '',
+  components: {
+    Map,
+    Header,
+    MyEcharts,
+    Numerical,
+    Alarm,
+    PickerAddr,
+    Typeslide
+  },
+  data() {
+    return {
+      page: 1,
+      // addrOptions: regionDataPlus,
+      addrSelectedOptions: ['520000', ''],
+      navList: [
+        { text: '森林资源', en: 'forest' },
+        { text: '林木结构', en: 'treeSpecies' },
+        { text: '碳汇管理', en: 'sink' },
+        { text: '林下经济', en: 'economics' },
+        { text: '土地流转', en: 'circulation' },
+        { text: '事件信息', en: 'event' }
+      ],
+      scrollBoardKey: Date.now(),
+      scrollBoardStyle: {
+        width: '100%',
+        height: '72vh'
+      },
+      scrollBoardConfig: scrollBoardSchema,
+      page1numerical: [
+        { name: '蓄积量', number: '2309', unit: '立方米' },
+        { name: '占地面积', number: '55.4', unit: '万亩' }
+      ],
+      alarmData: [
+        // {msg:'三都林场01小班于15：00：00发现火情，请尽快处理！'},
+        // {msg:'测试1！'},
+        // {msg:'测试22222222！'},
+      ],
+      page1Char1: page1Char1Schema,
+      page1Char2: page1Char2Schema,
+      page2Char1: page2Char1Schema,
+      page2Char2: page2Char2Schema,
+      page5numerical: [],
+      typeSlideData: [],
+      page5Char1: {},
+      page5Char2: {},
+      page6numerical: [],
+      page6Char1: page6Char1Schema,
+      xiaobaninput: ''
+    };
+  },
+  created() {},
+  mounted() {
+    this.getPageData();
+    this.getRightScrollData();
+    setInterval(() => {
+      this.getPageData();
+    }, 60000);
+  },
+  watch: {
+    xiaobaninput: {
+      handler: function () {
+        debounce(this.xiaobansearch, 500, false);
+      }
     },
-    created(){
+    '$store.state.addr.selectCity'(val) {
+      // debounce(this.getPageData(), 1000, false)
+      this.getPageData();
     },
-    mounted(){
+    '$store.state.addr.selectDistrict'(val) {
       this.getPageData();
-      this.getRightScrollData();
-      setInterval(() => {
-        this.getPageData();
-      }, 60000);      
     },
-    watch: {
-      xiaobaninput: {
-          handler: function() {
-           debounce(this.xiaobansearch, 500, false)
-          }
-      },
-      '$store.state.addr.selectCity'(val) {
-        // debounce(this.getPageData(), 1000, false)
-        this.getPageData();
-         
-      },
-      '$store.state.addr.selectDistrict'(val) {
-        this.getPageData();
-         
-      },
-      '$store.state.addr.selectStreet'(val) {
-        this.getPageData();
-         
-      },
+    '$store.state.addr.selectStreet'(val) {
+      this.getPageData();
+    }
+  },
+  methods: {
+    addrChange(value) {
+      console.log('addrChange', value);
     },
-    methods: {
-      addrChange(value){
-        console.log('addrChange',value);
-      },
-      navClick(index){
-        this.$store.commit('changePage',this.navList[index-1].en);
-        console.log('this.navList[index-1].en',this.navList[index-1].en);
-        this.page = index;
-        console.log('index',index);
-        if(this.$store.state.addr.page=='sink'||this.$store.state.addr.page=='circulation'){
-           Message('暂未开放！')
-          return
-        }
+    navClick(index) {
+      this.$store.commit('changePage', this.navList[index - 1].en);
+      console.log('this.navList[index-1].en', this.navList[index - 1].en);
+      this.page = index;
+      console.log('index', index);
+      if (
+        this.$store.state.addr.page == 'sink' ||
+        this.$store.state.addr.page == 'circulation'
+      ) {
+        Message('暂未开放！');
+        return;
+      }
 
-        // 切换专题时，重置区域
-        // this.$store.dispatch('searchArea', {
-        //   parentId: '520000',
-        //   name: '贵州省',
-        //   mapLevel: 'province'
-        // });
-        
-        this.getPageData();
-      },
-      getPageData(){
-        debounce(this.debounceGetData, 1000, true)
-      },
-      debounceGetData(){
-        console.log('page',this.$store.state.addr.page);
-        // {text:'森林资源',en:'forest'},
-        //   {text:'林木结构',en:'treeSpecies'},
-        //   {text:'碳汇管理',en:'sink'},
-        //   {text:'林下经济',en:'economics'},
-        //   {text:'土地流转',en:'circulation'},
-        //   {text:'事件信息',en:'event'},
-        if(this.$store.state.addr.page=='forest'){
-          this.getPage1numerical();
-          this.getPage1echarts01();
-          this.getPage1echarts02();
-          this.getRightScrollData();
-        }else if(this.$store.state.addr.page=='treeSpecies'){
-          this.getPage2echarts01();
-          this.getPage2echarts02();
-          this.getRightScrollData();
-        }else if(this.$store.state.addr.page=='economics'){
-          this.getPage5numerical();
-          this.getTypeSlideData();
-          this.getPage5echarts01();
-          this.getPage5echarts02();
-          this.getRightScrollData();
-        }
-        else if(this.$store.state.addr.page=='event'){
-          this.getPage6numerical();
-          this.getPage6echarts01();
-          this.getAlarmData();
-          this.getRightScrollData();
-        }
-      },
-      getPage1numerical(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.vuexSelectStreet.areaId,
-        }
-        page1numerical(param).then(res=>{
+      // 切换专题时，重置区域
+      // this.$store.dispatch('searchArea', {
+      //   parentId: '520000',
+      //   name: '贵州省',
+      //   mapLevel: 'province'
+      // });
+
+      this.getPageData();
+    },
+    getPageData() {
+      debounce(this.debounceGetData, 1000, true);
+    },
+    debounceGetData() {
+      console.log('page', this.$store.state.addr.page);
+      // {text:'森林资源',en:'forest'},
+      //   {text:'林木结构',en:'treeSpecies'},
+      //   {text:'碳汇管理',en:'sink'},
+      //   {text:'林下经济',en:'economics'},
+      //   {text:'土地流转',en:'circulation'},
+      //   {text:'事件信息',en:'event'},
+      if (this.$store.state.addr.page == 'forest') {
+        this.getPage1numerical();
+        this.getPage1echarts01();
+        this.getPage1echarts02();
+        this.getRightScrollData();
+      } else if (this.$store.state.addr.page == 'treeSpecies') {
+        this.getPage2echarts01();
+        this.getPage2echarts02();
+        this.getRightScrollData();
+      } else if (this.$store.state.addr.page == 'economics') {
+        this.getPage5numerical();
+        this.getTypeSlideData();
+        this.getPage5echarts01();
+        this.getPage5echarts02();
+        this.getRightScrollData();
+      } else if (this.$store.state.addr.page == 'event') {
+        this.getPage6numerical();
+        this.getPage6echarts01();
+        this.getAlarmData();
+        this.getRightScrollData();
+      }
+    },
+    getPage1numerical() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.vuexSelectStreet.areaId
+      };
+      page1numerical(param)
+        .then((res) => {
           // console.log('res',res);
           this.page1numerical = res.data;
-        }).catch(err=>{
-          console.log('echarts01 err',err);
         })
-      },
-      getPage1echarts01(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.vuexSelectStreet.areaId,
-        }
-        // console.log('cityId',param.cityId);
-        page1echarts01(param).then(res=>{
-          this.page1Char1.xAxis.data = res.data.map(item => {
-            return item.name
-          })
-          this.page1Char1.series[0].data = res.data.map(item => {
-            return item.number
-          })
+        .catch((err) => {
+          console.log('echarts01 err', err);
+        });
+    },
+    getPage1echarts01() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.vuexSelectStreet.areaId
+      };
+      // console.log('cityId',param.cityId);
+      page1echarts01(param)
+        .then((res) => {
+          this.page1Char1.xAxis.data = res.data.map((item) => {
+            return item.name;
+          });
+          this.page1Char1.series[0].data = res.data.map((item) => {
+            return item.number;
+          });
           let charUuid = this.$refs.page1Char1.mid;
-          this.$refs.page1Char1.intChar(charUuid)
-        }).catch(err=>{
-          console.log('getPage1echarts01 err',err);
+          this.$refs.page1Char1.intChar(charUuid);
         })
-      },
-      getPage1echarts02(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        // console.log('cityId',param.cityId);
-        page1echarts02(param).then(res=>{
-          this.page1Char2.xAxis.data = res.data.map(item => {
-            return item.name
-          })
-          this.page1Char2.series[0].data = res.data.map(item => {
-            return item.number
-          })
+        .catch((err) => {
+          console.log('getPage1echarts01 err', err);
+        });
+    },
+    getPage1echarts02() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      // console.log('cityId',param.cityId);
+      page1echarts02(param)
+        .then((res) => {
+          this.page1Char2.xAxis.data = res.data.map((item) => {
+            return item.name;
+          });
+          this.page1Char2.series[0].data = res.data.map((item) => {
+            return item.number;
+          });
           let charUuid = this.$refs.page1Char2.mid;
-          this.$refs.page1Char2.intChar(charUuid)
-        }).catch(err=>{
-          console.log('getPage1echarts02 err',err);
+          this.$refs.page1Char2.intChar(charUuid);
         })
-      },
-      getRightScrollData(){
-        let param = {
-          smallNumber : this.xiaobaninput,
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        rightScrollData(param).then(res=>{
+        .catch((err) => {
+          console.log('getPage1echarts02 err', err);
+        });
+    },
+    getRightScrollData() {
+      let param = {
+        smallNumber: this.xiaobaninput,
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      rightScrollData(param)
+        .then((res) => {
           // console.log('res',res.rows.length);
           // console.log('this.scrollBoardConfig',this.scrollBoardConfig);
 
@@ -308,86 +360,95 @@
           //   this.scrollBoardConfig.rowNum = 5;
           //   this.scrollBoardStyle.height = '25vh'
           // }
-          
+
           this.scrollBoardConfig.data = [];
-          res.rows.forEach(element => {
-            this.scrollBoardConfig.data.push([element.smallNumber,element.treeComp,element.perAcreStock,element.landArea])            
+          res.rows.forEach((element) => {
+            this.scrollBoardConfig.data.push([
+              element.smallNumber,
+              element.treeComp,
+              element.perAcreStock,
+              element.landArea
+            ]);
           });
-          this.scrollBoardKey= Date.now();
+          this.scrollBoardKey = Date.now();
           this.$refs.scrollBoard.updateRows(this.scrollBoardConfig.data);
 
-          
           // console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
           // this.scrollBoardConfig = res.data;
-        }).catch(err=>{
-          console.log('echarts01 err',err);
         })
-      },
-      getAlarmData(){
-        alarmDataApi().then(res=>{
+        .catch((err) => {
+          console.log('echarts01 err', err);
+        });
+    },
+    getAlarmData() {
+      alarmDataApi()
+        .then((res) => {
           // console.log('this.page',this.page);
           // console.log('res',res);
           this.alarmData = res.data;
           // console.log('alarmData.length',this.alarmData.length);
-        }).catch(err=>{
-          console.log('echarts01 err',err);
         })
-      },
-
-      getPage2echarts01(){
-        let param = {
-          smallNumber:this.xiaobaninput,
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        page2echarts01(param).then(res=>{
+        .catch((err) => {
+          console.log('echarts01 err', err);
+        });
+    },
+    getPage2echarts01() {
+      let param = {
+        smallNumber: this.xiaobaninput,
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      page2echarts01(param)
+        .then((res) => {
           // console.log('res',res);
           this.page2Char1.series[0].data = [];
           this.page2Char1.series[0].data = res.data;
           let charUuid = this.$refs.page2Char1.mid;
-            this.$refs.page2Char1.intChar(charUuid)
-        }).catch(err=>{
-          console.log('getPage2echarts01 err',err);
+          this.$refs.page2Char1.intChar(charUuid);
         })
-      },
-      getPage2echarts02(){
-        let param = {
-          smallNumber:this.xiaobaninput,
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        page2echarts02(param).then(res=>{
+        .catch((err) => {
+          console.log('getPage2echarts01 err', err);
+        });
+    },
+    getPage2echarts02() {
+      let param = {
+        smallNumber: this.xiaobaninput,
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      page2echarts02(param)
+        .then((res) => {
           // console.log('res',res);
           // this.page2Char2 = res.data;
           //  console.log('this.page2Char2.series', this.page2Char2.series);
-          
+
           this.page2Char2.xAxis.data = [];
           this.page2Char2.series = [];
 
-          const rows  = res.rows;
+          const rows = res.rows;
           // console.log(rows)
           // x坐标
-           this.page2Char2.xAxis.data = rows.map(item => {
-            return item.smallNumber
-          })
+          this.page2Char2.xAxis.data = rows.map((item) => {
+            return item.smallNumber;
+          });
           // console.log('x坐标',  this.page2Char2.xAxis.data)
           // 获取所有项
-          let seriesList = rows.map(item => {
-            return item.treeList
-          })
+          let seriesList = rows.map((item) => {
+            return item.treeList;
+          });
           // 数组扁平化
-          seriesList = seriesList.flat()
+          seriesList = seriesList.flat();
           // 去重
           let obj = {};
-              seriesList = seriesList.reduce((newArr, next) => {
-                obj[next.name] ? "" : (obj[next.name] = true && newArr.push(next));
-                return newArr;
-              }, []);
-              seriesList = seriesList.map(item => {
-                return {
-                  name : item.name,
+          seriesList = seriesList.reduce((newArr, next) => {
+            obj[next.name] ? '' : (obj[next.name] = true && newArr.push(next));
+            return newArr;
+          }, []);
+          seriesList = seriesList.map((item) => {
+            return {
+              name: item.name,
               type: 'bar',
               stack: 'total',
               label: {
@@ -396,109 +457,121 @@
               emphasis: {
                 focus: 'series'
               },
-                  data: []
-                }
-              })
-              // console.log(seriesList)
-              rows.forEach(item => {
+              data: []
+            };
+          });
+          // console.log(seriesList)
+          rows.forEach((item) => {
             seriesList.forEach((jtem, index) => {
-              let num = 0
-              item.treeList.map(ktem => {
-                if (ktem.name.indexOf(jtem.name) > (-1)) {
-                  num = ktem.value
+              let num = 0;
+              item.treeList.map((ktem) => {
+                if (ktem.name.indexOf(jtem.name) > -1) {
+                  num = ktem.value;
                 }
-              })
-              seriesList[index].data.push(num)
-            })
-          })
+              });
+              seriesList[index].data.push(num);
+            });
+          });
           // console.log(seriesList)
           this.page2Char2.series = seriesList;
 
           let charUuid = this.$refs.page2Char2.mid;
-          this.$refs.page2Char2.intChar(charUuid)
-        }).catch(err=>{
-          console.log('getPage2echarts02 err',err);
+          this.$refs.page2Char2.intChar(charUuid);
         })
-      },
-      
-      getPage5numerical(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        page5numerical(param).then(res=>{
+        .catch((err) => {
+          console.log('getPage2echarts02 err', err);
+        });
+    },
+
+    getPage5numerical() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      page5numerical(param)
+        .then((res) => {
           // console.log('res',res);
           this.page5numerical = res.data;
-        }).catch(err=>{
-          console.log('echarts01 err',err);
         })
-      },
-      getTypeSlideData(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        typeSlideApi(param).then(res=>{
-          this.typeSlideData = sliceArray(res.data,3);
+        .catch((err) => {
+          console.log('echarts01 err', err);
+        });
+    },
+    getTypeSlideData() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      typeSlideApi(param)
+        .then((res) => {
+          this.typeSlideData = sliceArray(res.data, 3);
           // console.log(' this.typeSlideData', this.typeSlideData);
-        }).catch(err=>{
-          console.log('getTypeSlideData err',err);
         })
-      },
-       getPage5echarts01(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        page5echarts01(param).then(res=>{
+        .catch((err) => {
+          console.log('getTypeSlideData err', err);
+        });
+    },
+    getPage5echarts01() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      page5echarts01(param)
+        .then((res) => {
           // console.log('res',res);
           this.page5Char1 = res.data;
           let charUuid = this.$refs.page5Char1.mid;
-          this.$refs.page5Char1.intChar(charUuid)
-        }).catch(err=>{
-          console.log('getPage5echarts01 err',err);
+          this.$refs.page5Char1.intChar(charUuid);
         })
-      },
-      getPage5echarts02(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        page5echarts02(param).then(res=>{
+        .catch((err) => {
+          console.log('getPage5echarts01 err', err);
+        });
+    },
+    getPage5echarts02() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      page5echarts02(param)
+        .then((res) => {
           // console.log('res',res);
           this.page5Char2 = res.data;
           let charUuid = this.$refs.page5Char2.mid;
-          this.$refs.page5Char1.intChar(charUuid)
-        }).catch(err=>{
-          console.log('getPage5echarts02 err',err);
+          this.$refs.page5Char1.intChar(charUuid);
         })
-      },
+        .catch((err) => {
+          console.log('getPage5echarts02 err', err);
+        });
+    },
 
-      getPage6numerical(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        //第一屏统计
-        page6numerical(param).then(res=>{
+    getPage6numerical() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      //第一屏统计
+      page6numerical(param)
+        .then((res) => {
           // console.log('res',res);
           this.page6numerical = res.data;
-        }).catch(err=>{
-          console.log('getPage6numerical err',err);
         })
-      },
-       getPage6echarts01(){
-        let param = {
-          cityId:this.$store.state.addr.selectCity.areaId,
-          countyId:this.$store.state.addr.selectDistrict.areaId,
-          townId:this.$store.state.addr.selectStreet.areaId,
-        }
-        page6echarts01(param).then(res=>{
+        .catch((err) => {
+          console.log('getPage6numerical err', err);
+        });
+    },
+    getPage6echarts01() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      page6echarts01(param)
+        .then((res) => {
           // console.log('res',res);
           // this.page6Char1 = res.data;
 
@@ -506,31 +579,32 @@
           this.page6Char1.series[0].data = [];
           this.page6Char1.series[1].data = [];
           this.page6Char1.series[2].data = [];
-          res.data&&res.data.forEach(element=>{
-            this.page6Char1.xAxis[0].data.push(element.villageName);
-            this.page6Char1.series[0].data.push(element.fireCount);
-            this.page6Char1.series[1].data.push(element.cutCount);
-            this.page6Char1.series[2].data.push(element.pestCount);
-          })
+          res.data &&
+            res.data.forEach((element) => {
+              this.page6Char1.xAxis[0].data.push(element.villageName);
+              this.page6Char1.series[0].data.push(element.fireCount);
+              this.page6Char1.series[1].data.push(element.cutCount);
+              this.page6Char1.series[2].data.push(element.pestCount);
+            });
 
           let charUuid = this.$refs.page6Char1.mid;
-          this.$refs.page6Char1.intChar(charUuid)
-        }).catch(err=>{
-          console.log('getPage6echarts01 err',err);
+          this.$refs.page6Char1.intChar(charUuid);
         })
-      },
-
-      xiaobansearch(){
-        // console.log('xiaobansearch');
-        this.getRightScrollData();
-        this.getPageData()
-      },
-      scrollBoardClick(e){
-        console.log('scrollBoardClick',e);
-      }
+        .catch((err) => {
+          console.log('getPage6echarts01 err', err);
+        });
+    },
 
+    xiaobansearch() {
+      // console.log('xiaobansearch');
+      this.getRightScrollData();
+      this.getPageData();
     },
+    scrollBoardClick(e) {
+      console.log('scrollBoardClick', e);
+    }
   }
+};
 </script>
 
 <style lang='scss' scoped>