yuanling-app/pages/eventDetail/index.vue

<template>
	<view class="container">
		<!-- 顶部导航 -->
		<!-- <view class="header">
			<view class="nav-bar">
				<text class="title">事件处理中心</text>
			</view>
		</view> -->
		<!-- 滚动区域 -->
		<scroll-view scroll-y class="content">
			<!-- 事件信息 -->
			<view class="event-info">
				<view class="event-header">
					<!-- <text class="event-id">报警编号: {{eventDetail.id}}</text> -->
					<text class="event-status">{{eventDetail.statusText}}</text>
				</view>
				<view class="event-detail">
					<view class="detail-item">
						<text class="label">发生时间：</text>
						<text class="value">{{eventDetail.time}}</text>
					</view>
					<view class="detail-item">
						<text class="label">事件地点：</text>
						<text class="value">{{eventDetail.location}}</text>
					</view>
					<view class="detail-item">
						<text class="label">事件类型：</text>
						<text class="value">{{eventDetail.type}}</text>
					</view>
					<view class="detail-item">
						<text class="label">严重程度：</text>
						<text class="value danger">{{eventDetail.level}}</text>
					</view>
				</view>
				<view class="event-desc">
					<text class="desc-title">事件描述</text>
					<text class="desc-content">{{eventDetail.description}}</text>
				</view>
			</view>
			<!-- 紧急联动 -->
			<view class="emergency-section">
				<text class="section-title">紧急联动</text>
				<view class="emergency-grid">
					<view class="grid-item" v-for="(item, index) in emergencyList" :key="index" @click="handleEmergency(item)">
						<uni-icons :type="item.icon" size="28" :color="item.color" />
						<text class="grid-text">{{item.text}}</text>
					</view>
				</view>
			</view>
			<!-- 告警信息 -->
			<view class="alert-section">
				<text class="section-title">处理信息</text>
				<textarea class="alert-input" placeholder="请输入处理信息内容" v-model="alertMessage" />
				<!-- <view class="alert-actions">
					<uni-button class="select-btn" @click="selectReceivers">选择接收人</uni-button>
					<uni-button type="primary" @click="sendAlert">发送告警</uni-button>
				</view> -->
			</view>
		</scroll-view>
		<!-- 底部操作栏 -->
		<view class="footer">
			<view class="footer-container">
				<text class="mark-text">标记为</text>
				<picker :range="alarmArr" :value="index" @change="handleChange">
					<button type="primary" size="mini" class="mark-stats">{{alarmArr[index]}}</button>
				</picker>
			</view>
		</view>
		<view class="commit">
			<uni-button type="default" @click="markComplete">完成</uni-button>
		</view>
	</view>
</template>
<script lang="ts" setup>
	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;
  }

  import {onMounted, ref} from 'vue';
  import {clientPostWithQueryParams} from '../../utils/request';

  const alertMessage = ref('');
	const alarmArr = ref(["处理中", "已处理", "误报", "忽略"]);
	const index = ref(1);
	const handleChange = (q) => {
		index.value = q.detail.value;
	}
	const emergencyList = ref([
		{ text: '110警察', icon: 'phone-filled', color: '#2979ff' },
		{ text: '119消防', icon: 'fire-filled', color: '#f56c6c' },
		{ text: '120急救', icon: 'plus-filled', color: '#19be6b' }
	]);
	const goBack = () => {
		uni.navigateBack();
	};
	const handleEmergency = (item : any) => {
		uni.showModal({
			title: '确认操作',
			content: `是否确认拨打${item.text}？`,
			success: (res) => {
				if (res.confirm) {
					uni.showToast({ title: `正在拨打${item.text}`, icon: 'none' });
				}
			}
		});
	};
	const selectReceivers = () => {
		uni.showToast({ title: '选择接收人功能开发中', icon: 'none' });
	};
	const sendAlert = () => {
		alertMessage.value = '';
	};
	
	const markEvent = async () => {
		const res = await clientPostWithQueryParams("/visualization/fireFighting/getAlarmEventProcessing",{
			alarmCode:eventDetail.value.id,
			alarmDate:eventDetail.value.time,
			handleStat:index.value + 1,
			handleMessage:alertMessage.value
		})
		console.log(res);
		if(res.code !== 200){
			uni.showToast({
				title:"请求失败",
				duration:2000
			})
		}else{
			uni.showToast({
				title:"操作成功",
				duration:2000
			})
			uni.navigateBack();
		}
	}
	
	const markComplete = () => {
		uni.showModal({
			title: '确认完成',
			content: '是否确认将该事件标记为'+alarmArr.value[index.value]+"?",
			success: (res) => {
				if (res.confirm) {
					markEvent();
				}
			}
		});
	};
	// const escalateEvent = () => {
	// 	uni.showModal({
	// 		title: '事件升级',
	// 		content: '是否确认将该事件升级处理？',
	// 		success: (res) => {
	// 			if (res.confirm) {
	// 				uni.showToast({ title: '事件已升级', icon: 'success' });
	// 			}
	// 		}
	// 	});
	// };
	const eventDetail = ref<EventItem>({
		id: 0,
		status: 'ignore',
		statusText: '',
		time: '',
		location: '',
		level: '',
		levelClass: '',
		type: '',
		description: '',
		person: ''
	});
	onMounted(() => {
		eventDetail.value = uni.getStorageSync("eventDetail");
	})
