yuanling-app/pages/eventList/index.vue

<template>
	<view class="page">
		<view class="header" style="height: 70rpx;">
			<!-- 四个按钮 -->
			<view class="button-group">
				<button :class="{ 'active': selectedTimeType === -1 }" @click="selectTimeType(-1)">全部</button>
				<button :class="{ 'active': selectedTimeType === 0 }" @click="selectTimeType(0)">严重</button>
				<button :class="{ 'active': selectedTimeType === 1 }" @click="selectTimeType(1)">一般</button>
				<button :class="{ 'active': selectedTimeType === 2 }" @click="selectTimeType(2)">轻微</button>
			</view>
		</view>

		<scroll-view class="event-list" @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
			<view v-if="filteredEventList.length > 0">
				<view v-for="(item, index) in filteredEventList" :key="index" class="event-card">
					<view class="event-header">
						<view :class="['status-tag', item.status]">{{ item.statusText }}</view>
						<text class="time">{{ item.time }}</text>
					</view>

					<view class="event-info">
						<view class="location">
							<uni-icons type="location" size="16" color="#666" />
							<text class="location-text">{{ item.location }}</text>
						</view>
						<view class="type-level">
							<text :class="['level-tag', item.levelClass]">{{ item.level }}</text>
							<text class="type">{{ item.type }}</text>
						</view>
						<view class="description">{{ item.description }}</view>
						<view :class="['message-box', item.status]" v-if="item.status !== 'pending'">{{ item.message }}</view>
					</view>

					<view class="action-buttons">
						<uni-button size="mini" type="warn" @click="handleEmergency(item)">
							<view class="button-content">
								<uni-icons type="phone-filled" size="16" color="#fff" />
								<text>一键报警</text>
							</view>
						</uni-button>
						<uni-button size="mini" type="default" @click="viewDetail(item)">
							<view class="button-content">
								<uni-icons type="more-filled" size="16" color="#666" />
								<text>查看详情</text>
							</view>
						</uni-button>
					</view>
				</view>
				<view class="pagination-container">
					<uni-pagination :show-icon="true" :total="total" v-model="currentPage" :pageSize="pageSize" title="标题文字"
						@change="getEventList" />
				</view>
			</view>
			<view v-else class="no-data">无数据</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import {computed, ref} from 'vue';
import {clientPostWithQueryParams} from '../../utils/request';
import {alarmGradeClassMap, alarmGradeMap, alarmTypeMap} from './eventMap';
import {onPullDownRefresh, onShow} from '@dcloudio/uni-app';

interface EventItem {
		id : number;
		status : "ignore" | "mistake" | "completed" | "processing" | "pending";
		statusText : string;
		time : string;
		location : string;
		level : string;
		levelClass : string;
		type : string;
		description : string;
		person : string;
		message : string;
	}

	onPullDownRefresh(() => {
		onRefresh().then(()=>{
			uni.stopPullDownRefresh();
		});
		
	})

	const eventList = ref<EventItem[]>([]);

	const timeTypes = ['严重', '一般', '轻微'] as const;
	const selectedTimeType = ref(-1);

	const processTimeTypes = (type : typeof timeTypes[number]) => {
		if (type === '严重') {
			return "urgent"
		} else if (type === '轻微') {
			return "normal"
		} else if (type === '一般') {
			return "important"
		} else {
			return "";
		}
	}

	const filteredEventList = computed(() => {
		if (selectedTimeType.value === -1) {
			return eventList.value;
		}
		const selectedType = timeTypes[selectedTimeType.value];
		return eventList.value.filter(item => item.level === selectedType);
	});

	const handleEmergency = (item : EventItem) => {
		uni.showActionSheet({
			itemList: ['拨打110', '拨打119', '拨打120'],
			success: function (res) {
				const phoneNumbers = ['110', '119', '120'];
				uni.makePhoneCall({
					phoneNumber: phoneNumbers[res.tapIndex]
				});
			}
		});
	};

	const notifySecurity = (item : EventItem) => {
		uni.showToast({
			title: '已通知保安',
			icon: 'success'
		});
	};

	const notifyVisitor = (item : EventItem) => {
		uni.showToast({
			title: '已发送通知',
			icon: 'success'
		});
	};

	const viewDetail = (item : EventItem) => {
		uni.setStorageSync("eventDetail", item);
		uni.navigateTo({
			url: "/pages/eventDetail/index"
		})
	};

	const isRefreshing = ref(false);

	const onRefresh = async () => {
		isRefreshing.value = true;
		await getEventList();
		isRefreshing.value = false;
		uni.showToast({
			title: '刷新成功',
			icon: 'success'
		});
	};

	const selectTimeType = (index : number) => {
		selectedTimeType.value = index;
	};

	const currentPage = ref(1);
	const pageSize = ref(10);
	const total = ref(0);

	const getEventList = async () => {
		const res = await clientPostWithQueryParams("/visualization/fireFighting/queryEventStatisticsPage", {
			pageNum: currentPage.value,
			pageSize: pageSize.value,
			sortType: 'DESC'
		})
		if (res.code !== 200) {
			uni.showToast({
				title: "请求数据失败",
				duration: 2000
			})
		}
		const res2 = await clientPostWithQueryParams('/visualization/fireFighting/queryEventStatistics')
		if (res2.code !== 200) {
			uni.showToast({
				title: "请求数据失败",
				duration: 2000
			})
		}
		total.value = res2.data.value;
		const processEventList : EventItem[] = res.data.pageData.map(q => {
			const statusArr : EventItem['status'][] = ["pending", "processing", "completed", "mistake", "ignore"]
			const statusArrText : string[] = ["未处理", "处理中", "处理完成", "误报", "忽略"]
			const r : EventItem = {
				id: q.alarmCode,
				location: q.alarmPosition,
				status: statusArr[q.handleStat],
				statusText: statusArrText[q.handleStat],
				time: q.alarmDate,
				level: alarmGradeMap.get(q.alarmGrade),
				levelClass: alarmGradeClassMap.get(q.alarmGrade),
				type: q.orgName,
				description: alarmTypeMap.get(q.alarmType),
				person: 'string',
				message: q.handleMessage
			}
			return r;
		})
		eventList.value = processEventList
	};

	onShow(() => {
		getEventList();
	})
