1、新增点击设备运行状态图标跳转至设备监控页面并根据状态及当前层级筛选页面对应数据 2、新增点击设备利用率的横向柱状图跳转至统计分析页面并根据所点击层...

zhuzhuanzhuan

2024-03-28 a144a18ab582fd3a8c945cba60bc364dbe7f31e8

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

@@ -1,5 +1,6 @@
<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">
@@ -11,7 +12,8 @@
          </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="dataChange" :allowClear="false"/>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="2" :xs="2">
@@ -92,6 +94,7 @@
  import { putAction, getAction } from '@/api/manage'
  import $ from 'jquery'
  import * as echarts from 'echarts'

  export default {
    name: 'StatisticsLegend',
    props: { equip: {} },
@@ -113,30 +116,28 @@
        dates: [],
        queryParam: {},
        queryParams:{
          collectTime:undefined,
          collectTime: undefined
        },
        shiftSubList: [],
        shiftList: [],
        url: {
          getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
          dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate',
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
        },
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
        }
      }
    },
    created(){
      let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
      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')
      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);
        return current && current > moment().subtract('days', 1)
      },
      //把秒计算成对应的时分秒的函数
      getTime(time){
@@ -145,13 +146,13 @@
        h = h <10 ? '0' + h : h
        //作为返回值返回
        // console.log(h);
        return h;
        return h
      },
      moment,
      draw(){
        //利用率
        //饼图
        let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons');
        let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
        let PowerOnRatePie_option = {
            // color: ["#3859fa", '#ccc'],
            title: {
@@ -159,14 +160,14 @@
              subtext:'利用率',
              textStyle: {
                color: '#268e80',
                fontSize: 18,
              fontSize: 18

              },
              subtextStyle:{
                color:'#292929'
              },
              x: 'center',
              y: 'center',
            y: 'center'
            },
            series: [{
              name: '',
@@ -180,8 +181,8 @@
              },
              label: {
                normal: {
                  show: false,
                },
                show: false
              }
              },
              data: [{
                value: 100,
@@ -201,16 +202,16 @@
                  itemStyle:{
                    color:'#f0f3f5'
                  }
                },
              ]
            },
              }
            ]
          }
        PowerOnRatePie.setOption(PowerOnRatePie_option);
        let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons');
          ]
        }
        PowerOnRatePie.setOption(PowerOnRatePie_option)
        let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
        let PowerOnRateLine_option = {
            tooltip:{
              trigger: 'axis',
            trigger: 'axis'
            },
            grid: {
              left: '3%',
@@ -227,7 +228,7 @@
            right:'10',
            //设置单选多选模式
            // selectedMode:'single',
            icon:"pin",
            icon: 'pin',
            data:[
              // {
              //   name:'曲线',
@@ -244,7 +245,7 @@
                textStyle:{
                  padding:4,
                  fontSize:16,
                  color:'#9996f8',
                  color: '#9996f8'
                  // borderWidth:1,
                  // borderColor:'#50E6D7'
                }
@@ -261,16 +262,16 @@
              },
              axisLine:{
                lineStyle:{
                  color:"#e5e5e5"
                color: '#e5e5e5'
                }
              },
              axisTick:{       //y轴刻度线
                show:false
              },
              splitLine:{    //网格
                show: false,
              show: false
              },
              boundaryGap: true,
            boundaryGap: true
            },
            yAxis :{
              name: '时间/小时',
@@ -281,7 +282,7 @@
                }
              },
              axisLine:{
                show:false,
              show: false
              },
              axisTick:{       //y轴刻度线
                show:false
@@ -290,7 +291,7 @@
                show: true,
                lineStyle:{
                  color:'#dadde4',
                  type:"dashed"
                type: 'dashed'
                }
              }
            },
