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.
|
|
<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="60" /> <el-table-column prop="area_name" label="库房" align="center" :show-overflow-tooltip="true" min-width="30" /> <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: [], // 正在展示的警情数据
scrollTimer: null } }, watch: { // 如果 `tableData` 发生改变,这个函数就会运行
tableData: function(newData, oldData) { this.tableRefScroll() } }, created() { this.getAlarmInfo() }, destroyed() { clearInterval(this.scrollTimer) this.scrollTimer = null }, methods: { // 表格隔行变色
rowBgColor({ row, rowIndex }) { if (rowIndex % 2 === 1) { return 'light-blue' } else { return '' } }, // table滚动
tableRefScroll() { clearInterval(this.scrollTimer) // 清除定时器
const table = this.$refs.table // 获取DOM元素
this.wrapperHeight = table.$el.offsetHeight - 30 // 组件一页能完整展示的数据条数
this.displayNum = Math.floor(this.wrapperHeight / 40) if (this.tableData.length > this.displayNum) { const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
this.addTableRefScroll(bodyWrapper) // 鼠标移入
bodyWrapper.onmouseover = () => { clearInterval(this.scrollTimer) } // 鼠标移出
bodyWrapper.onmouseout = () => { this.addTableRefScroll(bodyWrapper) } } else { this.scrollTimer = setInterval(() => { this.getAlarmInfo() }, 1000 * 3 * this.tableData.length) } }, addTableRefScroll(bodyWrapper) { // let scrollTop = bodyWrapper.scrollTop
if (this.displayNum && this.displayNum > 0) { this.scrollTimer = setInterval(() => { // scrollTop = bodyWrapper.scrollTop
if (bodyWrapper.scrollTop + this.wrapperHeight >= this.tableData.length * 40) { bodyWrapper.scrollTop = 0 this.getAlarmInfo() } 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) } }, getAlarmInfo() { alarmApi.info({ storeroomId: this.storeroomId }).then((data) => { if (data && data.length > 0) { this.tableData.splice(0, data.length, ...data) } }) } } } </script> <style lang="scss" scoped> .warehouse-left { position: relative; h2 { position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: #fff; font-size: 16px; } } </style>
|