VUE 列表和echarts数据联动

<template>
  <div class="wrap">
    <div class="bg"></div>
    <div class="wrapbg" v-show="loading == 'yes'">
      <p style="color: white;font-size: 25px;text-align: center;height: 100%;position: relative;top: 50%;">数据加载中......</p>
    </div>
    <el-row class="top">
      <el-col :span="24" style="">
        <div class="title">迪卡侬生产产线看板</div>
      </el-col>
    </el-row>
    <div style="margin-left: 1%;width: 98%;">
      <el-row type="flex" :gutter="10">
      <el-col :span="9">
        
        <div class="bg1">
          <div class="tableTitle">每日效率</div>
          <div>
            <el-table ref="table1" :data="planList1" height="calc(100vh * 475 / 1080)" size='mini'
              class="commonScrollbarTable" :row-class-name="tableRowClassName" :row-style="{ height: '0' }" :cell-style="{ padding: '0' }"
              :header-row-style="{ height: '0' }" :header-cell-style="{
                padding: '0',
                // borderRight:'1px solid white'
              }"
              style="font-size: calc(100vw *21 / 1920);width:100%; color: #589fb8;text-align: center;margin-top: calc(100vh * 0 / 1080);margin-left: 0px;border-left:0px solid #fff">
              <el-table-column prop="name" label='线别/日期/效率' min-width="23%" text-align="center">
              </el-table-column>
              <el-table-column v-for="(item,index) in this.header1Name" :key="index" :prop="item" :label='item.slice(5,10)' min-width="11%" text-align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="bg1">
          <div class="tableTitle">每日效率</div>
          <div id="main1" style="width: 100% !important;height:calc(100vh * 475 / 1080) ;" class="echart">
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="10" style="margin-top: 0px;">
      <el-col :span="9">
        <div class="bg2">
          <div class="tableTitle">每日平均FTT</div>
          <el-table ref="table2" :data="planList2" height="calc(100vh * 390 / 1080)" size='mini' border
              class="commonScrollbarTable" :row-style="{ height: '0' }" :cell-style="{ padding: '0' }"
              :header-row-style="{ height: '0' }" :header-cell-style="{
                padding: '0',
              }"
              style="font-size: calc(100vw *21 / 1920);width:100%; color: #589fb8;text-align: center;margin-top: calc(100vh * 0 / 1080);margin-left: 0px;border-left:0px solid #fff">
              <el-table-column prop="name" label='线别/日期/FTT' min-width="23%" text-align="center">
              </el-table-column>
              <el-table-column v-for="(item,index) in this.header1Name" :key="index" :prop="item" :label='item.slice(5,10)' min-width="11%" text-align="center">
              </el-table-column>
            </el-table>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="bg2">
          <div class="tableTitle">前五不良分析(月累计)</div>
          <div id="main2" style="width: 100% !important;height:calc(100vh * 390 / 1080) ;" class="echart">
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="bg2">
          <div class="tableTitle">{{ this.list6Name}}巡检不良分析(当日)</div>
          <div id="main21" style="width: 100% !important;height:calc(100vh * 390 / 1080) ;" class="echart">
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="bg2">
          <div class="tableTitle">{{ this.list5Name}}品质不良数量(当日)</div>
          <div id="main3" style="width: 100% !important;height:calc(100vh * 390 / 1080) ;" class="echart">
          </div>
        </div>
      </el-col>
    </el-row>
    </div>
    
    <el-row :span="24">
      <div
        style="line-height:15px;font-size: calc(100vw *10 / 1920);margin:0 auto;width: 100%;;height:15px;position: fixed; bottom: 0px;text-align:center;color:azure">
        Powered by&nbsp;<img align=absmiddle src="../../assets/images/NJATECHLOGO.png"
          style="height: 10px;line-height:10px;" /> 南京广厦软件有限公司</div>
    </el-row>
  </div>
</template>
  
<script>
import * as echarts from 'echarts';
import vueEvents from '../centit/VueEvent';
import { Row } from "vant";
import { getRequestURL } from "../../api" // 导入api接口
// import {initDataList} from "../js/index" // 导入api接口

