From a04340605e227734aa3466086fd0ab08a529976c Mon Sep 17 00:00:00 2001
From: Esacpe <1113279529@qq.com>
Date: Fri, 24 Apr 2026 11:39:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/http.js                      |  18 +
 src/components/ChooseList.vue        | 174 +++++++
 src/components/popupView.vue         | 226 +++++++++
 src/pages/map/index.vue              |  12 +-
 src/pages/my/index.vue               |  23 +-
 src/pages/sspReport/index.vue        | 685 ++++++++++-----------------
 src/pages/trafficAlerts/detail.vue   | 257 +++++-----
 src/pages/trafficAlerts/index.vue    |  47 +-
 src/pages/videoMonitorMap/index.vue  | 372 +++++++++++++++
 src/pages/violationAlerts/detail.vue |  54 +--
 src/pages/violationAlerts/index.vue  |  23 +-
 src/pages/warningList/index.vue      | 227 +++++++++
 12 files changed, 1468 insertions(+), 650 deletions(-)
 create mode 100644 src/api/http.js
 create mode 100644 src/components/ChooseList.vue
 create mode 100644 src/components/popupView.vue
 create mode 100644 src/pages/videoMonitorMap/index.vue
 create mode 100644 src/pages/warningList/index.vue

diff --git a/src/api/http.js b/src/api/http.js
new file mode 100644
index 0000000..7400b1c
--- /dev/null
+++ b/src/api/http.js
@@ -0,0 +1,18 @@
+import { service } from '../utils/request';
+
+export const http = {
+  get(params = {}, url){
+    return service({ url,  method: "get", params});
+  },
+  post(data = {}, url){
+    return service({ url, method: "post", data });
+  },
+  put(data = {}, url){
+    return service({ url, method: "put", data });
+  },
+  delete(data = {}, url){
+    return service({url,method: "delete",data});
+  }
+}
+
+
diff --git a/src/components/ChooseList.vue b/src/components/ChooseList.vue
new file mode 100644
index 0000000..69dddbc
--- /dev/null
+++ b/src/components/ChooseList.vue
@@ -0,0 +1,174 @@
+<template>
+  <van-popup v-model:show="props.modelValue" class="training-popup">
+    <div class="head">{{ props.title }}</div>
+    <div class="companyBox">
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="20" :immediate-check="false">
+        <van-cell @click="handleItemClick(item)" v-for="(item, index) in listData" :key="index" :title="item.name" clickable>
+          <template #right-icon>
+            <van-checkbox v-model="item.checked" :shape="props.isRadio ? 'round' : 'square'" :checked="isSelected(item)" />
+          </template>
+        </van-cell>
+        <van-empty v-if="listData.length <= 0" description="暂无数据" image="default" />
+      </van-list>
+    </div>
+    <div class="footBtns">
+      <van-button round block type="primary" class="btn" @click="handleClose">取消</van-button>
+      <van-button round block type="primary" class="btn" @click="submitForm">确认</van-button>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import { Toast } from 'vant';
+import { getItem } from "@/utils/storage";
+import { http } from "@/api/http";
+import { ref, defineProps, defineEmits, watch } from 'vue'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  isRadio: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: '请选择数据'
+  },
+  type: {
+    type: String,
+    default: ''//选择的类型
+  }
+})
+const emit = defineEmits(['update:modelValue', 'change'])
+const finished = ref(false);
+const loading = ref(false);
+const listData = ref([])
+const selectedItems = ref([]);
+const page = ref(0)
+const total = ref(0)
+
+// 添加缓存对象，用于存储不同类型的完整数据
+const dataCache = ref({})
+
+
+// 获取对应的列表
+const getList = () => {
+  // 检查缓存中是否已经有完整的数据
+  if (dataCache.value[props.type] && dataCache.value[props.type].length > 0) {
+    // 使用缓存数据
+    listData.value = dataCache.value[props.type];
+    total.value = dataCache.value[props.type].length;
+    finished.value = true;
+    loading.value = false;
+    return;
+  }
+
+  let params = { pageNum: page.value, pageSize: 10 };
+  let url = null, methods = 'post'
+  let nameKey = ''
+  switch (props.type) {
+    case 'zfjly':
+      nameKey = 'xmmc'
+      try {
+        let siteArray = JSON.parse(getItem("userInfo").siteArray) || [];
+        listData.value = siteArray.map(site => ({ name: site.siteName, id: site.siteCode }));
+      } catch (error) { }
+      // url = '/mosty-base/baxx/pxxm/page' //接口需要换，现在不知道接口，这个是乱写的接口
+      break;
+  }
+  if (!url) return false;
+  loading.value = true;
+  http[methods](params, url).then(res => {
+    loading.value = false;
+    const arr = res.records.map((el) => {
+      return { name: el[nameKey], ...el }
+    }) || [];
+    listData.value = page.value == 1 ? arr : listData.value.concat(arr);
+    total.value = res.total;
+    // 当数据全部加载完成后，将数据存入缓存
+    if (listData.value.length >= total.value) {
+      dataCache.value[props.type] = listData.value;
+    }
+  }).catch(() => {
+    loading.value = false;
+  })
+}
+//触底加载
+function onLoad() {
+  if (listData.value.length == total.value) return (finished.value = true);
+  page.value += 1;
+  getList();
+}
+
+const isSelected = (item) => {
+  return selectedItems.value.some((i) => i.id === item.id); // 多选
+};
+
+// 选择数据
+const handleItemClick = (item) => {
+  if (props.isRadio) { //单选
+    selectedItems.value = [item]
+  } else { //多选
+    const index = selectedItems.value.findIndex((i) => i.id === item.id);
+    index > -1 ? selectedItems.value.splice(index, 1) : selectedItems.value.push(item);
+  }
+};
+// 关闭
+const handleClose = () => {
+  emit('update:modelValue', false)
+}
+
+// 提交
+const submitForm = () => {
+  if(selectedItems.value.length <= 0) return Toast('请至少选择一项');
+  emit('update:modelValue', false)
+  emit('change', selectedItems.value)
+}
+watch(() => props.modelValue, val => {
+  if (val) {
+    // 重置分页状态，但保留listData以便在请求失败时显示缓存数据
+    page.value = 1;
+    finished.value = false;
+    loading.value = false;
+    // 只有在缓存为空时才清空listData
+    if (!dataCache.value[props.type]) {
+      listData.value = [];
+    }
+    getList();
+  }
+}, { immediate: true, deep: true })
+</script>
+
+<style lang="scss" scoped>
+.companyBox {
+  height: 60vh;
+  overflow: auto;
+}
+
+.head {
+  border-bottom: 1px solid #e7e7e7;
+  text-align: center;
+  font-size: 14px;
+  line-height: 40px;
+}
+
+.footBtns{
+  margin-top: 16px;
+  margin-bottom: 16px;
+  display: flex;
+  padding-left: 10px;
+  padding-right: 10px;
+  .btn{
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+</style>
+<style>
+.training-popup {
+  width: 90%;
+  border-radius: 5px;
+}
+</style>
diff --git a/src/components/popupView.vue b/src/components/popupView.vue
new file mode 100644
index 0000000..40e534d
--- /dev/null
+++ b/src/components/popupView.vue
@@ -0,0 +1,226 @@
+<template>
+  <van-popup v-model:show="showPopup" position="bottom" round
+    :style="{ maxHeight: '70%', width: '98%', marginLeft: '1%' }">
+    <div class="popup-container">
+      <div class="popup-header" v-if="props.title && props.type == 'list'">
+        <div class="popup-title">{{ props.title }}</div>
+      </div>
+      <!-- 列表选择 -->
+      <div class="popup-list" v-if="props.type == 'list'">
+        <van-empty v-if="!listData.length" :description="emptyText"  />
+        <template v-else>
+          <van-cell v-for="(item, index) in listData" :key="index" :title="item[titleKey]"
+            @click="handleItemClick(item)" clickable>
+            <template #right-icon>
+              <van-checkbox v-if="multiple" :checked="isSelected(item)" />
+            </template>
+          </van-cell>
+        </template>
+      </div>
+
+      <div class="popup-footer" v-if="props.type == 'list'">
+        <span class="btn" @click="showPopup = false">取消</span>
+        <span class="gapline" v-if="multiple"></span>
+        <span class="btn" v-if="multiple" @click="handleConfirm">确认 {{ selectedItems.length }}</span>
+      </div>
+
+      <!-- 时间选择 -->
+      <van-datetime-picker v-if="props.type === 'datetime'" v-model="currentDate" type="datetime" title="选择日期"
+        :min-date="minDate" :max-date="maxDate" :formatter="formatter" @confirm="handleDateConfirm"
+        @cancel="showPopup = false" />
+      <!-- 选择时间 -->
+      <van-datetime-picker v-if="props.type === 'time'" v-model="currentTime" type="time" title="选择时间"
+        @confirm="handleDateConfirm" @cancel="showPopup = false" />
+
+      <!-- 日期选择 -->
+      <van-datetime-picker v-if="props.type === 'date'" v-model="currentDate" type="date" @confirm="handleDateConfirm"
+        @cancel="showPopup = false" :min-date="minDate" />
+
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import { timeValidate } from "@/utils/tools.js";
+import { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  // 弹窗展示
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  // 接受的数据
+  listData: {
+    type: Array,
+    default: () => [],
+  },
+  // 数据渲染字段
+  titleKey: {
+    type: String,
+    default: "text",
+  },
+  // 标题
+  title: {
+    type: String,
+    default: "",
+  },
+  // 是否多选
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  // 接受数据的类型 list 列表 date 日期 datetime 时间
+  type: {
+    type: String,
+    default: "list",
+  },
+  // 空数据提示
+  emptyText: {
+    type: String,
+    default: "暂无数据",
+  },
+});
+
+const currentTime = ref();
+const currentDate = ref(new Date());
+const minDate = ref(new Date(2020, 0, 1));
+const maxDate = ref(new Date(new Date().getFullYear() + 10, 11, 31));
+const emit = defineEmits(["update:show", "select"]);
+
+const formatter = (type, val) => {
+  switch (type) {
+    case "year":
+      return `${val}年`;
+    case "month":
+      return `${val}月`;
+    case "day":
+      return `${val}日`;
+    case "hour":
+      return `${val}时`;
+    case "minute":
+      return `${val}分`;
+    default:
+      return val;
+  }
+};
+
+const selectedItems = ref([]);
+
+const showPopup = computed({
+  get: () => props.show,
+  set: (val) => emit("update:show", val),
+});
+
+const handleItemClick = (item) => {
+  if (props.multiple) {
+    const index = selectedItems.value.findIndex(
+      (i) => i[props.titleKey] === item[props.titleKey]
+    );
+    if (index > -1) {
+      selectedItems.value.splice(index, 1);
+    } else {
+      selectedItems.value.push(item);
+    }
+  } else {
+    emit("select", item);
+    showPopup.value = false;
+  }
+};
+
+const isSelected = (item) => {
+  return selectedItems.value.some(
+    (i) => i[props.titleKey] === item[props.titleKey]
+  );
+};
+
+const handleConfirm = () => {
+  emit("select", selectedItems.value);
+  showPopup.value = false;
+  selectedItems.value = [];
+};
+
+
+// 时间选择
+const handleDateConfirm = (value) => {
+  if (props.type === "date") {
+    emit("select", { value: timeValidate(value, "ymd") });
+  } else if (props.type === "datetime") {
+    emit("select", { value:  timeValidate(value) });
+  } else {
+    emit("select", { value: value });
+  }
+  showPopup.value = false;
+};
+
+
+
+//选择器字段
+onMounted(() => {
+});
+</script>
+
+<style scoped lang="scss">
+.popup-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+}
+
+.popup-header {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.popup-title {
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.popup-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+  background: rgba(0, 0, 0, 0.5);
+  max-height: 300px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.popup-footer {
+  padding: 16px;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(183, 288, 231, 0.1);
+
+  .btn {
+    flex: 1;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .gapline {
+    width: 2px;
+    height: 30px;
+    background: #eee;
+    margin: 0 10px;
+  }
+}
+
+.van-cell {
+  text-align: center;
+}
+
+::v-deep .van-cascader {
+  height: 370px;
+  overflow: hidden;
+}
+
+::v-deep .van-tabs__track {
+  height: 320px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+</style>
diff --git a/src/pages/map/index.vue b/src/pages/map/index.vue
index 4a2dfe3..def5d07 100644
--- a/src/pages/map/index.vue
+++ b/src/pages/map/index.vue
@@ -20,7 +20,6 @@
       <!-- 右下角浮动按钮 -->
       <div class="float-buttons">
         <div class="float-btn" @click="handleLocationClick"><van-icon name="location" /></div>
-        <div class="float-btn"><van-icon name="layer" /></div>
       </div>
 
       <!-- 标记详情卡片 -->
@@ -123,6 +122,10 @@ async function fetchUnfinishedEvents() {
     const res = await getEventUnfinished({ eventCategory, areaCode });
     console.log('未完成预警事件:', res);
     const list = Array.isArray(res) ? res : (res.data || []);
+    list.forEach(item => {
+      item.jd = 104.39013;
+      item.wd = 31.1244028;
+    });
     markers.value = list;
     nextTick(() => {
       addMapMarkers(list);
@@ -149,7 +152,7 @@ function getMarkerColor(eventLevel) {
 function addMapMarkers(list) {
   if (!window.map || !list || list.length === 0) return;
 
-  const validList = list.filter(item => item.longitude && item.latitude);
+  const validList = list.filter(item => item.jd && item.wd);
 
   validList.forEach(item => {
     const color = getMarkerColor(item.eventLevel);
@@ -162,13 +165,14 @@ function addMapMarkers(list) {
     icon.style.cssText = 'color:#fff;font-size:18px;font-weight:bold;line-height:1;';
     el.appendChild(icon);
 
-    const marker = window.map.Marker(el, [item.longitude, item.latitude], { anchor: 'bottom' });
+    const marker = window.map.Marker(el, [item.jd, item.wd], { anchor: 'bottom' });
 
     el.addEventListener('click', () => {
+      console.log('点击了标记', item);
       selectedMarker.value = {
         id: item.id,
         type: activeAlertType.value,
-        title: item.eventType || item.title || '预警事件',
+        title: item.msg || item.eventType || item.title || '预警事件',
         location: item.siteName || item.location || '',
         time: item.eventTime || item.time || '',
         rawData: item
diff --git a/src/pages/my/index.vue b/src/pages/my/index.vue
index a821bac..1c09f23 100644
--- a/src/pages/my/index.vue
+++ b/src/pages/my/index.vue
@@ -23,11 +23,11 @@
       <div class="stats-grid">
         <div class="stat-item">
           <div class="stat-value violation">{{ stats.violationCount }}</div>
-          <div class="stat-label">违章预警</div>
+          <div class="stat-label">违规任务</div>
         </div>
         <div class="stat-item">
           <div class="stat-value traffic">{{ stats.trafficCount }}</div>
-          <div class="stat-label">路况预警</div>
+          <div class="stat-label">路况任务</div>
         </div>
         <div class="stat-item">
           <div class="stat-value completed">{{ stats.completedCount }}</div>
@@ -62,7 +62,7 @@
           <span class="menu-label">执法点位</span>
         </div>
         <div class="menu-right">
-          <span class="location-name">中山大道与建设大道交叉口</span>
+          <span class="location-name">{{ dataForm.sitPosition }}</span>
           <van-icon name="arrow" class="arrow-icon" />
         </div>
       </div>
@@ -94,23 +94,29 @@
 
     <!-- 底部导航 -->
     <BottomTabs :active-tab="'profile'" />
+    <!-- 弹出框 -->
+    <ChooseList v-model="showCompany" title="选择执法点位" type="zfjly" @change="handleSeclt"></ChooseList>
   </div>
 </template>
 
 <script setup>
+import ChooseList from "@/components/ChooseList.vue";
 import { ref, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { Dialog } from "vant";
 import BottomTabs from "@/components/bottomTabs.vue";
 
 const router = useRouter();
-
+const showCompany = ref(false);
 // 用户信息
 const userInfo = ref({});
-const userNameChar = computed(() => {
-  const name = userInfo.value?.userName;
-  return name ? name.charAt(0) : '?';
-});
+const dataForm = ref({
+  sitPosition:'中山大道与建设大道交叉口'
+})
+const handleSeclt = (val) => {
+  console.log("选择的执法点位：", val);
+  dataForm.value.sitPosition = val[0]?.name || '';
+}
 
 // 预警语音开关
 const alarmVoiceEnabled = ref(true);
@@ -125,6 +131,7 @@ const stats = ref({
 
 // 执法点位点击
 function handleLocationClick() {
+  showCompany.value = true;
   console.log("执法点位");
 }
 
diff --git a/src/pages/sspReport/index.vue b/src/pages/sspReport/index.vue
index 01d6b74..7793b5f 100644
--- a/src/pages/sspReport/index.vue
+++ b/src/pages/sspReport/index.vue
@@ -12,207 +12,153 @@
     </div>
 
     <!-- 表单内容 -->
-    <div class="form-content">
-      <!-- 设备信息 -->
-      <div class="section-card">
-        <div class="section-header" @click="toggleSection('device')">
-          <div class="section-title-box">
-            <span class="section-icon">▶</span>
-            <span class="section-title">设备信息</span>
-          </div>
-          <van-icon :name="openSections.device ? 'arrow-up' : 'arrow-down'" />
-        </div>
-        <div class="section-body" v-show="openSections.device">
-          <van-cell-group :border="false">
-            <van-field v-model="formData.sbbh" is-link readonly name="设备编号" label="设备编号" placeholder="请选择"
-              @click="openPicker({ columns: deviceColumns, title: '选择设备编号', onConfirm: onDeviceConfirm })" />
-            <van-field v-model="formData.zfmj" is-link readonly name="执法民警" label="执法民警" placeholder="请选择"
-              @click="openPicker({ columns: officerColumns, title: '选择执法民警', onConfirm: onOfficerConfirm })" />
-          </van-cell-group>
-        </div>
-      </div>
+    <van-form @submit="handleSubmit" class="form">
+      <div class="form-content">
 
-      <!-- 车辆信息 -->
-      <div class="section-card">
-        <div class="section-header" @click="toggleSection('vehicle')">
-          <div class="section-title-box">
-            <span class="section-icon">▶</span>
-            <span class="section-title">车辆信息</span>
-          </div>
-          <van-icon :name="openSections.vehicle ? 'arrow-up' : 'arrow-down'" />
-        </div>
-        <div class="section-body" v-show="openSections.vehicle">
-          <van-cell-group :border="false">
-            <van-field v-model="formData.clfl" is-link readonly name="车辆分类" label="车辆分类" placeholder="请选择"
-              @click="openPicker({ columns: clflColumns, title: '选择车辆分类', onConfirm: onClflConfirm })" />
-            <van-field v-model="formData.hpzl" is-link readonly name="号牌种类" label="号牌种类" placeholder="请选择"
-              @click="openPicker({ columns: hpzlColumns, title: '选择号牌种类', onConfirm: onHpzlConfirm })" />
-            <van-field v-model="formData.hppch" name="号牌牌号" label="号牌牌号" placeholder="请输入" maxlength="10" />
-          </van-cell-group>
-        </div>
-      </div>
-
-      <!-- 违法信息 -->
-      <div class="section-card">
-        <div class="section-header" @click="toggleSection('violation')">
-          <div class="section-title-box">
-            <span class="section-icon">▶</span>
-            <span class="section-title">违法信息</span>
-          </div>
-          <van-icon :name="openSections.violation ? 'arrow-up' : 'arrow-down'" />
-        </div>
-        <div class="section-body" v-show="openSections.violation">
-          <van-cell-group :border="false">
-            <van-field v-model="formData.wgxzq" is-link readonly name="非法行政区划" label="非法行政区划" placeholder="请输入非法行政区划"
-              @click="openPicker({ columns: xzqhColumns, title: '选择行政区划', onConfirm: onXzqhConfirm })" />
-            <van-field v-model="formData.wgdd" name="违法地点" label="违法地点" placeholder="请输入违法地点" />
-            <van-field v-model="formData.ldmkms" name="路段码公里数" label="路段码公里数" placeholder="请输入路段码公里数" />
-            <van-field v-model="formData.ddmcs" name="地点米数" label="地点米数" placeholder="请输入地点米数" />
-            <van-field v-model="formData.wfdz" name="违法地址" label="违法地址" placeholder="请输入违法地址" />
-            <van-field v-model="formData.wffssj" is-link readonly name="违法发生时间" label="违法发生时间" placeholder="请选择违法发生时间"
-              @click="showWffssjPicker = true" />
-            <van-field v-model="formData.wfsj" name="违法时间" label="违法时间" placeholder="HH:mm:ss" />
-            <van-field v-model="formData.scz" name="实测值" label="实测值" placeholder="请输入实测值" />
-            <van-field v-model="formData.bzz" name="标准值" label="标准值" placeholder="请输入标准值" />
-            <van-field v-model="formData.wffxjg" name="违法发现机关" label="违法发现机关" placeholder="请输入违法发现机关" />
-          </van-cell-group>
-        </div>
-      </div>
-
-      <!-- 照片信息 -->
-      <div class="section-card">
-        <div class="section-header" @click="toggleSection('photo')">
-          <div class="section-title-box">
-            <span class="section-icon">▶</span>
-            <span class="section-title">照片信息</span>
-          </div>
-          <van-icon :name="openSections.photo ? 'arrow-up' : 'arrow-down'" />
-        </div>
-        <div class="section-body" v-show="openSections.photo">
-          <!-- 照片上传卡片 -->
-          <div class="photo-upload-list">
-            <div class="photo-upload-item" v-for="(photo, index) in photoList" :key="index">
-              <div style="text-align: left;">照片{{ index + 1 }}</div>
-              <van-uploader :max-count="1" :after-read="(file) => onPhotoRead(file, index)" :preview-size="200"
-                :show-upload="!photo.url">
-                <div class="photo-upload-content" v-if="!photo.url">
-                  <van-icon name="photograph" class="photo-icon" />
-                  <div class="photo-text">点击拍照/上传</div>
-                </div>
-              </van-uploader>
-              <van-image
-                v-if="photo.url"
-                :src="photo.url"
-                class="photo-preview-img"
-                width="100"
-                height="100"
-                fit="cover"
-                radius="6"
-                preview
-                :preview-src-list="[photo.url]"
-              />
-              <van-icon name="cross" class="photo-delete" v-if="photo.url" @click.stop="deletePhoto(index)" />
-              <van-field v-model="photo.url" label="图片链接" placeholder="请输入图片链接" class="photo-link-field" />
+        
+        <!-- 设备信息 -->
+        <div class="section-card">
+          <div class="section-header" @click="toggleSection('device')">
+            <div class="section-title-box">
+              <span class="section-icon">▶</span>
+              <span class="section-title">设备信息</span>
             </div>
+            <van-icon :name="openSections.device ? 'arrow-up' : 'arrow-down'" />
+          </div>
+          <div class="section-body" v-show="openSections.device">
+            <van-cell-group :border="false">
+              <van-field v-model="formData.sbbh" @click="openPicker('设备编号', 'sbbh')" is-link readonly name="设备编号" label="设备编号" placeholder="请选择"  required :rules="[{ required: true, message: '请选择设备编号' }]"/>
+              <van-field v-model="formData.zfmj" @click="openPicker('执法民警', 'zfmj')" is-link readonly name="执法民警" label="执法民警" placeholder="请选择" required :rules="[{ required: true, message: '请选择执法民警' }]"/>
+            </van-cell-group>
+          </div>
+        </div>
+
+        <!-- 车辆信息 -->
+        <div class="section-card">
+          <div class="section-header" @click="toggleSection('vehicle')">
+            <div class="section-title-box">
+              <span class="section-icon">▶</span>
+              <span class="section-title">车辆信息</span>
+            </div>
+            <van-icon :name="openSections.vehicle ? 'arrow-up' : 'arrow-down'" />
+          </div>
+          <div class="section-body" v-show="openSections.vehicle">
+            <van-cell-group :border="false">
+              <van-field v-model="formData.clfl" @click="openPicker('车辆分类', 'clfl')" is-link readonly name="车辆分类" label="车辆分类" placeholder="请选择"/>
+              <van-field v-model="formData.hpzl" @click="openPicker('号牌种类', 'hpzl')" is-link readonly name="号牌种类" label="号牌种类" placeholder="请选择"/>
+              <van-field v-model="formData.hppch" name="号牌牌号" label="号牌牌号" placeholder="请输入" maxlength="10" />
+            </van-cell-group>
+          </div>
+        </div>
+
+        <!-- 违法信息 -->
+        <div class="section-card">
+          <div class="section-header" @click="toggleSection('violation')">
+            <div class="section-title-box">
+              <span class="section-icon">▶</span>
+              <span class="section-title">违法信息</span>
+            </div>
+            <van-icon :name="openSections.violation ? 'arrow-up' : 'arrow-down'" />
+          </div>
+          <div class="section-body" v-show="openSections.violation">
+            <van-cell-group :border="false">
+              <van-field v-model="formData.wgxzq" @click="openPicker('非法行政区划', 'wgxzq')" is-link readonly name="非法行政区划" label="非法行政区划" placeholder="请输入非法行政区划" />
+              <van-field v-model="formData.wgdd" name="违法地点" label="违法地点" placeholder="请输入违法地点" required :rules="[{ required: true, message: '请输入违法地点' }]" />
+              <van-field v-model="formData.ldmkms" name="路段码公里数" label="路段码公里数" placeholder="请输入路段码公里数" />
+              <van-field v-model="formData.ddmcs" name="地点米数" label="地点米数" placeholder="请输入地点米数" />
+              <van-field v-model="formData.wfdz" name="违法地址" label="违法地址" placeholder="请输入违法地址" />
+              <van-field v-model="formData.wffssj" @click="openPicker('违法发生时间', 'wffssj')" is-link readonly name="违法发生时间" label="违法发生时间" placeholder="请选择违法发生时间"/>
+              <van-field v-model="formData.wfsj" name="违法时间" label="违法时间" placeholder="HH:mm:ss" />
+              <van-field v-model="formData.scz" name="实测值" label="实测值" placeholder="请输入实测值" />
+              <van-field v-model="formData.bzz" name="标准值" label="标准值" placeholder="请输入标准值" />
+              <van-field v-model="formData.wffxjg" name="违法发现机关" label="违法发现机关" placeholder="请输入违法发现机关" />
+            </van-cell-group>
+          </div>
+        </div>
+
+        <!-- 照片信息 -->
+        <div class="section-card">
+          <div class="section-header" @click="toggleSection('photo')">
+            <div class="section-title-box">
+              <span class="section-icon">▶</span>
+              <span class="section-title">照片信息</span>
+            </div>
+            <van-icon :name="openSections.photo ? 'arrow-up' : 'arrow-down'" />
+          </div>
+          <div class="section-body" v-show="openSections.photo">
+            <!-- 照片上传卡片 -->
+            <div class="photo-upload-list">
+              <div class="photo-upload-item" v-for="(photo, index) in photoList" :key="index">
+                <div style="text-align: left;">照片{{ index + 1 }}</div>
+                <van-uploader :max-count="1" :after-read="(file) => onPhotoRead(file, index)" :preview-size="200"
+                  :show-upload="!photo.url">
+                  <div class="photo-upload-content" v-if="!photo.url">
+                    <van-icon name="photograph" class="photo-icon" />
+                    <div class="photo-text">点击拍照/上传</div>
+                  </div>
+                </van-uploader>
+                <van-image v-if="photo.url" :src="photo.url" :preview-src-list="[photo.url]" class="photo-preview-img" width="100" height="100" fit="cover" radius="6" preview/>
+                <van-icon v-if="photo.url" @click.stop="deletePhoto(index)" name="cross" class="photo-delete"  />
+                <van-field v-model="photo.url" label="图片链接" placeholder="请输入图片链接" class="photo-link-field" />
+              </div>
+            </div>
+            <!-- 照片基本信息 -->
+            <van-cell-group :border="false">
+              <van-field v-model="formData.zpsl" name="照片数量" label="照片数量" type="number" placeholder="请输入照片数量" required :rules="[{ required: true, message: '请输入照片数量' }]" />
+              <van-field v-model="formData.tpmc" name="图片文件名" label="图片文件名" placeholder="请输入图片文件名" />
+              <van-field v-model="formData.tpfs" @click="openPicker('图片方式', 'tpfs')" is-link readonly name="图片方式" label="图片方式" placeholder="请选择图片方式"/>
+              <van-field v-model="formData.wfspdz" name="违法视频地址" label="违法视频地址" placeholder="请输入违法视频地址" />
+            </van-cell-group>
+          </div>
+        </div>
+
+        <!-- 其他信息 -->
+        <div class="section-card">
+          <div class="section-header" @click="toggleSection('other')">
+            <div class="section-title-box">
+              <span class="section-icon">▶</span>
+              <span class="section-title">其他信息</span>
+            </div>
+            <van-icon :name="openSections.other ? 'arrow-up' : 'arrow-down'" />
+          </div>
+          <div class="section-body" v-show="openSections.other">
+            <van-cell-group :border="false">
+              <van-field v-model="formData.qtlx" name="通知书号" label="通知书号" placeholder="请输入通知书号"/>
+              <van-field v-model="formData.tzrq" @click="openPicker('通知日期', 'tzrq')" is-link readonly name="通知日期" label="通知日期" placeholder="请输入通知日期" />
+            </van-cell-group>
           </div>
-          <!-- 照片基本信息 -->
-          <van-cell-group :border="false">
-            <van-field v-model="formData.zpsl" name="照片数量" label="照片数量 *" placeholder="请选择照片数量" />
-            <van-field v-model="formData.tpmc" name="图片文件名" label="图片文件名" placeholder="请输入图片文件名" />
-            <van-field v-model="formData.tpfs" is-link readonly name="图片方式" label="图片方式" placeholder="请选择图片方式"
-              @click="openPicker({ columns: tpfsColumns, title: '选择图片方式', onConfirm: onTpfsConfirm })" />
-            <van-field v-model="formData.wfspdz" name="违法视频地址" label="违法视频地址" placeholder="请输入违法视频地址" />
-          </van-cell-group>
         </div>
       </div>
-
-      <!-- 其他信息 -->
-      <div class="section-card">
-        <div class="section-header" @click="toggleSection('other')">
-          <div class="section-title-box">
-            <span class="section-icon">▶</span>
-            <span class="section-title">其他信息</span>
-          </div>
-          <van-icon :name="openSections.other ? 'arrow-up' : 'arrow-down'" />
-        </div>
-        <div class="section-body" v-show="openSections.other">
-          <van-cell-group :border="false">
-            <van-field v-model="formData.qtlx" is-link readonly name="通知书号" label="通知书号" placeholder="请输入通知书号"
-              @click="openPicker({ columns: qtlxColumns, title: '选择通知书号', onConfirm: onQtlxConfirm })" />
-            <van-field v-model="formData.bz" name="通知日期" label="通知日期" placeholder="请输入通知日期" />
-          </van-cell-group>
-        </div>
+      <!-- 底部提交按钮 -->
+      <div class="bottom-action">
+        <van-button type="primary" :loading="isLoading" block round color="#2563eb" native-type="submit">
+          提交
+        </van-button>
       </div>
-    </div>
-
-    <!-- 底部提交按钮 -->
-    <div class="bottom-action">
-      <van-button type="primary" block round color="#2563eb" @click="handleSubmit">
-        提交
-      </van-button>
-    </div>
-
-    <!-- 通用选择器 -->
-    <van-popup v-model:show="pickerState.show" position="bottom">
-      <van-picker :columns="pickerState.columns" :title="pickerState.title" @confirm="onPickerConfirm" @cancel="pickerState.show = false" />
-    </van-popup>
-
-    <!-- 违法发生时间选择器 -->
-    <van-popup v-model:show="showWffssjPicker" position="bottom">
-      <van-datetime-picker v-model="currentDate" type="datetime" title="选择违法发生时间" :min-date="minDate"
-        :max-date="maxDate" @confirm="onWffssjConfirm" @cancel="showWffssjPicker = false" />
-    </van-popup>
+    </van-form>
   </div>
+  <PopupView v-model:show="pop.show" :title="pop.title" :type="pop.type" :listData="pop.listData" @select="chooseDate"></PopupView>
 </template>
 
 <script setup>
+import PopupView from '@/components/popupView.vue'
 import { ref, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { showToast, showConfirmDialog } from "vant";
+import { Toast  } from "vant";
 import { upImage } from "@/api/common";
+const isLoading = ref(false);
 const router = useRouter();
-
-// 日期选择器
-const currentDate = ref(new Date());
-const minDate = ref(new Date(2020, 0, 1));
-const maxDate = ref(new Date(new Date().getFullYear() + 10, 11, 31));
+const chooseType = ref(null) //选择的类型
+const pop = reactive({
+  show: false,
+  title: "选择列表",
+  type: "list",
+  multiple: false,
+  listData: [],
+})
 
 // 表单数据
-const formData = reactive({
-  sbbh: "",
-  sbbhdm: "",
-  zfmj: "",
-  zfmjdm: "",
-  clfl: "",
-  clfldm: "",
-  hpzl: "",
-  hpzldm: "",
-  hppch: "",
-  wgxzq: "",
-  wgdd: "",
-  ldmkms: "",
-  ddmcs: "",
-  wfdz: "",
-  wffssj: "",
-  wfrq: "",
-  wfsj: "",
-  wffxjg: "",
-  zplj1: "",
-  zplj2: "",
-  zplj3: "",
-  zpsl: "3",
-  wfspdz: "",
-  tpfs: "",
-  tpfsdm: "",
-  tpmc: "",
-  qtlx: "",
-  qtlxdm: "",
-  bz: ""
-});
-
-// 图片列表
-const fileList = ref([]);
-
+const formData = reactive({});
 // 区域展开状态
 const openSections = reactive({
   device: true,
@@ -229,57 +175,122 @@ const photoList = ref([
   { label: "照片2", url: "", link: "" },
   { label: "照片3", url: "", link: "" }
 ]);
-const currentUploadIndex = ref(0);
-const fileInputs = ref(null);
 
-// 照片数量选择器选项
-const zpslColumns = [
-  { text: "1", value: "1" },
-  { text: "2", value: "2" },
-  { text: "3", value: "3" },
-  { text: "4", value: "4" },
-  { text: "5", value: "5" }
-];
-
-// 图片方式选择器选项
-const tpfsColumns = [
-  { text: "手机拍摄", value: "01" },
-  { text: "相机拍摄", value: "02" },
-  { text: "监控截图", value: "03" },
-  { text: "行车记录仪", value: "04" }
-];
-
-// 选择器显示状态（通用）
-const pickerState = reactive({
-  show: false,
-  columns: [],
-  onConfirm: null,
-  title: ""
-});
-
-function openPicker({ columns, onConfirm, title }) {
-  pickerState.columns = columns;
-  pickerState.title = title;
-  pickerState.onConfirm = onConfirm;
-  pickerState.show = true;
-}
-
-function onPickerConfirm({ selectedOptions }) {
-  if (pickerState.onConfirm) {
-    pickerState.onConfirm(selectedOptions);
+function chooseDate(val) {
+  console.log("选择的值:", val);
+  switch (pop.type) {
+    case 'list':
+      formData[chooseType.value] = val.text;
+      let dmKey = chooseType.value + 'dm';
+      formData[dmKey] = val.value;
+      break;
+    case 'datetime':
+      if(chooseType.value === 'wffssj') {
+        formData.wffssj = val.value;
+        formData.wfrq = val.value.slice(0, 10);
+        formData.wfsj = val.value.slice(11, 19);
+      }
+      break;
+    case 'date':
+      formData[chooseType.value] = val.value;
+      break;
   }
-  pickerState.show = false;
 }
 
-// 选择器显示状态
-const showWffssjPicker = ref(false);
+function openPicker(name,type) {
+  chooseType.value = type;
+  pop.type = 'list';
+  pop.title = `选择${name}`;
+  switch (name) {
+    case '设备编号':
+      pop.listData = [
+        { text: "设备A", value: "001" },
+        { text: "设备B", value: "002" },
+        { text: "设备C", value: "003" }
+      ];
+      break;
+    case '执法民警':
+      pop.listData = [
+        { text: "张三", value: "001" },
+        { text: "李四", value: "002" },
+        { text: "王五", value: "003" }
+      ];
+      break;
+    case '车辆分类':
+      pop.listData = [
+        { text: "小型汽车", value: "01" },
+        { text: "大型汽车", value: "02" },
+        { text: "摩托车", value: "03" },
+        { text: "电动车", value: "04" }
+      ];
+      break;
+    case '号牌种类':
+      pop.listData = [
+        { text: "蓝色", value: "01" },
+        { text: "黄色", value: "02" },
+        { text: "绿色", value: "03" },
+        { text: "白色", value: "04" },
+        { text: "黑色", value: "05" }
+      ];
+      break;
+    case '非法行政区划':
+      pop.listData = [
+        { text: "北京市", value: "110000" },
+        { text: "天津市", value: "120000" },
+        { text: "河北省", value: "130000" },
+        { text: "山西省", value: "140000" },
+        { text: "内蒙古", value: "150000" },
+        { text: "辽宁省", value: "210000" },
+        { text: "吉林省", value: "220000" },
+        { text: "黑龙江省", value: "230000" },
+        { text: "上海市", value: "310000" },
+        { text: "江苏省", value: "320000" },
+        { text: "浙江省", value: "330000" },
+        { text: "安徽省", value: "340000" },
+        { text: "福建省", value: "350000" },
+        { text: "江西省", value: "360000" },
+        { text: "山东省", value: "370000" },
+        { text: "河南省", value: "410000" },
+        { text: "湖北省", value: "420000" },
+        { text: "湖南省", value: "430000" },
+        { text: "广东省", value: "440000" },
+        { text: "广西", value: "450000" },
+        { text: "海南省", value: "460000" },
+        { text: "重庆市", value: "500000" },
+        { text: "四川省", value: "510000" },
+        { text: "贵州省", value: "520000" },
+        { text: "云南省", value: "530000" },
+        { text: "西藏", value: "540000" },
+        { text: "陕西省", value: "610000" },
+        { text: "甘肃省", value: "620000" },
+        { text: "青海省", value: "630000" },
+        { text: "宁夏", value: "640000" },
+        { text: "新疆", value: "650000" },
+        { text: "台湾省", value: "710000" },
+        { text: "香港", value: "810000" },
+        { text: "澳门", value: "820000" }
+      ];
+      break;
+    case '违法发生时间':
+      pop.type = 'datetime';
+      break;
+    case '图片方式':
+      pop.listData = [
+        { text: "手机拍摄", value: "01" },
+        { text: "相机拍摄", value: "02" },
+        { text: "监控截图", value: "03" },
+        { text: "行车记录仪", value: "04" }
+      ];
+      break;
+    case '通知日期':
+      pop.type = 'date';
+    break;
+  }
+  pop.show = true;
+  console.log(pop);
+  
+}
 
-// 选择器列数据（模拟数据）
-const deviceColumns = [
-  { text: "设备001", value: "001" },
-  { text: "设备002", value: "002" },
-  { text: "设备003", value: "003" }
-];
 
 const officerColumns = [
   { text: "张三", value: "001" },
@@ -287,152 +298,13 @@ const officerColumns = [
   { text: "王五", value: "003" }
 ];
 
-const clflColumns = [
-  { text: "小型汽车", value: "01" },
-  { text: "大型汽车", value: "02" },
-  { text: "摩托车", value: "03" },
-  { text: "电动车", value: "04" }
-];
 
-const hpzlColumns = [
-  { text: "蓝色", value: "01" },
-  { text: "黄色", value: "02" },
-  { text: "绿色", value: "03" },
-  { text: "白色", value: "04" },
-  { text: "黑色", value: "05" }
-];
-
-const qtlxColumns = [
-  { text: "闯红灯", value: "01" },
-  { text: "逆行", value: "02" },
-  { text: "超速", value: "03" },
-  { text: "违规停车", value: "04" },
-  { text: "违规变道", value: "05" },
-  { text: "其他", value: "99" }
-];
-
-// 行政区划列数据
-const xzqhColumns = [
-  { text: "北京市", value: "110000" },
-  { text: "天津市", value: "120000" },
-  { text: "河北省", value: "130000" },
-  { text: "山西省", value: "140000" },
-  { text: "内蒙古", value: "150000" },
-  { text: "辽宁省", value: "210000" },
-  { text: "吉林省", value: "220000" },
-  { text: "黑龙江省", value: "230000" },
-  { text: "上海市", value: "310000" },
-  { text: "江苏省", value: "320000" },
-  { text: "浙江省", value: "330000" },
-  { text: "安徽省", value: "340000" },
-  { text: "福建省", value: "350000" },
-  { text: "江西省", value: "360000" },
-  { text: "山东省", value: "370000" },
-  { text: "河南省", value: "410000" },
-  { text: "湖北省", value: "420000" },
-  { text: "湖南省", value: "430000" },
-  { text: "广东省", value: "440000" },
-  { text: "广西", value: "450000" },
-  { text: "海南省", value: "460000" },
-  { text: "重庆市", value: "500000" },
-  { text: "四川省", value: "510000" },
-  { text: "贵州省", value: "520000" },
-  { text: "云南省", value: "530000" },
-  { text: "西藏", value: "540000" },
-  { text: "陕西省", value: "610000" },
-  { text: "甘肃省", value: "620000" },
-  { text: "青海省", value: "630000" },
-  { text: "宁夏", value: "640000" },
-  { text: "新疆", value: "650000" },
-  { text: "台湾省", value: "710000" },
-  { text: "香港", value: "810000" },
-  { text: "澳门", value: "820000" }
-];
 
 // 切换区域展开状态
 function toggleSection(key) {
   openSections[key] = !openSections[key];
 }
 
-// 选择器确认事件
-function onDeviceConfirm({ selectedOptions }) {
-  formData.sbbh = selectedOptions[0].text;
-  formData.sbbhdm = selectedOptions[0].value;
-}
-
-function onOfficerConfirm({ selectedOptions }) {
-  formData.zfmj = selectedOptions[0].text;
-  formData.zfmjdm = selectedOptions[0].value;
-}
-
-function onClflConfirm({ selectedOptions }) {
-  formData.clfl = selectedOptions[0].text;
-  formData.clfldm = selectedOptions[0].value;
-}
-
-function onHpzlConfirm({ selectedOptions }) {
-  formData.hpzl = selectedOptions[0].text;
-  formData.hpzldm = selectedOptions[0].value;
-}
-
-function onQtlxConfirm({ selectedOptions }) {
-  formData.qtlx = selectedOptions[0].text;
-  formData.qtlxdm = selectedOptions[0].value;
-}
-
-function onXzqhConfirm({ selectedOptions }) {
-  formData.wgxzq = selectedOptions[0].text;
-}
-
-function onZpslConfirm({ selectedOptions }) {
-  formData.zpsl = selectedOptions[0].value;
-}
-
-function onTpfsConfirm({ selectedOptions }) {
-  formData.tpfs = selectedOptions[0].text;
-  formData.tpfsdm = selectedOptions[0].value;
-}
-
-function onWffssjConfirm(value) {
-  // 格式化日期时间
-  const date = new Date(value);
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  const seconds = String(date.getSeconds()).padStart(2, "0");
-
-  const dateTimeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-  formData.wffssj = dateTimeStr;
-  formData.wfrq = `${year}-${month}-${day}`;
-  formData.wfsj = `${hours}:${minutes}:${seconds}`;
-  showWffssjPicker.value = false;
-}
-
-// 触发上传
-function triggerUpload(index) {
-  currentUploadIndex.value = index;
-  fileInputs.value.click();
-}
-
-// 文件选择处理
-function onFileChange(event) {
-  const file = event.target.files[0];
-  if (file) {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      photoList.value[currentUploadIndex.value].url = e.target.result;
-      // 更新照片数量
-      const uploadedCount = photoList.value.filter(p => p.url).length;
-      formData.zpsl = uploadedCount.toString();
-    };
-    reader.readAsDataURL(file);
-  }
-  // 清空input值，允许重复选择同一张图片
-  event.target.value = "";
-}
-
 // 删除照片
 function deletePhoto(index) {
   photoList.value[index].url = "";
@@ -447,36 +319,6 @@ function onPhotoRead(file, index) {
   formData.zpsl = uploadedCount.toString();
 }
 
-// 图片上传后处理
-function afterRead(file) {
-  // 如果是多个文件，遍历处理
-  if (Array.isArray(file)) {
-    file.forEach(item => {
-      uploadImage(item);
-    });
-  } else {
-    uploadImage(file);
-  }
-}
-
-function uploadImage(file) {
-  // 模拟上传，实际项目中调用接口
-  file.status = "uploading";
-  file.message = "上传中...";
-
-  // 模拟上传成功
-  setTimeout(() => {
-    file.status = "success";
-    file.message = "";
-    showToast("图片上传成功");
-  }, 1000);
-}
-
-// 删除图片前处理
-function beforeDelete(file, item) {
-  return true;
-}
-
 // 返回上一页
 function goBack() {
   router.back();
@@ -484,41 +326,16 @@ function goBack() {
 
 // 提交表单
 function handleSubmit() {
-  // 表单验证
-  if (!formData.sbbh) {
-    showToast("请选择设备编号");
-    return;
-  }
-  if (!formData.zfmj) {
-    showToast("请选择执法民警");
-    return;
-  }
-  if (!formData.wgdd) {
-    showToast("请输入违法地点");
-    return;
-  }
-  if (!formData.zpsl) {
-    showToast("请选择照片数量");
-    return;
-  }
+  isLoading.value = true;
+  // 提交数据
+  const submitData = {
+    ...formData,
+    photos: photoList.value.filter(p => p.url).map(p => p.url)
+  };
+  console.log("提交数据:", submitData);
+  Toast("提交成功");
+  router.back();
 
-  showConfirmDialog({
-    title: "提示",
-    message: "确认提交随手拍信息？"
-  })
-    .then(() => {
-      // 提交数据
-      const submitData = {
-        ...formData,
-        photos: photoList.value.filter(p => p.url).map(p => p.url)
-      };
-      console.log("提交数据:", submitData);
-      showToast("提交成功");
-      router.back();
-    })
-    .catch(() => {
-      // 取消操作
-    });
 }
 
 onMounted(() => {
diff --git a/src/pages/trafficAlerts/detail.vue b/src/pages/trafficAlerts/detail.vue
index 39a9094..a75ad33 100644
--- a/src/pages/trafficAlerts/detail.vue
+++ b/src/pages/trafficAlerts/detail.vue
@@ -3,150 +3,139 @@
     <!-- 顶部导航栏 -->
     <div class="nav-bar">
       <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">路况预警详情</h1>
+      <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="header-left">
-            <span class="level-tag" :class="getLevelClass(alertDetail.eventLevel)">
-              {{ levelMap[alertDetail.eventLevel] }}
-            </span>
-            <span class="alert-title">{{ alertDetail.eventType }}</span>
-          </div>
-          <span class="status-tag" :class="getStatusClass(allDetail.taskStatus)">
-            {{ statusMap[allDetail.taskStatus] }}
+    <!-- 预警信息卡片 -->
+    <div class="detail-card">
+      <!-- 头部信息 -->
+      <div class="card-header">
+        <div class="header-left">
+          <span class="level-tag" :class="getLevelClass(alertDetail.eventLevel)">
+            {{ levelMap[alertDetail.eventLevel] }}
           </span>
+          <span class="alert-title">{{ alertDetail.eventType }}</span>
         </div>
-
-        <!-- 图片 -->
-        <div class="card-image">
-          <van-image
-            :src="alertDetail.imgUrl"
-            :error-icon="defaultImg"
-            fit="cover"
-            lazy-load
-            class="alert-img"
-          />
-        </div>
-
-        <!-- 详细信息 -->
-        <div class="card-details">
-          <div class="detail-item">
-            <van-icon name="clock" class="detail-icon" />
-            <span class="label">检测时间：</span>
-            <span class="value">{{ alertDetail.eventTime }}</span>
-          </div>
-          <div class="detail-item">
-            <van-icon name="location" class="detail-icon" />
-            <span class="label">检测地点：</span>
-            <span class="value">{{ alertDetail.siteName }}</span>
-          </div>
-          <div class="detail-item" v-if="alertDetail.tasksVo">
-            <van-icon name="phone-o" class="detail-icon" />
-            <span class="label">联系电话：</span>
-            <span class="value">{{ alertDetail.phoneNumber }}</span>
-          </div>
-
-          <!-- 视频展示按钮 -->
-          <div class="video-btn-wrapper" v-if="alertDetail.videoUrls && alertDetail.videoUrls.length > 0">
-            <van-button block round color="#2a7efe" class="video-btn" @click="openVideo(alertDetail.videoUrls[0])">
-              <van-icon name="video-o" class="video-icon" />
-              视频展示
-            </van-button>
-          </div>
-        </div>
+        <span class="status-tag" :class="getStatusClass(allDetail.taskStatus)">
+          {{ statusMap[allDetail.taskStatus] }}
+        </span>
       </div>
 
-      <!-- 执行记录卡片 -->
-      <div class="record-card">
-        <div class="card-title">执行记录</div>
+      <!-- 图片 -->
+      <div class="card-image">
+        <van-image :src="alertDetail.imgUrls" fit="cover" class="alert-img" />
+      </div>
 
-        <!-- 蓝色边框卡片 -->
-        <div class="execution-box">
-          <!-- 绿色边框内层卡片 -->
-          <div class="info-box">
-            <div class="info-row">
-              <span class="info-label">要求任务完成时间：</span>
-              <span class="info-value">{{ taskDetail.eventTime }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-text">{{ taskDetail.deptName }}</span>
-              <span class="info-divider" v-if="taskDetail.deptName">|</span>
-              <span class="info-text">联系电话：{{ taskDetail.phoneNumber }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">任务地点：</span>
-              <span class="info-value">{{ taskDetail.clickAddress }}</span>
-            </div>
-            
-          </div>
+      <!-- 详细信息 -->
+      <div class="card-details">
+        <div class="detail-item">
+          <van-icon name="clock" class="detail-icon" />
+          <span class="label">检测时间：</span>
+          <span class="value">{{ alertDetail.eventTime }}</span>
+        </div>
+        <div class="detail-item">
+          <van-icon name="location" class="detail-icon" />
+          <span class="label">检测地点：</span>
+          <span class="value">{{ alertDetail.siteName }}</span>
+        </div>
+        <div class="detail-item" v-if="alertDetail.tasksVo">
+          <van-icon name="phone-o" class="detail-icon" />
+          <span class="label">联系电话：</span>
+          <span class="value">{{ alertDetail.phoneNumber }}</span>
+        </div>
 
-          <!-- 任务描述 -->
-          <div class="task-desc">
-            {{ taskDetail.taskContent }}
-          </div>
-
-          <!-- 打卡情况 -->
-          <div v-if="checkinRecords.length > 0" class="checkin-box">
-            <div v-for="(record, index) in checkinRecords" :key="index" class="checkin-row-wrapper">
-              <div class="checkin-row">
-                <span class="checkin-time">{{ record.date }}</span>
-                <span class="checkin-type">{{ record.type }}</span>
-              </div>
-              <div class="checkin-row">
-                <span class="checkin-label">打卡账号：</span>
-                <span class="checkin-value">{{ record.account }}</span>
-              </div>
-              <div class="checkin-row checkin-location" v-if="record.location">
-                <van-icon name="location" class="location-icon" />
-                <span>{{ record.location }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- 待派发状态 - 显示定位打卡按钮 -->
-          <div v-if="showCheckInBtn" class="action-buttons">
-            <van-button block round type="primary" class="action-btn" @click="handleCheckIn">
-              定位打卡
-            </van-button>
-          </div>
-
-          <!-- 执行中/已完成状态 - 显示反馈按钮 -->
-          <div v-if="showFeedbackBtns" class="feedback-buttons">
-            <van-button
-              v-for="(feedback, index) in allDetail.feebacks"
-              :key="index"
-              block
-              round
-              color="#00c84f"
-              class="feedback-btn success"
-              @click="showFeedback(index + 1)"
-            >
-              第{{ index+1 }}次反馈结果
-            </van-button>
-            <van-button
-              v-if="allDetail.taskStatus == '1'"
-              block
-              round
-              color="#2a7efe"
-              type="primary"
-              class="action-btn"
-              @click="handleFeedback"
-            >
-              立即反馈
-            </van-button>
-          </div>
+        <!-- 视频展示按钮 -->
+        <div class="video-btn-wrapper" v-if="alertDetail.videoUrls && alertDetail.videoUrls.length > 0">
+          <van-button block round color="#2a7efe" class="video-btn" @click="openVideo(alertDetail.videoUrls[0])">
+            <van-icon name="video-o" class="video-icon" />
+            视频展示
+          </van-button>
         </div>
       </div>
-    </template>
+    </div>
+
+    <!-- 执行记录卡片 -->
+    <div class="record-card">
+      <div class="card-title">执行记录</div>
+
+      <!-- 蓝色边框卡片 -->
+      <div class="execution-box">
+        <!-- 绿色边框内层卡片 -->
+        <div class="info-box">
+          <div class="info-row">
+            <span class="info-label">要求任务完成时间：</span>
+            <span class="info-value">{{ taskDetail.eventTime }}</span>
+          </div>
+          <div class="info-row">
+            <span class="info-text">{{ taskDetail.deptName }}</span>
+            <span class="info-divider" v-if="taskDetail.deptName">|</span>
+            <span class="info-text">联系电话：{{ taskDetail.phoneNumber }}</span>
+          </div>
+          <div class="info-row">
+            <span class="info-label">任务地点：</span>
+            <span class="info-value">{{ taskDetail.clickAddress }}</span>
+          </div>
+          
+        </div>
+
+        <!-- 任务描述 -->
+        <div class="task-desc">
+          {{ taskDetail.taskContent }}
+        </div>
+
+        <!-- 打卡情况 -->
+        <div v-if="checkinRecords.length > 0" class="checkin-box">
+          <div v-for="(record, index) in checkinRecords" :key="index" class="checkin-row-wrapper">
+            <div class="checkin-row">
+              <span class="checkin-time">{{ record.date }}</span>
+              <span class="checkin-type">{{ record.type }}</span>
+            </div>
+            <div class="checkin-row">
+              <span class="checkin-label">打卡账号：</span>
+              <span class="checkin-value">{{ record.account }}</span>
+            </div>
+            <div class="checkin-row checkin-location" v-if="record.location">
+              <van-icon name="location" class="location-icon" />
+              <span>{{ record.location }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 待派发状态 - 显示定位打卡按钮 -->
+        <div v-if="showCheckInBtn" class="action-buttons">
+          <van-button block round type="primary" class="action-btn" @click="handleCheckIn">
+            定位打卡
+          </van-button>
+        </div>
+
+        <!-- 执行中/已完成状态 - 显示反馈按钮 -->
+        <div v-if="showFeedbackBtns" class="feedback-buttons">
+          <van-button
+            v-for="(feedback, index) in allDetail.feebacks"
+            :key="index"
+            block
+            round
+            color="#00c84f"
+            class="feedback-btn success"
+            @click="showFeedback(index + 1)"
+          >
+            第{{ index+1 }}次反馈结果
+          </van-button>
+          <van-button
+            v-if="allDetail.taskStatus == '1'"
+            block
+            round
+            color="#2a7efe"
+            type="primary"
+            class="action-btn"
+            @click="handleFeedback"
+          >
+            立即反馈
+          </van-button>
+        </div>
+      </div>
+    </div>
 
     <!-- 反馈结果弹窗 -->
     <van-popup v-model:show="showResultDialog" round position="center" class="feedback-popup">
@@ -218,7 +207,6 @@ import { ref, computed, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { getTrafficEventDetail } from "@/api/traffic";
 import { ImagePreview } from 'vant';
-import defaultImg from "@/assets/error.png";
 const router = useRouter();
 const route = useRoute();
 
@@ -304,7 +292,6 @@ const fetchDetail = async () => {
       // 处理详情数据
       alertDetail.value = data.eventDetailVO;
       taskDetail.value = data.eventDetailVO.tasksVo || {};
-      console.log(data,'=============00');
       allDetail.value = data
 
       // 处理打卡记录
diff --git a/src/pages/trafficAlerts/index.vue b/src/pages/trafficAlerts/index.vue
index ca52443..d15ead4 100644
--- a/src/pages/trafficAlerts/index.vue
+++ b/src/pages/trafficAlerts/index.vue
@@ -17,39 +17,38 @@
 
     <!-- 预警列表 -->
     <div class="alerts-list" ref="listRef">
-      <!-- 加载状态 -->
-      <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">
+      <van-list 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)">
-                {{ levelMap[alert.eventLevel] }}
-              </span>
-              <span class="alert-title">{{ alert.eventType }}</span>
-            </div>
             <span class="status-tag" :class="getStatusClass(alert.taskStatus)">
               {{ statusMap[alert.taskStatus] }}
             </span>
           </div>
-
           <!-- 图片 -->
-          <div class="card-image" v-if="alert.image">
+          <div class="card-image">
             <van-image :src="alert.imgUrl" fit="cover" class="alert-img" />
           </div>
+         
+          
+          <div class="card-title-row">
+            <span class="level-tag" :class="getLevelClass(alert.eventLevel)">
+              {{ levelMap[alert.eventLevel] }}
+            </span>
+            <span class="alert-title">{{ alert.eventType }}</span>
+          </div>
+
 
           <!-- 详细信息 -->
           <div class="card-details">
             <div class="detail-item">
-              <van-icon name="location" class="detail-icon" />
+              <van-icon name="location-o" class="detail-icon" />
               <span class="label">检测点位：</span>
               <span class="value">{{ alert.siteName }}</span>
             </div>
             <div class="detail-item">
-              <van-icon name="clock" class="detail-icon" />
+              <van-icon name="clock-o" class="detail-icon" />
               <span class="label">检测时间：</span>
               <span class="value">{{ alert.eventTime }}</span>
             </div>
@@ -77,7 +76,7 @@
       </van-list>
 
       <!-- 空状态 -->
-      <van-empty v-if="filteredAlerts.length === 0 && !initLoading" description="暂无数据" class="empty-state" />
+      <van-empty v-if="filteredAlerts.length === 0 " description="暂无数据" class="empty-state" />
     </div>
   </div>
 </template>
@@ -93,7 +92,6 @@ const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
 // 状态
 const activeTab = ref("all");
 const loading = ref(false);
-const initLoading = ref(false);
 const finished = ref(false);
 
 // 标签栏
@@ -145,11 +143,7 @@ function resetList() {
 
 // 获取列表数据
 const fetchAlerts = async (isLoadMore = false) => {
-  if (isLoadMore) {
-    loading.value = true;
-  } else {
-    initLoading.value = true;
-  }
+  if (isLoadMore) loading.value = true;
 
   try {
     // 根据标签添加状态筛选
@@ -183,13 +177,10 @@ const fetchAlerts = async (isLoadMore = false) => {
     }
   } catch (error) {
     console.error("获取交通预警列表失败:", error);
-    if (!isLoadMore) {
-      filteredAlerts.value = [];
-    }
+    if (!isLoadMore) filteredAlerts.value = [];
     finished.value = true;
   } finally {
     loading.value = false;
-    initLoading.value = false;
   }
 };
 
@@ -327,9 +318,7 @@ onMounted(() => {
 }
 
 .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  text-align: right;
   padding: 12px 16px 0;
 }
 
@@ -378,6 +367,8 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-left: 16px;
+  margin-bottom: 10px;
 
   .level-tag {
     padding: 4px 8px;
diff --git a/src/pages/videoMonitorMap/index.vue b/src/pages/videoMonitorMap/index.vue
new file mode 100644
index 0000000..fde710b
--- /dev/null
+++ b/src/pages/videoMonitorMap/index.vue
@@ -0,0 +1,372 @@
+<template>
+  <div class="map-page">
+    <!-- 顶部导航栏 -->
+    <div class="nav-bar">
+      <div class="nav-left">
+        <div class="action-btn" >
+          <van-icon name="arrow-left" class="nav-back" @click="goBack" />
+        </div>
+        <h1 class="nav-title">监控地图</h1>
+      </div>
+      
+      <div class="nav-right">
+        <div class="action-btn" >
+          <van-icon name="location" />
+        </div>
+        <div class="action-btn" :class="{ active: showFilter }" >
+          <van-icon name="filter-o" @click="showFilter = !showFilter" />
+        </div>
+      </div>
+    </div>
+    <!-- 地图区域 -->
+    <div class="map-container">
+      <!-- 筛选面板 -->
+      <div v-if="showFilter"  class="filter-panel-container">
+        <div  class="filter-panel">
+        <div class="filter-section">
+          <div class="filter-label">区域筛选</div>
+          <div class="filter-tags">
+            <button
+              v-for="area in areas"
+              :key="area"
+              class="filter-tag"
+              :class="{ active: filterArea === area }"
+              @click="filterArea = area"
+            >
+              {{ area }}
+            </button>
+          </div>
+        </div>
+        <div class="filter-row">
+          <span class="filter-row-label">仅显示收藏</span>
+          <van-switch v-model="showFavoriteOnly" size="20" />
+        </div>
+      </div>
+      </div>
+      <ul class="alett-btn">
+        <li>在线 <span>5</span></li>
+        <li>离线 <span>2</span></li>
+      </ul>
+      <GdMap mapid="map-page-map" :is-show="false" />
+
+      <!-- 标记详情卡片 -->
+      <div class="marker-card" v-show="showCard">
+        <div class="card-header">
+          <div class="card-info">
+            <span class="card-title">长江大桥监控</span>
+            <span class="line">在线</span>
+          </div>
+          <van-icon name="cross" class="close-icon"  />
+        </div>
+        <div>
+          <van-icon name="location-o" color="#89909d" />
+          <span class="card-location">江苏省南京市长江大桥</span>
+        </div>
+        <div class="btn-box">
+          <span class="smallBtn">桥梁监控</span>
+          <span class="smallBtn">江岸区</span>
+          <span class="smallBtn">M002</span>
+        </div>
+        <div class="card-footer">
+          <span class="card-btn"><van-icon name="eye-o" size="16px" style="top:2px;margin-right: 10px;" />查看视频</span>
+          <span class="detail-btn" > 详情</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航 -->
+    <BottomTabs :active-tab="'map'" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import BottomTabs from "@/components/bottomTabs.vue";
+import GdMap from "@/components/GdMap/index.vue";
+const router = useRouter();
+const showCard = ref(false); //展示卡片
+// 区域列表
+const areas = ["全部", "江汉区", "江岸区", "洪山区", "武昌区"];
+const showFavoriteOnly = ref(false);
+const showFilter = ref(false);
+// 页面加载时获取数据
+onMounted(() => {
+});
+
+// 返回
+function goBack() {
+  router.back();
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.map-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f3f4f6;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #2057e0;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  color: #fff;
+
+  .nav-back {
+    font-size: 24px;
+  }
+
+  .nav-title {
+    font-size: 17px;
+    font-weight: 600;
+  }
+  .nav-left{
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .action-btn {
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 18px;
+
+    &.active {
+      background: white;
+      color: #2563eb;
+    }
+  }
+}
+
+
+
+.map-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: #eff9f9;
+  .filter-panel-container{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 12px 16px;
+    box-sizing: border-box;
+    background-color: #2563eb;
+    z-index: 100;
+  }
+.filter-panel {
+  background: rgb(94, 138, 233);
+  border-radius: 16px;
+  padding: 16px;
+
+  .filter-section {
+    margin-bottom: 12px;
+
+    .filter-label {
+      font-size: 14px;
+      color: white;
+      margin-bottom: 8px;
+    }
+
+    .filter-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .filter-tag {
+      padding: 6px 12px;
+      border-radius: 20px;
+      font-size: 13px;
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+      border: none;
+
+      &.active {
+        background: white;
+        color: #2563eb;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .filter-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .filter-row-label {
+      font-size: 14px;
+      color: white;
+    }
+  }
+}
+  .alett-btn{
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    z-index: 10;
+    display: flex;
+    gap: 12px;
+    background: #fff;
+    padding: 6px 6px;
+    border-radius: 10px;
+    font-size: 12px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    li{
+      display: flex;
+      align-items: center;
+      position: relative;
+      color: #4d5868;
+      margin-left: 15px;
+      span{
+        margin-left: 6px;
+      }
+      &:before{
+        content: '';
+        position: absolute;
+        left: -15px;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: #10b981;
+      }
+      &:nth-child(2):before{
+        background: #4d5868;
+      }
+    }
+  }
+}
+
+.marker-card {
+  position: absolute;
+  bottom: 90px;
+  left: 50%;
+  right: 0;
+  transform: translateX(-50%);
+  width: 80%;
+  background: white;
+  border-radius: 20px;
+  padding: 16px;
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
+  z-index: 20;
+  animation: slideUp 0.3s ease;
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+
+    .card-info {
+      display: flex;
+      align-items: center;
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1f2937;
+        margin-bottom: 4px;
+      }
+      .line{
+        display: inline-block;
+        font-size: 12px;
+        color: #10b981;
+        background: #d1fae5;
+        border-radius: 4px;
+        padding: 1px 4px;
+        margin-left: 10px;
+      }
+    }
+
+    .close-icon {
+      font-size: 20px;
+      color: #9ca3af;
+      padding: 4px;
+    }
+  }
+
+  .card-location{
+    margin-left: 5px;
+    color: #89909d;
+    font-size: 14px;
+  }
+  .btn-box{
+    color: #89909d;
+    font-size: 14px;
+    span{
+      display: inline-block;
+      margin-right: 6px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 13px;
+      margin: 10px 0;
+      &:nth-child(1){
+        background: #e0e7ff;
+        color: #4338ca;
+      }
+      &:nth-child(2){
+        background: #f3f4f6;
+        color: #4d5868;
+      }
+    }
+  }
+  .card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .card-btn {
+      flex: 1;
+      font-size: 13px;
+      color: #fff;
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+      background: #2b7fff;
+      border-radius: 4px;
+    }
+
+    .detail-btn {
+      width: 60px;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      font-size: 13px;
+      margin-left: 8px;
+      background: #f3f4f6;
+      border-radius: 4px;
+      color: #4d5868;
+    }
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/pages/violationAlerts/detail.vue b/src/pages/violationAlerts/detail.vue
index 6d9d6a3..9c1afda 100644
--- a/src/pages/violationAlerts/detail.vue
+++ b/src/pages/violationAlerts/detail.vue
@@ -3,7 +3,7 @@
     <!-- 顶部导航栏 -->
     <div class="nav-bar">
       <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">违章详情</h1>
+      <h1 class="nav-title">违规任务详情</h1>
       <div class="nav-placeholder"></div>
     </div>
     <!-- 违章信息卡片 -->
@@ -48,30 +48,6 @@
       </div>
     </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>
-
     <!-- 卡口预警折叠面板 -->
     <van-collapse v-model="activeNames" :border="false" class="alert-collapse">
       <van-collapse-item name="1" :border="false">
@@ -134,6 +110,30 @@
       </van-collapse-item>
     </van-collapse>
 
+     <!-- 打卡情况 - 执行中和已完成状态显示 -->
+    <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 v-if="allDetail.taskStatus == '0'" class="action-bar">
       <van-button block round type="primary" class="action-btn" @click="handleCheckIn">定位打卡</van-button>
@@ -145,11 +145,11 @@
     </div>
 
     <!-- 执行结果弹框 -->
-    <van-popup v-model:show="showMatchDialog" round class="result-popup">
+    <van-popup v-model:show="showMatchDialog" round class="result-popup" :style="{ width: '80%' }">
       <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-button block round color="#00bc4a" class="popup-btn success" @click="handlePlateMatch(true)">
             <van-icon name="checked" class="btn-icon" />
             处罚上报
           </van-button>
diff --git a/src/pages/violationAlerts/index.vue b/src/pages/violationAlerts/index.vue
index f7baf6a..9a5d3ed 100644
--- a/src/pages/violationAlerts/index.vue
+++ b/src/pages/violationAlerts/index.vue
@@ -22,27 +22,21 @@
 
     <!-- 违章列表 -->
     <div class="alerts-list">
-      <div
-        v-for="alert in filteredAlerts"
-        :key="alert.id"
-        class="alert-card"
-      >
+      <div v-for="alert in filteredAlerts" :key="alert.id" class="alert-card">
         <!-- 车牌信息 -->
         <div class="card-header">
           <div class="vehicle-info">
-            <van-icon name="cart" class="vehicle-icon" />
+            <van-icon name="logistics" class="vehicle-icon" />
             <span class="plate-number">{{ alert.plateNo }}</span>
             <span class="plate-color">{{ alert.plateColor }}</span>
             <span class="separator">|</span>
             <span class="vehicle-type">{{ alert.vehicleType }}</span>
           </div>
-          <span class="status-tag" :class="getStatusClass(alert.taskStatus)">
-            {{ statusMap[alert.taskStatus] }}
-          </span>
+          <span class="status-tag" :class="getStatusClass(alert.taskStatus)"> {{ statusMap[alert.taskStatus] }} </span>
         </div>
 
         <!-- 图片 -->
-        <div class="card-image" v-if="alert.image">
+        <div class="card-image">
           <van-image
             :src="alert.imgUrl"
             fit="cover"
@@ -61,12 +55,12 @@
         <!-- 详细信息 -->
         <div class="card-details">
           <div class="detail-item">
-            <van-icon name="location" class="detail-icon" />
+            <van-icon name="location-o" style="margin-right: 5px;" />
             <span class="label">检测点位：</span>
             <span class="value">{{ alert.siteName }}</span>
           </div>
           <div class="detail-item">
-            <van-icon name="clock" class="detail-icon" />
+            <van-icon name="clock-o" style="margin-right: 5px;" />
             <span class="label">检测时间：</span>
             <span class="value">{{ alert.eventTime }}</span>
           </div>
@@ -392,7 +386,8 @@ onMounted(() => {
 
   .plate-color {
     font-size: 14px;
-    color: #64748b;
+    color: #c5cad2;
+    margin-left: 4px;
   }
 
   .separator {
@@ -402,7 +397,7 @@ onMounted(() => {
 
   .vehicle-type {
     font-size: 14px;
-    color: #64748b;
+    color: #c5cad2;
   }
 }
 
diff --git a/src/pages/warningList/index.vue b/src/pages/warningList/index.vue
new file mode 100644
index 0000000..f3beb56
--- /dev/null
+++ b/src/pages/warningList/index.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="traffic-warn-page">
+    <!-- 顶部导航栏 -->
+    <div class="nav-bar">
+      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
+      <h1 class="nav-title">拦截预警</h1>
+      <van-icon name="filter-o" class="nav-filter" />
+    </div>
+
+    <!-- 预警列表 -->
+    <div class="warns-list">
+      <!-- 列表内容 -->
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoadMore">
+        <div v-for="item in warningList" :key="item.id" class="warn-card" @click="lookDetail(item)">
+            <div class="warn-header" v-if="item.plateNo">{{ item.eventType }} <span class="level" :class="getLevelClass(item.eventLevel)">{{ getStatusText(item.eventLevel) }}</span></div>
+            <div class="warn-text"><span><van-icon name="logistics" /></span> <span>{{ item.plateNo }}</span> | <span>{{ item.vehicleColor }}</span> | <span>{{ item.vehicleType }}</span></div>
+            <div class="warn-text"><span><van-icon name="location-o" /></span> 监测点位：{{ item.siteName }}</div>
+            <div class="warn-text"><span><van-icon name="clock-o" /></span> 监测时间：{{ item.passTime }}</div>
+        </div>
+      </van-list>
+
+      <!-- 空状态 -->
+      <van-empty v-if="warningList.length === 0 && !initLoading" description="暂无数据" class="empty-state" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getInterceptWarnList } from "@/api/traffic";
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const warningList = ref([]);
+const loading = ref(false);
+const initLoading = ref(false);
+const finished = ref(false);
+
+const listQuery = ref({
+  page: 0,
+  pageSize: 10,
+  status: 0
+});
+
+// 获取列表数据
+const fetchAlerts = async (isLoadMore = false) => {
+  if (!isLoadMore) {
+    initLoading.value = true;
+    listQuery.value.page = 0;
+    warningList.value = [];
+    finished.value = false;
+  }
+
+  loading.value = true;
+
+  try {
+    const res = await getInterceptWarnList({
+      status: listQuery.value.status,
+      pageSize: listQuery.value.pageSize,
+      page: listQuery.value.page + 1
+    });
+
+    if (res && res.content) {
+      const records = res.content || [];
+      if (listQuery.value.page === 0) {
+        warningList.value = records;
+      } else {
+        warningList.value.push(...records);
+      }
+      listQuery.value.page++;
+
+      // 判断是否还有更多数据
+      if (records.length < listQuery.value.pageSize) {
+        finished.value = true;
+      }
+    } else {
+      finished.value = true;
+    }
+  } catch (error) {
+    finished.value = true;
+  } finally {
+    loading.value = false;
+    initLoading.value = false;
+  }
+};
+
+// 加载更多
+function onLoadMore() {
+  fetchAlerts(true);
+}
+
+// 等级样式
+function getLevelClass(level) {
+  const map = {
+    1: "level-red",
+    2: "level-orange",
+    // 3: "level-yellow",
+    3: "level-blue",
+  };
+  return map[level] || "level-blue";
+}
+
+// 状态样式
+function getStatusText(status) {
+  const map = {
+    1: "一级",
+    2: "二级",
+    3: "三级",
+  };
+  return map[status] || "三级";
+}
+
+
+function lookDetail(item) {
+  router.push({
+    path: "/violation-detail",
+    query: { id: item.taskId, status: item.status }
+  });
+}
+
+// 返回
+function goBack() {
+  router.back();
+}
+
+
+// 页面初始化
+onMounted(() => {
+  fetchAlerts();
+});
+</script>
+
+<style lang="scss" scoped>
+
+.traffic-warn-page {
+  background: #f9fafb;
+  position: relative;
+  .warns-list{
+    height: calc(100vh - 82px);
+    margin-top: 5px;
+    padding: 0 16px;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+
+.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-filter {
+    font-size: 24px;
+    color: #333;
+  }
+}
+
+.warn-card {
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  padding: 10px;
+  box-sizing: border-box;
+  font-size: 13px;
+  cursor: pointer;
+  .warn-header{
+    font-size: 16px;
+    color: #333;
+    letter-spacing: 1px;
+    .level{
+        display: inline-block;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 13px;
+        margin-left: 4px;
+        &.level-red {
+          background: #ffe2e2;
+          color: #e8101a;
+        }
+        &.level-orange {
+          background: #fff3e0;
+          color: #ff9800;
+        }
+        &.level-yellow {
+          background: #fffde7;
+          color: #ffc107;
+        }
+        &.level-blue {
+          background: #e3f2fd;
+          color: #2196f3;
+        }
+    }
+  }
+  .warn-text{
+    color: #555;
+    margin-top: 6px;
+    line-height: 20px;
+    letter-spacing: 1px;
+    color: #565c69;
+  }
+}
+
+
+.empty-state {
+  padding: 60px 0;
+}
+</style>
\ No newline at end of file