1、调整设备打卡率页面查询区域样式 2、对比分析页面新增图表数据加载提示以及优化整体页面图表展示及代码 3、调整班次班制管理页面左侧新增班制后刷新列表...

zhaowei

2025-06-26 2d93721c3758621a6b9a7eff038a8d6eac4fda24

 src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue

@@ -1,9 +1,9 @@
<template>
  <div class="comparative_Gauge" style="width: 100%;height: 700px;display: flex;flex-direction: column;overflow: scroll">
    <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
      <h3 style="height: 18px;margin: 0 auto;">利用率 Top 5</h3>
  <div class="outer-container">
    <div>
      <h3 style="margin: 0 auto;">利用率 Top 5</h3>

      <div style="flex: 1;display: flex;">
      <div style="flex: 1;display: flex">
        <div id="top1Gauge" class="div-inline"></div>
        <div id="top2Gauge" class="div-inline"></div>
        <div id="top3Gauge" class="div-inline"></div>
@@ -11,10 +11,11 @@
        <div id="top5Gauge" class="div-inline"></div>
      </div>
    </div>
    <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
      <h3 style="height: 18px; margin: 0 auto;">利用率 Last 5</h3>

      <div style="flex: 1;display: flex;">
    <div>
      <h3 style="margin: 0 auto;">利用率 Last 5</h3>

      <div style="flex: 1;display: flex">
        <div id="last1Gauge" class="div-inline"></div>
        <div id="last2Gauge" class="div-inline"></div>
        <div id="last3Gauge" class="div-inline"></div>
