castgroup_bigscreen/src/views/index.vue

<!--
 * @Description: 
 * @Author: wangcc
 * @Date: 2022-07-06 15:56:45
 * @LastEditors: gcz
 * @LastEditTime: 2022-10-21 14:45:40
 * @FilePath: \ntbigscreen\src\views\index.vue
 * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
-->
<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" pageName="forest" />
        <MyEcharts
          class="left-item chart-wrap"
          mid="page1Char1"
          streetTitleText="各小班"
          ref="page1Char1"
          :option="page1Char1"
          style
        />
        <MyEcharts
          class="left-item chart-wrap"
          mid="page1Char2"
          streetTitleText="各小班"
          ref="page1Char2"
          :option="page1Char2"
          style
        />
      </section>

      <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
        <Numerical class="left-item" :data="page2numerical" pageName="treeSpecies" />
        <!-- <MyEcharts
        class="left-item chart-wrap"
        mid="page2Char1"
        :option="page2Char1"
        ref="page2Char1"
        />-->
        <MyEcharts
          class="left-item chart-wrap"
          mid="page2Char2"
          streetTitleText="各小班"
          :option="page2Char2"
          ref="page2Char2"
        />
        <MyEcharts
          class="left-item chart-wrap"
          mid="page2Char3"
          streetTitleText="各小班"
          :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" pageName="economics" />
        <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 event-page" 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"
        />-->
        <div class="left-item">
          <!-- <div class="ntitle">{{$store.state.addr.selectAddr}}事件发生记录</div> -->
          <div class="ntitle">
            <span
              v-if="$store.state.addr.mapLevel=='province'"
            >{{$store.state.addr.selectAddr}}各地州(市)事件发生记录</span>
            <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}各县事件发生记录</span>
            <span
              v-if="$store.state.addr.mapLevel=='district'"
            >{{$store.state.addr.selectAddr}}各乡镇事件发生记录</span>
            <span
              v-if="$store.state.addr.mapLevel=='street'"
            >{{$store.state.addr.selectAddr}}各村事件发生记录</span>
          </div>
          <dv-scroll-board
            :key="scrollBoardKey"
            class="scroll-event"
            :config="scrollEventConfig"
            ref="scrollBoard"
            @click="scrollEventClick"
            @mouseout="scrollEventOut"
          />
        </div>
      </section>

      <section class="right-wrap">
        <PickerAddr />
        <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
          v-if="showxiaoban||showbase"
          class="scroll-board-wrap"
          :class="{close:showScrollBoard==true}"
          @mouseout="scrollOut"
        >
          <dv-scroll-board
            v-if="showbase"
            :key="scrollBoardKey"
            class="scroll-board-01 scroll-base"
            :config="scrollBaseListConfig"
            ref="scrollBaseList"
            @click="scrollBaseListClick"
            @mouseout="baseListClick"
          />
          <dv-scroll-board
            v-if="showxiaoban"
            :key="scrollBoardKey"
            class="scroll-board-01"
            :config="scrollBoardConfig"
            ref="scrollBoard"
            @click="scrollBoardClick"
            @mouseout="scrollOut"
            :style="scrollBoardStyle"
          />
          <div class="scroll-board-tool" @click="toggleShowScrollBoard">
            <div class="inner">
              <img src="../assets/img/jiantou.png" alt />
            </div>
          </div>
        </section>
      </section>
    <!-- </dv-full-screen-container> -->
  </div>
</template>

<script>
import Map from '../components/amapnow.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 { mapMutations, mapState, mapGetters } from 'vuex';
import {
  page1numerical,
  page1echarts01,
  page1echarts02,
  rightScrollData,
  baseList,
  alarmDataApi,
  page2numerical,
  page2echarts01,
  page2echarts02,
  page2echarts03,
  page5numerical,
  typeSlideApi,
  page5echarts01,
  page5echarts02,
  page6numerical,
  page6echarts01,
  page6echarts02,
  eventList,
  smallClassDetail,
  smallInfo,
  eventDetail,
  financeBaseDetail
} 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';
import page2Char2Schema from '../dataSchema/page2Char2Schema';
import page2Char3Schema from '../dataSchema/page2Char3Schema';
import page5Char1Schema from '../dataSchema/page5Char1Schema';
import page5Char2Schema from '../dataSchema/page5Char2Schema';
import page6Char1Schema from '../dataSchema/page6Char1Schema';
import page6Char2Schema from '../dataSchema/page6Char2Schema';
import scrollEventSchema from '../dataSchema/scrollEventSchema';

