<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.oneCount}}家，占比{{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">
                  <template slot-scope="scope">{{ scope.row.tjCount }}个</template>
                </el-table-column>
                <el-table-column prop="tjRate" label="占比" align="right">
                  <template slot-scope="scope">{{ scope.row.tjRate }}%</template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="一级" align="right">
                <el-table-column prop="oneCount" label="数量" align="right">
                  <template slot-scope="scope">{{ scope.row.oneCount }}个</template>
                </el-table-column>
                <el-table-column prop="oneRate" label="占比" align="right">
                  <template slot-scope="scope">{{ scope.row.oneRate }}%</template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="二级" align="right">
                <el-table-column prop="twoCount" label="数量" align="right">
                  <template slot-scope="scope">{{ scope.row.twoCount }}个</template>
                </el-table-column>
                <el-table-column prop="twoRate" label="占比" align="right">
                  <template slot-scope="scope">{{ scope.row.twoRate }}%</template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="三级" align="right">
                <el-table-column prop="threeCount" label="数量" align="right">
                  <template slot-scope="scope">{{ scope.row.threeCount }}个</template>
                </el-table-column>
                <el-table-column prop="threeRate" label="占比" align="right">
                  <template slot-scope="scope">{{ scope.row.threeRate }}%</template>
                </el-table-column>
              </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">
                <template slot-scope="scope">{{ scope.row.tjCount }}个</template>
              </el-table-column>
              <el-table-column prop="tjRate" label="占比" align="right">
                <template slot-scope="scope">{{ scope.row.tjRate }}%</template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="一级" align="right">
              <el-table-column prop="oneCount" label="数量" align="right">
                <template slot-scope="scope">{{ scope.row.oneCount }}个</template>
              </el-table-column>
              <el-table-column prop="oneRate" label="占比" align="right">
                <template slot-scope="scope">{{ scope.row.oneRate }}%</template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="二级" align="right">
              <el-table-column prop="twoCount" label="数量" align="right">
                <template slot-scope="scope">{{ scope.row.twoCount }}个</template>
              </el-table-column>
              <el-table-column prop="twoRate" label="占比" align="right">
                <template slot-scope="scope">{{ scope.row.twoRate }}%</template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="三级" align="right">
              <el-table-column prop="threeCount" label="数量" align="right">
                <template slot-scope="scope">{{ scope.row.threeCount }}个</template>
              </el-table-column>
              <el-table-column prop="threeRate" label="占比" align="right">
                <template slot-scope="scope">{{ scope.row.threeRate }}%</template>
              </el-table-column>
            </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">
              <template slot-scope="scope">{{ scope.row.count }}个</template>
            </el-table-column>
            <!--<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() {
      this.getAreaGroupByProvince()
      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.$nextTick(() => {
            this.initChart()
          })

        })
      },
      getCertGroupByMajorProvinceLevel(){
        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.$nextTick(() => {
            this.initChart1()
          })

        })
      },
      getAreaGroupByProvince(){
        areaGroupByProvince().then(res => {
          this.isSkeleton=false;
          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.$nextTick(() => {
            this.initChart2()
          })
          this.getData()
          this.getCertGroupByMajorProvinceLevel()
        })
      },
      initChart() {
        this.$nextTick(() => {
          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() {
        this.$nextTick(() => {
          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() {
        this.$nextTick(() => {
          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",
                  normal: {
                    label : {show: true},
                    color:"#FFAB44",
                    lineStyle: {
                      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: 13px !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>