@@ -26,80 +27,79 @@
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'comparativeAnalysisGauge',
    props:{dataList:''},
    data(){
      return{
        utilizationRateTopOne:0,
        utilizationRateTopOneEquipment:0,
        utilizationRateTopTwo:0,
        utilizationRateTopTwoEquipment:0,
        utilizationRateTopThree:0,
        utilizationRateTopThreeEquipment:0,
        utilizationRateTopFour:0,
        utilizationRateTopFourEquipment:0,
        utilizationRateTopFive:0,
        utilizationRateTopFiveEquipment:0,
        utilizationRateLastOne:0,
        utilizationRateLastOneEquipment:0,
        utilizationRateLastTwo:0,
        utilizationRateLastTwoEquipment:0,
        utilizationRateLastThree:0,
        utilizationRateLastThreeEquipment:0,
        utilizationRateLastFour:0,
        utilizationRateLastFourEquipment:0,
        utilizationRateLastFive:0,
        utilizationRateLastFiveEquipment:0,
        TopLastList:[]
    props: { dataList: '' },
    data() {
      return {
        utilizationRateTopOne: 0,
        utilizationRateTopOneEquipment: 0,
        utilizationRateTopTwo: 0,
        utilizationRateTopTwoEquipment: 0,
        utilizationRateTopThree: 0,
        utilizationRateTopThreeEquipment: 0,
        utilizationRateTopFour: 0,
        utilizationRateTopFourEquipment: 0,
        utilizationRateTopFive: 0,
        utilizationRateTopFiveEquipment: 0,
        utilizationRateLastOne: 0,
        utilizationRateLastOneEquipment: 0,
        utilizationRateLastTwo: 0,
        utilizationRateLastTwoEquipment: 0,
        utilizationRateLastThree: 0,
        utilizationRateLastThreeEquipment: 0,
        utilizationRateLastFour: 0,
        utilizationRateLastFourEquipment: 0,
        utilizationRateLastFive: 0,
        utilizationRateLastFiveEquipment: 0,
        TopLastList: []
      }
    },
    watch:{
      dataList(val){
        console.log(val);
    watch: {
      dataList(val) {
        console.log(val)
        this.TopLastList = val
        this.draw()
      },
      }
    },
    mounted(){
      this.draw();
    mounted() {
      this.draw()
    },
    methods:{
      draw(){
       let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'),'macarons');
       let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'),'macarons');
       let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'),'macarons');
       let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'),'macarons');
       let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'),'macarons');
       let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'),'macarons');
       let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'),'macarons');
        let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'),'macarons');
        let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'),'macarons');
        let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'),'macarons');
    methods: {
      draw() {
        let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'), 'macarons')
        let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'), 'macarons')
        let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'), 'macarons')
        let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'), 'macarons')
        let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'), 'macarons')
        let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'), 'macarons')
        let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'), 'macarons')
        let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'), 'macarons')
        let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'), 'macarons')
        let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'), 'macarons')
        let gaugeTopOption1 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP1'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP1'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP1',
              type:'gauge',
              name: 'TOP1',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -111,57 +111,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        let  gaugeTopOption2 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP2'
        }
        let gaugeTopOption2 = {
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP2'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP2',
              type:'gauge',
              name: 'TOP2',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -173,57 +173,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeTopOption3 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP3'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP3'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP3',
              type:'gauge',
              name: 'TOP3',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -235,57 +235,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeTopOption4 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP4'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP4'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP4',
              type:'gauge',
              name: 'TOP4',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -297,57 +297,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeTopOption5 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP5'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'TOP5'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'TOP5',
              type:'gauge',
              name: 'TOP5',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -359,57 +359,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption1 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST1'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST1'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST1',
              type:'gauge',
              name: 'LAST1',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -421,57 +421,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption2 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST2'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST2'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST2',
              type:'gauge',
              name: 'LAST2',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -483,57 +483,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption3 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST3'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST3'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST3',
              type:'gauge',
              name: 'LAST3',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -545,57 +545,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption4 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST4'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST4'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST4',
              type:'gauge',
              name: 'LAST4',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -607,57 +607,57 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        }
        let gaugeLessOption5 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST5'
          title: {
            x: 'center',
            y: 'bottom',
            text: 'LAST5'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
          series: [
            {
              name:'LAST5',
              type:'gauge',
              name: 'LAST5',
              type: 'gauge',
              splitNumber: 10,       // 分割段数，默认为5
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
@@ -669,148 +669,148 @@
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                length: 30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              pointer: {
                width: 5
              },
              title : {
                show : false,
              title: {
                show: false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                  fontSize: 20
                }
              },
              data:[{value: 0, name: '利用率'}]
              data: [{ value: 0, name: '利用率' }]
            }
          ]
        };
        if(this.TopLastList != null){
            this.utilizationRateTopOne=0
            this.utilizationRateTopOneEquipment = 'TOP1'
            this.utilizationRateTopTwo=0
            this.utilizationRateTopTwoEquipment = 'TOP2'
            this.utilizationRateTopThree=0
            this.utilizationRateTopThreeEquipment = 'TOP3'
            this.utilizationRateTopFour =0
            this.utilizationRateTopFourEquipment = 'TOP4'
            this.utilizationRateTopFive=0
            this.utilizationRateTopFiveEquipment = 'TOP5'
            this.utilizationRateLastOne=0
            this.utilizationRateLastOneEquipment = 'LAST1'
            this.utilizationRateLastTwo=0
            this.utilizationRateLastTwoEquipment = 'LAST2'
            this.utilizationRateLastThree=0
            this.utilizationRateLastThreeEquipment = 'LAST3'
            this.utilizationRateLastFour=0
            this.utilizationRateLastFourEquipment = 'LAST4'
            this.utilizationRateLastFive=0
            this.utilizationRateLastFiveEquipment = 'LAST5'
          if(this.TopLastList.tops){
            for(var i = 0;i<this.TopLastList.tops.length;i++){
              if(i == 0){
                this.utilizationRateTopOneEquipment=this.TopLastList.tops[0].equipmentId
                this.utilizationRateTopOne=this.TopLastList.tops[0].utilizationRate
              }else if(i == 1){
                this.utilizationRateTopTwoEquipment=this.TopLastList.tops[1].equipmentId
                this.utilizationRateTopTwo=this.TopLastList.tops[1].utilizationRate
              }else if(i == 2){
                this.utilizationRateTopThreeEquipment=this.TopLastList.tops[2].equipmentId
                this.utilizationRateTopThree=this.TopLastList.tops[2].utilizationRate
              }else if(i == 3){
                this.utilizationRateTopFourEquipment=this.TopLastList.tops[3].equipmentId
                this.utilizationRateTopFour=this.TopLastList.tops[3].utilizationRate
              }else if(i == 4){
                this.utilizationRateTopFiveEquipment=this.TopLastList.tops[4].equipmentId
                this.utilizationRateTopFive=this.TopLastList.tops[4].utilizationRate
        }
        if (this.TopLastList != null) {
          this.utilizationRateTopOne = 0
          this.utilizationRateTopOneEquipment = 'TOP1'
          this.utilizationRateTopTwo = 0
          this.utilizationRateTopTwoEquipment = 'TOP2'
          this.utilizationRateTopThree = 0
          this.utilizationRateTopThreeEquipment = 'TOP3'
          this.utilizationRateTopFour = 0
          this.utilizationRateTopFourEquipment = 'TOP4'
          this.utilizationRateTopFive = 0
          this.utilizationRateTopFiveEquipment = 'TOP5'
          this.utilizationRateLastOne = 0
          this.utilizationRateLastOneEquipment = 'LAST1'
          this.utilizationRateLastTwo = 0
          this.utilizationRateLastTwoEquipment = 'LAST2'
          this.utilizationRateLastThree = 0
          this.utilizationRateLastThreeEquipment = 'LAST3'
          this.utilizationRateLastFour = 0
          this.utilizationRateLastFourEquipment = 'LAST4'
          this.utilizationRateLastFive = 0
          this.utilizationRateLastFiveEquipment = 'LAST5'
          if (this.TopLastList.tops) {
            for (var i = 0; i < this.TopLastList.tops.length; i++) {
              if (i == 0) {
                this.utilizationRateTopOneEquipment = this.TopLastList.tops[0].equipmentId
                this.utilizationRateTopOne = this.TopLastList.tops[0].utilizationRate
              } else if (i == 1) {
                this.utilizationRateTopTwoEquipment = this.TopLastList.tops[1].equipmentId
                this.utilizationRateTopTwo = this.TopLastList.tops[1].utilizationRate
              } else if (i == 2) {
                this.utilizationRateTopThreeEquipment = this.TopLastList.tops[2].equipmentId
                this.utilizationRateTopThree = this.TopLastList.tops[2].utilizationRate
              } else if (i == 3) {
                this.utilizationRateTopFourEquipment = this.TopLastList.tops[3].equipmentId
                this.utilizationRateTopFour = this.TopLastList.tops[3].utilizationRate
              } else if (i == 4) {
                this.utilizationRateTopFiveEquipment = this.TopLastList.tops[4].equipmentId
                this.utilizationRateTopFive = this.TopLastList.tops[4].utilizationRate
              }
            }
          }
          if(this.TopLastList.lasts){
            for(var j = 0;j<this.TopLastList.lasts.length;j++){
              if(j == 0){
                this.utilizationRateLastOneEquipment=this.TopLastList.lasts[0].equipmentId
                this.utilizationRateLastOne=this.TopLastList.lasts[0].utilizationRate
              }else if(j == 1){
                this.utilizationRateLastTwoEquipment=this.TopLastList.lasts[1].equipmentId
                this.utilizationRateLastTwo=this.TopLastList.lasts[1].utilizationRate
              }else if(j == 2){
                this.utilizationRateLastThreeEquipment=this.TopLastList.lasts[2].equipmentId
                this.utilizationRateLastThree=this.TopLastList.lasts[2].utilizationRate
              }else if(j == 3){
                this.utilizationRateLastFourEquipment=this.TopLastList.lasts[3].equipmentId
                this.utilizationRateLastFour=this.TopLastList.lasts[3].utilizationRate
              }else if(j == 4){
                this.utilizationRateLastFiveEquipment=this.TopLastList.lasts[4].equipmentId
                this.utilizationRateLastFive=this.TopLastList.lasts[4].utilizationRate
          if (this.TopLastList.lasts) {
            for (var j = 0; j < this.TopLastList.lasts.length; j++) {
              if (j == 0) {
                this.utilizationRateLastOneEquipment = this.TopLastList.lasts[0].equipmentId
                this.utilizationRateLastOne = this.TopLastList.lasts[0].utilizationRate
              } else if (j == 1) {
                this.utilizationRateLastTwoEquipment = this.TopLastList.lasts[1].equipmentId
                this.utilizationRateLastTwo = this.TopLastList.lasts[1].utilizationRate
              } else if (j == 2) {
                this.utilizationRateLastThreeEquipment = this.TopLastList.lasts[2].equipmentId
                this.utilizationRateLastThree = this.TopLastList.lasts[2].utilizationRate
              } else if (j == 3) {
                this.utilizationRateLastFourEquipment = this.TopLastList.lasts[3].equipmentId
                this.utilizationRateLastFour = this.TopLastList.lasts[3].utilizationRate
              } else if (j == 4) {
                this.utilizationRateLastFiveEquipment = this.TopLastList.lasts[4].equipmentId
                this.utilizationRateLastFive = this.TopLastList.lasts[4].utilizationRate
              }
            }
          }
          gaugeTopOption1.title.text = this.utilizationRateTopOneEquipment
          gaugeTopOption1.series[0].data = [{value : (this.utilizationRateTopOne * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption1.series[0].data = [{ value: (this.utilizationRateTopOne * 100).toFixed(2), name: '利用率' }]
          gaugeTopOption2.title.text = this.utilizationRateTopTwoEquipment
          gaugeTopOption2.series[0].data = [{value : (this.utilizationRateTopTwo * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption2.series[0].data = [{ value: (this.utilizationRateTopTwo * 100).toFixed(2), name: '利用率' }]
          gaugeTopOption3.title.text = this.utilizationRateTopThreeEquipment
          gaugeTopOption3.series[0].data = [{value : (this.utilizationRateTopThree * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption3.series[0].data = [{ value: (this.utilizationRateTopThree * 100).toFixed(2), name: '利用率' }]
          gaugeTopOption4.title.text = this.utilizationRateTopFourEquipment
          gaugeTopOption4.series[0].data = [{value : (this.utilizationRateTopFour * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption4.series[0].data = [{ value: (this.utilizationRateTopFour * 100).toFixed(2), name: '利用率' }]
          gaugeTopOption5.title.text = this.utilizationRateTopFiveEquipment
          gaugeTopOption5.series[0].data = [{value : (this.utilizationRateTopFive * 100).toFixed(2), name : '利用率'}];
          gaugeTopOption5.series[0].data = [{ value: (this.utilizationRateTopFive * 100).toFixed(2), name: '利用率' }]

          gaugeLessOption1.title.text = this.utilizationRateLastOneEquipment
          gaugeLessOption1.series[0].data = [{value : (this.utilizationRateLastOne * 100).toFixed(2), name : '利用率'}];
          gaugeLessOption1.series[0].data = [{ value: (this.utilizationRateLastOne * 100).toFixed(2), name: '利用率' }]
          gaugeLessOption2.title.text = this.utilizationRateLastTwoEquipment
          gaugeLessOption2.series[0].data = [{value : (this.utilizationRateLastTwo * 100).toFixed(2), name : '利用率'}];
          gaugeLessOption2.series[0].data = [{ value: (this.utilizationRateLastTwo * 100).toFixed(2), name: '利用率' }]
          gaugeLessOption3.title.text = this.utilizationRateLastThreeEquipment
          gaugeLessOption3.series[0].data = [{value : (this.utilizationRateLastThree * 100).toFixed(2), name : '利用率'}];
          gaugeLessOption3.series[0].data = [{ value: (this.utilizationRateLastThree * 100).toFixed(2), name: '利用率' }]
          gaugeLessOption4.title.text = this.utilizationRateLastFourEquipment
          gaugeLessOption4.series[0].data = [{value : (this.utilizationRateLastFour * 100).toFixed(2), name : '利用率'}];
          gaugeLessOption4.series[0].data = [{ value: (this.utilizationRateLastFour * 100).toFixed(2), name: '利用率' }]
          gaugeLessOption5.title.text = this.utilizationRateLastFiveEquipment
          gaugeLessOption5.series[0].data = [{value : (this.utilizationRateLastFive * 100).toFixed(2), name : '利用率'}];
          gaugeTopChart1.setOption(gaugeTopOption1);
          gaugeTopChart2.setOption(gaugeTopOption2);
          gaugeTopChart3.setOption(gaugeTopOption3);
          gaugeTopChart4.setOption(gaugeTopOption4);
          gaugeTopChart5.setOption(gaugeTopOption5);
          gaugeLastChart1.setOption(gaugeLessOption1);
          gaugeLastChart2.setOption(gaugeLessOption2);
          gaugeLastChart3.setOption(gaugeLessOption3);
          gaugeLastChart4.setOption(gaugeLessOption4);
          gaugeLastChart5.setOption(gaugeLessOption5);
        }else{
          gaugeTopChart1.setOption(gaugeTopOption1);
          gaugeTopChart2.setOption(gaugeTopOption2);
          gaugeTopChart3.setOption(gaugeTopOption3);
          gaugeTopChart4.setOption(gaugeTopOption4);
          gaugeTopChart5.setOption(gaugeTopOption5);
          gaugeLastChart1.setOption(gaugeLessOption1);
          gaugeLastChart2.setOption(gaugeLessOption2);
          gaugeLastChart3.setOption(gaugeLessOption3);
          gaugeLastChart4.setOption(gaugeLessOption4);
          gaugeLastChart5.setOption(gaugeLessOption5);
          gaugeLessOption5.series[0].data = [{ value: (this.utilizationRateLastFive * 100).toFixed(2), name: '利用率' }]
          gaugeTopChart1.setOption(gaugeTopOption1)
          gaugeTopChart2.setOption(gaugeTopOption2)
          gaugeTopChart3.setOption(gaugeTopOption3)
          gaugeTopChart4.setOption(gaugeTopOption4)
          gaugeTopChart5.setOption(gaugeTopOption5)
          gaugeLastChart1.setOption(gaugeLessOption1)
          gaugeLastChart2.setOption(gaugeLessOption2)
          gaugeLastChart3.setOption(gaugeLessOption3)
          gaugeLastChart4.setOption(gaugeLessOption4)
          gaugeLastChart5.setOption(gaugeLessOption5)
        } else {
          gaugeTopChart1.setOption(gaugeTopOption1)
          gaugeTopChart2.setOption(gaugeTopOption2)
          gaugeTopChart3.setOption(gaugeTopOption3)
          gaugeTopChart4.setOption(gaugeTopOption4)
          gaugeTopChart5.setOption(gaugeTopOption5)
          gaugeLastChart1.setOption(gaugeLessOption1)
          gaugeLastChart2.setOption(gaugeLessOption2)
          gaugeLastChart3.setOption(gaugeLessOption3)
          gaugeLastChart4.setOption(gaugeLessOption4)
          gaugeLastChart5.setOption(gaugeLessOption5)
        }
        gaugeTopChart1.setOption(gaugeTopOption1);
        gaugeTopChart2.setOption(gaugeTopOption2);
        gaugeTopChart3.setOption(gaugeTopOption3);
        gaugeTopChart4.setOption(gaugeTopOption4);
        gaugeTopChart5.setOption(gaugeTopOption5);
        gaugeLastChart1.setOption(gaugeLessOption1);
        gaugeLastChart2.setOption(gaugeLessOption2);
        gaugeLastChart3.setOption(gaugeLessOption3);
        gaugeLastChart4.setOption(gaugeLessOption4);
        gaugeLastChart5.setOption(gaugeLessOption5);
        gaugeTopChart1.setOption(gaugeTopOption1)
        gaugeTopChart2.setOption(gaugeTopOption2)
        gaugeTopChart3.setOption(gaugeTopOption3)
        gaugeTopChart4.setOption(gaugeTopOption4)
        gaugeTopChart5.setOption(gaugeTopOption5)
        gaugeLastChart1.setOption(gaugeLessOption1)
        gaugeLastChart2.setOption(gaugeLessOption2)
        gaugeLastChart3.setOption(gaugeLessOption3)
        gaugeLastChart4.setOption(gaugeLessOption4)
        gaugeLastChart5.setOption(gaugeLessOption5)
        window.addEventListener('resize', function() {
          gaugeTopChart1.resize()
          gaugeTopChart2.resize()
@@ -829,8 +829,20 @@
  }
</script>

<style scoped>
  .div-inline{
    flex: 1;
<style lang="less" scoped>
  .outer-container {
    height: 100%;
    overflow: auto;

    > div {
      height: 320px;
      display: flex;
      flex-direction: column
    }

    .div-inline {
      width: 20%;
      height: 100%;
    }
  }
</style>