jg_app/src/pages/violationAlerts/index.vue

<template>
  <div class="violation-alerts-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="tabs-bar">
      <button
        v-for="tab in displayTabs"
        :key="tab.id"
        class="tab-item"
        :class="{ active: activeTab === tab.id }"
        @click="handleTabChange(tab.id)"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- 违章列表 -->
    <div class="alerts-list">
      <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" />
            <span class="plate-number">{{ alert.plateNumber }}</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="alert.statusClass">
            {{ alert.status }}
          </span>
        </div>

        <!-- 图片 -->
        <div class="card-image" v-if="alert.image">
          <van-image
            :src="alert.image"
            fit="cover"
            class="alert-img"
          />
        </div>

        <!-- 等级和标题 -->
        <div class="card-title-row">
          <span class="level-tag" :class="alert.levelClass">
            {{ alert.level }}
          </span>
          <span class="alert-title">{{ alert.title }}</span>
        </div>

        <!-- 详细信息 -->
        <div class="card-details">
          <div class="detail-item">
            <van-icon name="location" class="detail-icon" />
            <span class="label">检测点位：</span>
            <span class="value">{{ alert.location }}</span>
          </div>
          <div class="detail-item">
            <van-icon name="clock" class="detail-icon" />
            <span class="label">检测时间：</span>
            <span class="value">{{ alert.time }}</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="card-actions">
          <!-- 未执行/已完成/执行中 - 显示查看详情 -->
          <van-button
            block
            round
            type="primary"
            class="action-btn"
            @click="handleDetail(alert)"
          >
            查看详情
          </van-button>
        </div>
      </div>

      <!-- 空状态 -->
      <van-empty
        v-if="filteredAlerts.length === 0"
        description="暂无数据"
        class="empty-state"
      />
    </div>

    <!-- 车牌匹配弹框 -->
    <van-popup v-model:show="showMatchDialog" round position="center" class="match-popup">
      <div class="popup-content">
        <h2 class="popup-title">车牌匹配结果</h2>
        <div class="popup-buttons">
          <van-button block round class="match-btn success" @click="handleMatch(true)">
            <van-icon name="checked" class="btn-icon" />
            车牌匹配
          </van-button>
          <van-button block round class="match-btn error" @click="handleMatch(false)">
            <van-icon name="cross" class="btn-icon" />
            车牌不匹配
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

// 状态
const activeTab = ref("all");
const showMatchDialog = ref(false);
const selectedViolationId = ref(null);

// 标签栏
const tabs = [
  { id: "all", label: "全部" },
  { id: "unexecuted", label: "未执行" },
  { id: "processing", label: "执行中" },
  { id: "completed", label: "已完成" },
];

// 显示的标签（违章预警不显示待处理）
const displayTabs = computed(() => {
  return tabs;
});

// 违章数据（与 Greeting message 一致）
const violations = [
  {
    id: 1,
    plateNumber: "鄂A12345",
    plateColor: "蓝色",
    vehicleType: "小型汽车",
    level: "四级",
    levelClass: "level-blue",
    title: "违规停车",
    status: "执行中",
    statusClass: "status-blue",
    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: "来车预警",
    category: "all"
  },
  {
    id: 3,
    plateNumber: "鄂A99999",
    plateColor: "蓝色",
    vehicleType: "小型汽车",
    level: "三级",
    levelClass: "level-yellow",
    title: "闯红灯",
    status: "执行中",
    statusClass: "status-blue",
    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: "来车预警",
    category: "all"
  },
  {
    id: 4,
    plateNumber: "鄂A88888",
    plateColor: "蓝色",
    vehicleType: "小型汽车",
    level: "二级",
    levelClass: "level-orange",
    title: "违规变道",
    status: "已完成",
    statusClass: "status-green",
    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: "来车预警",
    category: "completed"
  },
  {
    id: 6,
    plateNumber: "鄂B33333",
    plateColor: "蓝色",
    vehicleType: "小型汽车",
    level: "一级",
    levelClass: "level-red",
    title: "违规掉头",
    status: "已完成",
    statusClass: "status-green",
    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: "来车预警",
    category: "completed"
  },
  {
    id: 7,
    plateNumber: "鄂A77777",
    plateColor: "蓝色",
    vehicleType: "小型汽车",
    level: "二级",
    levelClass: "level-orange",
    title: "违规停车",
    status: "未执行",
    statusClass: "status-gray",
    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: "来车预警",
    category: "all"
  },
  {
    id: 8,
    plateNumber: "鄂A66666",
    plateColor: "蓝色",
    vehicleType: "小型汽车",
    level: "三级",
    levelClass: "level-yellow",
    title: "违规掉头",
    status: "未执行",
    statusClass: "status-gray",
    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: "04/09 09:15",
    warning: "来车预警",
    category: "all"
  }
];

