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-17 17:59:39 +08:00
parent c3b2a20ad0
commit 85a746ff7a
7 changed files with 386 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/traffic.js
View File

@ -22,6 +22,7 @@ export function getTrafficEventList(data) {
export function getTrafficEventDetail(taskId) {
return service({
url: `/traffic/eventTask/detail/${taskId}`,
// url: `/traffic/event/info/2/${taskId}`,
method: 'get'
});
}
@ -74,3 +75,14 @@ export function uploadFile(file) {
headers: { 'Content-Type': 'multipart/form-data' }
});
}
/**
* 未拦截成功
* @param {string|number} taskId - 任务ID
*/
export function interceptNotSuccess(taskId) {
return service({
url: `/traffic/eventTask/intercept/${taskId}`,
method: 'get'
});
}

230
src/pages/dataReport/index.vue
View File

@ -91,9 +91,9 @@
<!-- 当事人签名 -->
<div class="signature-section">
<div class="signature-label">当事人签名</div>
<div class="signature-box" @click="!isViewMode && handleSignature('party')">
<div class="signature-box" @click="!isViewMode && openSignature('party')">
<template v-if="partySignature">
<div class="signed-text">已签名</div>
<van-image :src="partySignature" fit="contain" class="signature-img" />
</template>
<template v-else>
<van-icon name="edit" class="signature-icon" />
@ -105,9 +105,9 @@
<!-- 执法人员签名 -->
<div class="signature-section">
<div class="signature-label">执法人员签名</div>
<div class="signature-box" @click="!isViewMode && handleSignature('officer')">
<div class="signature-box" @click="!isViewMode && openSignature('officer')">
<template v-if="officerSignature">
<div class="signed-text">已签名</div>
<van-image :src="officerSignature" fit="contain" class="signature-img" />
</template>
<template v-else>
<van-icon name="edit" class="signature-icon" />
@ -140,11 +140,35 @@
</van-button>
</div>
</div>
<!-- 签名弹窗 -->
<van-popup v-model:show="showSignaturePopup" round position="bottom" :style="{ height: '60%' }" class="signature-popup">
<div class="popup-header">
<span class="popup-cancel" @click="showSignaturePopup = false">取消</span>
<span class="popup-title">{{ currentSignatureType === 'party' ? '当事人签名' : '执法人员签名' }}</span>
<span class="popup-confirm" @click="confirmSignature">确认</span>
</div>
<div class="canvas-wrapper">
<canvas
ref="signatureCanvas"
class="signature-canvas"
@touchstart.prevent="handleTouchStart"
@touchmove.prevent="handleTouchMove"
@touchend.prevent="handleTouchEnd"
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseup="handleMouseUp"
></canvas>
</div>
<div class="popup-footer">
<van-button size="small" round @click="clearSignature">清除</van-button>
</div>
</van-popup>
</div>
</template>
<script setup>
import { ref, computed } from "vue";
import { ref, computed, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast } from "vant";
@ -183,16 +207,125 @@ const documentImages = ref(isViewMode.value ? completedData.documentImages : [])
const evidenceImages = ref(isViewMode.value ? completedData.evidenceImages : []);
const lawDocImages = ref(isViewMode.value ? completedData.lawDocImages : []);
// 签名数据
// 签名数据（存储 base64）
const partySignature = ref(isViewMode.value ? "signed" : "");
const officerSignature = ref(isViewMode.value ? "signed" : "");
// 描述
const description = ref(isViewMode.value ? completedData.description : "");
// 返回
function goBack() {
router.back();
// 签名弹窗
const showSignaturePopup = ref(false);
const currentSignatureType = ref("party");
const signatureCanvas = ref(null);
let ctx = null;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// 打开签名弹窗
async function openSignature(type) {
currentSignatureType.value = type;
showSignaturePopup.value = true;
await nextTick();
initCanvas();
}
// 初始化 canvas
function initCanvas() {
const canvas = signatureCanvas.value;
if (!canvas) return;
ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = 3;
ctx.strokeStyle = "#333";
}
// 获取触摸/鼠标坐标
function getPos(e) {
const canvas = signatureCanvas.value;
const rect = canvas.getBoundingClientRect();
if (e.touches) {
return {
x: e.touches[0].clientX - rect.left,
y: e.touches[0].clientY - rect.top
};
}
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
// 鼠标事件
function handleMouseDown(e) {
isDrawing = true;
const pos = getPos(e);
lastX = pos.x;
lastY = pos.y;
}
function handleMouseMove(e) {
if (!isDrawing) return;
const pos = getPos(e);
drawLine(pos.x, pos.y);
lastX = pos.x;
lastY = pos.y;
}
function handleMouseUp() {
isDrawing = false;
}
// 触摸事件
function handleTouchStart(e) {
isDrawing = true;
const pos = getPos(e);
lastX = pos.x;
lastY = pos.y;
}
function handleTouchMove(e) {
if (!isDrawing) return;
const pos = getPos(e);
drawLine(pos.x, pos.y);
lastX = pos.x;
lastY = pos.y;
}
function handleTouchEnd() {
isDrawing = false;
}
// 绑线
function drawLine(x, y) {
if (!ctx) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
}
// 清除签名
function clearSignature() {
if (!ctx || !signatureCanvas.value) return;
const canvas = signatureCanvas.value;
const rect = canvas.getBoundingClientRect();
ctx.clearRect(0, 0, rect.width, rect.height);
}
// 确认签名
function confirmSignature() {
if (!signatureCanvas.value) return;
const dataUrl = signatureCanvas.value.toDataURL("image/png");
if (currentSignatureType.value === "party") {
partySignature.value = dataUrl;
} else {
officerSignature.value = dataUrl;
}
showSignaturePopup.value = false;
}
// 模拟图片上传
@ -215,20 +348,16 @@ function handleImageUpload(type) {
}
}
// 签名
function handleSignature(type) {
if (type === 'party') {
partySignature.value = "signed";
} else {
officerSignature.value = "signed";
}
}
// 保存
function handleSave() {
Toast.success("数据已保存");
router.back();
}
// 返回
function goBack() {
router.back();
}
</script>
<style lang="scss" scoped>
@ -353,7 +482,7 @@ function handleSave() {
}
.signature-box {
height: 100px;
height: 140px;
border: 2px dashed #d1d5db;
border-radius: 12px;
display: flex;
@ -362,6 +491,7 @@ function handleSave() {
justify-content: center;
background: #f9fafb;
cursor: pointer;
overflow: hidden;
&:active {
background: #f1f5f9;
@ -378,9 +508,9 @@ function handleSave() {
color: #94a3b8;
}
.signed-text {
font-size: 14px;
color: #333;
.signature-img {
width: 100%;
height: 100%;
}
}
}
@ -409,4 +539,60 @@ function handleSave() {
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
}
.signature-popup {
display: flex;
flex-direction: column;
background: #f8f9fa;
}
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #e5e5e5;
background: white;
.popup-cancel {
font-size: 15px;
color: #666;
}
.popup-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.popup-confirm {
font-size: 15px;
color: #2563eb;
font-weight: 600;
}
}
.canvas-wrapper {
flex: 1;
padding: 16px;
overflow: hidden;
}
.signature-canvas {
width: 100%;
height: 100%;
background: white;
border-radius: 12px;
border: 1px solid #e5e5e5;
touch-action: none;
cursor: crosshair;
}
.popup-footer {
padding: 12px 16px;
display: flex;
justify-content: center;
background: white;
border-top: 1px solid #e5e5e5;
}
</style>

12
src/pages/login/index.vue
View File

@ -104,9 +104,12 @@ function _idCardlogin() {
const encryptedIdCard = encryptAES(sfzh);
idCardlogin({ username: encryptedIdCard })
.then((res) => {
const token = res.accessToken;
_getUserInfo();
store.commit("setToken", token);
if(res){
const token = res.accessToken;
store.commit("setToken", token);
_getUserInfo();
}
})
.catch((err) => {
Toast.clear();
@ -144,7 +147,7 @@ function onIdCardSubmit() {
idCardlogin({ username: encryptedIdCard })
.then((res) => {
const token = res.jwtToken;
_getUserInfo(res.userId, idCardForm.idCard, res.deptList[0].deptName, res.deptList);
_getUserInfo();
store.commit("setToken", token);
})
.catch((err) => {
@ -181,7 +184,6 @@ const onSubmit = (e) => {
//获取用户信息
function _getUserInfo() {
getUserOrFjInfo({}).then((res) => {
console.log(res,'+++++++');
store.commit("userStatus", res);
setTimeout(() => {
isLoading.value = false;

5
src/pages/trafficAlerts/detail.vue
View File

@ -282,17 +282,14 @@ function formatTime(timestamp) {
// 获取详情数据
const fetchDetail = async () => {
if (!taskId) return;
loading.value = true;
try {
const res = await getTrafficEventDetail(taskId);
console.log(res, '详情res');
if (res) {
const data = res.data || res;
// 处理详情数据
alertDetail.value = data.eventDetailVO;
taskDetail.value = data.tasksVo;
taskDetail.value = data.eventDetailVO.tasksVo;
allDetail.value = data
// 处理打卡记录

59
src/pages/trafficAlerts/index.vue
View File

@ -9,13 +9,8 @@
<!-- 标签栏 -->
<div class="tabs-bar">
<button
v-for="tab in tabs"
:key="tab.id"
class="tab-item"
:class="{ active: activeTab === tab.id }"
@click="activeTab = tab.id"
>
<button v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ active: activeTab === tab.id }"
@click="activeTab = tab.id">
{{ tab.label }}
</button>
</div>
@ -26,44 +21,24 @@
<van-loading v-if="initLoading" class="loading-state" color="#2563eb">加载中...</van-loading>
<!-- 列表内容 -->
<van-list
v-else
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoadMore"
>
<div
v-for="alert in filteredAlerts"
:key="alert.id"
class="alert-card"
>
<van-list v-else v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoadMore">
<div v-for="alert in filteredAlerts" :key="alert.id" class="alert-card">
<!-- 等级、标题和状态标签 -->
<div class="card-header">
<div class="card-title-row">
<span
class="level-tag"
:class="getLevelClass(alert.eventLevel)"
>
<span class="level-tag" :class="getLevelClass(alert.eventLevel)">
{{ levelMap[alert.eventLevel] }}
</span>
<span class="alert-title">{{ alert.eventType }}</span>
</div>
<span
class="status-tag"
:class="getStatusClass(alert.taskStatus)"
>
<span class="status-tag" :class="getStatusClass(alert.taskStatus)">
{{ statusMap[alert.taskStatus] }}
</span>
</div>
<!-- 图片 -->
<div class="card-image" v-if="alert.image">
<van-image
:src="alert.imgUrl"
fit="cover"
class="alert-img"
/>
<van-image :src="alert.imgUrl" fit="cover" class="alert-img" />
</div>
<!-- 详细信息 -->
@ -83,13 +58,7 @@
<!-- 操作按钮 -->
<div class="card-actions">
<!-- 待执行/执行中/已完成 - 显示查看详情 -->
<van-button
block
round
type="primary"
class="action-btn"
@click="handleDetail(alert)"
>
<van-button block round type="primary" class="action-btn" @click="handleDetail(alert)">
查看详情
</van-button>
@ -108,11 +77,7 @@
</van-list>
<!-- 空状态 -->
<van-empty
v-if="filteredAlerts.length === 0 && !initLoading"
description="暂无数据"
class="empty-state"
/>
<van-empty v-if="filteredAlerts.length === 0 && !initLoading" description="暂无数据" class="empty-state" />
</div>
</div>
</template>
@ -124,7 +89,7 @@ import { getTrafficEventList } from "@/api/traffic";
const router = useRouter();
const filteredAlerts = ref([]);
const userInfo=ref(JSON.parse(localStorage.getItem('userInfo')))
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
// 状态
const activeTab = ref("all");
const loading = ref(false);
@ -143,8 +108,8 @@ const listQuery = ref({
eventCategory: '1',
page: 1,
pageSize: 10,
taskStatus:"",
userId:"4"
taskStatus: "",
userId: "4"
// userId:userInfo.value.id
});

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

@ -6,134 +6,93 @@
<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>
<!-- 加载状态 -->
<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>
<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 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="detail-item">
<van-icon name="clock" class="detail-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ violationDetail.time }}</span>
<!-- 图片 -->
<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>
</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 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>
<div class="checkin-row">
<span class="checkin-label">打卡账号：</span>
<span class="checkin-value">21515800</span>
<!-- 底部按钮 - 未执行状态 -->
<div v-if="allDetail.taskStatus == '0'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="handleCheckIn">
定位打卡
</van-button>
</div>
<div class="checkin-row checkin-location">
<van-icon name="location" class="location-icon" />
<span>四川省绵阳市涪城区磨家街道磨光街2号</span>
<!-- 底部按钮 - 执行中状态 -->
<div v-if="allDetail.taskStatus == '1'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="showResultDialog">
执行结果
</van-button>
</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>
</template>
<!-- 执行结果弹框 -->
<van-popup v-model:show="showMatchDialog" round class="result-popup">
@ -155,104 +114,58 @@
</template>
<script setup>
import { ref, computed } from "vue";
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();
// 获取URL参数
const violationId = route.query.id || "1";
const status = route.query.status || "未执行";
const hideCheckIn = route.query.hideCheckIn === "true";
// 加载状态
const loading = ref(false);
// 执行结果弹框状态
const showMatchDialog = ref(false);
// 状态映射
const statusMap = {
0: "待执行",
1: "执行中",
2: "已完成",
};
// 违章数据
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: "该车辆在主干道违规停车，影响道路通行。"
}
];
// 等级映射
const levelMap = {
0: "一级",
1: "二级",
2: "三级",
3: "四级"
};
// 根据ID获取详情
const violationDetail = computed(() => {
return violationData.find(v => v.id === violationId) || violationData[0];
});
const violationDetail = ref({})
const allDetail = ref({})
const taskDetail = ref({})
// 获取详情数据
const fetchDetail = async () => {
if (!violationId) return;
loading.value = true;
try {
const res = await getTrafficEventDetail(violationId);
if (res) {
const data = res.data || res;
// 处理详情数据
violationDetail.value = data.eventDetailVO;
taskDetail.value = data.eventDetailVO.tasksVo;
allDetail.value = data
}
} catch (error) {
console.error("获取详情失败:", error);
} finally {
loading.value = false;
}
};
// 状态标签样式
const statusTagClass = computed(() => {
if (status === "执行中") return "status-blue";
@ -260,6 +173,27 @@ const statusTagClass = computed(() => {
return "status-gray";
});
// 等级样式
function getLevelClass(level) {
const map = {
1: "level-red",
2: "level-orange",
3: "level-yellow",
4: "level-blue",
};
return map[level] || "level-blue";
}
// 状态样式
function getStatusClass(status) {
const map = {
0: "status-gray",
1: "status-blue",
2: "status-green",
};
return map[status] || "status-gray";
}
// 返回
function goBack() {
router.back();
@ -294,8 +228,17 @@ function handlePlateMatch(matched) {
path: "/dataReport",
query: { id: violationId, status: status }
});
} else {
// 未拦截成功
interceptNotSuccess(violationId).then(() => {
router.back();
});
}
}
// 页面初始化
onMounted(() => {
fetchDetail();
});
</script>
<style lang="scss" scoped>

1
src/utils/request.js
View File

@ -40,7 +40,6 @@ service.interceptors.request.use(
// 2.响应拦截器
service.interceptors.response.use(
// 请求成功的处理
(response) => {
const {
success,