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

zhaowei

2025-06-26 2d93721c3758621a6b9a7eff038a8d6eac4fda24

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

@@ -1,49 +1,44 @@
<template>
  <div class="comparative_pie" style="width: 100%;height: 600px;display: flex;overflow: scroll">
    <div id="compAnalPie1" style="flex: 1;"></div>
    <div id="compAnalPie2" style="flex: 1;"></div>
  <div style="display: flex;height: 100%;overflow: auto">
    <div id="compAnalPie1" style="width:50%;height:600px"></div>
    <div id="compAnalPie2" style="width:50%;height:600px"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'conparativeAnalysisPie',
    props:{ dataList:''},
    data(){
      return{
        closeRate:0,
        openRate:0,
        usedRate:0,
        waitRate:0,
        RateList:[]
    name: 'comparativeAnalysisPie',
    props: { dataList: '' },
    data() {
      return {
        closeRate: 0,
        openRate: 0,
        usedRate: 0,
        waitRate: 0,
        RateList: []
      }
    },
    created(){

    },
    watch:{
      dataList(val){
    watch: {
      dataList(val) {
        this.RateList = val
        console.log(val)
        this.drawTu()
      },
      }
    },
    mounted() {
      this.drawTu()
    },
    methods:{
      drawTu(){
       let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'),'macarons');
       let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'),'macarons');
       let pieCompChartOption1 = {
    methods: {
      drawTu() {
        let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'), 'macarons')
        let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'), 'macarons')
        let pieCompChartOption1 = {
          title: {
            x: 'center',
            subtext: '开机效率'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
@@ -59,8 +54,8 @@
            center: ['55%', '55%'],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#4169E1', '#A8A8A8'];
                color: function(params) {
                  var colorList = ['#4169E1', '#A8A8A8']
                  return colorList[params.dataIndex]
                },
                label: {
@@ -70,18 +65,18 @@
                }
              }
            },
            data: [{value: 0, name: '开机率'},
              {value: 0, name: '关机率'}]
            data: [{ value: 0, name: '开机率' },
              { value: 0, name: '关机率' }]
          }]
        };
       let pieCompChartOption2 = {
        }
        let pieCompChartOption2 = {
          title: {
            x: 'center',
            subtext: '运行效率'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
@@ -97,8 +92,8 @@
            center: ['55%', '55%'],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#00ee00', '#FCCE10', '#A8A8A8'];
                color: function(params) {
                  var colorList = ['#00ee00', '#FCCE10', '#A8A8A8']
                  return colorList[params.dataIndex]
                },
                label: {
@@ -108,37 +103,46 @@
                }
              }
            },
            data: [{value: 0, name: '加工率'},
              {value: 0, name: '待机率'},
              {value: 0, name: '关机率'}]
            data: [{ value: 0, name: '加工率' },
              { value: 0, name: '待机率' },
              { value: 0, name: '关机率' }]
          }]
        };
        if(this.RateList != null){
          this.closeRate =[]
          this.openRate =[]
        }
        if (this.RateList != null) {
          this.closeRate = []
          this.openRate = []
          this.usedRate = []
          this.waitRate = []
          if(this.RateList.length>0){
            this.closeRate=this.RateList[0].closeRate
            this.openRate=this.RateList[0].openRate
            this.usedRate=this.RateList[0].processRate
            this.waitRate=this.RateList[0].waitRate
            pieCompChartOption1.series[0].data = [{value:(this.openRate * 100).toFixed(2), name:'开机率'},{value:(this.closeRate * 100).toFixed(2), name:'关机率'}];
            pieCompChartOption2.series[0].data = [{value:(this.usedRate * 100).toFixed(2), name:'加工率'},{value:(this.waitRate * 100).toFixed(2), name:'待机率'},{value:(this.closeRate * 100).toFixed(2), name:'关机率'}];
            pieCompChart1.setOption(pieCompChartOption1);
            pieCompChart2.setOption(pieCompChartOption2);
          }else{
            pieCompChart1.setOption(pieCompChartOption1);
            pieCompChart2.setOption(pieCompChartOption2);
          if (this.RateList.length > 0) {
            this.closeRate = this.RateList[0].closeRate
            this.openRate = this.RateList[0].openRate
            this.usedRate = this.RateList[0].processRate
            this.waitRate = this.RateList[0].waitRate
            pieCompChartOption1.series[0].data = [{
              value: (this.openRate * 100).toFixed(2),
              name: '开机率'
            }, { value: (this.closeRate * 100).toFixed(2), name: '关机率' }]
            pieCompChartOption2.series[0].data = [{
              value: (this.usedRate * 100).toFixed(2),
              name: '加工率'
            }, { value: (this.waitRate * 100).toFixed(2), name: '待机率' }, {
              value: (this.closeRate * 100).toFixed(2),
              name: '关机率'
            }]
            pieCompChart1.setOption(pieCompChartOption1)
            pieCompChart2.setOption(pieCompChartOption2)
          } else {
            pieCompChart1.setOption(pieCompChartOption1)
            pieCompChart2.setOption(pieCompChartOption2)
          }

        }else{
          pieCompChart1.setOption(pieCompChartOption1);
          pieCompChart2.setOption(pieCompChartOption2);
        } else {
          pieCompChart1.setOption(pieCompChartOption1)
          pieCompChart2.setOption(pieCompChartOption2)
        }

        pieCompChart1.setOption(pieCompChartOption1);
        pieCompChart2.setOption(pieCompChartOption2);
        pieCompChart1.setOption(pieCompChartOption1)
        pieCompChart2.setOption(pieCompChartOption2)
        window.addEventListener('resize', function() {
          pieCompChart1.resize()
          pieCompChart2.resize()
@@ -146,8 +150,4 @@
      }
    }
  }
</script>

<style scoped>

</style>
</script>