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.
377 lines
8.5 KiB
377 lines
8.5 KiB
3 years ago
|
<template>
|
||
|
|
<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>
|
||
|
|
</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,
|
||
|
|
},
|
||
|
|
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),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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>
|
||
|
|
|