
<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">{{statisticsObj.allRiskCount}}</div>
          <div class="eva3" v-if="statisticsObj.riskmonthAdd >= 0">近一月<span>新增+{{statisticsObj.riskmonthAdd}}</span></div>
          <div class="eva4" v-if="statisticsObj.riskmonthAdd < 0">近一月<span>减少{{statisticsObj.riskmonthAdd}}</span></div>
          <div class="eva3" v-if="statisticsObj.yesterdayRisk >= 0">昨日<span>新增+{{statisticsObj.yesterdayRisk}}</span></div>
          <div class="eva4" v-if="statisticsObj.yesterdayRisk < 0">昨日<span>减少-{{statisticsObj.yesterdayRisk}}</span></div>
        </div>
        <div>
          <div class="eva1">司法风险总数</div>
          <div class="eva2">{{statisticsObj.sfRiskCount}}</div>
          <div class="eva3" v-if="statisticsObj.sfRiskmonthAdd >= 0">近一月<span>新增+{{statisticsObj.sfRiskmonthAdd}}</span></div>
          <div class="eva4" v-if="statisticsObj.sfRiskmonthAdd < 0">近一月<span>减少{{statisticsObj.sfRiskmonthAdd}}</span></div>
          <div class="eva3" v-if="statisticsObj.sfYesterdayRisk >= 0">昨日<span>新增+{{statisticsObj.sfYesterdayRisk}}</span></div>
          <div class="eva4" v-if="statisticsObj.sfYesterdayRisk < 0">昨日<span>减少-{{statisticsObj.sfYesterdayRisk}}</span></div>
        </div>
        <div>
          <div class="eva1">经营风险总数</div>
          <div class="eva2">{{statisticsObj.jyRiskCount}}</div>
          <div class="eva3" v-if="statisticsObj.jyRiskmonthAdd >= 0">近一月<span>新增+{{statisticsObj.jyRiskmonthAdd}}</span></div>
          <div class="eva4" v-if="statisticsObj.jyRiskmonthAdd < 0">近一月<span>减少{{statisticsObj.jyRiskmonthAdd}}</span></div>
          <div class="eva3" v-if="statisticsObj.jyYesterdayRisk >= 0">昨日<span>新增+{{statisticsObj.jyYesterdayRisk}}</span></div>
          <div class="eva4" v-if="statisticsObj.jyYesterdayRisk < 0">昨日<span>减少-{{statisticsObj.jyYesterdayRisk}}</span></div>
        </div>
        <div>
          <div class="eva1">工商风险总数</div>
          <div class="eva2">{{statisticsObj.gsRiskCount}}</div>
          <div class="eva3" v-if="statisticsObj.gsRiskmonthAdd >= 0">近一月<span>新增+{{statisticsObj.gsRiskmonthAdd}}</span></div>
          <div class="eva4" v-if="statisticsObj.gsRiskmonthAdd < 0">近一月<span>减少{{statisticsObj.gsRiskmonthAdd}}</span></div>
          <div class="eva3" v-if="statisticsObj.gsYesterdayRisk >= 0">昨日<span>新增+{{statisticsObj.gsYesterdayRisk}}</span></div>
          <div class="eva4" v-if="statisticsObj.gsYesterdayRisk < 0">昨日<span>减少-{{statisticsObj.gsYesterdayRisk}}</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="供应商类型" @change="iptAdaptive(inputID1,'','fxfb')"-->
                         <!--: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,'','fxfb')" />
            </div>
          </div>
        </div>
        <div class="charts-div">
          <div id="fb-echarts"  style="height: 300px;"></div>
          <div style="margin: 0 16px">
            <el-table
              :data="fxList"
              max-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="riskType"></el-table-column>
              <el-table-column label="供应商数量" prop="companyCount"></el-table-column>
              <el-table-column label="风险数量" prop="riskCount"></el-table-column>
              <el-table-column label="占比（%）" prop="percent"></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="供应商类型" @change="iptAdaptive(inputID1,'','fxlxqs')"-->
                         <!--:class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>-->
                <!--<el-option v-for="(item, index) in fxlxList" :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"
              max-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="riskType"></el-table-column>
              <el-table-column label="供应商数量" prop="companyCount"></el-table-column>
              <el-table-column label="风险数量" prop="riskCount"></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="供应商类型"
                       @change="iptAdaptive(inputID1,'','gysfx')" :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,'','gysfx')" />
          </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>{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" min-width="350" prop="customerName">
            <template slot-scope="scope">
              <div v-if="scope.row.companyId">
                <router-link  :to="`/monitoring/MonitoringReportDetails/${scope.row.companyId}`" tag="a" class="a-link companyName">{{scope.row.customerName}}</router-link>
              </div>
              <div v-else>{{scope.row.customerName}}</div>
            </template>
          </el-table-column>
          <el-table-column label="风险总数" prop="riskTotal">
            <template slot-scope="scope">
              <span v-if="scope.row.riskTotal > 0" style="color:red;">{{scope.row.riskTotal}}</span>
              <span v-else>{{scope.row.riskTotal}}</span>
            </template>
          </el-table-column>
          <el-table-column label="司法风险" prop="judicatureRiskCount">
            <template slot-scope="scope">
              <span v-if="scope.row.judicatureRiskCount > 0" style="color:red;">{{scope.row.judicatureRiskCount}}</span>
              <span v-else>{{scope.row.judicatureRiskCount}}</span>
            </template>
          </el-table-column>
          <el-table-column label="经营风险" prop="operatingRiskCount">
            <template slot-scope="scope">
              <span v-if="scope.row.operatingRiskCount > 0" style="color:red;">{{scope.row.operatingRiskCount}}</span>
              <span v-else>{{scope.row.operatingRiskCount}}</span>
            </template>
          </el-table-column>
          <el-table-column label="工商风险" prop="businessRiskCount">
            <template slot-scope="scope">
              <span v-if="scope.row.businessRiskCount > 0" style="color:red;">{{scope.row.businessRiskCount}}</span>
              <span v-else>{{scope.row.businessRiskCount}}</span>
            </template>
          </el-table-column>
          <el-table-column label="不良行为" prop="badBehaviorCount">
            <template slot-scope="scope">
              <span v-if="scope.row.badBehaviorCount > 0" style="color:red;">{{scope.row.badBehaviorCount}}</span>
              <span v-else>{{scope.row.badBehaviorCount}}</span>
            </template>
          </el-table-column>
          <el-table-column label="涉诉限用/禁用" prop="limitedCount">
            <template slot-scope="scope">
              <span v-if="scope.row.limitedCount > 0" style="color:red;">{{scope.row.limitedCount}}</span>
              <span v-else>{{scope.row.limitedCount}}</span>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-box" v-if="tableDataTotal>pageSize">
          <el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </div>
      </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">{{basicInfoObj.customerTotal}}</div>
        </div>
        <div>
          <div class="eva1">专业分包</div>
          <div class="eva2">{{basicInfoObj.zyfbCount}}</div>
        </div>
        <div>
          <div class="eva1">机械施工</div>
          <div class="eva2">{{basicInfoObj.jxsgCount}}</div>
        </div>
        <div>
          <div class="eva1">物资设备</div>
          <div class="eva2">{{basicInfoObj.wzsbCount}}</div>
        </div>
        <div>
          <div class="eva1">劳务分包企业</div>
          <div class="eva2">{{basicInfoObj.lwfbCount}}</div>
        </div>
        <div>
          <div class="eva1">劳务分包队伍</div>
          <div class="eva2">{{basicInfoObj.lwfbdwCount}}</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,queryBasicInfo,riskType,riskChange,searchList } 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{
        statisticsObj:{},
        basicInfoObj:{},
        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:'劳务分包队伍'
          },
        ],
        fxlxList:[
          {
            label:'司法风险',
            value:'司法风险'
          },
          {
            label:'经营风险',
            value:'经营风险'
          },
          {
            label:'工商风险',
            value:'工商风险'
          },
        ],
        value1:'',
        value2:'',
        value3:'',
        value4:'',
        value5:'',
        value6:'',
        value7:'',

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

        fxList:[],
        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:[],
        pageIndex: 1,
        pageSize: 20,
        tableDataTotal:0,

        fxqsList:[],
        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.getQueryBasicInfo();
      this.getSearchList();

      this.getRiskChange();
      this.$nextTick(()=>{
        this.getRiskType();

        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({userId:'',systemCode:''}).then(res => {
          if(res.code === 200){
            this.statisticsObj=res.data
          }
        })
      },
      getQueryBasicInfo(){
        queryBasicInfo().then(res => {
          if(res.code === 200){
            this.basicInfoObj=res.data
          }
        })
      },
      getRiskType(){

        const today = new Date();
        const yesterday = new Date(today);
        yesterday.setDate(yesterday.getDate() - 1);
        const year = yesterday.getFullYear();
        const month = ('0' + (yesterday.getMonth() + 1)).slice(-2); // 月份是从0开始的
        const day = ('0' + yesterday.getDate()).slice(-2);
        let params={
          "beginTime": `${year}-${month}-${day}`,
          "endTime": `${year}-${month}-${day}`
        }
        if(this.time.length > 1){
          params.beginTime=this.time[0]
          params.endTime=this.time[1]
        }
        riskType(params).then(res => {
          if(res.code === 200){
            this.fxList=res.data
            this.initChart(res.data)
          }
        })
      },
      getRiskChange(){
        let params={}
        if(this.value2){
          params.riskType=this.value2
        }
        riskChange(params).then(res => {
          if(res.code === 200){
            this.fxqsList=res.data
            this.initChart1(this.fxqsList)
          }
        })
      },
      getSearchList(){
        let params={
          areas:[],
          city:[],
          credential:[],
          creditLevel:[],
          customerClass:[],
          customerName:'',
          customerState:[],
          pageNum:this.pageIndex,
          pageSize:this.pageSize,
          province:[],
        }
        if(this.value4){
          params.customerClass.push(this.value4)
        }else {
          params.customerClass=[]
        }
        if(this.time1.length > 1){
          params.approveDateBegion=this.time1[0]
          params.approveDateEnd=this.time1[1]
        }else {
          params.approveDateBegion = ''
          params.approveDateEnd = ''
        }
        searchList(params).then(res => {
          if(res.code === 200){
            this.tableData=res.rows
            this.tableDataTotal=res.total
          }
        })
      },
      // 重置页数
      handleSizeChange(val) {
        this.pageIndex = 1
        this.pageSize = val
        this.getSearchList()
      },
      // 跳转指定页数
      handleCurrentChange(val) {
        this.pageIndex = val
        this.getSearchList();
      },
      getUid() {
        return v4();
      },
      changeSelect(){

      },
      handleSearch(name){
        if(name === 'fxfb'){
          this.getRiskType()
        }
        if(name === 'fxlxqs'){
          this.getRiskChange();
        }
        if(name === 'gysfx'){
          this.pageIndex = 1
          this.getSearchList();
        }
      },
      initChart(data) {
        let barData1 = [],xAxisData1 = [],lineData1=[];
        for(var i=0;i<data.length;i++){
          xAxisData1.push(data[i].riskType)
          barData1.push(data[i].companyCount)
          lineData1.push(data[i].riskCount)
        }
        let myChart = echarts.init(document.getElementById("fb-echarts"))
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },

          grid: {
            top:30,
            left:50,
            right:40,
            bottom:30,
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: xAxisData1,
              axisTick: {
                alignWithLabel: true,
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine : { //网格线
                lineStyle: {
                  type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
                },
              }
            },
            {
              nameTextStyle: {
                padding: [0, 10, 0, 50],    // 四个数字分别为上右下左与原位置距离
                color: '#666666',
              },
              type: 'value',
              splitLine : { //网格线
                show:false
              },
            }
          ],
          series: [
            {
              name: '供应商数量',
              type: 'bar',
              barWidth: '18px',
              data: barData1,
              itemStyle:{
                normal: {
                  color: '#165DFF'
                }
              }
            },
            {
              name: '风险数量',
              // symbolSize: 8, //标记的大小（折线图圆点大小）
              label: {
                color: "#67B3FD",
              },
              lineStyle: {
                color: "#67B3FD",
                width: 2
              },
              itemStyle: {
                color: "#67B3FD"
              },
              type: 'line',
              yAxisIndex: 1,
              data: lineData1
            },
          ],
        }
        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: 'shadow',
              // label: {
              //   backgroundColor: '#FFFFFF'
              // }
            }
          },
          legend: {
            data: ['供应商数量', '风险数量'],
            itemGap: 5,
            padding:[10,0,0,0]
          },
          dataZoom: [
            {
              type: "slider",
              show: true,  // x轴是否启用
              start: 0,  // 从哪里开始显示
              end: 20,   // 到哪里结束显示
              bottom:10,
              height:15,
              // backgroundColor:'#ccc',
              // handleStyle:{
              //   color:'#eee',
              // },
              handleSize: '30%',
            },
            {
              type: "inside",
              start: 70,
              end: 100,
            },
            {
              type: "slider",
              show: false,   // y轴是否启用
              yAxisIndex: 0,
              filterMode: "empty",
              width: '5%',
              height: "70%",
              handleSize: '30%',
              showDataShadow: false,
              right:'93%'
            },
          ],
          xAxis: {
            type: 'category',
            data: data.map(item => item.riskType),
            axisLabel: {
              show: true,
              interval: 0
            },
          },
          yAxis: {
            type: 'value',
          },
          grid: {
            top:40,
            left:50,
            right:40,
            bottom:50,
          },
          series: [
            {
              name: '供应商数量',
              type: 'bar',
              barWidth: '18px',
              data: data.map(item => item.companyCount),
              itemStyle:{
                normal: {
                  color: '#165DFF'
                }
              }
            },
            {
              name: '风险数量',
              type: 'bar',
              barWidth: '18px',
              data: data.map(item => item.riskCount),
              itemStyle:{
                normal: {
                  color: '#A9F1E5'
                }
              }
            },
          ],
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart10(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) ? Number(item.quantity) : 0,name:item.name,money:item.money})
        })
        let option = {
          tooltip: {
            trigger: 'item',
            show: true,
            formatter: function(params) {
              if(!params.data){
                params.data={
                  money:0
                }
                params.value=0
              }
              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(uid, name){
        try {
          await this.$nextTick();
          const dom = document.querySelector(`.select-adaptive-${uid}`);
          const iptChild = dom.querySelector(".el-input__inner");
          if (dom) {
            const textContainer = document.createElement("span");
            const textName = `text-${uid}`;
            textContainer.classList.add(textName);
            const selectChildren = dom.querySelectorAll(".el-tag");
            if (selectChildren.length) {
              let width = 0;
              selectChildren.forEach(item => {
                const text = item.textContent;
                const itemInfo = window.getComputedStyle(item);
                textContainer.style.setProperty("visibility", "hidden");
                textContainer.style.setProperty("display", "inline-block");
                textContainer.style.setProperty("font-size", "14px");
                textContainer.style.setProperty("padding", itemInfo.padding);
                textContainer.style.setProperty("box-sizing", "border-box");
                textContainer.textContent = text;
                document.body.append(textContainer);
                width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
                textContainer.remove();
              });
              dom.style.setProperty("width", `${width + 50}px`);
              this.handleSearch(name);
              return;
            }
            textContainer.style.setProperty("visibility", "hidden");
            textContainer.style.setProperty("display", "inline-block");
            textContainer.style.setProperty("font-size", "14px");
            textContainer.style.setProperty("padding", "0px 8px");
            textContainer.style.setProperty("box-sizing", "border-box");
            textContainer.textContent = iptChild.getAttribute("placeholder");
            document.body.append(textContainer);
            let containerWidth = textContainer.offsetWidth + 30;
            textContainer.remove();
            dom.style.setProperty("width", `${containerWidth}px`);
            this.handleSearch(name);
          }

        } catch (error) {
          console.log(error);
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .overview{
    .enterprise_title{
      position: relative;
    }
    .select{
      position: absolute;
      right: 0;
      top:-10px;
      display: flex;
    }
    .custom-time-select1 {
      width: 110px;
      ::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(25% - 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: auto !important;
          right: 124px !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>
