Merge remote-tracking branch 'origin/master'

zhangherong

2025-06-02 d0223045d2dd1cccc26c995c972e80e60bd19b26

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

@@ -1,51 +1,46 @@
<template>
    <div class="comparative_Bar" style="width: 100%;height: 900px;display: flex;flex-direction: column;overflow: scroll">
      <div id="compAnalBar1" style="flex: 1;"></div>
      <div id="compAnalBar2" style="flex: 1;"></div>
    </div>
  <div class="comparative_Bar" style="width: 100%;height: 900px;display: flex;flex-direction: column;overflow: scroll">
    <div id="compAnalBar1" style="flex: 1;"></div>
    <div id="compAnalBar2" style="flex: 1;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'comparativeAnalysisBar',
    props:{
      dataList:''

    },
    data(){
      return{
        OpenCloseList:[],
        openRate:[],
        utilizationRate:[],
        openLong:[],
        closeLong:[],
        equipmentList:[]
    props: {
      dataList: {
        type: Array
      }
    },
    created(){

    data() {
      return {
        compAnalBar1: null,
        compAnalBar2: null
      }
    },
    watch:{
      dataList(val){
        this.OpenCloseList = val
    watch: {
      dataList(val) {
        this.drawTu()
      },
      }
    },
    mounted() {
      this.drawTu()
      window.addEventListener('resize', this.handleWindowResize)
    },
    methods:{
      drawTu(){
       let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons');
       let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons');
       let compAnalBarOption1 = {
    methods: {
      drawTu() {
        this.compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons')
        this.compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons')
        let compAnalBarOption1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "shadow",
              type: 'shadow',
              textStyle: {
                color: "#fff"
                color: '#fff'
              }

            }
@@ -60,12 +55,12 @@
            data: ['开机率', '利用率']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true,name:'设备运行效率对比分析图'}
            show: true,
            feature: {
              mark: { show: true },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true, name: '设备运行效率对比分析图' }
            }
          },
          calculable: true,
@@ -74,34 +69,34 @@
            top: 110,
            bottom: 95,
            textStyle: {
              color: "#fff"
              color: '#fff'
            }
          },
          xAxis: [
            {
              type: 'category',
              splitLine: {
                "show": false
                'show': false
              },
              axisTick: {
                "show": false
                'show': false
              },
              splitArea: {
                show: false
              },
              boundaryGap : true,
              axisLabel : {
                interval : 0,
                rotate : 0,
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                rotate: 0,
                show: true,
                wigth:20,
                wigth: 20,
                splitNumber: 8,
                textStyle: {
                  fontFamily: "微软雅黑",
                  fontFamily: '微软雅黑',
                  fontSize: 12
                }
              },
              data : [0]
              data: [0]
            }
          ],
          yAxis: [
@@ -137,14 +132,14 @@
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: "#d3dee5"
              color: '#d3dee5'
            },
            textStyle: {
              color: "#fff"
              color: '#fff'
            },
            borderColor: "#90979c"
            borderColor: '#90979c'
          }, {
            type: "inside",
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
@@ -160,276 +155,80 @@
                normal: {
                  color: function(params) {
                    let colorList = [
                      ["#6496e9","#6bded3"],
                      // ["#849db8","#b4b8cc"],
                      // ["#4fe1c5","#4ecee1"],
                      // // ["#9978fa","#88a1fa"],
                      // ["#ffbb65","#fdc68b"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:'#6496e9'
                      ['#6496e9', '#6bded3']
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#6496e9'
                    },
                      {
                        offset:1,
                        color:"#6bded3"
                      }],false)
                        offset: 1,
                        color: '#6bded3'
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              data: [0],
              // barCategoryGap: '20%',
              // barGap : '-10%',
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
                  { type: 'min', name: '最小值', symbolSize: 70 }
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            },
            {
              name: '利用率',
              type: 'bar',
              //barWidth: 30,
              barWidth: 25,
              // barCategoryGap: '20%',
              // barGap : '-10%',
              itemStyle: {
                normal: {
                  color: function(params) {
                    let colorList = [
                      // ["#6496e9","#6bded3"],
                      // ["#849db8","#b4b8cc"],
                      ["#4fe1c5","#4ecee1"],
                      // ["#9978fa","#88a1fa"],
                      // ["#ffbb65","#fdc68b"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:"#4fe1c5"
                      ['#4fe1c5', '#4ecee1']
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#4fe1c5'
                    },
                      {
                        offset:1,
                        color:"#4ecee1"
                      }],false)
                        offset: 1,
                        color: '#4ecee1'
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              data: [0],
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
                  { type: 'min', name: '最小值', symbolSize: 70 }
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }
          ]
        };
       // let compAnalBarOption2 = {
       //    tooltip: {
       //      trigger: 'axis',
       //      axisPointer: {
       //        type: "shadow",
       //        textStyle: {
       //          color: "#fff"
       //        }
       //
       //      }
       //    },
       //    legend: {
       //      x: '4%',
       //      top: '11%',
       //      textStyle: {
       //        color: '#90979c'
       //      },
       //      data: ['开机时间', '关机时间'],
       //      color:['#6496e9','#b4b8cc']
       //    },
       //    toolbox: {
       //      show : true,
       //      feature : {
       //        mark : {show: true},
       //        magicType : {show: true, type: ['line', 'bar']},
       //        restore : {show: true},
       //        saveAsImage : {show: true,name:'设备运行时间对比分析图'}
       //      }
       //    },
       //    calculable: true,
       //    grid: {
       //      borderWidth: 0,
       //      top: 110,
       //      bottom: 95,
       //      textStyle: {
       //        color: "#fff"
       //      }
       //    },
       //    xAxis: [
       //      {
       //        type: 'category',
       //        splitLine: {
       //          "show": false
       //        },
       //        axisTick: {
       //          "show": false
       //        },
       //        splitArea: {
       //          show: false
       //        },
       //        boundaryGap : true,
       //        axisLabel : {
       //          interval : 0,
       //          rotate : 0,
       //          show: true,
       //          wigth:20,
       //          splitNumber: 8,
       //          textStyle: {
       //            fontFamily: "微软雅黑",
       //            fontSize: 12
       //          }
       //        },
       //        data : [0]
       //      }
       //    ],
       //    yAxis: [
       //      {
       //        type: 'value',
       //        splitLine: {
       //          show: false
       //        },
       //        axisLine: {
       //          lineStyle: {
       //            color: '#90979c'
       //          }
       //        },
       //        axisTick: {
       //          show: false
       //        },
       //        axisLabel: {
       //          interval: 0
       //
       //        },
       //        splitArea: {
       //          show: false
       //        }
       //      }
       //    ],
       //    dataZoom: [{
       //      show: true,
       //      height: 30,
       //      xAxisIndex: [0],
       //      bottom: 30,
       //      start: 0,
       //      end: 100,
       //      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
       //      handleSize: '110%',
       //      handleStyle: {
       //        color: "#d3dee5"
       //      },
       //      textStyle: {
       //        color: "#fff"
       //      },
       //      borderColor: "#90979c"
       //    }, {
       //      type: "inside",
       //      show: true,
       //      height: 15,
       //      start: 1,
       //      end: 35
       //    }],
       //    series: [
       //      {
       //        name: '开机时间',
       //        type: 'bar',
       //        //barWidth: 30,
       //        barWidth: 25,
       //        // stack: 'sum',
       //        // barCategoryGap: '20%',
       //        itemStyle: {
       //          normal: {
       //            color: function(params) {
       //              let colorList = [
       //                ["#6496e9","#6bded3"],
       //                // ["#849db8","#b4b8cc"],
       //                // ["#4fe1c5","#4ecee1"],
       //                // // ["#9978fa","#88a1fa"],
       //                // ["#ffbb65","#fdc68b"],
       //              ];
       //              // return colorList[params.dataIndex];
       //              let colorItem = colorList[params.dataIndex];
       //              return new echarts.graphic.LinearGradient(0,0,0,1,[{
       //                offset:0,
       //                color:'#6496e9'
       //              },
       //                {
       //                  offset:1,
       //                  color:"#6bded3"
       //                }],false)
       //            },
       //            barBorderRadius: [5, 5, 0, 0],
       //          }
       //        },
       //        data: [0]
       //      },
       //      {
       //        name: '关机时间',
       //        type: 'bar',
       //        //barWidth: 30,
       //        barWidth: 25,
       //        // stack: 'sum',
       //        // barCategoryGap: '20%',
       //        itemStyle: {
       //          normal: {
       //            color: function(params) {
       //              let colorList = [
       //                // ["#6496e9","#6bded3"],
       //                ["#849db8","#b4b8cc"],
       //                // ["#4fe1c5","#4ecee1"],
       //                // // ["#9978fa","#88a1fa"],
       //                // ["#ffbb65","#fdc68b"],
       //              ];
       //              // return colorList[params.dataIndex];
       //              let colorItem = colorList[params.dataIndex];
       //              return new echarts.graphic.LinearGradient(0,0,0,1,[{
       //                offset:0,
       //                color:'#849db8'
       //              },
       //                {
       //                  offset:1,
       //                  color:"#b4b8cc"
       //                }],false)
       //            },
       //            barBorderRadius: [5, 5, 0, 0],
       //          }
       //        },
       //        data: [0]
       //      }
       //    ]
       //  };
        }
        let compAnalBarOption2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "shadow",
              type: 'shadow',
              textStyle: {
                color: "#fff"
                color: '#fff'
              }

            }
          },
          legend: {
@@ -438,16 +237,16 @@
            textStyle: {
              color: '#90979c'
            },
            color:['#6496e9','#b4b8cc'],
            color: ['#6496e9', '#b4b8cc'],
            data: ['开机时间', '关机时间']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true,name:'设备运行效率对比分析图'}
            show: true,
            feature: {
              mark: { show: true },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true, name: '设备运行效率对比分析图' }
            }
          },
          calculable: true,
