<template>
  <div class="performance">
    <div class="content">
      <head-form
        ref="headForm"
        title="集团施工项目最新招标"
        :form-data="formData"
        :query-params="queryParams"
        @handle-search="handleSearch"
        :slots="true"
        :isExcel="false"
      ></head-form>
      <span class="check" @click="check">查看集团招标<i class="el-icon-arrow-right"></i></span>
      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
      <div class="table-item" v-if="!isSkeleton && tableData.length >0">
        <el-table class="fixed-table" :data="tableData" border max-height="235">
          <el-table-column label="项目名称" prop="title" min-width="350">
            <template slot-scope="scope">
              <router-link :to="`/radar/Notice/details/${scope.row.bid}`" tag="a" class="a-link" v-if="scope.row.bid" v-html="scope.row.title"></router-link>
              <div v-else v-html="scope.row.title || '--'"></div>
            </template>
          </el-table-column>
          <el-table-column label="发布日期" prop="issueTime" width="100"></el-table-column>
          <el-table-column label="招标成员" prop="tenderee" min-width="220">
            <template slot-scope="scope">
              <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.tendereeId)}`:`/company/${encodeStr(scope.row.tendereeId)}`" tag="a" class="a-link" v-if="scope.row.tendereeId&&scope.row.tenderee" v-html="scope.row.tenderee"></router-link>
              <div v-else v-html="scope.row.tenderee || '--'"></div>
            </template>
          </el-table-column>
          <el-table-column label="招标金额" prop="projectAmount" width="110">
            <template slot-scope="scope">
              {{scope.row.projectAmount ? scope.row.projectAmount : '--'}}{{scope.row.projectAmount ? '万元':''}}
            </template>
          </el-table-column>
          <el-table-column label="项目类型" prop="projectCategory" width="110"></el-table-column>
          <el-table-column label="代理单位" prop="agency" min-width="220">
            <template slot-scope="scope">
              <router-link :to="`/company/${encodeStr(scope.row.agencyId)}`" tag="a" class="a-link" v-if="scope.row.agencyId&&scope.row.agency" v-html="scope.row.agency"></router-link>
              <div v-else v-html="scope.row.agency || '--'"></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="empty" v-if="tableData.length === 0 && !isSkeleton">
        <img class="img" src="@/assets/images/project/empty.png">
        <div class="p1">抱歉，暂无数据展示</div>
      </div>
    </div>
    <div class="content">
      <head-form
        title="集团年度发包统计"
        :form-data="[]"
        :query-params="{}"
        :slots="true"
        :isExcel="false"
      ></head-form>
      <skeleton v-if="isSkeleton2" style="padding: 16px"></skeleton>
      <el-row v-if="!isSkeleton2">
        <el-col :span="12">
          <div id="ndzb-echarts" style="height: 280px;"></div>
        </el-col>
        <el-col :span="12">
          <div class="box-right">
            <div class="table-item">
              <el-table class="fixed-table" :data="ndzbList" border max-height="260">
                <el-table-column label="年度" prop="type" min-width="70"></el-table-column>
                <el-table-column label="历史发包数量" prop="count" width="120">
                  <template slot-scope="scope">
                    {{scope.row.count}}{{scope.row.count ? '个':''}}
                  </template>
                </el-table-column>
                <el-table-column label="历史发包总金额" prop="sum" width="140">
                  <template slot-scope="scope">
                    {{scope.row.sum ? scope.row.sum : '--'}}{{scope.row.sum ? '万元':''}}
                  </template>
                </el-table-column>
                <el-table-column label="发包金额最高成员" prop="companyName" min-width="200">
                  <template slot-scope="scope">
                    <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.companyId)}`:`/company/${encodeStr(scope.row.companyId)}`" tag="a" class="a-link" v-if="scope.row.companyId&&scope.row.companyName" v-html="scope.row.companyName"></router-link>
                    <div v-else v-html="scope.row.companyName || '--'"></div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <head-form
        title="集团施工项目发包金额区间"
        :form-data="[]"
        :query-params="{}"
        :slots="true"
        :isExcel="false"
      ></head-form>
      <div class="year">
        <el-select
          v-model="year1"
          clearable
          @change="changeSelect1"
          class="form-content-width"
          style="width: 80px">
          <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value"/>
        </el-select>
      </div>
      <skeleton v-if="isSkeleton3" style="padding: 16px"></skeleton>
      <el-row v-if="!isSkeleton3">
        <el-col :span="12">
          <div id="fbje-echarts" style="height: 280px;"></div>
        </el-col>
        <el-col :span="12">
          <div class="box-right">
            <div class="table-item">
              <el-table class="fixed-table" :data="jeqjList" border max-height="270">
                <el-table-column label="历史发包金额" prop="rangeName" min-width="120"></el-table-column>
                <el-table-column label="历史发包数量" prop="count">
                  <template slot-scope="scope">
                    {{scope.row.count}}{{scope.row.count ? '个':''}}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <head-form
        title="集团施工项目发包类型统计"
        :form-data="[]"
        :query-params="{}"
        :slots="true"
        :isExcel="false"
      ></head-form>
      <div class="year">
        <el-select
          v-model="year2"
          clearable
          @change="changeSelect2"
          class="form-content-width"
          style="width: 80px">
          <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value"/>
        </el-select>
      </div>
      <skeleton v-if="isSkeleton4" style="padding: 16px"></skeleton>
      <el-row v-if="!isSkeleton4">
        <el-col :span="12">
          <div id="lxtj-echarts" style="height: 280px;"></div>
        </el-col>
        <el-col :span="12">
          <div class="box-right">
            <div class="table-item">
              <el-table class="fixed-table" :data="lxtjList" border max-height="270">
                <el-table-column label="项目类型" prop="type" min-width="70"></el-table-column>
                <el-table-column label="发包数量" prop="count" width="120">
                  <template slot-scope="scope">
                    {{scope.row.count}}{{scope.row.count ? '个':''}}
                  </template>
                </el-table-column>
                <el-table-column label="发包总金额" prop="sum" width="140">
                  <template slot-scope="scope">
                    {{scope.row.sum ? scope.row.sum : '--'}}{{scope.row.sum ? '万元':''}}
                  </template>
                </el-table-column>
                <el-table-column label="发包金额最大成员" prop="companyName" min-width="200">
                  <template slot-scope="scope">
                    <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.companyId)}`:`/company/${encodeStr(scope.row.companyId)}`" tag="a" class="a-link" v-if="scope.row.companyId&&scope.row.companyName" v-html="scope.row.companyName"></router-link>
                    <div v-else v-html="scope.row.companyName || '--'"></div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <head-form
        title="施工项目下浮率统计"
        :form-data="[]"
        :query-params="{}"
        :slots="true"
        :isExcel="false"
      ></head-form>
      <div class="year">
        <el-select
          v-model="year3"
          clearable
          @change="changeSelect3"
          class="form-content-width"
          style="width: 80px">
          <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value"/>
        </el-select>
      </div>
      <skeleton v-if="isSkeleton5" style="padding: 16px"></skeleton>
      <el-row v-if="!isSkeleton5">
        <el-col :span="12">
          <div id="xfl-echarts" style="height: 280px;"></div>
        </el-col>
        <el-col :span="12">
          <div class="box-right">
            <div class="table-item">
              <el-table class="fixed-table" :data="xflList" border max-height="270">
                <el-table-column label="项目类型" prop="type" min-width="120"></el-table-column>
                <el-table-column label="统计项目数量" prop="count" min-width="150">
                  <template slot-scope="scope">
                    {{scope.row.count}}{{scope.row.count ? '个':''}}
                  </template>
                </el-table-column>
                <el-table-column label="下浮率区间" prop="lowerRate"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <head-form
        title="历史发包项目金额TOP10"
        :form-data="formData1"
        :query-params="queryParams1"
        @handle-search="handleSearch1"
        :slots="true"
        :isExcel="false"
      ></head-form>
      <skeleton v-if="isSkeleton6" style="padding: 16px"></skeleton>
      <div class="table-item" v-if="!isSkeleton6 && peojectTopData.length > 0">
        <el-table class="fixed-table" :data="peojectTopData" border max-height="235">
          <el-table-column label="项目名称" prop="projectName" min-width="350">
            <template slot-scope="scope">
              <router-link :to="`/biddetail/${scope.row.id}`" tag="a" class="a-link" v-if="scope.row.id" v-html="scope.row.projectName"></router-link>
              <div v-else v-html="scope.row.projectName || '--'"></div>
            </template>
          </el-table-column>
          <el-table-column label="中标日期" prop="winBidTime" width="100"></el-table-column>
          <el-table-column label="中标金额" prop="winBidAmount" width="130">
            <template slot-scope="scope">
              {{scope.row.winBidAmount ? scope.row.winBidAmount : '--'}}{{scope.row.winBidAmount ? '万元':''}}
            </template>
          </el-table-column>
          <el-table-column label="项目类型" prop="projectTypeNew" width="100"></el-table-column>
          <el-table-column label="招标成员" prop="projectUnit" min-width="250">
            <template slot-scope="scope">
              <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.projectUnitId)}`:`/company/${encodeStr(scope.row.projectUnitId)}`" tag="a" class="a-link" v-if="scope.row.projectUnitId&&scope.row.projectUnit" v-html="scope.row.projectUnit"></router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.projectUnitId)}`:`/company/${encodeStr(scope.row.projectUnitId)}`">
              <div v-else v-html="scope.row.projectUnit || '--'"></div>
            </template>
          </el-table-column>
          <el-table-column label="中标单位" prop="companyName" min-width="250">
            <template slot-scope="scope">
              <router-link :to="`/company/${encodeStr(scope.row.companyId)}`" tag="a" class="a-link" v-if="scope.row.companyId&&scope.row.companyName" v-html="scope.row.companyName"></router-link>
              <div v-else v-html="scope.row.companyName || '--'"></div>
            </template>
          </el-table-column>
          <el-table-column label="代理单位" prop="agency" min-width="250">
            <template slot-scope="scope">
              <router-link :to="`/company/${encodeStr(scope.row.agencyId)}`" tag="a" class="a-link" v-if="scope.row.agencyId&&scope.row.agency" v-html="scope.row.agency"></router-link>
              <div v-else v-html="scope.row.agency || '--'"></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="empty" v-if="peojectTopData.length === 0 && !isSkeleton6">
        <img class="img" src="@/assets/images/project/empty.png">
        <div class="p1">抱歉，暂无数据展示</div>
      </div>
    </div>
  </div>

