车间智慧看板页面新增定时刷新功能

zhaowei

昨天 54d11f9a2f395e021486e6a31912616274b3feda

车间智慧看板页面新增定时刷新功能

 src/views/mdc/base/WorkshopSignage.vue

@@ -36,40 +36,34 @@
              </div>
            </div>
          </div>
          <EquipmentLayout :deviceStatusList="deviceStatusList"/>
          <EquipmentLayout ref="equipmentLayoutRef" :deviceStatusList="deviceStatusList"/>
        </div>
        <div class="workshop-alarm-info content-card">
          <div class="card-title">全厂报警信息</div>
          <WorkshopAlarmInfoTable/>
          <WorkshopAlarmInfoTable ref="alarmInfoRef"/>
        </div>
      </div>

      <div class="content-right">
        <div class="content-card">
          <div class="card-title">前七天利用率排名</div>
          <UtilizationRateRankChart/>
          <UtilizationRateRankChart ref="rateRankRef"/>
        </div>
        <div class=" content-card">
          <div class="card-title">全厂平均运行效率</div>
          <WorkshopEfficiencyAverageChart :dataSource="efficiencyData"/>
          <WorkshopEfficiencyAverageChart ref="averageChartRef" :dataSource="efficiencyData"/>
        </div>
        <div class="workshop-equipment-status content-card">
          <div class="card-title">全厂当前设备状态</div>
          <WorkshopEquipmentStatusChart :deviceStatusList="deviceStatusList"/>
          <WorkshopEquipmentStatusChart ref="equipmentStatusChartRef" :deviceStatusList="deviceStatusList"/>
        </div>
      </div>
    </div>

    <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
  </div>
</template>

<script>
  import api from '@/api/mdc'
  import signageApi from '@/api/signage'
  import { getFileAccessHttpUrl } from '@/api/manage'
  import EquipmentDetailModal from './modules/WorkshopSignage/EquipmentDetailModal'
  import { message } from 'ant-design-vue'
  import OpenRateChart from './modules/WorkshopSignage/OpenRateChart'
  import UtilizationRateChart from './modules/WorkshopSignage/UtilizationRateChart'
  import ClassUtilizationRateChart from './modules/WorkshopSignage/ClassUtilizationRateChart'
@@ -78,10 +72,6 @@
  import UtilizationRateRankChart from './modules/WorkshopSignage/UtilizationRateRankChart'
  import WorkshopEquipmentStatusChart from './modules/WorkshopSignage/WorkshopEquipmentStatusChart'
  import EquipmentLayout from './modules/WorkshopSignage/EquipmentLayout'

  message.config({
    maxCount: 3
  })

  export default {
    components: {
@@ -93,13 +83,13 @@
      ClassUtilizationRateChart,
      UtilizationRateChart,
      OpenRateChart,
      EquipmentDetailModal
    },
    data() {
      return {
        currentDateTime: '',
        efficiencyData: {},
        timingAcquisition: null, // 定时刷新是否开启
        shortTimingAcquisition: null, // 高频刷新
        longTimingAcquisition: null, // 低频刷新
        dateTimer: null,//定时获取当前时间
        deviceStatusList: [
          {
@@ -121,52 +111,29 @@
        ]// 设备状态指示灯列表，
      }
    },
    created() {
      this.getEfficiencyDataByApi()
    mounted() {
      // 禁止用户选中内容
      document.onselectstart = () => false
      this.shortIntervalRefreshData()
      this.longIntervalRefreshData()
      this.dateTimer = setInterval(() => this.$nextTick(() => this.getCurrentDateTime()), 1000)
    },
    beforeDestroy() {
      // 确保销毁定时器、事件及回收资源
      clearInterval(this.shortTimingAcquisition)
      clearInterval(this.dateTimer)
      this.shortTimingAcquisition = null
      this.dateTimer = null
    },
    methods: {
      getEfficiencyDataByApi() {
        const that = this
        signageApi.getEfficiencyDataApi()
          .then(res => {
            console.log('res----------------', res)
            if (res.success) that.efficiencyData = res.result
          })
      },

      /**
       * 通过车间Id调用接口获取车间详细信息
       * @param id 车间Id
       */
      getWorkshopDetailsByApi(id) {
        api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
          this.workshopDetails = res.result
          this.imgSrc = this.getImgView(this.workshopDetails.backgroundImage)
          this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px'
        })
      },

      /**
       * 图片预览
       * @param text 图片地址
       */
      getImgView(text) {
        if (text && text.indexOf(',') > 0) {
          text = text.substring(0, text.indexOf(','))
        }
        return getFileAccessHttpUrl(text)
      },

      openDetail(item) {
        if (!this.isSwitchChecked) {
          if (item.equipmentStatus == 0) {
            this.$message.warning('设备处于关机状态！')
            return false
          }
          this.$refs.EquipmentDetailModal.initData(item.equId)
          this.$refs.EquipmentDetailModal.timerModel(item.equId)
        }
      },

      // 获取当前时间
      getCurrentDateTime() {
@@ -184,21 +151,32 @@
        if (min < 10) min = '0' + min
        if (sec < 10) sec = '0' + sec
        this.currentDateTime = `${year}年${mon}月${day}日 ${hour}:${min}:${sec}`
      },

      /**
       * 高频刷新数据 目前设置为5s
       * @param intervalSecond 频率间隔时间（秒）
       */
      shortIntervalRefreshData(intervalSecond = 0) {
        this.shortTimingAcquisition = window.setTimeout(() => {
          this.$refs.equipmentLayoutRef.getEquipmentStatusByApi()
          this.$refs.alarmInfoRef.getWorkshopAlarmInfoByApi()
          this.$refs.equipmentStatusChartRef.getWorkshopEquipmentStatusByApi()
          this.shortIntervalRefreshData(5)
        }, intervalSecond * 1000)
      },

      /**
       * 低频刷新数据 目前设置为1h
       * @param intervalSecond 频率间隔时间（秒）
       */
      longIntervalRefreshData(intervalSecond = 0) {
        this.longTimingAcquisition = window.setTimeout(() => {
          this.getEfficiencyDataByApi()
          this.$refs.rateRankRef.getUtilizationRateRankByApi()
          this.longIntervalRefreshData(60 * 60)
        }, intervalSecond * 1000)
      }
    },

    mounted() {
      // 禁止用户选中内容
      document.onselectstart = () => false

      this.dateTimer = setInterval(() => this.$nextTick(() => this.getCurrentDateTime()), 1000)
    },
    beforeDestroy() {
      // 确保销毁定时器、事件及回收资源
      clearInterval(this.timingAcquisition)
      clearInterval(this.dateTimer)
      this.timingAcquisition = null
      this.dateTimer = null
    }
  }
