yxk-storeroom-system/src/views/components/WarehouseWarning.vue

<template>
  <div class="warehouse-right container-wrap">
    <span class="right-top-line" />
    <span class="left-bottom-line" />
    <h3 class=" table-title">
      <p class="title-arrow">
        <svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
      </p>
    </h3>
    <!--表格渲染-->
    <el-table ref="table" style="min-width: 100%;" :width="width" :height="height" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
      <el-table-column prop="time" label="时间" align="center" min-width="60" />
      <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
      <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
    </el-table>
  </div>
</template>
<script>
import data1 from './data1.json'
export default {
  name: 'WarehouseWarning',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      tableData: [],
      timeout: 1000
    }
  },
  created() {
    this.initWebSocket()
  },
  mounted() {
    this.getData()
    console.log(11333)
    this.$nextTick(() => {
      this.tableRefScroll()
    })
    // this.$nextTick(() => {
    //   this.scroll = new Bscroll('.warehose-el-table .el-table__body-wrapper', {
    //     scrollY: true
    //     ,startY: 10
    //   })
    //   this.scroll.on('scrollEnd', () => {
    //     // let pageIndex = this.scroll.getCurrentPage().pageX;
    //     // this.currentPageIndex = pageIndex;
    //     // if(vm.autoPlay) {
    //     //     vm.play();
    //     // }
    //     console.log('scrollEnd')
    //   })
    // })
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      this.tableData = data1.rows
    },
    // 表格隔行变色
    rowBgColor({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light-blue'
      } else {
        return ''
      }
    },
    // table滚动
    tableRefScroll() {
      clearInterval(this.timer) // 清除定时器
      const table = this.$refs.table // 获取DOM元素
      const wrapperHeight = table.$el.offsetHeight - 30
      this.scollNum = Math.floor(wrapperHeight / 40)
      const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
      this.addTableRefScroll(bodyWrapper)
      // 鼠标移入
      bodyWrapper.onmouseover = () => {
        clearInterval(this.timer)
      }
      // 鼠标移出
      bodyWrapper.onmouseout = () => {
        this.addTableRefScroll(bodyWrapper)
      }
    },
    addTableRefScroll(bodyWrapper) {
      let scrollTop = bodyWrapper.scrollTop
      this.timer = setInterval(() => {
        scrollTop = bodyWrapper.scrollTop
        bodyWrapper.scrollTop += this.scollNum * 40
        if (scrollTop === bodyWrapper.scrollTop) {
          if (this.isScroll) {
            scrollTop = 0
            bodyWrapper.scrollTop = 0
          } else {
            if (this.flag === 1) {
              this.currentPage++
              this.handleSearch() // 函数中需要清楚定时器
            }
          }
        }
      }, 1000 * 3 * this.scollNum)
    },
    initWebSocket() {
      const wsUri = process.env.VUE_APP_WS_API + '/webSocket'
      this.websock = new WebSocket(wsUri)
      this.websock.onerror = this.webSocketOnError
      this.websock.onmessage = this.webSocketOnMessage
    },
    webSocketOnError(e) {
      this.$notify({
        title: 'WebSocket连接发生错误',
        type: 'error',
        duration: 0
      })
    },
    webSocketOnMessage(e) {
      const data = JSON.parse(e.data)
      console.log(data)
      if (data.msgType === 'INFO') {
        this.$notify({
          title: '',
          message: data.msg,
          type: 'success',
          dangerouslyUseHTMLString: true,
          duration: 5500
        })
      } else if (data.msgType === 'ERROR') {
        this.$notify({
          title: '',
          message: data.msg,
          dangerouslyUseHTMLString: true,
          type: 'error',
          duration: 0
        })
      }
    },
    webSocketSend(agentData) {
      this.websock.send(agentData)
    }
    // initWebSocket() {
    //   // if (WebSocket in window) {
    //   // 初始化weosocket
    //   const wsUri = process.env.VUE_APP_WS_API + '/webSocket'
    //   this.websocket = null
    //   this.websocket = new WebSocket(wsUri)
    //   this.websocket.onopen = this.websocketonopen
    //   this.websocket.onerror = this.websocketonerror
    //   this.websocket.onmessage = this.websocketonmessage
    //   this.websocket.onclose = this.websocketclose
    //   // } else {
    //   //   // 浏览器不支持 WebSocket
    //   //   console.log('您的浏览器不支持 WebSocket!')
    //   // }
    // },
    // websocketonopen() {
    //   this.start()
    // },
    // start() {
    //   // 开启心跳
    //   const that = this
    //   that.timeoutObj && clearTimeout(that.timeoutObj)
    //   that.timeoutObj = setTimeout(function() {
    //     // 这里发送一个心跳，后端收到后，返回一个心跳消息，
    //     if (that.websocket && that.websocket.readyState === 1) {
    //       // 如果连接正常
    //       console.log('WebSocket连接成功')
    //       that.websocket.send('----timingHeart---')
    //     } else { // 否则重连
    //       that.reconnect()
    //     }
    //   }, that.timeout)
    // },
    // reconnect() { // 重新连接
    //   console.log('重新连接')
    //   const that = this
    //   if (that.websocket && that.websocket.readyState === 1) {
    //     clearInterval(that.timeoutnum)
    //     that.timeoutnum = null
    //     that.timeNum = 0
    //     return
    //   }
    //   if (!that.timeoutnum) {
    //     that.timeoutnum = setInterval(function() {
    //       if (that.websocket && that.websocket.readyState === 1) {
    //         clearInterval(that.timeoutnum)
    //         that.timeoutnum = null
    //         that.timeNum = 0
    //         return
    //       }
    //       // 新连接
    //       that.initWebSocket()
    //       that.timeNum++
    //       if (that.timeNum >= 3) {
    //         clearInterval(that.timeoutnum)
    //         that.timeoutnum = null
    //         that.timeNum = 0
    //       }
    //     }, 1000)
    //   }
    // },
    // websocketonerror(e) {
    //   // 错误
    //   // this.initWebSocket()
    //   console.log('WebSocket连接发生错误')
    // },
    // websocketonmessage(e) {
    //   // 数据接收
    //   var data = JSON.parse(e.data)
    //   // this.$store.commit('SET_ws', data)
    //   console.log('接收数据', data)
    //   // 操作处理...
    // },
    // websocketclose(e) {
    //   // 关闭
    //   this.websocket && this.websocket.close && this.websocket.close()
    // }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/lend-manage.scss";
.warehouse-left {
  position: relative;
  h2 {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
  }
}
</style>