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="alarm_time" label="时间" align="center" min-width="70" />
      <el-table-column prop="area_name" label="库房" align="center" min-width="35" />
      <el-table-column prop="event_name" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
    </el-table>
  </div>
</template>
<script>
import alarmApi from '@/api/home/alarm'
export default {
  name: 'WarehouseWarning',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    storeroomId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [], // 正在展示的警情数据
      // receivedData: [], // 接收到的最新警情数据
      // displayNum: 0,
      // lockReconnect: false, // 避免重复连接
      // heartCheck: {
      //   timeout: 3000,
      //   timeoutobj: null,
      //   // serverTimeoutObj: null,
      //   start: () => {
      //     // const that = this
      //     clearTimeout(this.timeoutObj)
      //     // clearTimeout(this.serverTimeoutObj)
      //     this.timeoutobj = setTimeout(() => {
      //       // 这里发送一个心跳，后端收到后，返回一个心跳，这里用的ping-pong
      //       this.socket.send('ping')
      //       // that.serverTimeoutObj = setTimeout(() => {
      //       //   this.socket.close()
      //       // }, that.timeout)
      //     }, this.timeout)
      //   }
      // }
      socket: null
    }
  },
  watch: {
    // 如果 `tableData` 发生改变，这个函数就会运行
    tableData: function(newData, oldData) {
      this.tableRefScroll()
    }
  },
  created() {
    // securitydoor().then((data) => {
    //   this.tableData.push(...data)
    // })
    // this.openSocket()
    console.log(111111)
    alarmApi.info({ storeroomId: this.storeroomId }).then((data) => {
      if (data && data.length > 0) {
        this.tableData.push(...data)
      }
    })
  },
  destroyed() {
    clearInterval(this.timer)
    if (this.socket) {
      this.socket.close()
    }
  },
  methods: {
    // 表格隔行变色
    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.displayNum = Math.floor(wrapperHeight / 40)
      if (this.tableData.length > this.displayNum) {
        const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
        this.addTableRefScroll(bodyWrapper)
        // 鼠标移入
        bodyWrapper.onmouseover = () => {
          clearInterval(this.timer)
        }
        // 鼠标移出
        bodyWrapper.onmouseout = () => {
          this.addTableRefScroll(bodyWrapper)
        }
      }
    },
    addTableRefScroll(bodyWrapper) {
      // let scrollTop = bodyWrapper.scrollTop
      if (this.displayNum && this.displayNum > 0) {
        this.timer = setInterval(() => {
          // scrollTop = bodyWrapper.scrollTop
          if (Math.round(bodyWrapper.scrollTop / 40) >= this.tableData.length - this.displayNum) {
            bodyWrapper.scrollTop = 0
          } else {
            bodyWrapper.scrollTop += this.displayNum * 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.displayNum)
      }
    }
    // ,
    // openSocket() {
    //   if (!('WebSocket' in window)) {
    //     console.log('您的浏览器不支持WebSocket')
    //   } else {
    //     console.log('您的浏览器支持WebSocket')
    //     const socketUrl = process.env.VUE_APP_WS_API + '/webSocket'
    //     if (this.socket != null) {
    //       this.socket.close()
    //       this.socket = null
    //     }
    //     this.socket = new WebSocket(socketUrl)
    //     // 打开事件
    //     this.socket.onopen = () => {
    //       console.log('websocket已经打开')
    //       // 心跳检测重置
    //       // this.heartCheck.start()
    //     }
    //     // 获得消息
    //     this.socket.onmessage = (msg) => {
    //       console.log(msg)
    //       this.tableData.splice(0, this.tableData.length, ...JSON.parse(msg.data.slice(7, msg.data.length - 2)).Data)
    //       // 对返回数据进行处理
    //       // this.heartCheck.start()
    //     }
    //     // 关闭事件
    //     this.socket.onclose = function() {
    //       console.log('websocket已关闭')
    //     }
    //     // 发生了错误事件
    //     this.socket.onerror = function(e) {
    //       console.log('websocket发生了错误')
    //       console.log(e)
    //     }
    //   }
    // }
  }
}
</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>