<template>
  <div class="zhongbiao">
    <p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的中标项目，未公开的不含在内</p>
    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
    <div v-if="!isSkeleton" class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国中标项目统计</span>
          <el-select v-model="years" @change="handleYears(1)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="content_box" v-if="gyflState">
        <div class="box-left">
          <div id="echarts1" style="height: 280px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="xmtjList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="300"
            :summary-method="getSummaries"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="type" label="项目类型" :formatter="formatStatus" width="100"/>
            <el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable width="130"/>
            <el-table-column prop="countRate" label="数量占比（%）" align="right" :formatter="formatStatus" sortable width="140"/>
            <el-table-column prop="money" label="中标总金额 (万元）" align="right" :formatter="formatStatus" sortable width="170"/>
            <el-table-column prop="moneyRate" label="金额占比（%）" align="right" :formatter="formatStatus" sortable width="140"/>
          </el-table>
        </div>
      </div>
      <div class="empty" v-if="!gyflState">
        <img class="img" src="@/assets/images/project/empty.png">
        <div class="p1">抱歉，暂无数据展示</div>
      </div>
    </div>
    <div v-if="!isSkeleton" class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国各地区中标统计TOP10</span>
          <el-select v-model="years1" @change="handleYears(2)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="content_box" v-if="tdytState">
        <div class="box-left">
          <div id="echarts2" style="height: 280px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="topList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="300"
            :summary-method="getSummaries"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="province" label="地区" :formatter="formatStatus" width="100"/>
            <el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable width="130"/>
            <el-table-column prop="countRate" label="数量占比（%）" align="right" :formatter="formatStatus" sortable width="150"/>
            <el-table-column prop="sumMoney" label="中标总金额 (万元）" align="right" :formatter="formatStatus" sortable width="170"/>
            <el-table-column prop="moneyRate" label="金额占比（%）" align="right" :formatter="formatStatus" sortable width="145"/>
          </el-table>
        </div>
      </div>
      <div class="empty" v-if="!tdytState">
        <img class="img" src="@/assets/images/project/empty.png">
        <div class="p1">抱歉，暂无数据展示</div>
      </div>
    </div>
    <div v-if="!isSkeleton" class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国中标金额分析</span>
          <el-select v-model="years2" @change="handleYears(3)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="content_box" v-if="tdytState">
        <div class="box-left">
          <div id="echarts3" style="height: 280px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="zbjeList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="285"
            :summary-method="getSummaries"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="rangeName" label="中标金额" :formatter="formatStatus"/>
            <el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable/>
            <el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="120" sortable/>
          </el-table>
        </div>
      </div>
      <div class="empty" v-if="!tdytState">
        <img class="img" src="@/assets/images/project/empty.png">
        <div class="p1">抱歉，暂无数据展示</div>
      </div>
    </div>
    <div v-if="!isSkeleton" class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国中标趋势分析</span>
        </div>
      </div>
      <div class="content_box">
        <div class="box-left">
          <div id="echarts4" style="height: 300px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="zbqsList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="290"
            :summary-method="getSummaries"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="year" label="年份" :formatter="formatStatus" width="100"/>
            <el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable/>
            <el-table-column prop="sumMoney" label="中标总金额（万元）" align="right" :formatter="formatStatus"/>
          </el-table>
        </div>
      </div>
    </div>
    <div v-if="!isSkeleton" class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国中标下浮率分析</span>
          <el-select v-model="years3" @change="handleYears(5)" collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="content_box" v-if="tdytState">
        <div class="box-left">
          <div id="echarts5" style="height: 280px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="xflList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="280"
            :summary-method="getSummaries1"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="label" label="时间" :formatter="formatStatus" width="130"/>
            <el-table-column prop="rate" label="下浮率（%）" align="right" :formatter="formatStatus" sortable/>
            <el-table-column prop="count" label="统计项目数量 (个)" align="right" :formatter="formatStatus"/>
          </el-table>
        </div>
      </div>
      <div class="empty" v-if="!tdytState">
        <img class="img" src="@/assets/images/project/empty.png">
        <div class="p1">抱歉，暂无数据展示</div>
      </div>
    </div>

    <div v-if="!isSkeleton" class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国中标业绩项目类型下浮率</span>
          <el-select @change="handleYears(6)" style="margin-right: 8px" v-model="address" collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
          </el-select>
          <el-select v-model="years4" @change="handleYears(6)" collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="content_box" v-if="topList.length > 0 && !isSkeleton">
        <div class="box-left">
          <div id="echarts6" style="height: 300px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="xmxflList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="280"
            :summary-method="getSummaries2"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="month" label="时间" :formatter="formatStatus" width="120"/>
            <el-table-column prop="sgRate" label="施工类下浮率（%）" align="right" :formatter="formatStatus" width="160"/>
            <el-table-column prop="kcsjRate" label="勘察设计类下浮率（%）" align="right" :formatter="formatStatus"/>
            <el-table-column prop="jlRate" label="监理类下浮率（%）" align="right" :formatter="formatStatus" width="160"/>
          </el-table>
        </div>
      </div>
      <div class="empty" v-if="topList.length === 0 && !isSkeleton">
        <img class="img" src="@/assets/images/project/empty.png">
        <div class="p1">抱歉，暂无数据展示</div>
      </div>
    </div>

  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import dataRegion from '@/assets/json/dataRegion'
  import { countBidByType,countBidGroupByProvince,rangeBidMoney,rangeBidFiveYears,lowerRateByYear,lowerRangeTenderType } from '@/api/macro/macro'
  import skeleton from '../../component/skeleton'
  export default {
    name: 'NationalEconomies',
    components: {
      skeleton
    },
    data() {
      return {
        addressList:[],
        address:'',
        years:[2023],
        years1:[2023],
        years2:[2023],
        years3:2023,
        years4:2023,
        yearOptions:[],
        xmtjList:[],
        topList:[],
        zbjeList:[],
        zbqsList:[],
        xflList :[],
        xmxflList :[],
        isSkeleton:true,
        gyflState:true,
        tdytState:true,
        topState:true,
      }
    },
    created() {
      this.dataRegion()
      this.yearsData()
      this.getCountBidByType()
      this.$nextTick(() => {

      })
      setTimeout(() => {
        this.getCountBidGroupByProvince()
        this.getRangeBidMoney()
        this.getRangeBidFiveYears()
        this.getLowerRateByYear()
        this.getLowerRangeTenderType()
      }, 1000);
    },
    mounted() {

    },
    beforeDestroy(){

    },
    methods: {
      getCountBidByType(){
        let params={
          yearStr:this.years.join(",")
        }
        countBidByType(params).then(res => {
          this.isSkeleton=false;
          this.xmtjList=res.data.date;
          this.xmtjList.forEach(item =>{
            item.money=Number(item.money)
          })
          var list=[];
          for(var i=0;i<10;i++){
            list.push(res.data.date[i])
          }
          if(res.data){
            this.$nextTick(() => {
              this.initChart1(list)
            })
          }
        })
      },
      getCountBidGroupByProvince(){
        let params={
          yearStr:this.years1.join(",")
        }
        countBidGroupByProvince(params).then(res => {
          this.topList=res.data;
          if(res.data){
            this.$nextTick(() => {
              this.initChart2(res.data)
            })
          }
        })
      },
      getRangeBidMoney(){
        let params={
          yearStr:this.years2.join(",")
        }
        rangeBidMoney(params).then(res => {
          this.zbjeList=res.data;
          var list=[];
          for(var i=0;i<res.data.length;i++){
            var obj={};
            obj.name=res.data[i].rangeName;
            obj.value=res.data[i].count;
            obj.rate=res.data[i].rate;
            list.push(obj)
          }
          if(res.data){
            this.$nextTick(() => {
              this.initChart3(list)
            })
          }
        })
      },
      getRangeBidFiveYears(){
        rangeBidFiveYears().then(res => {
          this.zbqsList=res.data;
          if(res.data){
            this.$nextTick(() => {
              this.initChart4(res.data)
            })
          }
        })
      },
      getLowerRateByYear(){
        let params={
          yearStr:this.years3
        }
        lowerRateByYear(params).then(res => {
          for (var i=0; i<res.data.length; i++){
            res.data[i].rate=res.data[i].rate.toFixed(2)
          }
          this.xflList=res.data;
          if(res.data){
            this.$nextTick(() => {
              this.initChart5(res.data)
            })
          }
        })
      },
      getLowerRangeTenderType(){
        let params={
          yearStr:this.years4,
        }
        if(this.address){
          params.provinceId=this.address
        }
        lowerRangeTenderType(params).then(res => {

          for (var i=0; i<res.data.length; i++){
            for (let j=0; j<res.data[i].typeList.length; j++){
              if(res.data[i].typeList[j].tenderType === '施工'){
                res.data[i].sgRate=res.data[i].typeList[j].rate.toFixed(2)
              }
              if(res.data[i].typeList[j].tenderType === '勘察设计'){
                res.data[i].kcsjRate=res.data[i].typeList[j].rate.toFixed(2)
              }
              if(res.data[i].typeList[j].tenderType === '监理'){
                res.data[i].jlRate=res.data[i].typeList[j].rate.toFixed(2)
              }
            }
          }
          this.xmxflList=res.data;
          if(this.xmxflList){
            this.$nextTick(() => {
              this.initChart6(this.xmxflList)
            })
          }
        })
      },
      initChart1(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts1"))
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              axisLabel: { //坐标轴刻度标签的相关设置
                margin: 10, //刻度标签与轴线之间的距离
                color:"#666666",
                show: true,
                interval: 0
              },
              axisTick: false, //坐标轴刻度
              axisPointer: {
                type: 'shadow'
              },
              data: data.map(item => item.type),
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：个',
                nameLocation: 'start',
                nameTextStyle: {
                  padding: [0, 0, 0, -60],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: ['#FFFFFF']
                  }
                }
              },
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：万元',
                nameLocation: 'start',
                nameTextStyle: {
                  padding: [0, 0, 0, 72],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: ['#FFFFFF']
                  }
                }
              }
            ],
            grid: {
              top:30,
              left:70,
              right:100,
              bottom:30,
            },
            series: [
              {
                name:'中标金额（万元）',
                smooth: false, //平滑
                type:"line",
                symbolSize: 5,
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '万元'
                  }
                },
                itemStyle: {
                  color: '#14C9C9'
                },
                data:data.map(item => item.money),
              },
              {
                name:'中标总数（个）',
                type: 'bar',
                barWidth: 20,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '个';
                  }
                },
                itemStyle: {
                  normal:{
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#56A5FF'
                    }, {
                      offset: 1,
                      color: '#1B8EFF'
                    }])
                  }
                },
                data:data.map(item => item.count),
              }
            ]
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart2(data) {
        this.$nextTick(() => {
          // console.log(typeList)
          let myChart = echarts.init(document.getElementById("echarts2"))
          let seriesData=[]
          let color=['#FCD68A', '#67B3FD', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#FFE48A'];
          let typeNameList=data[0].projectType.map(item => item.type);
          let item={}
          for(var i=0; i<data.length; i++){
            for(var j=0; j<data[i].projectType.length; j++){
              item[typeNameList[j]] = [];
            }
          }
          for(var i=0; i<data.length; i++) {
            for (var j = 0; j < data[i].projectType.length; j++) {
              if(data[i].projectType[j].type === typeNameList[0]){
                item[typeNameList[0]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[1]){
                item[typeNameList[1]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[2]){
                item[typeNameList[2]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[3]){
                item[typeNameList[3]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[4]){
                item[typeNameList[4]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[5]){
                item[typeNameList[5]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[6]){
                item[typeNameList[6]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[7]){
                item[typeNameList[7]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[8]){
                item[typeNameList[8]].push(data[i].projectType[j].count)
              }
              if(data[i].projectType[j].type === typeNameList[9]){
                item[typeNameList[9]].push(data[i].projectType[j].count)
              }
            }
          }
          for(var i=0; i<typeNameList.length; i++) {
            seriesData.push({
              name:typeNameList[i],
              smooth: false, //平滑
              type:"line",
              symbolSize: 6, //折线拐点大小
              itemStyle: {
                normal: {
                  color: color[i], //图例颜色
                  borderWidth: 4,
                  borderColor: color[i],
                  lineStyle: { color: color[i], width: 2 }
                }
              },
              data:item[typeNameList[i]],
            });
          }
          let option ={
            // legend: {
            //   left: "center",
            //   bottom: 0,
            //   itemHeight:8,
            //   itemWidth:16,
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                label: {
                  backgroundColor: '#FFFFFF'
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                interval: 0
              },
              data: data.map(item => item.province),
            },
            yAxis: {
              type: 'value',
            },
            grid: {
              top:30,
              left:50,
              right:20,
              bottom:30,
            },
            color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD'],
            series: seriesData
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart3(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts3"))
          let option ={
            tooltip: {
              trigger: 'item',
              borderWidth:0,
              backgroundColor:"rgba(255, 255, 255, 0.8)",
              formatter: function (params) {
                var result = ''
                result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
                result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个 </p>'
                return result;
              },
              extraCssText:'width:150px!important;',
            },
            legend: {
              type: 'scroll',
              orient: 'horizontal',
              bottom: 0,
              data: data,
              itemHeight:8,
              itemWidth:12,
              pageButtonPosition: 'end',
            },
            color:['#8A82F3', '#5B9CF7', '#43BBE0','#8ECF95','#FFDC6B','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart4(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts4"))
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              axisLabel: { //坐标轴刻度标签的相关设置
                margin: 15, //刻度标签与轴线之间的距离
                color:"#666666",
              },
              axisTick: false, //坐标轴刻度
              axisPointer: {
                type: 'shadow'
              },
              data: data.map(item => item.year),
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：个',
                nameLocation: 'start',
                nameTextStyle: {
                  padding: [0, 0, 0, -60],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                }
              },
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：万元',
                nameLocation: 'start',
                nameTextStyle: {
                  padding: [0, 0, 0, 72],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: ['#FFFFFF']
                  }
                }
              }
            ],
            grid: {
              top:30,
              left:80,
              right:90,
              bottom:30,
            },
            series: [
              {
                name:'中标金额（万元）',
                smooth: false, //平滑
                type:"line",
                symbolSize: 6,
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '万元'
                  }
                },
                itemStyle: {
                  color: '#14C9C9'
                },
                data:data.map(item => item.sumMoney),
              },
              {
                name:'中标总数（个）',
                type: 'bar',
                barWidth: 20,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '个';
                  }
                },
                itemStyle: {
                  normal:{
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#56A5FF'
                    }, {
                      offset: 1,
                      color: '#1B8EFF'
                    }])
                  }
                },
                data:data.map(item => item.count),
              }
            ]
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart5(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts5"))
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              axisLabel: { //坐标轴刻度标签的相关设置
                margin: 10, //刻度标签与轴线之间的距离
                color:"#666666",
                // show: true,
                // interval: 0
              },
              axisTick: false, //坐标轴刻度
              axisPointer: {
                type: 'shadow'
              },
              data: data.map(item => item.label),
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：个',
                nameLocation: 'start',
                nameTextStyle: {
                  padding: [0, 0, 0, -60],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                }
              },
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：%',
                nameLocation: 'start',
                nameTextStyle: {
                  padding: [0, 0, 0, 72],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: ['#FFFFFF']
                  }
                }
              }
            ],
            grid: {
              top:30,
              left:70,
              right:70,
              bottom:30,
            },
            series: [
              {
                name:'下浮率',
                smooth: false, //平滑
                type:"line",
                symbolSize: 5,
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '%'
                  }
                },
                itemStyle: {
                  color: '#14C9C9'
                },
                data:data.map(item => item.rate),
              },
              {
                name:'统计项目数量',
                type: 'bar',
                barWidth: 18,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '个';
                  }
                },
                itemStyle: {
                  normal:{
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#56A5FF'
                    }, {
                      offset: 1,
                      color: '#1B8EFF'
                    }])
                  }
                },
                data:data.map(item => item.count),
              }
            ]
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart6(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts6"))
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                label: {
                  backgroundColor: '#FFFFFF'
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                interval: 0,
              },
              data: data.map(item => item.month),
            },
            yAxis: {
              type: 'value',
            },
            grid: {
              top:30,
              left:50,
              right:50,
              bottom:30,
            },
            color:['#D0FAB7', '#E9C8FF', '#81D5BC'],
            series: [
              {
                name:'勘察项目下浮率',
                smooth: false, //平滑
                type:"line",
                symbolSize: 6, //折线拐点大小
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    lineStyle: { width: 2 }
                  }
                },
                data:data.map(item => item.kcsjRate),
              },
              {
                name:'施工类项目下浮率',
                smooth: false, //平滑
                type:"line",
                symbolSize: 6, //折线拐点大小
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    lineStyle: { width: 2 }
                  }
                },
                data:data.map(item => item.sgRate),
              },
              {
                name:'监理类项目下浮率',
                smooth: false, //平滑
                type:"line",
                symbolSize: 6, //折线拐点大小
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    lineStyle: { width: 2 }
                  }
                },
                data:data.map(item => item.jlRate),
              },
            ]
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },

      //地区
      async dataRegion() {
        var str = [];
        for (let x = 0; x < 3; x++) {
          for (let i = 0; i < dataRegion.length; i++) {
            if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
              str.push({
                'id': dataRegion[i].id,
                "label": dataRegion[i].regionName,
                "short": dataRegion[i].short,
                "value": dataRegion[i].parentId,
                "children": []
              });
            }
          }
        }
        this.addressList = str;
      },
      handleYears(key){
        switch (key) {
          case 1:
            this.getCountBidByType()
            break;
          case 2:
            this.getCountBidGroupByProvince()
            break;
          case 3:
            this.getRangeBidMoney()
            break;
          case 5:
            this.getLowerRateByYear()
            break;
          case 6:
            this.getLowerRangeTenderType()
            break;
        }
      },
      handleSearch(){
        // console.log(this.address)
      },
      yearsData(){
        let mydate=new Date();
        let Year = mydate.getFullYear();
        let startyear=mydate.getFullYear()-4;
        let Years=[];
        for(var i=startyear;i<=Year;i++){
          Years.push(i);
        }
        this.yearOptions=Years.reverse()
      },
      formatStatus: function(row, column, cellValue) {
        return cellValue? cellValue : '-'
      },
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index === 1 || index === 3 || index === 5) {
            sums[index] = '-';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return Number(prev) + Number(curr)
            } else {
              return prev;
            }
          }, 0);

          if (index === 4) {
            sums[index] = Number(sums[index]).toFixed(2);
            return;
          }
        });
        return sums;
      },
      getSummaries1(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '平均下浮率';
            return;
          }
          if (index === 0 ||index === 3) {
            sums[index] = '-';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          let length=0
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              length=values.length
              return Number(prev) + Number(curr)
            } else {
              return prev;
            }
          }, 0);

          if (index === 2) {
            sums[index] = (Number(sums[index])/length).toFixed(2);
            return;
          }
        });
        return sums;
      },
      getSummaries2(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '平均下浮率';
            return;
          }
          if (index === 0) {
            sums[index] = '-';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          let length=0
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              length=values.length
              return Number(prev) + Number(curr)
            } else {
              return prev;
            }
          }, 0);

          if (index === 2||index === 3||index === 4) {
            sums[index] = (Number(sums[index])/length).toFixed(2);
            return;
          }
        });
        return sums;
      },

    }
  }
