<template>
  <div>
    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
    <div v-if="!isSkeleton" class="zhongbiao">
      <div class="zb-content content1">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国建筑企业概览</span>
          </div>
        </div>
        <div class="text">截止{{currentdate}}，全国共有{{glDetail.major}}资质的企业{{total}}家，其中特级资质企业{{glDetail.tjCount}}家，占比{{glDetail.tjRate}}%；一级资质企业{{glDetail.tjCount}}家，占比{{glDetail.oneRate}}%；二级资质企业{{glDetail.twoCount}}家，占比{{glDetail.twoRate}}%；三级资质企业{{glDetail.threeCount}}家，占比{{glDetail.threeRate}}%</div>
        <div class="main1">
          <div style="height: 300px;">
            <div class="left">
              <div class="item" v-for="(item,index) in glData" :class="typeIndex === index ? 'color':''" @click="handleClick(1,index)">{{item.major}}施工总承包<i></i></div>
            </div>
            <div class="right">
              <div id="gl-echarts" style="height: 260px;background: #ffffff;"></div>
            </div>
          </div>
          <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
        </div>
        <div class="main2">
          <!--<div class="flex-box query-box head">-->
          <!--<span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>-->
          <!--<el-select v-model="year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择">-->
          <!--<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />-->
          <!--</el-select>-->
          <!--</div>-->
          <div class="table-item">
            <el-table
              :data="zzTableData"
              border
              fit
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="major" label="资质类型"/>

              <el-table-column label="特级" align="right">
                <el-table-column prop="tjCount" label="数量（个）" align="right"/>
                <el-table-column prop="tjRate" label="占比（%）" align="right"/>
              </el-table-column>
              <el-table-column label="一级" align="right">
                <el-table-column prop="oneCount" label="数量（个）" align="right"/>
                <el-table-column prop="oneRate" label="占比（%）" align="right"/>
              </el-table-column>
              <el-table-column label="二级" align="right">
                <el-table-column prop="twoCount" label="数量（个）" align="right"/>
                <el-table-column prop="twoRate" label="占比（%）" align="right"/>
              </el-table-column>
              <el-table-column label="三级" align="right">
                <el-table-column prop="threeCount" label="数量（个）" align="right"/>
                <el-table-column prop="threeRate" label="占比（%）" align="right"/>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="zb-content content2">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国建筑企业地区分布</span>
          </div>
        </div>
        <div class="main1">
          <div class="tabs">
            <div class="item" v-for="(item,index) in dqData" :class="qydqIndex === index ? 'color':''" @click="handleClick(2,index)">{{item.major}}<i></i></div>
          </div>
          <div id="jzqy-echarts" style="height: 250px"></div>
          <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
        </div>
        <div class="table-item">
          <el-table
            :data="jzdqData"
            border
            height="470"
            fit
            highlight-current-row
          >
            <el-table-column label="序号" width="60" align="left">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="province" label="地区"/>
            <el-table-column label="特级" align="right">
              <el-table-column prop="tjCount" label="数量（个）" align="right"/>
              <el-table-column prop="tjRate" label="占比（%）" align="right"/>
            </el-table-column>
            <el-table-column label="一级" align="right">
              <el-table-column prop="oneCount" label="数量（个）" align="right"/>
              <el-table-column prop="oneRate" label="占比（%）" align="right"/>
            </el-table-column>
            <el-table-column label="二级" align="right">
              <el-table-column prop="twoCount" label="数量（个）" align="right"/>
              <el-table-column prop="twoRate" label="占比（%）" align="right"/>
            </el-table-column>
            <el-table-column label="三级" align="right">
              <el-table-column prop="threeCount" label="数量（个）" align="right"/>
              <el-table-column prop="threeRate" label="占比（%）" align="right"/>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="zb-content content3">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国建筑企业备案分布</span>
          </div>
        </div>
        <div class="text">
          通过对全国建筑工程总承包一级及以上资质企业的备案数据分析，我们发现这些优质企业主要去了<span v-for="(item,index) in rankList">{{item.province}}{{ rankList.length === index+1 ? '':'、'}}</span>等地开展经营。</div>
        <div class="main1">
          <div id="ba-echarts" style="height: 250px"></div>
          <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为公开企业备案地数据。</p>
        </div>
        <div class="table-item">
          <el-table
            :data="zbData"
            border
            height="430"
            fit
            highlight-current-row
          >
            <el-table-column label="序号" width="60" align="left">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="province" label="地区" />
            <el-table-column prop="count" label="企业异地备案数量（个）" sortable align="right"/>
            <!--<el-table-column prop="zb" label="占比"/>-->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { certGroupByMajorAndLevel,certGroupByMajorProvinceLevel,areaGroupByProvince } from '@/api/macro/macro'
  import skeleton from '../../component/skeleton'
