阅行客电子档案
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

136 lines
4.0 KiB

2 years ago
  1. <template>
  2. <div class="warehouse-right container-wrap">
  3. <span class="right-top-line" />
  4. <span class="left-bottom-line" />
  5. <h3 class=" table-title">
  6. <p class="title-arrow">
  7. <svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
  8. </p>
  9. </h3>
  10. <!--表格渲染-->
  11. <el-table ref="table" style="min-width: 100%;" :width="width" :height="height" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
  12. <el-table-column prop="alarm_time" label="时间" align="center" min-width="60" />
  13. <el-table-column prop="area_name" label="库房" align="center" :show-overflow-tooltip="true" min-width="30" />
  14. <el-table-column prop="event_name" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
  15. </el-table>
  16. </div>
  17. </template>
  18. <script>
  19. import alarmApi from '@/api/home/alarm'
  20. export default {
  21. name: 'WarehouseWarning',
  22. props: {
  23. width: {
  24. type: String,
  25. default: '100%'
  26. },
  27. height: {
  28. type: String,
  29. default: '100%'
  30. },
  31. storeroomId: {
  32. type: String,
  33. default: ''
  34. }
  35. },
  36. data() {
  37. return {
  38. tableData: [], // 正在展示的警情数据
  39. scrollTimer: null
  40. }
  41. },
  42. watch: {
  43. // 如果 `tableData` 发生改变,这个函数就会运行
  44. tableData: function(newData, oldData) {
  45. this.tableRefScroll()
  46. }
  47. },
  48. created() {
  49. this.getAlarmInfo()
  50. },
  51. destroyed() {
  52. clearInterval(this.scrollTimer)
  53. this.scrollTimer = null
  54. },
  55. methods: {
  56. // 表格隔行变色
  57. rowBgColor({ row, rowIndex }) {
  58. if (rowIndex % 2 === 1) {
  59. return 'light-blue'
  60. } else {
  61. return ''
  62. }
  63. },
  64. // table滚动
  65. tableRefScroll() {
  66. clearInterval(this.scrollTimer) // 清除定时器
  67. const table = this.$refs.table // 获取DOM元素
  68. this.wrapperHeight = table.$el.offsetHeight - 30
  69. // 组件一页能完整展示的数据条数
  70. this.displayNum = Math.floor(this.wrapperHeight / 40)
  71. if (this.tableData.length > this.displayNum) {
  72. const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
  73. this.addTableRefScroll(bodyWrapper)
  74. // 鼠标移入
  75. bodyWrapper.onmouseover = () => {
  76. clearInterval(this.scrollTimer)
  77. }
  78. // 鼠标移出
  79. bodyWrapper.onmouseout = () => {
  80. this.addTableRefScroll(bodyWrapper)
  81. }
  82. } else {
  83. this.scrollTimer = setInterval(() => {
  84. this.getAlarmInfo()
  85. }, 1000 * 3 * this.tableData.length)
  86. }
  87. },
  88. addTableRefScroll(bodyWrapper) {
  89. // let scrollTop = bodyWrapper.scrollTop
  90. if (this.displayNum && this.displayNum > 0) {
  91. this.scrollTimer = setInterval(() => {
  92. // scrollTop = bodyWrapper.scrollTop
  93. if (bodyWrapper.scrollTop + this.wrapperHeight >= this.tableData.length * 40) {
  94. bodyWrapper.scrollTop = 0
  95. this.getAlarmInfo()
  96. } else {
  97. bodyWrapper.scrollTop += this.displayNum * 40
  98. }
  99. // if (scrollTop === bodyWrapper.scrollTop) {
  100. // if (this.isScroll) {
  101. // scrollTop = 0
  102. // bodyWrapper.scrollTop = 0
  103. // } else {
  104. // if (this.flag === 1) {
  105. // this.currentPage++
  106. // this.handleSearch() // 函数中需要清楚定时器
  107. // }
  108. // }
  109. // }
  110. }, 1000 * 3 * this.displayNum)
  111. }
  112. },
  113. getAlarmInfo() {
  114. alarmApi.info({ storeroomId: this.storeroomId }).then((data) => {
  115. if (data && data.length > 0) {
  116. this.tableData.splice(0, data.length, ...data)
  117. }
  118. })
  119. }
  120. }
  121. }
  122. </script>
  123. <style lang="scss" scoped>
  124. .warehouse-left {
  125. position: relative;
  126. h2 {
  127. position: absolute;
  128. left: 50%;
  129. top: 0;
  130. transform: translateX(-50%);
  131. color: #fff;
  132. font-size: 16px;
  133. }
  134. }
  135. </style>