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

zhaowei

2025-06-25 9733e3b67cd1abe6e7ce298cc048fabd86c0f24e

1、报警分析页面饼图种类过多时饼图颜色出现白色与背景色一致导致无法区分
2、综合效率分析页面计算OEE功能新增loading提示
3、统计分析和统计图表页面新增图表数据加载提示以及优化图表展示增加分辨率适应及代码

 src/views/mdc/base/StatisticalAnalysis.vue

@@ -1,45 +1,35 @@
<template>
  <a-card :bordered="false">
    <div style="width: 100%; height: 100%;overflow: hidden">
      <a-row type="flex" :gutter="16">
        <a-col :md="5" :sm="24">
          <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
        </a-col>
        <a-col :md="24-5" :sm="24">
          <statistical-analysis-main :equip="selectEquementnode"></statistical-analysis-main>
        </a-col>
      </a-row>
    </div>
    <a-row type="flex" :gutter="16">
      <a-col :md="5" :sm="24">
        <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
      </a-col>
      <a-col :md="24-5" :sm="24">
        <statistical-analysis-main :equip="selectEquipmentNode"></statistical-analysis-main>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
  import BaseTree from '../common/BaseTree'
  import StatisticalAnalysisMain from './modules/StatisticalAnalysis/StatisticalAnalysisMain'

  export default {
    name: 'StatisticalAnalysis',
    components:{
    components: {
      BaseTree,
      StatisticalAnalysisMain
    },
    data() {
      return {
        description: '设备信息',
        selectEquementnode:{},
        equipmentStatisticsInfo:{},
        url:{
          equipmentStatistics:"/mdc/equipment/equipmentStatistics"
        }
        selectEquipmentNode: {}
      }
    },
    methods: {
      changeSelectionNode(val){
        this.selectEquementnode = val
      changeSelectionNode(val) {
        this.selectEquipmentNode = val
      }
    }
  }
</script>

<style scoped>

</style>
</script>

 src/views/mdc/base/StatisticsChart.vue

@@ -1,45 +1,35 @@
<template>
  <a-card :bordered="false">
      <div style="width: 100%; height: 100%;overflow: hidden">
        <a-row type="flex" :gutter="16">
          <a-col :md="5" :sm="24">
            <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
          </a-col>
          <a-col :md="24-5" :sm="24">
              <statistics-legend  :equip="selectEquementnode"></statistics-legend>
          </a-col>
        </a-row>
      </div>
    <a-row type="flex" :gutter="16">
      <a-col :md="5" :sm="24">
        <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
      </a-col>
      <a-col :md="24-5" :sm="24">
        <statistics-legend :equip="selectEquipmentNode"></statistics-legend>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
  import BaseTree from '../common/BaseTree'
  import StatisticsLegend from './modules/StatisticsChart/StatisticsLegend'

  export default {
    name: 'StatisticsChart',
    components:{
    components: {
      BaseTree,
      StatisticsLegend
    },
    data() {
      return {
        description: '设备信息',
        selectEquementnode:{},
        equipmentStatisticsInfo:{},
        url:{
          equipmentStatistics:"/mdc/equipment/equipmentStatistics"
        }
        selectEquipmentNode: {}
      }
    },
    methods: {
      changeSelectionNode(val){
        this.selectEquementnode = val
      changeSelectionNode(val) {
        this.selectEquipmentNode = val
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue

@@ -1,17 +1,17 @@
<template>
  <a-modal title="计算OEE" :visible="visible" :width="550" @cancel="handleModalClose" @ok="handleComputeOee"
           :maskClosable="false">
  <j-modal title="计算OEE" :visible="visible" :width="550" @cancel="handleModalClose" @ok="handleComputeOee"
           :maskClosable="false" :confirmLoading="confirmLoading">
    <a-form-model :model="model" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="日期">
            <a-range-picker v-model="dates" style="width: 100%" value-format="YYYY-MM-DD"
                            @change="dateParamChange"></a-range-picker>
                            @change="dateParamChange" :allow-clear="false"/>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
  </j-modal>
</template>

<script>
@@ -25,6 +25,7 @@
        visible: false,
        model: {},
        dates: [],
        confirmLoading: false,
        labelColLong: {
          xs: { span: 24 },
          sm: { span: 3 }
@@ -37,7 +38,6 @@
    },
    methods: {
      handleComputeOee() {
        console.log('model', this.model)
        if (this.dates.length === 0) {
          this.$notification.warning({
            message: '消息',
@@ -45,27 +45,25 @@
          })
          return
        }

        this.confirmLoading = true
        const that = this
        mdcApi.computeOeeApi(this.model)
          .then(res => {
            if (res.success) {
              this.$notification.success({
              that.$notification.success({
                message: '消息',
                description: res.message
              })
              this.visible = false
              that.handleModalClose()
            } else {
              this.$notification.error({
              that.$notification.error({
                message: '消息',
                description: '计算失败'
              })
            }
          })
          .catch(err => {
            this.$notification.error({
              message: '消息',
              description: '计算失败'
            })
          .finally(() => {
            that.confirmLoading = false
          })
      },


 src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue

@@ -1,17 +1,19 @@
<template>
  <div id="StatisticsLegend" style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
  <div id="StatisticsLegend"
       style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
    <!-- 查询区域 -->
    <div style="width: 100%; height: 44px; 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">
            <a-form-item label="日期">
              <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange" :allowClear="false"/>
              <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD'
                             @change="dateChange" :allowClear="false"/>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="2" :xs="2">
@@ -23,134 +25,135 @@
        </a-row>
      </a-form>
    </div>
    <!--开机率-->
    <div class="PowerOnRate  Line-box">
      <!--<div class="title">-->
        <!--<div class="circle"></div>-->
        <!--<div class="text">利用率</div>-->
      <!--</div>-->
      <div class="PowerOnRate-box box-bottom">
        <!--<div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>-->
        <div class="PowerOnRate_text" style="width: 8%;">
          <p>开机率</p>
          <p>{{UtilizationHeight}}%</p>
          <p>利用率</p>
          <p>{{StatCharUsedRate}}%</p>
        </div>
        <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
        <div  class="PowerOnRate_text" style="width: 8%">
          <table width="85px;" align="center">
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #6496e9;position: static;"/></td>
              <td align="left">开机</td>
            </tr>
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/></td>
              <td align="left">关机</td>
            </tr>
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #4ecee1"/></td>
              <td align="left">运行</td>
            </tr>
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #FCCE10"/></td>
              <td align="left">待机</td>
            </tr>
          </table>

    <a-spin :spinning="spinning">
      <!--开机率-->
      <div class="PowerOnRate  Line-box">
        <div class="PowerOnRate-box box-bottom">
          <div class="PowerOnRate_text" style="width: 8%;">
            <p>开机率</p>
            <p>{{UtilizationHeight}}%</p>
            <p>利用率</p>
            <p>{{StatCharUsedRate}}%</p>
          </div>
          <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
          <div class="PowerOnRate_text" style="width: 8%">
            <table width="85px;" align="center">
              <tr>
                <td align="right">
                  <div style="width: 15px;height: 15px;background-color: #6496e9;position: static;"/>
                </td>
                <td align="left">开机</td>
              </tr>
              <tr>
                <td align="right">
                  <div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/>
                </td>
                <td align="left">关机</td>
              </tr>
              <tr>
                <td align="right">
                  <div style="width: 15px;height: 15px;background-color: #4ecee1"/>
                </td>
                <td align="left">运行</td>
              </tr>
              <tr>
                <td align="right">
                  <div style="width: 15px;height: 15px;background-color: #FCCE10"/>
                </td>
                <td align="left">待机</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--利用率和开动率-->
    <div class="UtilizationStartup">
      <div class="Utilization Line-box">
        <div class="title">
          <!--<div class="circle"></div>-->
          <!--<div class="text"></div>-->
      <!--利用率和开动率-->
      <div class="UtilizationStartup">
        <div class="Utilization Line-box">
          <div class="title">
          </div>
          <div class="Utilization-box box-bottom">
            <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
          </div>
        </div>
        <div class="Utilization-box box-bottom">
          <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
        <div class="Startup Line-box">
          <div class="title">
          </div>
          <div class="Startup-box box-bottom">
            <div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
          </div>
        </div>
      </div>
      <div class="Startup Line-box">
        <div class="title">
          <!--<div class="circle"></div>-->
          <!--<div class="text"></div>-->
        </div>
        <div class="Startup-box box-bottom">
          <div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
        </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 * as eCharts from 'echarts'

  export default {
    name: 'StatisticalAnalysisMain',
    props: { equip: {} },
    data(){
      return{
        readOnly:true,
        showday:true,
        StatCharOpeningRate:0,
        StatCharUsedRate:0,
        StatCharUsedopeningRate:0,
        openingLong:0,
        waitingLong:0,
        processLong:0,
        closedLong:0,
        totalLong:0,
        UtilizationHeight:0,
        StartupHeight:0,
        quip:{},
    data() {
      return {
        StatCharOpeningRate: 0,
        StatCharUsedRate: 0,
        StatCharUsedOpeningRate: 0,
        openingLong: 0,
        waitingLong: 0,
        processLong: 0,
        closedLong: 0,
        totalLong: 0,
        UtilizationHeight: 0,
        StartupHeight: 0,
        PowerOnRateLine: null,
        UtilizationLine: null,
        StartupLine: null,
        dates: [],
        queryParam: {},
        queryParams:{
          collectTime:null,
        queryParams: {
          collectTime: null
        },
        shiftSubList: [],
        shiftList: [],
        spinning: false,
        url: {
          getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
          dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate',
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
        },
          dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
        }
      }
    },
    created(){
      // let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
      this.queryParams.collectTime = moment().add(-1,'d').format('YYYY-MM-DD')
      this.queryParams.dateTime = moment().add(-1,'d').format('YYYYMMDD')
    created() {
      this.queryParams.collectTime = moment().add(-1, 'd').format('YYYY-MM-DD')
      this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
      this.initEquipmentNode()
      // this.queryStatistical();
      // this.getTime(37800);
    },

    methods:{
      disabledDate(current){
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 1);
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
    },
    beforeDestroy() {
      window.addEventListener('resize', this.handleWindowResize)
    },
    methods: {
      disabledDate(current) {
        //Can not select days before today and today
        return current && current > moment().subtract('days', 1)
      },
      //把秒计算成对应的时分秒的函数
      getTime(time){
      getTime(time) {
        //转换为时分秒
        let h = Math.round(time / 60 / 60)
        h = h <10 ? '0' + h : h
        h = h < 10 ? '0' + h : h
        //作为返回值返回
        // console.log(h);
        return h;
        return h
      },
      moment,
      draw(){
      draw() {
        //开始时间\关机时间\运行时间\待机时间
        let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons');
        this.PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
        let PowerOnRateLine_option = {
          tooltip:{
            trigger: 'axis',
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
@@ -159,162 +162,100 @@
            top: 60,
            containLabel: true
          },
          // toolbox: {
          //   show : true,
          //   padding: 15,
          //   feature : {
          //     saveAsImage : {show: true,title:'保存图片',name :'设备效率统计报表'}
          //   }
          // },
          xAxis :{
            type : 'category',
            data:['开机时长','关机时长','运行时长','待机时长'],
            axisLabel:{          //坐标轴字体颜色
              textStyle:{
          xAxis: {
            type: 'category',
            data: ['开机时长', '关机时长', '运行时长', '待机时长'],
            axisLabel: {          //坐标轴字体颜色
              textStyle: {
                color: '#000'
              }
            },
            axisLine:{
              lineStyle:{
                color:"#e5e5e5"
            axisLine: {
              lineStyle: {
                color: '#e5e5e5'
              }
            },
            axisTick:{       //y轴刻度线
              show:false
            axisTick: {       //y轴刻度线
              show: false
            },
            splitLine:{    //网格
              show: false,
            splitLine: {    //网格
              show: false
            },
            boundaryGap: true,
            boundaryGap: true
          },
          yAxis :{
          yAxis: {
            name: '时间/小时',
            type : 'value',
            axisLabel:{        //坐标轴字体颜色
              textStyle:{
            type: 'value',
            axisLabel: {        //坐标轴字体颜色
              textStyle: {
                color: '#000'
              }
            },
            axisLine:{
              show:false,
            axisLine: {
              show: false
            },
            axisTick:{       //y轴刻度线
              show:false
            axisTick: {       //y轴刻度线
              show: false
            },
            splitLine:{    //网格
            splitLine: {    //网格
              show: true,
              color:'#dadde4',
              lineStyle:{
                type:"dashed"
              color: '#dadde4',
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          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],
            // },
          series: [
            {
              name:'柱状图',
              name: '',
              type: 'bar',
              data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
              // data:[22,3,4,5],
              data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
              barWidth: 25,
              label:{
                show:true,
                position:"top",
                textStyle:{
                  color:'#000',
              label: {
                show: true,
                position: 'top',
                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`
                formatter: params => {
                  const value = String(params.value)
                  return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
                }
              },
              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:colorItem[0]
                      ['#6496e9', '#6bded3'],
                      ['#849db8', '#b4b8cc'],
                      ['#4fe1c5', '#4ecee1'],
                      ['#ffbb65', '#fdc68b']
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: colorItem[0]
                    },
                      {
                        offset:1,
                        color:colorItem[1]
                      }],false)
                        offset: 1,
                        color: colorItem[1]
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                }
              },
              }
            }]
        }
        PowerOnRateLine.setOption(PowerOnRateLine_option);
        this.PowerOnRateLine.setOption(PowerOnRateLine_option)

        //开机时间\关机时间
        let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons');
        let  statChartPieOption1 = {
          // title: {
          //   x: 'left',
          //   subtext: '开机效率',
          //   textStyle: {
          //     color: '#268e80',
          //     fontSize: 20,
          //
          //   },
          // },
        this.UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
        let statChartPieOption1 = {
          tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c} ({d}%)"，
            formatter:params=>{
              const value=String(params.value)
              return value.length==2&&value[0]==='0'?`${params.seriesName}<br/>${params.name}：${value.slice(1)}H（${params.percent}%）`:`${params.seriesName}<br/>${params.name}：${value}H（${params.percent}%）`
            formatter: params => {
              const value = String(params.value)
              return value.length == 2 && value[0] === '0' ? `${params.seriesName}<br/>${params.name}：${value.slice(1)}H（${params.percent}%）` : `${params.seriesName}<br/>${params.name}：${value}H（${params.percent}%）`
            }
          },
          legend: {
@@ -328,44 +269,36 @@
            name: '开机效率',
            type: 'pie',
            radius: '70%',
            /*center: ['55%', '55%'],*/
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = [ '#6496e9','#849db8'];
                color: function(params) {
                  let colorList = ['#6496e9', '#849db8']
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,
                  position: 'top',
                  // formatter: '{b}\n{c}',
                  // formatter:params=>String(params.value).length==2?params.name+String(params.value).slice(1):params.name+String(params.value)
                  formatter:params=>{
                    const value=String(params.value)
                    return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H'
                  formatter: params => {
                    const value = String(params.value)
                    return value.length == 2 && value[0] === '0' ? params.name + ' ' + value.slice(1) + 'H' : params.name + ' ' + value + 'H'
                  }
                }
              }
            },
            data: [{value: this.openingLong, name: '开机时间'},
              {value: this.closedLong, name: '关机时间'}]
            data: [{ value: this.openingLong, name: '开机时间' },
              { value: this.closedLong, name: '关机时间' }]
          }]
        };
        UtilizationLine.setOption(statChartPieOption1);
        }
        this.UtilizationLine.setOption(statChartPieOption1)

        //运行时间\待机时间
        let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
        this.StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
        let statChartPieOption2 = {
          // title: {
          //   x: 'left',
          //   subtext: '运行效率'
          // },
          tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c} ({d}%)",
            formatter:params=>{
              const value=String(params.value)
              return value.length==2&&value[0]==='0'?`${params.seriesName}<br/>${params.name}：${value.slice(1)}H（${params.percent}%）`:`${params.seriesName}<br/>${params.name}：${value}H（${params.percent}%）`
            formatter: params => {
              const value = String(params.value)
              return value.length == 2 && value[0] === '0' ? `${params.seriesName}<br/>${params.name}：${value.slice(1)}H（${params.percent}%）` : `${params.seriesName}<br/>${params.name}：${value}H（${params.percent}%）`
            }
          },
          legend: {
@@ -381,101 +314,91 @@
            radius: '70%',
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#4ecee1', '#FCCE10'];
                color: function(params) {
                  var colorList = ['#4ecee1', '#FCCE10']
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,
                  position: 'top',
                  // formatter: '{b}\n{c}',
                  formatter:params=>{
                    const value=String(params.value)
                    return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H'
                  formatter: params => {
                    const value = String(params.value)
                    return value.length == 2 && value[0] === '0' ? params.name + ' ' + value.slice(1) + 'H' : params.name + ' ' + value + 'H'
                  }
                }
              }
            },
            data: [{value: this.processLong, name: '运行时间'},
              {value: this.waitingLong, name: '待机时间'}]
            data: [{ value: this.processLong, name: '运行时间' },
              { value: this.waitingLong, name: '待机时间' }]
          }]
        };
        StartupLine.setOption(statChartPieOption2);
        }
        this.StartupLine.setOption(statChartPieOption2)
      },
      queryStatistical(){
        getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{
          if(res.success) {
            // console.log(res);
            this.StatCharOpeningRate = res.result.openRate;
            //利用率
            this.StatCharUsedRate = res.result.utilizationRate;
            //开机率
            this.UtilizationHeight = res.result.openRate;
            this.StatCharUsedopeningRate = res.result.StartupHeight;
            this.StartupHeight = res.result.StartupHeight;
            this.openingLong = this.getTime(res.result.openLong)
            this.waitingLong = this.getTime(res.result.waitLong);
            this.processLong = this.getTime(res.result.processLong);
            this.closedLong = this.getTime(res.result.closeLong);
            this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong);
            this.draw();
          }
        })
      queryStatistical() {
        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.StartupHeight
              this.StartupHeight = res.result.StartupHeight
              this.openingLong = this.getTime(res.result.openLong)
              this.waitingLong = this.getTime(res.result.waitLong)
              this.processLong = this.getTime(res.result.processLong)
              this.closedLong = this.getTime(res.result.closeLong)
              this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
              this.draw()
            }
          })
          .finally(() => {
            this.spinning = false
          })
      },
      dataChange(val) {
        this.queryParam.collectTime1 = "";
        if(val){
      dateChange(val) {
        this.queryParam.collectTime1 = ''
        if (val) {
          this.queryParams.dateTime = val.format('YYYYMMDD')
          this.queryParams.collectTime = val.format('YYYY-MM-DD');
          this.queryParams.collectTime = val.format('YYYY-MM-DD')
        }
      },
      initEquipmentNode() {
        this.spinning = true
        let _this = this
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            if(res.result[0]){
            if (res.result[0]) {
              _this.$set(this.queryParam, 'tierName', res.result[0].title)
              _this.$set(this.queryParams, 'parentId', res.result[0].key)
            }
            // console.log(res.result[0].entity.tierName)
            _this.queryStatistical()
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
              message: '消息',
              description: res.message
            })
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
        // getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
        //   if (res.success) {
        //     if (res.result) {
        //       _this.$set(this.queryParam, 'tierName', res.result.tierName)
        //       _this.$set(this.queryParam, 'equipmentId', res.result.equipmentId)
        //       // _this.quip = res.result
        //       _this.searchQuery()
        //     } else {
        //       _this.$message.warning('请配置设备！')
        //     }
        //   }
        // })
      },
      searchReset() {
        this.queryParam = {}
        this.queryParams = {
          collectTime:moment().add(-1,'d').format('YYYY-MM-DD'),
          dateTime:moment().add(-1,'d').format('YYYYMMDD')
          collectTime: moment().add(-1, 'd').format('YYYY-MM-DD'),
          dateTime: moment().add(-1, 'd').format('YYYYMMDD')
        }
        this.initEquipmentNode()
        // this.dates = []
        // this.queryStatistical()
        // this.onClearSelected()
      },
      searchQuery(){
        this.queryStatistical();
      searchQuery() {
        this.queryStatistical()
      },

      handleWindowResize() {
        if (this.PowerOnRateLine) this.PowerOnRateLine.resize()
        if (this.UtilizationLine) this.UtilizationLine.resize()
        if (this.StartupLine) this.StartupLine.resize()
      }
    },
    watch: {
@@ -485,7 +408,7 @@
          this.$set(this.queryParam, 'equipmentId', val.equipmentId)
          this.queryParams.parentId = ''
          this.queryParams.equipmentId = val.equipmentId
        }else{
        } else {
          this.queryParams.parentId = val.key
          this.queryParams.equipmentId = ''
          this.$set(this.queryParam, 'tierName', val.title)
@@ -496,86 +419,99 @@
  }
</script>

<style scoped>
  .charContent{
<style scoped lang="less">
  @media screen and (min-width: 1920px) {
    #StatisticsLegend {
      height: 748px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    #StatisticsLegend {
      height: 748px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    #StatisticsLegend {
      height: 600px !important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    #StatisticsLegend {
      height: 501px !important;
      overflow: scroll;
    }
  }

  @media screen and (max-width: 1280px) {
    #StatisticsLegend {
      height: 501px !important;
      overflow: scroll;
    }
  }

  /deep/ .ant-spin-nested-loading {
    flex: 1;
    display: flex;
  }
  @media screen and (min-width: 1920px){
    #StatisticsLegend{
      height: 748px!important;
      overflow: scroll;
    flex-direction: column;

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

    .ant-spin-blur {
      opacity: 1;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    #StatisticsLegend{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    #StatisticsLegend{
      height: 600px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    #StatisticsLegend{
      height: 501px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    #StatisticsLegend{
      height: 501px!important;
      overflow: scroll;
    }
  }
  #StatisticsLegend .PowerOnRate{

  #StatisticsLegend .PowerOnRate {
    flex: 1;
    margin-bottom: 15px;
    background-color: #fff;
  }
  #StatisticsLegend .UtilizationStartup{

  #StatisticsLegend .UtilizationStartup {
    flex: 1;
    display: flex;
  }
  #StatisticsLegend .UtilizationStartup>div{

  #StatisticsLegend .UtilizationStartup > div {
    flex: 1;
    background-color: #fff;
  }
  #StatisticsLegend .UtilizationStartup .Utilization{

  #StatisticsLegend .UtilizationStartup .Utilization {
    margin-right: 15px;
  }
  .title{

  .title {
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-top: 5px;
  }
  .title .circle{
    width: 15px;
    height: 15px;
    background-color: #7282ec;
    border-radius: 100%;
    margin-right: 10px;
  }
  .title .text{
    font-size: 2vh;
  }
  .Line-box{

  .Line-box {
    display: flex;
    flex-direction: column;
  }
  .Line-box .box-bottom{

  .Line-box .box-bottom {
    flex: 1;
  }
  .PowerOnRate-box{

  .PowerOnRate-box {
    display: flex;
  }
  .PowerOnRate-box .PowerOnRate-left{
    width: 25%;
  }
  .PowerOnRate-box .PowerOnRate_text{

  .PowerOnRate-box .PowerOnRate_text {
    width: 10%;
    display: flex;
    flex-direction: column;
@@ -583,89 +519,24 @@
    justify-content: center;
    font-weight: 800;
  }
  .PowerOnRate-box .PowerOnRate-right{
    flex: 1;
  }
  .Utilization-box{
    display: flex;
  }
  .Utilization-box .Utilization-left{
    width: 25%;
  }
  .Utilization-box .Utilization-right{
    flex: 1;
  }
  .Startup-box{
    display: flex;
  }
  .Startup-box .Startup-left{
    width: 25%;
  }
  .Startup-box .Startup-right{
    flex: 1;
  }
  .left{
    display: flex;
    align-items: center;
  }
  .left .left-box{
    width: 65%;
    height: 60%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;

    /*border: 6px solid red;*/
    /*!*background-color: yellow;*!*/
    /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
  .PowerOnRate-box .PowerOnRate-right {
    flex: 1;
  }
  .left-box-con{
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    border: 6px solid red;
    /*background-color: yellow;*/
    border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
  }
  .left .left-box .Rate-box-kong{
    width: 100%;
    background: -moz-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
    background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%,#b5dec2), color-stop(100%,#f4f5ba));
    background: -webkit-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
    background: -o-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
    background: -ms-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
    background: linear-gradient(to top, #b5dec2 0%,#f4f5ba 100%);
  }
  .left .left-box .Rate-box{
    position: absolute;
    text-align: center;
    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%);
    background: -o-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%);
    background: -ms-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%);
    background: linear-gradient(to top, #06a8f8 0%,#2bf3c7 100%);
  }
  .left .left-box .Rate-box p{
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    text-align: center;
  }
  .con-left{

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

  .Utilization-box .Utilization-right {
    flex: 1;
  }

  .Startup-box {
    display: flex;
  }

  .Startup-box .Startup-right {
    flex: 1;
  }
</style>

 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,86 +25,86 @@
        </a-row>
      </a-form>
    </div>
    <!--开机率-->
    <div class="PowerOnRate  Line-box">
      <div class="title">
        <div class="circle"></div>
        <div class="text">利用率</div>
      </div>
      <div class="PowerOnRate-box box-bottom">
        <div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>
        <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
      </div>
    </div>
    <!--利用率和开动率-->
    <div class="UtilizationStartup">
      <div class="Utilization Line-box">
        <div class="title">
          <div class="circle"></div>
          <div class="text">开机率</div>
        </div>
        <div class="Utilization-box box-bottom">
          <div class="Utilization-left left">
            <div class="left-box">
              <div class="left-box-con">
                <div class="Rate-box-kong" :style="{height:100-UtilizationHeight+'%'}"></div>
                <div class="Rate-box" :style="{height:UtilizationHeight+'%'}">
                  <p class="Rate-box-text">
                    <span ref="UtilizationRate">{{UtilizationHeight}}%</span>
                    <br>
                    开机率
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
        </div>
      </div>
      <div class="Startup Line-box">
        <div class="title">
          <div class="circle"></div>
          <div class="text">开动率</div>
        </div>
        <div class="Startup-box box-bottom">
          <div class="Startup-left left" ref="StartupRate">
            <div class="left-box">
              <div class="left-box-con">
                <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>
                    <br>
                    开动率
                  </p>
                </div>
              </div>

            </div>
          </div>
          <div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
    <a-spin :spinning="spinning">
      <!--开机率-->
      <div class="PowerOnRate  Line-box">
        <div class="title">
          <div class="circle"></div>
          <div class="text">利用率</div>
        </div>
        <div class="PowerOnRate-box box-bottom">
          <div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>
          <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
        </div>
      </div>
    </div>
      <!--利用率和开动率-->
      <div class="UtilizationStartup">
        <div class="Utilization Line-box">
          <div class="title">
            <div class="circle"></div>
            <div class="text">开机率</div>
          </div>
          <div class="Utilization-box box-bottom">
            <div class="Utilization-left left">
              <div class="left-box">
                <div class="left-box-con">
                  <div class="Rate-box-kong" :style="{height:100-UtilizationHeight+'%'}"></div>
                  <div class="Rate-box" :style="{height:UtilizationHeight+'%'}">
                    <p class="Rate-box-text">
                      <span ref="UtilizationRate">{{UtilizationHeight}}%</span>
                      <br>
                      开机率
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
          </div>
        </div>
        <div class="Startup Line-box">
          <div class="title">
            <div class="circle"></div>
            <div class="text">开动率</div>
          </div>
          <div class="Startup-box box-bottom">
            <div class="Startup-left left" ref="StartupRate">
              <div class="left-box">
                <div class="left-box-con">
                  <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>
                      <br>
                      开动率
                    </p>
                  </div>
                </div>

              </div>
            </div>
            <div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
          </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,24 +482,29 @@
            }
          }]
        }
        StartupLine.setOption(StartupLine_option)
        this.StartupLine.setOption(StartupLine_option)
      },
      queryStatistical() {
        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.StartupHeight = res.result.usedOpenRate
            this.openingLong = this.getTime(res.result.openLong)
            this.waitingLong = this.getTime(res.result.waitLong)
            this.processLong = this.getTime(res.result.processLong)
            this.closedLong = this.getTime(res.result.closeLong)
            this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
            this.draw()
          }
        })
        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.StartupHeight = res.result.usedOpenRate
              this.openingLong = this.getTime(res.result.openLong)
              this.waitingLong = this.getTime(res.result.waitLong)
              this.processLong = this.getTime(res.result.processLong)
              this.closedLong = this.getTime(res.result.closeLong)
              this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
              this.draw()
            }
          })
          .finally(() => {
            this.spinning = false
          })
      },
      dataChange(val) {
        if (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>

 src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue

@@ -38,7 +38,7 @@
          </a-table>
        </div>

        <a-spin :spinning="echartLoading">
        <a-spin :spinning="eChartLoading">
          <div style="width: 100%;height: 100%;display: flex;">
            <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div>
            <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
@@ -51,13 +51,8 @@

<script>
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import $ from 'jquery'
  import '@/components/table2excel/table2excel'
  import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import { getAction } from '@/api/manage'
  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'

  const columns = [
    { title: '报警号', dataIndex: 'alarmCode', key: 'alarmCode', align: 'center' },
@@ -98,51 +93,31 @@
  ]

  export default {
    // mixins: [JeecgListMixin],
    name: 'alarmAnalysisMain',
    components: {},
    data() {
      return {
        dataSource: [],
        /* table加载状态 */
        outerDataLoading: false,
        innerDataLoading: false,
        echartLoading: false,
        eChartLoading: false,
        typeTree: '',
        typeParent: 1,
        typeEquipment: 1,
        TreeIDOne: 1,
        TreeIDTwo: 2,
        deviceTypeDict: '',
        dates: [],
        identifying: [],
        queryParam: {},
        queryParams: {},
        queryParamEquip: {},
        queryParamPeople: {},
        efficiencyOptions: [
          { label: '利用率', value: 'lyl' },
          { label: '开机率', value: 'kjl' },
          { label: '开机时间', value: 'kjsj' },
          { label: '加工时间', value: 'jgsj' },
          { label: '待机时间', value: 'djsj' },
          { label: '关机时间', value: 'gjsj' }
        ],
        checkedList: ['lyl'],
        dataList: [],
        url: {
          efficiencyList: '/mdc/alarmAnalyze/alarmList',
          listByType: '/mdc/MdcUtilizationRate/getByType',
          alarmTrend: '/mdc/alarmAnalyze/alarmTrend',
          equipmentAlarmList: '/mdc/alarmAnalyze/equipmentAlarmList'
        },
        tableHeads: [],
        pieDate: [0],
        XData: [0],
        YData: [0],
        columns,
        innerColumns,
        hasRequsetAlarmCodeList: []
        hasRequestAlarmCodeList: []
      }
    },
    props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -155,7 +130,6 @@
      this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
      this.queryParam.typeTree = '1'
      this.loadData1()

    },
    mounted() {
      this.drawWrin()
@@ -196,14 +170,6 @@
      }
    },
    filters: {
      numFilter(value) {
        if (value) {
          return parseFloat((value * 100).toFixed(2))
        } else {
          return '0'
        }
      },

      /**
       * 格式化时间
       * @param seconds 秒数
@@ -243,9 +209,8 @@
      },
      TableDraw(key, val) {
        let that = this
        that.echartLoading = true
        that.eChartLoading = true
        that.queryParam.alarmCode = val.alarmCode
        console.log(this.queryParam)
        getAction(that.url.alarmTrend, that.queryParam)
          .then(res => {
            if (res.success) {
@@ -258,21 +223,12 @@
              that.XData = res.result.dateCountList.map(item => item.key)
              that.YData = res.result.dateCountList.map(item => item.count)

              // this.tableHeads = res.result.dates
              // this.dataList = res.result
              // this.draw()
              // this.checkSameData(this.dataList)
              // this.checkSameData1(this.dataList)
              // this.checkSameData2(this.dataList)
              // this.combineCell();
              // this.initDeviceType(this.dataList)
              that.drawWrin()
            }
          })
          .finally(() => {
            that.echartLoading = false
            that.eChartLoading = false
          })
        console.log(this.YData)

      },
      disabledDate(current) {
@@ -322,20 +278,11 @@
      },
      loadData1() {
        this.outerDataLoading = true
        this.tableHeads = []
        this.dataList = []
        getAction(this.url.efficiencyList, this.queryParam).then(res => {
          if (res.success) {
            // this.tableHeads = res.result.dates
            this.dataList = res.result
            this.hasRequsetAlarmCodeList = []
            // this.draw()
            // this.checkSameData(this.dataList)
            // this.checkSameData1(this.dataList)
            // this.checkSameData2(this.dataList)
            // this.combineCell();
            // this.initDeviceType(this.dataList)

            this.hasRequestAlarmCodeList = []
          }
        }).finally(() => {
          this.outerDataLoading = false
@@ -354,27 +301,21 @@
          },
          tooltip: {
            trigger: 'item',
            formatter: '<br/>{b} : {c} ({d}%)'
            formatter: '{b} : {c} ({d}%)'
          },
          calculable: true,
          series: [{
            type: 'pie',
            radius: '60%',
            label: {
              show: true,
              formatter: '{b}\n{c}',
              color: 'inherit'
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,
                  // position: 'top',
                  formatter: '{b}\n{c}',
                  color: function(params) {
                    var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
                    return colorList[params.dataIndex]
                  }
                }
              color: function(params) {
                const colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
                return colorList[params.dataIndex % colorList.length]
              }
            },
            data: this.pieDate
@@ -483,7 +424,7 @@
        let _this = this
        // 当展开时若该行未被展开过才会请求后台数据，展开过的数据会被缓存无需重复请求
        this.queryParam.alarmCode = record.alarmCode
        if (expanded && !this.hasRequsetAlarmCodeList.includes(record.alarmCode)) {
        if (expanded && !this.hasRequestAlarmCodeList.includes(record.alarmCode)) {
          this.innerDataLoading = true
          getAction(this.url.equipmentAlarmList, this.queryParam).then(res => {
            if (res.success) {
@@ -492,7 +433,7 @@
                  item.innerDataList = res.result
                }
              })
              _this.hasRequsetAlarmCodeList.push(record.alarmCode)
              _this.hasRequestAlarmCodeList.push(record.alarmCode)
            }
          })
            .finally(() => {