//柱状图颜色
let colorArr = ['#00FAFD', '#FF4E46', '#FFAA00','#19D800'];

// 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 {
      showxiaoban: true,
      showbase: false,
      showScrollBoard: false,
      alarData: {},
      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: '60vh'
      },
      scrollBoardConfig: scrollBoardSchema,
      scrollBaseListConfig: scrollBaseListSchema,
      page1numerical: [
        { name: '蓄积量', number: '2309', unit: '立方米' },
        { name: '占地面积', number: '55.4', unit: '万亩' }
      ],
      alarmData: [
        // {msg:'三都林场01小班于15：00：00发现火情，请尽快处理！'},
        // {msg:'测试1！'},
        // {msg:'测试22222222！'},
      ],
      page1Char1: page1Char1Schema,
      page1Char2: page1Char2Schema,
      page2numerical: [],
      page2Char1: page2Char1Schema,
      page2Char2: page2Char2Schema,
      page2Char3: page2Char3Schema,
      page5numerical: [],
      typeSlideData: [],
      page5Char1: page5Char1Schema,
      page5Char2: page5Char2Schema,
      page6numerical: [],
      page6Char1: page6Char1Schema,
      page6Char2: page6Char2Schema,
      scrollEventConfig: scrollEventSchema,
      xiaobaninput: '',
      baseinput: ''
    };
  },
  created() {},
  computed: {
    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
  },
  mounted() {
    this.getPageData();
    this.getRightScrollData();
    setInterval(() => {
      this.getPageData();
    }, 60000);
    window.onresize = () => {
      //图表resize
      if (this.$store.state.addr.page == 'forest') {
        let page1Char1Uuid = this.$refs.page1Char1.mid;
        this.$refs.page1Char1.resizeChar(page1Char1Uuid);

        let page1Char2Uuid = this.$refs.page1Char2.mid;
        this.$refs.page1Char2.resizeChar(page1Char2Uuid);
      } else if (this.$store.state.addr.page == 'treeSpecies') {
        let page2Char2Uuid = this.$refs.page2Char2.mid;
        this.$refs.page2Char2.resizeChar(page2Char2Uuid);

        let page2Char3Uuid = this.$refs.page2Char3.mid;
        this.$refs.page2Char3.resizeChar(page2Char3Uuid);
      } else if (this.$store.state.addr.page == 'economics') {
        let page5Char1Uuid = this.$refs.page5Char1.mid;
        this.$refs.page5Char1.resizeChar(page5Char1Uuid);

        let page5Char2Uuid = this.$refs.page5Char2.mid;
        this.$refs.page5Char2.resizeChar(page5Char2Uuid);
      } else if (this.$store.state.addr.page == 'event') {
        let page6Char1Uuid = this.$refs.page6Char1.mid;
        this.$refs.page6Char1.resizeChar(page6Char1Uuid);

        let page6Char2Uuid = this.$refs.page6Char2.mid;
        this.$refs.page6Char2.resizeChar(page6Char2Uuid);
      }
    };
  },
  watch: {
    xiaobaninput: {
      handler: function () {
        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();
    },
    '$store.state.addr.selectDistrict'(val) {
      this.getPageData();
    },
    '$store.state.addr.selectStreet'(val) {
      this.getPageData();
    },
    '$store.state.addr.mapLevel': {
      handler(val) {
        console.log(val);
        if (val === 'city') {
          this.jumpDistrict();
        }
      }
    }
  },
  methods: {
    ...mapMutations([
      'changeSearchSmallClass',
      'changeEvenData',
      'changeBaseDetail',
      'changeSelectCity',
      'changeSelectDistrict',
      'changeSelectStreet'
    ]),
    addrChange(value) {
      console.log('addrChange', value);
    },
    navClick(index) {
      let pageName = this.navList[index - 1].en;
      if (pageName == 'sink' || pageName == 'circulation') {
        Message('暂未开放！');
        return;
      }
      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.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;
      }

      // 切换专题时，重置区域
      // this.$store.dispatch('searchArea', {
      //   parentId: '520000',
      //   name: '贵州省',
      //   mapLevel: 'province'
      // });

      this.getPageData();
    },
    getPageData() {
      debounce(this.debounceGetData, 300, false);
    },
    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.getPage2numerical();
        // this.getPage2echarts01();
        this.getPage2echarts02();
        this.getPage2echarts03();
        this.getRightScrollData();
      } else if (this.$store.state.addr.page == 'economics') {
        this.getPage5numerical();
        // this.getTypeSlideData();
        this.getPage5echarts01();
        this.getPage5echarts02();
        this.getBaseList();
      } else if (this.$store.state.addr.page == 'event') {
        this.getPage6numerical();
        this.getPage6echarts01();
        this.getEventList();
        // this.getPage6echarts02();
        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.selectStreet.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.selectStreet.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;
          });
          //数量过小时隐藏滚动
          if (this.page1Char1.xAxis.data.length <= 5) {
            this.page1Char1.dataZoom[0].show = false;
          } else {
            this.page1Char1.dataZoom[0].show = true;
          }
          let charUuid = this.$refs.page1Char1.mid;
          this.$refs.page1Char1.intChar(charUuid);
        })
        .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;
          });
          //数量过小时隐藏滚动
          if (this.page1Char2.xAxis.data.length <= 5) {
            this.page1Char2.dataZoom[0].show = false;
          } else {
            this.page1Char2.dataZoom[0].show = true;
          }
          let charUuid = this.$refs.page1Char2.mid;
          this.$refs.page1Char2.intChar(charUuid);
        })
        .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);

          //当小班滚动数据少时重设参数
          // if(res.rows.length<=15){
          //   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 + 'm³',
              element.landArea + '亩',
              element.id
            ]);
          });
          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);
        });
    },
    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 + '亩',
              element.id
            ]);
          });
          this.scrollBoardKey = Date.now();
        })
        .catch((err) => {
          console.log('echarts01 err', err);
        });
    },
    getEventList() {
      let param = {
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      };
      eventList(param)
        .then((res) => {
          this.scrollEventConfig.data = [];
          res.rows.forEach((element) => {
            this.scrollEventConfig.data.push([
              element.createTime.slice(5, 16),
              element.townName + element.villageName,
              this.eventTypeFilter(element.eventType),
              // element.createBy,
              this.eventStateFilter(element.state),
              element.id
            ]);
          });
          this.scrollBoardKey = Date.now();
        })
        .catch((err) => {
          console.log('getEventList err', err);
        });
    },
    eventTypeFilter(e) {
      if (e == '1') {
        return '火灾';
      } else if (e == '2') {
        return '砍伐';
      } else if (e == '3') {
        return '病虫害';
      } else if (e == '4') {
        return '偷盗林木';
      }
    },
    eventStateFilter(e) {
      if (e == '0') {
        return '未反馈';
      } else if (e == '1') {
        return '已反馈';
      }
    },
    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);
        });
    },
    getPage2numerical() {
      let param = {
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId,
        smallNumber: this.xiaobaninput
      };
      page2numerical(param)
        .then((res) => {
          // console.log('res',res);
          this.page2numerical = res.data;
        })
        .catch((err) => {
          console.log('page2numerical 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);
        });
    },
    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.data;
          // console.log(rows)
          // x坐标
          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 || [];
          });
          // 数组扁平化
          seriesList = seriesList.flat();
          // 去重
          let obj = {};
          seriesList = seriesList.reduce((newArr, next) => {
            // console.log('page2Char2 seriesList',seriesList);
            // console.log('page2Char2 next',next);
            obj[next.name] ? '' : (obj[next.name] = true && newArr.push(next));
            return newArr;
          }, []);
          seriesList.sort((star, next) => {
            // 按name的指定顺序排序,不排序可以删掉
            var order = ['杉木', '马尾松', '软阔', '硬阔'];
            return order.indexOf(star.name) - order.indexOf(next.name);
          });
          seriesList = seriesList.map((item, index) => {
            let itemColor = null;
            if (item.name == '杉木' || item.name == '杉') {
              itemColor = colorArr[0];
            } else if (item.name == '马尾松' || item.name == '马') {
              itemColor = colorArr[1];
            } else if (item.name == '软阔' || item.name == '软') {
              itemColor = colorArr[2];
            } else if (item.name == '硬阔' || item.name == '硬') {
              itemColor = colorArr[3];
            }
            return {
              name: item.name,
              type: 'bar',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              data: [],
              itemStyle: {
                normal: { color: itemColor || 'auto' }
              }
            };
          });
          // console.log(seriesList)
          rows.forEach((item) => {
            seriesList.forEach((jtem, index) => {
              let num = 0;
              item.treeList &&
                item.treeList.map((ktem) => {
                  if (ktem.name.indexOf(jtem.name) > -1) {
                    num = ktem.value;
                  }
                });
              seriesList[index].data.push(num);
            });
          });
          // console.log('page2echarts02 seriesList',seriesList)
          this.page2Char2.series = seriesList;

          //数量过小时隐藏滚动
          if (this.page2Char2.xAxis.data.length <= 5) {
            this.page2Char2.dataZoom[0].show = false;
          } else {
            this.page2Char2.dataZoom[0].show = true;
          }

          let charUuid = this.$refs.page2Char2.mid;
          this.$refs.page2Char2.intChar(charUuid);
        })
        .catch((err) => {
          console.log('getPage2echarts02 err', err);
        });
    },
    getPage2echarts03() {
      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
      };
      page2echarts03(param)
        .then((res) => {
          // console.log('res',res);
          // this.page2Char2 = res.data;
          //  console.log('this.page2Char2.series', this.page2Char2.series);

          this.page2Char3.xAxis.data = [];
          this.page2Char3.series = [];

          const rows = res.data;
          // console.log(rows)
          // x坐标
          this.page2Char3.xAxis.data = rows.map((item) => {
            return item.smallNumber;
          });
          // console.log('x坐标',  this.page2Char2.xAxis.data)
          // 获取所有项
          let seriesList = rows.map((item) => {
            return item.treeList || [];
          });
          // 数组扁平化
          seriesList = seriesList.flat();
          // 去重
          let obj = {};
          seriesList = seriesList.reduce((newArr, next) => {
            obj[next.name] ? '' : (obj[next.name] = true && newArr.push(next));
            return newArr;
          }, []);
          // console.log('seriesList',seriesList);
          seriesList.sort((star, next) => {
            // 按name的指定顺序排序,不排序可以删掉
            var order = ['杉木', '马尾松', '软阔', '硬阔'];
            return order.indexOf(star.name) - order.indexOf(next.name);
          });
          seriesList = seriesList.map((item, index) => {
            let itemColor = null;
            if (item.name == '杉木' || item.name == '杉') {
              itemColor = colorArr[0];
            } else if (item.name == '马尾松' || item.name == '马') {
              itemColor = colorArr[1];
            } else if (item.name == '软阔' || item.name == '软') {
              itemColor = colorArr[2];
            } else if (item.name == '硬阔' || item.name == '硬') {
              itemColor = colorArr[3];
            }
            return {
              name: item.name,
              type: 'bar',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              data: [],
              itemStyle: {
                normal: { color: itemColor || 'auto' }
              }
            };
          });
          // console.log(seriesList)
          rows.forEach((item) => {
            seriesList.forEach((jtem, index) => {
              let num = 0;
              item.treeList &&
                item.treeList.map((ktem) => {
                  if (ktem.name.indexOf(jtem.name) > -1) {
                    num = ktem.value;
                  }
                });
              seriesList[index].data.push(num);
            });
          });
          // console.log(seriesList)
          this.page2Char3.series = seriesList;

          //数量过小时隐藏滚动
          if (this.page2Char3.xAxis.data.length <= 5) {
            this.page2Char3.dataZoom[0].show = false;
          } else {
            this.page2Char3.dataZoom[0].show = true;
          }

          let charUuid = this.$refs.page2Char3.mid;
          this.$refs.page2Char3.intChar(charUuid);
        })
        .catch((err) => {
          console.log('getPage2echarts03 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);
          // 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) => {
          // console.log('res',res);
          // this.page5Char1 = res.data;
          this.page5Char1.xAxis.data = res.data.map((item) => {
            return item.baseName;
          });
          this.page5Char1.series[0].data = res.data.map((item) => {
            return item.baseArea;
          });
          //数量过小时隐藏滚动
          if (this.page5Char1.xAxis.data.length <= 5) {
            this.page5Char1.dataZoom[0].show = false;
          } else {
            this.page5Char1.dataZoom[0].show = true;
          }
          let charUuid = this.$refs.page5Char1.mid;
          this.$refs.page5Char1.intChar(charUuid);
        })
        .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;
          this.page5Char2.xAxis.data = res.data.map((item) => {
            return item.name;
          });
          this.page5Char2.series[0].data = res.data.map((item) => {
            return item.number;
          });
          //数量过小时隐藏滚动
          if (this.page5Char2.xAxis.data.length <= 5) {
            this.page5Char2.dataZoom[0].show = false;
          } else {
            this.page5Char2.dataZoom[0].show = true;
          }
          let charUuid = this.$refs.page5Char2.mid;
          this.$refs.page5Char2.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) => {
          // 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) => {
          // console.log('res',res);
          // this.page6Char1 = res.data;

          // this.page6Char1.xAxis[0].data = [];
          // 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);
          //   });
          this.page6Char1.xAxis.data = [];
          this.page6Char1.series[0].data = [];
          this.page6Char1.series[1].data = [];
          this.page6Char1.series[2].data = [];
          this.page6Char1.series[3].data = [];

          const rows = res.data;
          // console.log(rows)
          // x坐标
          this.page6Char1.xAxis.data = rows.map((item) => {
            return item.villageName;
          });
          rows.forEach((element) => {
            this.page6Char1.series[0].data.push(element.pestCount);
            this.page6Char1.series[1].data.push(element.fireCount);
            this.page6Char1.series[2].data.push(element.cutCount);
            this.page6Char1.series[3].data.push(element.stealCount);
          });
          // console.log('x坐标',  this.page6Char1.xAxis.data)

          //数量过小时隐藏滚动
          if (this.page6Char1.xAxis.data.length <= 5) {
            this.page6Char1.dataZoom[0].show = false;
          } else {
            this.page6Char1.dataZoom[0].show = true;
          }
          let charUuid = this.$refs.page6Char1.mid;
          this.$refs.page6Char1.intChar(charUuid);
        })
        .catch((err) => {
          console.log('getPage6echarts01 err', err);
        });
    },
    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);
          });

          console.log('this.page6Char2.series', this.page6Char2.series);

          let charUuid = this.$refs.page6Char2.mid;
          this.$refs.page6Char2.intChar(charUuid);
        })
        .catch((err) => {
          console.log('page6echarts02 err', err);
        });
    },

    xiaobansearch() {
      // console.log('xiaobansearch');
      this.getRightScrollData();
      this.getPageData();
    },
    basesearch() {
      // console.log('xiaobansearch');
      this.getBaseList();
      this.getPageData();
    },
    scrollBoardClick(e) {
      let param = {
        id: e.row[4]
      };
      smallClassDetail(param).then((res) => {
        this.changeSearchSmallClass(res.data);
        console.log(res.data);
        this.alarData = res.data;
        console.log(this.$store.state.addr.mapLevel);
        if (this.$store.state.addr.mapLevel == 'city') {
          this.jumpDistrict();
        } else {
          this.vuexCityList.forEach((element) => {
            if (res.data.cityId === element.areaId) {
              this.changeSelectCity({
                value: element.areaCode,
                label: res.data.cityName,
                areaId: element.areaId
              });
              this.$store.dispatch('searchArea', {
                parentId: element.areaCode.substring(0, 6),
                name: res.data.cityName,
                mapLevel: 'city'
              });
            }
          });
        }
      });
    },
    jumpDistrict() {
      if (this.vuexDistrictList) {
        this.vuexDistrictList.forEach((element) => {
          if (this.alarData.countyId === element.areaId) {
            this.changeSelectDistrict({
              value: element.areaCode,
              label: this.alarData.cityName,
              areaId: element.areaId
            });
            console.log(element.areaCode.substring(0, 6));
            console.log(element.areaName);
            this.$store.dispatch('searchArea', {
              parentId: element.areaCode.substring(0, 6),
              name: element.areaName,
              mapLevel: 'district'
            });
          }
        });
      }
    },
    scrollOut() {
      this.changeSearchSmallClass({ name: false });
    },
    scrollBaseListClick(e) {
      console.log('scrollBaseListClick', e);
      let param = {
        baseId: e.row[3]
      };
      financeBaseDetail(param).then((res) => {
        this.changeBaseDetail(res.data);
      });
    },
    baseListClick() {
      this.changeBaseDetail({ name: false });
    },
    scrollEventClick(e) {
      let param = {
        id: e.row[4]
      };
      eventDetail(param).then((res) => {
        this.changeEvenData(res.data);
      });
    },
    scrollEventOut() {
      this.changeEvenData({ name: false });
    },
    toggleShowScrollBoard() {
      this.showScrollBoard = !this.showScrollBoard;
    }
  }
};
</script>

<style lang='scss' scoped>
@import url(./index.scss);
</style>