1、报警分析页面饼图种类过多时饼图颜色出现白色与背景色一致导致无法区分 2、综合效率分析页面计算OEE功能新增loading提示 3、统计分析和统计图...

zhaowei

2025-06-25 9733e3b67cd1abe6e7ce298cc048fabd86c0f24e

 src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue

@@ -1,13 +1,13 @@
<template>
  <div id="StatisticsLegend"
       style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
       style="overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
    <!-- 查询区域 -->
    <div style="width: 100%; height: 44px; background-color: #fff" class="table-page-search-wrapper">
    <div style=" background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5" :xs="5">
            <a-form-item label="名称">
              <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParam.tierName"></a-input>
              <a-input placeholder="输入设备名称查询" readOnly v-model="queryParam.tierName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4" :xs="4">
@@ -25,6 +25,8 @@
        </a-row>
      </a-form>
    </div>

    <a-spin :spinning="spinning">
    <!--开机率-->
    <div class="PowerOnRate  Line-box">
      <div class="title">
@@ -73,7 +75,7 @@
                <div class="Rate-box-kong" :style="{height:100-StartupHeight+'%'}"></div>
                <div class="Rate-box" :style="{height:StartupHeight+'%'}">
                  <p class="Rate-box-text">
                    <span>{{StatCharUsedopeningRate}}%</span>
                      <span>{{StatCharUsedOpeningRate}}%</span>
                    <br>
                    开动率
                  </p>
@@ -86,25 +88,23 @@
        </div>
      </div>
    </div>
    </a-spin>
  </div>
</template>

