province-uniapp-qinghai-ipad/pages/smartSecurity/index.vue

<template>
	<view class="content">
		<u-toast ref="uToast" />
		<u-form :model="queryData" ref="uForm">
			<u-row>
				<u-col span="4">
					<u-form-item label="报警单位:" label-width="80px">
						<u--input placeholder="请输入报警单位" border="surround" v-model="queryData.alarmUnit" />
					</u-form-item>
				</u-col>
				<u-col span="4">
					<u-form-item label="报警类型:" label-width="80px">
						<uni-data-select v-model="queryData.riskType" placeholder="请选择报警类型" :localdata="dicList" />
					</u-form-item>
				</u-col>
				<u-col span="4">
					<u-form-item>
						<u-button type="primary" @click="queryPageDetails">查询</u-button>
						<u-button type="info" @click="reset">重置</u-button>
					</u-form-item>
				</u-col>
			</u-row>
		</u-form>
		<view class="tableBox">
			<uni-table border stripe emptyText="暂无更多数据" :loading="this.loading">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="60">序号</uni-th>
					<uni-th align="center">报警单位</uni-th>
					<uni-th align="center">库区名称</uni-th>
					<uni-th align="center">报警类型</uni-th>
					<uni-th align="center">报警时间</uni-th>
					<uni-th align="center">报警位置</uni-th>
					<uni-th align="center">报警等级</uni-th>
					<uni-th align="center" width="80">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in tableData" :key="item.id">
					<uni-td align="center" width="60">{{index + 1}}</uni-td>
					<uni-td align="center">{{item.alarmUnit}}</uni-td>
					<uni-td align="center">{{item.orgName}}</uni-td>
					<uni-td align="center">{{filtrationData(item.riskType)}}</uni-td>
					<uni-td align="center">{{item.alarmTime}}</uni-td>
					<uni-td align="center">{{item.alarmLocation}}</uni-td>
					<uni-td align="center">{{item.alarmLevel}}</uni-td>
					<uni-td align="center">
						<u-button size='mini' type="primary" @click="lookDetails(item.id)">查看</u-button>
					</uni-td>
				</uni-tr>
			</uni-table>
			<uni-pagination show-icon="true" :total="queryData.total" :current="queryData.current"
				@change="changePage" />
		</view>
	</view>
</template>

<script>
	import * as api from "@/api/smartSecurity.js"
	export default {
		data() {
			return {
				queryData: {
					total: 0,
					size: 10,
					current: 1,
				},
				loading: false,
				tableData: [],
				dicList: [{
					"value": 1,
					"text": "抽烟检测"
				}, {
					"value": 2,
					"text": "未带安全帽"
				}, {
					"value": 3,
					"text": "摄像头遮挡"
				}, {
					"value": 4,
					"text": "姿态识别"
				}]
			}
		},
		onLoad() {
			this.queryPageDetails()
		},
		methods: {
			queryPageDetails() {
				this.loading = true
				api.queryData(this.queryData).then(res => {
					this.tableData = res.data.records
					this.queryData.total = res.data.total
					this.loading = false
				})
			},
			changePage(page) {
				this.queryData.current = page.current
				this.queryPageDetails()
			},
			lookDetails(id) {
				uni.navigateTo({
					url: `/pages/smartSecurity/details?id=${id}`
				})
			},
			filtrationData(code) {
				let str = ''
				this.dicList.map(item => {
					if (code == item.value) {
						str = item.text
					}
				})
				return str
			},
			reset() {
				this.queryData = {
					total: 0,
					size: 10,
					current: 1,
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		margin: 10px 20px;

		/deep/.u-form {
			margin-bottom: 20px;

			.u-form-item {
				.uni-select {
					height: 38px;
					font-size: 15px;
					color: #303133;

					.uni-select__input-placeholder {
						font-size: 15px;
						color: #c1c4cc;
					}
				}

				.u-input {
					margin-right: 10px;
				}

				.u-button {
					width: 80px;
					height: 35px;
					margin: 0 5px;
				}
			}
		}

		.tableBox {
			.uni-table {
				.uni-table-td {
					.u-button {
						width: 60px;
						float: left;
						margin: 0 5px;
					}
				}
			}

			.uni-pagination {
				float: right;
				margin: 10px 0;
			}
		}
	}
</style>