</template>

<script>
  import * as echarts from 'echarts';
  import mixin from '../../party-a/mixins/mixin'
  import {recentlyBid,bidByYear,groupByMoney,groupByType,groupByLowerRate,peojectTop} from '@/api/detail/groupAccount/groupAccount'
  import { getDictType } from '@/api/main'
  export default {
    name: 'qualifications',
    props: ['customerId'],
    mixins: [mixin],
    components:{},
    data(){
      return{
        queryParams: {
          combineId: this.customerId,
        },
        queryParams1: {
          combineId: this.customerId,
        },
        formData: [
          { type: 4, fieldName: 'type', value: '', placeholder: '项目类型', options: [],width:150, uid: this.getUid()},
          { type: 1, fieldName: 'cgbl', value: '', placeholder: '持股比例', options: [],width:110, uid: this.getUid()},
          { type: 1, fieldName: 'year', value: '2023年', placeholder: '年份', options: [],width:100, uid: this.getUid()},
        ],
        formData1: [
          { type: 4, fieldName: 'type', value: '', placeholder: '项目类型', options: [],width:150, uid: this.getUid()},
          { type: 1, fieldName: 'cgbl', value: '', placeholder: '持股比例', options: [],width:110, uid: this.getUid()},
          { type: 1, fieldName: 'year', value: '2023年', placeholder: '年份', options: [],width:100, uid: this.getUid()},
        ],
        cgblList: [
          {name:'100%',value:'100%'},
          {name:'50%以上',value:'50%以上'},
          {name:'20%以上',value:'20%以上'},
          {name:'5%以上',value:'5%以上'},
          {name:'1%-5%',value:'1%-5%'},
        ],
        tableData:[],
        lxtjList:[],
        jeqjList:[],
        xflList:[],
        peojectTopData:[],
        ndzbList:[],
        yearOptions:[],
        year1:'2023年',
        year2:'2023年',
        year3:'2023年',
        isSkeleton:true,
        isSkeleton2:true,
        isSkeleton3:true,
        isSkeleton4:true,
        isSkeleton5:true,
        isSkeleton6:true,
      }
    },
    created() {
      this.formData[1].options=this.cgblList;
      this.formData1[1].options=this.cgblList;
      this.yearsData()
      //项目类型
      getDictType('project_type_new').then(result=>{
        let data = result.code == 200 ? result.data:[];
        if(data.length > 0){
          for (var i=0;i<data.length;i++){
            this.formData[0].options.push({
              name: data[i].dictLabel,
              value: data[i].dictValue,
            })
            this.formData1[0].options.push({
              name: data[i].dictLabel,
              value: data[i].dictValue,
            })
          }
        }
      })

      this.handleQuery()
      this.getBidByYear()
      this.getGroupByMoney()
      this.getGroupByType()
      this.getGroupByLowerRate()
      this.getPeojectTop()
    },
    methods: {
      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({
            name: i+'年',
            value: i+'年',
          })
        }
        this.yearOptions=Years.reverse()
        this.formData[2].options=Years
        this.formData1[2].options=Years
      },
      handleQuery(params){
        // this.isSkeleton = true
        let data = params || this.queryParams;
        if(data.cgbl){
          if(data.cgbl === '100%'){
            data.minStockPercent=1
          }
          if(data.cgbl === '50%以上'){
            data.minStockPercent=0.5
          }
          if(data.cgbl === '20%以上'){
            data.minStockPercent=0.2
          }
          if(data.cgbl === '5%以上'){
            data.minStockPercent=0.05
          }
          if(data.cgbl === '1%-5%'){
            data.minStockPercent=0.01
            data.maxStockPercent=0.05
          }
          delete data.cgbl
        }
        if(data.year){
          data.year=[data.year.toString().substr(0, 4)]
        }
        delete data.pageNum
        recentlyBid(data).then(res=>{
          this.isSkeleton = false
          if(res.code === 200){
            this.tableData = res.data;
          }else {
            this.tableData = []
          }
        })
      },
      getBidByYear(){
        bidByYear({combineId:this.customerId}).then(res=>{
          this.isSkeleton2 = false
          if(res.code === 200){
            this.ndzbList=res.data;
            if(res.data.length > 0){
              this.initChart(res.data)
            }
          }
        })
      },
      getGroupByMoney(){
        let year=''
        if(this.year1){
          year=[this.year1.toString().substr(0, 4)]
        }
        groupByMoney({combineId:this.customerId,year:year}).then(res=>{
          this.isSkeleton3 = false
          if(res.code === 200){
            this.jeqjList=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;
              list.push(obj)
            }
            if(res.data.length > 0){
              this.initChart2(list)
            }
          }
        })
      },
      getGroupByType(){
        let year=''
        if(this.year2){
          year=[this.year2.toString().substr(0, 4)]
        }
        groupByType({combineId:this.customerId,year:year}).then(res=>{
          this.isSkeleton4 = false
          if(res.code === 200){
            this.lxtjList=res.data;
            if(res.data.length > 0){
              this.initChart3(res.data)
            }
          }
        })
      },
      getGroupByLowerRate(){
        let year=''
        if(this.year3){
          year=[this.year3.toString().substr(0, 4)]
        }
        groupByLowerRate({combineId:this.customerId,year:year}).then(res=>{
          this.isSkeleton5 = false
          if(res.code === 200){
            this.xflList=res.data;
            if(res.data.length > 0){
              this.initChart4(res.data)
            }
          }
        })
      },
      getPeojectTop(params){
        console.log(params)
        let data = params || this.queryParams1;
        if(data.cgbl){
          if(data.cgbl === '100%'){
            data.minStockPercent=1
          }
          if(data.cgbl === '50%以上'){
            data.minStockPercent=0.5
          }
          if(data.cgbl === '20%以上'){
            data.minStockPercent=0.2
          }
          if(data.cgbl === '5%以上'){
            data.minStockPercent=0.05
          }
          if(data.cgbl === '1%-5%'){
            data.minStockPercent=0.01
            data.maxStockPercent=0.05
          }
          delete data.cgbl
        }
        if(data.year){
          data.year=[data.year.toString().substr(0, 4)]
        }
        delete data.pageNum
        peojectTop(data).then(res=>{
          this.isSkeleton6 = false
          if(res.code === 200){
            this.peojectTopData = res.data;
          }else {
            this.peojectTopData = []
          }
        })
      },
      formParams1(){
        let condtion = {}
        let reqData = {}
        this.formData1&&this.formData1.forEach(item => {
          if(item.value || (item.value && item.value.length) || item.value===0) {
            if(item.fieldName == 'time') {
              condtion[item.startTime] = item.value[0];
              condtion[item.endTime] = item.value[1];
              return
            }
            if(item.fieldName == 'money') {
              condtion[item.startMoney] = item.value[0];
              condtion[item.endMoney] = item.value[1];
              return
            }
            condtion[item.fieldName] = item.value
          }
        })
        Object.keys(condtion).forEach(key => {
          if(condtion[key] || condtion[key]===0) {
            if(Array.isArray(condtion[key]) && condtion[key].length == 0){
              delete condtion[key]
            }
            reqData[key] = condtion[key]
          }
        })
        if(this.queryParams1 && Object.keys(this.queryParams1)) {
          reqData = Object.assign(reqData, this.queryParams1)
        }
        return reqData
      },
      handleSearch1(){
        let params = this.formParams1()
        this.getPeojectTop(params)
      },
      changeSelect1(){
        this.getGroupByMoney()
      },
      changeSelect2(){
        this.getGroupByType()
      },
      changeSelect3(){
        this.getGroupByLowerRate()
      },
      initChart(data) {
        this.$nextTick(()=>{
          // 让  指定id 的 div 的_echarts_instance_属性值 为 空状态
          document.getElementById("ndzb-echarts").removeAttribute('_echarts_instance_');
          let myChart = echarts.init(document.getElementById("ndzb-echarts"))
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            legend: {
              data: [
                {
                  name: '招标数量',
                  // icon: 'rect',
                },
                {
                  name: '招标金额(万元）',
                  // icon: 'circle',
                }
              ],
              top: 0,
              right:30,
              itemHeight: 10,
              itemWidth: 10,
              textStyle: {
                fontSize: 12
              },
            },
            xAxis: {
              type: 'category',
              axisLabel: { //坐标轴刻度标签的相关设置
                margin: 15, //刻度标签与轴线之间的距离
                color:"#666666"
              },
              axisTick: false, //坐标轴刻度
              axisPointer: {
                type: 'shadow'
              },
              data: data.map(item => item.type),
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 10, 0, -60],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                }
              },
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 0, 0, 100],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: ['#FFFFFF']
                  }
                }
              }
            ],
            grid: {
              top:40,
              left:80,
              right:130,
              bottom:30,
            },
            series: [
              {
                name:'招标金额(万元）',
                smooth: false, //平滑
                type:"line",
                symbolSize: 6,
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value
                  }
                },
                itemStyle: {
                  normal:{
                    color: '#14C9C9',
                    lineStyle: {
                      width:2
                    },
                  }
                },
                data:data.map(item => item.sum),
              },
              {
                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'
                    }]),
                    // barBorderRadius:[20,20, 0, 0]
                  }
                },
                data:data.map(item => item.count),
              }
            ]
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart2(data) {
        this.$nextTick(() => {
          document.getElementById("fbje-echarts").removeAttribute('_echarts_instance_');
          let myChart = echarts.init(document.getElementById("fbje-echarts"))
          let option ={
            tooltip: {
              trigger: 'item',
              borderWidth:0,
              backgroundColor:"rgba(255, 255, 255, 0.8)",
              formatter: function (params) {
                var result = ''
                result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.name +'</p>'
                result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个</p>'
                return result;
              },
              extraCssText:'width:96px!important;',
            },
            legend: {
              type: 'scroll',
              orient: 'horizontal',
              bottom: 0,
              data: data,
              itemHeight:8,
              itemWidth:12,
              pageButtonPosition: 'end',
            },
            color:['#6395F9', '#6ADCAE', '#6D7E9C','#F7C42D','#F78F2D'],
            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();//图表跟随页面大小变化宽度
          });
        })

      },
      initChart3(data) {
        this.$nextTick(()=>{
          document.getElementById("lxtj-echarts").removeAttribute('_echarts_instance_');
          let myChart = echarts.init(document.getElementById("lxtj-echarts"))
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              },
              formatter: function (params) {
                var relVal = params[0].name;
                // relVal+='<br/>' +"<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#f17f0a;\"></span>" + '次数' +": "+ array[0][relVal.replace(/"/g, '')]
                for (var i = 0, l = params.length; i < l; i++) {
                  relVal += '<br/>' + params[i].marker + params[i].seriesName +": "+ params[i].value
                }
                return relVal
              }
            },
            legend: {
              data: [
                {
                  name: '招标数量',
                  // icon: 'rect',
                },
                {
                  name: '招标金额(万元）',
                  // icon: 'circle',
                }
              ],
              top: 0,
              right:30,
              itemHeight: 10,
              itemWidth: 10,
              textStyle: {
                fontSize: 12
              },
            },
            xAxis: {
              type: 'category',
              axisLabel: { //坐标轴刻度标签的相关设置
                margin: 15, //刻度标签与轴线之间的距离
                color:"#666666"
              },
              axisTick: false, //坐标轴刻度
              axisPointer: {
                type: 'shadow'
              },
              data: data.map(item => item.type),
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 10, 0, -60],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                }
              },
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 0, 0, 100],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: ['#FFFFFF']
                  }
                }
              }
            ],
            grid: {
              top:40,
              left:80,
              right:130,
              bottom:30,
            },
            series: [
              {
                name:'招标金额(万元）',
                smooth: false, //平滑
                type:"line",
                symbolSize: 6,
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value
                  }
                },
                itemStyle: {
                  normal:{
                    color: '#14C9C9',
                    lineStyle: {
                      width:2
                    },
                  }
                },
                data:data.map(item => item.sum),
              },
              {
                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'
                    }]),
                    // barBorderRadius:[20,20, 0, 0]
                  }
                },
                data:data.map(item => item.count),
              }
            ]
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart4(data) {
        this.$nextTick(()=>{
          document.getElementById("xfl-echarts").removeAttribute('_echarts_instance_');
          let myChart = echarts.init(document.getElementById("xfl-echarts"))
          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.type),
            },
            legend: {
              data: [
                {
                  name: '统计项目数量',
                  // icon: 'rect',
                },
              ],
              top: 0,
              right:30,
              itemHeight: 10,
              itemWidth: 10,
              textStyle: {
                fontSize: 12
              },
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 10, 0, -60],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                }
              },
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 0, 0, 100],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: ['#FFFFFF']
                  }
                }
              }
            ],
            grid: {
              top:30,
              left:80,
              right:130,
              bottom:30,
            },
            series: [
              // {
              //   name:'统计项目数量',
              //   smooth: false, //平滑
              //   type:"line",
              //   symbolSize: 6,
              //   yAxisIndex: 1,
              //   tooltip: {
              //     valueFormatter: function (value) {
              //       return value
              //     }
              //   },
              //   itemStyle: {
              //     normal:{
              //       color: '#14C9C9',
              //       lineStyle: {
              //         width:2
              //       },
              //     }
              //   },
              //   data:data.map(item => item.lowerRate),
              // },
              {
                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'
                    }]),
                    // barBorderRadius:[20,20, 0, 0]
                  }
                },
                data:data.map(item => item.count),
              }
            ]
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .performance{
    @import "@/assets/styles/search-common.scss";
    /*height: calc(100% - 64px);*/
    .content{
      background: #ffffff;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 16px;
      min-height: 360px;
      position: relative;
      .check{
        position: absolute;
        right: 16px;
        top:53px;
        color: #0081FF;
        font-size: 12px;
        cursor: pointer;
        i{
          margin-left: 4px;
        }
      }
      .year{
        position: absolute;
        right: 16px;
        top:8px;
        ::v-deep  .form-content-width{
          .el-input__inner{
            border: 0;
            height: 30px;
            line-height: 30px;
            padding:5px 28px 5px 8px;
          }
          .el-input__icon{
            line-height: 30px;
          }
        }

      }
      .table-item{
        ::v-deep .el-table{
          .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;
              }
            }
          }
        }
      }
      .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;
        }
      }
    }
  }
</style>
