You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
9.9 KiB
222 lines
9.9 KiB
1 month ago
|
# 接报警登记页面（非经侦类）技术架构文档
|
||
|
|
|
||
|
|
## 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，聚焦时蓝色边框高亮
|
||
|
|
- 分区标题使用蓝色文字+底部分隔线
|
||
|
|
- 按钮采用渐变背景+阴影的立体感设计
|