<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import $ from 'jquery'
  import * as echarts from 'echarts'
  import { getAction } from '@/api/manage'
  import * as eCharts from 'echarts'

  export default {
    name: 'StatisticsLegend',
    props: { equip: {} },
    data() {
      return {
        readOnly: true,
        showday: true,
        StatCharOpeningRate: 0,
        StatCharUsedRate: 0,
        StatCharUsedopeningRate: 0,
        StatCharUsedOpeningRate: 0,
        openingLong: 0,
        waitingLong: 0,
        processLong: 0,
@@ -112,16 +112,17 @@
        totalLong: 0,
        UtilizationHeight: 0,
        StartupHeight: 0,
        quip: {},
        dates: [],
        queryParam: {},
        queryParams: {
          collectTime: undefined
        },
        shiftSubList: [],
        shiftList: [],
        PowerOnRatePie: null,
        PowerOnRateLine: null,
        UtilizationLine: null,
        StartupLine: null,
        spinning: false,
        url: {
          getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
          dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
        }
@@ -133,7 +134,12 @@
      this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
      this.initEquipmentNode()
    },

    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
    },
    beforeDestroy() {
      window.addEventListener('resize', this.handleWindowResize)
    },
    methods: {
      disabledDate(current) {
        //Can not slect days before today and today
@@ -148,11 +154,10 @@
        // console.log(h);
        return h
      },
      moment,
      draw() {
        //利用率
        //饼图
        let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
        this.PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
        let PowerOnRatePie_option = {
          // color: ["#3859fa", '#ccc'],
          title: {
@@ -187,7 +192,7 @@
            data: [{
              value: 100,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                color: new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#88a8fd'
                },
@@ -207,8 +212,8 @@
          }
          ]
        }
        PowerOnRatePie.setOption(PowerOnRatePie_option)
        let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
        this.PowerOnRatePie.setOption(PowerOnRatePie_option)
        this.PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
        let PowerOnRateLine_option = {
          tooltip: {
            trigger: 'axis'
@@ -219,38 +224,6 @@
            bottom: '3%',
            top: 60,
            containLabel: true
          },
          legend: {
            // selected:{
            //     "曲线":false,
            // },
            top: '0',
            right: '10',
            //设置单选多选模式
            // selectedMode:'single',
            icon: 'pin',
            data: [
              // {
              //   name:'曲线',
              //   textStyle:{
              //     padding:4,
              //     color:'#e957ff',
              //     // borderWidth:1,
              //     fontSize:16,
              //     // borderColor:'#50E6D7'
              //   }
              // },
              {
                name: '柱状图',
                textStyle: {
                  padding: 4,
                  fontSize: 16,
                  color: '#9996f8'
                  // borderWidth:1,
                  // borderColor:'#50E6D7'
                }
              }
            ]
          },
          xAxis: {
            type: 'category',
@@ -296,53 +269,10 @@
            }
          },
          series: [
            //   {
            //   name:'曲线',
            //   type: 'line',
            //   smooth:true,
            //   symbol: 'circle',
            //   symbolSize: 8,
            //   label:{
            //     show:true,
            //     position:"top",
            //     textStyle:{
            //       color:'#000',
            //     },
            //     formatter:"时长：{c}H"
            //   },
            //   itemStyle: {
            //     color: "rgb(87, 120, 225)",
            //     borderColor: "#fff",
            //     borderWidth: 2,
            //     shadowColor: 'rgba(0, 0, 0, .3)',
            //   },
            //   lineStyle: {
            //     normal: {
            //       color:"rgb(87, 120, 225)",
            //       shadowColor: 'rgba(87, 120, 225, .4)',
            //       shadowBlur: 8,
            //       shadowOffsetY: 10,
            //       shadowOffsetX: 0,
            //     },
            //   },
            //   areaStyle: {
            //     normal: {
            //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //         offset: 0,
            //         color: 'rgba(87, 120, 225, .6)'
            //       }, {
            //         offset: 1,
            //         color: 'rgba(87, 120, 225, .3)'
            //       }]),
            //     }
            //   },
            //   data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
            // },
            {
              name: '柱状图',
              name: '',
              type: 'bar',
              data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
              // data:[22,3,5,6],
              barWidth: 25,
              label: {
                show: true,
@@ -350,7 +280,6 @@
                textStyle: {
                  color: '#000'
                },
                // formatter:"时长：{c}H",
                formatter: params => {
                  const value = String(params.value)
                  return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
@@ -363,12 +292,10 @@
                      ['#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, [{
                    return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: colorItem[0]
                    },
@@ -382,9 +309,9 @@
              }
            }]
        }
        PowerOnRateLine.setOption(PowerOnRateLine_option)
        this.PowerOnRateLine.setOption(PowerOnRateLine_option)
        //开机率
        let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
        this.UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
        let UtilizationLine_option = {
          tooltip: {
            trigger: 'axis',
@@ -402,15 +329,12 @@
            type: 'category',
            data: ['开机时长', '总时长'],
            axisLine: {
              lineStyle: {
                // color: 'rgba(70, 196, 255, .8)'
              }
              lineStyle: {}
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // color: 'rgba(111, 132, 189, 1)',
              textStyle: {
                fontSize: 14
              }
@@ -419,12 +343,9 @@
          yAxis: [{
            type: 'value',
            name: '时间/小时',
            nameTextStyle: {
              // color: 'rgba(111, 132, 189, 1)'
            },
            nameTextStyle: {},
            axisLabel: {
              formatter: '{value}'
              // color: 'rgba(111, 132, 189, 1)',
            },
            axisTick: {
              show: false
@@ -434,16 +355,13 @@
              show: false
            },
            splitLine: {
              lineStyle: {
                // color: 'rgba(70, 196, 255, .3)'
              }
              lineStyle: {}
            }
          }],
          series: [
            {
              type: 'bar',
              data: [this.openingLong, this.totalLong],
              // data:[22,22],
              barWidth: 25,
              label: {
                show: true,
@@ -451,7 +369,6 @@
                textStyle: {
                  color: '#000'
                },
                // formatter:"时长：{c}H",
                formatter: params => {
                  const value = String(params.value)
                  return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
@@ -464,9 +381,8 @@
                      ['#6496e9', '#6bded3'],
                      ['#9978fa', '#88a1fa']
                    ]
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: colorItem[0]
                    },
@@ -480,9 +396,9 @@
              }
            }]
        }
        UtilizationLine.setOption(UtilizationLine_option)
        this.UtilizationLine.setOption(UtilizationLine_option)
        //开动率
        let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
        this.StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
        let StartupLine_option = {
          tooltip: {
            trigger: 'axis',
@@ -500,15 +416,12 @@
            type: 'category',
            data: ['运行时长', '开机时长'],
            axisLine: {
              lineStyle: {
                // color: 'rgba(70, 196, 255, .8)'
              }
              lineStyle: {}
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // color: 'rgba(111, 132, 189, 1)',
              textStyle: {
                fontSize: 14
              }
@@ -517,12 +430,9 @@
          yAxis: [{
            type: 'value',
            name: '时间/小时',
            nameTextStyle: {
              // color: 'rgba(111, 132, 189, 1)'
            },
            nameTextStyle: {},
            axisLabel: {
              formatter: '{value}'
              // color: 'rgba(111, 132, 189, 1)',
            },
            axisTick: {
              show: false
@@ -532,15 +442,12 @@
              show: false
            },
            splitLine: {
              lineStyle: {
                // color: 'rgba(70, 196, 255, .3)'
              }
              lineStyle: {}
            }
          }],
          series: [{
            type: 'bar',
            data: [this.processLong, this.openingLong],
            // data:[22,22],
            barWidth: 25,
            label: {
              show: true,
@@ -548,7 +455,6 @@
              textStyle: {
                color: '#000'
              },
              // formatter:"时长：{c}H",
              formatter: params => {
                const value = String(params.value)
                return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
@@ -561,9 +467,8 @@
                    ['#4fe1c5', '#4ecee1'],
                    ['#6496e9', '#6bded3']
                  ]
                  // return colorList[params.dataIndex];
                  let colorItem = colorList[params.dataIndex]
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: colorItem[0]
                  },
@@ -577,15 +482,17 @@
            }
          }]
        }
        StartupLine.setOption(StartupLine_option)
        this.StartupLine.setOption(StartupLine_option)
      },
      queryStatistical() {
        getAction(this.url.dayStatisticalRate, this.queryParams).then(res => {
        this.spinning = true
        getAction(this.url.dayStatisticalRate, this.queryParams)
          .then(res => {
          if (res.success) {
            this.StatCharOpeningRate = res.result.openRate
            this.StatCharUsedRate = res.result.utilizationRate
            this.UtilizationHeight = res.result.openRate
            this.StatCharUsedopeningRate = res.result.usedOpenRate
              this.StatCharUsedOpeningRate = res.result.usedOpenRate
            this.StartupHeight = res.result.usedOpenRate
            this.openingLong = this.getTime(res.result.openLong)
            this.waitingLong = this.getTime(res.result.waitLong)
@@ -594,6 +501,9 @@
            this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
            this.draw()
          }
          })
          .finally(() => {
            this.spinning = false
        })
      },
      dataChange(val) {
@@ -604,6 +514,7 @@
      },
      initEquipmentNode() {
        let _this = this
        this.spinning = true
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            const { isEquipment, productionId, tierName } = this.$route.params
@@ -630,9 +541,6 @@
              description: res.message
            })
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },
      searchReset() {
@@ -645,11 +553,17 @@
      },
      searchQuery() {
        this.queryStatistical()
      },

      handleWindowResize() {
        if (this.PowerOnRatePie) this.PowerOnRatePie.resize()
        if (this.PowerOnRateLine) this.PowerOnRateLine.resize()
        if (this.UtilizationLine) this.UtilizationLine.resize()
        if (this.StartupLine) this.StartupLine.resize()
      }
    },
    watch: {
      equip(val) {
        // console.log(val);
        if (val && val.equipmentId) {
          this.$set(this.queryParam, 'tierName', val.title)
          this.$set(this.queryParam, 'equipmentId', val.equipmentId)
@@ -662,17 +576,12 @@
        }
        this.searchQuery()
      }
      // this.searchQuery();
    }

  }
</script>

<style scoped>
  .charContent {
    display: flex;
  }

<style scoped lang="less">
  @media screen and (min-width: 1920px) {
    #StatisticsLegend {
      height: 748px !important;
@@ -705,6 +614,22 @@
    #StatisticsLegend {
      height: 501px !important;
      overflow: scroll;
    }
  }

  /deep/ .ant-spin-nested-loading {
    flex: 1;
    display: flex;
    flex-direction: column;

    .ant-spin-container {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .ant-spin-blur {
      opacity: 1;
    }
  }

@@ -803,10 +728,6 @@
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;

    /*border: 6px solid red;*/
    /*!*background-color: yellow;*!*/
    /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
  }

  .left-box-con {
@@ -815,7 +736,6 @@
    position: relative;
    text-align: center;
    border: 6px solid red;
    /*background-color: yellow;*/
    border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
  }

@@ -835,7 +755,6 @@
    bottom: 0;
    width: 100%;
    height: 89%;
    /*background-color: green;*/
    background: -moz-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
    background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%, #06a8f8), color-stop(100%, #2bf3c7));
    background: -webkit-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
@@ -850,17 +769,5 @@
    color: #fff;
    width: 100%;
    text-align: center;
  }

  .con-left {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }

  .con-left > span {
    flex: 1;
  }
</style>