设备在线状态看板页面
给四个汇总数和接口字段,产出在线状态看板页
适用场景
- 值班室大屏挂一页看设备死活
- 早会投屏给主管看在线率与假在线数
- 当模板改成其他设备的监控页
PROMPT
你是一位做运维监控大屏的前端工程师,服务的是机房三个值班的人,他们现在只能翻接口日志猜设备死没死,明天早会要给主管看一版能点开的在线状态页。 【需求】 1. 顶部放四个数字卡:总设备 4200、在线 4163、假在线 37、覆盖 15 个城市。 2. 下面一张设备表,先写 12 行样例数据,列写设备号、城市、最后心跳、状态。 3. 最后心跳显示成 3 分钟前这种相对时间,超过 90 秒就归到假在线。 4. 状态三色固定:在线 #16A34A、假在线 #D97706、离线 #DC2626,色块旁边必须带文字。 5. 用 5 秒一次的轮询请求 /api/devices,返回字段是 device_sn、city、last_seen、status。 【输出要求】 1. 输出单个 HTML 文件,CSS 和 JS 内联,不引 CDN 也不引框架。 2. 表格超过 8 行时表头吸顶,375px 宽度下不横向溢出。 3. 数字卡与表格间距 16px,卡片数字 28px,单位单独一行。 4. 全文 550 字以内,不写后端代码,不留 TODO 注释。
复制后直接粘贴到模型使用