</script>

<style lang="scss" scoped>
  .zhongbiao{
    padding-top: 16px;
    .text_p{
      color: #999999;
      font-size: 14px;
      margin: 0;
    }
    .empty{
      margin: 0 auto;
      height: 300px;
      text-align: center;
      .img{
        width: 108px;
        height: 108px;
        margin-bottom: 24px;
        margin-top: 70px;
      }
      .p1{
        color: #333333;
        font-size: 16px;
      }
    }
    .query-params{
      .common-title{
        margin-right: 24px;
      }
      ::v-deep .form-content-width{
        width: 150px;
        .el-select__input{
          width: 10px !important;
          max-width: 10px !important;
          margin-left:0;
        }
      }
      ::v-deep .el-cascader{
        width: 220px;
        .el-cascader__tags{
          flex-wrap: inherit;
          .el-tag{
            max-width: 130px;
          }
        }
      }
    }
    .td_content{
      background: #ffffff;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px 52px 16px 16px;
    }
    .content_box{
      display: flex;
      justify-content: space-between;
      .box-left{
        width: 50%;
      }
      .box-right{
        width: 43%;
        float: right;
        ::v-deep .el-table{
          .sort-caret.ascending{
            border-bottom-color: rgba(0,129,255,0.5);
          }
          .ascending .sort-caret.ascending{
            border-bottom-color: #0081FF;
          }
          .sort-caret.descending{
            border-top-color: rgba(0,129,255,0.5);
          }
          .descending .sort-caret.descending{
            border-top-color: #0081FF;
          }

          .el-table__header-wrapper{
            background: #F0F3FA;
            th{
              background: #F0F3FA;
              /*text-align: left;*/
            }
          }
          .el-table__footer-wrapper{
            background: #F0F3FA;
          }
          th {
            font-size: 13px !important;
            font-weight: 400 !important;
          }
          .cell {
            padding-right: 12px !important;
            padding-left: 12px !important;
            line-height: 18px;
          }
          .el-table__fixed-header-wrapper{
            th{
              background: #F0F3FA;
            }
          }
          td.el-table__cell{
            border-bottom: 0;
          }
          tr{
            &.current-row>td{
              background-color: initial;
            }
            &:nth-child(2n) {
              background: #F8FBFF;
            }
          }
          .el-table__cell{
            height: 40px;
            padding: 0;
            line-height: 40px;
          }
          .el-table__body tr:hover > td.el-table__cell{
            background: #DCEBFF;
          }
          ::-webkit-scrollbar-track-piece {
            //滚动条凹槽的颜色，还可以设置边框属性
            background-color: #F3F4F5;
            height: 16px;
            padding: 0 4px;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F3F4F5;
            border-radius: 6px;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            height: 8px;
            margin: 0 4px;
            background: rgba(98,110,126,0.2);
            border: 4px solid rgba(98,110,126,0.2);;
            &:hover{
              background: #566380;
            }
          }
          .has-gutter{
            tr{
              th:nth-last-child(2){
                border-right:0;
              }
              td:nth-last-child(2){
                border-right:0;
              }
            }
          }
          .el-table__cell.gutter{
            background: #F0F3FA;
          }
          .el-table__row{
            td:last-child{
              .cell{
                padding-right: 12px !important;
              }
            }
          }
        }
      }
    }

    ::v-deep .el-input--medium{
      .el-input__icon{
        line-height: 32px;
      }
    }
  }
</style>