</script>

 src/views/mdc/base/modules/WorkshopSignage/ClassUtilizationRateChart.vue

@@ -1,7 +1,5 @@
<template>
  <div id="class-utilizationRate">

  </div>
  <div id="class-utilizationRate"></div>
</template>

<script>
@@ -12,8 +10,8 @@
    components: {},
    props: {
      dataSource: {
        type: Array,
      },
        type: Array
      }
    },
    watch: {
      dataSource: {
@@ -35,7 +33,8 @@
        this.chartContainer = this.$echarts.init(document.getElementById('class-utilizationRate'))
        const option = {
          tooltip: {
            fontSize: this.fontSize(0.12)
            trigger: 'axis',
            fontSize: this.fontSize(0.16)
          },
          xAxis: [
            {
@@ -55,7 +54,6 @@
              axisLine: {
                lineStyle: {
                  color: '#eee'
                  // width:fontSize(0.02)
                }
              }
            }
@@ -63,7 +61,6 @@
          yAxis: [
            {
              type: 'value',
              // name:'上周开机率',
              axisTick: {
                show: true
              },
@@ -102,7 +99,6 @@
          legend: {
            pageTextStyle: {
              color: '#eee',
              // fontSize:'100%'
              fontSize: this.fontSize(0.12)
            },
            top: '2%',
@@ -133,60 +129,22 @@
                }
              },
              symbolSize: this.fontSize(0.16),
              // data: [38, 30, 44, 65, 23, 42],
              data: this.dataSource,
              itemStyle: {
                normal: {
                  // barBorderRadius:[20,20,0,0],
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#96ceff'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#96ceff'
                },
                  {
                    offset: 0.6,
                    color: '#67c2ff'
                  },
                    {
                      offset: 0.6,
                      color: '#67c2ff'
                    },
                    {
                      offset: 1,
                      color: '#1195ff'
                    }], false)
                }
                  {
                    offset: 1,
                    color: '#1195ff'
                  }], false)
              }
            }
            // {
            //   name: '产业园厂区',
            //   type: 'bar',
            //   axisLabel: {
            //     show: true,
            //     interval: 'auto',
            //     formatter: '{value}%',
            //     textStyle: {
            //       color: '#eee',
            //       fontSize: this.fontSize(0.16),
            //       fontWeight: 'bold'
            //     }
            //   },
            //   symbolSize: this.fontSize(0.16),
            //   // data: [52, 44, 65, 59, 43, 21],
            //   data: this.dataSource,
            //   itemStyle: {
            //     normal: {
            //       // barBorderRadius:[20,20,0,0],
            //       color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            //         offset: 0,
            //         color: '#ffe9cc'
            //       },
            //         {
            //           offset: 0.6,
            //           color: '#ffd46b'
            //         },
            //         {
            //           offset: 1,
            //           color: '#ffb530'
            //         }], false)
            //     }
            //   }
            // }
          ]
        }
        this.chartContainer.setOption(option, true)

 src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue

@@ -150,9 +150,6 @@
        ]
      }
    },
    created() {
      this.getEquipmentStatusByApi()
    },
    methods: {
      //调用接口获取设备状态列表
      getEquipmentStatusByApi() {

 src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue

@@ -1,6 +1,5 @@
<template>
  <div id="openRate">
  </div>
  <div id="openRate"></div>
</template>

<script>
@@ -34,7 +33,8 @@
        this.chartContainer = this.$echarts.init(document.getElementById('openRate'))
        const option = {
          tooltip: {
            fontSize: this.fontSize(0.12)
            trigger: 'axis',
            fontSize: this.fontSize(0.16)
          },
          xAxis: [
            {
@@ -61,7 +61,6 @@
          yAxis: [
            {
              type: 'value',
              // name:'上周开机率',
              axisTick: {
                show: true
              },

 src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue

@@ -1,18 +1,15 @@
<template>
  <div id="utilizationRate">

  </div>
  <div id="utilizationRate"></div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'UtilizationRateChart',
    components: {},
    props: {
      dataSource: {
        type: Array,
        type: Array
      }
    },
    watch: {
@@ -80,7 +77,6 @@
                color: '#eee'
              }
            }

          },
          yAxis:
            [

 src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue

@@ -15,7 +15,6 @@
      }
    },
    mounted() {
      this.getUtilizationRateRankByApi()
      window.addEventListener('resize', this.handleWindowSizeChange)
    },
    methods: {
@@ -68,7 +67,7 @@
          }
        ]
        const defaultData = []
        const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
        const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0
        let yAxisMax
        if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
        else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
@@ -118,98 +117,102 @@
              show: false
            }
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            triggerEvent: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '14',
                fontWeight: 'bolder'
              },
              formatter: function(value) {
                return `${data.find(item => item.name === value).name}`
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: data.map(item => item.name)
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: '14'
              },
              formatter: function(value) {
                return `${value}%`
              }
            },
            data: data
          }],
          series: [{
            name: '利用率',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              barBorderRadius: 100,
              color: function(params) {
                let num = colorArray.length
                return {
                  type: 'linear',
                  colorStops: [{
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }]
          yAxis: [
            {
              type: 'category',
              inverse: true,
              triggerEvent: true,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: '14',
                  fontWeight: 'bolder'
                },
                formatter: function(value) {
                  return `${data.find(item => item.name === value).name}`
                }
              }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: data.map(item => item.name)
            },
            barWidth: 12,
            data: data
          },
            {
              type: 'category',
              inverse: true,
              axisTick: 'none',
              axisLine: 'none',
              show: true,
              axisLabel: {
                textStyle: {
                  color: '#ffffff',
                  fontSize: '14'
                },
                formatter: function(value) {
                  return `${value}%`
                }
              },
              data: data
            }
          ],
          series: [
            {
              name: '利用率',
              type: 'bar',
              zlevel: 1,
              itemStyle: {
                borderRadius: 100,
                color: function(params) {
                  let num = colorArray.length
                  return {
                    type: 'linear',
                    colorStops: [{
                      offset: 0,
                      color: colorArray[params.dataIndex % num].bottom
                    }, {
                      offset: 1,
                      color: colorArray[params.dataIndex % num].top
                    }, {
                      offset: 0,
                      color: colorArray[params.dataIndex % num].bottom
                    }, {
                      offset: 1,
                      color: colorArray[params.dataIndex % num].top
                    }, {
                      offset: 0,
                      color: colorArray[params.dataIndex % num].bottom
                    }, {
                      offset: 1,
                      color: colorArray[params.dataIndex % num].top
                    }, {
                      offset: 0,
                      color: colorArray[params.dataIndex % num].bottom
                    }, {
                      offset: 1,
                      color: colorArray[params.dataIndex % num].top
                    }, {
                      offset: 0,
                      color: colorArray[params.dataIndex % num].bottom
                    }, {
                      offset: 1,
                      color: colorArray[params.dataIndex % num].top
                    }, {
                      offset: 0,
                      color: colorArray[params.dataIndex % num].bottom
                    }]
                  }
                }
              },
              barWidth: 12,
              data: data
            },
            {
              name: '背景',
              type: 'bar',
@@ -218,7 +221,7 @@
              data: defaultData,
              itemStyle: {
                color: '#11294d',
                barBorderRadius: 100
                borderRadius: 100
              }
            }
          ]
@@ -240,8 +243,4 @@
      }
    }
  }
</script>

<style scoped lang="less">

</style>
</script>

 src/views/mdc/base/modules/WorkshopSignage/WorkshopAlarmInfoTable.vue

@@ -16,9 +16,6 @@
        dataSource: []
      }
    },
    mounted() {
      this.getWorkshopAlarmInfoByApi()
    },
    methods: {
      getWorkshopAlarmInfoByApi() {
        const that = this

 src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue

@@ -28,7 +28,6 @@
      }
    },
    mounted() {
      this.getWorkshopEquipmentStatusByApi()
      window.addEventListener('resize', this.handleWindowSizeChange)
    },
    methods: {