<template>
  <div class="overview">
    <div class="search-supplier m-b16">
      <div class="title_wrap">
        <div class="enterprise_title">
          供应商实时考核情况
        </div>
      </div>
      <div class="evalist">
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_1.png">考核供应商数</div>
          <div class="eva2"><span>330</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_2.png">物资供应商数</div>
          <div class="eva2"><span>330</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_3.png">劳务分包供应商</div>
          <div class="eva2"><span>27</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_4.png">专业分包供应商</div>
          <div class="eva2"><span>102</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_5.png">设备供应商</div>
          <div class="eva2"><span>5</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_6.png">履约预警供应商</div>
          <div class="eva2"><span>0</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_7.png">信用预警供应商</div>
          <div class="eva2"><span>0</span>个</div>
        </div>
      </div>
    </div>
    <div class="yj-supplier m-b16">
      <div class="title_wrap">
        <div class="enterprise_title">
          供应商预警
          <div class="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="yj-main">
        <div class="yi-cont yj-left">
          <div class="yj-title">供应商履约预警动态<span>（+3）</span></div>
          <div class="yj-list">
            <div class="main-box">
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in yjdt"
                  :key="index">
                  <div class="grade">预警等级：{{item.grade}}</div>
                  <div class="unit">供应商单位：{{item.unit}}</div>
                  <div class="projectName">项目名称：{{item.projectName}}</div>
                  <div class="time">{{item.time}}</div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
        <div class="yi-cont yj-right">
          <div class="yj-title">供应信用预警状态<span>（+3）</span></div>
          <div class="yj-list">
            <div class="main-box">
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in yjzt"
                  :key="index">
                  <div class="grade">预警等级：{{item.grade}}</div>
                  <div class="unit">供应商单位：{{item.unit}}</div>
                  <div class="projectName">项目名称：{{item.projectName}}</div>
                  <div class="time">{{item.time}}</div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="charts-supplier">
      <div class="title_wrap">
        <div class="enterprise_title">
          优质供应商履约得分排行榜
          <div class="select">
            <custom-time-select :timeList="timeList" v-model="time1" :class="[`select-adaptive-${inputID1}`]" timeValue="近七天"
                                placeholder="请选择时间" @handle-search="iptAdaptive(inputID1,'','changeSelect')" />
          </div>
        </div>
      </div>
      <div class="charts-main">
        <div class="charts-cont">
          <div class="charts-title">物资类供应商履约得分TOP10</div>
          <div class="charts-div">
            <div id="wz-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="charts-cont">
          <div class="charts-title">设备类供应商履约得分TOP10</div>
          <div class="charts-div">
            <div id="sbl-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="charts-cont">
          <div class="charts-title">劳务分包类供应商TOP10</div>
          <div class="charts-div">
            <div id="lwfb-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="charts-cont">
          <div class="charts-title">专业分包类供应商TOP10</div>
          <div class="charts-div">
            <div id="zyfb-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="charts-cont">
          <div class="charts-title">专业服务类供应商TOP10</div>
          <div class="charts-div">
            <div id="zyfw-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="charts-cont">
          <div class="charts-title">租赁类供应商TOP10</div>
          <div class="charts-div">
            <div id="zl-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>
    </div>
  </div>

</template>

