<template>
  <div 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">截止2022年8月1日，全国共有建筑工程施工总承包资质的企业197572家，其中特级资质企业118家，占比0.06%；一级资质企业3879家，占比1.96%；二级资质企业22235家，占比11.25%；三级资质企业171340家，占比86.73%</div>
      <div class="main1">
        <div style="height: 300px;">
          <div class="left">
            <div class="item" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(1,index)">{{item}}<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="50" align="left">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="name" label="资质类型"/>
            <el-table-column label="特级" align="center">
              <el-table-column prop="number" label="数量（个）"/>
              <el-table-column prop="zb" label="占比（%）"/>
            </el-table-column>
            <el-table-column label="一级" align="center">
              <el-table-column prop="number" label="数量（个）"/>
              <el-table-column prop="zb" label="占比（%）"/>
            </el-table-column>
            <el-table-column label="二级">
              <el-table-column prop="number" label="数量（个）"/>
              <el-table-column prop="zb" label="占比（%）"/>
            </el-table-column>
            <el-table-column label="三级">
              <el-table-column prop="number" label="数量（个）"/>
              <el-table-column prop="zb" label="占比（%）"/>
            </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 typeList" :class="qydqIndex === index ? 'color':''" @click="handleClick(2,index)">{{item}}<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="tableData"
          border
          height="470"
          fit
          highlight-current-row
        >
          <el-table-column label="序号" width="50" align="left">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="area" label="地区"/>
          <el-table-column label="特级" align="center">
            <el-table-column prop="number" label="数量（个）"/>
            <el-table-column prop="zb" label="占比（%）"/>
          </el-table-column>
          <el-table-column label="一级" align="center">
            <el-table-column prop="number" label="数量（个）"/>
            <el-table-column prop="zb" label="占比（%）"/>
          </el-table-column>
          <el-table-column label="二级">
            <el-table-column prop="number" label="数量（个）"/>
            <el-table-column prop="zb" label="占比（%）"/>
          </el-table-column>
          <el-table-column label="三级">
            <el-table-column prop="number" label="数量（个）"/>
            <el-table-column prop="zb" label="占比（%）"/>
          </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">通过对全国建筑工程总承包一级及以上资质企业的备案数据分析，我们发现这些优质企业主要去了广东、安徽、江西、福建、湖北、浙江等地开展经营。</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="tableData"
          border
          height="430"
          fit
          highlight-current-row
        >
          <el-table-column label="序号" width="50" align="left">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="area" label="地区"/>
          <el-table-column prop="number" label="企业异地备案数量（个）"/>
          <el-table-column prop="zb" label="占比"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
export default {
  name: 'NationalEconomies',
  data() {
    return {
      year:'',
      yearOptions: [
        { name: '2023年', value: '2023' },
        { name: '2022年', value: '2022' },
        { name: '2021年', value: '2021' },
      ],
      glData:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
      glData1:[103,156,132,186,203,143,189,301,211,195,132,176],
      tableData1:[
        {
          area:'1月',
          number:'123',
          zb:'0.19%'
        },
        {
          area:'2月',
          number:'156',
          zb:'0.29%'
        },
        {
          area:'3月',
          number:'236',
          zb:'0.34%'
        },
        {
          area:'4月',
          number:'426',
          zb:'0.34%'
        },
        {
          area:'5月',
          number:'412',
          zb:'0.34%'
        },
        {
          area:'6月',
          number:'231',
          zb:'0.34%'
        },
        {
          area:'7月',
          number:'96',
          zb:'0.34%'
        },
        {
          area:'8月',
          number:'105',
          zb:'0.34%'
        },
        {
          area:'9月',
          number:'210',
          zb:'0.34%'
        },
        {
          area:'10月',
          number:'420',
          zb:'0.34%'
        },
        {
          area:'11月',
          number:'213',
          zb:'0.34%'
        },
        {
          area:'12月',
          number:'213',
          zb:'0.34%'
        },
      ],

      typeList:['建筑工程企业','市政工程企业','公路工程企业','水利水电工程企业'],
      typeIndex:0,
      jzglData:['特级','一级','二级','三级'],
      jzglData1:[103,156,132,186],
      zzTableData:[
        {
          name:'建筑工程施工总承包',
          number:'123',
          zb:'0.19%'
        },
        {
          name:'市政工程施工总承包',
          number:'123',
          zb:'0.19%'
        },
        {
          name:'公路工程施工总承包',
          number:'123',
          zb:'0.19%'
        },
        {
          name:'水利水电工程施工总承包',
          number:'123',
          zb:'0.19%'
        },
      ],

      qydqIndex:0,
      zbData:['广东','江苏','山东','浙江','河南','安徽','河北','四川','湖北','江西','甘肃','重庆','福建','云南','北京','湖南','山西'],
      zbData1:[123,156,236,426,412,231,96,105,210,420,213,86,120,230,150,132,196],
      tableData:[
        {
          area:'广东',
          number:'123',
          zb:'0.19%'
        },
        {
          area:'江苏',
          number:'156',
          zb:'0.29%'
        },
        {
          area:'山东',
          number:'236',
          zb:'0.34%'
        },
        {
          area:'浙江',
          number:'426',
          zb:'0.34%'
        },
        {
          area:'河南',
          number:'412',
          zb:'0.34%'
        },
        {
          area:'安徽',
          number:'231',
          zb:'0.34%'
        },
        {
          area:'河北',
          number:'96',
          zb:'0.34%'
        },
        {
          area:'四川',
          number:'105',
          zb:'0.34%'
        },
        {
          area:'湖北',
          number:'210',
          zb:'0.34%'
        },
        {
          area:'江西',
          number:'420',
          zb:'0.34%'
        },
        {
          area:'甘肃',
          number:'213',
          zb:'0.34%'
        },
      ],

    }
  },
  created() {
    this.$nextTick(()=>{
      this.initChart()
      this.initChart1()
      this.initChart2()
    })
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById("gl-echarts"))
      let option ={
        tooltip: {
          show:false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.jzglData,
        },
        yAxis: {
          type: 'value',
        },
        grid: {
          top:40,
          left:50,
          right:40,
          bottom:40,
        },
        series: [
          {
            data: this.jzglData1,
            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.setOption(option);
    },
    initChart1() {
      let myChart = echarts.init(document.getElementById("jzqy-echarts"))
      let option = {
        tooltip: {
          trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {// 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '5',
          right: '5',
          top: '20',
          bottom: '10',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.zbData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.zbData1,
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                color: '#165DFF',
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#165DFF',
                    fontSize: 16
                  }
                }
              },
              // 移入当前的柱状图时改变颜色
              emphasis: {
                color: '#3384FF',
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initChart2() {
      let myChart = echarts.init(document.getElementById("ba-echarts"))
      let option ={
        tooltip: {
          show:false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.zbData,
        },
        yAxis: {
          type: 'value',
        },
        grid: {
          top:20,
          left:30,
          right:20,
          bottom:20,
        },
        series: [
          {
            data: this.zbData1,
            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);
    },
    handleClick(type,index){
      if(type === 1){
        this.typeIndex=index;
      }
      if(type === 2){
        this.qydqIndex=index;
      }

    },
  }
}
</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;
      }
    }
    .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{
        .el-table__header-wrapper{
          th{
            padding: 0;
          }
        }
      }
    }
  }
</style>