export default {
  name: 'app',
  data() {
    return {
      timer1:null,
      level1:'',
      timer2:null,
      level2:'',
      timer3:null,
      timer4:null,
      refreshIndex:0,
      loading:false,
      planList1: [],
      header1Name:[],
      header2Name:[],
      planList2: [],
      planList3: {},
      planList4: [],
      planList5: [],
      planList6: [],
      list5Name:'',
      list6Name:'',
      pjList:[],
      getRowIndex: 0,
      timer5:null,
      LineOweList:[]
    };
  },
  onload() {
    console.log('000000')
  },
  created() {
    console.log('000000')
  },

  beforeDestroy() {
    clearInterval(this.timer1); // 销毁定时器
    clearInterval(this.timer2); // 销毁定时器
    clearInterval(this.timer3); // 销毁定时器
    clearInterval(this.timer4); // 销毁定时器
    clearInterval(this.timer5); // 销毁定时器
  },
  mounted() {
      this.refreshData()
      const table1 = this.$refs.table1;
    // 拿到表格中承载数据的div元素
    const divData1 = table1.bodyWrapper;
    clearInterval(this.timer1);
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    this.timer1 = setInterval(() => {
      // 元素自增距离顶部1像素
      divData1.scrollTop += 1;
      if (this.level1 == divData1.scrollTop) {
        divData1.scrollTop = 0;
      }else{
        this.level1 = divData1.scrollTop
      }
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData1.clientHeight + divData1.scrollTop >= divData1.scrollHeight) {
        // 重置table距离顶部距离
        divData1.scrollTop = 0;
      }
    }, 60);  // 滚动速度

    const table2 = this.$refs.table2;
    // 拿到表格中承载数据的div元素
    const divData2 = table2.bodyWrapper;
    clearInterval(this.timer2);
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    this.timer2 = setInterval(() => {
      // 元素自增距离顶部1像素
      divData2.scrollTop += 1;
      if (this.level2 == divData2.scrollTop) {
        divData2.scrollTop = 0;
      }else{
        this.level2 = divData2.scrollTop
      }
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData2.clientHeight + divData2.scrollTop >= divData2.scrollHeight) {
        // 重置table距离顶部距离
        divData2.scrollTop = 0;
      }
    }, 60);  // 滚动速度
    
    this.initDataList1('1')
  },
  methods: {
    tableRowClassName({ row, column, rowIndex, columnIndex }) {

row.index = rowIndex;
// console.log('------123123123====',row,column,rowIndex,columnIndex)
if (this.getRowIndex === rowIndex) {
    // console.log('有选择了')
    return 'warning-row';
} else {
  // console.log('meiyou')
  return '';
   
}


},
    refreshData() {
      clearInterval(this.timer4);
      this.timer4 = setInterval(() => {
        console.log('页面刷新数据====')
        this.initDataList1('0')
      }, 1000 * 60*15);
    },
    refreshData1() {
      clearInterval(this.timer5);
      this.timer5 = setInterval(() => {
        if (this.getRowIndex == this.planList1.length-2) {
          this.getRowIndex = 0
        }else{
          this.getRowIndex = this.getRowIndex + 1
        }
        console.log('000000000000==',this.LineOweList,this.getRowIndex)
        this.pjList = this.LineOweList[this.getRowIndex]
        console.log('折线图数据====',this.pjList)
        var namelist =[]
        for (const key in  this.pjList) {
        console.log('key====',key)
        if(key.indexOf('name')!=-1){
         
}else{
  const element = this.pjList[key];
        console.log('ele ====',element)
        namelist.push(element)
}
        
      }
        var chart = echarts.getInstanceByDom(document.getElementById('main1'));
        var option = chart.getOption();
        option.series[0].data = namelist;
        chart.setOption(option);

      }, 1000 * 60);
    },
    initDataList1(type) {
       if (type == '1') {
           vueEvents.$emit('bgShow','yes')
       } 
       this.$axios({
               method: 'post',
               url: getRequestURL() + '/SewWorkCenerKanbanCal',
               data: { orgid:'a75a175d3f36466697aad813e5419c9c'},
               headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
               transformRequest: function (obj) {
                   var str = [];
                   for (var p in obj) {
                       str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                   }
                 return str.join("&");
             }
           }).then((res) => {
               vueEvents.$emit('bgShow','no')
               let dic = res.data
               let resultmsg = dic['Resultmsg']
               let Reponsecode = dic['Reponsecode']
              console.log('-Processstart-----', res)
            if (Reponsecode == '0000') {
                  this.createUI(resultmsg)
              } else {
                  let Reponsedesc = dic['Reponsedesc']
                   this.$message(Reponsedesc);
              }

          })

    },
    createUI(data) {
      this.header1Name =[]
      this.planList1=[]
      this.planList2 =[]
      var LineOweList=data['LineOweList']
      // var LineOweList = [{Worklineid:"bd338764ba8f4f5fb12ce8f1007df48c",Worklinename: "12线",dayOWE: {'2023-08-04 00:00:00':90,'2023-08-05 00:00:00':80,'2023-08-07 00:00:00':98,'2023-08-08 00:00:00':80,
      // '2023-08-09 00:00:00':90,'2023-08-10 00:00:00':90,'2023-08-11 00:00:00':90}},{Worklineid:"bd338764ba8f4f5fb12ce8f1007df46c",Worklinename: "13线",dayOWE: {'2023-08-04 00:00:00':80,'2023-08-05 00:00:00':70,'2023-08-07 00:00:00':88,'2023-08-08 00:00:00':60,
      // '2023-08-09 00:00:00':90,'2023-08-10 00:00:00':80,'2023-08-11 00:00:00':90}}]
      // var LineFTTList = [{Worklineid:"bd338764ba8f4f5fb12ce8f1007df48c",Worklinename: "12线",Errordetail: {'2023-08-26 00:00:00':{Ftt:90},'2023-08-27 00:00:00':{Ftt:10},'2023-08-28 00:00:00':{Ftt:190},'2023-08-29 00:00:00':{Ftt:90},
      // '2023-08-30 00:00:00':{Ftt:80},'2023-07-01 00:00:00':{Ftt:40},'2023-07-03 00:00:00':{Ftt:80}}},{Worklineid:"bd338764ba8f4f5fb12ce8f1007df46c",Worklinename: "13线",Errordetail: {'2023-08-26 00:00:00':{Ftt:90},'2023-08-27 00:00:00':{Ftt:90},'2023-08-28 00:00:00':{Ftt:90},'2023-08-29 00:00:00':{Ftt:90},
      // '2023-08-30 00:00:00':{Ftt:60},'2023-07-01 00:00:00':{Ftt:80},'2023-07-03 00:00:00':{Ftt:190}}}]
      // this.planList5 = [{Worklineid:'23123123123',Worklinename:'12线',worklineRFT:{ErrorDesc:['坏了'],ErrorVal:['14']}},{Worklineid:'23123123123',Worklinename:'13线',worklineRFT:{ErrorDesc:['坏了11'],ErrorVal:['24']}}]
      var LineFTTList = data['LineFTTList']
      this.planList4 = data['MonthErrorfenbu']
      this.planList5 =data['LineRFTList']
      this.planList6 =data['LineRFTInspectionList']
      var name = data['DisplayDate7']

      for (let index = 0; index < name.length; index++) {
        const element = name[index];
        this.header1Name.push(element)
      }
      var sum = {}
      var sum1 = {}
      
      for (let index = 0; index < LineOweList.length; index++) {
        const ele = LineOweList[index];
        var dayOWE = ele['dayOWE']
        var linename = ele['Worklinename']
        var dic ={name:linename}
        if (index==0) {
          sum = dayOWE
        }else{
          for(const key in dayOWE){
          var lfl = sum[key]
          var lfl1 = dayOWE[key]
          var lfl2 = lfl*1+ lfl1*1
          Object.assign(sum,{[key]:lfl2})
       }
     }
        this.planList1.push(Object.assign(dic,dayOWE))
      }
        for(const key in sum){
          var lfl = sum[key]
          var lfl2 = (lfl*1/LineOweList.length).toFixed(2)
          Object.assign(sum,{[key]:lfl2})
       }
      this.planList1.push(Object.assign({name:'平均效率'},sum))
      this.LineOweList = this.planList1
      this.pjList = this.planList1[0]
      console.log('第一次的值=====',this.pjList)
      

      for (let index = 0; index < LineFTTList.length; index++) {
        const ele = LineFTTList[index];
        var Errordetail = ele['Errordetail']
        var linename = ele['Worklinename']
        var dic ={name:linename}
        for (const key in Errordetail) {
          const value = Errordetail[key];
          Object.assign(dic,{[key]:value.Ftt})
        }

      

        if (index==0) {
          for (const key in Errordetail) {
          const value = Errordetail[key];
          Object.assign(sum1,{[key]:value.Ftt})
        }
        }else{
          for(const key in Errordetail){
          // console.log("sum1：",sum1,Errordetail)
          var lfl = sum1[key]
          var lfl1 = Errordetail[key]
          var lfl2 = lfl*1+ lfl1.Ftt*1
          // console.log("lfl：",lfl,lfl1,lfl2)
          Object.assign(sum1,{[key]:lfl2})
       }
     }
     this.planList2.push(dic)
    //  console.log('sum1====',Object.assign({name:'平均效率'},sum1))
        
      }
      for(const key in sum1){
          var lfl = sum1[key]
          var lfl2 = (lfl*1/LineFTTList.length).toFixed(2)
          Object.assign(sum1,{[key]:lfl2})
       }
    this.planList2.push(Object.assign({name:'平均合格率'},sum1))
    //   console.log('9999999999',this.planList2)
    
    this.refreshData1()
    this.createChart1()
    this.createChart2()
    this.createChart21()
    this.createChart3()
    this.createCKUI()
    },
    createCKUI() {
      
        clearInterval(this.timer3);
        this.timer3 = setInterval(() => {
          console.log('面板5刷新数据')
          //刷新数据
        if (this.refreshIndex>=this.planList5.length) {
         this.refreshIndex = 0
      }
      var data = this.planList5[this.refreshIndex]
      var listShow = []
      this.list5Name = data['Worklinename']
      var worklineRFT = data['worklineRFT']
      var desc= worklineRFT['ErrorDesc']
      var val= worklineRFT['ErrorVal']
      for (let index = 0; index < desc.length; index++) {
        const element = desc[index];
        const element1 = val[index];
        var dic ={name:element,value:element1}
        listShow.push(dic)
        
       }
        var chart = echarts.getInstanceByDom(document.getElementById('main3'));
        var option = chart.getOption();
        option.series[0].data = listShow;
        chart.setOption(option);

        var data1 = this.planList6[this.refreshIndex]
      var listShow1 = []
      this.list6Name = data1['Worklinename']
      var worklineRFT1 = data1['worklineRFT']
      var desc1= worklineRFT1['ErrorDesc']
      var val1= worklineRFT1['ErrorVal']
      for (let index = 0; index < desc1.length; index++) {
        const element = desc1[index];
        const element1 = val1[index];
        var dic ={name:element,value:element1}
        listShow1.push(dic)
        
       }
        var chart1 = echarts.getInstanceByDom(document.getElementById('main21'));
        var option1 = chart1.getOption();
        option1.series[0].data = listShow1;
        chart1.setOption(option1);


        this.refreshIndex = this.refreshIndex + 1
        }, 60 * 1000);
    },
    createChart1() {
      var myChart = echarts.init(document.getElementById('main1'));
      let namelist = []
      console.log('pjlist ====',this.pjList)
      for (const key in  this.pjList) {
        console.log('key====',key)
        if(key.indexOf('name')!=-1){
         
}else{
  const element = this.pjList[key];
        console.log('ele ====',element)
        namelist.push(element)
}
        
      }
      console.log('namelist ====',namelist)

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          show: true,
          formatter(params){
            // console.log('pa===',params)
            return '日期:' + params.name.slice(0,10) + ',平均值:' + params.data
      }
        },//提示语
        grid: {//设置柱状图大小以及位置
                    top: "5%",
                    left: "3.5%",
                    right: "3.5%",
                    bottom: "2%",
                    containLabel: true,
                },
        xAxis: {
    type: 'category',
    data: this.header1Name,
    axisLine: {
      show: true,
      lineStyle: {
               color: 'white'
         }
    },
    axisLabel:{
      formatter(value){
        return value.slice(5,10)
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
               color: 'white'
         }
    },
  },
  series: [
    {
      data: namelist,
      type: 'line',
      color:'orange',
      symbol: 'circle',
      symbolSize: 10,
    },
    // {
    //   data: [10, 300, 150,290,100],
    //   type: 'line',
    //   color:'green',
    //   symbol: 'circle',
    //   symbolSize: 10,
    // }
  ]

      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    createChart2() {
      var myChart = echarts.init(document.getElementById('main2'));
      var desc= this.planList4['ErrorDesc']
      var val= this.planList4['ErrorVal']
      var data = []
      for (let index = 0; index < desc.length; index++) {
        const element = desc[index];
        const element1 = val[index];
        var dic ={name:element,value:element1}
        data.push(dic)
        
      }

      // 指定图表的配置项和数据
      var option = {
                color:[ '#7CFFB2','#58D9F9' ,'#FDDD60','#FF6E76','red'],
                tooltip: {
                   
                },
                series: [
                    {
                        type: 'pie',
                        data: data,
                        radius: ['0%', '55%'],
                            top: '0%',
                            // height: '100%',
                            left: 'center',
                            // width: '100%',
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            label: {
                                alignTo: 'edge',
                                formatter: '{b}\n{c}',
                                minMargin: 10,// 设置每块扇形的最小占比
                                edgeDistance: 10,
                                lineHeight: 15,
                                color: '#FFFFFF',
                                fontSize: 12,
                            },
                            labelLine: {
                                length: 15,
                                length2: 0,
                                maxSurfaceAngle: 10,

                            },
                            labelLayout: function (params) {
                                const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                                const points = params.labelLinePoints;
                                points[2][0] = isLeft
                                  ? params.labelRect.x
                                  : params.labelRect.x + params.labelRect.width;
                                return {
                                    labelLinePoints: points
                                };
                            },
                    }
                ]
            };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    createChart21() {
      var myChart = echarts.init(document.getElementById('main21'));
      var data = this.planList6[0]
      var listShow = []
      this.list6Name = data['Worklinename']
      var worklineRFT = data['worklineRFT']
      var desc= worklineRFT['ErrorDesc']
      var val= worklineRFT['ErrorVal']
      for (let index = 0; index < desc.length; index++) {
        const element = desc[index];
        const element1 = val[index];
        var dic ={name:element,value:element1}
        listShow.push(dic)
        
      }

      this.refreshIndex = 1;
      // 指定图表的配置项和数据
      var option = {
                color:[ '#7CFFB2','#58D9F9' ,'#FDDD60','#FF6E76','red'],
                tooltip: {
                   
                },
                series: [
                    {
                        type: 'pie',
                        data: listShow,
                            radius: ['0%', '55%'],
                            top: '0%',
                            // height: '50%',
                            left: 'center',
                            // width: '80%',
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            label: {
                                alignTo: 'edge',
                                formatter: '{name|{b}}\n{num|{c}}',
                                minMargin: 10,// 设置每块扇形的最小占比
                                edgeDistance: 10,
                                lineHeight: 15,
                                rich: {
                                    time: {
                                        fontSize: 12,
                                        color: '#FFFFFF'
                                    }
                                },
                                color: '#FFFFFF',
                                fontSize: 12,
                            },
                            labelLine: {
                                length: 15,
                                length2: 0,
                                maxSurfaceAngle: 10,

                            },
                            labelLayout: function (params) {
                                const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                                const points = params.labelLinePoints;
                                points[2][0] = isLeft
                                  ? params.labelRect.x
                                  : params.labelRect.x + params.labelRect.width;
                                return {
                                    labelLinePoints: points
                                };
                            },
                    }
                ]
            };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    createChart3() {
      var myChart = echarts.init(document.getElementById('main3'));
      var data = this.planList5[0]
      var listShow = []
      this.list5Name = data['Worklinename']
      var worklineRFT = data['worklineRFT']
      var desc= worklineRFT['ErrorDesc']
      var val= worklineRFT['ErrorVal']
      for (let index = 0; index < desc.length; index++) {
        const element = desc[index];
        const element1 = val[index];
        var dic ={name:element,value:element1}
        listShow.push(dic)
        
      }
      this.refreshIndex = 1;
      // 指定图表的配置项和数据
      var option = {
                color:[ '#7CFFB2','#58D9F9' ,'#FDDD60','#FF6E76','red'],
                tooltip: {
                   
                },
                series: [
                    {
                        type: 'pie',
                        data: listShow,
                        radius: ['0%', '55%'],
                            top: '0%',
                            // height: '105%',
                            left: 'center',
                            // width: '98%',
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            label: {
                                alignTo: 'edge',
                                formatter: '{name|{b}}\n{num|{c}}',
                                minMargin: 10,// 设置每块扇形的最小占比
                                edgeDistance: 10,
                                lineHeight: 15,
                                rich: {
                                    time: {
                                        fontSize: 12,
                                        color: '#FFFFFF'
                                    }
                                },
                                color: '#FFFFFF',
                                fontSize: 12,
                            },
                            labelLine: {
                                length: 15,
                                length2: 0,
                                maxSurfaceAngle: 10,

                            },
                            labelLayout: function (params) {
                                const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                                const points = params.labelLinePoints;
                                points[2][0] = isLeft
                                  ? params.labelRect.x
                                  : params.labelRect.x + params.labelRect.width;
                                return {
                                    labelLinePoints: points
                                };
                            },
                    }
                ]
            };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
@media screen and (min-width: 1024px) {
  #app {
    font-size: 0.08rem;
  }
}

.wrap {
  width: 100%;
  height: 100%;
  /* margin-left: 1%; */
}

.wrapbg {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: black;
  opacity: 0.8;
  z-index: 10;
}

.bg {
  width: 100%;
  height: 100%;
  background-image: url('../../../img/bg3.png');
  position: absolute;
  background-size: cover;
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
  overflow: auto;
}

.top {
  width: 100%;
  height: calc(100vh * 80/ 1080);
}

.title {
  color: white;
  font-size: calc(100vw *30 / 1920);
  height: calc(100vh * 80/ 1080);
  line-height: calc(100vh * 80/ 1080);
  text-align: center;
  outline: none;
}

.tableTitle {
  color: white;
  font-size: calc(100vw *27 / 1920);
  font-weight: bold;
  width: 100%;
  height: calc(100vh * 45/ 1080);
  line-height: calc(100vh * 45/ 1080);
  text-align: center;
  justify-content: center;
  display: flex;
  /* padding-top: calc(100vh * 10/ 1080); */
}

.bg1 {
  height: calc(100vh *520 / 1080);
  width: 100%;
  border-radius: 5px;
  border: 1px solid rgba(25, 186, 139, .17);
  background: rgba(255, 255, 255, .04);
  position: relative;
}

.bg2 {
  height: calc(100vh *435 / 1080);
  width: 100%;
  border-radius: 5px;
  border: 1px solid rgba(25, 186, 139, .17);
  background: rgba(255, 255, 255, .04);
  margin-top: calc(100vh *10 / 1080);
  position: relative;
}
.el-table>>>tr {
  background-color: transparent;
}

.el-table>>>th {
  background-color: #053A98;
  text-align: center;
  padding: 0px;
  color: white;
  white-space: pre-wrap;
  /* font-weight: normal; */
  font-size: calc(100vw *14 / 1920);
  border: 1px solid transparent;
  outline: none;
    -webkit-tap-highlight-color: transparent;
}

.el-table>>>td {
  text-align: center;
  background-color: transparent;
  color: white;
  text-align: center;
  background-color: transparent;
  color: white;
  justify-content: center;
  white-space: pre-wrap;

  font-size: calc(100vw *14 / 1920);
  border-bottom: 1px solid #053A98;
  border-right: 1px solid #053A98;
}

.el-table>>>.cell {
  line-height: calc(100vh *20 / 1080);
  padding: 4px;
}

.el-table {
  background-color: transparent;
  border: 0px;
}
.el-table>>> .warning-row {
    background-color: orange !important;
}

.el-table .success-row {
    background: #f0f9eb;
}

/* 修改鼠标hover变化的颜色 */
.el-table>>>tbody tr:hover>td {
  background-color: transparent !important
}

.el-table>>>.el-progress-bar__innerText {
  font-size: calc(100vw *10 / 1920);
  /* vertical-align: center; */
  line-height: 7px;
  height: 14px;
}
/* 设置是否隐藏右侧滚动框 */
.commonScrollbarTable /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px;
  height: 10px;
  display: none;
  overflow: hidden;
}

/* table右侧横线设置 */
.el-table--border::after,
.el-table--group::after {
  width: 0px;
}

/* table底部横线设置 */
.el-table::before {
  left: 0;
  bottom: 0;
  width: 97%;
  height: 0;
  background-color: red;
}


/* 设置table的body和header宽度一致 */
.el-table>>>.el-table__header,
.el-table>>>.el-table__body,
.el-table>>>.el-table__footer {
  width: 100% !important;
}

.firefox .el-table>>>.el-table__header colgroup col[name='gutter'] {
  /* width: 0px !important; */
}

.other .el-table>>>.el-table__header colgroup col[name='gutter'] {
  width: 0px !important;
}

.echart {
  width: 100%;
  height: 100%;
}

.echart .canvas {
  width: 100%;
  height: 100%;
}
</style>