点击小班定位地图

src/components/amap.vue

@@ -128,6 +128,12 @@ export default {
           }
         }
       }
+    },
+    '$store.state.addr.smallClassSearch': {
+      handler(val) {
+        console.log(val);
+        
+      }
     }
   },
   computed: {

src/store/addr/index.js

@@ -22,7 +22,9 @@ const addr = {
     selectStreet: {},
     selectAddr: '贵州省',
     // 获取小班边界地图
-    smallClassMapArr: []
+    smallClassMapArr: [],
+    // 根据小班号查询搜索小班
+    smallClassSearch: [],
   },
   mutations: {
     // 更改页面标识
@@ -77,6 +79,9 @@ const addr = {
       }
       // state.selectAddr = streetData;
     },
+    changeSearchSmallClass(state, searchData) {
+      state.smallClassSearch = searchData;
+    },
     // 改变省市县级联选择获取数据
     changeParentId(state, n) {
         state.parentId = n.parentId;

src/store/getters.js

@@ -11,7 +11,8 @@ const getters = {
     selectDistrict: state => state.addr.selectDistrict,
     selectStreet: state => state.addr.selectStreet,
     selectAddr: state => state.addr.selectAddr,
-    smallClassMapArr: state => state.addr.smallClassMapArr
+    smallClassMapArr: state => state.addr.smallClassMapArr,
+    smallClassSearch: state => state.addr.smallClassSearch
 }
 
 export default getters

src/views/index.vue

@@ -1,121 +1,123 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
   <div class>
     <dv-full-screen-container>
-    <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>
-    </section>
-
-    <Alarm v-if="page==6&&alarmData.length>=1" :data="alarmData" />
-
-    <section class="left-wrap" v-if="$store.state.addr.page=='forest'">
-      <Numerical class="left-item" :data="page1numerical" />
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page1Char1"
-        ref="page1Char1"
-        :option="page1Char1"
-        style=""
-      />
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page1Char2"
-        ref="page1Char2"
-        :option="page1Char2"
-        style=""
-      />
-    </section>
-
-    <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
-      <Numerical class="left-item" :data="page2numerical" />
-      <!-- <MyEcharts
+      <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>
+      </section>
+
+      <Alarm v-if="page==6&&alarmData.length>=1" :data="alarmData" />
+
+      <section class="left-wrap" v-if="$store.state.addr.page=='forest'">
+        <Numerical class="left-item" :data="page1numerical" />
+        <MyEcharts
+          class="left-item chart-wrap"
+          mid="page1Char1"
+          ref="page1Char1"
+          :option="page1Char1"
+          style
+        />
+        <MyEcharts
+          class="left-item chart-wrap"
+          mid="page1Char2"
+          ref="page1Char2"
+          :option="page1Char2"
+          style
+        />
+      </section>
+
+      <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
+        <Numerical class="left-item" :data="page2numerical" />
+        <!-- <MyEcharts
         class="left-item chart-wrap"
         mid="page2Char1"
         :option="page2Char1"
         ref="page2Char1"
-      /> -->
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page2Char2"
-        :option="page2Char2"
-        ref="page2Char2"
-      />
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page2Char3"
-        :option="page2Char3"
-        ref="page2Char3"
-      />
-    </section>
-
-    <!-- 林业经济 -->
-    <section class="left-wrap" v-if="$store.state.addr.page=='economics'">
-      <!-- <Typeslide :data="typeSlideData" /> -->
-      <Numerical class="left-item" :data="page5numerical" />
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page5Char2"
-        ref="page5Char2"
-        :option="page5Char2"
-      />
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page5Char1"
-        ref="page5Char1"
-        :option="page5Char1"
-      />
-    </section>
-
-    <!-- 事件信息 -->
-    <section class="left-wrap" v-if="$store.state.addr.page=='event'">
-      <Numerical class="left-item" :data="page6numerical" />
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page6Char1"
-        ref="page6Char1"
-        :option="page6Char1"
-      />
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page6Char2"
-        ref="page6Char2"
-        :option="page6Char2"
-      />
-    </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>
-        </el-input>
-      </div>
-      <section class="scroll-board-wrap" :class="{close:showScrollBoard==true}">
-        <dv-scroll-board
-          :key="scrollBoardKey"
-          class="scroll-board-01"
-          :config="scrollBoardConfig"
-          ref="scrollBoard"
-          @click="scrollBoardClick"
-          :style="scrollBoardStyle"
+        />-->
+        <MyEcharts
+          class="left-item chart-wrap"
+          mid="page2Char2"
+          :option="page2Char2"
+          ref="page2Char2"
+        />
+        <MyEcharts
+          class="left-item chart-wrap"
+          mid="page2Char3"
+          :option="page2Char3"
+          ref="page2Char3"
+        />
+      </section>
+
+      <!-- 林业经济 -->
+      <section class="left-wrap" v-if="$store.state.addr.page=='economics'">
+        <!-- <Typeslide :data="typeSlideData" /> -->
+        <Numerical class="left-item" :data="page5numerical" />
+        <MyEcharts
+          class="left-item chart-wrap"
+          mid="page5Char2"
+          ref="page5Char2"
+          :option="page5Char2"
         />
-        <div class="scroll-board-tool" @click="toggleShowScrollBoard">
-          <div class="inner"><img src="../assets/img/jiantou.png" alt=""></div>
+        <MyEcharts
+          class="left-item chart-wrap"
+          mid="page5Char1"
+          ref="page5Char1"
+          :option="page5Char1"
+        />
+      </section>
+
+      <!-- 事件信息 -->
+      <section class="left-wrap" v-if="$store.state.addr.page=='event'">
+        <Numerical class="left-item" :data="page6numerical" />
+        <MyEcharts
+          class="left-item chart-wrap"
+          mid="page6Char1"
+          ref="page6Char1"
+          :option="page6Char1"
+        />
+        <MyEcharts
+          class="left-item chart-wrap"
+          mid="page6Char2"
+          ref="page6Char2"
+          :option="page6Char2"
+        />
+      </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>
+          </el-input>
         </div>
+        <section class="scroll-board-wrap" :class="{close:showScrollBoard==true}">
+          <dv-scroll-board
+            :key="scrollBoardKey"
+            class="scroll-board-01"
+            :config="scrollBoardConfig"
+            ref="scrollBoard"
+            @click="scrollBoardClick"
+            :style="scrollBoardStyle"
+          />
+          <div class="scroll-board-tool" @click="toggleShowScrollBoard">
+            <div class="inner">
+              <img src="../assets/img/jiantou.png" alt />
+            </div>
+          </div>
+        </section>
       </section>
-    </section>
     </dv-full-screen-container>
   </div>
 </template>
@@ -133,7 +135,7 @@ import { Message } from 'element-ui';
 
 import { debounce } from '@/utils/mdebounce';
 import { sliceArray } from '@/utils/sliceArray';
-
+import { mapMutations, mapState, mapGetters } from 'vuex';
 import {
   page1numerical,
   page1echarts01,
@@ -151,7 +153,7 @@ import {
   page6numerical,
   page6echarts01,
   page6echarts02,
-  smallClassMap
+  smallClassDetail
 } from '../service/index';
 
 import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
@@ -179,7 +181,7 @@ export default {
   },
   data() {
     return {
-      showScrollBoard:false,
+      showScrollBoard: false,
       page: 1,
       // addrOptions: regionDataPlus,
       addrSelectedOptions: ['520000', ''],
@@ -208,7 +210,7 @@ export default {
       ],
       page1Char1: page1Char1Schema,
       page1Char2: page1Char2Schema,
-      page2numerical:[],
+      page2numerical: [],
       page2Char1: page2Char1Schema,
       page2Char2: page2Char2Schema,
       page2Char3: page2Char3Schema,
@@ -248,6 +250,9 @@ export default {
     }
   },
   methods: {
+    ...mapMutations([
+      'changeSearchSmallClass'
+    ]),
     addrChange(value) {
       console.log('addrChange', value);
     },
@@ -340,8 +345,8 @@ export default {
             return item.number;
           });
           //数量过小时隐藏滚动
-          if(this.page1Char1.xAxis.data.length<=8){
-            this.page1Char1.dataZoom[0].show = false
+          if (this.page1Char1.xAxis.data.length <= 8) {
+            this.page1Char1.dataZoom[0].show = false;
           }
           let charUuid = this.$refs.page1Char1.mid;
           this.$refs.page1Char1.intChar(charUuid);
@@ -366,8 +371,8 @@ export default {
             return item.number;
           });
           //数量过小时隐藏滚动
-          if(this.page1Char2.xAxis.data.length<=8){
-            this.page1Char2.dataZoom[0].show = false
+          if (this.page1Char2.xAxis.data.length <= 8) {
+            this.page1Char2.dataZoom[0].show = false;
           }
           let charUuid = this.$refs.page1Char2.mid;
           this.$refs.page1Char2.intChar(charUuid);
@@ -399,8 +404,8 @@ export default {
             this.scrollBoardConfig.data.push([
               element.smallNumber,
               element.treeComp,
-              element.perAcreStock+'m³',
-              element.landArea+'亩'
+              element.perAcreStock + 'm³',
+              element.landArea + '亩'
             ]);
           });
           this.scrollBoardKey = Date.now();
@@ -430,7 +435,7 @@ export default {
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
         townId: this.$store.state.addr.vuexSelectStreet.areaId,
-        smallNumber:this.xiaobaninput
+        smallNumber: this.xiaobaninput
       };
       page2numerical(param)
         .then((res) => {
@@ -524,9 +529,9 @@ export default {
           // console.log(seriesList)
           this.page2Char2.series = seriesList;
 
-           //数量过小时隐藏滚动
-          if(this.page2Char2.xAxis.data.length<=8){
-            this.page2Char2.dataZoom[0].show = false
+          //数量过小时隐藏滚动
+          if (this.page2Char2.xAxis.data.length <= 8) {
+            this.page2Char2.dataZoom[0].show = false;
           }
 
           let charUuid = this.$refs.page2Char2.mid;
@@ -600,9 +605,9 @@ export default {
           // console.log(seriesList)
           this.page2Char3.series = seriesList;
 
-           //数量过小时隐藏滚动
-          if(this.page2Char3.xAxis.data.length<=8){
-            this.page2Char3.dataZoom[0].show = false
+          //数量过小时隐藏滚动
+          if (this.page2Char3.xAxis.data.length <= 8) {
+            this.page2Char3.dataZoom[0].show = false;
           }
 
           let charUuid = this.$refs.page2Char3.mid;
@@ -659,9 +664,9 @@ export default {
           this.page5Char1.series[0].data = res.data.map((item) => {
             return item.baseArea;
           });
-           //数量过小时隐藏滚动
-          if(this.page5Char1.xAxis.data.length<=8){
-            this.page5Char1.dataZoom[0].show = false
+          //数量过小时隐藏滚动
+          if (this.page5Char1.xAxis.data.length <= 8) {
+            this.page5Char1.dataZoom[0].show = false;
           }
           let charUuid = this.$refs.page5Char1.mid;
           this.$refs.page5Char1.intChar(charUuid);
@@ -687,8 +692,8 @@ export default {
             return item.number;
           });
           //数量过小时隐藏滚动
-          if(this.page5Char2.xAxis.data.length<=8){
-            this.page5Char2.dataZoom[0].show = false
+          if (this.page5Char2.xAxis.data.length <= 8) {
+            this.page5Char2.dataZoom[0].show = false;
           }
           let charUuid = this.$refs.page5Char2.mid;
           this.$refs.page5Char2.intChar(charUuid);
@@ -747,16 +752,16 @@ export default {
           this.page6Char1.xAxis.data = rows.map((item) => {
             return item.villageName;
           });
-          rows.forEach(element => {
+          rows.forEach((element) => {
             this.page6Char1.series[0].data.push(element.pestCount);
             this.page6Char1.series[1].data.push(element.cutCount);
-            this.page6Char1.series[2].data.push(element.fireCount);      
+            this.page6Char1.series[2].data.push(element.fireCount);
           });
           // console.log('x坐标',  this.page6Char1.xAxis.data)
-          
+
           //数量过小时隐藏滚动
-          if(this.page6Char1.xAxis.data.length<=8){
-            this.page6Char1.dataZoom[0].show = false
+          if (this.page6Char1.xAxis.data.length <= 8) {
+            this.page6Char1.dataZoom[0].show = false;
           }
           let charUuid = this.$refs.page6Char1.mid;
           this.$refs.page6Char1.intChar(charUuid);
@@ -765,41 +770,42 @@ export default {
           console.log('getPage6echarts01 err', err);
         });
     },
-    getPage6echarts02(){
+    getPage6echarts02() {
       let param = {
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
         townId: this.$store.state.addr.selectStreet.areaId
       };
-      
-      page6echarts02(param).then(res=>{
-        console.log('page6echarts02 res', res);
-        const rows = res.data;
-        // console.log(rows)
-        // x坐标
-        this.page6Char2.xAxis.data = [];
-        this.page6Char2.series[0].data = [];
-        this.page6Char2.series[1].data = [];
-        this.page6Char2.series[2].data = [];
-        this.page6Char2.xAxis.data = rows.map((item) => {
-          return item.month;
-        });
 
-        rows.forEach(element => {
-          // console.log('element',element.eventList);
-          this.page6Char2.series[0].data.push(element.eventList[0].value);
-          this.page6Char2.series[1].data.push(element.eventList[1].value);
-          this.page6Char2.series[2].data.push(element.eventList[2].value);      
-        });
+      page6echarts02(param)
+        .then((res) => {
+          console.log('page6echarts02 res', res);
+          const rows = res.data;
+          // console.log(rows)
+          // x坐标
+          this.page6Char2.xAxis.data = [];
+          this.page6Char2.series[0].data = [];
+          this.page6Char2.series[1].data = [];
+          this.page6Char2.series[2].data = [];
+          this.page6Char2.xAxis.data = rows.map((item) => {
+            return item.month;
+          });
 
-        console.log('this.page6Char2.series',this.page6Char2.series);
-          
-        let charUuid = this.$refs.page6Char2.mid;
-        this.$refs.page6Char2.intChar(charUuid);
+          rows.forEach((element) => {
+            // console.log('element',element.eventList);
+            this.page6Char2.series[0].data.push(element.eventList[0].value);
+            this.page6Char2.series[1].data.push(element.eventList[1].value);
+            this.page6Char2.series[2].data.push(element.eventList[2].value);
+          });
+
+          console.log('this.page6Char2.series', this.page6Char2.series);
 
-      }).catch((err) => {
+          let charUuid = this.$refs.page6Char2.mid;
+          this.$refs.page6Char2.intChar(charUuid);
+        })
+        .catch((err) => {
           console.log('page6echarts02 err', err);
-      });
+        });
     },
 
     xiaobansearch() {
@@ -808,9 +814,17 @@ export default {
       this.getPageData();
     },
     scrollBoardClick(e) {
-      console.log('scrollBoardClick', e);
+      let param = {
+        smallNumber: e.row[0],
+        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) => {
+        this.changeSearchSmallClass(res.rows[0])
+      });
     },
-    toggleShowScrollBoard(){
+    toggleShowScrollBoard() {
       this.showScrollBoard = !this.showScrollBoard;
     }
   }