基于 jQuery + Bootstrap 构建的设备报修 / 维修管理 PC 端站模板。开箱即用，替换品牌素材即可上线。
设备管理类系统的 PC 端，最难的不是单个页面，而是”顶部栏 + 多级侧边栏 + 内容区”这套后台框架，以及报修表单、工单表格、状态流转详情之间的相互跳转。从零搭建这套骨架，往往要消耗一周以上的时间。本模板以国际合作项目设备管理为原型，将 PC 管理端的完整框架与 9 个业务页面全部做完，可直接作为管理系统的前端界面。与同系列的手机站模板（国际合作手机站）构成同一产品的双端方案：PC 端供管理员处理工单，手机端供现场人员提交报修。
模板亮点
1. 经典后台管理框架，9 个页面开箱即用
顶部品牌栏（logo + 用户信息 + 退出 / 设置）+ 左侧多级折叠菜单 + 右侧内容区的三段式布局，含 首页、登录、设备报修表单、已报修设备列表、待维修 / 处理中 / 转交中详情、设置、企业简介，管理端骨架直接成型。
2. 三级侧边菜单体系
左侧菜单支持三级展开：设备报修（已报修的设备 / 报修设备详情）、维修管理（待维修 / 处理中 / 转交中 / 已完成，每态再挂详情页）、台站管理、设置等模块，当前页逐级高亮并默认展开，树形结构直接复用到任何管理后台。
3. 完整的报修表单与数据表格
- 故障申请表单：设备分类 / 型号 / 编号 / 故障类型 / 设备台站下拉选择，发现时间 / 故障时间日期选择，上报人、转交人、备注等字段齐备
- 已报修设备列表：Bootstrap 表格（设备分类 / 名称 / 报修编号 / 上报人 / 状态 / 操作），行内”详情”按钮可直接跳转
- 工单详情页：待维修 / 处理中 / 转交中三种状态详情页，展示订单信息与转交流转信息
4. 独立登录页
账号登录页（用户名 / 密码 / 记住密码 / Bootstrap 主色登录按钮），与管理端框架分离，可直接接入鉴权接口。
5. Bootstrap 3 表单底座，后端对接成本低
全部表单控件基于 Bootstrap 3.3.7 form-control / btn 体系，日期字段使用 bootstrap-datetimepicker（中文、月视图精简、自动关闭），序列化提交即可与任意后端语言对接。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.12.4 | DOM 操作 / 菜单交互 / 弹窗 |
| Bootstrap | 3.3.7 | 栅格 / 表单控件 / 按钮 / 表格 |
| bootstrap-datetimepicker | — | 中文日期选择（附 zh-CN 语言包） |
| jquery.reveal | — | 模态弹窗 |
| normalize.css | — | 样式重置 |
项目结构
gjhzz/
├── index.html # 首页（左侧多级菜单 + 右侧四大功能入口卡片）
├── login.html # 账号登录页
├── sbbx.html # 设备报修 — 故障申请表单
├── ybxsb.html # 设备报修 — 已报修的设备列表（表格 + 详情按钮）
├── wxgl_dwx.html # 维修管理 — 待维修列表 / 转交详情
├── wxgl_clzxq.html # 维修管理 — 处理中详情
├── wxgl_zjzxq.html # 维修管理 — 转交中详情
├── basic.html # 设置（个人资料 / 修改密码）
├── about.html # 企业简介
├── css/
│ └── style.css # 主样式（主色 #3e4e9b 科技蓝）
├── js/
│ ├── jquery.min.js # jQuery 1.12.4
│ └── jquery.reveal.js # 模态弹窗
├── bootstrap/ # Bootstrap 3.3.7（css + js + 字体图标）
├── bootstrap-datetimepicker/ # 日期选择器（含多语言包）
└── img/ # 图标 / 头像 / 界面素材快速开始
纯静态模板，无需构建：
# 方式一：浏览器直接打开
双击 index.html 即可浏览
# 方式二：本地静态服务器
python3 -m http.server 8080
# 访问 http://localhost:8080/
# 方式三：VS Code Live Server 插件，右键 index.html → Open with Live Server二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 img/logo.png 与 img/login_bg.jpg，修改页脚版权文字 |
| 修改文案 / 链接 | 各 HTML 内文字与 href 直接修改；侧边菜单在各页为独立结构，需同步修改 |
| 更换主题色 | 修改 css/style.css 中的 #3e4e9b（菜单、按钮、标题主色） |
| 对接后端 | 表单基于 form-control 体系可直接序列化；列表改为模板渲染即可 |
| 增删页面 | 复制任一内容页，保留顶部栏与侧边菜单，替换右侧内容区即可 |
适用场景
科研院所 / 台网 / 高校的设备管理 PC 端，企业设备报修与维修工单系统（EAM / CMMS）管理界面，国际合作项目管理系统，也可作为任何”表单 + 列表 + 详情流转”类 PC 管理后台的通用骨架。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 2~3 周起 | 改造对接，数天上线 |
| 页面还原度 | 需与产品反复走查 | 管理端框架 + 报修流程页面齐备 |
| 交互与组件 | 菜单/表格/日期逐个开发 | 三级侧边菜单、Bootstrap 表格、中文日期选择全内置 |
| 双端一致性 | PC 与手机端需分别设计 | 可与同系列手机站模板组合成交付 |
| 维护成本 | 自行承担 | 静态结构清晰，对接后端即可迭代 |
在线预览
纯静态模板，将整个目录部署至任意静态托管（GitHub Pages / OSS / 云虚拟主机等）即可在线访问。
http://8.166.93.126:8989/gjhzz
评论0