</script>

<style scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.button-group {
		display: flex;
		justify-content: space-around;
		width: 100%;
	}

	.button-group button {
		padding: 10rpx 20rpx;
		border: none;
		border-radius: 10rpx;
		background-color: #F8F9FB;
		color: #666;
		font-size: 28rpx;
	}

	.button-group button.active {
		background-color: #1890ff;
		color: white;
	}

	.event-list {
		flex: 1;
		overflow: auto;
		padding: 20rpx;
	}

	.event-card {
		width: 650rpx;
		background-color: #fff;
		border-radius: 12px;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.event-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.status-tag {
		padding: 4rpx 16rpx;
		border-radius: 4px;
		font-size: 12px;
	}

	.pending {
		background-color: #ff4d4f;
		color: #fff;
	}

	.processing {
		background-color: #faad14;
		color: #fff;
	}

	.completed {
		background-color: #52c41a;
		color: #fff;
	}

	.mistake {
		background-color: #55aa7f;
		color: #fff;
	}

	.ignore {
		background-color: #55ffff;
		color: #fff;
	}

	.time {
		font-size: 14px;
		color: #999;
	}

	.event-info {
		margin-bottom: 30rpx;
	}

	.location {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.location-text {
		margin-left: 8rpx;
		font-size: 14px;
		color: #666;
	}

	.type-level {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.level-tag {
		padding: 4rpx 16rpx;
		border-radius: 4px;
		font-size: 12px;
		margin-right: 16rpx;
	}

	.urgent {
		background-color: #ff4d4f;
		color: #fff;
	}

	.important {
		background-color: #faad14;
		color: #fff;
	}

	.normal {
		background-color: #1890ff;
		color: #fff;
	}

	.type {
		font-size: 14px;
		color: #666;
	}

	.description {
		font-size: 14px;
		color: #333;
		margin-bottom: 16rpx;
		line-height: 1.5;
	}

	.person-info {
		font-size: 14px;
		color: #666;
	}

	.label {
		color: #999;
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
	}

	.button-content text {
		margin-left: 8rpx;
		font-size: 12px;
	}

	.uni-button {
		margin: 0;
		flex: 1;
		margin-right: 16rpx;
	}

	.uni-button:last-child {
		margin-right: 0;
	}

	.pagination-container {
		width: 80vw;
		margin: auto;
	}

	.no-data {
		text-align: center;
		color: #999;
		font-size: 14px;
		padding: 20rpx;
	}

	.message-box {
		padding: 16rpx 24rpx;
		background-color: #f8f9fb;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
		margin-top: 20rpx;
		border: 1px solid #eee;
	}

	/* 扩展不同状态的消息样式（可选） */
	.message-box.processing {
		background-color: #fff3d6;
		border-color: #ffe5b4;
	}

	.message-box.completed {
		background-color: #e8f9eb;
		border-color: #c8e6c9;
	}

	.message-box.mistake {
		background-color: #e0f2f1;
		border-color: #b2dfdb;
	}

	.message-box.ignore {
		background-color: #fff3b0;
		border-color: #fff9c4;
	}
</style>