<template>
  <div class="performance">
    <head-form-new
      style="padding: 16px 16px 8px 16px;"
      ref="headForm"
      title="集团业绩"
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      :isTotal="false"
      :headerFixed="true"
      :isExcel="false"
      @handle-search="handleSearch"
      @handle-excel="clickDialog"
    >
      <template slot="slot">

      </template>
    </head-form-new>

    <div style="height: 12px;background: #f5f5f5;margin-top: 16px ">

    </div>
    <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>

    <p class="head-p" style="font-size: 12px;margin: 12px 0 8px 0;padding: 0 16px;" v-if="!isSkeleton">
      <span class="ability-total">共有{{ tableDataTotal }}条</span>
      项目中标中金额<span style="color:#E6A23C;padding-left: 4px;">{{sumMoney}}万元</span>

      <span class="flex-box ability-excel" @click="clickDialog"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
    </p>
    <div class="chart" v-if="echartsDataState === false && !isSkeleton">
      <div class="chart-left">
        <div class="echarts-item">
          <div class="echarts-title">项目类型分布</div>
          <div id="echarts1" style="height: 240px"></div>
        </div>
        <div class="echarts-item">
          <div class="echarts-title">项目地区分布</div>
          <div id="echarts2" style="height: 240px"></div>
        </div>
      </div>
      <div class="chart-right" @click="handledialog">
        更<br/>多<br/>分<br/>析<br/>
        <i class="el-icon-more"></i>
      </div>
    </div>

    <tables
      style="padding: 0 16px;"
      v-if="!isSkeleton"
      :defaultSort="defaultSort"
      :tableLoading="tableLoading"
      :tableData="tableData"
      :forData="forData"
      :headerFixed="true"
      :MaxPage=500
      :tableDataTotal="tableDataTotal"
      :queryParams="queryParams"
      @handle-current-change="handleCurrentChange"
      @sort-change="sortChange"
    >
      <template slot="bidTime" slot-scope="scope">
        <div>{{formatDate(scope.row.bidTime)}}</div>
      </template>
      <template slot="companyName" 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>
      <template slot="projectName" slot-scope="scope">
        <router-link :to="`/biddetail/${scope.row.projectId}`" tag="a" class="a-link" v-if="scope.row.projectId" v-html="scope.row.projectName"></router-link>
        <div v-else v-html="scope.row.projectName || '--'"></div>
      </template>
      <template slot="projectUnit" slot-scope="scope">
        <router-link :to="scope.row.projectUnitUipId?`/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>
        <div v-else v-html="scope.row.projectUnit || '--'"></div>
      </template>
      <template slot="stockPercent" slot-scope="scope">
        <div>{{scope.row.stockPercent || '--'}}{{scope.row.stockPercent ?  '%':''}}</div>
      </template>
      <template slot="bidAmount" slot-scope="scope">
        <div>{{scope.row.bidAmount || '--'}}{{scope.row.bidAmount ?  '万元':''}}</div>
      </template>
    </tables>

    <ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>

    <el-dialog title="集团业绩宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
      <div class="echarts-content">
        <div class="echarts-item">
          <div class="echarts-title">项目类型分布</div>
          <div id="echarts-xmlx" style="height: 260px"></div>
        </div>
        <div class="echarts-item">
          <div class="echarts-title">项目地区分布</div>
          <div id="echarts-xmdq" style="height: 260px"></div>
        </div>
        <div class="echarts-item">
          <div class="echarts-title">项目投资额分布</div>
          <div id="echarts-xmtz" style="height: 260px"></div>
        </div>
        <div class="echarts-item">
          <div class="echarts-title">业绩类型分布</div>
          <div id="echarts-xmjb" style="height: 260px"></div>
        </div>
        <div class="echarts-item" style="width: 100%;">
          <div class="echarts-title">合作项目数前十业主</div>
          <div id="echarts-tze" style="height: 260px"></div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import mixin from '../../party-a/mixins/mixin'
  import {businessList,exportWinBid,recentlyStatis} from '@/api/detail/groupAccount/groupAccount'
  import dataRegion from '@/assets/json/dataRegion1'
  import { getDictType } from '@/api/main'
  import ExportDialog from "../../../component/export-dialog"
  import * as echarts from 'echarts';
  export default {
    name: 'qualifications',
    props: ['customerId','combineName'],
    mixins: [mixin],
    components:{ExportDialog},
    watch:{
      // customerId: {
      //   handler(newVal, olVal) {
      //     if (newVal) {
      //       this.queryParams.combineId=newVal;
      //       this.handleQuery()
      //     }
      //   },
      //   deep: true, // 深度监听
      // },
    },
    data(){
      return{
        isSkeleton:true,
        tableLoading:false,
        isDetails: false,
        defaultSort: {prop: 'time', order: 'descending'},
        queryParams: {
          combineId: this.customerId,
          pageNum: 1,
          pageSize: 20
        },
        forData: [
          {label: '中标时间', prop: 'bidTime',slot: true,minWidth: '80'},
          {label: '中标成员', prop: 'companyName', slot: true,minWidth: '190'},
          {label: '持股比例', prop: 'stockPercent',slot: true,minWidth: '80'},
          {label: '项目名称', prop: 'projectName', slot: true,minWidth: '260'},
          {label: '中标金额', prop: 'bidAmount',slot: true,minWidth: '110'},
          {label: '中标地区', prop: 'address',minWidth: '130'},
          {label: '业绩类型', prop: 'boundType',minWidth: '80'},
          {label: '项目类型', prop: 'projectType',minWidth: '80'},
          {label: '业主单位', prop: 'projectUnit', slot: true,minWidth: '190'},
        ],
        formData: [
          { type: 7, fieldName: 'province', value: '',props: {multiple: true,value: 'id',expandTrigger: 'hover'}, placeholder: '项目地区', options:[], uid: this.getUid()},
          { type: 5, fieldName: 'time', value: '', placeholder: '中标时间', startTime: 'startBidTime', endTime: 'endBidTime',timeList:[],dateTo:this.formatDate(new Date()) , uid: this.getUid()},
          { type: 6, fieldName: 'money', value: '', placeholder: '中标金额', startMoney: 'minAmount', endMoney: 'maxAmount',moneyList:[], uid: this.getUid() },
          { type: 4, fieldName: 'boundTypes', value: '', placeholder: '业绩类型', options: [], uid: this.getUid()},
          { type: 4, fieldName: 'projectTypes', value: '', placeholder: '项目类型', options: [], uid: this.getUid()},
          { type: 1, fieldName: 'cgbl', value: '', placeholder: '持股比例', options: [],width:100, uid: this.getUid()},
          // { type: 3, fieldName: 'searchValue', value: '', placeholder: '搜索中标成员名称/项目名称'},
          { type: 3, fieldName: 'searchValue', value: '', placeholder: '输入关键词查询', uid: this.getUid()},
        ],
        tableData:[],
        tableDataTotal:0,
        addressList: [],
        cgblList: [
          {name:'100%',value:'100%'},
          {name:'50%以上',value:'50%以上'},
          {name:'20%以上',value:'20%以上'},
          {name:'5%以上',value:'5%以上'},
          {name:'1%-5%',value:'1%-5%'},
        ],
        timeList: ['近三天', '近七天', '近半月', '自定义'],
        moneyList: ['5000万以下', '5000万-1亿', '1亿-5亿', '5亿-10亿','10亿以上', '自定义'],
        dataEXCEL:{},
        exportData:{
          title:'集团业绩',
          dialogExportVisible:false,
          forData: [
            {label: '中标时间', prop: 'bidTime',slot: true,minWidth: '100'},
            {label: '中标成员', prop: 'companyName', slot: true,minWidth: '160'},
            {label: '持股比例', prop: 'stockPercent',slot: true,minWidth: '80'},
            {label: '项目名称', prop: 'projectName', slot: true,minWidth: '260'},
            {label: '中标金额', prop: 'bidAmount',slot: true,minWidth: '140'},
            {label: '中标地区', prop: 'address',minWidth: '100'},
            {label: '业绩类型', prop: 'boundType',minWidth: '80'},
            {label: '项目类型', prop: 'projectType',minWidth: '80'},
            {label: '业主单位', prop: 'projectUnit', slot: true,minWidth: '160'},
          ],
          exportTableData:[
            {
              bidTime:'2023-11-07',
              companyName:'XXX集团有限公司',
              stockPercent:'1.56%',
              projectName:'新建沪渝蓉高铁武汉至宜昌段汉川东至宜昌北通信系统及铁塔静态验...',
              bidAmount:'303.837529万元',
              address:'辽宁省',
              boundType:'施工',
              projectType:'铁路工程',
              projectUnit:'xxx有限责任公司',
            },
            {
              bidTime:'2023-11-07',
              companyName:'XXX集团有限公司',
              stockPercent:'1.24%',
              projectName:'国电电力-胜利电厂-灵活性改造可行性研究报告编制',
              bidAmount:'465万元',
              address:'云南省',
              boundType:'施工',
              projectType:'铁路工程',
              projectUnit:'xxx有限责任公司',
            },
          ],
          exportEXCEL:false
        },
        dialogEchartsVisible:false,
        echartsDataState:false,
        echartsData:{},
        sumMoney:0
      }
    },
    created() {
      this.dataRegion()
      this.handleQuery()
      this.formData[1].timeList=this.timeList;
      this.formData[2].moneyList=this.moneyList;
      this.formData[5].options=this.cgblList;

      //业绩类型
      getDictType('bound_type').then(result=>{
        let data = result.code == 200 ? result.data:[];
        if(data.length > 0){
          for (var i=0;i<data.length;i++){
            this.formData[3].options.push({
              name: data[i].dictLabel,
              value: data[i].dictValue,
            })
          }
        }
      })
      //项目类型
      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[4].options.push({
              name: data[i].dictLabel,
              value: data[i].dictValue,
            })
          }
        }
      })


    },
    methods: {
      handleQuery(params){
        this.isSkeleton = true
        let data = this.getAreaList(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
        }
        this.dataEXCEL=JSON.parse(JSON.stringify(data));
        businessList(data).then(res=>{
          this.tableData = res.code == 200 ? res.rows:[]
          this.tableDataTotal = res.total
          this.tableLoading = false;
          recentlyStatis(data).then(res=>{
            this.isSkeleton = false
            if(res.code === 200 && res.data){
              this.echartsDataState=false;
              this.sumMoney=res.data.sumMoney
              this.echartsData=res.data;
              this.initChart(res.data)
            }else {
              this.echartsDataState=true;
            }
          })
        })
      },
      formatDate(timestamp) {
        var time = new Date(timestamp)
        let year = time.getFullYear();
        let month = time.getMonth() + 1 >= 10 ? parseInt(time.getMonth() + 1) : "0" + parseInt(time.getMonth() + 1);
        let day = time.getDate() >= 10 ? time.getDate() : "0" + time.getDate();
        return year + '-' + month + '-' + day
      },
      //地区
      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": []
              });
            } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
              for (let j = 0; j < str.length; j++) {
                if (str[j].id == dataRegion[i].parentId) {
                  str[j].children.push({
                    'id': dataRegion[i].id,
                    "label": dataRegion[i].regionName,
                    "short": dataRegion[i].short,
                    "value": dataRegion[i].parentId,
                    "children": []
                  });
                }
              }
            } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
              for (let j = 0; j < str.length; j++) {
                for (let k = 0; k < str[j].children.length; k++) {
                  if (str[j].children[k].id == dataRegion[i].parentId) {
                    str[j].children[k].children.push({
                      'id': dataRegion[i].id,
                      "label": dataRegion[i].regionName,
                      "short": dataRegion[i].short,
                      "value": dataRegion[i].parentId
                      // "children":[]
                    });
                  }
                }
              }
            }
          }
        }
        for (var i=0; i<str.length; i++) {
          if (str[i].children.length) {

          } else {
            delete str[i].children
          }
        }
        this.addressList = str;
        this.formData[0].options=str;
      },
      getAreaList(params){
        if(params.province&&params.province.length>0){
          let arr = this.$children[0].$refs.cascader[0].getCheckedNodes()
          let provinceIds = [], cityIds = [], districtIds = []
          for (var i in arr) {
            if (arr[i].parent) {
              if (!arr[i].parent.checked) {
                if(arr[i].hasChildren || arr[i].level==2){
                  cityIds.push(arr[i].data.id)
                }else{
                  districtIds.push(arr[i].data.id)
                }
              }
            } else {
              provinceIds.push(arr[i].data.id)
            }
          }
          delete params.province
          provinceIds.length>0?params.provinceIds = provinceIds:''
          cityIds.length>0?params.cityIds = cityIds:''
          districtIds.length>0?params.districtIds = districtIds:''
        }
        return params
      },
      //分页
      handleCurrentChange(e){
        let params = this.formParams()
        params.pageNum = e
        this.queryParams.pageNum = e
        this.handleQuery(params)
        this.$emit('handle-scroll')
      },
      clickDialog(){
        this.exportData.dialogExportVisible=true;
      },
      clickEXCEL(value,title) {
        if(this.tableData.length === 0){
          this.$message.error('当前信息列表数据为空，请重新筛选数据');
          return
        }
        if(value > 2000){
          return
        }
        this.dataEXCEL.exportExeclName=title;
        if(value){
          this.dataEXCEL.exportCount=value
        }else {
          this.dataEXCEL.exportCount=2000;
        }
        exportWinBid(this.dataEXCEL).then(res=>{
          if(res.code === 200){
            this.exportData.exportEXCEL=true;
          }else {
            this.$message.error(res.msg);
          }
        })
      },
      cancel(){
        this.exportData.dialogExportVisible=false;
        this.exportData.exportEXCEL={}
      },
      handledialog(){
        this.dialogEchartsVisible=true;
        this.initChart1(this.echartsData)
      },
      initChart(row) {
        var data=[];
        for(let key in row.projectTypeList){
          for(const i in row.projectTypeList[key]){
            var obj={};
            obj.name=i;
            obj.value=row.projectTypeList[key][i];
            data.push(obj)
          }
        }
        var data1=[];
        for(let key in row.provinceList){
          for(const i in row.provinceList[key]){
            var obj={};
            obj.name=i;
            obj.value=row.provinceList[key][i];
            data1.push(obj)
          }
        }

        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts1"))
          let option ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '85%',
                center: ['50%', '50%'],
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart.setOption(option);
          let myChart1 = echarts.init(document.getElementById("echarts2"))
          let option1 ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '85%',
                center: ['50%', '50%'],
                data: data1,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart1.setOption(option1);

          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
            myChart1.resize();//图表跟随页面大小变化宽度
          });
        })

      },
      initChart1(row) {
        let data=[];
        for(let key in row.projectTypeList){
          for(const i in row.projectTypeList[key]){
            let obj={};
            obj.name=i;
            obj.value=row.projectTypeList[key][i];
            data.push(obj)
          }
        }
        let data1=[];
        for(let key in row.provinceList){
          for(const i in row.provinceList[key]){
            let obj={};
            obj.name=i;
            obj.value=row.provinceList[key][i];
            data1.push(obj)
          }
        }

        let data2=[]
        for(let i=0; i<row.moneyRange.length; i++){
          let obj={};
          obj.name=row.moneyRange[i].rangeName;
          obj.value=row.moneyRange[i].rate;
          data2.push(obj)
        }

        let data3=[];
        for(let key in row.boundTypeList){
          for(const i in row.boundTypeList[key]){
            let obj={};
            obj.name=i;
            obj.value=row.boundTypeList[key][i];
            data3.push(obj)
          }
        }
        let data4=[];
        for(let key in row.topTenCompany){
          for(const i in row.topTenCompany[key]){
            let obj={};
            obj.name=i;
            obj.value=row.topTenCompany[key][i];
            data4.push(obj)
          }
        }

        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts-xmlx"))
          let option ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '75%',
                center: ['50%', '50%'],
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart.setOption(option);

          let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
          let option1 ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '75%',
                center: ['50%', '50%'],
                data: data1,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart1.setOption(option1);

          let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
          let option2 ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '75%',
                center: ['50%', '50%'],
                data: data2,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart2.setOption(option2);

          let myChart3 = echarts.init(document.getElementById("echarts-xmjb"))
          let option3 ={
            tooltip: {
              trigger: 'item',
            },
            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
            series: [
              {
                type: 'pie',
                radius: '75%',
                center: ['50%', '50%'],
                data: data3,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myChart3.setOption(option3);

          let myChart4 = echarts.init(document.getElementById("echarts-tze"))
          let option4 ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                formatter: function (params) {
                  var str = "";                 // 最终拼接成的字符串
                  var paramsLen = params.length;// 获取每项文字的个数
                  var len = 6;                  // 每行能显示的字的个数（根据实际情况自己设置）
                  var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                  if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
                    for (var i = 0; i < rowNumber; i++) {
                      var temp = "";            // 表示每一次截取的字符串
                      var start = i * len;      // 开始截取的位置
                      var end = start + len;    // 结束截取的位置
                      if (i == rowNumber - 1) { // 最后一次不换行
                        temp = params.substring(start, paramsLen);
                      } else {                  // 每一次拼接字符串并换行
                        temp = params.substring(start, end) + "\n";
                      }
                      str += temp;              // 最终拼成的字符串
                    }
                  } else {                      // 给新的字符串赋值
                    str = params;
                  }
                  return str;                   //返回字符串
                }
              },
              axisTick: false, //坐标轴刻度
              axisPointer: {
                type: 'shadow'
              },
              data: data4.map(item => item.name),
            },
            yAxis: [
              {
                type: 'value',
                axisLabel: { //坐标轴刻度标签的相关设置
                  color:"#666666"
                },
                name: '单位：亿元',
                nameLocation: 'end',
                nameTextStyle: {
                  padding: [0, 10, 0, -30],    // 四个数字分别为上右下左与原位置距离
                  color: '#666666',
                }
              },
            ],
            grid: {
              top:40,
              left:60,
              right:20,
              bottom:50,
            },
            series: [
              {
                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: '#E49708'
                    }, {
                      offset: 1,
                      color: '#E49708'
                    }]),
                    // barBorderRadius:[20,20, 0, 0]
                  }
                },
                data:data4.map(item => item.value),
              }
            ]
          }
          myChart4.setOption(option4);


          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
            myChart1.resize();//图表跟随页面大小变化宽度
            myChart2.resize();//图表跟随页面大小变化宽度
            myChart3.resize();//图表跟随页面大小变化宽度
            myChart4.resize();//图表跟随页面大小变化宽度

          });
        })

      },
    }
  }
