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

zhuzhuanzhuan

2024-03-28 a144a18ab582fd3a8c945cba60bc364dbe7f31e8

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

 src/router/index.js

@@ -4,6 +4,20 @@

Vue.use(Router)

// 解决报错
const originalPush = Router.prototype.push
const originalReplace = Router.prototype.replace
// push
Router.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
// replace
Router.prototype.replace = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => err)
}

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,

 src/views/dashboard/BranchFactorySignage.vue

@@ -118,28 +118,6 @@
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        supportPlanList: [
          {
            label: '本月三保计划',
            value: 299,
            background: '#719D8E'
          },
          {
            label: '本月完成',
            value: 229,
            background: '#409EFF'
          },
          {
            label: '下月三保计划',
            value: 319,
            background: '#A8985D'
          },
          {
            label: '下下月三保计划',
            value: 329,
            background: '#58D9F9'
          }
        ],
        maintenanceConfig: {},
        problemConfig: {}
      }
@@ -148,10 +126,6 @@
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
    },
    activated() {
      console.log('触发activated')
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
@@ -172,8 +146,8 @@
      getRunningStateDataByApi() {
        signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.runningStateData = res.result
            this.drawRunningStateChart()
            if (res.success) this.runningStateData = res.result.list
            this.drawRunningStateChart(res.result.producitonId)
          })
      },

@@ -276,7 +250,7 @@
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart() {
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          height: 300,
@@ -356,6 +330,14 @@
          ]
        }
        this.runningStateChart.setOption(option, true)

        this.runningStateChart.on('click', params => {
          console.log('params', params)
          this.$router.push({
            name: 'mdc-base-DeviceBaseInfo',
            params: { signageData: params.data, productionId }
          })
        })
      },

      /* 绘制设备利用率胶囊图 */
@@ -549,11 +531,15 @@
        this.efficiencyChart.setOption(option, true)

        this.efficiencyChart.on('click', params => {

          // 点击触发的为柱状体，除此除外是标题
          if (params.componentType === 'series') {
            console.log('seriesParams===========', params)

            const productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
            const tierName = this.efficiencyData.find(item => item.productionCode === params.name).name
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: { isEquipment: false, productionId, tierName }
            })
          } else {
            console.log('yAxisParams===========', params)
            this.$emit('switchToNextSignage', { signageName: 'WorkshopSection', productionCode: params.value })

 src/views/dashboard/EquipmentSignage.vue

@@ -265,13 +265,14 @@
        equipmentId: '2140223'
      }
    },
    created() {
      console.log('触发重新创建')
      this.equipmentId = this.productionCode
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
    },
    activated() {
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)

 src/views/dashboard/IndexSignage.vue

@@ -126,10 +126,6 @@
      this.drawCharts()
      this.getChartDataByApi()
    },
    activated() {
      console.log('触发activated')
      this.handleWindowResize()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
@@ -149,8 +145,8 @@
      getRunningStateDataByApi() {
        signageApi.getEquipmentStatusStatisticsApi()
          .then(res => {
            if (res.success) this.runningStateData = res.result
            this.drawRunningStateChart()
            if (res.success) this.runningStateData = res.result.list
            this.drawRunningStateChart(res.result.producitonId)
          })
      },

@@ -253,7 +249,7 @@
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart() {
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          height: 300,
@@ -333,6 +329,13 @@
          ]
        }
        this.runningStateChart.setOption(option, true)

        this.runningStateChart.on('click', params => {
          this.$router.push({
            name: 'mdc-base-DeviceBaseInfo',
            params: { signageData: params.data, productionId }
          })
        })
      },

      /* 绘制设备利用率胶囊图 */
