fix: 清理健康咨询孤岛页面，补齐PRD缺失页面描述，优化多模块原型
- 删除无入口跳转的 record-detail.html 及其截图 - PRD页面清单补入 record-detail-rated/unrated/timeout、select-record、consult-flowchart - PRD正文新增5个页面的功能说明、业务规则、交互说明 - 补充 video-detail-ongoing.jpg 截图 - 同步 index.html SITE_MAP 移除已删除页面条目 - 优化应急就医及管理端多个原型页面 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,455 @@
|
||||
# 应急就医（员工端）产品需求文档
|
||||
|
||||
## 模块概述
|
||||
|
||||
应急就医模块为油田员工提供紧急医疗场景下的一站式服务能力，涵盖应急资源地图查看（医院、医疗点、AED、救护车、急救包）、应急求助（拨打120、应急视频通话、应急电话）、急救提示与教学、大病就医预约挂号等功能，帮助员工在突发健康事件中快速获取周边急救资源和专业医疗支持。
|
||||
|
||||
### 页面导航结构
|
||||
|
||||
```
|
||||
应急就医（员工端）
|
||||
├── 应急就医主页
|
||||
├── 应急资源地图
|
||||
│ ├── 油田医院地图（默认）→ 医院详情
|
||||
│ ├── 医疗点地图 → 医疗点详情
|
||||
│ ├── AED地图 → AED详情
|
||||
│ ├── 救护车地图 → 救护车详情
|
||||
│ ├── 急救包地图 → 急救包详情
|
||||
│ └── 模拟急救 → 急救提示书
|
||||
├── 应急求助
|
||||
│ ├── 拨打120（系统电话，将120号码带入到拨号页面）
|
||||
│ ├── 应急视频通话
|
||||
│ └── 应急电话（系统电话，将云坐席号码带入到拨号页面）
|
||||
├── 大病就医预约
|
||||
│ ├── 预约列表（进行中(待确认/已确认)/已完成/已取消）
|
||||
│ ├── 发起预约（表单）
|
||||
│ └── 预约详情（待确认/已确认/已完成/已取消）
|
||||
├── 急救教学视频
|
||||
│ ├── 视频列表
|
||||
│ ├── 播放视频
|
||||
└── 应急求助记录
|
||||
```
|
||||
|
||||
### 预约状态流转图
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> 待确认: 员工发起预约
|
||||
待确认 --> 已确认: 管理人员确认并派单给驻场人员
|
||||
待确认 --> 已取消: 员工取消 / 管理人员取消
|
||||
已确认 --> 已完成: 驻场人员完成挂号，在应急APP点击已完成
|
||||
已确认 --> 已取消: 员工取消 / 管理人员取消
|
||||
```
|
||||
|
||||
## 页面清单
|
||||
|
||||
### 入口与总览
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|-----------|------|------|
|
||||
| 1 | 应急就医主页 | index.html | 页面 |
|
||||
|
||||
### 应急资源地图
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|----|----------------|------|------|
|
||||
| 2 | 应急资源地图（油田医院地图） | resource-map.html | 页面 |
|
||||
| 3 | AED地图 | resource-map-aed.html | 页面 |
|
||||
| 4 | 救护车地图 | resource-map-ambulance.html | 页面 |
|
||||
| 5 | 医疗点地图 | resource-map-clinic.html | 页面 |
|
||||
| 6 | 急救包地图 | resource-map-kit.html | 页面 |
|
||||
| 7 | AED详情 | aed-detail.html | 页面 |
|
||||
| 8 | 救护车详情 | ambulance-detail.html | 页面 |
|
||||
| 9 | 医疗点详情 | clinic-detail.html | 页面 |
|
||||
| 10 | 油田医院详情 | hospital-detail.html | 页面 |
|
||||
| 11 | 急救包详情 | first-aid-kit-detail.html | 页面 |
|
||||
| 12 | 急救提示书 | emergency-tips.html | 页面 |
|
||||
|
||||
### 应急求助
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|----|----------|------|------|
|
||||
| 13 | 应急求助记录 | help-records.html | 页面 |
|
||||
| 14 | 应急视频对话页面 | emergency-chat.html | 页面 |
|
||||
### 急救教学
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|-----------|------|------|
|
||||
| 15 | 急救教学视频 | first-aid-videos.html | 页面 |
|
||||
|
||||
### 大病就医预约
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|-----------|------|------|
|
||||
| 16 | 预约列表（进行中） | appointment-list.html | 页面 |
|
||||
| 17 | 预约列表（已完成） | appointment-list-done.html | 页面 |
|
||||
| 18 | 预约列表（已取消） | appointment-list-cancelled.html | 页面 |
|
||||
| 19 | 发起预约 | appointment-form.html | 页面 |
|
||||
| 20 | 预约详情-待确认 | appointment-detail-pending.html | 页面 |
|
||||
| 21 | 预约详情-已确认 | appointment-detail-confirmed.html | 页面 |
|
||||
| 22 | 预约详情-已完成 | appointment-detail-done.html | 页面 |
|
||||
| 23 | 预约详情-已取消 | appointment-detail-cancelled.html | 页面 |
|
||||
|
||||
---
|
||||
|
||||
## 逐页说明
|
||||
|
||||
---
|
||||
|
||||
## 一、入口与总览
|
||||
|
||||
### 1. 应急就医主页（index.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 应急就医模块的统一入口页，为员工提供各功能的快速访问路径，包含应急资源地图入口、应急求助快捷操作、更多功能菜单三个区域。
|
||||
|
||||
**业务规则：**
|
||||
- 应急资源地图以卡片形式展示，含缩略地图和文字说明
|
||||
- 应急求助区域提供三个快捷操作入口：拨打120、应急视频、应急电话
|
||||
- 更多功能区域以列表形式展示：大病就医预约、急救教学视频、应急求助记录
|
||||
|
||||
**交互说明：**
|
||||
- 点击"应急资源地图"卡片，跳转到应急资源地图页面
|
||||
- 点击"拨打120"，调起系统电话拨号，将120号码带入过去，并产生一条求助方式为“拨打120”的应急工单
|
||||
- 点击"应急视频"，跳转到应急视频通话页面，IM三方视频通话，拨打当前员工所在应急中心的操作人员和专业人员的三方视频，并产生一条求助方式为“应急视频”的进行中状态的应急工单。点击时需要判断当前系统中是否存在“进行中”的应急视频工单，是的话，则进入应急视频对话页面，不存在则拨打三方视频
|
||||
- 点击"应急电话"，调起系统电话拨号,将云坐席号码带入过去
|
||||
- 点击"大病就医预约"，跳转到预约列表页面
|
||||
- 点击"急救教学视频"，跳转到急救教学视频列表页面
|
||||
- 点击"应急求助记录"，跳转到应急求助记录页面
|
||||
|
||||
---
|
||||
|
||||
## 二、应急资源地图
|
||||
|
||||
### 2. 应急资源地图-油田医院/合作医院（resource-map.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 以地图形式展示油田医院的资源信息。顶部Tab栏支持切换不同资源类型，点击标记可弹出资源概要弹窗。页面还提供模拟急救功能入口。
|
||||
|
||||
**业务规则：**
|
||||
- 地图图标标记按资源类型使用不同图标进行区分
|
||||
- 顶部Tab栏包含：油田医院（默认选中）、合作医院、医疗点、AED、救护车、急救包
|
||||
- 点击标记弹出的卡片展示：医院图片、医院名称、距离/驾车时间、地址、联系电话和导航按钮
|
||||
- 模拟急救面板提供心梗、猝死、脑梗/脑出血三种疾病场景
|
||||
|
||||
**交互说明：**
|
||||
- 点击地图标记点，弹出底部资源概要卡片
|
||||
- 点击顶部Tab栏切换资源类型，跳转到对应资源地图页面
|
||||
- 点击资源卡片中的"联系电话"按钮，调起系统拨号
|
||||
- 点击资源卡片中的"地图导航"按钮，调起地图导航
|
||||
- 点击"模拟急救"按钮，展开疾病选择面板
|
||||
- 点击疾病标签（心梗/猝死/脑梗），跳转到对应急救提示书页面
|
||||
- 点击右侧定位按钮，重新定位到当前位置
|
||||
- 点击 +/− 按钮，缩放地图
|
||||
|
||||
---
|
||||
|
||||
### 3-6. AED / 救护车 / 医疗点 / 急救包地图
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
以上四个地图页面与油田医院地图共享统一的页面结构，仅资源类型不同。
|
||||
|
||||
|
||||
**交互说明：** 同油田医院地图页面，底部Tab栏切换时跳转到对应资源地图页面，点击标记弹出该类型资源的概要卡片。
|
||||
|
||||
---
|
||||
|
||||
### 7. AED详情（aed-detail.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示单个AED设备的详细信息，包括设备编号、管理人联系方式、操作图片和视频资源。
|
||||
|
||||
**业务规则：**
|
||||
|
||||
- 名称写死“半自动体外除颤仪”
|
||||
- 信息项：设备编号、所属单位、管理人电话、地址
|
||||
- 附件区域：操作图片支持显示多个（可查看大图）、操作视频（可播放）、免责声明PDF（可下载）
|
||||
- 提供联系电话和导航两个操作按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击"联系电话"按钮，调起系统拨号
|
||||
- 点击"导航"按钮，调起地图导航
|
||||
- 点击操作图片，查看大图
|
||||
- 点击操作视频，播放视频
|
||||
- 点击返回箭头，返回地图页面
|
||||
|
||||
---
|
||||
|
||||
### 8. 救护车详情（ambulance-detail.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示单辆救护车的详细信息，包括驾驶人联系方式、所属医疗点、配备设备和救护能力。
|
||||
|
||||
**业务规则：**
|
||||
- 信息项：驾驶人电话、地址、所属医疗点、车辆类型、配备设备列表、救护能力说明
|
||||
- 提供联系电话操作按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击"联系电话"按钮，调起系统拨号
|
||||
- 点击"导航"按钮，调起地图导航
|
||||
- 点击返回箭头，返回地图页面
|
||||
|
||||
---
|
||||
|
||||
### 9. 医疗点详情（clinic-detail.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示单个医疗点的详细信息，包括所属医院、联系方式和医疗点简介。
|
||||
|
||||
**业务规则：**
|
||||
- 信息项：医疗点名称、所属医院、所属单位、联系电话、地址
|
||||
- 底部展示医疗点简介文字
|
||||
- 提供联系电话和导航两个操作按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击"联系电话"按钮，调起系统拨号
|
||||
- 点击"导航"按钮，调起地图导航
|
||||
- 点击返回箭头，返回地图页面
|
||||
|
||||
---
|
||||
|
||||
### 10. 油田医院/合作医院详情（hospital-detail.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示油田医院/合作医院的详细信息，包括医院等级、急救擅长领域和医院简介。
|
||||
|
||||
**业务规则：**
|
||||
- 头部展示医院图片、医院名称和等级标签（如"二甲"）
|
||||
- 信息项：联系电话、地址
|
||||
- 医院简介区域支持展开/收起
|
||||
- 急救擅长区域支持展开/收起
|
||||
- 提供联系电话和导航两个操作按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击"联系电话"按钮，调起系统拨号
|
||||
- 点击"导航"按钮，调起地图导航
|
||||
- 点击"展开"/"收起"切换医院简介和急救擅长的显示
|
||||
- 点击返回箭头，返回地图页面
|
||||
|
||||
---
|
||||
|
||||
### 11. 急救包详情（first-aid-kit-detail.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示单个急救包的详细信息，包括管理人联系方式和内配用品清单。
|
||||
|
||||
**业务规则：**
|
||||
- 信息项：所属单位、管理人电话、地址
|
||||
- 内配用品以分类表格展示
|
||||
- 提供联系电话和导航两个操作按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击"联系电话"按钮，调起系统拨号
|
||||
- 点击"导航"按钮，调起地图导航
|
||||
- 点击返回箭头，返回地图页面
|
||||
|
||||
---
|
||||
|
||||
## 三、应急求助
|
||||
|
||||
### 12. 应急视频对话页面（emergency-chat.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 应急视频拨打之后，产生了一条“应急视频”的进行中状态的工单，如当前工单未完成，后续主页点击“应急视频”时，进入聊天对话页面
|
||||
|
||||
**业务规则：**
|
||||
- 聊天区域展示三种消息类型：系统消息（居中灰色）、员工消息（右侧蓝色气泡）、对方消息（左侧白色气泡）
|
||||
- 参与人员列表展示通话参与者的姓名和角色（如"吴凤-主治医师"、"张旭-操作人员"）
|
||||
- 底部输入栏包含语音按钮和"按住说话"按钮
|
||||
|
||||
**交互说明：**
|
||||
- 长按"按住说话"按钮，发送语音消息
|
||||
- 点击参与人员头像，查看人员信息
|
||||
- 点击返回箭头，退出通话页面
|
||||
|
||||
---
|
||||
|
||||
### 13. 急救提示书（emergency-tips.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 根据选择的疾病类型（心梗/猝死/脑梗）展示对应的急救步骤指导，并列出最近的急救资源及距离信息。
|
||||
|
||||
**业务规则：**
|
||||
- 顶部以红色醒目标题显示急救提示书名称（如"心梗急救提示书"）
|
||||
- 急救步骤以编号列表形式展示，共4个步骤
|
||||
- 最近急救资源清单按距离排序展示，每项包含：资源类型图标、距离信息、步行/驾车时间
|
||||
- 资源类型包括：AED、急救包、救护车、医院、医疗点
|
||||
|
||||
**交互说明：**
|
||||
- 点击资源项的"详情"按钮，跳转到对应资源详情页面
|
||||
- 点击"导航"按钮，调起地图导航到该资源
|
||||
- 点击"电话"按钮（救护车），调起系统拨号
|
||||
- 点击返回箭头，返回地图页面
|
||||
|
||||
---
|
||||
|
||||
### 14. 应急求助记录（help-records.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示员工的历史应急求助记录列表，包含不同求助方式的记录。
|
||||
|
||||
**业务规则：**
|
||||
- 记录卡片展示：求助方式（应急视频/拨打120/应急电话）、求助时间、应急中心名称
|
||||
- 状态标签：进行中（蓝色）、已结束（灰色）
|
||||
- 按时间倒序排列
|
||||
|
||||
**交互说明：**
|
||||
- 只有进行中状态可以点击进去应急视频对话页面
|
||||
- 点击返回箭头，返回应急就医主页
|
||||
|
||||
---
|
||||
|
||||
## 四、急救教学
|
||||
|
||||
### 15. 急救教学视频（first-aid-videos.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 提供急救教学视频列表，员工可搜索和观看各类急救技能教学视频。
|
||||
|
||||
**业务规则：**
|
||||
- 顶部搜索栏支持按关键词搜索视频
|
||||
- 视频以卡片列表形式展示，每张卡片包含：缩略图、视频标题、发布日期
|
||||
- 视频类型包含：真人演示（中毒急救、成人心脏骤停、AED使用等）和动画教学（心肺复苏等）
|
||||
|
||||
**交互说明：**
|
||||
- 在搜索栏输入关键词，实时过滤视频列表
|
||||
- 点击视频卡片，进入视频播放页面
|
||||
- 点击返回箭头，返回应急就医主页
|
||||
|
||||
---
|
||||
|
||||
## 五、大病就医预约
|
||||
|
||||
### 16. 预约列表-进行中（appointment-list.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示员工的大病就医预约记录列表，默认显示进行中的预约，支持Tab切换查看不同状态。
|
||||
|
||||
**业务规则：**
|
||||
- Tab栏：全部、进行中（默认激活）、已完成、已取消
|
||||
- 预约卡片展示：医院名称、状态标签、科室、医生、挂号类别、期望预约时间
|
||||
- 进行中状态包含"待确认"和"已确认"两种子状态
|
||||
- 底部提供"发起新预约"按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击Tab栏切换不同状态的预约列表
|
||||
- 点击预约卡片，跳转到对应状态的预约详情页面
|
||||
- 点击"发起新预约"按钮，跳转到预约表单页面
|
||||
- 点击返回箭头，返回应急就医主页
|
||||
|
||||
---
|
||||
|
||||
### 17. 预约列表-已完成（appointment-list-done.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示已完成状态的预约记录列表。
|
||||
|
||||
**业务规则：**
|
||||
- "已完成"Tab激活，列表展示已完成的预约卡片
|
||||
- 状态标签显示绿色"已完成"
|
||||
- 卡片下方显示"驻场人员已完成挂号"提示
|
||||
|
||||
**交互说明：**
|
||||
- 点击预约卡片，跳转到已完成预约详情页面
|
||||
- 其他交互同预约列表-进行中
|
||||
|
||||
---
|
||||
|
||||
### 18. 预约列表-已取消（appointment-list-cancelled.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示已取消状态的预约记录列表。
|
||||
|
||||
**业务规则：**
|
||||
- "已取消"Tab激活，列表展示已取消的预约卡片
|
||||
- 状态标签显示灰色"已取消"
|
||||
- 支持区分"个人取消"和"管理人员取消"两种取消来源
|
||||
|
||||
**交互说明：**
|
||||
- 点击预约卡片，跳转到已取消预约详情页面
|
||||
- 其他交互同预约列表-进行中
|
||||
|
||||
---
|
||||
|
||||
### 19. 发起预约（appointment-form.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 员工填写大病就医预约表单，提交后进入待确认状态。
|
||||
|
||||
**业务规则：**
|
||||
- 表单提交后创建一条"待确认"状态的预约记录
|
||||
- 预约医院为下拉选择，选项来自系统配置的医院列表
|
||||
- 挂号类别支持专家号和普通号
|
||||
|
||||
**表单字段表：**
|
||||
|
||||
| 字段名 | 类型 | 必填 | 校验规则 |
|
||||
|--------|--------------|------|----------|
|
||||
| 预约医院 | 下拉选择 | 是 | 从系统配置医院列表中选择 |
|
||||
| 就诊卡号 | 文本输入 | 否 | 无 |
|
||||
| 挂号类别 | 下拉选择 | 是 | 专家号/普通号 |
|
||||
| 期望预约时间 | 日期时间选择，精确到时分 | 是 | 不可选择过去时间 |
|
||||
| 预约科室 | 文本输入 | 是 | 无 |
|
||||
| 预约医生 | 文本输入 | 是 | 无 |
|
||||
| 病情描述 | 多行文本 | 是 | 无 |
|
||||
|
||||
**交互说明：**
|
||||
- 填写完成后点击"确定"按钮提交预约
|
||||
- 必填字段未填写时提示校验错误
|
||||
- 点击返回箭头，返回预约列表页面
|
||||
|
||||
---
|
||||
|
||||
### 20-23. 预约详情（4种状态页面）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
预约详情为同一页面的4种状态变体，共享统一的预约信息展示结构，根据预约状态展示不同的顶部状态区和底部操作按钮。
|
||||
|
||||
**通用结构：**
|
||||
- 顶部状态区：状态大标题 + 状态说明文字
|
||||
- 预约信息卡片：预约医院、科室、医生、挂号类别、期望预约时间、发起预约时间
|
||||
|
||||
**各状态差异：**
|
||||
|
||||
| 状态 | 文件名 | 状态颜色 | 状态说明 | 底部按钮 | 附加信息 |
|
||||
|------|--------|----------|----------|----------|----------|
|
||||
| 待确认 | appointment-detail-pending.html | 橙色 | 请耐心等待管理人员进行确认 | 取消预约（红色边框） | 无 |
|
||||
| 已确认 | appointment-detail-confirmed.html | 蓝色 | 已派单至驻场人员(姓名) | 取消预约 + 联系驻场人员 | 无 |
|
||||
| 已完成 | appointment-detail-done.html | 绿色 | 驻场人员已完成挂号 | 联系驻场人员 | 挂号结果卡片 |
|
||||
| 已取消 | appointment-detail-cancelled.html | 灰色 | 个人取消 / 管理人员取消 | 无 | 取消信息卡片（取消时间、取消原因） |
|
||||
|
||||
**业务规则：**
|
||||
- 待确认和已确认状态支持员工主动取消预约
|
||||
- 取消预约需二次确认（弹窗确认）
|
||||
- 已完成状态额外展示挂号结果信息
|
||||
- 已取消状态展示取消来源（个人取消/管理人员取消）及取消原因
|
||||
|
||||
**交互说明：**
|
||||
- 点击"取消预约"按钮，弹出确认弹窗，确认后取消预约并返回列表
|
||||
- 点击"联系驻场人员"按钮，调起系统拨号联系驻场人员
|
||||
- 点击弹窗中的"再想想"，关闭弹窗
|
||||
- 点击弹窗中的"确认取消"，取消预约并跳转回预约列表
|
||||
- 点击返回箭头，返回预约列表页面
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -66,6 +66,7 @@
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="window.location.href='resource-map.html'">油田医院</div>
|
||||
<div class="tab-item">合作医院</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-clinic.html'">医疗点</div>
|
||||
<div class="tab-item tab-item--active">AED</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-ambulance.html'">救护车</div>
|
||||
|
||||
@@ -66,6 +66,7 @@
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="window.location.href='resource-map.html'">油田医院</div>
|
||||
<div class="tab-item">合作医院</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-clinic.html'">医疗点</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-aed.html'">AED</div>
|
||||
<div class="tab-item tab-item--active">救护车</div>
|
||||
|
||||
@@ -65,6 +65,7 @@
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="window.location.href='resource-map.html'">油田医院</div>
|
||||
<div class="tab-item">合作医院</div>
|
||||
<div class="tab-item tab-item--active">医疗点</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-aed.html'">AED</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-ambulance.html'">救护车</div>
|
||||
|
||||
@@ -66,6 +66,7 @@
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="window.location.href='resource-map.html'">油田医院</div>
|
||||
<div class="tab-item">合作医院</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-clinic.html'">医疗点</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-aed.html'">AED</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-ambulance.html'">救护车</div>
|
||||
|
||||
@@ -88,6 +88,7 @@
|
||||
<!-- [交互] 资源分类Tab -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item tab-item--active">油田医院</div>
|
||||
<div class="tab-item">合作医院</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-clinic.html'">医疗点</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-aed.html'">AED</div>
|
||||
<div class="tab-item" onclick="window.location.href='resource-map-ambulance.html'">救护车</div>
|
||||
|
||||
@@ -91,9 +91,13 @@ stateDiagram-v2
|
||||
| 25 | video-detail-rejected.html | 视频咨询详情 - 已拒绝 | 页面 |
|
||||
| 26 | rate-doctor.html | 评价医生 | 页面 |
|
||||
| 27 | my-records.html | 我的咨询 | 页面 |
|
||||
| 28 | record-detail.html | 咨询详情 | 页面 |
|
||||
| 29 | assistant-chat.html | 咨询小助手 | 页面 |
|
||||
| 30 | assistant-chat-history.html | 小助手历史对话 | 页面 |
|
||||
| 28 | record-detail-rated.html | 咨询详情 - 已评价 | 页面 |
|
||||
| 29 | record-detail-unrated.html | 咨询详情 - 未评价 | 页面 |
|
||||
| 30 | record-detail-timeout.html | 咨询详情 - 已超时 | 页面 |
|
||||
| 31 | select-record.html | 发送档案 | 页面 |
|
||||
| 32 | assistant-chat.html | 咨询小助手 | 页面 |
|
||||
| 33 | assistant-chat-history.html | 小助手历史对话 | 页面 |
|
||||
| 34 | consult-flowchart.html | 员工咨询业务流程图 | 页面 |
|
||||
|
||||
---
|
||||
|
||||
@@ -788,9 +792,9 @@ stateDiagram-v2
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 咨询状态及对应样式：`进行中`、`已完成`、`待开始`、`待确认`、`已取消`、`已拒绝`、`已超时`
|
||||
- 图文咨询状态：`进行中`、`已完成`、`已超时`
|
||||
- 视频咨询状态：`待确认` `待开始` `进行中` `已完成``已取消` `已拒绝`
|
||||
- 已完成的咨询如已评价则显示"已评价"标记，未评价则显示"待评价"标记
|
||||
- 视频咨询 `待确认` `待开始``已取消` `已拒绝` 显示预约时间，`已完成` 显示通话时长，
|
||||
- 小助手咨询仅有「进行中」和「已完成」两种状态
|
||||
|
||||
**交互说明**
|
||||
@@ -804,30 +808,81 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 5.3 咨询详情（record-detail.html）
|
||||
|
||||
|
||||
|
||||
### 5.3 咨询详情 - 已评价（record-detail-rated.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
已结束的图文咨询点击咨询记录展示单条图文咨询记录详情。包含医生信息栏、咨询信息卡片、咨询人健康档案入口、历史对话入口、医生咨询小结。根据咨询是否已评价，显示不同的 UI：
|
||||
- **已评价状态**：显示"我的评价"区域（5 星评价）、医生咨询小结，底部按钮为"再次咨询"（蓝色边框）+ "已评价"（灰色禁用）
|
||||
- **未评价状态**：隐藏"我的评价"区域，显示医生咨询小结，底部按钮为"再次咨询"（蓝色边框）+ "评价"（蓝色填充）
|
||||
已完成且已评价的图文咨询详情页。展示医生信息栏（头像、姓名、科室、"已完成"状态标签）、咨询信息卡片（咨询类型、咨询人、咨询时间、结束时间、咨询时长）、"我的评价"区域（5 星评价 + 评价文字 + 匿名标识）、咨询人健康档案入口、历史对话入口。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 已完成的咨询显示医生咨询小结
|
||||
- 已评价的咨询显示评价星级，"评价"按钮变为"已评价"禁用状态
|
||||
- 未评价的咨询隐藏评价区域，显示"评价"按钮
|
||||
- 显示"我的评价"区域，包含星级评分和评价文字
|
||||
- 底部无操作按钮（已评价状态无需额外操作）
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击对话入口卡片跳转到图文咨询历史对话页（只读状态）
|
||||
- 点击「再次咨询」跳转到本次咨询的专家主页
|
||||
- 点击「咨询人健康档案」入口跳转到健康档案详情页，从快速咨询产生的业务因没有咨询人健康档案信息，自动隐藏该区域
|
||||
- 点击「评价」按钮（未评价状态）跳转到评价医生页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
- 点击「咨询人健康档案」入口 → 跳转 consult-person-detail.html
|
||||
- 点击「查看历史对话记录」→ 跳转 text-chat-history.html?from=record-detail-rated
|
||||
- 导航栏返回 → my-records.html
|
||||
|
||||
---
|
||||
|
||||
### 5.4 咨询详情 - 未评价（record-detail-unrated.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
已完成但未评价的图文咨询详情页。展示医生信息栏、咨询信息卡片、咨询人健康档案入口、历史对话入口。底部显示"评价"按钮引导用户完成评价。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 不显示评价区域
|
||||
- 底部显示蓝色"评价"按钮
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「评价」按钮 → 跳转 rate-doctor.html
|
||||
- 点击「咨询人健康档案」入口 → 跳转 consult-person-detail.html
|
||||
- 点击「查看历史对话记录」→ 跳转 text-chat-history.html?from=record-detail-unrated
|
||||
- 导航栏返回 → my-records.html
|
||||
|
||||
---
|
||||
|
||||
### 5.5 咨询详情 - 已超时（record-detail-timeout.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
因超时自动关闭的图文咨询详情页。展示医生信息栏（"已超时"橙色状态标签）、咨询信息卡片（含结束原因"超时自动关闭"红色文字）、超时提示卡片（橙色背景 + 左侧红色边框，说明超过七天无回复已自动关闭）、咨询人健康档案入口、历史对话入口。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 咨询信息卡片中"结束原因"显示为红色"超时自动关闭"
|
||||
- 显示醒目的超时提示卡片，告知用户如需继续咨询请重新发起
|
||||
- 底部无操作按钮
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」入口 → 跳转 consult-person-detail.html
|
||||
- 点击「查看历史对话记录」→ 跳转 text-chat-history.html?from=record-detail-timeout
|
||||
- 导航栏返回 → my-records.html
|
||||
|
||||
---
|
||||
|
||||
### 5.6 发送档案（select-record.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
图文咨询聊天中发送健康档案的选择页面。顶部显示当前咨询人信息（头像、姓名、基本信息、与本人关系标签），下方列出该咨询人的健康档案列表，每条档案卡片包含图标、档案名称、描述摘要、标签（如持续时间）、创建日期，右侧为单选勾选框。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 单选模式，同一时间只能选中一条档案
|
||||
- 选中档案后底部"发送档案"按钮变为蓝色可点击状态
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击档案卡片 → 选中该档案（取消其他选中）
|
||||
- 点击「发送档案」按钮 → 返回聊天页（history.back）
|
||||
- 导航栏返回 → 返回上一页
|
||||
|
||||
---
|
||||
|
||||
@@ -881,3 +936,7 @@ stateDiagram-v2
|
||||
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
- 消息区可上下滚动浏览历史对话
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@@ -1,331 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询详情</title>
|
||||
<style>
|
||||
/* 全局重置 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f0f2f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
/* 手机壳模拟器 */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
min-height: 844px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.phone-status-bar {
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
/* 可滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 医生信息栏 */
|
||||
.detail-doctor-bar { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.detail-doctor-bar .dd-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg,#e8f4ff,#bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.detail-doctor-bar .dd-info { flex: 1; }
|
||||
.detail-doctor-bar .dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.detail-doctor-bar .dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.detail-doctor-bar .dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: #e6f4ff; color: #1677ff; white-space: nowrap; }
|
||||
|
||||
/* 咨询信息卡片 */
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.detail-info-card .dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.detail-info-card .dic-row:last-child { border-bottom: none; }
|
||||
.detail-info-card .dic-label { color: #999; }
|
||||
.detail-info-card .dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
/* 对话入口卡片 */
|
||||
.chat-entry {
|
||||
margin: 12px 16px;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.chat-entry:active { transform: scale(0.98); }
|
||||
.chat-entry .ce-icon { font-size: 28px; flex-shrink: 0; }
|
||||
.chat-entry .ce-info { flex: 1; }
|
||||
.chat-entry .ce-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.chat-entry .ce-sub { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.chat-entry .ce-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 我的评价区域 */
|
||||
.rating-section { margin: 12px 16px; background: #fff; border-radius: 14px; padding: 16px; display: none; }
|
||||
.rating-section.show { display: block; }
|
||||
.rating-section .rs-label { font-size: 13px; color: #999; margin-bottom: 8px; }
|
||||
.rating-section .rs-stars { display: flex; gap: 4px; }
|
||||
.rating-section .rs-stars .star { font-size: 20px; }
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.health-record-entry {
|
||||
margin: 12px 16px;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.health-record-entry .hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.health-record-entry .hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.health-record-entry .hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 医生咨询小结 */
|
||||
.doctor-summary {
|
||||
margin: 12px 16px;
|
||||
background: #fffbe6;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
.doctor-summary .ds-title { font-size: 14px; font-weight: 600; color: #d46b08; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.doctor-summary .ds-content { font-size: 13px; color: #ad6800; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.detail-footer .btn-outline {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
color: #1677ff;
|
||||
border: 2px solid #1677ff;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-outline:active { opacity: 0.85; }
|
||||
.detail-footer .btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-primary:active { opacity: 0.85; }
|
||||
.detail-footer .btn-disabled {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #f0f0f0;
|
||||
color: #bfbfbf;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 底部安全区留白 */
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏：时间 + 信号电池图标 -->
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 导航栏：返回按钮 → my-records.html + 标题 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="my-records.html">← 返回</a>
|
||||
<span class="nav-title">咨询详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 医生信息栏：头像 + 姓名科室 + 状态标签 -->
|
||||
<div class="detail-doctor-bar">
|
||||
<div class="dd-avatar">👨⚕️</div>
|
||||
<div class="dd-info">
|
||||
<div class="dd-name">张建国医生</div>
|
||||
<div class="dd-dept">北京协和医院 · 心内科</div>
|
||||
</div>
|
||||
<span class="dd-status">进行中</span>
|
||||
</div>
|
||||
|
||||
<!-- 咨询信息卡片：类型、时间、状态、时长 -->
|
||||
<div class="detail-info-card">
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询类型</span>
|
||||
<span class="dic-value">💬 图文咨询</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时间</span>
|
||||
<span class="dic-value">2026-04-07 10:20</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询人</span>
|
||||
<span class="dic-value">张三（父亲）</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询状态</span>
|
||||
<span class="dic-value">已完成</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时长</span>
|
||||
<span class="dic-value">32分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 我的评价区域：已评价时显示 -->
|
||||
<div id="ratingSection" class="rating-section">
|
||||
<div class="rs-label">我的评价</div>
|
||||
<div class="rs-stars">
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口 -->
|
||||
<a class="health-record-entry" href="#">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html?from=record-detail">
|
||||
<span class="ce-icon">💬</span>
|
||||
<div class="ce-info">
|
||||
<div class="ce-title">查看历史对话记录</div>
|
||||
<div class="ce-sub">点击查看完整对话内容</div>
|
||||
</div>
|
||||
<span class="ce-arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- [条件显示] 医生咨询小结：已完成的咨询显示 -->
|
||||
<div id="doctorSummary" class="doctor-summary" style="display: none;">
|
||||
<div class="ds-title">📋 医生咨询小结</div>
|
||||
<div class="ds-content">建议完善心内科相关检查：心电图、超声心动图，同时加强血压日常监测，低盐低脂饮食，避免剧烈运动，如症状加重请及时就诊。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏：根据评价状态显示不同按钮 -->
|
||||
<div class="detail-footer">
|
||||
<button id="btnContinue" class="btn-outline" onclick="window.location.href='text-chat.html?from=record-detail'">再次咨询</button>
|
||||
<button id="btnRate" class="btn-primary" onclick="handleRate()">评价</button>
|
||||
<button id="btnRated" class="btn-disabled" disabled>已评价</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 页面初始化：根据咨询状态设置UI
|
||||
* 数据来源：实际应从后端API获取，这里使用示例数据
|
||||
*/
|
||||
function initPage() {
|
||||
// 示例：从URL参数或数据属性获取是否已评价的状态
|
||||
// 实际应用中应从后端API获取真实数据
|
||||
const isRated = true; // 改为 false 可查看未评价状态
|
||||
|
||||
const ratingSection = document.getElementById('ratingSection');
|
||||
const doctorSummary = document.getElementById('doctorSummary');
|
||||
const btnRate = document.getElementById('btnRate');
|
||||
const btnRated = document.getElementById('btnRated');
|
||||
|
||||
if (isRated) {
|
||||
// 已评价状态
|
||||
ratingSection.classList.add('show');
|
||||
doctorSummary.style.display = 'block';
|
||||
btnRate.style.display = 'none';
|
||||
btnRated.style.display = 'block';
|
||||
} else {
|
||||
// 未评价状态
|
||||
ratingSection.classList.remove('show');
|
||||
doctorSummary.style.display = 'block';
|
||||
btnRate.style.display = 'block';
|
||||
btnRated.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理评价按钮点击
|
||||
*/
|
||||
function handleRate() {
|
||||
// 跳转到评价页面或打开评价弹窗
|
||||
alert('跳转到评价页面');
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', initPage);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+6
-2
@@ -244,10 +244,14 @@ const SITE_MAP = [
|
||||
{ file:'resource-hospital.html', label:'医院信息' },
|
||||
{ file:'resource-medical-point.html', label:'医疗点信息' },
|
||||
{ file:'resource-aed.html', label:'AED设备信息-设备管理' },
|
||||
{ file:'resource-aed-add.html', label:'AED设备信息-新增AED设备' },
|
||||
{ file:'resource-aed-deploy.html', label:'AED设备信息-布点管理' },
|
||||
{ file:'resource-aed-deploy-add.html', label:'AED设备信息-新增布点' },
|
||||
{ file:'resource-aed-map.html', label:'AED设备信息-AED地图' },
|
||||
{ file:'resource-aed-certifier.html', label:'AED设备信息-取证人员' },
|
||||
{ file:'resource-aed-certifier-add.html', label:'AED设备信息-新增取证人员' },
|
||||
{ file:'resource-aed-maintenance.html', label:'AED设备信息-维护记录' },
|
||||
{ file:'resource-aed-maintenance-add.html', label:'AED设备信息-新增维护记录' },
|
||||
{ file:'resource-aed-training.html', label:'AED设备信息-培演记录' },
|
||||
{ file:'resource-aed-usage.html', label:'AED设备信息-应用记录' },
|
||||
{ file:'resource-ambulance.html', label:'救护车信息' },
|
||||
@@ -304,14 +308,14 @@ const SITE_MAP = [
|
||||
{ file:'video-detail-done.html', label:'视频已完成' }, { file:'video-detail-cancelled.html', label:'视频已取消' },
|
||||
{ file:'video-detail-rejected.html', label:'视频已拒绝' },
|
||||
{ file:'video-detail-ongoing.html', label:'视频进行中' },
|
||||
{ file:'my-records.html', label:'咨询记录' }, { file:'record-detail.html', label:'记录详情' },
|
||||
{ file:'my-records.html', label:'咨询记录' },
|
||||
{ file:'record-detail-rated.html', label:'已评价详情' }, { file:'record-detail-unrated.html', label:'未评价详情' }, { file:'record-detail-timeout.html', label:'已超时详情' },
|
||||
{ file:'rate-doctor.html', label:'评价医生' },
|
||||
{ file:'end-consult-dialog.html', label:'结束咨询弹窗', dialog:true },
|
||||
{ file:'select-report-dialog.html', label:'选择报告弹窗', dialog:true },
|
||||
{ file:'consult-flowchart.html', label:'咨询流程图' }
|
||||
]},
|
||||
{ name:'应急就医', dir:'employee-app/emergency-medical', entry:'index.html', pages:[
|
||||
{ name:'应急就医', dir:'employee-app/emergency-medical', entry:'index.html', prd:'employee-app/emergency-medical/doc/PRD.md', pages:[
|
||||
{ file:'index.html', label:'应急就医主页' },
|
||||
{ file:'emergency-chat.html', label:'应急对话' },
|
||||
{ file:'resource-map.html', label:'应急资源地图' },
|
||||
|
||||
@@ -0,0 +1,374 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 新增AED设备 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}
|
||||
.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}
|
||||
.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
|
||||
/* 面包屑 */
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{text-decoration:underline;}
|
||||
|
||||
/* 表单卡片 */
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:320px;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;min-width:320px;resize:vertical;font-family:inherit;min-height:80px;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.radio-group{display:flex;align-items:center;gap:20px;font-size:var(--font-sm);line-height:36px;}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-primary);}
|
||||
.form-hint{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:4px;}
|
||||
|
||||
/* 图片上传 */
|
||||
.upload-area{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}
|
||||
.upload-item{width:104px;height:104px;border-radius:var(--radius-sm);overflow:hidden;position:relative;border:1px solid var(--border);}
|
||||
.upload-item img{width:100%;height:100%;object-fit:cover;}
|
||||
.upload-item__delete{position:absolute;top:2px;right:2px;width:20px;height:20px;background:rgba(0,0,0,0.5);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;}
|
||||
.upload-btn{width:104px;height:104px;border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text-placeholder);font-size:var(--font-xs);gap:4px;transition:all .2s;}
|
||||
.upload-btn:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.upload-btn svg{width:24px;height:24px;}
|
||||
|
||||
/* 视频上传 */
|
||||
.upload-video-btn{width:200px;height:120px;border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text-placeholder);font-size:var(--font-xs);gap:4px;transition:all .2s;}
|
||||
.upload-video-btn:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.upload-video-btn svg{width:28px;height:28px;}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED设备信息
|
||||
</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item active">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="resource-aed.html">AED设备管理</a>
|
||||
<span>/</span>
|
||||
<span>新增AED设备</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>设备编号</div>
|
||||
<input class="form-input" type="text" placeholder="请输入设备编号，如 AED-2025-006">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>是否对接</div>
|
||||
<div class="radio-group">
|
||||
<label><input type="radio" name="isDocked" value="yes" checked onchange="toggleDocked()"> 是</label>
|
||||
<label><input type="radio" name="isDocked" value="no" onchange="toggleDocked()"> 否</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 对接模式：下拉选择 -->
|
||||
<div class="form-row docked-select">
|
||||
<div class="form-label"><span class="required">*</span>设备厂家</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择设备厂家</option>
|
||||
<option>迈瑞</option>
|
||||
<option>飞利浦</option>
|
||||
<option>卓尔</option>
|
||||
<option>日本光电</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row docked-select">
|
||||
<div class="form-label"><span class="required">*</span>设备型号</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择设备型号</option>
|
||||
<option>BeneHeart C1A</option>
|
||||
<option>BeneHeart C2</option>
|
||||
<option>HeartStart FRx</option>
|
||||
<option>HeartStart HS1</option>
|
||||
<option>AED Plus</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 非对接模式：手动输入 -->
|
||||
<div class="form-row docked-input" style="display:none;">
|
||||
<div class="form-label"><span class="required">*</span>设备厂家</div>
|
||||
<input class="form-input" type="text" placeholder="请输入设备厂家名称">
|
||||
</div>
|
||||
<div class="form-row docked-input" style="display:none;">
|
||||
<div class="form-label"><span class="required">*</span>设备型号</div>
|
||||
<input class="form-input" type="text" placeholder="请输入设备型号">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>所属单位</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择所属单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>所属部门</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择所属部门</option>
|
||||
<option>安全环保部</option>
|
||||
<option>综合管理部</option>
|
||||
<option>生产运行部</option>
|
||||
<option>人力资源部</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>设备类型</div>
|
||||
<div class="radio-group">
|
||||
<label><input type="radio" name="deviceType" value="standing" checked> 立式</label>
|
||||
<label><input type="radio" name="deviceType" value="wall"> 挂式</label>
|
||||
<label><input type="radio" name="deviceType" value="vehicle"> 车载</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">出厂日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>入库日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备状态 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">设备状态</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>电量</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input class="form-input" type="number" placeholder="请输入电量" style="min-width:200px;" min="0" max="100">
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>电极片是否完好</div>
|
||||
<div class="radio-group">
|
||||
<label><input type="radio" name="electrodeOk" value="yes" checked> 是</label>
|
||||
<label><input type="radio" name="electrodeOk" value="no"> 否</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>电池有效期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>电极片有效期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 摄像头信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">摄像头信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">摄像头序列号</div>
|
||||
<input class="form-input" type="text" placeholder="请输入摄像头序列号">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">摄像头验证码</div>
|
||||
<input class="form-input" type="text" placeholder="请输入摄像头验证码">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作资料 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">操作资料</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">操作图片</div>
|
||||
<div>
|
||||
<div class="upload-area">
|
||||
<div class="upload-item">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104'%3E%3Crect width='104' height='104' fill='%23f0f0f0'/%3E%3Ctext x='52' y='56' text-anchor='middle' fill='%23999' font-size='12'%3EAED操作1%3C/text%3E%3C/svg%3E" alt="操作图片1">
|
||||
<button class="upload-item__delete">×</button>
|
||||
</div>
|
||||
<div class="upload-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
上传图片
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-hint">支持 JPG/PNG 格式，单张不超过 5MB，最多上传 9 张</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">操作视频</div>
|
||||
<div>
|
||||
<div class="upload-video-btn">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect x="2" y="5" width="24" height="18" rx="3" stroke="currentColor" stroke-width="1.5"/><path d="M11 10l7 4-7 4V10z" fill="currentColor" opacity=".4"/></svg>
|
||||
上传视频
|
||||
</div>
|
||||
<div class="form-hint">支持 MP4/MOV 格式，不超过 200MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">免责声明</div>
|
||||
<div>
|
||||
<div class="upload-video-btn">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect x="2" y="5" width="24" height="18" rx="3" stroke="currentColor" stroke-width="1.5"/><path d="M11 10l7 4-7 4V10z" fill="currentColor" opacity=".4"/></svg>
|
||||
上传文件
|
||||
</div>
|
||||
<div class="form-hint">支持 DOC和PDF 格式，不超过 20MB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 管理信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">管理信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>管理部门</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择管理部门</option>
|
||||
<option>安全环保部</option>
|
||||
<option>综合管理部</option>
|
||||
<option>生产运行部</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>管理人</div>
|
||||
<input class="form-input" type="text" placeholder="请输入管理人姓名">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>管理人电话</div>
|
||||
<input class="form-input" type="tel" placeholder="请输入管理人联系电话">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>厂家电话</div>
|
||||
<input class="form-input" type="tel" placeholder="请输入厂家联系电话">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" onclick="alert('提交成功！');location.href='resource-aed.html';">提 交</button>
|
||||
<button class="btn btn-default" onclick="location.href='resource-aed.html';">取 消</button>
|
||||
</div>
|
||||
<script>
|
||||
function toggleDocked(){
|
||||
var isDocked=document.querySelector('input[name="isDocked"]:checked').value==='yes';
|
||||
document.querySelectorAll('.docked-select').forEach(function(el){el.style.display=isDocked?'flex':'none';});
|
||||
document.querySelectorAll('.docked-input').forEach(function(el){el.style.display=isDocked?'none':'flex';});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,238 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - AED设备信息 - 新增取证人员 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}
|
||||
.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}
|
||||
.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{text-decoration:underline;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:320px;}
|
||||
.search-select{position:relative;min-width:320px;}
|
||||
.search-select__input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);outline:none;width:100%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M10 10l3 3M6.5 2a4.5 4.5 0 110 9 4.5 4.5 0 010-9z' stroke='%23999' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.search-select__input:focus{border-color:var(--primary);}
|
||||
.search-select__dropdown{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:10;max-height:220px;overflow-y:auto;display:none;}
|
||||
.search-select__item{padding:10px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center;}
|
||||
.search-select__item:hover{background:var(--primary-light);}
|
||||
.search-select__item-name{font-weight:500;color:var(--text-primary);}
|
||||
.search-select__item-info{color:var(--text-placeholder);font-size:var(--font-xs);}
|
||||
.emp-card{background:var(--primary-light);border:1px solid #91d5ff;border-radius:var(--radius-md);padding:16px;margin-top:12px;display:none;}
|
||||
.emp-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;}
|
||||
.emp-card__item{font-size:var(--font-sm);}
|
||||
.emp-card__label{color:var(--text-placeholder);font-size:var(--font-xs);margin-bottom:2px;}
|
||||
.emp-card__value{color:var(--text-primary);}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.upload-area{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}
|
||||
.upload-btn{width:104px;height:104px;border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text-placeholder);font-size:var(--font-xs);gap:4px;transition:all .2s;}
|
||||
.upload-btn:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.upload-btn svg{width:24px;height:24px;}
|
||||
.upload-item{width:104px;height:104px;border-radius:var(--radius-sm);overflow:hidden;position:relative;border:1px solid var(--border);}
|
||||
.upload-item img{width:100%;height:100%;object-fit:cover;}
|
||||
.upload-item__delete{position:absolute;top:2px;right:2px;width:20px;height:20px;background:rgba(0,0,0,0.5);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;}
|
||||
.form-hint{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:4px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item active">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="resource-aed-certifier.html">取证人员</a>
|
||||
<span>/</span>
|
||||
<span>新增取证人员</span>
|
||||
</div>
|
||||
|
||||
<!-- 人员信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">人员信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>选择员工</div>
|
||||
<div>
|
||||
<div class="search-select" id="empSearch">
|
||||
<input class="search-select__input" type="text" placeholder="输入员工姓名或工号搜索" onfocus="document.getElementById('empDropdown').style.display='block'" oninput="filterEmp(this.value)">
|
||||
<div class="search-select__dropdown" id="empDropdown">
|
||||
<div class="search-select__item" onclick="selectEmp('张明','EMP-10021','长庆油田总部 / 安全环保部','138****1001')"><span class="search-select__item-name">张明</span><span class="search-select__item-info">EMP-10021 · 安全环保部</span></div>
|
||||
<div class="search-select__item" onclick="selectEmp('李华','EMP-10035','长庆油田总部 / 综合管理部','139****2002')"><span class="search-select__item-name">李华</span><span class="search-select__item-info">EMP-10035 · 综合管理部</span></div>
|
||||
<div class="search-select__item" onclick="selectEmp('王强','EMP-20018','第一采油厂 / 生产运行部','137****3003')"><span class="search-select__item-name">王强</span><span class="search-select__item-info">EMP-20018 · 生产运行部</span></div>
|
||||
<div class="search-select__item" onclick="selectEmp('赵丽','EMP-30042','第二采油厂 / 安全环保部','136****4004')"><span class="search-select__item-name">赵丽</span><span class="search-select__item-info">EMP-30042 · 安全环保部</span></div>
|
||||
<div class="search-select__item" onclick="selectEmp('陈伟','EMP-40056','第三采油厂 / 综合管理部','135****5005')"><span class="search-select__item-name">陈伟</span><span class="search-select__item-info">EMP-40056 · 综合管理部</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="emp-card" id="empCard">
|
||||
<div class="emp-card__grid">
|
||||
<div class="emp-card__item"><div class="emp-card__label">姓名</div><div class="emp-card__value" id="empName">—</div></div>
|
||||
<div class="emp-card__item"><div class="emp-card__label">员工编号</div><div class="emp-card__value" id="empNo">—</div></div>
|
||||
<div class="emp-card__item"><div class="emp-card__label">所属单位部门</div><div class="emp-card__value" id="empDept">—</div></div>
|
||||
<div class="emp-card__item"><div class="emp-card__label">联系电话</div><div class="emp-card__value" id="empPhone">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 证书信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">证书信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>证书编号</div>
|
||||
<input class="form-input" type="text" placeholder="请输入证书编号">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>证书类型</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择证书类型</option>
|
||||
<option>红十字救护员</option>
|
||||
<option>AHA急救证书</option>
|
||||
<option>EFR急救证书</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>发证机构</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择发证机构</option>
|
||||
<option>中国红十字会</option>
|
||||
<option>美国心脏协会(AHA)</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>取证日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>有效期至</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>证书照片</div>
|
||||
<div>
|
||||
<div class="upload-area">
|
||||
<div class="upload-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
上传照片
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-hint">支持 JPG/PNG 格式，单张不超过 5MB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" onclick="alert('新增成功！');location.href='resource-aed-certifier.html';">提 交</button>
|
||||
<button class="btn btn-default" onclick="location.href='resource-aed-certifier.html';">取 消</button>
|
||||
</div>
|
||||
<script>
|
||||
function filterEmp(val){
|
||||
var dd=document.getElementById('empDropdown');
|
||||
dd.style.display='block';
|
||||
dd.querySelectorAll('.search-select__item').forEach(function(item){
|
||||
var match=!val||item.textContent.toLowerCase().indexOf(val.toLowerCase())>-1;
|
||||
item.style.display=match?'flex':'none';
|
||||
});
|
||||
}
|
||||
function selectEmp(name,no,dept,phone){
|
||||
document.querySelector('.search-select__input').value=name+' ('+no+')';
|
||||
document.getElementById('empDropdown').style.display='none';
|
||||
var card=document.getElementById('empCard');
|
||||
card.style.display='block';
|
||||
document.getElementById('empName').textContent=name;
|
||||
document.getElementById('empNo').textContent=no;
|
||||
document.getElementById('empDept').textContent=dept;
|
||||
document.getElementById('empPhone').textContent=phone;
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!document.getElementById('empSearch').contains(e.target))
|
||||
document.getElementById('empDropdown').style.display='none';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -173,7 +173,7 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<button class="btn btn-primary" onclick="location.href='resource-aed-certifier-add.html';">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增取证人员
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,295 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - AED设备信息 - 新增布点 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}
|
||||
.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}
|
||||
.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.thumb{width:60px;height:40px;border-radius:var(--radius-sm);object-fit:cover;background:#f0f0f0;border:1px solid var(--border);}
|
||||
|
||||
/* 抽屉遮罩 */
|
||||
.drawer-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;}
|
||||
/* 抽屉 */
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:640px;background:#fff;z-index:210;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,0.15);animation:slideIn .3s ease;}
|
||||
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .2s;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
/* 抽屉表单 */
|
||||
.form-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;}
|
||||
.form-label{width:100px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;width:100%;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-control{flex:1;min-width:0;}
|
||||
.search-select{position:relative;}
|
||||
.search-select__input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);outline:none;width:100%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M10 10l3 3M6.5 2a4.5 4.5 0 110 9 4.5 4.5 0 010-9z' stroke='%23999' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.search-select__input:focus{border-color:var(--primary);}
|
||||
.search-select__dropdown{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:10;max-height:200px;overflow-y:auto;}
|
||||
.search-select__item{padding:10px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center;}
|
||||
.search-select__item:hover{background:var(--primary-light);}
|
||||
.search-select__item-id{font-weight:500;color:var(--text-primary);}
|
||||
.search-select__item-info{color:var(--text-placeholder);font-size:var(--font-xs);}
|
||||
.device-card{background:var(--primary-light);border:1px solid #91d5ff;border-radius:var(--radius-md);padding:16px;margin-top:8px;}
|
||||
.device-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
|
||||
.device-card__item{font-size:var(--font-sm);}
|
||||
.device-card__label{color:var(--text-placeholder);font-size:var(--font-xs);margin-bottom:2px;}
|
||||
.device-card__value{color:var(--text-primary);}
|
||||
.map-picker{width:100%;height:200px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#e6f7ff;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-sm);gap:6px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s;}
|
||||
.map-picker:hover{border-color:var(--primary);}
|
||||
.map-picker__bg{position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#91d5ff 19px,#91d5ff 20px);}
|
||||
.map-picker__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;}
|
||||
.map-picker__label{position:relative;z-index:2;display:flex;align-items:center;gap:6px;}
|
||||
.map-picker--selected .map-picker__label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.9);padding:4px 12px;border-radius:12px;font-size:var(--font-xs);box-shadow:0 1px 4px rgba(0,0,0,0.1);}
|
||||
.divider{height:1px;background:var(--border);margin:4px 0 20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item active">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容（布点管理列表页） -->
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>设备编号：</label><input class="filter-input" type="text" placeholder="请输入设备编号"></div>
|
||||
<div class="filter-item"><label>单位部门：</label><select class="filter-select"><option>全部单位</option><option>长庆油田总部</option><option>第一采油厂</option></select></div>
|
||||
<div class="filter-item"><label>设备状态：</label><select class="filter-select"><option>全部</option><option>正常</option><option>异常</option><option>维修中</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="location.href='resource-aed-deploy-add.html';"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增布点</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>批量导入</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 4v-2h10v2M7 12V5M4.5 7.5L7 5l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">布点管理列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 28 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>序号</th><th>设备编号</th><th>设备厂家</th><th>设备型号</th><th>所属单位</th><th>布放地址</th><th>布放图片</th><th>设备状态</th><th>设备电量</th><th>责任人</th><th>责任人电话</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td style="font-weight:500;">AED-2025-001</td><td>迈瑞</td><td>BeneHeart C1A</td><td>长庆油田总部</td><td>总部办公楼1层大厅</td><td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td><td><span class="tag tag-green">正常</span></td><td>95%</td><td>张明</td><td>138****1001</td><td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>2</td><td style="font-weight:500;">AED-2025-002</td><td>飞利浦</td><td>HeartStart FRx</td><td>长庆油田总部</td><td>职工食堂入口处</td><td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td><td><span class="tag tag-green">正常</span></td><td>88%</td><td>李华</td><td>139****2002</td><td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>3</td><td style="font-weight:500;">AED-2025-003</td><td>迈瑞</td><td>BeneHeart C2</td><td>第一采油厂</td><td>调度中心1层</td><td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td><td><span class="tag tag-red">异常</span></td><td>12%</td><td>王强</td><td>137****3003</td><td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>4</td><td style="font-weight:500;">AED-2025-004</td><td>卓尔</td><td>AED Plus</td><td>第二采油厂</td><td>值班室门口</td><td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td><td><span class="tag tag-orange">维修中</span></td><td>0%</td><td>赵丽</td><td>136****4004</td><td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>5</td><td style="font-weight:500;">AED-2025-005</td><td>飞利浦</td><td>HeartStart HS1</td><td>第三采油厂</td><td>体育馆入口</td><td><div class="thumb" style="display:inline-flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:10px;">图片</div></td><td><span class="tag tag-green">正常</span></td><td>76%</td><td>陈伟</td><td>135****5005</td><td><div class="action-btns"><span class="link">详情</span><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</span>
|
||||
<button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 抽屉遮罩 -->
|
||||
<div class="drawer-mask" onclick="location.href='resource-aed-deploy.html';"></div>
|
||||
|
||||
<!-- 右侧抽屉 -->
|
||||
<div class="drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">新增布点</div>
|
||||
<button class="drawer__close" onclick="location.href='resource-aed-deploy.html';">×</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>选择设备</div>
|
||||
<div class="form-control">
|
||||
<div class="search-select" id="deviceSearch">
|
||||
<input class="search-select__input" type="text" placeholder="输入设备编号搜索未布点设备" onfocus="showDropdown()" oninput="filterDevices(this.value)">
|
||||
<div class="search-select__dropdown" id="deviceDropdown" style="display:none;">
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-006','迈瑞','BeneHeart C1A','长庆油田总部')"><span class="search-select__item-id">AED-2025-006</span><span class="search-select__item-info">迈瑞 · BeneHeart C1A</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-007','飞利浦','HeartStart FRx','第一采油厂')"><span class="search-select__item-id">AED-2025-007</span><span class="search-select__item-info">飞利浦 · HeartStart FRx</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-008','卓尔','AED Plus','第二采油厂')"><span class="search-select__item-id">AED-2025-008</span><span class="search-select__item-info">卓尔 · AED Plus</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-009','迈瑞','BeneHeart C2','第三采油厂')"><span class="search-select__item-id">AED-2025-009</span><span class="search-select__item-info">迈瑞 · BeneHeart C2</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-card" id="deviceCard" style="display:none;">
|
||||
<div class="device-card__grid">
|
||||
<div class="device-card__item"><div class="device-card__label">设备编号</div><div class="device-card__value" id="cardNo">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">设备厂家</div><div class="device-card__value" id="cardVendor">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">设备型号</div><div class="device-card__value" id="cardModel">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">所属单位</div><div class="device-card__value" id="cardUnit">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>布点日期</div>
|
||||
<div class="form-control"><input class="form-input" type="date" value="2026-04-21"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>布点地址</div>
|
||||
<div class="form-control">
|
||||
<div class="map-picker map-picker--selected">
|
||||
<div class="map-picker__bg"></div>
|
||||
<svg class="map-picker__pin" width="28" height="36" viewBox="0 0 28 36" fill="none"><path d="M14 0C6.27 0 0 6.27 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.27 21.73 0 14 0z" fill="#1890FF"/><circle cx="14" cy="14" r="6" fill="#fff"/></svg>
|
||||
<span class="map-picker__label"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1C4.24 1 2 3.24 2 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="6" r="1.5" stroke="currentColor" stroke-width="1"/></svg>在地图上点击选择具体坐标位置</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">详细地址</div>
|
||||
<div class="form-control"><input class="form-input" type="text" placeholder="请补充详细地址，如：总部办公楼1层大厅东侧"></div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>责任人</div>
|
||||
<div class="form-control"><input class="form-input" type="text" placeholder="请输入责任人姓名"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>责任人电话</div>
|
||||
<div class="form-control"><input class="form-input" type="tel" placeholder="请输入责任人联系电话"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="location.href='resource-aed-deploy.html';">取 消</button>
|
||||
<button class="btn btn-primary" onclick="alert('新增布点成功！');location.href='resource-aed-deploy.html';">确 定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showDropdown(){document.getElementById('deviceDropdown').style.display='block';}
|
||||
function filterDevices(val){
|
||||
var items=document.getElementById('deviceDropdown').querySelectorAll('.search-select__item');
|
||||
document.getElementById('deviceDropdown').style.display='block';
|
||||
items.forEach(function(item){var match=!val||item.textContent.toLowerCase().indexOf(val.toLowerCase())>-1;item.style.display=match?'flex':'none';});
|
||||
}
|
||||
function selectDevice(no,vendor,model,unit){
|
||||
document.querySelector('.search-select__input').value=no;
|
||||
document.getElementById('deviceDropdown').style.display='none';
|
||||
document.getElementById('deviceCard').style.display='block';
|
||||
document.getElementById('cardNo').textContent=no;
|
||||
document.getElementById('cardVendor').textContent=vendor;
|
||||
document.getElementById('cardModel').textContent=model;
|
||||
document.getElementById('cardUnit').textContent=unit;
|
||||
}
|
||||
document.addEventListener('click',function(e){if(!document.getElementById('deviceSearch').contains(e.target))document.getElementById('deviceDropdown').style.display='none';});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -199,7 +199,7 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<button class="btn btn-primary" onclick="location.href='resource-aed-deploy-add.html';">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增布点
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - AED设备信息 - 新增维护记录 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;}.sidebar-submenu.open{max-height:500px;}
|
||||
.sidebar-parent{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;justify-content:space-between;}
|
||||
.sidebar-parent:hover{color:#fff;background:rgba(255,255,255,0.06);}.sidebar-parent.active{color:#fff;}
|
||||
.sidebar-parent__left{display:flex;align-items:center;gap:10px;}.sidebar-parent__left svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-parent .arrow{width:12px;height:12px;transition:transform .3s;flex-shrink:0;}.sidebar-parent .arrow.open{transform:rotate(90deg);}
|
||||
.sidebar-submenu .sidebar-item{padding-left:50px;font-size:var(--font-xs);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-textarea{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;min-width:320px;width:480px;height:120px;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.search-select{position:relative;min-width:320px;}
|
||||
.search-select__input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 0 12px;font-size:var(--font-sm);outline:none;width:100%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M10 10l3 3M6.5 2a4.5 4.5 0 110 9 4.5 4.5 0 010-9z' stroke='%23999' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.search-select__input:focus{border-color:var(--primary);}
|
||||
.search-select__dropdown{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:10;max-height:220px;overflow-y:auto;display:none;}
|
||||
.search-select__item{padding:10px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center;}
|
||||
.search-select__item:hover{background:var(--primary-light);}
|
||||
.search-select__item-name{font-weight:500;color:var(--text-primary);}
|
||||
.search-select__item-info{color:var(--text-placeholder);font-size:var(--font-xs);}
|
||||
.device-card{background:var(--primary-light);border:1px solid #91d5ff;border-radius:var(--radius-md);padding:16px;margin-top:12px;display:none;}
|
||||
.device-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;}
|
||||
.device-card__item{font-size:var(--font-sm);}
|
||||
.device-card__label{color:var(--text-placeholder);font-size:var(--font-xs);margin-bottom:2px;}
|
||||
.device-card__value{color:var(--text-primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<div class="sidebar-parent active" onclick="this.classList.toggle('active');this.querySelector('.arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open');">
|
||||
<span class="sidebar-parent__left"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED设备信息</span>
|
||||
<svg class="arrow open" viewBox="0 0 12 12" fill="none"><path d="M4.5 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-submenu open">
|
||||
<a href="resource-aed.html" class="sidebar-item">设备管理</a>
|
||||
<a href="resource-aed-deploy.html" class="sidebar-item">布点管理</a>
|
||||
<a href="resource-aed-map.html" class="sidebar-item">AED地图</a>
|
||||
<a href="resource-aed-certifier.html" class="sidebar-item">取证人员</a>
|
||||
<a href="resource-aed-maintenance.html" class="sidebar-item active">维护记录</a>
|
||||
<a href="resource-aed-training.html" class="sidebar-item">培演记录</a>
|
||||
<a href="resource-aed-usage.html" class="sidebar-item">应用记录</a>
|
||||
</div>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="resource-aed-maintenance.html">维护记录</a>
|
||||
<span>/</span>
|
||||
<span>新增维护记录</span>
|
||||
</div>
|
||||
|
||||
<!-- 设备信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">设备信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>选择设备</div>
|
||||
<div>
|
||||
<div class="search-select" id="deviceSearch">
|
||||
<input class="search-select__input" type="text" placeholder="输入设备编号搜索" onfocus="document.getElementById('deviceDropdown').style.display='block'" oninput="filterDevice(this.value)">
|
||||
<div class="search-select__dropdown" id="deviceDropdown">
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-001','迈瑞','BeneHeart C1A','长庆油田总部','安全环保部','总部办公楼1层大厅')"><span class="search-select__item-name">AED-2025-001</span><span class="search-select__item-info">迈瑞 · 总部办公楼1层大厅</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-002','飞利浦','HeartStart FRx','长庆油田总部','综合管理部','职工食堂入口处')"><span class="search-select__item-name">AED-2025-002</span><span class="search-select__item-info">飞利浦 · 职工食堂入口处</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-003','迈瑞','BeneHeart C2','第一采油厂','生产运行部','调度中心1层')"><span class="search-select__item-name">AED-2025-003</span><span class="search-select__item-info">迈瑞 · 调度中心1层</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-004','卓尔','AED Plus','第二采油厂','安全环保部','值班室门口')"><span class="search-select__item-name">AED-2025-004</span><span class="search-select__item-info">卓尔 · 值班室门口</span></div>
|
||||
<div class="search-select__item" onclick="selectDevice('AED-2025-005','飞利浦','HeartStart HS1','第三采油厂','综合管理部','体育馆入口')"><span class="search-select__item-name">AED-2025-005</span><span class="search-select__item-info">飞利浦 · 体育馆入口</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-card" id="deviceCard">
|
||||
<div class="device-card__grid">
|
||||
<div class="device-card__item"><div class="device-card__label">设备编号</div><div class="device-card__value" id="devNo">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">设备厂家</div><div class="device-card__value" id="devBrand">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">设备型号</div><div class="device-card__value" id="devModel">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">所属单位</div><div class="device-card__value" id="devUnit">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">所属部门</div><div class="device-card__value" id="devDept">—</div></div>
|
||||
<div class="device-card__item"><div class="device-card__label">布放地址</div><div class="device-card__value" id="devAddr">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 维护信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">维护信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>维护内容</div>
|
||||
<textarea class="form-textarea" placeholder="请输入维护内容，如：更换电极片、电池检测、软件升级等"></textarea>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>维护人</div>
|
||||
<input class="form-input" type="text" placeholder="请输入维护人姓名">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label"><span class="required">*</span>维护日期</div>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" onclick="alert('新增成功！');location.href='resource-aed-maintenance.html';">提 交</button>
|
||||
<button class="btn btn-default" onclick="location.href='resource-aed-maintenance.html';">取 消</button>
|
||||
</div>
|
||||
<script>
|
||||
function filterDevice(val){
|
||||
var dd=document.getElementById('deviceDropdown');
|
||||
dd.style.display='block';
|
||||
dd.querySelectorAll('.search-select__item').forEach(function(item){
|
||||
var match=!val||item.textContent.toLowerCase().indexOf(val.toLowerCase())>-1;
|
||||
item.style.display=match?'flex':'none';
|
||||
});
|
||||
}
|
||||
function selectDevice(no,brand,model,unit,dept,addr){
|
||||
document.querySelector('.search-select__input').value=no;
|
||||
document.getElementById('deviceDropdown').style.display='none';
|
||||
var card=document.getElementById('deviceCard');
|
||||
card.style.display='block';
|
||||
document.getElementById('devNo').textContent=no;
|
||||
document.getElementById('devBrand').textContent=brand;
|
||||
document.getElementById('devModel').textContent=model;
|
||||
document.getElementById('devUnit').textContent=unit;
|
||||
document.getElementById('devDept').textContent=dept;
|
||||
document.getElementById('devAddr').textContent=addr;
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!document.getElementById('deviceSearch').contains(e.target))
|
||||
document.getElementById('deviceDropdown').style.display='none';
|
||||
});
|
||||
</script></body>
|
||||
</html>
|
||||
@@ -109,7 +109,7 @@
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增维护记录</button>
|
||||
<button class="btn btn-primary" onclick="location.href='resource-aed-maintenance-add.html';"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增维护记录</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
|
||||
@@ -188,7 +188,7 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<button class="btn btn-primary" onclick="location.href='resource-aed-add.html';">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增
|
||||
</button>
|
||||
|
||||
@@ -187,10 +187,21 @@
|
||||
<select class="filter-select">
|
||||
<option>全部等级</option>
|
||||
<option>三级甲等</option>
|
||||
<option>三级</option>
|
||||
<option>三级乙等</option>
|
||||
<option>三级丙等</option>
|
||||
<option>二级甲等</option>
|
||||
<option>二级</option>
|
||||
<option>二级乙等</option>
|
||||
<option>二级丙等</option>
|
||||
<option>一级</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>医院类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部类型</option>
|
||||
<option>合作医院</option>
|
||||
<option>油田医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -218,6 +229,7 @@
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>医院名称</th>
|
||||
<th>医院类型</th>
|
||||
<th>等级</th>
|
||||
<th>地址</th>
|
||||
<th>联系电话</th>
|
||||
@@ -231,7 +243,8 @@
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">西安交通大学第一附属医院</td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td><span class="hospital-level level-2">油田医院</span></td>
|
||||
<td>三级甲等</td>
|
||||
<td>陕西省西安市雁塔区</td>
|
||||
<td>029-85323112</td>
|
||||
<td>综合性三甲教学医院，西北地区医疗中心</td>
|
||||
@@ -242,7 +255,8 @@
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">长庆油田职工医院</td>
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td><span class="hospital-level level-3">合作医院</span></td>
|
||||
<td>三级甲等</td>
|
||||
<td>陕西省西安市未央区</td>
|
||||
<td>029-86518000</td>
|
||||
<td>长庆油田直属职工医疗保障机构</td>
|
||||
@@ -253,7 +267,8 @@
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">陕西省人民医院</td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td><span class="hospital-level level-2">油田医院</span></td>
|
||||
<td>三级甲等</td>
|
||||
<td>陕西省西安市碑林区</td>
|
||||
<td>029-85251331</td>
|
||||
<td>省属大型综合三甲医院</td>
|
||||
@@ -264,7 +279,9 @@
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">庆阳市人民医院</td>
|
||||
<td><span class="hospital-level level-2">二级甲等</span></td>
|
||||
<td><span class="hospital-level level-3">合作医院</span></td>
|
||||
<!-- <td><span class="hospital-level level-2">二级甲等</span></td>-->
|
||||
<td>三级甲等</td>
|
||||
<td>甘肃省庆阳市西峰区</td>
|
||||
<td>0934-8612116</td>
|
||||
<td>庆阳地区综合性二甲医院</td>
|
||||
@@ -275,7 +292,9 @@
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">延安大学附属医院</td>
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td><span class="hospital-level level-3">合作医院</span></td>
|
||||
<!-- <td><span class="hospital-level level-3">三级</span></td>-->
|
||||
<td>三级甲等</td>
|
||||
<td>陕西省延安市宝塔区</td>
|
||||
<td>0911-2881111</td>
|
||||
<td>延安区域重点综合医院</td>
|
||||
@@ -330,6 +349,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 医院类型 -->
|
||||
<div class="form-group">
|
||||
<div class="form-label"><span class="required">*</span> 医院类型</div>
|
||||
<div style="display:flex;gap:24px;">
|
||||
<label style="display:flex;align-items:center;gap:6px;font-size:var(--font-sm);cursor:pointer;">
|
||||
<input type="radio" name="hospitalType" value="oil" checked style="accent-color:var(--primary);width:16px;height:16px;"> 油田医院
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:6px;font-size:var(--font-sm);cursor:pointer;">
|
||||
<input type="radio" name="hospitalType" value="partner" style="accent-color:var(--primary);width:16px;height:16px;"> 合作医院
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 应急专长 -->
|
||||
<div class="form-group">
|
||||
<div class="form-label"><span class="required">*</span> 应急专长</div>
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>医疗点详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff;color:#333;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 详情容器 */
|
||||
.detail{padding:0;}
|
||||
.detail__cover{width:100%;height:200px;object-fit:cover;display:block;background:#e6f7ff;}
|
||||
.detail__cover-placeholder{width:100%;height:200px;background:linear-gradient(135deg,#e6f7ff 0%,#bae7ff 100%);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:14px;gap:8px;}
|
||||
.detail__cover-placeholder svg{width:48px;height:48px;opacity:.5;}
|
||||
|
||||
.detail__body{padding:24px;}
|
||||
.detail__name{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin-bottom:4px;}
|
||||
.detail__status{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);font-weight:600;margin-left:8px;vertical-align:middle;}
|
||||
.detail__status--on{background:#F6FFED;color:var(--success);border:1px solid #b7eb8f;}
|
||||
.detail__status--off{background:#F5F5F5;color:var(--text-secondary);border:1px solid var(--border);}
|
||||
|
||||
.detail__section{margin-top:24px;}
|
||||
.detail__section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
|
||||
.detail__section-title svg{width:16px;height:16px;color:var(--primary);}
|
||||
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.info-item{padding:12px 0;border-bottom:1px solid #f5f5f5;}
|
||||
.info-item--full{grid-column:1/-1;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:4px;}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;}
|
||||
.info-item__value a{color:var(--primary);text-decoration:none;}
|
||||
.info-item__value a:hover{text-decoration:underline;}
|
||||
|
||||
.tag-list{display:flex;flex-wrap:wrap;gap:6px;}
|
||||
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:4px;font-size:var(--font-xs);background:var(--primary-light);color:var(--primary);border:1px solid #91d5ff;}
|
||||
|
||||
.detail__intro{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.8;white-space:pre-wrap;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="detail">
|
||||
<!-- 医疗点图片 -->
|
||||
<div class="detail__cover-placeholder">
|
||||
<svg viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="28" rx="4" stroke="currentColor" stroke-width="2.5"/><circle cx="18" cy="22" r="4" stroke="currentColor" stroke-width="2"/><path d="M4 34l10-8 6 4 10-10 14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
医疗点实景图
|
||||
</div>
|
||||
|
||||
<div class="detail__body">
|
||||
<!-- 名称 + 状态 -->
|
||||
<div>
|
||||
<span class="detail__name">公司机关医疗点</span>
|
||||
<!-- <span class="detail__status detail__status--on">状态：开启</span>-->
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="detail__section">
|
||||
<div class="detail__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item info-item--full">
|
||||
<div class="info-item__label">医疗点地址</div>
|
||||
<div class="info-item__value">西安市未央区长庆大厦1楼东侧医务室</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">所属单位</div>
|
||||
<div class="info-item__value">公司机关</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">所属医院</div>
|
||||
<div class="info-item__value">宝石花医院</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">负责人</div>
|
||||
<div class="info-item__value">王医生</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">联系电话</div>
|
||||
<div class="info-item__value"><a href="tel:029-86518001">029-86518001</a></div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">设立时间</div>
|
||||
<div class="info-item__value">2019-06-15</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item__label">合同签订金额</div>
|
||||
<div class="info-item__value" style="color:#fa541c;font-weight:600;">¥ 120,000.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 辐射单位 -->
|
||||
<div class="detail__section">
|
||||
<div class="detail__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
辐射单位
|
||||
</div>
|
||||
<div class="tag-list">
|
||||
<span class="tag">公司机关</span>
|
||||
<span class="tag">生产运行处</span>
|
||||
<span class="tag">工程监督处</span>
|
||||
<span class="tag">安全环保处</span>
|
||||
<span class="tag">科技发展处</span>
|
||||
<span class="tag">物资装备处</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 医疗点简介 -->
|
||||
<div class="detail__section">
|
||||
<div class="detail__section-title">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4"/><line x1="5.5" y1="5" x2="10.5" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="5.5" y1="8" x2="10.5" y2="8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="5.5" y1="11" x2="8.5" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
医疗点简介
|
||||
</div>
|
||||
<div class="detail__intro">公司机关医疗点位于长庆大厦1楼东侧，由宝石花医院派驻医护人员值守，为公司机关及周边驻地单位员工提供日常诊疗、急救处置、健康咨询、职业健康检查等基本医疗服务。
|
||||
|
||||
医疗点配备有基础诊疗器械、AED设备、常用药品及急救物资，可进行常见疾病诊治、外伤处理、血压血糖监测等。同时承担公司机关区域内的应急医疗保障任务，与120急救中心建立联动响应机制。
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -69,6 +69,16 @@
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.drawer-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;opacity:0;visibility:hidden;transition:all .3s;}
|
||||
.drawer-mask.open{opacity:1;visibility:visible;}
|
||||
.drawer{position:fixed;top:0;right:-560px;bottom:0;width:560px;background:#fff;z-index:201;box-shadow:-4px 0 16px rgba(0,0,0,0.12);transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:20px;}
|
||||
.drawer__close:hover{background:var(--background);color:var(--text-primary);}
|
||||
.drawer__body{flex:1;overflow:hidden;}
|
||||
.drawer__body iframe{width:100%;height:100%;border:none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -143,11 +153,11 @@
|
||||
<table>
|
||||
<thead><tr><th>序号</th><th>医疗点名称</th><th>所属单位</th><th>所属医院</th><th>地址</th><th>负责人</th><th>联系电话</th><th>医护人员数量</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td style="font-weight:500;">公司机关医疗点</td><td>公司机关</td><td>宝石花医院</td><td>西安市未央区长庆大厦1楼</td><td>王医生</td><td>029-86518001</td><td>3</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>2</td><td style="font-weight:500;">采油一厂医疗点</td><td>采油一厂</td><td>宝石花医院</td><td>庆阳市西峰区采油一厂办公楼</td><td>李医生</td><td>0934-8612001</td><td>5</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>3</td><td style="font-weight:500;">采油二厂医疗点</td><td>采油二厂</td><td>宝石花医院</td><td>庆阳市庆城县采油二厂基地</td><td>张医生</td><td>0934-3221001</td><td>4</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>4</td><td style="font-weight:500;">采气一厂医疗点</td><td>采气一厂</td><td>宝石花医院</td><td>榆林市靖边县采气一厂</td><td>赵护士</td><td>0912-4837001</td><td>2</td><td><div class="switch" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>5</td><td style="font-weight:500;">输油处医疗点</td><td>输油处</td><td>宝石花医院</td><td>西安市灞桥区输油处办公区</td><td>刘医生</td><td>029-83518001</td><td>2</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">详情</span></div></td></tr>
|
||||
<tr><td>1</td><td style="font-weight:500;">公司机关医疗点</td><td>公司机关</td><td>宝石花医院</td><td>西安市未央区长庆大厦1楼</td><td>王医生</td><td>029-86518001</td><td>3</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link" onclick="openDrawer()">详情</span></div></td></tr>
|
||||
<tr><td>2</td><td style="font-weight:500;">采油一厂医疗点</td><td>采油一厂</td><td>宝石花医院</td><td>庆阳市西峰区采油一厂办公楼</td><td>李医生</td><td>0934-8612001</td><td>5</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link" onclick="openDrawer()">详情</span></div></td></tr>
|
||||
<tr><td>3</td><td style="font-weight:500;">采油二厂医疗点</td><td>采油二厂</td><td>宝石花医院</td><td>庆阳市庆城县采油二厂基地</td><td>张医生</td><td>0934-3221001</td><td>4</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link" onclick="openDrawer()">详情</span></div></td></tr>
|
||||
<tr><td>4</td><td style="font-weight:500;">采气一厂医疗点</td><td>采气一厂</td><td>宝石花医院</td><td>榆林市靖边县采气一厂</td><td>赵护士</td><td>0912-4837001</td><td>2</td><td><div class="switch" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link" onclick="openDrawer()">详情</span></div></td></tr>
|
||||
<tr><td>5</td><td style="font-weight:500;">输油处医疗点</td><td>输油处</td><td>宝石花医院</td><td>西安市灞桥区输油处办公区</td><td>刘医生</td><td>029-83518001</td><td>2</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link" onclick="openDrawer()">详情</span></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -163,5 +173,28 @@
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="drawer-mask" id="drawerMask" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">医疗点详情</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">×</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<iframe id="detailFrame" src="about:blank"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openDrawer(){
|
||||
document.getElementById('detailFrame').src='resource-medical-point-detail.html';
|
||||
document.getElementById('drawerMask').classList.add('open');
|
||||
document.getElementById('drawer').classList.add('open');
|
||||
}
|
||||
function closeDrawer(){
|
||||
document.getElementById('drawerMask').classList.remove('open');
|
||||
document.getElementById('drawer').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -329,8 +329,8 @@
|
||||
<th>年龄</th>
|
||||
<th>单位</th>
|
||||
<th>部门</th>
|
||||
<th>咨询专家次数</th>
|
||||
<th>咨询小助手次数</th>
|
||||
<th>咨询专家次数 ↕</th>
|
||||
<th>咨询小助手次数 ↕</th>
|
||||
<th>最近咨询时间</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
|
||||
@@ -202,7 +202,7 @@
|
||||
<tr>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">单位名称</th>
|
||||
<th class="col-fixed col-fixed-3">员工人数</th>
|
||||
<th class="col-fixed col-fixed-3">员工人数 ↕</th>
|
||||
<th class="sortable">咨询专家次数 ↕</th>
|
||||
<th class="sortable">咨询小助手次数 ↕</th>
|
||||
<th>咨询占比</th>
|
||||
|
||||
Reference in New Issue
Block a user