// 过滤后的列表
const filteredAlerts = computed(() => {
  if (activeTab.value === "all") return violations;
  if (activeTab.value === "unexecuted") return violations.filter(v => v.status === "未执行");
  if (activeTab.value === "processing") return violations.filter(v => v.status === "执行中");
  if (activeTab.value === "completed") return violations.filter(v => v.status === "已完成");
  return violations;
});

// 返回
function goBack() {
  router.back();
}

// 切换标签
function handleTabChange(tabId) {
  activeTab.value = tabId;
}

// 查看详情
function handleDetail(alert) {
  router.push({
    path: "/violation-detail",
    query: { id: alert.id, status: alert.status, tab: activeTab.value }
  });
}

// 筛查来车
function handleScreenCar(violationId) {
  selectedViolationId.value = violationId;
  showMatchDialog.value = true;
}

// 车牌匹配
function handleMatch(matched) {
  showMatchDialog.value = false;
  if (matched && selectedViolationId.value) {
    router.push({
      path: "/dataReport",
      query: { id: selectedViolationId.value }
    });
  }
}
</script>

<style lang="scss" scoped>
.violation-alerts-page {
  min-height: 100vh;
  background: #f1f5f9;
  padding-bottom: 20px;
}

.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;
  }
}

.tabs-bar {
  display: flex;
  gap: 16px;
  background: white;
  padding: 12px 16px;
  overflow-x: auto;

  .tab-item {
    flex-shrink: 0;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 20px;
    transition: all 0.2s;
    white-space: nowrap;
    border: none;

    &.active {
      background: #2563eb;
      color: white;
    }
  }
}

.alerts-list {
  padding: 16px;
}

.alert-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
}

.vehicle-info {
  display: flex;
  align-items: center;
  gap: 6px;

  .vehicle-icon {
    font-size: 18px;
    color: #2563eb;
  }

  .plate-number {
    font-size: 15px;
    font-weight: 600;
    color: #333;
  }

  .plate-color {
    font-size: 14px;
    color: #64748b;
  }

  .separator {
    color: #d1d5db;
    margin: 0 2px;
  }

  .vehicle-type {
    font-size: 14px;
    color: #64748b;
  }
}

.status-tag {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;

  &.status-gray {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
  }

  &.status-blue {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
  }

  &.status-green {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
  }
}

.card-image {
  padding: 0 16px 12px;

  .alert-img {
    width: 100%;
    height: 180px;
    border-radius: 12px;
  }
}

.card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px;

  .level-tag {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;

    &.level-red {
      background: #fee2e2;
      color: #dc2626;
    }

    &.level-orange {
      background: #ffedd5;
      color: #ea580c;
    }

    &.level-yellow {
      background: #fef9c3;
      color: #ca8a04;
    }

    &.level-blue {
      background: #dbeafe;
      color: #2563eb;
    }
  }

  .alert-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
  }
}

.card-details {
  padding: 0 16px 12px;

  .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;

    &:last-child {
      margin-bottom: 0;
    }

    .detail-icon {
      font-size: 16px;
      color: #2563eb;
      margin-right: 8px;
    }

    .label {
      color: #94a3b8;
    }

    .value {
      color: #475569;
    }
  }
}

.warning-box {
  margin: 0 16px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #ea580c;

  .warning-dot {
    margin-right: 6px;
  }
}

.card-actions {
  padding: 8px 16px 16px;

  .action-btn {
    height: 44px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }
}

.empty-state {
  padding: 60px 0;
}

.match-popup {
  width: 90%;
  max-width: 360px;
}

.popup-content {
  padding: 24px;
}

.popup-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.popup-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .match-btn {
    height: 48px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    &.success {
      background: #16a34a;
      border: none;
      color: white;
    }

    &.error {
      background: white;
      border: 1px solid #ef4444;
      color: #ef4444;
    }

    .btn-icon {
      font-size: 20px;
    }
  }
}
</style>