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.
412 lines
9.4 KiB
412 lines
9.4 KiB
<template> |
|
<div> |
|
<div style="user-select: none; |
|
height: 40px; |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
padding: 0 10px; |
|
margin-bottom: 10px; |
|
-webkit-box-sizing: border-box; |
|
box-sizing: border-box; |
|
overflow: hidden; |
|
border-top: 1px solid #f6f6f6; |
|
background-color: #fff; |
|
-webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); |
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);"> |
|
<div style="height: 100%; |
|
border-bottom: 3px solid #409EFF; |
|
display: flex; |
|
align-items: center; |
|
padding: 0 10px; |
|
font-family: Arial,sans-serif; |
|
font-size: 15px; |
|
color: #409EFF;"> |
|
{{routeName == '' ? '门禁出入记录' : routeName}} |
|
</div> |
|
</div> |
|
<basic-container> |
|
<el-row> |
|
<el-col :span="24"> |
|
<avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" |
|
:permission="permissionList" @search-change="searchChange" @search-reset="searchReset" |
|
@current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" |
|
@on-load="onLoad" :page.sync="page"> |
|
<template slot-scope="scope" slot="areaSearch"> |
|
<el-select v-model="area" @change="areaSearch"> |
|
<el-option label="业务区" value="1"></el-option> |
|
<el-option label="塔台" value="2"></el-option> |
|
</el-select> |
|
</template> |
|
<!-- <template slot-scope="scope" slot="buildSearch"> |
|
<el-select v-model="build"> |
|
<el-option :key="'build' + index" v-for="(item, index) in buildings" :label="item.name" |
|
:value="item.id"></el-option> |
|
</el-select> |
|
</template> |
|
<template slot-scope="scope" slot="floorSearch"> |
|
<el-select :disabled="area == 2" v-model="floor"> |
|
<el-option :key="'floor' + index" v-for="(item, index) in floors" :label="item.name" |
|
:value="item.id"></el-option> |
|
</el-select> |
|
</template> --> |
|
<template slot-scope="scope" slot="equipNameSearch"> |
|
<el-input v-model="equipName" placeholder="设备名称" clearable /> |
|
</template> |
|
<template slot-scope="scope" slot="cardNameSearch"> |
|
<el-input v-model="cardName" placeholder="通过人员" clearable /> |
|
</template> |
|
<template slot-scope="scope" slot="dateRangeSearch"> |
|
<el-date-picker v-model="dateRange" type="datetimerange" placeholder="选择日期" |
|
value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" |
|
end-placeholder="结束日期">> |
|
</el-date-picker> |
|
</template> |
|
<!-- <template slot="areaNumber" slot-scope="scope"> |
|
{{ area == 1 ? '业务区' : '塔台' }} |
|
</template> --> |
|
<template slot="inOutFlag" slot-scope="scope"> |
|
{{ scope.row.inOutFlag == 1 ? '出' : '进' }} |
|
</template> |
|
</avue-crud> |
|
</el-col> |
|
</el-row> |
|
</basic-container> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters } from "vuex"; |
|
import { |
|
getDoorSb,getDoorJcjl, //门禁设备 1业务区/2塔台 |
|
} from "@/api/garden/monitoring"; |
|
import { dateFormat } from "@/util/date"; |
|
|
|
export default { |
|
data() { |
|
return { |
|
area: "1", |
|
build: '', |
|
floor: '', |
|
equipName: '',//设备名称 |
|
cardName: '',//通行人员 |
|
dateRange: [dateFormat(new Date((new Date().getTime() - 1000 * 60 * 60 * 24 * 29)), 'yyyy-MM-dd hh:mm'), dateFormat(new Date(), 'yyyy-MM-dd hh:mm')], |
|
loading: false, |
|
parentId: 0, |
|
page: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
routeName:'', |
|
option: { |
|
lazy: true, |
|
tip: false, |
|
searchLabelWidth: 80, |
|
searchShow: true, |
|
searchMenuSpan: 24, |
|
tree: true, |
|
border: true, |
|
index: true, |
|
dialogClickModal: false, |
|
viewBtn: false, |
|
addBtn: false, |
|
delBtn: false, |
|
editBtn: false, |
|
menu: false, |
|
column: [ |
|
// { |
|
// label: "业务区", |
|
// prop: "areaNumber", |
|
// align: "center", |
|
// }, |
|
// { |
|
// label: "楼宇", |
|
// prop: "buildNumber", |
|
// align: "center", |
|
// }, |
|
// { |
|
// label: "楼层", |
|
// prop: "floorNumber", |
|
// align: "center", |
|
// }, |
|
{ |
|
label: "设备名称", |
|
prop: "name", |
|
align: "center", |
|
}, |
|
{ |
|
label: "通行人员", |
|
prop: "cardName", |
|
align: "center", |
|
}, |
|
{ |
|
label: "进出标志", |
|
prop: "inOutFlag", |
|
align: "center", |
|
}, |
|
{ |
|
label: "通过时间", |
|
prop: "accessTime", |
|
type: "datetimerange", |
|
align: "center", |
|
}, |
|
{ |
|
label: "区域", |
|
prop: "area", |
|
searchslot: true, |
|
search: true, |
|
type: "select", |
|
hide: true, |
|
row: false, |
|
display: false, |
|
viewDisplay: false |
|
}, |
|
// { |
|
// label: "楼宇", |
|
// prop: "build", |
|
// searchslot: true, |
|
// search: true, |
|
// type: "select", |
|
// hide: true, |
|
// row: false, |
|
// display: false, |
|
// viewDisplay: false, |
|
// }, |
|
// { |
|
// label: "楼层", |
|
// prop: "floor", |
|
// searchslot: true, |
|
// search: true, |
|
// type: "select", |
|
// hide: true, |
|
// row: false, |
|
// display: false, |
|
// viewDisplay: false, |
|
// }, |
|
{ |
|
label: "设备名称", |
|
prop: "equipName", |
|
searchslot: true, |
|
search: true, |
|
type: "input", |
|
hide: true, |
|
row: false, |
|
display: false, |
|
viewDisplay: false, |
|
}, |
|
{ |
|
label: "通过人员", |
|
prop: "cardName", |
|
searchslot: true, |
|
search: true, |
|
type: "input", |
|
hide: true, |
|
row: false, |
|
display: false, |
|
viewDisplay: false, |
|
}, |
|
{ |
|
label: "通过时间", |
|
prop: "dateRange", |
|
type: 'datetimerange', |
|
searchslot: true, |
|
searchRange: true, |
|
hide: true, |
|
search: true, |
|
row: false, |
|
display: false, |
|
viewDisplay: false, |
|
}, |
|
], |
|
}, |
|
data: [], |
|
buildings: [ |
|
{ |
|
id: "", |
|
name: "全部", |
|
}, |
|
{ |
|
id: "01", |
|
name: "1号楼", |
|
}, |
|
{ |
|
id: "02", |
|
name: "2号楼", |
|
}, |
|
{ |
|
id: "03", |
|
name: "3号楼", |
|
}, |
|
{ |
|
id: "04", |
|
name: "4号楼", |
|
}, |
|
{ |
|
id: "05", |
|
name: "5号楼", |
|
}, |
|
{ |
|
id: "06", |
|
name: "6号楼", |
|
}, |
|
], |
|
floors: [ |
|
{ |
|
id: "", |
|
name: "全部", |
|
}, |
|
{ |
|
id: "01", |
|
name: "1层", |
|
}, |
|
{ |
|
id: "02", |
|
name: "2层", |
|
}, |
|
{ |
|
id: "03", |
|
name: "3层", |
|
}, |
|
], //楼层 |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(["userInfo", "permission"]), |
|
permissionList() { |
|
return { |
|
addBtn: this.vaildData(this.permission.dept_add, false), |
|
viewBtn: this.vaildData(this.permission.dept_view, false), |
|
delBtn: this.vaildData(this.permission.dept_delete, false), |
|
editBtn: this.vaildData(this.permission.dept_edit, false), |
|
}; |
|
}, |
|
}, |
|
created(){ |
|
this.area = this.$route.query.area ? this.$route.query.area : 1 |
|
this.equipName = this.$route.query.name ? this.$route.query.name : '' |
|
}, |
|
mounted() { |
|
this.routeName = this.$route.name |
|
}, |
|
methods: { |
|
//设备列表 |
|
getDoorSb() { |
|
getDoorSb( |
|
1, |
|
20, |
|
this.area, |
|
this.build ? this.build : "", |
|
this.floor ? this.floor : "", |
|
"" |
|
).then((res) => { |
|
this.sbLists = res.data.data.records; |
|
}); |
|
}, |
|
//搜索条件联动 |
|
areaSearch(data) { |
|
if (data == 1) { |
|
this.buildings = [ |
|
{ |
|
id: "", |
|
name: "全部", |
|
}, |
|
{ |
|
id: "01", |
|
name: "1号楼", |
|
}, |
|
{ |
|
id: "02", |
|
name: "2号楼", |
|
}, |
|
{ |
|
id: "03", |
|
name: "3号楼", |
|
}, |
|
{ |
|
id: "04", |
|
name: "4号楼", |
|
}, |
|
{ |
|
id: "05", |
|
name: "5号楼", |
|
}, |
|
{ |
|
id: "06", |
|
name: "6号楼", |
|
}, |
|
] |
|
} else { |
|
this.buildings = [ |
|
{ |
|
id: "", |
|
name: "全部", |
|
}, |
|
{ |
|
id: "08", |
|
name: "塔楼", |
|
}, |
|
{ |
|
id: "09", |
|
name: "塔台辅楼", |
|
}, |
|
] |
|
} |
|
this.build = ''; |
|
this.floor = ''; |
|
}, |
|
searchReset() { |
|
this.area = "1"; |
|
this.build = ""; |
|
this.floor = ""; |
|
this.equipName = ''; |
|
this.cardName = ''; |
|
this.dateRange = [dateFormat(new Date((new Date().getTime() - 1000 * 60 * 60 * 24 * 29)), 'yyyy-MM-dd hh:mm'), dateFormat(new Date(), 'yyyy-MM-dd hh:mm')]; |
|
this.page.currentPage = 1; |
|
this.onLoad(this.page); |
|
}, |
|
searchChange(params, done) { |
|
this.page.currentPage = 1; |
|
this.onLoad(); |
|
done(); |
|
}, |
|
currentChange(currentPage) { |
|
this.page.currentPage = currentPage; |
|
}, |
|
sizeChange(pageSize) { |
|
this.page.pageSize = pageSize; |
|
}, |
|
refreshChange() { |
|
this.onLoad(this.page); |
|
}, |
|
//分页查询 |
|
onLoad() { |
|
this.loading = true; |
|
try { |
|
getDoorJcjl( |
|
this.area ? this.area : '', |
|
this.dateRange.length > 0 ? this.dateRange[0] : '', |
|
this.dateRange.length > 0 ? this.dateRange[1] : '', |
|
this.page.currentPage, |
|
this.page.pageSize, |
|
this.cardName ? this.cardName : '', |
|
this.equipName ? this.equipName : '', |
|
null, |
|
).then((res) => { |
|
this.loading = false; |
|
this.data = res.data.data.records; |
|
this.page.total = res.data.data.total; |
|
}); |
|
} catch (error) { |
|
this.loading = false; |
|
|
|
} |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
</style> |
|
|