683 lines
15 KiB
Vue
683 lines
15 KiB
Vue
<template>
|
||
<div class="alert-detail-page">
|
||
<!-- 顶部导航栏 -->
|
||
<div class="nav-bar">
|
||
<van-icon name="arrow-left" class="nav-back" @click="goBack" />
|
||
<h1 class="nav-title">路况预警详情</h1>
|
||
<div class="nav-placeholder"></div>
|
||
</div>
|
||
|
||
<!-- 预警信息卡片 -->
|
||
<div class="detail-card">
|
||
<!-- 头部信息 -->
|
||
<div class="card-header">
|
||
<div class="header-left">
|
||
<span class="level-tag" :class="alertDetail.levelClass">
|
||
{{ alertDetail.level }}
|
||
</span>
|
||
<span class="alert-title">{{ alertDetail.title }}</span>
|
||
</div>
|
||
<span class="status-tag" :class="alertDetail.statusClass">
|
||
{{ alertDetail.status }}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 图片 -->
|
||
<div class="card-image" v-if="alertDetail.image">
|
||
<van-image
|
||
:src="alertDetail.image"
|
||
fit="cover"
|
||
class="alert-img"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 详细信息 -->
|
||
<div class="card-details">
|
||
<div class="detail-item">
|
||
<van-icon name="clock" class="detail-icon" />
|
||
<span class="label">检测时间：</span>
|
||
<span class="value">{{ alertDetail.time }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<van-icon name="location" class="detail-icon" />
|
||
<span class="label">检测地点：</span>
|
||
<span class="value">{{ alertDetail.location }}</span>
|
||
</div>
|
||
|
||
<!-- 视频展示按钮 -->
|
||
<div class="video-btn-wrapper">
|
||
<van-button block round class="video-btn">
|
||
<van-icon name="video-o" class="video-icon" />
|
||
视频展示
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 执行记录卡片 -->
|
||
<div class="record-card">
|
||
<div class="card-title">执行记录</div>
|
||
|
||
<!-- 蓝色边框卡片 -->
|
||
<div class="execution-box">
|
||
<!-- 绿色边框内层卡片 -->
|
||
<div class="info-box">
|
||
<div class="info-row">
|
||
<span class="info-label">执行时间：</span>
|
||
<span class="info-value">03/29 09:30</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-text">交通指挥中心</span>
|
||
<span class="info-divider">|</span>
|
||
<span class="info-text">联系电话：027-8888-8888</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">任务地点：</span>
|
||
<span class="info-value">{{ alertDetail.location }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 任务描述 -->
|
||
<div class="task-desc">
|
||
协助疏导交通，确保道路畅通，维持现场秩序。
|
||
</div>
|
||
|
||
<!-- 打卡情况 - 执行中和已完成状态显示 -->
|
||
<div v-if="status === '执行中' || status === '已完成'" class="checkin-box">
|
||
<div class="checkin-row">
|
||
<span class="checkin-date">11-16</span>
|
||
<span class="checkin-time">16:20:15</span>
|
||
<span class="checkin-type">【签到打卡】</span>
|
||
</div>
|
||
<div class="checkin-row">
|
||
<span class="checkin-label">打卡账号：</span>
|
||
<span class="checkin-value">21515800</span>
|
||
</div>
|
||
<div class="checkin-row checkin-location">
|
||
<van-icon name="location" class="location-icon" />
|
||
<span>四川省德阳市旌阳区嘉明街道光兴街2号</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按钮区域 -->
|
||
<!-- 已完成状态 - 显示三次反馈按钮 -->
|
||
<div v-if="status === '已完成'" class="feedback-buttons">
|
||
<van-button block round class="feedback-btn" @click="showFeedback(1)">
|
||
第一次反馈结果
|
||
</van-button>
|
||
<van-button block round class="feedback-btn" @click="showFeedback(2)">
|
||
第二次反馈结果
|
||
</van-button>
|
||
<van-button block round class="feedback-btn" @click="showFeedback(3)">
|
||
第三次反馈结果
|
||
</van-button>
|
||
</div>
|
||
|
||
<!-- 未执行状态 - 显示定位打卡按钮 -->
|
||
<div v-else-if="status === '未执行'" class="action-buttons">
|
||
<van-button block round type="primary" class="action-btn" @click="handleCheckIn">
|
||
定位打卡
|
||
</van-button>
|
||
</div>
|
||
|
||
<!-- 执行中状态 - 显示反馈按钮 -->
|
||
<div v-else-if="status === '执行中'" class="feedback-buttons">
|
||
<van-button block round class="feedback-btn success" @click="showFeedback(1)">
|
||
第一次反馈结果
|
||
</van-button>
|
||
<van-button block round class="feedback-btn success" @click="showFeedback(2)">
|
||
第二次反馈结果
|
||
</van-button>
|
||
<van-button block round type="primary" class="action-btn" @click="handleFeedback">
|
||
立即反馈
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 反馈结果弹窗 -->
|
||
<van-popup v-model:show="showResultDialog" round position="center" class="feedback-popup">
|
||
<div class="popup-content">
|
||
<h2 class="popup-title">{{ currentFeedback.title }}</h2>
|
||
|
||
<div class="popup-info">
|
||
<p>反馈时间：{{ currentFeedback.time }}</p>
|
||
</div>
|
||
|
||
<!-- 现场照片 -->
|
||
<div class="popup-section">
|
||
<p class="section-label">现场照片：</p>
|
||
<div class="image-grid">
|
||
<van-image
|
||
v-for="(img, idx) in currentFeedback.images"
|
||
:key="idx"
|
||
:src="img"
|
||
fit="cover"
|
||
class="feedback-img"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场地视频 -->
|
||
<div class="popup-section">
|
||
<p class="section-label">场地视频：</p>
|
||
<div class="video-item">
|
||
<van-icon name="video-o" class="video-icon" />
|
||
<span>视频 1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 反馈内容 -->
|
||
<div class="popup-section">
|
||
<h3 class="content-title">反馈内容</h3>
|
||
<p class="content-text">{{ currentFeedback.content }}</p>
|
||
</div>
|
||
|
||
<!-- 关闭按钮 -->
|
||
<van-button block round class="close-btn" @click="closePopup">
|
||
关闭
|
||
</van-button>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
// 获取URL参数
|
||
const alertId = route.query.id || "1";
|
||
const status = route.query.status || "未执行";
|
||
|
||
// 反馈弹窗状态
|
||
const showResultDialog = ref(false);
|
||
const selectedFeedbackIndex = ref(1);
|
||
|
||
// 预警详情数据
|
||
const alertDetail = ref({
|
||
id: alertId,
|
||
level: "一级",
|
||
levelClass: "level-red",
|
||
title: "交通事故",
|
||
status: status,
|
||
statusClass: computed(() => {
|
||
if (status === "执行中") return "status-blue";
|
||
if (status === "已完成") return "status-green";
|
||
return "status-orange";
|
||
}).value,
|
||
image: "https://images.unsplash.com/photo-1772962622823-77778ff7b192?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFmZmljJTIwYWNjaWRlbnQlMjBlbWVyZ2VuY3l8ZW58MXx8fHwxNzc0NjA1NzE3fDA&ixlib=rb-4.1.0&q=80&w=1080",
|
||
location: "解放大道光谷广场",
|
||
time: "03/29 08:00",
|
||
issuer: "110指挥中心",
|
||
phone: "027-110"
|
||
});
|
||
|
||
// 反馈数据
|
||
const feedbackData = {
|
||
1: {
|
||
title: "第一次反馈结果",
|
||
time: "03/29 10:15",
|
||
content: "已到达现场，正在疏导交通。现场车流量较大，已设置临时路障引导车辆分流。",
|
||
images: [
|
||
"https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&q=80",
|
||
"https://images.unsplash.com/photo-1486006920555-c77dcf18193c?w=800&q=80"
|
||
]
|
||
},
|
||
2: {
|
||
title: "第二次反馈结果",
|
||
time: "03/29 10:45",
|
||
content: "交通疏导进行中，拥堵情况有所缓解。已联系拖车处理事故车辆，预计15分钟后完全恢复通行。",
|
||
images: [
|
||
"https://images.unsplash.com/photo-1485833077593-4278bba3f11f?w=800&q=80",
|
||
"https://images.unsplash.com/photo-1502444330042-d1a1ddf9bb5b?w=800&q=80"
|
||
]
|
||
},
|
||
3: {
|
||
title: "第三次反馈结果",
|
||
time: "03/29 11:10",
|
||
content: "任务已完成，交通已恢复正常。事故车辆已清离现场，临时路障已撤除，道路完全畅通。",
|
||
images: [
|
||
"https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?w=800&q=80",
|
||
"https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&q=80"
|
||
]
|
||
}
|
||
};
|
||
|
||
const currentFeedback = computed(() => feedbackData[selectedFeedbackIndex.value] || feedbackData[1]);
|
||
|
||
// 返回
|
||
function goBack() {
|
||
router.back();
|
||
}
|
||
|
||
// 定位打卡
|
||
function handleCheckIn() {
|
||
router.push({
|
||
path: "/checkInPage",
|
||
query: { id: alertId }
|
||
});
|
||
}
|
||
|
||
// 立即反馈
|
||
function handleFeedback() {
|
||
router.push({
|
||
path: "/alert-handle",
|
||
query: { id: alertId, status: status }
|
||
});
|
||
}
|
||
|
||
// 显示反馈弹窗
|
||
function showFeedback(index) {
|
||
selectedFeedbackIndex.value = index;
|
||
showResultDialog.value = true;
|
||
}
|
||
|
||
// 关闭弹窗
|
||
function closePopup() {
|
||
showResultDialog.value = false;
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.alert-detail-page {
|
||
min-height: 100vh;
|
||
background: #f1f5f9;
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
.nav-bar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: white;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
padding: 12px 16px;
|
||
|
||
.nav-back {
|
||
font-size: 24px;
|
||
color: #333;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.nav-placeholder {
|
||
width: 24px;
|
||
}
|
||
}
|
||
|
||
.detail-card,
|
||
.record-card {
|
||
margin: 16px;
|
||
background: white;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.detail-card {
|
||
padding: 16px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.level-tag {
|
||
padding: 4px 8px;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
|
||
&.level-red {
|
||
background: #fee2e2;
|
||
color: #dc2626;
|
||
}
|
||
|
||
&.level-orange {
|
||
background: #ffedd5;
|
||
color: #ea580c;
|
||
}
|
||
|
||
&.level-blue {
|
||
background: #dbeafe;
|
||
color: #2563eb;
|
||
}
|
||
}
|
||
|
||
.alert-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.status-tag {
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
|
||
&.status-orange {
|
||
background: #fff7ed;
|
||
color: #ea580c;
|
||
border: 1px solid #fed7aa;
|
||
}
|
||
|
||
&.status-blue {
|
||
background: #eff6ff;
|
||
color: #2563eb;
|
||
border: 1px solid #bfdbfe;
|
||
}
|
||
|
||
&.status-green {
|
||
background: #f0fdf4;
|
||
color: #16a34a;
|
||
border: 1px solid #bbf7d0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-image {
|
||
margin-bottom: 12px;
|
||
|
||
.alert-img {
|
||
width: 100%;
|
||
height: 180px;
|
||
border-radius: 12px;
|
||
}
|
||
}
|
||
|
||
.card-details {
|
||
.detail-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detail-icon {
|
||
font-size: 16px;
|
||
color: #2563eb;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.label {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.value {
|
||
color: #475569;
|
||
}
|
||
}
|
||
|
||
.video-btn-wrapper {
|
||
margin-top: 12px;
|
||
|
||
.video-btn {
|
||
height: 40px;
|
||
background: #2563eb;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: white;
|
||
|
||
.video-icon {
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.record-card {
|
||
padding: 16px;
|
||
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
|
||
.execution-box {
|
||
background: #eff6ff;
|
||
border: 2px solid #2563eb;
|
||
border-radius: 16px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.info-box {
|
||
background: #f0fdf4;
|
||
border: 2px solid #16a34a;
|
||
border-radius: 12px;
|
||
padding: 10px;
|
||
|
||
.info-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 6px;
|
||
font-size: 14px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-label {
|
||
color: #64748b;
|
||
}
|
||
|
||
.info-value {
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-text {
|
||
color: #64748b;
|
||
}
|
||
|
||
.info-divider {
|
||
color: #d1d5db;
|
||
margin: 0 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.task-desc {
|
||
margin-top: 12px;
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
line-height: 1.5;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.checkin-box {
|
||
margin-top: 12px;
|
||
background: #f9fafb;
|
||
border-radius: 12px;
|
||
padding: 12px;
|
||
|
||
.checkin-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.checkin-date,
|
||
.checkin-time {
|
||
color: #64748b;
|
||
}
|
||
|
||
.checkin-type {
|
||
color: #475569;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.checkin-label {
|
||
color: #64748b;
|
||
}
|
||
|
||
.checkin-value {
|
||
color: #333;
|
||
}
|
||
|
||
&.checkin-location {
|
||
color: #475569;
|
||
|
||
.location-icon {
|
||
font-size: 14px;
|
||
margin-right: 4px;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.feedback-buttons,
|
||
.action-buttons {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
|
||
.feedback-btn {
|
||
height: 40px;
|
||
background: #2563eb;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: white;
|
||
|
||
&.success {
|
||
background: #16a34a;
|
||
}
|
||
}
|
||
|
||
.action-btn {
|
||
height: 40px;
|
||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.feedback-popup {
|
||
width: 90%;
|
||
max-width: 400px;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.popup-content {
|
||
padding: 24px;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.popup-info {
|
||
margin-bottom: 16px;
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.popup-section {
|
||
margin-bottom: 16px;
|
||
|
||
.section-label {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.content-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.content-text {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
.image-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
|
||
.feedback-img {
|
||
width: 100%;
|
||
height: 120px;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
|
||
.video-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: #f9fafb;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
|
||
.video-icon {
|
||
font-size: 20px;
|
||
color: #2563eb;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
}
|
||
}
|
||
|
||
.close-btn {
|
||
height: 40px;
|
||
background: #e5e7eb;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-top: 16px;
|
||
|
||
&:active {
|
||
background: #d1d5db;
|
||
}
|
||
}
|
||
</style> |