提交
This commit is contained in:
给我
637
src/pages/violationAlerts/detail.vue
Normal file
637
src/pages/violationAlerts/detail.vue
Normal file
@ -0,0 +1,637 @@
|
||||
<template>
|
||||
<div class="violation-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="vehicle-info">
|
||||
<van-icon name="cart" class="vehicle-icon" />
|
||||
<span class="plate-number">{{ violationDetail.plateNumber }}</span>
|
||||
<span class="plate-color">{{ violationDetail.plateColor }}</span>
|
||||
<span class="separator">|</span>
|
||||
<span class="vehicle-type">{{ violationDetail.vehicleType }}</span>
|
||||
</div>
|
||||
<span class="status-tag" :class="statusTagClass">
|
||||
{{ violationDetail.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 等级和标题 -->
|
||||
<div class="title-row">
|
||||
<span class="level-tag" :class="violationDetail.levelClass">
|
||||
{{ violationDetail.level }}
|
||||
</span>
|
||||
<span class="alert-title">{{ violationDetail.title }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 图片 -->
|
||||
<div class="card-image" v-if="violationDetail.image">
|
||||
<van-image
|
||||
:src="violationDetail.image"
|
||||
fit="cover"
|
||||
class="alert-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 检测信息 -->
|
||||
<div class="card-details">
|
||||
<div class="detail-item">
|
||||
<van-icon name="location" class="detail-icon" />
|
||||
<span class="label">检测点位：</span>
|
||||
<span class="value">{{ violationDetail.location }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<van-icon name="clock" class="detail-icon" />
|
||||
<span class="label">检测时间：</span>
|
||||
<span class="value">{{ violationDetail.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 打卡情况 - 执行中和已完成状态显示 -->
|
||||
<div v-if="status === '执行中' || status === '已完成'" class="checkin-card">
|
||||
<div class="checkin-time-row">
|
||||
<span class="checkin-date">11-16 15:56:25</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 v-if="violationId !== '1' && violationId !== '3' && status === '执行中'" class="intercept-status">
|
||||
<span v-if="violationId === '6'" class="result-btn" @click="goToResult">
|
||||
处罚结果
|
||||
</span>
|
||||
<span v-else class="fail-tag">未拦截成功</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 签退打卡 - 仅已完成状态显示 -->
|
||||
<div v-if="status === '已完成'" class="checkin-card">
|
||||
<div class="checkin-time-row">
|
||||
<span class="checkin-date">11-16 15:56:25</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>
|
||||
|
||||
<van-button block round class="result-btn" @click="goToResult">
|
||||
处罚结果
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 额外打卡信息 - 仅id=3的执行中状态显示 -->
|
||||
<div v-if="status === '执行中' && violationId === '3'" class="checkin-card">
|
||||
<div class="checkin-time-row">
|
||||
<span class="checkin-date">11-16 15:56:25</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="action-bar">
|
||||
<van-button block round type="primary" class="action-btn" @click="handleCheckIn">
|
||||
定位打卡
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 - 执行中状态 -->
|
||||
<div v-if="status === '执行中' && !hideCheckIn" class="action-bar">
|
||||
<van-button block round type="primary" class="action-btn" @click="showResultDialog">
|
||||
执行结果
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 执行结果弹框 -->
|
||||
<van-popup v-model:show="showMatchDialog" round class="result-popup">
|
||||
<div class="popup-content">
|
||||
<h2 class="popup-title">执行结果</h2>
|
||||
<div class="popup-buttons">
|
||||
<van-button block round class="popup-btn success" @click="handlePlateMatch(true)">
|
||||
<van-icon name="checked" class="btn-icon" />
|
||||
处罚上报
|
||||
</van-button>
|
||||
<van-button block round class="popup-btn error" @click="handlePlateMatch(false)">
|
||||
<van-icon name="cross" class="btn-icon" />
|
||||
未拦截成功
|
||||
</van-button>
|
||||
</div>
|
||||
</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 violationId = route.query.id || "1";
|
||||
const status = route.query.status || "未执行";
|
||||
const hideCheckIn = route.query.hideCheckIn === "true";
|
||||
|
||||
// 执行结果弹框状态
|
||||
const showMatchDialog = ref(false);
|
||||
|
||||
// 违章数据
|
||||
const violationData = [
|
||||
{
|
||||
id: "1",
|
||||
plateNumber: "鄂A12345",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "四级",
|
||||
levelClass: "level-blue",
|
||||
title: "违规停车",
|
||||
status: "执行中",
|
||||
image: "https://images.unsplash.com/photo-1710939968666-a7447d3c584e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXIlMjBzaWxob3VldHRlJTIwc3Vuc2V0fGVufDF8fHx8MTc3NDYwODA4Mnww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "江汉路步行街入口",
|
||||
time: "03/27 10:00",
|
||||
warning: "来车预警",
|
||||
description: "该车辆在禁停区域长时间停放，影响行人通行和市容市貌。"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
plateNumber: "鄂A99999",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "三级",
|
||||
levelClass: "level-yellow",
|
||||
title: "闯红灯",
|
||||
status: "执行中",
|
||||
image: "https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFmZmljJTIwbGlnaHQlMjByZWR8ZW58MXx8fHwxNzc0NjA4MDg0fDA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "解放大道循礼门路口",
|
||||
time: "03/27 09:15",
|
||||
warning: "来车预警",
|
||||
description: "车辆在红灯时通过路口，存在安全隐患。"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
plateNumber: "鄂A88888",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "二级",
|
||||
levelClass: "level-orange",
|
||||
title: "违规变道",
|
||||
status: "已完成",
|
||||
image: "https://images.unsplash.com/photo-1756467988694-9953cd7ade0a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFmZmljJTIwcG9saWNlJTIwZW5mb3JjZW1lbnR8ZW58MXx8fHwxNzc0NjA4MDgyfDA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "中山大道民生路口",
|
||||
time: "03/26 15:20",
|
||||
warning: "来车预警",
|
||||
description: "车辆在实线区域变道，违反交通规则。"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
plateNumber: "鄂B33333",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "大型货车",
|
||||
level: "一级",
|
||||
levelClass: "level-red",
|
||||
title: "违规掉头",
|
||||
status: "已完成",
|
||||
image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXIlMjB0dXJuaW5nJTIwc3RyZWV0fGVufDF8fHx8MTc3NDYwODA4NXww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "建设大道花桥街口",
|
||||
time: "03/26 11:50",
|
||||
warning: "来车预警",
|
||||
description: "车辆在禁止掉头区域掉头，影响交通秩序。"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
plateNumber: "鄂A77777",
|
||||
plateColor: "蓝色",
|
||||
vehicleType: "小型汽车",
|
||||
level: "二级",
|
||||
levelClass: "level-orange",
|
||||
title: "违规停车",
|
||||
status: "未执行",
|
||||
image: "https://images.unsplash.com/photo-1710939968666-a7447d3c584e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXIlMjBzaWxob3VldHRlJTIwc3Vuc2V0fGVufDF8fHx8MTc3NDYwODA4Mnww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
location: "武昌区中南路",
|
||||
time: "04/09 08:30",
|
||||
warning: "来车预警",
|
||||
description: "该车辆在主干道违规停车，影响道路通行。"
|
||||
}
|
||||
];
|
||||
|
||||
// 根据ID获取详情
|
||||
const violationDetail = computed(() => {
|
||||
return violationData.find(v => v.id === violationId) || violationData[0];
|
||||
});
|
||||
|
||||
// 状态标签样式
|
||||
const statusTagClass = computed(() => {
|
||||
if (status === "执行中") return "status-blue";
|
||||
if (status === "已完成") return "status-green";
|
||||
return "status-gray";
|
||||
});
|
||||
|
||||
// 返回
|
||||
function goBack() {
|
||||
router.back();
|
||||
}
|
||||
|
||||
// 定位打卡
|
||||
function handleCheckIn() {
|
||||
router.push({
|
||||
path: "/checkInPage",
|
||||
query: { id: violationId }
|
||||
});
|
||||
}
|
||||
|
||||
// 显示执行结果弹框
|
||||
function showResultDialog() {
|
||||
showMatchDialog.value = true;
|
||||
}
|
||||
|
||||
// 前往处罚结果
|
||||
function goToResult() {
|
||||
router.push({
|
||||
path: "/dataReport",
|
||||
query: { id: violationId, status: status }
|
||||
});
|
||||
}
|
||||
|
||||
// 处理车牌匹配结果
|
||||
function handlePlateMatch(matched) {
|
||||
showMatchDialog.value = false;
|
||||
if (matched) {
|
||||
router.push({
|
||||
path: "/dataReport",
|
||||
query: { id: violationId, status: status }
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.violation-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 {
|
||||
margin: 16px;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 16px 12px;
|
||||
}
|
||||
|
||||
.vehicle-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.vehicle-icon {
|
||||
font-size: 18px;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.plate-number {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.plate-color,
|
||||
.vehicle-type {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: #d1d5db;
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
|
||||
&.status-gray {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
&.status-blue {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
|
||||
&.status-green {
|
||||
background: #f0fdf4;
|
||||
color: #16a34a;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px 12px;
|
||||
|
||||
.level-tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
|
||||
&.level-red {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&.level-orange {
|
||||
background: #ffedd5;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
&.level-yellow {
|
||||
background: #fef9c3;
|
||||
color: #ca8a04;
|
||||
}
|
||||
|
||||
&.level-blue {
|
||||
background: #dbeafe;
|
||||
color: #2563eb;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-image {
|
||||
padding: 0 16px 12px;
|
||||
|
||||
.alert-img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-details {
|
||||
padding: 0 16px 16px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkin-card {
|
||||
margin: 0 16px 16px;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.checkin-time-row {
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
.checkin-date {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.checkin-type {
|
||||
color: #2563eb;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkin-row {
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.checkin-label {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.checkin-value {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.checkin-location {
|
||||
color: #475569;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
|
||||
.location-icon {
|
||||
font-size: 16px;
|
||||
color: #94a3b8;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intercept-status {
|
||||
margin-top: 12px;
|
||||
|
||||
.result-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: #2563eb;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.fail-tag {
|
||||
color: #ef4444;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.result-btn {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
margin-top: 16px;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding: 12px 16px;
|
||||
padding-bottom: calc(12px + env(safe-area-inset-bottom));
|
||||
|
||||
.action-btn {
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.result-popup {
|
||||
width: 90%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.popup-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.popup-btn {
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
&.success {
|
||||
background: #16a34a;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: white;
|
||||
border: 1px solid #ef4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user