wanzai_school_app/pagesWarning/home/home.vue

<template>
	<view class="container">
		<!-- 头部筛选区域 -->
		<view class="search">
			<picker style="width: 50%" :value="typeIndex" :range="typeList" @change="bindTypeChange">
				<view class="search-left">
					{{ typeList[typeIndex] }}
					<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.type }}</view>
				<view class="title-state" v-if="item.statu == 0">待处理</view>
				<view class="title-state color" v-else>已处理</view>
			</view>
			<!-- 告警时间区域 -->
			<view class="item-box">
				<view class="box-key">告警时间</view>
				<view class="box-value">{{ item.dateTime }}</view>
			</view>
			<!-- 姓名区域 -->
			<view class="item-box">
				<view class="box-key">姓名</view>
				<view class="box-value">{{ item.name ? item.name : '未知' }}</view>
			</view>
			<!-- 地点区域 -->
			<view class="item-box">
				<view class="box-key">地点</view>
				<view class="box-value">{{ item.location }}</view>
			</view>
			<!-- 图片区域 -->
			<view class="item-box2">
				<view class="box-key">图片</view>
				<view class="box-img" @click="previewImage(item.image)"><img mode="aspectFill" class="img" :src="item.image" /></view>
			</view>
			<!-- 按钮区域 -->
			<view class="item-button" v-if="item.statu == 0">
				<view class="button-finish" @click="handleFinish(item.id)">处理完成</view>
				<view class="button-err" @click="handleErr(item.id)">误报</view>
			</view>
		</view>

		<!-- 无数据时展示的区域 -->
		<NoData v-if="!listData.length" />
	</view>
</template>

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

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

// 状态筛选框数组
const typeList = ref([])

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

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

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

// 当前页
const currentPage = ref(1)

// 总条数
const total = ref(null)

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

onLoad(() => {
	getTypeList()
	getData()
})

// 页面上拉到最底部时触发的回调
onReachBottom(() => {
	if (total.value > listData.value.length) {
		currentPage.value++
		getData()
	} else {
		uni.showToast({
			title: '没有更多数据了',
			icon: 'none'
		})
	}
})

// 获取筛选框数组
const getTypeList = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartWarning/warningType'
	})
	// console.log(res)
	typeList.value = res.data.reverse()
}

// 获取预警列表数据
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartWarning/pageWarning',
		data: {
			currentPage: currentPage.value,
			pageCount: 6,
			type: typeList.value[typeIndex.value] || '全部',
			dateTime: date.value
		}
	})
	// console.log(res)
	if (res.code == 200) {
		listData.value = [...listData.value, ...res.data.list]
		total.value = res.data.totalCount
	}
}

// 处理完成按钮回调
const handleFinish = (id) => {
	uni.showModal({
		title: '提示',
		editable: true,
		placeholderText: '请输入处理情况备注',
		success: (res) => {
			if (res.confirm) {
				handleOperation(id, res.content)
			}
		}
	})
}

// 误报按钮回调
const handleErr = (id) => {
	uni.showModal({
		title: '提示',
		content: '确定是误报吗？',
		success: (res) => {
			if (res.confirm) {
				handleOperation(id)
			}
		}
	})
}

// 处理请求
const handleOperation = async (id, remark) => {
	const res = await myRequest({
		url: '/wanzai/api/smartWarning/operation',
		method: 'post',
		data: {
			id,
			remark
		}
	})
	// console.log(res)
	uni.showToast({
		title: res.message,
		icon: 'success',
		duration: 2000
	})
	setTimeout(() => {
		listData.value = []
		currentPage.value = 1
		getData()
	}, 2000)
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	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 20rpx 30rpx;
		margin-bottom: 20rpx;
		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: #d43030;
			}

			.color {
				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;
			font-size: 28rpx;

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

				.img {
					width: 320rpx;
					height: 180rpx;
				}
			}
		}

		.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;
			}
		}
	}
}
</style>