smartpark-front/src/views/equipment/doorRecord.vue

<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>