</script>

<style lang="scss" scoped>
  .performance{
    background: #ffffff;
    border-radius: 4px;
    /*padding: 16px;*/
    .headForm{
      margin-bottom: 14px;
      .common-title{
        margin-right: 24px;
      }
    }
    .head-p{
      color: #3D3D3D;
      font-size: 12px;
      .ability-total {
        font-size: 12px;
        color: #3d3d3d;
        position: relative;
        margin-right: 8px;
        &:before {
          content: "";
          display: inline-block;
          width: 2px;
          height: 2px;
          background: rgba(35, 35, 35, 0.4);
          margin-right: 4px;
          margin-bottom: 4px;
        }
      }
      .ability-excel {
        font-size: 14px;
        color: rgba(35, 35, 35, 0.8);
        margin-left: 16px;
        cursor: pointer;
        float: right;
        &:hover {
          color: #0081ff;
        }
        img {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
      }
    }



    ::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;
      }
    }

    .chart{
      height: 306px;
      display: flex;
      margin: 16px 0;
      padding: 0 16px;
      width: calc(100%);
      .chart-left{
        height: 306px;
        border: 1px solid #DCDFE6;
        /*border-radius: 4px;*/
        width: calc(100% - 74px);
        display: flex;
        .echarts-title{
          color: #303133;
          font-size: 14px;
          font-weight: 700;
          padding-bottom: 14px;
        }
        .echarts-item{
          width: calc(50% - 16px);
          padding: 16px 0 16px 16px;
        }
      }
      .chart-right{
        height: 306px;
        border-radius: 8px;
        border: 1px solid #1373D9;
        color: #1373D9;
        text-align: center;
        font-size: 14px;
        padding-top: 103px;
        cursor: pointer;
        margin-left: 16px;
        width: 56px;
      }
      .chart-right:hover{
        background: #E8F1FC;
      }
    }


    @import "@/assets/styles/search-common.scss";
  }
  .dialogEcharts{
    ::v-deep .el-dialog {
      .el-dialog__body{
        padding: 16px 19px 0 16px;
        height: 664px;
        overflow: auto;
      }
      .echarts-item{
        border: 1px solid #DCDFE6;
        width: 551px;
        display: inline-block;
        border-radius: 4px;
        padding: 16px;
        height: 306px;
        margin-bottom: 16px;
        .echarts-title{
          color: #303133;
          font-size: 14px;
          font-weight: 600;
        }
      }
      .echarts-item:nth-child(2){
        margin-left: 17px;
      }
      .echarts-item:nth-child(4){
        margin-left: 17px;
      }
    }
  }
</style>