@@ -526,10 +529,17 @@
        this.efficiencyChart.setOption(option, true)

        this.efficiencyChart.on('click', params => {

          // 点击触发的为柱状体，除此除外是标题
          if (params.componentType === 'series') {
            // 柱状体跳转统计分析页面展示对应层级数据
            console.log('seriesParams===========', params)
            const productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
            const tierName = this.efficiencyData.find(item => item.productionCode === params.name).name
            console.log('productionId', productionId)
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: { isEquipment: false, productionId, tierName }
            })
          } else {
            console.log('yAxisParams===========', params)
            this.$emit('switchToNextSignage', { signageName: 'BranchFactory', productionCode: params.value })

 src/views/dashboard/WorkshopSectionSignage.vue

@@ -73,7 +73,8 @@
      </div>
      <div style="width: 30%">
        <dv-border-box-9 style="padding: 15px">
          <a-form layout="inline" @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
          <a-form layout="inline"
                  @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
            <a-form-item label="设备编号">
              <!--<a-input v-model="equipmentId" size="large"></a-input>-->
              <a-auto-complete
@@ -198,11 +199,6 @@
      this.drawCharts()
      this.getChartDataByApi()
    },
    activated() {
      console.log('触发activated')
      this.handleWindowResize()
      if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
      if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
@@ -249,8 +245,8 @@
      getRunningStateDataByApi() {
        signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
          .then(res => {
            if (res.success) this.runningStateData = res.result
            this.drawRunningStateChart()
            if (res.success) this.runningStateData = res.result.list
            this.drawRunningStateChart(res.result.producitonId)
          })
      },

@@ -443,7 +439,7 @@
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart() {
      drawRunningStateChart(productionId) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        const option = {
          title: {
@@ -521,6 +517,13 @@
          ]
        }
        this.runningStateChart.setOption(option, true)

        this.runningStateChart.on('click', params => {
          this.$router.push({
            name: 'mdc-base-DeviceBaseInfo',
            params: { signageData: params.data, productionId }
          })
        })
      },

      /* 绘制折线图 */
@@ -661,7 +664,7 @@
              }
            }
          ],
          series: seriesData,
          series: seriesData
          // dataZoom: {
          //   show: false,
          //   startValue: 0, // 从头开始。

 src/views/mdc/base/DeviceBaseInfo.vue

@@ -5,30 +5,6 @@
        <base-tree @sendSelectBaseTree="changeSelection" @getCurrSelected="changeSelectionNode"></base-tree>
      </a-col>
      <a-col :md="24-5" :sm="24">
        <!--<div class="equipMessage">-->
          <!--<table>-->
            <!--<tr>-->
              <!--<td>关机-->
                <!--<span class="equipShutdown"></span>-->
              <!--</td>-->
              <!--<td>{{offNumber}}</td>-->
              <!--<td>待机-->
                <!--<span class="standbyNumber"></span>-->
              <!--</td>-->
              <!--<td>{{standbyNumber}}</td>-->
              <!--<td>运行-->
                <!--<span class="equipRun"></span>-->
              <!--</td>-->
              <!--<td>{{workNumber}}</td>-->
              <!--<td>报警-->
                <!--<span class="equipAlarm"></span>-->
              <!--</td>-->
              <!--<td>{{warningNumber}}</td>-->
              <!--<td>总数</td>-->
              <!--<td>{{allNumber}}</td>-->
            <!--</tr>-->
          <!--</table>-->

        <!--</div>-->
        <div class="device-status-info">
          <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
@@ -47,7 +23,8 @@
        <div>
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="布局图">
              <equipment-layout :dataList="dataList" :equipmentId="selectEquementId" :node="selectEquement"></equipment-layout>
              <equipment-layout :dataList="dataList" :equipmentId="selectEquementId"
                                :node="selectEquement"></equipment-layout>
            </a-tab-pane>
            <a-tab-pane key="2" tab="列表" force-render>
              <equipment-list :dataSource="dataList" @editEquipmentStatus="editEquipmentStatus"></equipment-list>