<script>
  import '@/assets/styles/public.scss'
  import '@/assets/styles/supplierlist.scss'
  import mixin from '@/views/detail/party-a/mixins/mixin'
  import CustomTimeSelect from '../../component/CustomTimeSelect'
  import { v4 } from "uuid"
  import * as echarts from 'echarts';
  export default {
    name: 'overview',
    mixins: [mixin],
    components:{CustomTimeSelect},
    data(){
      return{
        yjdt:[
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
        ],
        yjzt:[
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
          {
            grade:'C',
            unit:'莱晟达(烟台)环保材料科技有限公司',
            projectName:'石家庄高新区集中安置区棚户区改造项目G区（5#）EPC总承包',
            time:'2024年3月18日 17:33:33',
          },
        ],
        wzData:[
          {
            name:'北京宏盛兴达装饰设计有限责任公司',
            money:'7729836.61',
            score:'118'
          },
          {
            name:'重庆宏力嘉商贸有限公司',
            money:'245097.73',
            score:'114'
          },
          {
            name:'北京京首建混凝土搅拌站有限公司',
            money:'684122.3179',
            score:'114'
          },
          {
            name:'重庆越尚建材有限公司',
            money:'83289.27',
            score:'110'
          },
          {
            name:'都江堰市宏发节能砖厂',
            money:'83289.27',
            score:'102'
          },
          {
            name:'重庆展鹏门业有限公司',
            money:'13289.27',
            score:'92'
          },
          {
            name:'海南奥利格新型建',
            money:'13289.27',
            score:'82'
          },
          {
            name:'莱晟达(烟台)环保材料科',
            money:'13289.27',
            score:'78'
          },
          {
            name:'中建蓉成建材成都有限公司',
            money:'13289.27',
            score:'72'
          },
          {
            name:'北京京首建混凝土搅拌站有限公司',
            money:'13289.27',
            score:'62'
          },
        ],
        timeList: ['今日','近三天', '近七天', '近半月', '自定义'],
        time:'',
        time1:'',
        inputID: this.getUid(),
        inputID1: this.getUid(),
      }
    },
    created() {
      this.$nextTick(()=>{
        this.initChart(this.wzData)
        this.initChart1(this.wzData)
        this.initChart2(this.wzData)
        this.initChart3(this.wzData)
        this.initChart4(this.wzData)
        this.initChart5(this.wzData)
      })
    },
    methods:{
      getUid() {
        return v4();
      },
      changeSelect(){

      },
      initChart(data) {
        let myChart = echarts.init(document.getElementById("wz-echarts"))
        let option = {
          // 坐标轴
          grid: {
            top: "10%",
            left: "4%",
            right: "3%",
            bottom: "4%",
            containLabel: true, //是否包含坐标轴的文字
          },
          legend: {
            data:['履约加权得分'],
            x:'16px',
            y:'8px'
          },
          // 鼠标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();//图表跟随页面大小变化宽度
        });
      },
      initChart1(data) {
        let myChart = echarts.init(document.getElementById("sbl-echarts"))
        let option = {
          // 坐标轴
          grid: {
            top: "10%",
            left: "4%",
            right: "3%",
            bottom: "4%",
            containLabel: true, //是否包含坐标轴的文字
          },
          legend: {
            data:['履约加权得分'],
            x:'16px',
            y:'8px'
          },
          // 鼠标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: '#F77234',
              }
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart2(data) {
        let myChart = echarts.init(document.getElementById("lwfb-echarts"))
        let option = {
          // 坐标轴
          grid: {
            top: "10%",
            left: "4%",
            right: "3%",
            bottom: "4%",
            containLabel: true, //是否包含坐标轴的文字
          },
          legend: {
            data:['履约加权得分'],
            x:'16px',
            y:'8px'
          },
          // 鼠标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: '#AA69EB',
              }
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart3(data) {
        let myChart = echarts.init(document.getElementById("zyfb-echarts"))
        let option = {
          // 坐标轴
          grid: {
            top: "10%",
            left: "4%",
            right: "3%",
            bottom: "4%",
            containLabel: true, //是否包含坐标轴的文字
          },
          legend: {
            data:['履约加权得分'],
            x:'16px',
            y:'8px'
          },
          // 鼠标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: '#FFAB44',
              }
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart4(data) {
        let myChart = echarts.init(document.getElementById("zyfw-echarts"))
        let option = {
          // 坐标轴
          grid: {
            top: "10%",
            left: "4%",
            right: "3%",
            bottom: "4%",
            containLabel: true, //是否包含坐标轴的文字
          },
          legend: {
            data:['履约加权得分'],
            x:'16px',
            y:'8px'
          },
          // 鼠标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: '#0CBC6D',
              }
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      },
      initChart5(data) {
        let myChart = echarts.init(document.getElementById("zl-echarts"))
        let option = {
          // 坐标轴
          grid: {
            top: "10%",
            left: "4%",
            right: "3%",
            bottom: "4%",
            containLabel: true, //是否包含坐标轴的文字
          },
          legend: {
            data:['履约加权得分'],
            x:'16px',
            y:'8px'
          },
          // 鼠标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: '#12C0C7',
              }
            },
          ],
        };
        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;
    }
    ::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;
  }
  .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>
