
<template>
  <div class="overview">
    <div class="search-supplier m-16">
      <div class="title_wrap">
        <div class="enterprise_title">
          供应商风险动态
        </div>
      </div>
      <div class="evalist">
        <div>
          <div class="eva1">供应商风险总数</div>
          <div class="eva2">1200</div>
          <div class="eva3">近一月<span>新增+374</span></div>
          <div class="eva4">昨日<span>减少-21</span></div>
        </div>
        <div>
          <div class="eva1">司法诉讼</div>
          <div class="eva2">200</div>
          <div class="eva3">近一月<span>新增+374</span></div>
          <div class="eva4">昨日<span>减少-21</span></div>
        </div>
        <div>
          <div class="eva1">经营预警</div>
          <div class="eva2">400</div>
          <div class="eva3">近一月<span>新增+374</span></div>
          <div class="eva4">昨日<span>减少-21</span></div>
        </div>
        <div>
          <div class="eva1">行政处罚</div>
          <div class="eva2">400</div>
          <div class="eva3">近一月<span>新增+374</span></div>
          <div class="eva4">昨日<span>减少-21</span></div>
        </div>
        <div>
          <div class="eva1">不良行为</div>
          <div class="eva2">400</div>
          <div class="eva3">近一月<span>新增+374</span></div>
          <div class="eva4">昨日<span>减少-21</span></div>
        </div>
        <div>
          <div class="eva1">涉诉限用/禁用</div>
          <div class="eva2">400</div>
          <div class="eva3">近一月<span>新增+374</span></div>
          <div class="eva4">昨日<span>减少-21</span></div>
        </div>
      </div>
    </div>

    <div class="content1 m-16">
      <div class="cont-left">
        <div class="title_wrap">
          <div class="cont_title">
            风险类型分布
            <div class="select">
              <el-select v-model="value1" filterable class="form-content-width  same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
                <el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
              </el-select>
              <custom-time-select :timeList="timeList" v-model="time" :class="[`select-adaptive-${inputID}`]" timeValue=""
                                  placeholder="动态时间" @handle-search="iptAdaptive(inputID,'','changeSelect')" />
            </div>
          </div>
        </div>
        <div class="charts-div">
          <div id="fb-echarts"  style="height: 300px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="fxList"
              height="241"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="风险类型" prop="type"></el-table-column>
              <el-table-column label="供应商数量" prop="number"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="cont-right">
        <div class="title_wrap">
          <div class="cont_title">
            风险类型趋势
            <div class="select">
              <el-select v-model="value2" filterable class="form-content-width  same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
                <el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
              </el-select>
              <!--<el-select v-model="value3" filterable class="form-content-width  same-select-com" placeholder="展示方式" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>-->
                <!--<el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />-->
              <!--</el-select>-->
            </div>
          </div>
        </div>
        <div class="charts-div">
          <div id="wz-echarts"  style="height: 300px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="fxqsList"
              height="241"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="年月" prop="date"></el-table-column>
              <el-table-column label="司法诉讼" prop="number1"></el-table-column>
              <el-table-column label="经营预警" prop="number2"></el-table-column>
              <el-table-column label="行政处罚" prop="number3"></el-table-column>
              <el-table-column label="不良行为" prop="number4"></el-table-column>
              <el-table-column label="涉诉限用/禁用" prop="number5"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="content2 m-16">
      <div class="title_wrap">
        <div class="cont_title">
          供应商风险列表
          <div class="select">
            <el-select v-model="value4" filterable class="form-content-width  same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
              <el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
            <custom-time-select :timeList="timeList" v-model="time1" :class="[`select-adaptive-${inputID}`]" timeValue=""
                                placeholder="动态时间" @handle-search="iptAdaptive(inputID,'','changeSelect')" />
          </div>
        </div>
      </div>
      <div class="table-item" style="padding: 16px;">
        <el-table
          element-loading-text="Loading"
          maxHeight="840"
          :data="tableData"
          row-key="id"
          default-expand-all
          border
          highlight-current-row
        >
          <el-table-column label="序号" width="60" align="left" fixed="left">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" min-width="350" prop="name"></el-table-column>
          <el-table-column label="风险总数" prop="fxsl"></el-table-column>
          <el-table-column label="司法风险" prop="sffx"></el-table-column>
          <el-table-column label="经营预警" prop="jyyj"></el-table-column>
          <el-table-column label="行政处罚" prop="xzcf"></el-table-column>
          <el-table-column label="不良行为" prop="blxw"></el-table-column>
          <el-table-column label="涉诉限用/禁用" prop="ss"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="content3 m-16">
      <div class="title_wrap">
        <div class="enterprise_title">
          供应商基本情况
        </div>
      </div>
      <div class="evalist">
        <div>
          <div class="eva1">供应商总数</div>
          <div class="eva2">1200</div>
        </div>
        <div>
          <div class="eva1">专业分包</div>
          <div class="eva2">200</div>
        </div>
        <div>
          <div class="eva1">机械施工</div>
          <div class="eva2">300</div>
        </div>
        <div>
          <div class="eva1">物资设备</div>
          <div class="eva2">400</div>
        </div>
        <div>
          <div class="eva1">劳务分包企业</div>
          <div class="eva2">200</div>
        </div>
        <div>
          <div class="eva1">劳务分包队伍</div>
          <div class="eva2">100</div>
        </div>
      </div>
    </div>

    <div class="content4 m-16">
      <div class="cont-left">
        <div class="title_wrap">
          <div class="cont_title">
            供应商地区分布分布
            <div class="select">
              <el-select v-model="value5" filterable class="form-content-width  same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
                <el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="charts-div">
          <div id="dqfb-echarts"  style="height: 350px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="viewData"
              height="192"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="地区" prop="name"></el-table-column>
              <el-table-column label="供应商数量" prop="quantity"></el-table-column>
              <el-table-column label="履约金额（亿）" prop="money"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="cont-right">
        <div class="title_wrap">
          <div class="cont_title">
            供应商准入/淘汰趋势
          </div>
        </div>
        <div class="charts-div">
          <div id="qs-echarts"  style="height: 350px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="qsList"
              height="192"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="年月日" prop="date"></el-table-column>
              <el-table-column label="准入供应商" prop="number1"></el-table-column>
              <el-table-column label="淘汰供应商" prop="number2"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="content5 m-16">
      <div class="cont-left">
        <div class="title_wrap">
          <div class="cont_title">
            供应商行业分布
          </div>
        </div>
        <div class="charts-div">
          <div id="hyfb-echarts"  style="height: 350px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="hyfbList"
              height="192"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="行业" prop="name"></el-table-column>
              <el-table-column label="供应商数量" width="130" prop="number"></el-table-column>
              <el-table-column label="履约金额（亿）" width="130" prop="money"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="cont-right">
        <div class="title_wrap">
          <div class="cont_title">
            供应商股份评级
            <div class="select">
              <el-select v-model="value6" filterable class="form-content-width  same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
                <el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="charts-div">
          <div id="gfpj-echarts"  style="height: 350px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="gfpjList"
              height="192"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="股份评级" prop="type"></el-table-column>
              <el-table-column label="供应商数量" prop="number"></el-table-column>
              <el-table-column label="履约金额（亿）" prop="money"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="content6 m-16">
      <div class="cont-left">
        <div class="title_wrap">
          <div class="cont_title">
            供应商中标次数排名
          </div>
        </div>
        <div class="charts-div">
          <div id="zbcs-echarts"  style="height: 350px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="wzData"
              height="192"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="供应商名称" prop="name"></el-table-column>
              <el-table-column label="投标次数" width="130" prop="money"></el-table-column>
              <el-table-column label="中标次数" width="130" prop="score"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="cont-right">
        <div class="title_wrap">
          <div class="cont_title">
            供应商履约金额分布统计
            <div class="select">
              <el-select v-model="value7" filterable class="form-content-width  same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
                <el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="charts-div">
          <div id="jefb-echarts"  style="height: 350px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="jefbList"
              height="192"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="履约金额范围" prop="type"></el-table-column>
              <el-table-column label="供应商数量" prop="number"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import '@/assets/styles/public.scss'
  import '@/assets/styles/supplierlist.scss'
  import mixin from '@/views/detail/party-a/mixins/mixin'
  import { statistics } from '@/api/supplier/supplierOverview'
  import CustomTimeSelect from '../../component/CustomTimeSelect'
  import { v4 } from "uuid"
  import * as echarts from 'echarts'
  import '@/assets/lib/china.js'
  export default {
    name: 'overview',
    mixins: [mixin],
    components:{CustomTimeSelect},
    data(){
      return{
        wzData:[
          {
            name:'北京宏盛兴达装饰设计有限责任公司',
            money:'772',
            score:'118'
          },
          {
            name:'重庆宏力嘉商贸有限公司',
            money:'245',
            score:'114'
          },
          {
            name:'都江堰市宏发节能砖厂',
            money:'832',
            score:'102'
          },
          {
            name:'重庆展鹏门业有限公司',
            money:'132',
            score:'92'
          },
          {
            name:'海南奥利格新型建',
            money:'132',
            score:'82'
          },
          {
            name:'莱晟达(烟台)环保材料科',
            money:'132',
            score:'78'
          },
          {
            name:'中建蓉成建材成都有限公司',
            money:'132',
            score:'72'
          },
          {
            name:'北京京首建混凝土搅拌站有限公司',
            money:'132',
            score:'62'
          },
          {
            name:'重庆越尚建材有限公司',
            money:'83',
            score:'11'
          },
          {
            name:'北京京首建混凝土搅拌站有限公司',
            money:'684',
            score:'25'
          },
        ],
        timeList: ['昨天','近三天', '近七天', '近半月', '自定义'],
        time:'',
        time1:'',
        inputID: this.getUid(),
        inputID1:this.getUid(),

        gyslxList:[
          {
            label:'劳务分包',
            value:'劳务分包'
          },
          {
            label:'专业分包',
            value:'专业分包'
          },
          {
            label:'专业服务',
            value:'专业服务'
          },
          {
            label:'设备',
            value:'设备'
          },
          {
            label:'租赁',
            value:'租赁'
          },
          {
            label:'物资',
            value:'物资'
          },
        ],
        value1:'',
        value2:'',
        value3:'',
        value4:'',
        value5:'',
        value6:'',
        value7:'',

        zkfsList:[
          {
            label:'按天展示',
            value:'按天展示'
          },
          {
            label:'按周展示',
            value:'按周展示'
          },
          {
            label:'按月展示',
            value:'按月展示'
          },
          {
            label:'按年展示',
            value:'按年展示'
          },
        ],

        fxList:[
          {
            type:'司法诉讼',
            number:'1200'
          },
          {
            type:'经营预警',
            number:'500'
          },
          {
            type:'行政处罚',
            number:'300'
          },
          {
            type:'不良行为',
            number:'200'
          },
          {
            type:'涉诉限用/禁用',
            number:'100'
          },
        ],
        lxList:[
          {
            type:'司法诉讼',
            number:'1200',
            date:'1月',
          },
          {
            type:'经营预警',
            number:'500',
            date:'2月',
          },
          {
            type:'行政处罚',
            number:'300',
            date:'3月',
          },
          {
            type:'不良行为',
            number:'200',
            date:'4月',
          },
          {
            type:'涉诉限用/禁用',
            number:'100',
            date:'5月',
          },
        ],

        tableData:[
          {
            name:'北京宁盛伟业建筑工程机械设备租赁有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'北京森桦建业防水工程有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'北京致用恒力建筑材料检测有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'北京振兴万源建筑工程有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'北京天罡星机械设备租赁有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'河南省天地建筑防水工程有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'重庆尔安机电设备工程有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'山东鸿华建筑安装工程有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'江苏地基工程有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'信邦建设集团有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'华诚博远钢结构有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'江苏金祥建设工程有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'浙江精工钢结构集团有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'北京洪雨建设工程有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'北京中城华远建设集团有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'德州亚太集团有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'浙江中南绿建科技集团有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'中国石油化工股份有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'中国石油天然气股份有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
          {
            name:'中国建筑股份有限公司',
            fxsl:'27',
            sffx:'85',
            jyyj:'77',
            xzcf:'77',
            blxw:'75',
            ss:'43',
          },
        ],

        fxqsList:[
          {
            date:'1月',
            number1:'87',
            number2:'5',
            number3:'3',
            number4:'12',
            number5:'9',
          },
          {
            date:'2月',
            number1:'47',
            number2:'5',
            number3:'3',
            number4:'12',
            number5:'9',
          },
          {
            date:'3月',
            number1:'67',
            number2:'5',
            number3:'3',
            number4:'5',
            number5:'2',
          },
          {
            date:'4月',
            number1:'37',
            number2:'6',
            number3:'14',
            number4:'4',
            number5:'9',
          },
          {
            date:'5月',
            number1:'67',
            number2:'46',
            number3:'3',
            number4:'8',
            number5:'17',
          },
          {
            date:'6月',
            number1:'47',
            number2:'16',
            number3:'3',
            number4:'12',
            number5:'2',
          },
          {
            date:'7月',
            number1:'37',
            number2:'11',
            number3:'6',
            number4:'8',
            number5:'19',
          },
          {
            date:'8月',
            number1:'48',
            number2:'26',
            number3:'9',
            number4:'7',
            number5:'23',
          },
          {
            date:'9月',
            number1:'47',
            number2:'16',
            number3:'7',
            number4:'12',
            number5:'9',
          },
          {
            date:'10月',
            number1:'75',
            number2:'56',
            number3:'4',
            number4:'12',
            number5:'11',
          },
          {
            date:'11月',
            number1:'23',
            number2:'6',
            number3:'13',
            number4:'12',
            number5:'16',
          },
          {
            date:'12月',
            number1:'67',
            number2:'46',
            number3:'26',
            number4:'12',
            number5:'9',
          },
        ],
        viewData:[
          {
            name:'河南省',
            quantity:'1230',
            money:12.00,
          },
          {
            name:'北京',
            quantity:'2230',
            money:20.90,
          },
          {
            name:'四川省',
            quantity:'230',
            money:4.00,
          },
          {
            name:'河北省',
            quantity:'130',
            money:4.00,
          },
          {
            name:'广东省',
            quantity:'1000',
            money:10.00,
          },
          {
            name:'重庆',
            quantity:'100',
            money:10.00,
          },
          {
            name:'江苏省',
            quantity:'200',
            money:10.00,
          },
          {
            name:'青海省',
            quantity:'1230',
            money:12.00,
          },
          {
            name:'甘肃省',
            quantity:'2230',
            money:20.90,
          },
          {
            name:'云南省',
            quantity:'230',
            money:4.00,
          },
        ],
        qsList:[
          {
            date:'1月',
            number1:'87',
            number2:'26'
          },
          {
            date:'2月',
            number1:'47',
            number2:'16'
          },
          {
            date:'3月',
            number1:'67',
            number2:'26'
          },
          {
            date:'4月',
            number1:'37',
            number2:'12'
          },
          {
            date:'5月',
            number1:'67',
            number2:'46'
          },
          {
            date:'6月',
            number1:'47',
            number2:'16'
          },
          {
            date:'7月',
            number1:'37',
            number2:'11'
          },
          {
            date:'8月',
            number1:'48',
            number2:'26'
          },
          {
            date:'9月',
            number1:'47',
            number2:'16'
          },
          {
            date:'10月',
            number1:'75',
            number2:'56'
          },
          {
            date:'11月',
            number1:'23',
            number2:'6'
          },
          {
            date:'12月',
            number1:'67',
            number2:'46'
          },
        ],

        hyfbList:[
          {
            name:'批发和零售业',
            number:'832',
            money:'102'
          },
          {
            name:'房屋建筑业',
            number:'772',
            money:'118'
          },
          {
            name:'制造业',
            number:'345',
            money:'114'
          },
          {
            name:'交通运输',
            number:'342',
            money:'92'
          },
          {
            name:'农、林、牧、渔',
            number:'232',
            money:'82'
          },
          {
            name:'供应商行业名称六',
            number:'132',
            money:'78'
          },
          {
            name:'供应商行业名称七',
            number:'132',
            money:'72'
          },
          {
            name:'供应商行业名称八',
            number:'132',
            money:'62'
          },
          {
            name:'供应商行业名称九',
            number:'83',
            money:'11'
          },
          {
            name:'供应商行业名称十',
            number:'84',
            money:'25'
          },
        ],
        gfpjList:[
          {
            type:'物资优质',
            number:'23',
            money:'12.00'
          },
          {
            type:'专业分包优质',
            number:'33',
            money:'22.00'
          },
          {
            type:'设备优质',
            number:'43',
            money:'12.00'
          },
          {
            type:'专业服务优质',
            number:'8',
            money:'11.00'
          },
          {
            type:'劳务优质',
            number:'12',
            money:'27.00'
          },
        ],
        jefbList:[
          {
            type:'100万以下',
            number:'23'
          },
          {
            type:'100万~500万',
            number:'34'
          },
          {
            type:'500万-1000万',
            number:'45'
          },
          {
            type:'1000万-5000万',
            number:'21'
          },
          {
            type:'5000万~1亿',
            number:'5'
          },
        ],

      }
    },
    created() {
      this.getStatistics();
      this.$nextTick(()=>{
        this.initChart(this.fxList)
        this.initChart1(this.fxqsList)
        this.initChart3()
        this.initChart4(this.qsList)
        this.initChart5(this.hyfbList)
        this.initChart6(this.gfpjList)
        this.initChart7(this.wzData)
        this.initChart8(this.jefbList)

        // this.initChart1(this.wzData)
        // this.initChart2(this.wzData)
        // this.initChart3(this.wzData)
        // this.initChart4(this.wzData)
        // this.initChart5(this.wzData)
      })
    },
    methods:{
      getStatistics(){
        statistics().then(res => {
          console.log(res.data)
        })
      },
      getUid() {
        return v4();
      },
      changeSelect(){

      },
      initChart(data) {
        var list=[];
        for(var i=0;i<data.length;i++){
          var obj={};
          obj.name=data[i].type;
          obj.value=data[i].number;
          list.push(obj)
        }
        let myChart = echarts.init(document.getElementById("fb-echarts"))
        let option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            show:false,
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: list,
          },
          color:['#FF3C3C', '#0081FF', '#12C0C7','#0CBC6D','#FFAB44'],
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: list,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart1(data) {
        let myChart = echarts.init(document.getElementById("wz-echarts"))
        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.date),
          },
          yAxis: {
            type: 'value',
          },
          grid: {
            top:30,
            left:50,
            right:40,
            bottom:60,
          },
          color:['#0081FF', '#0CBC6D', '#FF3C3C', '#FFAB44', '#12C0C7'],
          series: [
            {
              name: '司法诉讼',
              type: 'line',
              symbolSize:0,
              data: data.map(item => item.number1)
            },
            {
              name: '经营预警',
              type: 'line',
              symbolSize:0,
              data: data.map(item => item.number2)
            },
            {
              name: '行政处罚',
              type: 'line',
              symbolSize:0,
              data: data.map(item => item.number3)
            },
            {
              name: '不良行为',
              type: 'line',
              symbolSize:0,
              data: data.map(item => item.number4)
            },
            {
              name: '涉诉限用/禁用',
              type: 'line',
              symbolSize:0,
              data: data.map(item => item.number5)
            },
          ]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },

      //中国地图
      initChart3(){
        let myChart = echarts.init(document.getElementById("dqfb-echarts"))
        // 指定图表的配置项和数据
        // 绘制图表
        let data =[]
        this.viewData.length>0&&this.viewData.map(item=>{
          data.push({value:Number(item.quantity),name:item.name,money:item.money})
        })
        let option = {
          tooltip: {
            trigger: 'item',
            show: true,
            formatter: function(params) {
              console.log(params)
              return `<span style="color:rgba(35, 35, 35, 1);font-size:14px;">${params.name}</span><br>
            <span style="color:#3D3D3D;font-size:12px;">供应商数量</span><span style="color:#3D3D3D;font-size:12px;font-weight:700;">  ${params.value}</span><br>
            <span style="color:#3D3D3D;font-size:12px;">履约金额（亿）</span><span style="color:#3D3D3D;font-size:12px;font-weight:700;">  ${params.data.money}</span><br>
            `
            }
          },
          // 左侧小导航图标
          visualMap: {
            show: false,
            x: 'left',
            y: 'center',
            min: 0,
            max: 830000,
            color: ['#D1E6FF']
          },
          selectedMode: 'single',
          series: [{
            name: '地图',
            type: 'map',
            mapType: 'china',
            roam: false,
            zoom: 1.2,
            label: {
              normal: {
                show: false, // 省份名称
              },

            },
            itemStyle: {
              normal: { // 未选中状态
                // areaColor: 'red', // 南沙诸岛背景颜色
                borderColor: '#FFFFFF',
                label: {
                  show: true// 显示名称
                }
              },
              emphasis: { // 也是选中样式
                areaColor: '#0081FF',
              }
            },
            data: data
          }]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart4(data) {
        let myChart = echarts.init(document.getElementById("qs-echarts"))
        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.date),
          },
          yAxis: {
            type: 'value',
          },
          grid: {
            top:30,
            left:50,
            right:40,
            bottom:60,
          },
          color:['#FF3C3C', '#0081FF'],
          series: [
            {
              name: '淘汰供应商',
              type: 'line',
              symbolSize:0,
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(255, 60, 60, 0.2)'
                  }, {
                    offset: 1, color: 'rgba(255, 60, 60, 0)'
                  } ],
                  global: false
                }
              },
              data: data.map(item => item.number2)
            },
            {
              name: '准入供应商',
              type: 'line',
              symbolSize:0,
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0, 129, 255, 0.2)'
                  }, {
                    offset: 1, color: 'rgba(0, 129, 255, 0)'
                  } ],
                  global: false
                }
              },
              data: data.map(item => item.number1)
            },
          ]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },

      initChart5(data) {
        let myChart = echarts.init(document.getElementById("hyfb-echarts"))
        let option = {
          // 坐标轴
          grid: {
            top: "10%",
            left: "4%",
            right: "3%",
            bottom: "4%",
            containLabel: true, //是否包含坐标轴的文字
          },
          // 鼠标hover出现的提示框组件
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            backgroundColor: '#FFFFFF',
            borderWidth: 0,
            textStyle: {
              color: '#232323',
              fontSize: 14,
            },
          },
          xAxis: [
            //x轴数据设置
            {
              type: "value",
            },
          ],
          yAxis: [
            {
              type: "category",
              data: data.map(item => item.name),
              axisTick: { show: false },
              inverse:true,
              axisLine:{
                // color: '#DCDFE6',
                lineStyle: {
                  color: '#DCDFE6',//左边线的颜色
                },
              },
              axisLabel:{
                textStyle:{
                  color: '#232323cc'
                }
              }
            },
          ],
          series: [
            {
              name: '供应商数量',
              data: data.map(item => item.number),
              type: "bar",
              barWidth: 12,
              barGap: 0.5,
              itemStyle: {
                color: '#0081FF',
              }
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart6(data) {
        var list=[];
        for(var i=0;i<data.length;i++){
          var obj={};
          obj.name=data[i].type;
          obj.value=data[i].number;
          list.push(obj)
        }
        let myChart = echarts.init(document.getElementById("gfpj-echarts"))
        let option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            show:false,
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: list,
          },
          color:['#FF3C3C', '#0081FF', '#12C0C7','#0CBC6D','#FFAB44'],
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: list,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart7(data) {
        let myChart = echarts.init(document.getElementById("zbcs-echarts"))
        let option = {
          // 坐标轴
          grid: {
            top: "10%",
            left: "4%",
            right: "3%",
            bottom: "4%",
            containLabel: true, //是否包含坐标轴的文字
          },
          // 鼠标hover出现的提示框组件
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            backgroundColor: '#FFFFFF',
            borderWidth: 0,
            textStyle: {
              color: '#232323',
              fontSize: 14,
            },
          },
          xAxis: [
            //x轴数据设置
            {
              type: "value",
            },
          ],
          yAxis: [
            {
              type: "category",
              data: data.map(item => item.name),
              axisTick: { show: false },
              axisLine:{
                // color: '#DCDFE6',
                lineStyle: {
                  color: '#DCDFE6',//左边线的颜色
                },
              },
              axisLabel:{
                textStyle:{
                  color: '#232323cc'
                }
              }
            },
          ],
          series: [
            {
              name: '履约加权得分',
              data: data.map(item => item.score),
              type: "bar",
              barWidth: 12,
              barGap: 0.5,
              itemStyle: {
                color: '#0081FF',
              }
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart8(data) {
        var list=[];
        for(var i=0;i<data.length;i++){
          var obj={};
          obj.name=data[i].type;
          obj.value=data[i].number;
          list.push(obj)
        }
        let myChart = echarts.init(document.getElementById("jefb-echarts"))
        let option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            show:false,
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: list,
          },
          color:['#FF3C3C', '#0081FF', '#12C0C7','#0CBC6D','#FFAB44'],
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: list,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },


      iptAdaptive(uid, multiple = false, name) {
        multiple ? this.multipleAdaptiveHandle(uid, name) : this.iptAdaptiveHandle(uid, name);
      },
      //单选
      async iptAdaptiveHandle(uid, name) {
        try {
          await this.$nextTick();
          const dom = document.querySelector(`.select-adaptive-${uid}`);
          const realStyles = window.getComputedStyle(dom);
          if (dom) {
            const iptChild = dom.querySelector(".el-input__inner");
            const textContainer = document.createElement("span");
            const textName = `text-${uid}`;
            textContainer.classList.add(textName);
            textContainer.style.setProperty("visibility", "hidden");
            textContainer.style.setProperty("display", "inline-block");
            textContainer.style.setProperty("font-size", "14px");
            const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
            hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
            textContainer.style.setProperty("box-sizing", "border-box");
            textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
            document.body.append(textContainer);
            let containerWidth = textContainer.offsetWidth + 50;
            textContainer.remove();
            dom.style.setProperty("width", `${containerWidth}px`);
          }
          this.handleSearch(name);
        } catch (error) {

        }
      },
      async multipleAdaptiveHandle(){

      },
    }
  }
</script>

<style lang="scss" scoped>
  .overview{
    .enterprise_title{
      position: relative;
    }
    .select{
      position: absolute;
      right: 0;
      top:-10px;
      display: flex;
    }
    .custom-time-select1 {
      width: 110px !important;
      ::v-deep .el-input__inner{
        border: 0;
        &::placeholder {
          color: rgba(35, 35, 35, 0.8) !important;
        }
      }
    }

    .evalist{
      background: #fff;
      display: flex;
      padding: 12px 10px;
      justify-content: space-around;
      >div{
        margin: 0 6px;
        border: 1px solid #DCDFE6;
        height: 136px;
        width: calc(16.66% - 12px);
        text-align: center;
        border-radius: 4px;
        .eva1{
          font-size: 16px;
          font-weight: 500;
        }
        .eva2{
          padding-top: 8px;
          padding-bottom: 10px;
          font-size: 24px;
        }
        .eva3{
          color: rgba(35, 35, 35, 0.6);
          font-size: 14px;
          line-height: 22px;
          span{
            color: #FF3C3C;
            margin-left: 8px;
          }
        }
        .eva4{
          color: rgba(35, 35, 35, 0.6);
          font-size: 14px;
          line-height: 22px;
          span{
            color: #0CBC6D;
            margin-left: 8px;
          }
        }
      }
    }

    .content3{
      .evalist{
        >div{
          height: 76px;
          .eva1{
            padding-top: 10px;
          }
          .eva2{
            padding-top: 6px;
            padding-bottom: 0;
            font-size: 24px;
          }
        }
      }
    }

    .content1,.content4,.content5,.content6{
      display: flex;
      height: 612px;
      .cont-left{
        width: 49.5%;
        background: #ffffff;
        margin-right: 1%;
      }
      .cont-right{
        width: 49.5%;
        background: #ffffff;
      }
    }

    ::v-deep .el-select{
      color: rgba(35, 35, 35, 0.8);
      .el-input__inner{
        border: 0;
        &::placeholder {
          color: rgba(35, 35, 35, 0.8) !important;
        }
      }
    }
    .form-content-width{
      width: 116px;
    }
    .cont_title{
      padding-left: 8px;
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      font-weight: 700;
      color: #232323;
      position: relative;
    }
    .content2{
      background: #ffffff;
    }


    ::v-deep .el-table--border .el-table__cell {
      padding: 8px 0;
    }
    ::v-deep .custom-time-select1{
      .options-block{
        /*<!--left: -30px;-->*/
        right:0;
      }
      .picker-block{
        .el-picker-panel.el-date-range-picker.el-popper{
          left: -680px !important;
          top:144px !important;
        }
      }
    }
  }
  .m-b16{
    margin-bottom: 16px;
  }
  .m-16{
    margin: 16px;
  }
  .yj-supplier{
    background: #ffffff;
    .yj-main{
      display: flex;
      height: 512px;
      overflow: hidden;
      margin-top: 16px;
      .yj-title{
        color: #232323;
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 8px;
        font-weight: 600;
        span{
          color: #FF3C3C;
        }
      }
      .yi-cont{
        width: 48%;
        margin: 0 1%;
      }
      .yj-list{
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #DCDFE6;
        overflow-y: auto;
        height: 448px;
        padding: 12px 8px;
        font-size: 14px;
        color: #232323;
        line-height: 22px;
        .time{
          font-size: 12px;
          color: rgba(35,35,35,0.6);
          margin-top: 8px;
        }
      }

      ::v-deep .el-timeline{
        .el-timeline-item{
          margin-bottom: 8px;
          padding-bottom: 0;
        }
        .el-timeline-item__wrapper{
          padding-left:16px;
        }
        .el-timeline-item__tail{
          top: 12px;
          height: calc(100% - 18px);
        }
        .el-timeline-item__node{
          background-color:#ffffff;
          border: 2px solid #FF3C3C;
        }
        .el-timeline-item__node--normal{
          left: 1px;
          width: 8px;
          height: 8px;
          top: 2px;
        }
        .el-timeline-item:last-child .el-timeline-item__tail{
          display: block;
        }
      }
    }
  }

  .charts-supplier{
    background: #ffffff;
    .charts-main {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      padding-top:16px;
      .charts-cont{
        width: 48%;
        margin: 0 1%;
        margin-bottom: 24px;
        .charts-title{
          font-size: 14px;
          color: #232323;
          line-height: 24px;
          margin-bottom: 8px;
          font-weight: 600;
        }
      }
      .charts-div{
        height: 560px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #DCDFE6;
      }
    }
  }
</style>
