loulijun2021
2022-10-13 ecaf70a4e7d72ecc1c18302fef31b3baab8e6513
src/views/kb/ckgl.vue
@@ -327,6 +327,8 @@
  },
  data() {
    return {
      onLine: navigator.onLine, // 监听网络是否在线
      headTime: '',
      tableDataTop: [],
      tableDataBottom: [],
@@ -335,21 +337,67 @@
      number2: '',
      MarqueeTipsContent: '', // 公告
      speed: 100// 公告播放的速度
      speed: 100, // 公告播放的速度
      tableTopTask: null,
      tableBottomTask: null,
      echartsRightTop: null,
      echartsRightBottom: null
    }
  },
  created() {
    setInterval(this.getNowTime, 1000)
    // 两小时看板刷新一次
    setInterval(() => {
      window.location.reload()
    }, 1000 * 60 * 120)
  },
  mounted() {
    this.getWareHouseTopLeftData()
    this.getWareHouseTopBottomData()
    this.getEcharts()
    this.getMarqueeTipsContent()
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  },
  methods: {
    // 更新网络状态
    updateOnlineStatus(e) {
      if (e.isFirst) {
        this.getWareHouseTopLeftData()
        this.getWareHouseTopBottomData()
        this.getEcharts()
        // this.getMarqueeTipsContent()
      } else {
        const loading = this.$loading({
          lock: true,
          text: '断网了,正在拼命联网中,请检查网络是否正常...',
          spinner: 'el-icon-loading',
          customClass: 'osloading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const { type } = e
        this.onLine = type === 'online'
        if (this.onLine) {
          this.getWareHouseTopLeftData()
          this.getWareHouseTopBottomData()
          this.getEcharts()
          loading.close()
          this.$message.success('网络连接成功!')
        } else {
          clearInterval(this.tableTopTask)
          clearInterval(this.tableBottomTask)
          clearInterval(this.echartsRightTop)
          clearInterval(this.echartsRightBottom)
          this.$message.error('网络掉线,请关注网络状态!')
        }
      }
    },
    // 获取公告
    getMarqueeTipsContent() {
      // this.MarqueeTipsContent = '各位员工们:根据上级的通知,结合我企实际情况,现将20xx年的元旦放假通知如下:一、1月1日至1月3日放假调休,共3天。1月4日正式上班。二、节假日期间,各班组要严格落实上级的重要指示精神,按照上级的具体要求,认真抓好落实节日期间值班备勤工作,确保节日期间企业各项工作正常运转。xx企业20xx年12月28日'
@@ -364,7 +412,7 @@
        this.number1 = this.tableDataTop.length
        const divData = this.$refs.tableDataTopRef.bodyWrapper
        // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
        const task = setInterval(() => {
        this.tableTopTask = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // divData.scrollTop += divData.scrollHeight / this.tableData.length
@@ -376,7 +424,7 @@
              this.tableDataTop = res.data
              this.number1 = this.tableDataTop.length
              if (this.tableDataTop.length > 9) {
                clearInterval(task)
                clearInterval(this.tableTopTask)
                this.getWareHouseTopLeftData()
              }
            })
@@ -391,7 +439,8 @@
        this.number2 = this.tableDataBottom.length
        const divData = this.$refs.tableDataBottomRef.bodyWrapper
        // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
        const task = setInterval(() => {
        // const task = setInterval(() => {
        this.tableBottomTask = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // divData.scrollTop += divData.scrollHeight / this.tableData.length
@@ -403,7 +452,7 @@
              this.tableDataBottom = res.data
              this.number2 = this.tableDataBottom.length
              if (this.tableDataBottom.length > 10) {
                clearInterval(task)
                clearInterval(this.tableBottomTask)
                this.getWareHouseTopBottomData()
              }
            })
@@ -422,13 +471,13 @@
        loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
      })
      setInterval(() => {
      this.echartsRightTop = setInterval(() => {
        WareHouseRightTopData().then(res => {
          loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
        })
      }, 1000 * 15)
      setInterval(() => {
      this.echartsRightBottom = setInterval(() => {
        WareHouseRightBottomData().then(res => {
          loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
        })