1 changed files with 136 additions and 136 deletions
@ -1,136 +1,136 @@ |
|||||
<template> |
|
||||
<div class="container-wrap"> |
|
||||
<span class="right-top-line" /> |
|
||||
<span class="left-bottom-line" /> |
|
||||
<h3 class="table-title"> |
|
||||
<p class="title-arrow"> |
|
||||
<svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录 |
|
||||
</p> |
|
||||
</h3> |
|
||||
<el-table ref="table" style="min-width: 100%;" :height="height" :data="tableData" class="warehose-el-table" stripe> |
|
||||
<el-table-column prop="createTime" label="时间" align="center" min-width="60"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div>{{ scope.row.createTime | parseTime }}</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="库房" align="center" min-width="30"> |
|
||||
<template> |
|
||||
档案库 |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="alarmMsg" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" /> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import { securitydoor } from '@/api/home/securityDoor/securityDoor' |
|
||||
export default { |
|
||||
name: 'SecurityDoor', |
|
||||
props: { |
|
||||
width: { |
|
||||
type: String, |
|
||||
default: '100%' |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
default: '100%' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
tableData: [], // 正在展示的数据 |
|
||||
scrollTimer: null, |
|
||||
getDataTimer: null |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
// 如果 `tableData` 发生改变，这个函数就会运行 |
|
||||
tableData: function(newData, oldData) { |
|
||||
this.tableRefScroll() |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.getSecuritydoor() |
|
||||
}, |
|
||||
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.getSecuritydoor() |
|
||||
}, 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.getSecuritydoor() |
|
||||
} else { |
|
||||
bodyWrapper.scrollTop += this.displayNum * 40 |
|
||||
} |
|
||||
}, 1000 * 3 * this.displayNum) |
|
||||
} |
|
||||
}, |
|
||||
getSecuritydoor() { |
|
||||
securitydoor({ page: 1, size: 30 }).then((data) => { |
|
||||
if (data.content && data.content.length > 0) { |
|
||||
this.tableData.splice(0, data.content.length, ...data.content) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</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; |
|
||||
} |
|
||||
} |
|
||||
::v-deep |
|
||||
.el-table--striped |
|
||||
.el-table__body |
|
||||
tr.el-table__row--striped |
|
||||
td.el-table__cell { |
|
||||
background: #02255f; |
|
||||
} |
|
||||
</style> |
|
||||
|
<template> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="table-title"> |
||||
|
<p class="title-arrow"> |
||||
|
<svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录 |
||||
|
</p> |
||||
|
</h3> |
||||
|
<el-table ref="table" style="min-width: 100%;" :height="height" :data="tableData" class="warehose-el-table" stripe> |
||||
|
<el-table-column prop="createTime" label="时间" align="center" min-width="60"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="库房" align="center" min-width="30"> |
||||
|
<template> |
||||
|
档案库 |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="alarmMsg" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { securitydoor } from '@/api/home/securityDoor/securityDoor' |
||||
|
export default { |
||||
|
name: 'SecurityDoor', |
||||
|
props: { |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [], // 正在展示的数据 |
||||
|
scrollTimer: null, |
||||
|
getDataTimer: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
// 如果 `tableData` 发生改变，这个函数就会运行 |
||||
|
tableData: function(newData, oldData) { |
||||
|
this.tableRefScroll() |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getSecuritydoor() |
||||
|
}, |
||||
|
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.getSecuritydoor() |
||||
|
}, 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.getSecuritydoor() |
||||
|
} else { |
||||
|
bodyWrapper.scrollTop += this.displayNum * 40 |
||||
|
} |
||||
|
}, 1000 * 3 * this.displayNum) |
||||
|
} |
||||
|
}, |
||||
|
getSecuritydoor() { |
||||
|
securitydoor({ page: 0, size: 30 }).then((data) => { |
||||
|
if (data.content && data.content.length > 0) { |
||||
|
this.tableData.splice(0, data.content.length, ...data.content) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</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; |
||||
|
} |
||||
|
} |
||||
|
::v-deep |
||||
|
.el-table--striped |
||||
|
.el-table__body |
||||
|
tr.el-table__row--striped |
||||
|
td.el-table__cell { |
||||
|
background: #02255f; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue