创意预览图

参考图片风格,生成移动端小程序需求详情接单页UI设计稿,蓝色主色调,主色#165DFF,简洁政务风格,现代扁平化UI,白色背景。页面从上到下布局:1.顶部导航栏,左侧返回箭头,中间标题文字"需求详情"

用户头像

1q2c8q3vwt2...

2026.07.10
「图片1」参考图片风格,重新生成画面内容,顶部用户信息与操作栏 左侧展示账号身份:蓝紫渐变头像、用户名「超级管理员」、所属部门「技术部・设备运维组」 右侧排布三个全局操作图标:搜索、新增、设置,支持全局内容检索、快速新建事项、系统配置调整。 二、功能引导 Banner 青绿色渐变卡片,作为页面价值引导区: 主标题:设备业务应用,从工作台开始 补充说明:快速进入设备、空间态势、维保、巡检、能耗与流程中心 作用:总览工作台核心业务范围,直观传递页面定位。 三、常用功能快捷入口 采用 2 行 4 列的宫格布局,放置高频核心功能,支持自定义配置: 第一行:设备管理、空间态势、流程中心、AI 智能体 第二行:消息中心、设备维保、设备巡检、添加常用 「添加常用」入口支持用户按需自定义快捷功能,适配不同岗位的使用习惯。 四、全部应用模块 对全量业务应用做分类管理,支持按业务维度切换筛选: 分类标签栏:包含「最近使用(当前选中)、设备业务、运营管理、流程协同」四类,附带更多分类按钮 当前「最近使用」分类下,展示 4 个近期高频使用的应用:设备档案、空间视图、能耗管理、流程中心 五、底部全局导航栏 页面底部固定的主导航,共 5 个入口,当前高亮选中「工作台」页面,从左到右依次为:首页、设备、AI 智能体核心按钮(紫蓝渐变悬浮样式)、工作台、我的,支持快速切换核心业务板块。生成APP「图片1」参考图片风格,重新生成画面内容,顶部用户信息与操作栏
左侧展示账号身份:蓝紫渐变头像、用户名「超级管理员」、所属部门「技术部・设备运维组」
右侧排布三个全局操作图标:搜索、新增、设置,支持全局内容检索、快速新建事项、系统配置调整。
二、功能引导 Banner
青绿色渐变卡片,作为页面价值引导区:
主标题:设备业务应用,从工作台开始
补充说明:快速进入设备、空间态势、维保、巡检、能耗与流程中心
作用:总览工作台核心业务范围,直观传递页面定位。
三、常用功能快捷入口
采用 2 行 4 列的宫格布局,放置高频核心功能,支持自定义配置:
第一行:设备管理、空间态势、流程中心、AI 智能体
第二行:消息中心、设备维保、设备巡检、添加常用
「添加常用」入口支持用户按需自定义快捷功能,适配不同岗位的使用习惯。
四、全部应用模块
对全量业务应用做分类管理,支持按业务维度切换筛选:
分类标签栏:包含「最近使用(当前选中)、设备业务、运营管理、流程协同」四类,附带更多分类按钮
当前「最近使用」分类下,展示 4 个近期高频使用的应用:设备档案、空间视图、能耗管理、流程中心
五、底部全局导航栏
页面底部固定的主导航,共 5 个入口,当前高亮选中「工作台」页面,从左到右依次为:首页、设备、AI 智能体核心按钮(紫蓝渐变悬浮样式)、工作台、我的,支持快速切换核心业务板块。生成APP
「图片1」「图片1」一、顶部用户信息与操作栏 左侧展示账号身份:蓝紫渐变头像、用户名「超级管理员」、所属部门「技术部・设备运维组」 右侧排布三个全局操作图标:搜索、新增、设置,支持全局内容检索、快速新建事项、系统配置调整。 二、功能引导 Banner 青绿色渐变卡片,作为页面价值引导区: 主标题:设备业务应用,从工作台开始 补充说明:快速进入设备、空间态势、维保、巡检、能耗与流程中心 作用:总览工作台核心业务范围,直观传递页面定位。 三、常用功能快捷入口 采用 2 行 4 列的宫格布局,放置高频核心功能,支持自定义配置: 第一行:设备管理、空间态势、流程中心、AI 智能体 第二行:消息中心、设备维保、设备巡检、添加常用 「添加常用」入口支持用户按需自定义快捷功能,适配不同岗位的使用习惯。 四、全部应用模块 对全量业务应用做分类管理,支持按业务维度切换筛选: 分类标签栏:包含「最近使用(当前选中)、设备业务、运营管理、流程协同」四类,附带更多分类按钮 当前「最近使用」分类下,展示 4 个近期高频使用的应用:设备档案、空间视图、能耗管理、流程中心 五、底部全局导航栏 页面底部固定的主导航,共 5 个入口,当前高亮选中「工作台」页面,从左到右依次为:首页、设备、AI 智能体核心按钮(紫蓝渐变悬浮样式)、工作台、我的,支持快速切换核心业务板块。帮我生成APP「图片1」「图片1」一、顶部用户信息与操作栏
左侧展示账号身份:蓝紫渐变头像、用户名「超级管理员」、所属部门「技术部・设备运维组」
右侧排布三个全局操作图标:搜索、新增、设置,支持全局内容检索、快速新建事项、系统配置调整。
二、功能引导 Banner
青绿色渐变卡片,作为页面价值引导区:
主标题:设备业务应用,从工作台开始
补充说明:快速进入设备、空间态势、维保、巡检、能耗与流程中心
作用:总览工作台核心业务范围,直观传递页面定位。
三、常用功能快捷入口
采用 2 行 4 列的宫格布局,放置高频核心功能,支持自定义配置:
第一行:设备管理、空间态势、流程中心、AI 智能体
第二行:消息中心、设备维保、设备巡检、添加常用
「添加常用」入口支持用户按需自定义快捷功能,适配不同岗位的使用习惯。
四、全部应用模块
对全量业务应用做分类管理,支持按业务维度切换筛选:
分类标签栏:包含「最近使用(当前选中)、设备业务、运营管理、流程协同」四类,附带更多分类按钮
当前「最近使用」分类下,展示 4 个近期高频使用的应用:设备档案、空间视图、能耗管理、流程中心
五、底部全局导航栏
页面底部固定的主导航,共 5 个入口,当前高亮选中「工作台」页面,从左到右依次为:首页、设备、AI 智能体核心按钮(紫蓝渐变悬浮样式)、工作台、我的,支持快速切换核心业务板块。帮我生成APP
「图片1」## 顶部全局导航栏(页面最顶端) 1. 左侧:返回箭头按钮,可退回上一级设备列表页 2. 中间横向三标签(页面一级路由) - 设备档案(当前所属大模块,蓝色下划线高亮) - 设备物联 - 数据统计 3. 右侧:刷新图标,一键刷新全页面设备实时数据 ## 二、顶部简易实时物联数据栏(导航下方) 折叠简化版数据卡片,双栏展示设备核心运行状态: - 左栏:在线状态 → 在线 - 右栏:运行模式 → 制冷 完整数据需在「设备物联」标签页查看详情。 ## 三、二级功能 Tab 标签栏(页面子路由切换) 横向 7 个分类标签,蓝色下划线代表当前激活页面「生命周期」,所有设备管理功能全部收拢在此: 1. 控制:设备远程操控(开关、温度、模式调节) 2. 概览:设备基础参数总览 3. 动态:设备实时运行消息推送 4. 维保:保养工单、维保计划 5. 巡检:定期巡检任务与记录 6. 告警:设备异常告警清单、处置记录 7. 生命周期(当前页):设备全流程时间线档案 ## 四、核心区域:生命周期时间轴列表模块 ### 模块基础框架 左侧垂直**时间轴引导线** + 右侧独立事件卡片,每条事件左侧搭配对应功能图标区分业务类型,按时间由远到近从上至下排序。 ### 单条事件卡片统一字段模板 每条生命周期记录固定包含: 1. 事件标题(设备编号 + 业务类型:SB-CAMERA-0001 XXX) 2. 精确发生时间(年 - 月 - 日 时分秒) 3. 多组明细键值对(内容 / 位置 / 操作人员 / 投运状态等,随业务类型动态变化) ### 页面已展示 4 条生命周期节点(时间由早到晚) 1. **设备建档(2025-12-22)** 图标:档案文件;内容:录入设备基础参数,操作人:超级管理员 2. **设备投运(2026-01-21)** 图标:播放启动;完成联调正式上线,绑定安装位置暖通演示楼 2F 东侧 3. **巡检复核(2026-03-22)** 图标:勾选清单;季度巡检,核对设备运行参数 4. **维保记录(2026-04-11)** 图标:维修扳手;页面仅展示标题与时间,完整明细需下滑查看帮我设计APP「图片1」## 顶部全局导航栏(页面最顶端)