export default {
  name: 'NationalEconomies',
  components: {
    skeleton
  },
  data() {
    return {
      typeIndex:0,
      glData:[],
      jzglData:[],
      zzTableData:[],
      tableOption:[
        {
          label:'资质类型',
          prop:'major'
        },
        {
          label: '特级',
          prop: 'levelValue',
          child:[
            {
              label: '数量（个）',
              prop: 'count'
            },
            {
              label: '占比（%）',
              prop: 'rate'
            },
          ]
        },
        {
          label: '一级',
          prop: 'levelValue',
          child:[
            {
              label: '数量（个）',
              prop: 'count'
            },
            {
              label: '占比（%）',
              prop: 'rate'
            },
          ]
        },
        {
          label: '二级',
          prop: 'levelValue',
          child:[
            {
              label: '数量（个）',
              prop: 'count'
            },
            {
              label: '占比（%）',
              prop: 'rate'
            },
          ]
        },
        {
          label: '三级',
          prop: 'levelValue',
          child:[
            {
              label: '数量（个）',
              prop: 'count'
            },
            {
              label: '占比（%）',
              prop: 'rate'
            },
          ]
        },
      ],
      dqData:[],
      qydqIndex:0,
      zbData:[],
      rankList:[],
      jzdqData:[],
      currentdate:'',
      total:'',
      glDetail:{},
      isSkeleton:true,
    }
  },
  created() {
    setTimeout(() => {
      this.isSkeleton=false;
      this.getData()
    }, 1000);
    var date = new Date()
    var year = date.getFullYear()
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1
    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    this.currentdate=year + '-' +month + '-' + day;
  },
  methods: {
    getData(){
      //全国建筑企业概览
      certGroupByMajorAndLevel().then(res => {
        let list=[];
        for (let i=0; i<res.data.length; i++){
          res.data[i].levelList=res.data[i].levelList.reverse();
          let item={};
          item.major=res.data[i].major+'施工总承包';
          for (let j=0; j<res.data[i].levelList.length; j++){
            if(res.data[i].levelList[j].levelValue === '特级'){
              item.tjCount=res.data[i].levelList[j].count;
              item.tjRate=res.data[i].levelList[j].rate;
            }
            if(res.data[i].levelList[j].levelValue === '一级'){
              item.oneCount=res.data[i].levelList[j].count;
              item.oneRate=res.data[i].levelList[j].rate;
            }
            if(res.data[i].levelList[j].levelValue === '二级'){
              item.twoCount=res.data[i].levelList[j].count;
              item.twoRate=res.data[i].levelList[j].rate;
            }
            if(res.data[i].levelList[j].levelValue === '三级'){
              item.threeCount=res.data[i].levelList[j].count;
              item.threeRate=res.data[i].levelList[j].rate;
            }
          }
          // item.levelList=res.data[i].levelList.reverse();
          list.push(item)
        }
        this.zzTableData=list;
        this.glData=res.data;
        this.jzglData=this.glData[0].levelList;
        this.glDetail=list[0]
        let total=0;
        for(let i=0; i<this.jzglData.length; i++){
          total=total+this.jzglData[i].count
        }
        this.total=total;

        this.initChart()
      })
      certGroupByMajorProvinceLevel().then(res => {
        this.dqData=res.data;
        let data=this.dqData[0].province;
        let list=[];
        for(let i=0; i<data.length; i++){
          let item={};
          item.province=data[i].province;
          for (let j=0; j<data[i].levelList.length; j++){
            if(data[i].levelList[j].levelValue === '特级'){
              item.tjCount=data[i].levelList[j].count;
              item.tjRate=data[i].levelList[j].rate;
            }
            if(data[i].levelList[j].levelValue === '一级'){
              item.oneCount=data[i].levelList[j].count;
              item.oneRate=data[i].levelList[j].rate;
            }
            if(data[i].levelList[j].levelValue === '二级'){
              item.twoCount=data[i].levelList[j].count;
              item.twoRate=data[i].levelList[j].rate;
            }
            if(data[i].levelList[j].levelValue === '三级'){
              item.threeCount=data[i].levelList[j].count;
              item.threeRate=data[i].levelList[j].rate;
            }
          }
          list.push(item)
        }
        this.jzdqData=list
        this.initChart1()
      })
      areaGroupByProvince().then(res => {
        this.zbData=res.data;
        //定义一个变量 保存数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存
        // let dataArr = JSON.parse(JSON.stringify(res.data))
        let arr=res.data.sort((old,New)=>{
          return  New.count - old.count
        })
        let data=[]
        for(let i=0; i<5; i++){
          data.push(arr[i])
        }
        this.rankList=data;
        //将原数组数据赋值回去  保持数据不变
        // this.zbData = JSON.parse(JSON.stringify(dataArr))
        this.initChart2()
      })
    },
    initChart() {
      let myChart = echarts.init(document.getElementById("gl-echarts"))
      let option ={
        tooltip: {
          // show:false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.jzglData.map(item => item.levelValue),
        },
        yAxis: {
          type: 'value',
        },
        grid: {
          top:40,
          left:70,
          right:40,
          bottom:40,
        },
        series: [
          {
            data: this.jzglData.map(item => item.count),
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 1,
              color: "#0081FF",
            },
            itemStyle:{
              color: "#4E8EFF",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#DFEAFF",
                },
                {
                  offset: 1,
                  color: "#5895FF",
                },
              ]),
            },
          }
        ]
      }
      myChart.clear(); //图表清除
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();//图表跟随页面大小变化宽度
      });
    },
    initChart1() {
      let myChart = echarts.init(document.getElementById("jzqy-echarts"))
      let option ={
        legend: {
          x:'right',
          padding:[0,30,0,0],
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#FFFFFF'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.jzdqData.map(item => item.province),
        },
        yAxis: {
          type: 'value',
        },
        grid: {
          top:35,
          left:60,
          right:30,
          bottom:20,
        },
        series: [
          {
            data: this.jzdqData.map(item => item.tjCount),
            name:'特级',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#0081FF",
            },
            itemStyle:{
              color: "#4E8EFF",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#DFEAFF",
                },
                {
                  offset: 1,
                  color: "#5895FF",
                },
              ]),
            },
          },
          {
            data: this.jzdqData.map(item => item.oneCount),
            name:'一级',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#FA6C6C",
            },
            itemStyle:{
              color: "#FA6C6C",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.1,
                  color: "#FDF8F5",
                },
                {
                  offset: 1,
                  color: "#FCD7C8",
                },
              ]),
            },
          },
          {
            data: this.jzdqData.map(item => item.twoCount),
            name:'二级',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#8077F2",
            },
            itemStyle:{
              color: "#8077F2",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.1,
                  color: "#ECE8FF",
                },
                {
                  offset: 1,
                  color: "#BCC0FF",
                },
              ]),
            },
          },
          {
            data: this.jzdqData.map(item => item.threeCount),
            name:'三级',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#FA936C",
            },
            itemStyle:{
              color: "#FA936C",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.1,
                  color: "#FEFBFA",
                },
                {
                  offset: 1,
                  color: "#FCD7C8",
                },
              ]),
            },
          },
        ]
      }
      myChart.clear();
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();//图表跟随页面大小变化宽度
      });
    },
    initChart2() {
      let myChart = echarts.init(document.getElementById("ba-echarts"))
      let option ={
        tooltip: {
          // show:false
        },
        legend:{},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.zbData.map(item => item.province),
        },
        yAxis: {
          type: 'value',
        },
        grid: {
          top:20,
          left:65,
          right:50,
          bottom:20,
        },
        series: [
          {
            data: this.zbData.map(item => item.count),
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 1,
              color: "#FFAB44",
            },
            itemStyle:{
              color: "#FFAB44",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#FFEDD0",
                },
                {
                  offset: 1,
                  color: "#FFC671",
                },
              ]),
            },
          }
        ]
      }
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();//图表跟随页面大小变化宽度
      });
    },
    handleClick(type,index){
      if(type === 1){
        this.typeIndex=index;
        this.jzglData=this.glData[index].levelList;
        let total=0
        for(let i=0; i<this.jzglData.length; i++){
          total=total+this.jzglData[i].count
        }
        this.total=total;
        this.glDetail=this.zzTableData[index]
        this.initChart()
      }
      if(type === 2){
        this.qydqIndex=index;
        let data=this.dqData[index].province;
        let list=[];
        for(let i=0; i<data.length; i++){
          let item={};
          item.province=data[i].province;
          for (let j=0; j<data[i].levelList.length; j++){
            if(data[i].levelList[j].levelValue === '特级'){
              item.tjCount=data[i].levelList[j].count;
              item.tjRate=data[i].levelList[j].rate;
            }
            if(data[i].levelList[j].levelValue === '一级'){
              item.oneCount=data[i].levelList[j].count;
              item.oneRate=data[i].levelList[j].rate;
            }
            if(data[i].levelList[j].levelValue === '二级'){
              item.twoCount=data[i].levelList[j].count;
              item.twoRate=data[i].levelList[j].rate;
            }
            if(data[i].levelList[j].levelValue === '三级'){
              item.threeCount=data[i].levelList[j].count;
              item.threeRate=data[i].levelList[j].rate;
            }
          }
          list.push(item)
        }
        this.jzdqData=list;
        this.$nextTick(()=>{
          this.initChart1()
        })

      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .zhongbiao{
    .zb-content{
      background: #ffffff;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px;
    }
    .text{
      width: 100%;
      line-height: 28px;
      padding: 0 16px;
      margin-top: 24px;
      font-size: 12px;
      color: rgba(35,35,35,0.8);
      background: #F4F4F5;
      border-radius: 2px;
      margin-bottom: 24px;
    }
    .tips{
      margin: 0;
      padding-top: 16px;
      font-size: 12px;
      color: rgba(35,35,35,0.4);
      i{
        color:#909399;
        margin-right: 9px;
        font-size: 14px;
      }
    }
    .content1{
      .main1{
        .left{
          width: 20%;
          float: left;
          .item{
            height: 74px;
            line-height: 74px;
            color: #333333;
            font-size: 16px;
            padding-left: 30px;
            border-top: 1px solid #EAF3FF;
            border-left: 1px solid #EAF3FF;
            border-right: 1px solid #EAF3FF;
            cursor: pointer;
          }
          .item:last-child{
            border-bottom: 1px solid #EAF3FF;
          }
          .color{
            background: #F0F3FA;
            color:#0081FF;
            i{
              width: 4px;
              height: 29px;
              background: #0081FF;
              border-radius: 10px;
              display: inline-block;
              float: right;
              margin-top: 22px;
            }
          }
        }
        .right{
          width: 79%;
          float: right;
          background: #F0F3FA;
          height: 295px;
          padding: 16px;
        }
      }
      .main2{
        margin-top: 30px;
        .head{
          span{
            font-size: 12px;
            color: rgba(35,35,35,0.8);
          }
          .number{
            color:#FF3C3C;
          }
          ::v-deep .el-select{
            width: 100px;
            height: 32px;
            .el-input{
              width: 100%;
              height: 32px;
            }
            .el-input__inner{
              height: 32px !important;
              line-height: 32px;
            }
          }
        }
      }
      .table-item{
        margin-top: 12px;
      }
    }
    .content2{
      .tabs{
        margin-top: 32px;
        margin-bottom: 24px;
        .item{
          display: inline-block;
          color: #3D3D3D;
          font-size: 14px;
          margin-right: 24px;
          cursor: pointer;
        }
        .color{
          color: #3D3D3D;
          font-weight: 700;
          position: relative;
          i{
            width: 42px;
            height: 2px;
            background: #0081FF;
            display: inline-block;
            position: absolute;
            bottom:-4px;
            left: 50%;
            transform: translate(-50%,0);
          }

        }
      }
      .table-item{
        margin-top: 32px;
      }
    }
    .content3{
      .table-item{
        margin-top: 32px;
      }
      .table-item {
        ::v-deep .el-table {
          .has-gutter{
            tr{
              th:nth-child(3){
                border-right:0;
                .cell{
                  padding-right: 24px !important;
                }
              }
            }
          }
        }
      }
    }
    .table-item{
      ::v-deep .el-table{
        .el-table__header-wrapper{
          th{
            padding: 0;
          }
        }
        .el-table__cell.is-right{
          text-align: right;
        }
        .has-gutter{
          tr{
            th:nth-child(6),th:nth-child(8){
              border-right:0;
              .cell{
                padding-right: 24px !important;
              }
            }
          }
        }
        .el-table__cell.gutter{
          /*background: #F0F3FA;*/
          width: 16px !important;
        }
        .el-table__row{
          td:last-child{
            .cell{
              padding-right: 24px !important;
            }
          }
        }
        th{
          font-size: 12px !important;
          font-weight: 400 !important;
        }
        .el-table__fixed-header-wrapper th{
          background: #F0F3FA;
        }
        td.el-table__cell{
          border-bottom: 0;
        }
        .caret-wrapper{
          width: 10px;
        }
      }
    }
  }
</style>
