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,7 +27,6 @@
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'comparativeAnalysisGauge',
    props:{dataList:''},
@@ -57,26 +57,26 @@
    },
    watch:{
      dataList(val){
        console.log(val);
        console.log(val)
        this.TopLastList = val
        this.draw()
      },
      }
    },
    mounted(){
      this.draw();
      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');
        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',
@@ -84,7 +84,7 @@
            text : 'TOP1'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -138,7 +138,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let  gaugeTopOption2 = {
          title : {
            x : 'center',
@@ -146,7 +146,7 @@
            text : 'TOP2'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -200,7 +200,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let gaugeTopOption3 = {
          title : {
            x : 'center',
@@ -208,7 +208,7 @@
            text : 'TOP3'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -262,7 +262,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let gaugeTopOption4 = {
          title : {
            x : 'center',
@@ -270,7 +270,7 @@
            text : 'TOP4'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -324,7 +324,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let gaugeTopOption5 = {
          title : {
            x : 'center',
@@ -332,7 +332,7 @@
            text : 'TOP5'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -386,7 +386,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let gaugeLessOption1 = {
          title : {
            x : 'center',
@@ -394,7 +394,7 @@
            text : 'LAST1'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -448,7 +448,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let gaugeLessOption2 = {
          title : {
            x : 'center',
@@ -456,7 +456,7 @@
            text : 'LAST2'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -510,7 +510,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let gaugeLessOption3 = {
          title : {
            x : 'center',
@@ -518,7 +518,7 @@
            text : 'LAST3'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -572,7 +572,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let gaugeLessOption4 = {
          title : {
            x : 'center',
@@ -580,7 +580,7 @@
            text : 'LAST4'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -634,7 +634,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        let gaugeLessOption5 = {
          title : {
            x : 'center',
@@ -642,7 +642,7 @@
            text : 'LAST5'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
            formatter: '{a} <br/>{b} : {c}%'
          },
          series : [
            {
@@ -696,7 +696,7 @@
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        }
        if(this.TopLastList != null){
            this.utilizationRateTopOne=0
            this.utilizationRateTopOneEquipment = 'TOP1'
@@ -759,58 +759,58 @@
            }
          }
          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);
          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);
        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>
<style lang="less" scoped>
  .outer-container {
    height: 100%;
    overflow: auto;

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

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