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

1. 架构设计

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）

// 表单主数据结构
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 业务逻辑

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

7. 样式规范

7.1 颜色变量

: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，聚焦时蓝色边框高亮
分区标题使用蓝色文字+底部分隔线
按钮采用渐变背景+阴影的立体感设计

9.9 KiB Raw Blame History

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

1. 架构设计

2. 技术选型

3. 文件结构与路由

3.1 文件位置

3.2 路由定义

4. 组件架构设计

4.1 页面整体布局

4.2 数据模型（Vue Reactive）

5. API接口定义（预留）

6. 关键交互逻辑

6.1 表单验证规则

6.2 业务逻辑

7. 样式规范

7.1 颜色变量

7.2 设计原则

9.9 KiB

Raw Blame History