创意预览图

校园餐阳光公示端管理软件UI界面,移动端竖屏设计,蓝色科技风格,顶部蓝色导航栏标题为"数据同步管理",左上角返回箭头,右上角设置图标。页面分为三个模块:第一个模块标题"同步状态概览",显示蓝色刷新图标

用户头像

1q5brjneeng...

2026.08.20
校园餐校级管理移动端UI界面设计,PC端与智能电子秤数据同步管理页面,手机竖屏界面,顶部蓝色导航栏显示时间10:09、WiFi和电池图标,中间白色标题文字"设备数据同步",左侧返回箭头,右侧设置图标,导航栏下方为白色圆角卡片内容区域,第一部分为"同步状态概览"标题,显示大型同步状态图标和文字"数据实时同步中",上次同步时间"2026-08-20 10:08:15",同步进度条显示100%,下方显示三个终端设备卡片:PC端(电脑图标,在线/已同步)、智能电子秤1号(秤的图标,食堂一/已连接/已同步)、智能电子秤2号(秤的图标,食堂二/已连接/同步中98%),每个卡片右侧有绿色对勾或进度环状态标识,第二部分为"电子秤称重数据"标题,显示今日称重记录列表,每项包含食材名称、重量、称重时间、所属食堂,如"大白菜 25.6kg 09:30 第一食堂""猪肉 18.2kg 09:32 第一食堂""大米 50.0kg 09:35 第二食堂",每行带称重图标,第三部分为"同步设置"标题,包含设备管理(带蓝牙图标,管理已配对电子秤)、自动同步开关(开启,带刷新图标)、称重数据自动上传(开启,带上传图标)、异常数据预警(开启,带警告图标)、数据校准(带校准图标,点击校准电子秤),底部蓝色圆角"手动同步称重数据"按钮,底部Tab导航栏(首页/Management/数据/设置图标),整体蓝色主色调,白色卡片背景,圆角设计,与之前页面排版风格完全一致校园餐校级管理移动端UI界面设计,PC端与智能电子秤数据同步管理页面,手机竖屏界面,顶部蓝色导航栏显示时间10:09、WiFi和电池图标,中间白色标题文字"设备数据同步",左侧返回箭头,右侧设置图标,导航栏下方为白色圆角卡片内容区域,第一部分为"同步状态概览"标题,显示大型同步状态图标和文字"数据实时同步中",上次同步时间"2026-08-20 10:08:15",同步进度条显示100%,下方显示三个终端设备卡片:PC端(电脑图标,在线/已同步)、智能电子秤1号(秤的图标,食堂一/已连接/已同步)、智能电子秤2号(秤的图标,食堂二/已连接/同步中98%),每个卡片右侧有绿色对勾或进度环状态标识,第二部分为"电子秤称重数据"标题,显示今日称重记录列表,每项包含食材名称、重量、称重时间、所属食堂,如"大白菜 25.6kg 09:30 第一食堂""猪肉 18.2kg 09:32 第一食堂""大米 50.0kg 09:35 第二食堂",每行带称重图标,第三部分为"同步设置"标题,包含设备管理(带蓝牙图标,管理已配对电子秤)、自动同步开关(开启,带刷新图标)、称重数据自动上传(开启,带上传图标)、异常数据预警(开启,带警告图标)、数据校准(带校准图标,点击校准电子秤),底部蓝色圆角"手动同步称重数据"按钮,底部Tab导航栏(首页/Management/数据/设置图标),整体蓝色主色调,白色卡片背景,圆角设计,与之前页面排版风格完全一致
校园餐校级管理移动端UI界面设计,数据同步管理页面,手机竖屏界面,顶部蓝色导航栏显示时间10:09、WiFi和电池图标,中间白色标题文字"数据同步",左侧返回箭头,右侧设置图标,导航栏下方为白色圆角卡片内容区域,第一部分为"同步状态概览"标题,显示大型同步状态图标和文字"数据已同步",上次同步时间"2026-08-20 10:05:32",同步进度条显示100%,下方显示三个终端设备卡片:PC端(电脑图标,在线/已同步)、移动端(手机图标,当前设备/已同步)、小程序(小程序图标,在线/已同步),每个卡片右侧有绿色对勾状态标识,第二部分为"同步数据项管理"标题,显示可同步的数据项列表,每项带开关按钮,包括:食堂基础信息(开启)、供货商信息(开启)、人员信息(开启)、每日就餐信息(开启)、陪餐记录(开启)、食谱营养数据(开启)、采购订单数据(开启)、财务报表数据(开启),第三部分为"同步设置"标题,包含同步模式选择(自动同步/手动同步,带刷新图标)、同步频率设置(实时/每小时/每天,带时钟图标)、流量同步开关(仅WiFi下同步,带WiFi图标),底部蓝色圆角"立即同步所有数据"按钮,底部Tab导航栏(首页/Management/数据/设置图标),整体蓝色主色调,白色卡片背景,圆角设计,与之前页面排版风格完全一致校园餐校级管理移动端UI界面设计,数据同步管理页面,手机竖屏界面,顶部蓝色导航栏显示时间10:09、WiFi和电池图标,中间白色标题文字"数据同步",左侧返回箭头,右侧设置图标,导航栏下方为白色圆角卡片内容区域,第一部分为"同步状态概览"标题,显示大型同步状态图标和文字"数据已同步",上次同步时间"2026-08-20 10:05:32",同步进度条显示100%,下方显示三个终端设备卡片:PC端(电脑图标,在线/已同步)、移动端(手机图标,当前设备/已同步)、小程序(小程序图标,在线/已同步),每个卡片右侧有绿色对勾状态标识,第二部分为"同步数据项管理"标题,显示可同步的数据项列表,每项带开关按钮,包括:食堂基础信息(开启)、供货商信息(开启)、人员信息(开启)、每日就餐信息(开启)、陪餐记录(开启)、食谱营养数据(开启)、采购订单数据(开启)、财务报表数据(开启),第三部分为"同步设置"标题,包含同步模式选择(自动同步/手动同步,带刷新图标)、同步频率设置(实时/每小时/每天,带时钟图标)、流量同步开关(仅WiFi下同步,带WiFi图标),底部蓝色圆角"立即同步所有数据"按钮,底部Tab导航栏(首页/Management/数据/设置图标),整体蓝色主色调,白色卡片背景,圆角设计,与之前页面排版风格完全一致
参考原图的清新简约UI设计风格,生成设备运维APP首页界面: 1. 顶部状态栏:显示时间15:28,包含移动信号、WiFi和电量图标 2. 用户信息区:头像是紫色圆形标识,内含"超"字,账号名"超级管理员",所属部门"技术部・设备运维组",右上角有搜索按钮和消息通知按钮,消息按钮带红色角标显示"18" 3. 核心运行数据概览区:3张并列数据卡片,蓝色主题设备卡片显示"在线设备:18/21台 故障设备:3台",绿色主题安全卡片显示"AI值守摄像头:12路 今日安全事件:2起",橙色主题能耗卡片显示"今日用能:1,284 kWh 碳排量:0.73 t" 4. 常用功能入口区:2行4列宫格布局,共8个功能入口:第一行从左到右:设备管理、设备体检、楼宇态势、设备处置;第二行从左到右:设备维保、AI值守、设备巡检、能耗管理 5. 业务提醒横幅区:分类标签"安全值守",标题"AI摄像头布防提醒",说明文字"核对重点区域摄像头在线与告警状态",横向卡片横幅搭配监控场景背景图 6. 待办事项区:区域标题"待办事项",右侧带"流程中心 >"跳转入口,第一条待办工单(设备维保类)状态"待处置",工单名称"摄像头 CAM-023 年度维保",明细"编号 WB260506010、类型 零星维修、对应设备 摄像头 - 1",负责人"超级管理员",创建时间"2026-05-26 11:19",第二条仅露出"设备巡检"分类头部,内容被底部导航遮挡 7. 底部主导航栏:共5个Tab入口,当前停留在蓝色高亮的"首页",依次是:首页(当前选中)、设备、紫蓝渐变圆形主快捷按钮、工作台(右上角红点未读提示)、我的 整体保持清新干净的现代UI设计风格,浅蓝渐变背景,信息分区清晰,层次分明参考原图的清新简约UI设计风格,生成设备运维APP首页界面:
1. 顶部状态栏:显示时间15:28,包含移动信号、WiFi和电量图标
2. 用户信息区:头像是紫色圆形标识,内含"超"字,账号名"超级管理员",所属部门"技术部・设备运维组",右上角有搜索按钮和消息通知按钮,消息按钮带红色角标显示"18"
3. 核心运行数据概览区:3张并列数据卡片,蓝色主题设备卡片显示"在线设备:18/21台 故障设备:3台",绿色主题安全卡片显示"AI值守摄像头:12路 今日安全事件:2起",橙色主题能耗卡片显示"今日用能:1,284 kWh 碳排量:0.73 t"
4. 常用功能入口区:2行4列宫格布局,共8个功能入口:第一行从左到右:设备管理、设备体检、楼宇态势、设备处置;第二行从左到右:设备维保、AI值守、设备巡检、能耗管理
5. 业务提醒横幅区:分类标签"安全值守",标题"AI摄像头布防提醒",说明文字"核对重点区域摄像头在线与告警状态",横向卡片横幅搭配监控场景背景图
6. 待办事项区:区域标题"待办事项",右侧带"流程中心 >"跳转入口,第一条待办工单(设备维保类)状态"待处置",工单名称"摄像头 CAM-023 年度维保",明细"编号 WB260506010、类型 零星维修、对应设备 摄像头 - 1",负责人"超级管理员",创建时间"2026-05-26 11:19",第二条仅露出"设备巡检"分类头部,内容被底部导航遮挡
7. 底部主导航栏:共5个Tab入口,当前停留在蓝色高亮的"首页",依次是:首页(当前选中)、设备、紫蓝渐变圆形主快捷按钮、工作台(右上角红点未读提示)、我的
整体保持清新干净的现代UI设计风格,浅蓝渐变背景,信息分区清晰,层次分明
参考图片的清新浅蓝渐变天空白云、圆角卡片、青蓝渐变主色调、轻盈通透的APP界面风格,重新生成一个智慧园区设备管理APP页面,手机竖屏界面,顶部状态栏显示时间9:41和信号电量图标。 页面结构如下: 1. 顶部横向Tab栏:区分三大业务模块「设备」「安全」「能耗」,当前停留「设备」板块并高亮显示。 2. 顶部筛选信息栏(蓝色通栏卡片): - 空间选择器:演示园区 / 1号楼 / 3层,带下拉箭头可切换楼栋楼层 - 运行等级:A级 - 数据更新时间:06-24 15:36 - 统计周期切换:今日 / 近7天 / 近30天,默认选中「今日」高亮 - 右上角有刷新按钮 3. 核心指标四宫格(关键KPI卡片,圆角白色卡片): - 设备总数:126台,小字说明当前空间纳管全部设备数量 - 在线率:94.4%,小字标注较昨日上升1.2%(绿色向上箭头代表向好) - 故障设备:7台,小字标注其中2台待处理(红色警示,重点工单) - 离线设备:5台,小字标注最长离线时长41天(黄色预警) 4. 设备状态分布·环形饼图模块: - 标题:设备状态分布 - 环形饼图展示四类状态占比:在线119台(绿色主体)、维保中8台(橙色)、故障7台(红色)、离线5台(浅灰色) - 右侧图文对照图例说明 5. 设备事件趋势柱状图模块: - 标题:设备事件趋势(今日) - 不同颜色柱子区分事件类型,展示全天不同时段设备事件发生频次,红色柱体有明显峰值代表故障类事件集中时段 色彩预警体系:绿色代表正常向好,橙色代表维保提醒,红色代表故障高危,灰色代表离线闲置。整体保持参考图的清新柔和、圆角卡片、渐变色彩、轻盈通透的UI设计风格,界面简洁现代,数据清晰易读,符合运维人员浏览习惯。参考图片的清新浅蓝渐变天空白云、圆角卡片、青蓝渐变主色调、轻盈通透的APP界面风格,重新生成一个智慧园区设备管理APP页面,手机竖屏界面,顶部状态栏显示时间9:41和信号电量图标。

页面结构如下:
1. 顶部横向Tab栏:区分三大业务模块「设备」「安全」「能耗」,当前停留「设备」板块并高亮显示。
2. 顶部筛选信息栏(蓝色通栏卡片):
   - 空间选择器:演示园区 / 1号楼 / 3层,带下拉箭头可切换楼栋楼层
   - 运行等级:A级
   - 数据更新时间:06-24 15:36
   - 统计周期切换:今日 / 近7天 / 近30天,默认选中「今日」高亮
   - 右上角有刷新按钮
3. 核心指标四宫格(关键KPI卡片,圆角白色卡片):
   - 设备总数:126台,小字说明当前空间纳管全部设备数量
   - 在线率:94.4%,小字标注较昨日上升1.2%(绿色向上箭头代表向好)
   - 故障设备:7台,小字标注其中2台待处理(红色警示,重点工单)
   - 离线设备:5台,小字标注最长离线时长41天(黄色预警)
4. 设备状态分布·环形饼图模块:
   - 标题:设备状态分布
   - 环形饼图展示四类状态占比:在线119台(绿色主体)、维保中8台(橙色)、故障7台(红色)、离线5台(浅灰色)
   - 右侧图文对照图例说明
5. 设备事件趋势柱状图模块:
   - 标题:设备事件趋势(今日)
   - 不同颜色柱子区分事件类型,展示全天不同时段设备事件发生频次,红色柱体有明显峰值代表故障类事件集中时段

色彩预警体系:绿色代表正常向好,橙色代表维保提醒,红色代表故障高危,灰色代表离线闲置。整体保持参考图的清新柔和、圆角卡片、渐变色彩、轻盈通透的UI设计风格,界面简洁现代,数据清晰易读,符合运维人员浏览习惯。
设计“银龄·康语”小程序的健康档案功能界面,延续统一设计语言:白色背景,浅灰色分割,浅蓝色为基准色,红色和橙色作为强调色,保持信息极简聚焦核心,无多余装饰元素。从上到下布局:顶部导航,左侧返回箭头+“< 返回”文字,中央大标题“健康档案”旁配折线图图标;标题下方浅蓝色背景圆角大卡片核心数据总览,左右并列显示两个关键数据:左侧大号数字“132/85”,下方标签“最新血压”,数字下方红色向下箭头+小字“较昨日+2”;右侧大号数字“65.5kg”,下方标签“最新体重”,绿色向上箭头+小字“较昨日-0.3”;健康趋势分析模块,加粗模块标题“健康趋势”,下方两个大按钮标签“本周”(选中态浅蓝色填充)和“本月”(未选中态仅边框);趋势可视化区,血压趋势图为高度简化折线图,仅保留蓝色高压平滑曲线和坐标轴,曲线上最高点用醒目的红色圆点标注,引出标签框写“最高:152”;血压图下方为体重趋势图,简化柱状图,蓝色柱子表示体重,其中一根超高柱子用橙色填充,引出标签“68kg”;异常警报记录模块,模块标题“异常警报记录”左侧配红色铃铛图标,包含两条记录:第一条左侧红色感叹号圆形图标,中间文字“血压高压152”,右侧时间“10/21 上午”,整条背景带轻微红色高光;第二条左侧橙色感叹号圆形图标,中间文字“体重68kg”,右侧时间“10/18 下午”;每条记录下方灰色小字提示“点击查看AI建议”;屏幕底部固定浅灰色语音查询输入框,预设文字“您可以问‘我这一周血压怎么样?’”,右侧配麦克风图标。要求:趋势图去掉复杂网格和刻度,只保留核心线柱和异常点标注,严格颜色编码红色代表血压异常、橙色代表体重预警,清晰区分三个信息层级,高清写实UI数据仪表盘设计风格,和前两个界面保持系列统一性,专业级清晰度,图表和文字清晰可辨。设计“银龄·康语”小程序的健康档案功能界面,延续统一设计语言:白色背景,浅灰色分割,浅蓝色为基准色,红色和橙色作为强调色,保持信息极简聚焦核心,无多余装饰元素。从上到下布局:顶部导航,左侧返回箭头+“< 返回”文字,中央大标题“健康档案”旁配折线图图标;标题下方浅蓝色背景圆角大卡片核心数据总览,左右并列显示两个关键数据:左侧大号数字“132/85”,下方标签“最新血压”,数字下方红色向下箭头+小字“较昨日+2”;右侧大号数字“65.5kg”,下方标签“最新体重”,绿色向上箭头+小字“较昨日-0.3”;健康趋势分析模块,加粗模块标题“健康趋势”,下方两个大按钮标签“本周”(选中态浅蓝色填充)和“本月”(未选中态仅边框);趋势可视化区,血压趋势图为高度简化折线图,仅保留蓝色高压平滑曲线和坐标轴,曲线上最高点用醒目的红色圆点标注,引出标签框写“最高:152”;血压图下方为体重趋势图,简化柱状图,蓝色柱子表示体重,其中一根超高柱子用橙色填充,引出标签“68kg”;异常警报记录模块,模块标题“异常警报记录”左侧配红色铃铛图标,包含两条记录:第一条左侧红色感叹号圆形图标,中间文字“血压高压152”,右侧时间“10/21 上午”,整条背景带轻微红色高光;第二条左侧橙色感叹号圆形图标,中间文字“体重68kg”,右侧时间“10/18 下午”;每条记录下方灰色小字提示“点击查看AI建议”;屏幕底部固定浅灰色语音查询输入框,预设文字“您可以问‘我这一周血压怎么样?’”,右侧配麦克风图标。要求:趋势图去掉复杂网格和刻度,只保留核心线柱和异常点标注,严格颜色编码红色代表血压异常、橙色代表体重预警,清晰区分三个信息层级,高清写实UI数据仪表盘设计风格,和前两个界面保持系列统一性,专业级清晰度,图表和文字清晰可辨。
「图片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