xuhuajiao
2 years ago
10 changed files with 352 additions and 27 deletions
-
10src/api/home/accessDoor/accessDoor.js
-
136src/views/components/AccessDoor.vue
-
15src/views/components/SecurityDoor.vue
-
6src/views/storeManage/warehouse3D/archivesStorage/index.vue
-
2src/views/storeManage/warehouse3D/destroyedFileRoom/index.vue
-
5src/views/storeManage/warehouse3D/index.vue
-
2src/views/storeManage/warehouse3D/infoRoom/index.vue
-
158src/views/system/logManage/accessDoorLog/index.vue
-
35src/views/system/logManage/doorLog/index.vue
-
10src/views/system/logManage/index.vue
@ -0,0 +1,10 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
export function accessDoor(params) { |
||||
|
return request({ |
||||
|
url: 'api/securitydoor/initSecurityDoorLog', |
||||
|
method: 'get', |
||||
|
params |
||||
|
}) |
||||
|
} |
||||
|
export default { accessDoor } |
@ -0,0 +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" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="位置" align="center" width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.deviceName }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="alarmMsg" label="警情" align="center" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { accessDoor } from '@/api/home/accessDoor/accessDoor' |
||||
|
export default { |
||||
|
name: 'AccessDoor', |
||||
|
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.getAccessdoor() |
||||
|
}, |
||||
|
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.getAccessdoor() |
||||
|
}, 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.getAccessdoor() |
||||
|
} else { |
||||
|
bodyWrapper.scrollTop += this.displayNum * 40 |
||||
|
} |
||||
|
}, 1000 * 3 * this.displayNum) |
||||
|
} |
||||
|
}, |
||||
|
getAccessdoor() { |
||||
|
accessDoor({ 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> |
@ -0,0 +1,158 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="head-container"> |
||||
|
<!-- <crudOperation /> --> |
||||
|
<!-- <el-button v-permission="permission.download" :loading="crud.downloadLoading" :disabled="!selections.length" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button> --> |
||||
|
<el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button> |
||||
|
<el-input |
||||
|
v-model="keyWord" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入关键词" |
||||
|
style="width: 300px;margin-right:10px;padding-left:10px" |
||||
|
class="input-prepend filter-item" |
||||
|
@keyup.enter.native="crud.toQuery" |
||||
|
> |
||||
|
<!-- <el-select slot="prepend" v-model="optionVal" style="width: 100px" @keyup.enter.native="crud.toQuery"> --> |
||||
|
<el-select slot="prepend" v-model="optionVal" style="width: 80px"> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-input> |
||||
|
<date-range-picker v-model="queryTime" class="date-item" /> |
||||
|
<rrOperation /> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="crud.data" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 356px)" |
||||
|
:cell-class-name="cell" |
||||
|
@row-click="clickRowHandler" |
||||
|
@selection-change="selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column type="index" label="序号" width="100" align="center" /> |
||||
|
<el-table-column prop="alarmLevel" label="状态" align="center" min-width="150"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.alarmLevel===0" class="clear" style="width:56px">异常</span> |
||||
|
<span v-if="scope.row.alarmLevel===1" class="clear" style="width:56px">正常</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="roomName" label="库房" align="center" min-width="150" /> |
||||
|
<el-table-column prop="deviceName" label="设备名称" align="center" min-width="180" /> |
||||
|
<el-table-column prop="maintitle" label="档案信息" align="center" min-width="180" /> |
||||
|
<el-table-column prop="archiveNo" label="档号" align="center" min-width="180" /> |
||||
|
<el-table-column prop="alarmMsg" label="警情描述" align="center" min-width="180" /> |
||||
|
<el-table-column prop="createTime" label="报警时间" align="center" min-width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="alarmEvent" label="事件" min-width="150" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.alarmEvent===0">出</span> |
||||
|
<span v-if="scope.row.alarmEvent===1">进</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="borrowerName" label="用户" align="center" min-width="150" /> --> |
||||
|
</el-table> |
||||
|
<pagination /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import CRUD, { presenter, crud } from '@crud/crud' |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import { parseTime, saveAs, getBlob } from '@/utils/index' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import qs from 'qs' |
||||
|
export default { |
||||
|
name: 'DoorLog', |
||||
|
components: { rrOperation, DateRangePicker, pagination }, |
||||
|
mixins: [presenter(), crud()], |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
url: 'api/securitydoor/initSecurityDoorLog', |
||||
|
optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
download: true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
selections: [], |
||||
|
keyWord: '', |
||||
|
optionVal: 'deviceName', |
||||
|
options: [ |
||||
|
{ value: 'deviceName', label: '设备' }, |
||||
|
{ value: 'roomName', label: '库房' } |
||||
|
], |
||||
|
queryTime: [] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.query.roomName = null |
||||
|
this.crud.query.deviceName = null |
||||
|
this.crud.query.startTime = null |
||||
|
this.crud.query.endTime = null |
||||
|
if (this.optionVal === 'deviceName') { |
||||
|
this.crud.query.deviceName = this.keyWord |
||||
|
} else if (this.optionVal === 'roomName') { |
||||
|
this.crud.query.roomName = this.keyWord |
||||
|
} |
||||
|
if (this.queryTime.length > 0) { |
||||
|
this.crud.query.startTime = this.queryTime[0] |
||||
|
this.crud.query.endTime = this.queryTime[1] |
||||
|
} |
||||
|
}, |
||||
|
// 导出 |
||||
|
handleDownload() { |
||||
|
this.crud.downloadLoading = true |
||||
|
const fileName = parseTime(new Date()) + '-门禁日志.xlsx' |
||||
|
getBlob(this.baseApi + '/api/securitydoor/exportSecurityDoorLogList' + '?' + qs.stringify(this.crud.query, { indices: false }), function(blob) { |
||||
|
saveAs(blob, fileName) |
||||
|
}) |
||||
|
this.crud.downloadLoading = false |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) // 单击选中 |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.selections = val |
||||
|
}, |
||||
|
// 查看监控 |
||||
|
handleListen() { |
||||
|
this.$refs.listenDom.dialogVisible = true |
||||
|
}, |
||||
|
cell({ row, columnIndex }) { |
||||
|
if (row.alarmLevel === 1 && columnIndex === 2) { |
||||
|
return 'have-clear' |
||||
|
} else if (row.alarmLevel === 0 && columnIndex === 2) { |
||||
|
return 'fail-clear' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '~@/assets/styles/lend-manage.scss'; |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
|
||||
|
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue