parking_inspection/pages/index/deviceList/deviceList.vue

<template>
	<view class="device">
		<z-paging ref="paging" v-model="deviceList" @query="queryList">
			<view class="device-header" slot="top">
				<view class="device-header-left">
					<u--input
						v-model="deviceTypeValue"
						suffixIcon="arrow-down"
						:readonly="true"
						@focus="deviceTypeShow = true"
						fontSize="24rpx"
					></u--input>
					<u-picker :show="deviceTypeShow" :columns="deviceTypeList" keyName="label" @confirm="deviceTypeConfirm"></u-picker>
				</view>
				<view class="device-header-right">
					<u--input
						v-model="roadValue"
						suffixIcon="arrow-down"
						:readonly="true"
						fontSize="24rpx"
						@focus="roadShow = true"
					></u--input>
					<u-picker :show="roadShow" :columns="roadList" keyName="label" @confirm="roadConfirm"></u-picker>
				</view>
			</view>
			<view class="device-list">
				<view class="device-list-item" v-for="(item, index) in deviceList" :key="index">
					<view class="device-list-item-left">
						<view class="left-device">
							<view>{{ item.deviceType }}</view>
							<view>{{ item.road }}</view>
						</view>
						<view class="device-no">设备编号: {{ item.deviceNo }}</view>
					</view>
					<view class="device-list-item-right" :class="item.status === 0 ? 'success' : item.status === 1 ? 'error' : 'nomal'">{{ item.status | filterStatus }}</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceTypeValue: '全部',
				roadValue: '全部',
				deviceList: [],
				deviceTypeShow: false,
				deviceTypeList: [[
					{ label: '全部', value: 0 },
					{ label: '车位锁', value: 1 },
					{ label: '地磁', value: 2 },
					{ label: '栏杆道闸', value: 3 }
				]],
				roadShow: false,
				roadList: [[
					{ label: '全部', value: 0 },
					{ label: '顺时路', value: 1 },
					{ label: '党固路', value: 2 },
					{ label: '丰林路', value: 3 },
					{ label: '教育路', value: 4 },
					{ label: '物资路', value: 5 },
					{ label: '桂花苑路段', value: 6 },
					{ label: '可处路', value: 7 }
				]]
			}
		},
		filters: {
			filterStatus(val) {
				let name
				switch (val){
					case 0:
						name = '运行中'
						break;
					case 1:
						name = '已离线'
						break;
					case 2:
						name = '异常'
						break;
				}
				return name
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete([{
					deviceType: '车位锁',
					road: '可处路-KC001',
					deviceNo: '200602061258',
					status: 0
				}, {
					deviceType: '地磁',
					road: '可处路-KC002',
					deviceNo: '200602061259',
					status: 1
				}, {
					deviceType: '栏杆道闸',
					road: '可处路-KC003',
					deviceNo: '200602061269',
					status: 2
				}, {
					deviceType: '地磁',
					road: '可处路-KC005',
					deviceNo: '200602061259',
					status: 0
				}])
			},
			deviceTypeConfirm(e) {
				this.deviceTypeValue = e.value[0].label
				this.deviceTypeShow = false
			},
			roadConfirm(e) {
				this.roadValue = e.value[0].label
				this.roadShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
.device {
	font-family: 'PingFangSC-regular';
	&-header {
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		&-left {
			width: 30%;
		}
		&-right {
			width: 30%;
		}
	}
	&-list {
		&-item {
			border-bottom: solid 1px #bbb;
			padding: 32rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left-device {
				display: flex;
				view {
					font-size: 30rpx;
					margin-bottom: 16rpx;
					&:first-child {
						color: #000;
						font-weight: 600;
						margin-right: 44rpx;
						font-size: 30rpx;
						width: 130rpx;
					}
				}
			}
			.device-no {
				font-size: 28rpx;
			}
			&-right {
				font-size: 28rpx;
			}
			.success {
				color: #06C76E;
			}
			.error {
				color: #FF3939;
			}
			.nomal {
				color: #008CFF;
			}
		}
	}
}
</style>