castgroup_bigscreen/src/views/index.vue

<!--
 * @LastEditors: gcz
-->
<template>
  <div class=''>
    <Map></Map> 
    <Header></Header>
    <Alarm :data="alarmData" />
    <section class="left-wrap blur-wrap">
      <Numerical :data="numerical01" />
      <MyEcharts :option="page1Char1" height="30vh" />
      <MyEcharts :option="option" height="30vh" />
    </section>
    <section class="right-wrap">
      <PickerAddr />
      <!-- <el-cascader
        size="large"
        :options="addrOptions"
        v-model="addrSelectedOptions"
        @change="addrChange">
      </el-cascader> -->
      <section class="scroll-board-wrap blur-wrap">
        <dv-scroll-board class="scroll-board-01" :config="scrollBoardConfig" style="width:100%;height:25vh" />
      </section>
    </section>
    <section class="nav-wrap">
      <div class="nav-item" v-for="(item,index) in navList" :key="index">
        {{item.text}}
      </div>
    </section>


  </div>
</template>

<script>
  import Map from "../components/map.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 {getQuery,echarts01} from "../service/index"

  import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
  
  export default {
    name: '',
    components: {
      Map,
      Header,
      MyEcharts,
      Numerical,
      Alarm,
      PickerAddr
    },
    data () {
      return {
        addrOptions: regionDataPlus,
        addrSelectedOptions: ['520000',''],
        navList:[
          {text:'森林资源'},
          {text:'树种'},
          {text:'碳汇管理'},
          {text:'土地流转'},
          {text:'林业经济'},
          {text:'事件信息'},
        ],
        scrollBoardConfig:{
          header: ['小班号', '树种组成', '每亩蓄积','小班面积'],
          data: [
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9'],
            ['163', '9杉1马', '27.2','4083.9']
          ],
          headerBGC:'rgba(38,80,179,1)',//表头背景色
          oddRowBGC:'rgba(38,80,179,.5)',//奇数行背景色
          evenRowBGC:'transparent',//偶数行背景色	
          align:['center','center','center'],//列对齐方式
        },
        numerical01:[
          {name:'储蓄量',number:'2309',unit:'立方米'},
          {name:'储蓄量',number:'2309',unit:'立方米'},
          {name:'占地面积',number:'55.4',unit:'万亩'}
        ],
        alarmData:[
          {msg:'三都林场01小班于15：00：00发现火情，请尽快处理！'},
          {msg:'测试1！'},
          {msg:'测试22222222！'},
        ],
        page1Char1:{},
        option:{
            title: {
            text: '储蓄量统计(立方米)',
            textStyle:{
                color: '#fff',
            }
            
            },
            tooltip: {},
            xAxis: {
            data: ['三都林场', '清镇林场', '榕江林场', '水东林场', '甜蜜林场', '贵阳林场'],
            axisLabel: {
                color: "rgba(255, 255, 255, 1)"
            }
            },
            yAxis: {
            axisLabel: {
                color: "rgba(255, 255, 255, 1)"
            }
            },
            series: [
            {
                name: '储蓄量',
                type: 'bar',
                data: [5000, 6000, 3000, 9000, 4500, 7000],
                
            }
            ]
        }
      };
    },
    created(){
      echarts01().then(res=>{
        console.log('res',res);
        this.page1Char1 = res.data;
      }).catch(err=>{
        console.log('echarts01 err',err);
      })


    //  let a =  echarts01();
    //  console.log('a',a);
    },
    mounted(){
      
    },
    methods: {
      addrChange(value){
        console.log('addrChange',value);
      }
    },
  }
</script>

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