基地查询，小班和基地的显示逻辑

src/dataSchema/scrollBaseListSchema.js

@@ -0,0 +1,18 @@
+/*
+ * @LastEditors: gcz
+ */
+/*
+ * @LastEditors: gcz
+ */
+let scrollBaseListSchema = {
+    header: ['基地', '作物', '占地面积'],
+    data: [],
+    headerBGC: 'rgba(8,238,255,.3)',//表头背景色
+    // headerBGC:'rgba(38,80,179,1)',//表头背景色
+    // oddRowBGC:'rgba(38,80,179,.5)',//奇数行背景色
+    oddRowBGC: 'transparent',//奇数行背景色
+    evenRowBGC: 'rgba(0,175,169,.15)',//偶数行背景色	
+    align: ['left', 'center', 'right'],//列对齐方式
+    rowNum: 14,//表行数	
+}
+export default scrollBaseListSchema

src/service/index.js

@@ -13,6 +13,14 @@ export const rightScrollData = (data) =>
         prefixUrl: 'api2',
     })
 
+//查询基地列表
+export const baseList = (data) =>
+    callApi({
+        url: 'finance/baseList',
+        data,
+        prefixUrl: 'api2',
+    })
+
 // 查询小班地图边界
 export const smallClassMap = (data) =>
     callApi({

src/views/index.vue

@@ -96,14 +96,29 @@
 
       <section class="right-wrap">
         <PickerAddr />
-        <div class="xiaoban u-flex">
+        <div v-if="showbase" class="xiaoban u-flex">
+          <div class="title">基地查询：</div>
+          <el-input v-model="baseinput" placeholder="请输入基地名称">
+            <i class="el-icon-search el-input__icon" slot="suffix" @click="basesearch"></i>
+          </el-input>
+        </div>
+        <div v-if="showxiaoban" 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}">
+        <section v-if="showxiaoban||showbase" class="scroll-board-wrap" :class="{close:showScrollBoard==true}">
           <dv-scroll-board
+            v-if="showbase"
+            :key="scrollBoardKey"
+            class="scroll-board-01"
+            :config="scrollBaseListConfig"
+            ref="scrollBaseList"
+            @click="scrollBaseListClick"
+          />
+          <dv-scroll-board
+            v-if="showxiaoban"
             :key="scrollBoardKey"
             class="scroll-board-01"
             :config="scrollBoardConfig"
@@ -141,6 +156,7 @@ import {
   page1echarts01,
   page1echarts02,
   rightScrollData,
+  baseList,
   alarmDataApi,
   page2numerical,
   page2echarts01,
@@ -157,6 +173,7 @@ import {
 } from '../service/index';
 
 import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
+import scrollBaseListSchema from '../dataSchema/scrollBaseListSchema';
 import page1Char1Schema from '../dataSchema/page1Char1Schema';
 import page1Char2Schema from '../dataSchema/page1Char2Schema';
 import page2Char1Schema from '../dataSchema/page2Char1Schema';
@@ -167,6 +184,7 @@ import page5Char2Schema from '../dataSchema/page5Char2Schema';
 import page6Char1Schema from '../dataSchema/page6Char1Schema';
 import page6Char2Schema from '../dataSchema/page6Char2Schema';
 
+
 //柱状图颜色
 let colorArr = ['rgb(2, 238, 255)','rgb(94, 229, 116)','rgb(255, 255, 0)'];
 
@@ -184,6 +202,8 @@ export default {
   },
   data() {
     return {
+      showxiaoban:true,
+      showbase:false,
       showScrollBoard: false,
       page: 1,
       // addrOptions: regionDataPlus,
@@ -202,6 +222,7 @@ export default {
         // height: '60vh'
       },
       scrollBoardConfig: scrollBoardSchema,
+      scrollBaseListConfig:scrollBaseListSchema,
       page1numerical: [
         { name: '蓄积量', number: '2309', unit: '立方米' },
         { name: '占地面积', number: '55.4', unit: '万亩' }
@@ -224,7 +245,8 @@ export default {
       page6numerical: [],
       page6Char1: page6Char1Schema,
       page6Char2: page6Char2Schema,
-      xiaobaninput: ''
+      xiaobaninput: '',
+      baseinput:''
     };
   },
   created() {},
@@ -272,6 +294,11 @@ export default {
         debounce(this.xiaobansearch, 500, false);
       }
     },
+    baseinput: {
+      handler: function () {
+        debounce(this.basesearch, 500, false);
+      }
+    },
     '$store.state.addr.selectCity'(val) {
       // debounce(this.getPageData(), 1000, false)
       this.getPageData();
@@ -295,6 +322,16 @@ export default {
       console.log('this.navList[index-1].en', this.navList[index - 1].en);
       this.page = index;
       console.log('index', index);
+      if(this.navList[index - 1].en=='economics'){
+        this.showbase = true;
+        this.showxiaoban = false;
+      }else if(this.navList[index - 1].en=='event'){
+        this.showbase = false;
+        this.showxiaoban = false;
+      }else{
+        this.showbase = false;
+        this.showxiaoban = true;
+      }
       if (
         this.$store.state.addr.page == 'sink' ||
         this.$store.state.addr.page == 'circulation'
@@ -339,7 +376,7 @@ export default {
         // this.getTypeSlideData();
         this.getPage5echarts01();
         this.getPage5echarts02();
-        this.getRightScrollData();
+        this.getBaseList();
       } else if (this.$store.state.addr.page == 'event') {
         this.getPage6numerical();
         this.getPage6echarts01();
@@ -456,6 +493,40 @@ export default {
           console.log('echarts01 err', err);
         });
     },
+    getBaseList(){
+      let param = {
+        baseName: this.baseinput,
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      baseList(param)
+        .then((res) => {
+          this.scrollBaseListConfig.data = [];
+          res.rows.forEach((element) => {
+            let cateInfoList = element.cateInfoList;
+            let cropName = '';
+            for (let index = 0; index < cateInfoList.length; index++) {
+              const item = cateInfoList[index];
+              cropName+=item.cropName + ',';
+            }
+            cropName = cropName.substring(0, cropName.lastIndexOf(","));
+            this.scrollBaseListConfig.data.push([
+              element.baseName,
+              cropName,
+              element.baseArea+ '亩',
+            ]);
+          });
+          this.scrollBoardKey = Date.now();
+          // this.$refs.scrollBaseList.updateRows(this.scrollBaseListConfig.data);
+
+          // console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
+          // this.scrollBoardConfig = res.data;
+        })
+        .catch((err) => {
+          console.log('echarts01 err', err);
+        });
+    },
     getAlarmData() {
       alarmDataApi()
         .then((res) => {
@@ -887,6 +958,11 @@ export default {
       this.getRightScrollData();
       this.getPageData();
     },
+    basesearch() {
+      // console.log('xiaobansearch');
+      this.getBaseList();
+      this.getPageData();
+    },
     scrollBoardClick(e) {
       console.log(e.row[0]);
       let param = {
@@ -900,6 +976,9 @@ export default {
         this.changeSearchSmallClass(res.rows[0])
       });
     },
+    scrollBaseListClick(e){
+      console.log('scrollBaseListClick',e);
+    },
     toggleShowScrollBoard() {
       this.showScrollBoard = !this.showScrollBoard;
     }