@@ -456,34 +255,34 @@
            top: 110,
            bottom: 95,
            textStyle: {
              color: "#fff"
              color: '#fff'
            }
          },
          xAxis: [
            {
              type: 'category',
              splitLine: {
                "show": false
                'show': false
              },
              axisTick: {
                "show": false
                'show': false
              },
              splitArea: {
                show: false
              },
              boundaryGap : true,
              axisLabel : {
                interval : 0,
                rotate : 0,
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                rotate: 0,
                show: true,
                wigth:20,
                wigth: 20,
                splitNumber: 8,
                textStyle: {
                  fontFamily: "微软雅黑",
                  fontFamily: '微软雅黑',
                  fontSize: 12
                }
              },
              data : [0]
              data: [0]
            }
          ],
          yAxis: [
@@ -519,14 +318,14 @@
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: "#d3dee5"
              color: '#d3dee5'
            },
            textStyle: {
              color: "#fff"
              color: '#fff'
            },
            borderColor: "#90979c"
            borderColor: '#90979c'
          }, {
            type: "inside",
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
@@ -542,117 +341,95 @@
                normal: {
                  color: function(params) {
                    let colorList = [
                      ["#6496e9","#6bded3"],
                      // ["#849db8","#b4b8cc"],
                      // ["#4fe1c5","#4ecee1"],
                      // // ["#9978fa","#88a1fa"],
                      // ["#ffbb65","#fdc68b"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:'#6496e9'
                      ['#6496e9', '#6bded3']
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#6496e9'
                    },
                      {
                        offset:1,
                        color:"#6bded3"
                      }],false)
                        offset: 1,
                        color: '#6bded3'
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              data: [0],
              // barCategoryGap: '20%',
              // barGap : '-10%',
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
                  { type: 'min', name: '最小值', symbolSize: 70 }
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            },
            {
              name: '关机时间',
              type: 'bar',
              //barWidth: 30,
              barWidth: 25,
              // barCategoryGap: '20%',
              // barGap : '-10%',
              itemStyle: {
                normal: {
                  color: function(params) {
                    let colorList = [
                      // ["#6496e9","#6bded3"],
                      ["#849db8","#b4b8cc"],
                      // ["#4fe1c5","#4ecee1"],
                      // ["#9978fa","#88a1fa"],
                      // ["#ffbb65","#fdc68b"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:"#849db8"
                      ['#849db8', '#b4b8cc']
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#849db8'
                    },
                      {
                        offset:1,
                        color:"#b4b8cc"
                      }],false)
                        offset: 1,
                        color: '#b4b8cc'
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              data: [0],
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
              markPoint: {
                data: [
                  { type: 'max', name: '最大值', symbolSize: 70 },
                  { type: 'min', name: '最小值', symbolSize: 70 }
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }
          ]
        };
        if(this.OpenCloseList != null){
          this.equipmentList = []
          this.openRate =[]
          this.utilizationRate =[]
          this.openLong = []
          this.closeLong = []
          for(var i = 0;i<this.OpenCloseList.length;i++){
              this.equipmentList.push(this.OpenCloseList[i].equipmentId)
              this.openRate.push((this.OpenCloseList[i].openRate*100).toFixed(2))
              // (this.openRate * 100).toFixed(2)
              this.utilizationRate.push((this.OpenCloseList[i].utilizationRate*100).toFixed(2))
              this.openLong.push(this.OpenCloseList[i].openLong)
              this.closeLong.push(this.OpenCloseList[i].closeLong)
          }
          compAnalBarOption1.xAxis[0].data = this.equipmentList
          compAnalBarOption1.series[0].data = this.openRate
          compAnalBarOption1.series[1].data = this.utilizationRate
          compAnalBarOption2.xAxis[0].data = this.equipmentList
          compAnalBarOption2.series[0].data = this.openLong
          compAnalBarOption2.series[1].data = this.closeLong
          compAnalBar1.setOption(compAnalBarOption1);
          compAnalBar2.setOption(compAnalBarOption2);
        }else{
          compAnalBar1.setOption(compAnalBarOption1);
          compAnalBar2.setOption(compAnalBarOption2);
        }
        window.addEventListener('resize', function() {
          compAnalBar1.resize()
          compAnalBar2.resize()
        })
        console.log('dataList', this.dataList)
        if (this.dataList != null) {
          const equipmentList = this.dataList.map(item => item.equipmentId)
          const openRate = this.dataList.map(item => (item.openRate * 100).toFixed(2))
          const utilizationRate = this.dataList.map(item => (item.utilizationRate * 100).toFixed(2))
          const openLong = this.dataList.map(item => item.openLong)
          const closeLong = this.dataList.map(item => item.closeLong)

          compAnalBarOption1.xAxis[0].data = equipmentList
          compAnalBarOption1.series[0].data = openRate
          compAnalBarOption1.series[1].data = utilizationRate

          compAnalBarOption2.xAxis[0].data = equipmentList
          compAnalBarOption2.series[0].data = openLong
          compAnalBarOption2.series[1].data = closeLong
        }
        this.compAnalBar1.setOption(compAnalBarOption1,true)
        this.compAnalBar2.setOption(compAnalBarOption2,true)
      },

      handleWindowResize() {
        this.compAnalBar1.resize()
        this.compAnalBar2.resize()
      }
    }
  }