@@ -345,9 +346,9 @@
                barWidth: 25,
                label:{
                  show:true,
                  position:"top",
                position: 'top',
                  textStyle:{
                    color:'#000',
                  color: '#000'
                  },
                  // formatter:"时长：{c}H",
                  formatter:params=>{
@@ -359,14 +360,14 @@
                  normal: {
                    color: function(params) {
                      let colorList = [
                        ["#6496e9","#6bded3"],
                        ["#849db8","#b4b8cc"],
                        ["#4fe1c5","#4ecee1"],
                      ['#6496e9', '#6bded3'],
                      ['#849db8', '#b4b8cc'],
                      ['#4fe1c5', '#4ecee1'],
                        // ["#9978fa","#88a1fa"],
                        ["#ffbb65","#fdc68b"],
                      ];
                      ['#ffbb65', '#fdc68b']
                    ]
                      // return colorList[params.dataIndex];
                      let colorItem = colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex]
                      return new echarts.graphic.LinearGradient(0,0,0,1,[{
                        offset:0,
                        color:colorItem[0]
@@ -376,14 +377,14 @@
                          color:colorItem[1]
                        }],false)
                    },
                    barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
                  }
                },
              }
              }]
          }
        PowerOnRateLine.setOption(PowerOnRateLine_option);
        PowerOnRateLine.setOption(PowerOnRateLine_option)
        //开机率
        let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons');
        let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
        let UtilizationLine_option = {
          tooltip: {
            trigger: 'axis',
@@ -406,14 +407,14 @@
              }
            },
            axisTick: {
              show: false,
              show: false
            },
            axisLabel: {
              // color: 'rgba(111, 132, 189, 1)',
              textStyle: {
                fontSize: 14
              },
            },
              }
            }
          }],
          yAxis: [{
            type: 'value',
@@ -422,15 +423,15 @@
              // color: 'rgba(111, 132, 189, 1)'
            },
            axisLabel: {
              formatter: '{value}',
              formatter: '{value}'
              // color: 'rgba(111, 132, 189, 1)',
            },
            axisTick: {
              show: false,
              show: false
            },

            axisLine: {
              show: false,
              show: false
            },
            splitLine: {
              lineStyle: {
@@ -446,9 +447,9 @@
            barWidth: 25,
              label:{
                show:true,
                position:"top",
                position: 'top',
                textStyle:{
                  color:'#000',
                  color: '#000'
                },
                // formatter:"时长：{c}H",
                formatter:params=>{
@@ -460,11 +461,11 @@
              normal: {
                color: function(params) {
                  let colorList = [
                    ["#6496e9","#6bded3"],
                    ["#9978fa","#88a1fa"],
                  ];
                      ['#6496e9', '#6bded3'],
                      ['#9978fa', '#88a1fa']
                    ]
                  // return colorList[params.dataIndex];
                  let colorItem = colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex]
                  return new echarts.graphic.LinearGradient(0,0,0,1,[{
                    offset:0,
                    color:colorItem[0]
@@ -474,14 +475,14 @@
                      color:colorItem[1]
                    }],false)
                },
                barBorderRadius: [5, 5, 0, 0],
                  barBorderRadius: [5, 5, 0, 0]
              }
            },
              }
          }]
        };
        UtilizationLine.setOption(UtilizationLine_option);
        }
        UtilizationLine.setOption(UtilizationLine_option)
        //开动率
        let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
        let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
        let StartupLine_option = {
          tooltip: {
            trigger: 'axis',
@@ -504,14 +505,14 @@
              }
            },
            axisTick: {
              show: false,
              show: false
            },
            axisLabel: {
              // color: 'rgba(111, 132, 189, 1)',
              textStyle: {
                fontSize: 14
              },
            },
              }
            }
          }],
          yAxis: [{
            type: 'value',
@@ -520,15 +521,15 @@
              // color: 'rgba(111, 132, 189, 1)'
            },
            axisLabel: {
              formatter: '{value}',
              formatter: '{value}'
              // color: 'rgba(111, 132, 189, 1)',
            },
            axisTick: {
              show: false,
              show: false
            },

            axisLine: {
              show: false,
              show: false
            },
            splitLine: {
              lineStyle: {
@@ -543,9 +544,9 @@
            barWidth: 25,
            label:{
              show:true,
              position:"top",
              position: 'top',
              textStyle:{
                color:'#000',
                color: '#000'
              },
              // formatter:"时长：{c}H",
              formatter:params=>{
@@ -557,11 +558,11 @@
              normal: {
                color: function(params) {
                  let colorList = [
                    ["#4fe1c5","#4ecee1"],
                    ["#6496e9","#6bded3"],
                  ];
                    ['#4fe1c5', '#4ecee1'],
                    ['#6496e9', '#6bded3']
                  ]
                  // return colorList[params.dataIndex];
                  let colorItem = colorList[params.dataIndex];
                  let colorItem = colorList[params.dataIndex]
                  return new echarts.graphic.LinearGradient(0,0,0,1,[{
                    offset:0,
                    color:colorItem[0]
@@ -571,69 +572,64 @@
                      color:colorItem[1]
                    }],false)
                },
                barBorderRadius: [5, 5, 0, 0],
                barBorderRadius: [5, 5, 0, 0]
              }
            },
            }
          }]
        };
        StartupLine.setOption(StartupLine_option);
        }
        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.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.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()
          }
        })
      },
      dataChange(val) {
        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() {
        let _this = this
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            const { isEquipment, productionId, tierName } = this.$route.params
            // 判断是否是从看板跳转过来，productionId 存在则为从看板跳转
            if (productionId) {
              _this.$set(this.queryParam, 'tierName', tierName)
              // 判断是否点击的是设备层级
              if (!isEquipment) _this.$set(this.queryParams, 'parentId', productionId)
              else _this.$set(this.queryParams, 'equipmentId', productionId)
            } else {
            if(res.result[0]){
              _this.$set(this.queryParam, 'tierName', res.result[0].title)
              _this.$set(this.queryParams, 'parentId', res.result[0].key)
            }
            }
            this.queryStatistical()
            // console.log(res.result[0].entity.tierName)
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              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 = {}
@@ -642,12 +638,9 @@
          dateTime:moment().add(-1,'d').format('YYYYMMDD')
        }
        this.initEquipmentNode()
        // this.dates = []
        // this.queryStatistical()
        // this.onClearSelected()
      },
      searchQuery(){
        this.queryStatistical();
        this.queryStatistical()
      }
    },
    watch: {
@@ -675,58 +668,69 @@
  .charContent{
    display: flex;
  }

  @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;
    }
  }

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

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

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

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

  .title{
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-top: 5px;
  }

  .title .circle{
    width: 15px;
    height: 15px;
@@ -734,47 +738,61 @@
    border-radius: 100%;
    margin-right: 10px;
  }

  .title .text{
    font-size: 2vh;
  }

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

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

  .PowerOnRate-box{
    display: flex;
  }

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

  .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%;
@@ -786,6 +804,7 @@
    /*!*background-color: yellow;*!*/
    /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
  }

  .left-box-con{
    width: 100%;
    height: 100%;
@@ -795,6 +814,7 @@
    /*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%);
@@ -804,6 +824,7 @@
    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;
@@ -818,6 +839,7 @@
    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;
@@ -825,6 +847,7 @@
    width: 100%;
    text-align: center;
  }

  .con-left{
    display: flex;
    flex-direction: column;
@@ -832,6 +855,7 @@
    justify-content: space-around;
    align-items: center;
  }

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