# 接报警登记页面（非经侦类）技术架构文档

## 1. 架构设计

```mermaid
flowchart TB
    subgraph Frontend["前端展示层"]
        A[Vue3 单文件组件 - NonEconomicAlarmRegister.vue]
        B[Element Plus UI组件库]
        C[表单验证与状态管理]
    end

    subgraph Data["数据层"]
        D[响应式数据 reactive/ref]
        E[Mock模拟数据]
        F[本地存储 localStorage 草稿]
    end

    subgraph Components["组件结构"]
        G[基础信息区 - 左栏]
        H[人员信息区 - 右栏]
        I[内容描述区 - 底部全宽]
        J[附件上传区]
        K[操作按钮栏]
    end

    A --> B
    A --> C
    C --> D
    D --> E
    D --> F
    A --> G
    A --> H
    A --> I
    A --> J
    A --> K
```

## 2. 技术选型

| 技术项 | 选型方案 | 版本要求 | 说明 |
|--------|----------|----------|------|
| 前端框架 | Vue 3 (Composition API) | ^3.3+ | 使用 `<script setup>` 语法 |
| UI组件库 | Element Plus | ^2.4+ | 表单、表格、上传、对话框等 |
| 构建工具 | Vite | ^5.0+ | 与现有项目保持一致 |
| 图标库 | @element-plus/icons-vue | ^2.3+ | 统一图标风格 |
| 状态管理 | Vue reactive/ref | 内置 | 无需引入Pinia，单页面足够 |
| 样式方案 | Scoped CSS + CSS变量 | - | 与现有项目风格统一 |

## 3. 文件结构与路由

### 3.1 文件位置

```
jingzhen-case-mgmt/frontend/src/views/report-center/
├── CaseReception.vue          # 已有：经侦类警情受理登记
├── NonEconomicAlarmRegister.vue  # 新增：非经侦类接报警登记（本页）
└── ...
```

### 3.2 路由定义

| 路由路径 | 组件名称 | 说明 |
|----------|----------|------|
| `/report-center/non-economic-alarm` | NonEconomicAlarmRegister | 非经侦类接报警登记 |

## 4. 组件架构设计

### 4.1 页面整体布局

```
┌─────────────────────────────────────────────────────────────┐
│  页面标题区：接报警登记（非经侦类）     [紧急标识] [警情编号] │
├──────────────────────┬──────────────────────────────────────┤
│                      │                                      │
│   左栏 (48%)         │   右栏 (48%)                         │
│ ┌──────────────────┐ │ ┌──────────────────────────────────┐ │
│ │ 警情基本信息      │ │ │ 当事人信息（动态增删行）          │ │
│ │ - 报警时间        │ │ │ - 当事人1: 姓名/角色/联系方式    │ │
│ │ - 警情来源        │ │ │ - 当事人2: ...                   │ │
│ │ - 警情类别        │ │ │ [+ 添加当事人]                   │ │
│ │ - 事发地点        │ │ ├──────────────────────────────────┤ │
│ │ - 是否紧急        │ │ │ 处警信息                         │ │
│ ├──────────────────┤ │ │ - 出警单位(自动填充)              │ │
│ │ 报警人信息        │ │ │ - 出警民警(多选)                 │ │
│ │ - 报警人类型      │ │ │ - 到达时间                       │ │
│ │ - 姓名/身份证     │ │ │ - 处置措施/结果                  │ │
│ │ - 联系电话/住址   │ │ └──────────────────────────────────┘ │
│ └──────────────────┘ │                                      │
├──────────────────────┴──────────────────────────────────────┤
│  全宽区域                                                     │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 警情内容                                                   │ │
│ │ - 简要案情摘要（限200字）                                   │ │
│ │ - 详细经过描述（多行富文本）                                 │ │
│ ├─────────────────────────────────────────────────────────┤ │
│ │ 附件材料上传                                               │ │
│ │ [拖拽上传区域]  已上传文件列表                              │ │
│ └─────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│  操作栏:  [暂存草稿]  [提交登记]  [打印回执]  [取消]           │
└─────────────────────────────────────────────────────────────┘
```

### 4.2 数据模型（Vue Reactive）

