castgroup_bigscreen/src/views/index.vue

<!--
 * @LastEditors: wangcc
-->
<template>
  <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>
    </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>

    <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'">
      <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"
      />
    </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>

    <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 blur-wrap">
        <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 {
  page1numerical,
  page1echarts01,
  page1echarts02,
  rightScrollData,
  alarmDataApi,
  page2echarts01,
  page2echarts02,
  page5numerical,
  typeSlideApi,
  page5echarts01,
  page5echarts02,
  page6numerical,
  page6echarts01,
  smallClassMap
} from '../service/index';

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);
      }
    },
    '$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();
    }
  },
  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;
      }

      // 切换专题时，重置区域
      // 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;
          });
          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;
          });
          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,
              element.landArea
            ]);
          });
          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) => {
          // 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) => {
          // 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.rows;
          // 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) => {
            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: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              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;
                }
              });
              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);
        });
    },

    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;
          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;
          let charUuid = this.$refs.page5Char2.mid;
          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) => {
          // 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);
            });

          let charUuid = this.$refs.page6Char1.mid;
          this.$refs.page6Char1.intChar(charUuid);
        })
        .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>
@import url(./index.scss);
</style>