@@ -96,11 +73,11 @@
        allNumber: 0,
        url: {
          list: '/mdc/mdcEquipment/queryEquipmentMonitorList',
          updateEquipmentStatus:'/mdc/mdcEquipment/updateEquipmentStatus'
          updateEquipmentStatus: '/mdc/mdcEquipment/updateEquipmentStatus'
        },
        param:{},
        timer:null,
        timerzhun:null,
        param: {},
        timer: null,
        timerzhun: null,
        deviceStatusList: [
          {
            label: '关机',
@@ -127,19 +104,22 @@
            value: 99,
            color: '#fff'
          }
        ],// 设备状态指示灯列表，
        ]// 设备状态指示灯列表，
      }
    },
    created() {
      const { productionId } = this.$route.params
      console.log('productionId', productionId)
      if (productionId) this.param.key = productionId
      // this.equipmentStatistics()
      // setInterval(this.equipmentStatistics(), 5*1000);
    },
    methods: {
      equipmentStatistics(param,resopnse={key:false}) {
      equipmentStatistics(param, resopnse = { key: false }) {
        getAction(this.url.list, param).then((res) => {
          this.dataList = []
          if (res.success) {
            if(res.result.length != 0){
            if (res.result.length != 0) {
              this.standbyNumber = 0
              this.offNumber = 0
              this.warningNumber = 0
@@ -148,64 +128,89 @@
              this.dataList = res.result
              // console.log(this.dataList)
              this.allNumber = this.dataList.length
              if(resopnse.key){
              if (resopnse.key) {
                this.$notification.success({
                  key:'equipmentStatus',
                  key: 'equipmentStatus',
                  message: '消息',
                  description: resopnse.message,
                });
                  description: resopnse.message
                })
              }
              for (let i = 0; i < this.dataList.length; i++) {
                let item = this.dataList[i]
                switch (item.oporationDict) {
                  case "待机" : this.standbyNumber = this.standbyNumber + 1;break;
                  case '待机' :
                    this.standbyNumber = this.standbyNumber + 1
                    break
                  // case 2 : this.standbyNumber = this.standbyNumber + 1;break;
                  case "运行" : this.workNumber = this.workNumber + 1;break;
                  case "关机" : this.offNumber = this.offNumber + 1;break;
                  case "报警" : this.warningNumber = this.warningNumber + 1;break;
                  default:break;
                  case '运行' :
                    this.workNumber = this.workNumber + 1
                    break
                  case '关机' :
                    this.offNumber = this.offNumber + 1
                    break
                  case '报警' :
                    this.warningNumber = this.warningNumber + 1
                    break
                  default:
                    break
                }
              }
            }else{

              // 筛选从车板跳转过来的需求数据
              const { signageData } = this.$route.params
              console.log('signageData', signageData)
              if (!signageData) return
              else this.filterDataList(signageData)
            } else {
              // this.$message.warning("此车间下面无设备！！")
              this.$notification.warning({
                message:'消息',
                description:"此车间下面无设备！！"
              });
                message: '消息',
                description: '此车间下面无设备！！'
              })
            }
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
              message: '消息',
              description: res.message
            })
          }
        })
      },

      /**
       * 筛选满足从看板跳转过来时的条件的数据
       * @param record
       */
      filterDataList(signageData) {
        this.dataList = this.dataList.filter(item => item.oporationDict === signageData.name)
        console.log('dataList', this.dataList)
      },

      changeSelection(val) {
        this.selectEquementId = val
      },
      changeSelectionNode(val) {
        // console.log(val)
        this.selectEquement = val.equipmentId
        clearInterval(this.timer);
        clearInterval(this.timer)
        this.timer = null
        if (!val.equipmentId) {
          this.param.key=val.key
          clearInterval(this.timerzhun);
          this.param.key = val.key
          clearInterval(this.timerzhun)
          this.timerzhun = null
          this.equipmentStatistics(this.param)
          this.timer = setInterval(() => {
            setTimeout( this.equipmentStatistics(this.param),0)
          },1000*10)
        }else{
          this.param.key=val.parentId
          clearInterval(this.timerzhun);
            setTimeout(this.equipmentStatistics(this.param), 0)
          }, 1000 * 10)
        } else {
          this.param.key = val.parentId
          clearInterval(this.timerzhun)
          this.timerzhun = null
          this.equipmentStatistics(this.param)
          this.timer = setInterval(() => {
            setTimeout( this.equipmentStatistics(this.param),0)
          },1000*10)
            setTimeout(this.equipmentStatistics(this.param), 0)
          }, 1000 * 10)
        }
      },

