设备报修系统手机站模板 | jQuery + Bootstrap 移动端工单页面全套

基于 jQuery + Bootstrap 构建的设备报修 / 查询 / 维修管理手机站模板。开箱即用，替换品牌素材即可上线。

科研院所、高校实验室、企业设备部门的报修流程正在从纸质工单向手机端迁移。工程师在台站现场发现设备故障，需要立刻用手机提交报修单、选择上报人与转交人、跟踪维修状态——这类移动工单系统的前端界面，从表单、日期选择到联系人选择、状态筛选，细节多、工作量大。本模板以国际合作项目设备管理为原型，将报修业务全流程的移动端页面一次做齐，可直接作为后端系统的前端界面使用。与同系列的 PC 端模板（国际合作站）构成同一产品的双端方案，可搭配交付。

模板亮点

1. 9 个页面覆盖报修业务全流程

涵盖 首页入口、设备查询详情、故障申请表单、报修设备列表、维修管理工单列表、待维修详情（选联系人）、转交中详情、企业简介、个人设置，从”发现问题”到”流转处理”的移动端闭环一应俱全。

2. 完整的业务表单与选择器

• 故障申请表单：设备分类 / 型号 / 编号 / 故障类型 / 设备台站下拉选择，上报人 / 转交人 / 备注、提交按钮齐备
• 中文日期选择器：bootstrap-datetimepicker 月视图精简模式（yyyy-mm-dd），自带今日按钮、选后自动关闭，并附 zh-CN 语言包
• 联系人选择弹层：全屏遮罩 + 头像列表 + 关键字搜索，点击自动回填指定输入框（msgUserFun 通用函数）

3. 工单管理列表与状态流转

• 维修工单列表支持 设备名称 / 设备编号 组合查询，以及 全部 / 待维修 / 处理中 / 转交中 / 已完成 五态筛选
• 工单卡片双栏展示设备信息与故障信息（报修编号、故障类型、台站、时间等 10 项字段）
• 详情页提供订单信息展示与”转交原因 / 转交时间 / 转交人 / 转交状态”转交表单

4. 全站导航与登录交互

• 六项横向导航（首页 / 设备查询 / 设备报修 / 维修管理 / 台站管理 / 企业简介）全站复用，当前页高亮
• 首页右上角登录入口，jQuery animate 全屏滑出登录层（用户名 / 密码 / 记住密码），关闭即滑出
• 面包屑位置提示（首页 > 设备报修），信息层级清晰

5. 移动端 WAP 适配 + Bootstrap 表单底座

• viewport 禁止缩放，页面宽度 320px ~ 640px 自适应，触摸高亮与输入框全部移动端重置
• 表单控件基于 Bootstrap 3.3.7 的 form-control 体系，后端对接时可直接序列化提交

技术栈

技术	版本	用途
jQuery	1.10.0	DOM 操作 / 登录层动画 / 弹层交互
Bootstrap	3.3.7	表单控件 / 基础样式
bootstrap-datetimepicker	—	中文日期选择（附 zh-CN 语言包）
Swiper	3.3.1	触屏轮播库随源码附带，可按需接入
normalize.css	—	样式重置

项目结构

gjhzsjz/
├── index.html       # 首页（四大功能入口卡片 + 登录滑出层）
├── sbcx.html        # 设备查询 — 查询结果详情（设备参数图片 / PSD 图片 / 设备运行记录）
├── sbbx.html        # 设备报修 — 故障申请表单（含日期选择 / 联系人选择）
├── sbbx_list.html   # 设备报修 — 报修设备列表
├── wxgl.html        # 维修管理 — 工单列表（组合查询 + 五态筛选）
├── wxgl_show.html   # 维修管理 — 待维修详情（订单信息 + 转交表单 + 选联系人）
├── wxgl_show2.html  # 维修管理 — 转交中详情
├── about.html       # 企业简介（单位介绍图文）
├── basic.html       # 设置（个人资料 / 修改密码）
├── css/
│   ├── style.css    # 主样式（主色 #3e4e9b 科技蓝）
│   └── normalize.css
├── js/
│   ├── jquery.min.js
│   └── swiper.jquery.min.js   # Swiper 3.3.1（备用）
├── 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

建议使用 Chrome 设备模拟（手机视图）预览，以获得真实移动端效果。

二次开发指南

需求	操作
更换品牌	替换 img/logo.png、img/logo2.png 及页脚备案文字
修改文案 / 链接	各 HTML 内文字与 href 直接修改；导航六项全站复用一套结构
更换主题色	修改 css/style.css 中的 #3e4e9b（导航、按钮、标题主色）
对接后端	表单控件均有 form-control 类，可直接序列化；日期字段 fx_datetime / gz_datetime 可作为字段名
增删页面	复制任一页面，保留顶部 logo 区、导航区与页脚，替换中间内容即可

适用场景

科研院所 / 地震台网 / 高校实验室的设备报修手机端，企业设备巡检与维修工单系统（EAM / CMMS）移动界面，国际合作项目管理 WAP 站，也可作为任何”查询 + 表单 + 工单流转”类业务系统的移动端原型。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 周起	改造对接，数天上线
页面还原度	需与产品反复走查	报修全流程页面直接可用
交互与组件	日期/选人/筛选逐个开发	中文日期、联系人弹层、五态筛选全内置
移动端适配	需单独调试	WAP 适配 + Bootstrap 表单已完成
维护成本	自行承担	静态结构清晰，对接后端即可迭代

在线预览

纯静态模板，将整个目录部署至任意静态托管（GitHub Pages / OSS / 云虚拟主机等）即可在线访问。

http://8.166.93.126:8989/gjhzsjz