</script>
<style scoped>
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.header {
		flex-shrink: 0;
		background-color: #ffffff;
		border-bottom: 1px solid #eaeaea;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 30rpx;
	}

	.title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.event-info {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

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

	.event-id {
		font-size: 14px;
		color: #666666;
		width: 70vw;
	}

	.event-status {
		font-size: 12px;
		color: #2979ff;
		background-color: #ecf5ff;
		padding: 4rpx 16rpx;
		border-radius: 4px;
	}

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

	.detail-item {
		display: flex;
		margin-bottom: 16rpx;
	}

	.label {
		font-size: 14px;
		color: #666666;
		width: 160rpx;
	}

	.value {
		font-size: 14px;
		color: #333333;
	}

	.value.danger {
		color: #f56c6c;
	}

	.event-desc {
		background-color: #f8f8f8;
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.desc-title {
		font-size: 14px;
		color: #333333;
		font-weight: 500;
		margin-bottom: 16rpx;
		display: block;
	}

	.desc-content {
		font-size: 14px;
		color: #666666;
		line-height: 1.5;
	}

	.security-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

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

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.security-list {
		background-color: #ffffff;
	}

	.security-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eaeaea;
	}

	.security-item:last-child {
		border-bottom: none;
	}

	.security-info {
		display: flex;
		align-items: center;
	}

	.avatar-box {
		position: relative;
		margin-right: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.status-dot {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		border: 2px solid #ffffff;
	}

	.online {
		background-color: #19be6b;
	}

	.offline {
		background-color: #999999;
	}

	.info-content {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 14px;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.location {
		font-size: 12px;
		color: #999999;
	}

	.action-area {
		display: flex;
		align-items: center;
	}

	.distance {
		font-size: 12px;
		color: #666666;
		margin-right: 20rpx;
	}

	.emergency-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.emergency-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 8rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.grid-text {
		font-size: 12px;
		color: #666666;
		margin-top: 12rpx;
	}

	.alert-section {
		background-color: #ffffff;
		padding: 30rpx;
		/* margin-bottom: 120rpx; */
	}

	.alert-input {
		width: 100%;
		height: 200rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 14px;
		margin: 20rpx 0;
		box-sizing: border-box;
	}

	.alert-actions {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}

	.select-btn {
		background-color: #ffffff !important;
		border: 1px solid #dcdfe6 !important;
	}

	.footer {
		display: flex;
		margin: 20rpx 0rpx;
		background: #fff;
		font-size: 16px;
	}
	
	.footer-container{
		display: flex;
		gap: 20rpx;
		margin: 30rpx;
	}
	
	.mark-text{
		line-height: 50rpx;
	}
/* 
	.mark-stats {
		color: #2979ff;
		border: 1px solid #ccc;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	} */
	.commit{
		
	}
</style>