@@ -213,30 +218,30 @@
       * 单击状态反馈后触发
       * @param record
       */
      editEquipmentStatus(record){
        console.log('子组件record',record.id)
        const _this=this
      editEquipmentStatus(record) {
        console.log('子组件record', record.id)
        const _this = this
        this.$notification.info({
          key:'equipmentStatus',
          key: 'equipmentStatus',
          message: '消息',
          description: '反馈中...',
        });
        getAction(this.url.updateEquipmentStatus,{id:record.id})
          .then(res=>{
            if(res.success) {
              _this.equipmentStatistics(this.param,{key:true,message:res.message})
            }else{
          description: '反馈中...'
        })
        getAction(this.url.updateEquipmentStatus, { id: record.id })
          .then(res => {
            if (res.success) {
              _this.equipmentStatistics(this.param, { key: true, message: res.message })
            } else {
              this.$notification.warning({
                message:'消息',
                description:res.message
              });
                message: '消息',
                description: res.message
              })
            }
          })
          .catch(err=>{
          .catch(err => {
            this.$notification.error({
              message:'消息',
              description:err.message
            });
              message: '消息',
              description: err.message
            })
          })
      },

@@ -248,16 +253,16 @@
      getDeviceNumberByStatus(value) {
        if (value === 99) return this.dataList.length
        return this.dataList.filter((item) => item.oporation === 1 && value === 2 || item.oporation === value).length
      },
      }
    },
    mounted(){
      this.equipmentStatistics()
    mounted() {
      this.equipmentStatistics(this.param)
      // this.timerzhun = setInterval(() => {
      //   setTimeout( this.equipmentStatistics(),0)
      // },1000*10)
    },
    beforeDestroy(){
      clearInterval(this.timer);
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }
  }

 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">
@@ -25,10 +27,10 @@
    </div>
    <!--开机率-->
    <div class="PowerOnRate  Line-box">
    <div class="title">
      <div class="circle"></div>
      <div class="text">利用率</div>
    </div>
      <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>