1. 左侧:返回箭头按钮,可退回上一级设备列表页
2. 中间横向三标签(页面一级路由)
   - 设备档案(当前所属大模块,蓝色下划线高亮)
   - 设备物联
   - 数据统计
3. 右侧:刷新图标,一键刷新全页面设备实时数据

## 二、顶部简易实时物联数据栏(导航下方)

折叠简化版数据卡片,双栏展示设备核心运行状态:

- 左栏:在线状态 → 在线
- 右栏:运行模式 → 制冷
完整数据需在「设备物联」标签页查看详情。

## 三、二级功能 Tab 标签栏(页面子路由切换)

横向 7 个分类标签,蓝色下划线代表当前激活页面「生命周期」,所有设备管理功能全部收拢在此:

1. 控制:设备远程操控(开关、温度、模式调节)
2. 概览:设备基础参数总览
3. 动态:设备实时运行消息推送
4. 维保:保养工单、维保计划
5. 巡检:定期巡检任务与记录
6. 告警:设备异常告警清单、处置记录
7. 生命周期(当前页):设备全流程时间线档案

## 四、核心区域:生命周期时间轴列表模块

### 模块基础框架

左侧垂直**时间轴引导线** + 右侧独立事件卡片,每条事件左侧搭配对应功能图标区分业务类型,按时间由远到近从上至下排序。

### 单条事件卡片统一字段模板

每条生命周期记录固定包含:

1. 事件标题(设备编号 + 业务类型:SB-CAMERA-0001 XXX)
2. 精确发生时间(年 - 月 - 日 时分秒)
3. 多组明细键值对(内容 / 位置 / 操作人员 / 投运状态等,随业务类型动态变化)

### 页面已展示 4 条生命周期节点(时间由早到晚)

1. **设备建档(2025-12-22)**
图标:档案文件;内容:录入设备基础参数,操作人:超级管理员
2. **设备投运(2026-01-21)**
图标:播放启动;完成联调正式上线,绑定安装位置暖通演示楼 2F 东侧
3. **巡检复核(2026-03-22)**
图标:勾选清单;季度巡检,核对设备运行参数
4. **维保记录(2026-04-11)**
图标:维修扳手;页面仅展示标题与时间,完整明细需下滑查看帮我设计APP
「图片1」### 顶部导航栏 - 左侧:返回箭头 `<` - 中间标题:**告警** - 右侧:更多菜单图标 `⋯` ### 2. 顶部 Tab 标签栏 当前页面处于告警管理相关模块,Tab 包括: - 控制 - 档案 - 动态 - 维保 - 巡检 - **告警**:当前高亮 - 生命周期 说明这是一个设备全生命周期管理系统,告警只是其中一个子模块。 --- ### 3. 告警概览区 位于页面顶部,用三个数字卡片展示告警统计: 表格 | 指标 | 数值 | 说明 | | --- | --- | --- | | 今日告警 | 2 | 当天产生的告警数量 | | 待确认 | 1 | 尚未处理确认的告警 | | 已恢复 | 1 | 已经恢复或关闭的告警 | 右上角有一个蓝色标签:**1 待确认**,提示当前有待处理告警。 --- ### 4. 告警明细区 这是页面核心内容,展示两条告警记录。 #### 第一条告警:画面遮挡告警 - 类型:**画面遮挡告警** - 时间:2026-06-09 10:23 - 状态:**待确认**,橙色 / 黄色标签 - 风险等级:**高** - 设备名称:暖通演示楼 / 2F / 二楼东侧 - 事件描述:AI 值守 核查遮挡摄像头角度 这条属于**视频 / 摄像头类智能告警**,系统识别到摄像头可能被遮挡,需要人工确认。 #### 第二条告警:心跳延迟告警 - 类型:**心跳延迟告警** - 时间:2026-06-08 18:30 - 状态:**已恢复**,绿色标签 - 风险等级:中 - 设备名称:设备名称 - 事件描述:设备心跳超时,离线后恢复 这条属于**设备联网状态告警**,说明设备曾经失联,后来重新上线。 --- ### 5. 处置记录区 - 标题:**处置记录** - 内容:已生成安全事件 - 状态:**待补充** 说明系统已经生成了事件记录,但处理备注或工单信息还没有完全填写。 --- ## 三、页面业务定位 这个页面主要用于**运维人员查看和处理设备告警**,核心作用是: 1. 快速了解今日告警数量 2. 判断哪些告警待处理 3. 查看告警类型、设备位置和风险等级 4. 确认摄像头遮挡、设备离线等异常事件 5. 记录后续处置结果 --- ## 四、页面信息结构总结 ``` 顶部导航:返回 / 告警标题 / 更多 ↓ Tab导航:控制 / 档案 / 动态 / 维保 / 巡检 / 告警 / 生命周期 ↓ 告警概览:今日告警 / 待确认 / 已恢复 ↓ 告警明细:画面遮挡告警 / 心跳延迟告警 ↓ 处置记录:已生成安全事件,待补充 帮我生成APP「图片1」###  顶部导航栏

- 左侧:返回箭头 `<`
- 中间标题:**告警**
- 右侧:更多菜单图标 `⋯`

### 2. 顶部 Tab 标签栏

当前页面处于告警管理相关模块,Tab 包括:

- 控制
- 档案
- 动态
- 维保
- 巡检
- **告警**:当前高亮
- 生命周期

说明这是一个设备全生命周期管理系统,告警只是其中一个子模块。

---

### 3. 告警概览区

位于页面顶部,用三个数字卡片展示告警统计:

表格

| 指标 | 数值 | 说明 |
| --- | --- | --- |
| 今日告警 | 2 | 当天产生的告警数量 |
| 待确认 | 1 | 尚未处理确认的告警 |
| 已恢复 | 1 | 已经恢复或关闭的告警 |

右上角有一个蓝色标签:**1 待确认**,提示当前有待处理告警。

---

### 4. 告警明细区

这是页面核心内容,展示两条告警记录。

#### 第一条告警:画面遮挡告警

- 类型:**画面遮挡告警**
- 时间:2026-06-09 10:23
- 状态:**待确认**,橙色 / 黄色标签
- 风险等级:**高**
- 设备名称:暖通演示楼 / 2F / 二楼东侧
- 事件描述:AI 值守 核查遮挡摄像头角度

这条属于**视频 / 摄像头类智能告警**,系统识别到摄像头可能被遮挡,需要人工确认。

#### 第二条告警:心跳延迟告警

- 类型:**心跳延迟告警**
- 时间:2026-06-08 18:30
- 状态:**已恢复**,绿色标签
- 风险等级:中
- 设备名称:设备名称
- 事件描述:设备心跳超时,离线后恢复

这条属于**设备联网状态告警**,说明设备曾经失联,后来重新上线。

---

### 5. 处置记录区

- 标题:**处置记录**
- 内容:已生成安全事件
- 状态:**待补充**

说明系统已经生成了事件记录,但处理备注或工单信息还没有完全填写。

---

## 三、页面业务定位

这个页面主要用于**运维人员查看和处理设备告警**,核心作用是:

1. 快速了解今日告警数量
2. 判断哪些告警待处理
3. 查看告警类型、设备位置和风险等级
4. 确认摄像头遮挡、设备离线等异常事件
5. 记录后续处置结果

---

## 四、页面信息结构总结

