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:
给我
2026-04-21 18:00:09 +08:00
parent 974c82b5df
commit ce0228ef2b
9 changed files with 489 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,6 +79,77 @@
</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
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="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.person }}</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>
</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">
@ -147,6 +218,53 @@ const violationDetail = ref({})
const allDetail = ref({})
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 () => {
if (!violationId) return;
@ -238,6 +356,7 @@ function handlePlateMatch(matched) {
// 页面初始化
onMounted(() => {
fetchDetail();
onLoadAlerts(); // 初始化加载预警数据
});
</script>
@ -273,6 +392,7 @@ onMounted(() => {
.nav-placeholder {
width: 24px;
}
}
.detail-card {
@ -577,4 +697,139 @@ onMounted(() => {
}
}
}
.alert-collapse {
margin: 0 16px 16px;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
:deep(.van-collapse-item__title) {
padding: 16px;
align-items: center;
background: transparent;
&::after {
display: none;
}
}
:deep(.van-collapse-item__content) {
padding: 0 16px 16px;
color: #333;
}
.collapse-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
}
.alert-list {
.alert-item {
padding-top: 12px;
.item-header {
display: flex;
gap: 12px;
margin-bottom: 16px;
.item-index {
width: 20px;
height: 20px;
background: #3b82f6;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
margin-top: 2px;
}
.item-info {
flex: 1;
.info-row {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
&:last-child {
margin-bottom: 0;
}
.info-icon {
font-size: 16px;
color: #94a3b8;
margin-right: 8px;
}
.label {
color: #64748b;
min-width: 70px;
}
.value {
color: #333;
font-weight: 500;
}
}
}
}
.capture-section {
margin-bottom: 16px;
.section-title {
font-size: 14px;
color: #64748b;
margin-bottom: 8px;
}
.capture-img {
width: 120px;
height: 80px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
font-size: 14px;
.grid-item {
display: flex;
align-items: center;
.grid-icon {
font-size: 16px;
color: #94a3b8;
margin-right: 4px;
}
.label {
color: #64748b;
}
.value {
color: #333;
font-weight: 500;
}
}
}
.item-divider {
height: 1px;
background: #f1f5f9;
margin: 20px 0;
}
}
}
</style>