对接接口

src/api/traffic.js

@@ -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'
+  });
+}

src/pages/dataReport/index.vue

@@ -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() {
+const showSignaturePopup = ref(false);
-  router.back();
+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 {
+    .signature-img {
-      font-size: 14px;
+      width: 100%;
-      color: #333;
+      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>

src/pages/login/index.vue

@@ -104,9 +104,12 @@ function _idCardlogin() {
     const encryptedIdCard = encryptAES(sfzh);
     idCardlogin({ username: encryptedIdCard })
       .then((res) => {
-        const token = res.accessToken;
+        
-        _getUserInfo();
+        if(res){
-        store.commit("setToken", token);
+          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;

src/pages/trafficAlerts/detail.vue

@@ -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
 
       // 处理打卡记录

src/pages/trafficAlerts/index.vue

@@ -9,13 +9,8 @@
 
     <!-- 标签栏 -->
     <div class="tabs-bar">
-      <button
+      <button v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ active: activeTab === tab.id }"
-        v-for="tab in tabs"
+        @click="activeTab = tab.id">
-        :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
+      <van-list v-else v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoadMore">
-        v-else
+        <div v-for="alert in filteredAlerts" :key="alert.id" class="alert-card">
-        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
+              <span class="level-tag" :class="getLevelClass(alert.eventLevel)">
-                class="level-tag"
-                :class="getLevelClass(alert.eventLevel)"
-              >
                 {{ levelMap[alert.eventLevel] }}
               </span>
               <span class="alert-title">{{ alert.eventType }}</span>
             </div>
-            <span
+            <span class="status-tag" :class="getStatusClass(alert.taskStatus)">
-              class="status-tag"
-              :class="getStatusClass(alert.taskStatus)"
-            >
               {{ statusMap[alert.taskStatus] }}
             </span>
           </div>
 
           <!-- 图片 -->
           <div class="card-image" v-if="alert.image">
-            <van-image
+            <van-image :src="alert.imgUrl" fit="cover" class="alert-img" />
-              :src="alert.imgUrl"
-              fit="cover"
-              class="alert-img"
-            />
           </div>
 
           <!-- 详细信息 -->
@@ -83,13 +58,7 @@
           <!-- 操作按钮 -->
           <div class="card-actions">
             <!-- 待执行/执行中/已完成 - 显示查看详情 -->
-            <van-button
+            <van-button block round type="primary" class="action-btn" @click="handleDetail(alert)">
-              block
-              round
-              type="primary"
-              class="action-btn"
-              @click="handleDetail(alert)"
-            >
               查看详情
             </van-button>
 
@@ -108,11 +77,7 @@
       </van-list>
 
       <!-- 空状态 -->
-      <van-empty
+      <van-empty v-if="filteredAlerts.length === 0 && !initLoading" description="暂无数据" class="empty-state" />
-        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:"",
+  taskStatus: "",
-  userId:"4"
+  userId: "4"
   // userId:userInfo.value.id
 });
 

src/pages/violationAlerts/detail.vue

@@ -6,134 +6,93 @@
       <h1 class="nav-title">违章详情</h1>
       <div class="nav-placeholder"></div>
     </div>
-
+    <!-- 加载状态 -->
-    <!-- 违章信息卡片 -->
+    <van-loading v-if="loading" class="loading-state" color="#2563eb">加载中...</van-loading>
-    <div class="detail-card">
+    <template v-else>
-      <!-- 车牌号和状态 -->
+      <!-- 违章信息卡片 -->
-      <div class="card-header">
+      <div class="detail-card">
-        <div class="vehicle-info">
+        <!-- 车牌号和状态 -->
-          <van-icon name="cart" class="vehicle-icon" />
+        <div class="card-header">
-          <span class="plate-number">{{ violationDetail.plateNumber }}</span>
+          <div class="vehicle-info">
-          <span class="plate-color">{{ violationDetail.plateColor }}</span>
+            <van-icon name="cart" class="vehicle-icon" />
-          <span class="separator">|</span>
+            <span class="plate-number">{{ violationDetail.plateNo }}</span>
-          <span class="vehicle-type">{{ violationDetail.vehicleType }}</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">
+        <div class="title-row">
-        <span class="level-tag" :class="violationDetail.levelClass">
+          <span class="level-tag" :class="getLevelClass(violationDetail.eventLevel)">
-          {{ violationDetail.level }}
+            {{ levelMap[violationDetail.eventLevel] }}
-        </span>
+          </span>
-        <span class="alert-title">{{ violationDetail.title }}</span>
+          <span class="alert-title">{{ violationDetail.eventContent }}</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>
+        <div class="card-image" v-if="violationDetail.imgUrl">
-          <span class="value">{{ violationDetail.time }}</span>
+          <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 v-if="allDetail.taskStatus == '1' || allDetail.taskStatus == '2'" class="checkin-card">
-      <div class="checkin-time-row">
+        <div class="checkin-time-row">
-        <span class="checkin-date">11-16 15:56:25</span>
+          <span class="checkin-date">{{allDetail.clickTime}}</span>
-        <span class="checkin-type">【定位打卡】</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>
+      <div v-if="allDetail.taskStatus == '0'" class="action-bar">
-        <span class="checkin-value">21515800</span>
+        <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" />
+      <div v-if="allDetail.taskStatus == '1'" class="action-bar">
-        <span>四川省绵阳市涪城区磨家街道磨光街2号</span>
+        <van-button block round type="primary" class="action-btn" @click="showResultDialog">
+          执行结果
+        </van-button>
       </div>
-
+    </template>
-      <!-- 未拦截成功标识 -->
-      <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">
@@ -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 = [
+const levelMap = {
-  {
+  0: "一级",
-    id: "1",
+  1: "二级",
-    plateNumber: "鄂A12345",
+  2: "三级",
-    plateColor: "蓝色",
+  3: "四级"
-    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(() => {
+const violationDetail = ref({})
-  return violationData.find(v => v.id === violationId) || violationData[0];
+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>

src/utils/request.js

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