wanzai_school_app/pagesWarning/home/home.vue

<template>
	<view class="container">
		<!-- 头部筛选区域 -->
		<view class="search">
			<picker style="width: 50%" :value="typeIndex" :range="typeList" range-key="text" @change="bindTypeChange">
				<view class="search-left">
					{{ typeList[typeIndex].text }}
					<view class="search-img">
						<img class="img" src="@/static/images/bottom2.png" />
					</view>
				</view>
			</picker>

			<picker style="width: 50%" mode="date" :value="date" @change="bindDateChange">
				<view class="search-right">
					{{ date }}
					<view class="search-img">
						<img class="img" src="@/static/images/bottom2.png" />
					</view>
				</view>
			</picker>
		</view>

		<!-- 每一个预警信息 -->
		<view class="container-item" v-for="item in listData" :key="item.id">
			<!-- 标题区域 -->
			<view class="item-title">
				<view class="title-info">{{ item.warningType }}</view>
				<view class="title-state">待处理</view>
			</view>
			<!-- 告警时间区域 -->
			<view class="item-box">
				<view class="box-key">告警时间</view>
				<view class="box-value">{{ time_format(item.dateTime) }}</view>
			</view>
			<!-- 姓名区域 -->
			<view class="item-box">
				<view class="box-key">姓名</view>
				<view v-if="item.name" class="box-value">{{ item.name }}</view>
				<view v-else class="box-value">陌生人</view>
			</view>
			<!-- 地点区域 -->
			<view class="item-box">
				<view class="box-key">地点</view>
				<view class="box-value">{{ item.address }}</view>
			</view>
			<!-- 图片区域 -->
			<view class="item-box2">
				<view class="box-key">图片</view>
				<view class="box-img" @click="handleBigImg(item.pictureUrl)"><img :src="item.pictureUrl" /></view>
			</view>
			<!-- 按钮区域 -->
			<view class="item-button">
				<view class="button-finish" @click="handleFinish(item.id)">处理完成</view>
				<view class="button-err" @click="handleErr(item.id)">误报</view>
			</view>
		</view>

		<!-- 无数据时展示的区域 -->
		<view class="list-noData" v-if="listData.length === 0">
			<img mode="aspetcFill" class="img" src="@/static/images/noData.png" />
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
// 导入时间相关函数
import { time_format, getNowDate } from '@/utils/formatTime.js'

// 状态筛选框数组当前索引
const typeIndex = ref(0)

// 状态筛选框数组
const typeList = ref([
	{
		text: '全部',
		value: 0
	},
	{
		text: '越界预警',
		value: 1
	},
	{
		text: '区域入侵预警',
		value: 2
	},
	{
		text: '进入区域',
		value: 3
	},
	{
		text: '离开区域',
		value: 4
	}
])

// 状态筛选框改变数据时的回调
const bindTypeChange = (e) => {
	typeIndex.value = e.detail.value
}

// 日期筛选框绑定日期
const date = ref(getNowDate())

// 日期筛选框改变数据时的回调
const bindDateChange = (e) => {
	date.value = e.detail.value
}

// 预警列表数据
const listData = ref([])

onLoad(() => {})

// 点击图片回调
const handleBigImg = (imgUrl) => {
	console.log(imgUrl)
}
// 处理完成按钮回调
const handleFinish = () => {}

// 误报按钮回调
const handleErr = () => {}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f2f2f2;

	.search {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #fff;

		.search-left {
			display: flex;
			justify-content: center;
			border-right: 1rpx solid #ccc;

			.search-img {
				margin-left: 27rpx;
				margin-top: -5rpx;
				width: 17rpx;
				height: 12rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.search-right {
			display: flex;
			justify-content: center;

			.search-img {
				margin-left: 27rpx;
				margin-top: -5rpx;
				width: 17rpx;
				height: 12rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.container-item {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		height: 601rpx;
		background-color: #fff;

		.item-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 92rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.title-info {
				font-size: 34rpx;
				font-weight: bold;
			}

			.title-state {
				font-size: 28rpx;
				color: #5a61f4;
			}
		}

		.item-box {
			display: flex;
			align-items: center;
			height: 80rpx;
			font-size: 28rpx;

			.box-key {
				margin-right: 60rpx;
				width: 120rpx;
				color: #999999;
				text-align-last: justify;
			}

			.box-value {
			}
		}

		.item-box2 {
			display: flex;
			align-items: center;
			height: 98rpx;
			font-size: 28rpx;

			.box-key {
				margin-right: 60rpx;
				width: 120rpx;
				color: #999999;
				text-align-last: justify;
			}
			.box-img {
				height: 100%;

				img {
					height: 100%;
				}
			}
		}

		.item-button {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 170rpx;

			.button-finish {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 170rpx;
				height: 70rpx;
				color: #fff;
				font-size: 32rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #8684ff 0%, #3c50e8 100%);
			}

			.button-err {
				margin-left: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 170rpx;
				height: 70rpx;
				color: #d43030;
				font-size: 32rpx;
				border-radius: 15rpx;
				background-color: #e6e6e6;
			}
		}
	}

	.list-noData {
		padding-top: 150rpx;
		background-color: #fff;
		text-align: center;
		color: #999999;

		.img {
			width: 600rpx;
		}
	}
}
</style>