castgroup_bigscreen/src/views/index.vue

<!--
 * @LastEditors: gcz
-->
<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="page==1">
      <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="page==2">
      <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="page==5">
      <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="page==6">
      <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 class="scroll-board-01" :config="scrollBoardConfig" ref="scrollBoard" @click="scrollBoardClick" style="width:100%;height:25vh" />
      </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,
  } 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:'森林资源'},
          {text:'树种'},
          {text:'碳汇管理'},
          {text:'土地流转'},
          {text:'林业经济'},
          {text:'事件信息'},
        ],
        scrollBoardConfig:scrollBoardSchema,
        page1numerical:[
          {name:'储蓄量',number:'2309',unit:'立方米'},
          {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(){
      //第一屏统计
      page1numerical().then(res=>{
        // console.log('res',res);
        this.page1numerical = res.data;
      }).catch(err=>{
        console.log('echarts01 err',err);
      })
      this.getPage1echarts01();
      this.getPage1echarts02();
      this.getRightScrollData();
      this.getAlarmData();

      // this.getPage2echarts01();
      // this.getPage2echarts02();
    },
    mounted(){
      setInterval(() => {
        this.getPageData();    
      }, 111115000);      
    },
    watch: {
      xiaobaninput: {
          handler: function() {
           debounce(this.xiaobansearch, 500, false)
          }
      },
    },
    methods: {
      addrChange(value){
        console.log('addrChange',value);
      },
      navClick(index){
        // console.log('index',index);
        if(index==3||index==4){
           Message('暂未开放！')
          return
        }
        this.page = index;
        this.getPageData();
      },
      getPageData(){
        if(this.page==1){
          this.getPage1echarts01();
          this.getPage1echarts02();
        }else if(this.page==2){
          this.getPage2echarts01();
          this.getPage2echarts02();
        }else if(this.page==5){
          this.getPage5numerical();
          this.getTypeSlideData();
          this.getPage5echarts01();
          this.getPage5echarts02();
        }
        else if(this.page==6){
          this.getPage6numerical();
          this.getPage6echarts01();
          this.getAlarmData();
        }
      },
      getPage1echarts01(){
        let param = {
          cityId:this.vuexSelectCity,
          countyId:this.vuexSelectDistrict,
          townId:this.vuexSelectStreet,
        }
        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(){
        page1echarts02().then(res=>{
          // console.log('res',res);
          let charUuid = this.$refs.page1Char2.mid;
          this.$refs.page1Char2.intChar(charUuid)
          this.page1Char2 = res.data;
        }).catch(err=>{
          console.log('getPage1echarts02 err',err);
        })
      },
      getRightScrollData(){
        let param = {
          smallNumber : this.xiaobaninput
        }
        rightScrollData(param).then(res=>{
          // console.log('this.scrollBoardConfig',this.scrollBoardConfig);
          this.scrollBoardConfig.data = [];
          res.rows.forEach(element => {
            this.scrollBoardConfig.data.push([element.smallNumber,element.treeComp,element.perAcreStock,element.landArea])            
          });
          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('res',res);
          this.alarmData = res.data;
        }).catch(err=>{
          console.log('echarts01 err',err);
        })
      },

      getPage2echarts01(){
        let param = {
          smallNumber:this.xiaobaninput,
          cityId:this.vuexSelectCity,
          countyId:this.vuexSelectDistrict,
          townId:this.vuexSelectStreet,
        }
        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.vuexSelectCity,
          countyId:this.vuexSelectDistrict,
          townId:this.vuexSelectStreet,
        }
        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(){
        page5numerical().then(res=>{
          // console.log('res',res);
          this.page5numerical = res.data;
        }).catch(err=>{
          console.log('echarts01 err',err);
        })
      },
      getTypeSlideData(){
        typeSlideApi().then(res=>{
          this.typeSlideData = sliceArray(res.data,3);
          // console.log(' this.typeSlideData', this.typeSlideData);
        }).catch(err=>{
          console.log('getTypeSlideData err',err);
        })
      },
       getPage5echarts01(){
        page5echarts01().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(){
        page5echarts02().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(){
        //第一屏统计
        page6numerical().then(res=>{
          // console.log('res',res);
          this.page6numerical = res.data;
        }).catch(err=>{
          console.log('getPage6numerical err',err);
        })
      },
       getPage6echarts01(){
        let param = {
          cityId:this.vuexSelectCity,
          countyId:this.vuexSelectDistrict,
          townId:this.vuexSelectStreet,
        }
        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>