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

zhaowei

2 天以前 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>