```javascript
// 表单主数据结构
const formData = reactive({
  // 警情基本信息
  alarmNo: '',              // 警情编号（自动生成）
  alarmTime: '',            // 报警时间
  alarmSource: '',          // 警情来源
  alarmCategory: '',        // 警情类别
  alarmSubType: '',         // 具体类型
  incidentAddress: '',      // 事发地点
  isUrgent: false,          // 是否紧急
  reportMethod: '',         // 报警方式

  // 报警人信息
  reporterType: '',         // 报警人类型
  reporterName: '',         // 姓名
  reporterGender: '',       // 性别
  reporterIdCard: '',       // 身份证号
  reporterPhone: '',        // 联系电话
  reporterAddress: '',      // 现住址
  relationToParty: '',      // 与当事人关系

  // 当事人信息（数组）
  partyList: [],            // 当事人列表

  // 警情内容
  briefContent: '',         // 简要案情
  detailContent: '',        // 详细经过
  involvedProperty: '',     // 涉案财物
  casualtyInfo: '',         // 伤亡情况
  preliminaryJudgment: '',  // 初步定性

  // 处警信息
  responseUnit: '',         // 出警单位（自动）
  responseOfficers: [],     // 出警民警
  arriveTime: '',           // 到达时间
  disposalMeasure: '',      // 处置措施
  disposalResult: ''        // 处置结果
})

// 当事人单条数据结构
const partyItem = {
  seq: 0,
  name: '',
  gender: '',
  idCard: '',
  phone: '',
  role: ''  // 受害人/嫌疑人/证人/其他
}
```

## 5. API接口定义（预留）

> 注：当前为原型阶段，使用Mock数据，以下接口预留后端对接

| 接口路径 | 方法 | 用途 | 请求参数 | 响应数据 |
|----------|------|------|----------|----------|
| `/api/alarm/non-economic` | POST | 提交非经侦警情登记 | formData对象 | `{ code: 200, data: { alarmNo: 'JJ...' } }` |
| `/api/alarm/non-economic/draft` | POST | 暂存草稿 | formData对象 | `{ code: 200, msg: '保存成功' }` |
| `/api/alarm/non-economic/:id` | GET | 获取警情详情 | 路径参数id | 警情完整数据 |
| `/api/alarm/upload` | POST | 上传附件 | FormData文件 | `{ code: 200, data: { url: '...', fileName: '...' } }` |
| `/api/common/district/tree` | GET | 获取行政区划树 | 无 | 行政区划JSON树 |
| `/api/common/officers/list` | GET | 获取民警列表 | 单位ID | 民警列表 |

## 6. 关键交互逻辑

### 6.1 表单验证规则

- **报警时间**：必填，不能晚于当前时间
- **警情来源**：必填选择
- **警情类别**：必填选择，且排除经侦类选项
- **事发地址**：必填，最少10个字符
- **报警人电话**：必填，手机号11位或座机格式校验
- **报警人姓名**：条件必填（非匿名时必填）
- **简要案情**：必填，最多200字
- **详细经过**：必填，最少20字
- **出警民警**：必填，至少选择1人
- **到达时间**：必填，不能早于报警时间

### 6.2 业务逻辑

1. **警情编号自动生成**：格式 `JJ + YYYYMMDD + 4位序号`，提交时自动生成
2. **出警单位自动填充**：从登录用户信息获取所属单位
3. **当事人动态增删**：支持添加多个当事人，最少1个，最多10个
4. **草稿自动保存**：表单变化时防抖保存到localStorage
5. **紧急标识联动**：选择"紧急"时，表单标题区显示橙色警示标签
6. **打印回执**：调用浏览器打印功能，输出格式化的接报警回执单

## 7. 样式规范

### 7.1 颜色变量

```css
:root {
  --primary-color: #0d47a1;        /* 主色-公安蓝 */
  --primary-light: #1976d2;        /* 浅主色 */
  --primary-bg: #e3f2fd;           /* 主色背景 */
  --urgent-color: #e65100;         /* 紧急-橙色 */
  --success-color: #2e7d32;        /* 成功-绿色 */
  --danger-color: #c62828;         /* 危险-红色 */
  --text-primary: #1f2937;         /* 主文本 */
  --text-secondary: #6b7280;       /* 次文本 */
  --border-color: #e5e7eb;         /* 边框色 */
  --bg-gray: #f9fafb;              /* 灰背景 */
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08);  /* 卡片阴影 */
}
```

### 7.2 设计原则

- 与现有项目 `CaseReception.vue` 风格保持一致
- 使用相同的蓝色主题和卡片式分区布局
- 表单字段统一圆角4px，聚焦时蓝色边框高亮
- 分区标题使用蓝色文字+底部分隔线
- 按钮采用渐变背景+阴影的立体感设计