```
顶部导航:返回 / 告警标题 / 更多
↓
Tab导航:控制 / 档案 / 动态 / 维保 / 巡检 / 告警 / 生命周期
↓
告警概览:今日告警 / 待确认 / 已恢复
↓
告警明细:画面遮挡告警 / 心跳延迟告警
↓
处置记录:已生成安全事件,待补充
帮我生成APP
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,参考上传图片风格与智宅焕前序UI体系保持一致,为师傅点击进入工作台后的订单核心操作面板,内容较多可上下滚动。 从上到下布局: 1. 顶部导航:左上角“← 返回”,页面标题“订单工作台”,橙色标签“服务中”订单状态。 2. 区域一:项目信息区,区域标题“项目信息”,灰色底只读信息卡片:项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、项目概述「全屋智能开关安装,窗帘电机安装」、户型面积「120㎡」、项目类型「平层」、预期上门时间「2026-07-15」、标签「时间可协商」、可展开链接「关联产品订单:查看产品清单」。 3. 区域二:服务清单与佣金信息区,区域标题“服务与佣金”,服务明细卡片:服务名称「现场安装调试」、数量「1次」、佣金单价「¥560」、小计「¥560」,下方绿色文字展示“含远程补贴:¥80”,底部大字橙色突出展示“本单总佣金:¥640”,小字标注“此为完成本单后可获得的全部佣金”,佣金信息醒目展示。 4. 区域三:资料互动区,区域标题“资料与沟通”,子Tab切换:客户资料 | 我的上传 | 沟通记录,当前展示客户资料:文件列表占位示意:📄 户型图.pdf、🖼️ 客厅照片.jpg、🖼️ 开关位置图.png,每个文件右侧有“下载”按钮;虚线框示意切换至我的上传:“+ 上传文件”按钮,上传可选标签:户型图/现场照片/方案图纸/验收单/其他,占位已上传文件列表;虚线框示意切换至沟通记录:“+ 发起资料请求”,输入框+发送按钮,占位对话记录列表。 5. 区域四:关键操作区,区域标题“操作”,当前为安装调试师傅,全宽按钮依次展示:主色“预约客户”按钮,下方标注“已预约:2026-07-15 9:00”;主色“到达签到”按钮,下方标注“签到时间:9:03”;次要全宽按钮“签退及日志”,下方标注“填写今日工作概要(选填)”;高亮警示色全宽按钮“提交验收”,下方标注“上传完工照片或视频”;虚线框标注:“如角色为项目经理,额外展示 ↓”,额外展示按钮“项目经理审核”。 操作按钮清晰,状态明确,资料互动子Tab切换用虚线框示意即可,所有文字清晰可见,使用无衬线字体,整体风格与上传参考图及前序设计保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,参考上传图片风格与智宅焕前序UI体系保持一致,为师傅点击进入工作台后的订单核心操作面板,内容较多可上下滚动。
从上到下布局:
1. 顶部导航:左上角“← 返回”,页面标题“订单工作台”,橙色标签“服务中”订单状态。
2. 区域一:项目信息区,区域标题“项目信息”,灰色底只读信息卡片:项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、项目概述「全屋智能开关安装,窗帘电机安装」、户型面积「120㎡」、项目类型「平层」、预期上门时间「2026-07-15」、标签「时间可协商」、可展开链接「关联产品订单:查看产品清单」。
3. 区域二:服务清单与佣金信息区,区域标题“服务与佣金”,服务明细卡片:服务名称「现场安装调试」、数量「1次」、佣金单价「¥560」、小计「¥560」,下方绿色文字展示“含远程补贴:¥80”,底部大字橙色突出展示“本单总佣金:¥640”,小字标注“此为完成本单后可获得的全部佣金”,佣金信息醒目展示。
4. 区域三:资料互动区,区域标题“资料与沟通”,子Tab切换:客户资料 | 我的上传 | 沟通记录,当前展示客户资料:文件列表占位示意:📄 户型图.pdf、🖼️ 客厅照片.jpg、🖼️ 开关位置图.png,每个文件右侧有“下载”按钮;虚线框示意切换至我的上传:“+ 上传文件”按钮,上传可选标签:户型图/现场照片/方案图纸/验收单/其他,占位已上传文件列表;虚线框示意切换至沟通记录:“+ 发起资料请求”,输入框+发送按钮,占位对话记录列表。
5. 区域四:关键操作区,区域标题“操作”,当前为安装调试师傅,全宽按钮依次展示:主色“预约客户”按钮,下方标注“已预约:2026-07-15 9:00”;主色“到达签到”按钮,下方标注“签到时间:9:03”;次要全宽按钮“签退及日志”,下方标注“填写今日工作概要(选填)”;高亮警示色全宽按钮“提交验收”,下方标注“上传完工照片或视频”;虚线框标注:“如角色为项目经理,额外展示 ↓”,额外展示按钮“项目经理审核”。
操作按钮清晰,状态明确,资料互动子Tab切换用虚线框示意即可,所有文字清晰可见,使用无衬线字体,整体风格与上传参考图及前序设计保持一致。
创意 × 4