jcgl-dev/docs/frontend/03-路由与页面职责.md

03 路由与页面职责

1. 路由总表

路由定义在 src/router/index.js，全部为静态路由，无动态权限路由、无嵌套路由。

#	路径	名称	组件	状态	职责
1	/	—	重定向 /login	可用	默认入口
2	/login	Login	views/Login.vue	可用	公寓账号 + 密码登录
3	/home	Home	views/Home.vue	模板遗留	展示 HelloWorld，含未注册组件
4	/MealsOrdering	MealsOrdering	zhengchuang/views/MealsOrdering.vue	可用（有缺陷）	乘务员自助点餐
5	/paymentPlatform	paymentPlatform	zhengchuang/views/paymentPlatform.vue	半可用	自助结算金额录入，刷脸链路被注释
6	/chefOrders	chefOrders	zhengchuang/views/chefOrders.vue	可用	后厨订单队列
7	/roomService	roomService	zhengchuang/views/roomService.vue	半可用	保洁房间卡片与计时，完成不回写后端
8	/jcxx	JcXx	views/JcXx.vue	可用	值班控制台（主业务）
9	/JcXx	—	重定向 /jcxx	可用	大小写兼容
10	/about	About	views/About.vue	模板遗留	空壳页
11	/ykt_main	ykt_main	shijinpeng/main.vue	可用（有缺陷）	自助入寓/离寓登记终端
12	/room	room	components/Room.vue	独立可访问	选房组件；正常由值班台弹窗内嵌
13	/synJcXx	synJcXx	views/SynJcXx.vue	可用	运安同步叫乘数据查询

2. 页面分组

flowchart TB
  subgraph DutySide["值班侧"]
    J["/jcxx 主控制台"]
    S["/synJcXx 同步查询"]
  end
  subgraph CrewSide["乘务员自助"]
    Y["/ykt_main 入寓登记"]
    M["/MealsOrdering 点餐"]
    P["/paymentPlatform 结算"]
  end
  subgraph CanteenSide["食堂/保洁"]
    C["/chefOrders 后厨"]
    R["/roomService 保洁"]
  end
  subgraph LegacySide["模板遗留"]
    H["/home"]
    A["/about"]
  end

四组页面之间没有前端共享状态，协作方式只有三种：

1. 后端轮询 / WebSocket 推送；
2. localStorage（gyid、loginAccount、Admin-Token）；
3. BroadcastChannel（同浏览器多标签页，见 06）。

3. 页面职责与关键行为

3.1 /login 登录页

• 表单只有用户名、密码，没有验证码；getCodeImg() 虽已封装但未使用。
• 成功后写假 token、gyid、loginAccount，跳 /jcxx。
• 已登录用户访问 /login 会被守卫重定向回 /jcxx，无法直接切换账号。
• 详见 02-登录与路由守卫。

3.2 /jcxx 值班控制台

系统的核心页面，承担：

• 叫乘任务列表（机务/客运、其他人员两个 Tab，但 Tab 仅切换选中态，不改变查询）；
• 入寓登记、修改叫乘、取消叫乘、出乘、换房、暂停报警、临叫、停止呼叫；
• 交路信息查看/确认/维护；
• 人员维护、现金充值、历史叫乘、设备状态；
• 实时告警音、运安离线报警、同步提醒弹窗与 TTS；
• 定时刷新列表、定时导出 Excel。

完整拆解见 04-核心页面拆解-JcXx。

3.3 /ykt_main 自助登记终端

• 无登录态输入，靠 rlywebsocket/test33 接收“有人靠近/刷脸”事件后弹出登记窗口。
• 页面内固定 gyid: "SYBXC"、gymc: "沈阳站公寓"，部署到其他公寓必须改代码。
• 依赖的 getRyxx 在 api/jcgl/jcgl.js 中不存在（实际函数名是 getRyXxByRyId），刷脸确认时会抛异常；即使修复，入寓分支也只广播、不调用 /jcgl/submitAll。
• 详见 06。

3.4 食堂四页

页面	正常业务闭环	当前状态
点餐 MealsOrdering	选餐 → 确认 → 刷脸 → consume 扣款 → createOrder + 明细 → 广播后厨	刷卡回调存在；餐次判断与定时器有缺陷
结算 paymentPlatform	录入金额 → 刷脸 → 扣款 → 生成订单	initWebSocket() 被注释，刷脸回调不会触发
后厨 chefOrders	拉取待处理订单 → 查看明细 → 完成订单；收到 2603 广播刷新并响铃	可用
保洁 roomService	房间卡片 → 开始保洁计时 → 完成	“完成”只弹提示，不调用后端

详见 06。

3.5 /synJcXx 同步查询

• 只读列表：车次、机车号、开车时间、计划出勤地点、司机姓名、接车方式。
• 输入即查询（@input），带分页 [5,10,15,20,30,40,50]。
• 数据来源 /jcgl/getSynJcXx，是运安计划同步结果的查询视图，不参与叫乘状态流转。

3.6 /room 与房间维护

• /room 可直接访问 Room.vue，但正常使用方式是值班台弹窗：JcXx.vue 通过 <Room> 内嵌，选房后 $emit('childByValue', room) 回传。
• RoomLook.vue 没有独立路由，只作为值班台“房间信息”弹窗使用。
• 两者都属于“房间状态”操作面，详见 06。

4. 入口关系

flowchart LR
  Login["/login"] -->|成功| Jcxx["/jcxx"]
  Jcxx -->|房间信息| RoomLook["RoomLook 弹窗"]
  Jcxx -->|入寓登记选房| Room["Room 弹窗"]
  Jcxx -->|历史数据| History["历史叫乘弹窗"]
  Jcxx -->|交路管理| Jl["交路弹窗"]
  Jcxx -->|人员维护| Ry["人员维护弹窗"]
  Jcxx -->|退出| Login
  Login -.手工访问.-> Terminal["/ykt_main · /MealsOrdering · /paymentPlatform · /chefOrders · /roomService · /synJcXx"]

除 /jcxx 外，其余业务页面没有导航菜单，需要现场终端在浏览器书签/快捷方式中直接配置 URL。这是“终端型系统”的常见做法，但也意味着改路由会直接影响现场快捷方式。

5. 路由层面的注意事项

问题	影响	位置
守卫只判断本地痕迹	可绕过；后端 Session 过期后页面仍可进入，接口才报错	router/index.js:85
没有 404 路由	未知路径会渲染空白	router/index.js
没有路由级 code-splitting 之外的懒加载策略	首屏仍会加载 Element UI 全量	main.js
/home、/about 仍在路由表	可被访问，产生无意义页面/告警	router/index.js:19、:53
终端页面无登录页跳转保护	未登录访问会被送到 /login，终端无法自动恢复	守卫全局生效

6. 遗留文件清单

以下文件不被路由或组件引用，属于历史备份/模板残留，重构时可直接评估删除：

文件	说明
src/views/JcXx.vue.bak_mojibake	主页面乱码备份
src/components/RoomLook copy.vue	房间维护旧版
src/components/media.vue	媒体示例组件
src/components/HelloWorld.vue	Vue CLI 模板组件（仅 /home 使用）
src/views/Home.vue、src/views/About.vue	Vue CLI 模板页面
src/plugins/*	RuoYi 插件，未安装
src/utils/permission.js	依赖不存在的 @/store
src/utils/jsencrypt.js、src/utils/validate.js	模板工具，当前业务未使用