@@ -92,143 +94,142 @@
  import { putAction, getAction } from '@/api/manage'
  import $ from 'jquery'
  import * as echarts from 'echarts'

  export default {
    name: 'StatisticsLegend',
    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 {
        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: {},
        dates: [],
        queryParam: {},
        queryParams:{
          collectTime:undefined,
        queryParams: {
          collectTime: undefined
        },
        shiftSubList: [],
        shiftList: [],
        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() {
      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){
    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){
      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 PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons');
        let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
        let PowerOnRatePie_option = {
            // color: ["#3859fa", '#ccc'],
            title: {
              text: this.StatCharUsedRate+'%',
              subtext:'利用率',
              textStyle: {
                color: '#268e80',
                fontSize: 18,
          // color: ["#3859fa", '#ccc'],
          title: {
            text: this.StatCharUsedRate + '%',
            subtext: '利用率',
            textStyle: {
              color: '#268e80',
              fontSize: 18

              },
              subtextStyle:{
                color:'#292929'
              },
              x: 'center',
              y: 'center',
            },
            series: [{
              name: '',
              type: 'pie',
              radius: ['55%', '70%'],
              itemStyle:{
                normal:{
                  borderWidth:4,//扇区间加间隔
                  borderColor:'#fff'//间隔为白色
                }
              },
              label: {
                normal: {
                  show: false,
                },
              },
              data: [{
                value: 100,
                itemStyle:{
                  color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                    offset:0,
                    color:'#88a8fd'
                  },
                    {
                      offset:1,
                      color:'#544cee'
                    }],false)
                }
              },
                {
                  value: 100-this.StatCharUsedRate,
                  itemStyle:{
                    color:'#f0f3f5'
                  }
                },
              ]
            subtextStyle: {
              color: '#292929'
            },
            x: 'center',
            y: 'center'
          },
          series: [{
            name: '',
            type: 'pie',
            radius: ['55%', '70%'],
            itemStyle: {
              normal: {
                borderWidth: 4,//扇区间加间隔
                borderColor: '#fff'//间隔为白色
              }
            },
            label: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 100,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#88a8fd'
                },
                  {
                    offset: 1,
                    color: '#544cee'
                  }], false)
              }
            },
              {
                value: 100 - this.StatCharUsedRate,
                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',
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top: 60,
              containLabel: true
            },
          legend:{
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: 60,
            containLabel: true
          },
          legend: {
            // selected:{
            //     "曲线":false,
            // },
            top:'0',
            right:'10',
            top: '0',
            right: '10',
            //设置单选多选模式
            // selectedMode:'single',
            icon:"pin",
            data:[
            icon: 'pin',
            data: [
              // {
              //   name:'曲线',
              //   textStyle:{
@@ -240,61 +241,61 @@
              //   }
              // },
              {
                name:'柱状图',
                textStyle:{
                  padding:4,
                  fontSize:16,
                  color:'#9996f8',
                name: '柱状图',
                textStyle: {
                  padding: 4,
                  fontSize: 16,
                  color: '#9996f8'
                  // borderWidth:1,
                  // borderColor:'#50E6D7'
                }
              }
            ]
          },
            xAxis :{
              type : 'category',
              data:['开机时长','关机时长','运行时长','待机时长'],
              axisLabel:{          //坐标轴字体颜色
                textStyle:{
                  color: '#000'
                }
              },
              axisLine:{
                lineStyle:{
                  color:"#e5e5e5"
                }
              },
              axisTick:{       //y轴刻度线
                show:false
              },
              splitLine:{    //网格
                show: false,
              },
              boundaryGap: true,
            },
            yAxis :{
              name: '时间/小时',
              type : 'value',
              axisLabel:{        //坐标轴字体颜色
                textStyle:{
                  color: '#000'
                }
              },
              axisLine:{
                show:false,
              },
              axisTick:{       //y轴刻度线
                show:false
              },
              splitLine:{    //网格
                show: true,
                lineStyle:{
                  color:'#dadde4',
                  type:"dashed"
                }
          xAxis: {
            type: 'category',
            data: ['开机时长', '关机时长', '运行时长', '待机时长'],
            axisLabel: {          //坐标轴字体颜色
              textStyle: {
                color: '#000'
              }
            },
            series:[
            axisLine: {
              lineStyle: {
                color: '#e5e5e5'
              }
            },
            axisTick: {       //y轴刻度线
              show: false
            },
            splitLine: {    //网格
              show: false
            },
            boundaryGap: true
          },
          yAxis: {
            name: '时间/小时',
            type: 'value',
            axisLabel: {        //坐标轴字体颜色
              textStyle: {
                color: '#000'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {       //y轴刻度线
              show: false
            },
            splitLine: {    //网格
              show: true,
              lineStyle: {
                color: '#dadde4',
                type: 'dashed'
              }
            }
          },
          series: [
            //   {
            //   name:'曲线',
            //   type: 'line',
@@ -337,53 +338,53 @@
            //   },
            //   data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
            // },
              {
                name:'柱状图',
                type: 'bar',
                data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
                // data:[22,3,5,6],
                barWidth: 25,
                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`
                  }
            {
              name: '柱状图',
              type: 'bar',
              data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
              // data:[22,3,5,6],
              barWidth: 25,
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#000'
                },
                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]
                      },
                        {
                          offset:1,
                          color:colorItem[1]
                        }],false)
                // formatter:"时长：{c}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]
                    },
                    barBorderRadius: [5, 5, 0, 0],
                  }
                },
              }]
          }
        PowerOnRateLine.setOption(PowerOnRateLine_option);
                      {
                        offset: 1,
                        color: colorItem[1]
                      }], false)
                  },
                  barBorderRadius: [5, 5, 0, 0]
                }
              }
            }]
        }
        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: {
@@ -440,48 +441,48 @@
          }],
          series: [
            {
            type: 'bar',
            data: [this.openingLong,this.totalLong],
              type: 'bar',
              data: [this.openingLong, this.totalLong],
              // data:[22,22],
            barWidth: 25,
              label:{
                show:true,
                position:"top",
                textStyle:{
                  color:'#000',
              barWidth: 25,
              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"],
                    ["#9978fa","#88a1fa"],
                  ];
                  // return colorList[params.dataIndex];
                  let colorItem = colorList[params.dataIndex];
                  return new echarts.graphic.LinearGradient(0,0,0,1,[{
                    offset:0,
                    color:colorItem[0]
              itemStyle: {
                normal: {
                  color: function(params) {
                    let colorList = [
                      ['#6496e9', '#6bded3'],
                      ['#9978fa', '#88a1fa']
                    ]
                    // return colorList[params.dataIndex];
                    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]
                }
              }
            },
          }]
        };
        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: {
@@ -538,244 +539,261 @@
          }],
          series: [{
            type: 'bar',
            data: [this.processLong,this.openingLong],
            data: [this.processLong, this.openingLong],
            // data:[22,22],
            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 = [
                    ["#4fe1c5","#4ecee1"],
                    ["#6496e9","#6bded3"],
                  ];
                    ['#4fe1c5', '#4ecee1'],
                    ['#6496e9', '#6bded3']
                  ]
                  // return colorList[params.dataIndex];
                  let colorItem = colorList[params.dataIndex];
                  return new echarts.graphic.LinearGradient(0,0,0,1,[{
                    offset:0,
                    color:colorItem[0]
                  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]
              }
            },
            }
          }]
        };
        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;
      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.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){
        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) {
            if(res.result[0]){
              _this.$set(this.queryParam, 'tierName', res.result[0].title)
              _this.$set(this.queryParams, 'parentId', res.result[0].key)
            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
            });
              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()
      }
    },
    watch: {
      equip(val) {
          // console.log(val);
          if (val && val.equipmentId) {
            this.$set(this.queryParam, 'tierName', val.title)
            this.$set(this.queryParam, 'equipmentId', val.equipmentId)
            this.queryParams.parentId = ''
            this.queryParams.equipmentId = val.equipmentId
          }else{
            this.queryParams.parentId = val.key
            this.queryParams.equipmentId = ''
            this.$set(this.queryParam, 'tierName', val.title)
            }
            this.searchQuery()
          }
          // this.searchQuery();
        // console.log(val);
        if (val && val.equipmentId) {
          this.$set(this.queryParam, 'tierName', val.title)
          this.$set(this.queryParam, 'equipmentId', val.equipmentId)
          this.queryParams.parentId = ''
          this.queryParams.equipmentId = val.equipmentId
        } else {
          this.queryParams.parentId = val.key
          this.queryParams.equipmentId = ''
          this.$set(this.queryParam, 'tierName', val.title)
        }
        this.searchQuery()
      }
      // this.searchQuery();
    }

  }
</script>

<style scoped>
  .charContent{
  .charContent {
    display: flex;
  }
  @media screen and (min-width: 1920px){
    #StatisticsLegend{
      height: 748px!important;

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

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

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

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

  @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{

  .title .circle {
    width: 15px;
    height: 15px;
    background-color: #7282ec;
    border-radius: 100%;
    margin-right: 10px;
  }
  .title .text{

  .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{

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

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

  .Utilization-box {
    display: flex;
  }
  .Utilization-box .Utilization-left{

  .Utilization-box .Utilization-left {
    width: 25%;
  }
  .Utilization-box .Utilization-right{

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

  .Startup-box {
    display: flex;
  }
  .Startup-box .Startup-left{

  .Startup-box .Startup-left {
    width: 25%;
  }
  .Startup-box .Startup-right{

  .Startup-box .Startup-right {
    flex: 1;
  }
  .left{

  .left {
    display: flex;
    align-items: center;
  }
  .left .left-box{

  .left .left-box {
    width: 65%;
    height: 60%;
    margin: 0 auto;
@@ -786,7 +804,8 @@
    /*!*background-color: yellow;*!*/
    /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
  }
  .left-box-con{

  .left-box-con {
    width: 100%;
    height: 100%;
    position: relative;
@@ -795,16 +814,18 @@
    /*background-color: yellow;*/
    border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
  }
  .left .left-box .Rate-box-kong{

  .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%);
    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{

  .left .left-box .Rate-box {
    position: absolute;
    text-align: center;
    bottom: 0;
@@ -812,27 +833,30 @@
    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%);
    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{

  .left .left-box .Rate-box p {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    text-align: center;
  }
  .con-left{

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

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