zy_oyj/jg_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新页面，对接接口

Browse Source
This commit is contained in:
Esacpe
2026-04-23 19:58:52 +08:00
parent 76819af5ad
commit 5766bfaff5
8 changed files with 216 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
src/pages/violationAlerts/detail.vue
View File

@ -6,164 +6,143 @@
<h1 class="nav-title">违章详情</h1>
<div class="nav-placeholder"></div>
</div>
<!-- 加载状态 -->
<van-loading v-if="loading" class="loading-state" color="#2563eb">加载中...</van-loading>
<template v-else>
<!-- 违章信息卡片 -->
<div class="detail-card">
<!-- 车牌号和状态 -->
<div class="card-header">
<div class="vehicle-info">
<van-icon name="cart" class="vehicle-icon" />
<span class="plate-number">{{ violationDetail.plateNo }}</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="getStatusClass(allDetail.taskStatus)">
{{ statusMap[allDetail.taskStatus] }}
</span>
</div>
<!-- 等级和标题 -->
<div class="title-row">
<span class="level-tag" :class="getLevelClass(violationDetail.eventLevel)">
{{ levelMap[violationDetail.eventLevel] }}
</span>
<span class="alert-title">{{ violationDetail.eventContent }}</span>
</div>
<!-- 图片 -->
<div class="card-image" v-if="violationDetail.imgUrl">
<van-image :src="violationDetail.imgUrl" 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.siteName }}</span>
</div>
<div class="detail-item">
<van-icon name="clock" class="detail-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ violationDetail.eventTime }}</span>
</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.plateNo }}</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="getStatusClass(allDetail.taskStatus)"> {{ statusMap[allDetail.taskStatus] }} </span>
</div>
<!-- 打卡情况 - 执行中和已完成状态显示 -->
<div v-if="allDetail.taskStatus == '1' || allDetail.taskStatus == '2'" class="checkin-card">
<div class="checkin-time-row">
<span class="checkin-date">{{allDetail.clickTime}}</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>{{allDetail.clickAddress}}</span>
</div>
<!-- 未拦截成功标识 -->
<div v-if="violationId !== '1' && violationId !== '3' && allDetail.taskStatus === '1'" class="intercept-status">
<span v-if="violationId === '6'" class="result-btn" @click="goToResult">
处罚结果
</span>
<span v-else class="fail-tag">未拦截成功</span>
</div>
<!-- 等级和标题 -->
<div class="title-row">
<span class="level-tag" :class="getLevelClass(violationDetail.eventLevel)">
{{ levelMap[violationDetail.eventLevel] }}
</span>
<span class="alert-title">{{ violationDetail.eventContent }}</span>
</div>
<!-- 卡口预警折叠面板 -->
<van-collapse v-model="activeNames" :border="false" class="alert-collapse">
<van-collapse-item name="1" :border="false">
<template #title>
<div class="collapse-title">卡口预警</div>
</template>
<van-list
v-model:loading="alertLoading"
:finished="alertFinished"
finished-text="没有更多了"
@load="onLoadAlerts"
:immediate-check="false"
>
<div class="alert-list">
<div v-for="(item, index) in checkinAlerts" :key="item.id" class="alert-item">
<!-- 顶部序号和基本信息 -->
<div class="item-header">
<div class="item-index">{{ index + 1 }}</div>
<div class="item-info">
<div class="info-row">
<van-icon name="location-o" class="info-icon" />
<span class="label">检测点位：</span>
<span class="value">{{ item.siteName }}</span>
</div>
<div class="info-row">
<van-icon name="clock-o" class="info-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ item.eventTime }}</span>
</div>
</div>
</div>
<!-- 图片 -->
<div class="card-image">
<van-image :src="violationDetail.imgUrls" fit="cover" class="alert-img" />
</div>
<!-- 抓拍图片区域 -->
<div class="capture-section">
<div class="section-title">抓拍图片：</div>
<van-image :src="item.imgUrl" fit="cover" class="capture-img" radius="12" />
</div>
<!-- 检测信息 -->
<div class="card-details">
<div class="detail-item">
<van-icon name="location" class="detail-icon" />
<span class="label">检测点位：</span>
<span class="value">{{ violationDetail.siteName }}</span>
</div>
<div class="detail-item">
<van-icon name="clock" class="detail-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ violationDetail.eventTime }}</span>
</div>
</div>
</div>
<!-- 详细网格信息 -->
<div class="detail-grid">
<div class="grid-item">
<span class="label">速度：</span>
<span class="value">{{ item.speed }}</span>
<!-- 打卡情况 - 执行中和已完成状态显示 -->
<div v-if="allDetail.taskStatus == '1' || allDetail.taskStatus == '2'" class="checkin-card">
<div class="checkin-time-row">
<span class="checkin-date">{{allDetail.clickTime}}</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>{{allDetail.clickAddress}}</span>
</div>
<!-- 未拦截成功标识 -->
<div v-if="violationId !== '1' && violationId !== '3' && allDetail.taskStatus === '1'" class="intercept-status">
<span v-if="violationId === '6'" class="result-btn" @click="goToResult">处罚结果</span>
<span v-else class="fail-tag">未拦截成功</span>
</div>
</div>
<!-- 卡口预警折叠面板 -->
<van-collapse v-model="activeNames" :border="false" class="alert-collapse">
<van-collapse-item name="1" :border="false">
<template #title><div class="collapse-title">卡口预警</div></template>
<van-list :finished="true" finished-text="没有更多了" >
<div class="alert-list">
<div v-for="(item, index) in checkinAlerts" :key="item.id" class="alert-item">
<!-- 顶部序号和基本信息 -->
<div class="item-header">
<div class="item-index">{{ index + 1 }}</div>
<div class="item-info">
<div class="info-row">
<van-icon name="location-o" class="info-icon" />
<span class="label">检测点位：</span>
<span class="value">{{ item.siteName }}</span>
</div>
<div class="grid-item">
<span class="label">车道号：</span>
<span class="value">{{ item.laneNo }}</span>
</div>
<div class="grid-item">
<span class="label">方向：</span>
<span class="value">{{ item.direction }}</span>
</div>
<div class="grid-item">
<van-icon name="user-o" class="grid-icon" />
<span class="label">执法人员：</span>
<span class="value">{{ item.person }}</span>
</div>
<div class="grid-item">
<span class="label">工号：</span>
<span class="value">{{ item.workNo }}</span>
<div class="info-row">
<van-icon name="clock-o" class="info-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ item.passTime }}</span>
</div>
</div>
<!-- 分割线 -->
<div v-if="index < checkinAlerts.length - 1" class="item-divider"></div>
</div>
<!-- 抓拍图片区域 -->
<div class="capture-section">
<div class="section-title">抓拍图片：</div>
<van-image :src="item.imgUrl" fit="cover" class="capture-img" radius="12" />
</div>
<!-- 详细网格信息 -->
<div class="detail-grid">
<div class="grid-item">
<span class="label">速度：</span>
<span class="value">{{ item.speed }}</span>
</div>
<div class="grid-item">
<span class="label">车道号：</span>
<span class="value">{{ item.laneNo }}</span>
</div>
<div class="grid-item">
<span class="label">方向：</span>
<span class="value">{{ item.direction }}</span>
</div>
<div class="grid-item">
<van-icon name="user-o" class="grid-icon" />
<span class="label">执法人员：</span>
<span class="value">{{ item.userName }}</span>
</div>
<div class="grid-item">
<span class="label">工号：</span>
<span class="value">{{ item.workNo }}</span>
</div>
</div>
<!-- 分割线 -->
<div v-if="index < checkinAlerts.length - 1" class="item-divider"></div>
</div>
</van-list>
</van-collapse-item>
</van-collapse>
</div>
</van-list>
</van-collapse-item>
</van-collapse>
<!-- 底部按钮 - 未执行状态 -->
<div v-if="allDetail.taskStatus == '0'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="handleCheckIn">
定位打卡
</van-button>
</div>
<!-- 底部按钮 - 未执行状态 -->
<div v-if="allDetail.taskStatus == '0'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="handleCheckIn">定位打卡</van-button>
</div>
<!-- 底部按钮 - 执行中状态 -->
<div v-if="allDetail.taskStatus == '1'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="showResultDialog">
执行结果
</van-button>
</div>
</template>
<!-- 底部按钮 - 执行中状态 -->
<div v-if="allDetail.taskStatus == '1'" 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">
@ -188,7 +167,6 @@
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getTrafficEventDetail, interceptNotSuccess } from "@/api/traffic";
import { ImagePreview } from 'vant';
const router = useRouter();
const route = useRoute();
@ -220,50 +198,8 @@ const taskDetail = ref({})
// 卡口预警模拟数据
const checkinAlerts = ref([])
const alertLoading = ref(false)
const alertFinished = ref(false)
const alertPage = ref(1) // 分页当前页码
const activeNames = ref(['1']) // 默认展开第一个面板
// 模拟加载卡口预警数据
const onLoadAlerts = () => {
// 模拟异步请求
setTimeout(() => {
const newData = [
{
id: checkinAlerts.value.length + 1,
siteName: '解放大道循礼门路口东',
eventTime: '2026-03-27 09:15:32',
imgUrl: 'https://img0.baidu.com/it/u=2535738879,1652433069&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
speed: '65 km/h',
laneNo: '2',
direction: '由东向西',
person: '张伟',
workNo: '210001'
},
{
id: checkinAlerts.value.length + 2,
siteName: '解放大道循礼门路口东',
eventTime: '2026-03-27 09:15:35',
imgUrl: 'https://img0.baidu.com/it/u=2535738879,1652433069&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
speed: '68 km/h',
laneNo: '2',
direction: '由东向西',
person: '张伟',
workNo: '210001'
}
];
checkinAlerts.value.push(...newData);
alertLoading.value = false;
alertPage.value++;
// 模拟加载 5 页后结束
if (alertPage.value > 5) {
alertFinished.value = true;
}
}, 1000);
};
// 获取详情数据
const fetchDetail = async () => {
@ -277,6 +213,7 @@ const fetchDetail = async () => {
violationDetail.value = data.eventDetailVO;
taskDetail.value = data.eventDetailVO.tasksVo;
allDetail.value = data
checkinAlerts.value = data.interceptWarns || [];
}
} catch (error) {
console.error("获取详情失败:", error);
@ -356,7 +293,6 @@ function handlePlateMatch(matched) {
// 页面初始化
onMounted(() => {
fetchDetail();
onLoadAlerts(); // 初始化加载预警数据
});
</script>