Ren/airport-qingdao-vue3

GAO f347f13c22 修复航空器图标不受筛选框控制

2026-01-22 14:36:35 +08:00

9.7 KiB

Raw Blame History

项目功能总览（表格版）

本文档基于现有代码结构与实现，整理平台项目的核心模块、路由、权限、地图配置、API 与全局状态。便于快速理解与维护。

项目概览

项目项	值/位置	说明
技术栈	Vue 3、Vite、Pinia、Vue Router、Element Plus、OpenLayers、SuperMap iClient OL	前端与地图可视化基础
运行时配置入口	`public/config.js`	运行时覆盖接口与 WebSocket 地址
`VITE_BASE_URL`	`http://10.0.0.58:8080`	Axios `baseURL` 优先读取 `window.APP_CONFIG`
`WS_BASE_URL`	`ws://10.0.0.58:8080/collision`	平台概览页使用的告警/碰撞推送

启动流程

步骤	文件	关键点
应用入口	`src/main.js`	创建应用、注册 `router`、`store(Pinia)`、`plugins`、`ElementPlus`、全局组件与工具
权限拦截	`src/permission.js`	路由守卫：鉴权、动态路由、Tab 切换、首屏重定向 `/platform`、NProgress
路由前缀	`src/router/index.js`	`createWebHashHistory('/airport')`，路由以 `#/airport` 开头

路由概览（常量路由）

路径	名称	组件	标题	备注
`/platform`	PlatformIndex	`@/views/platform/index.vue`	平台概览	`affix: true`
`/car/index`	CarIndex	`@/views/index.vue`	车辆管理	菜单“车辆管理”
`/car/monitor`	CarMonitorIndex	`@/views/car/monitor/index.vue`	车辆监控	一级路由
`/system/index`	SystemIndex	`@/views/index.vue`	系统管理	菜单“系统管理”
`/system/user`	User	`@/views/system/user/index.vue`	用户管理	一级路由（人员管理以后台 meta.title 为准）
`/system/role`	SystemRoleIndex	`@/views/system/role/index.vue`	角色管理	一级路由
`/system/operlog`	SystemOperlogIndex	`@/views/system/operlog/index.vue`	操作日志	一级路由
`/road/intersection`	Intersection	`@/views/road/intersection/index.vue`	路口管理	路况管理
`/road/intersection/detail/:id`	IntersectionDetail	`@/views/road/intersection/detail.vue`	路口详情	隐藏子路由（详情）
`/road/traffic-light`	TrafficLight	`@/views/road/traffic-light/index.vue`	信号灯管理	路况管理

动态路由（权限驱动）

路径	权限/角色	组件	说明
`/system/user-auth/role/:userId`	`permissions: ['system:user:edit']`	`@/views/system/user/authRole.vue`	分配角色
`/system/role-auth/user/:roleId`	`permissions: ['system:role:edit']`	`@/views/system/role/authUser.vue`	分配用户
`/system/dict-data/index/:dictId`	`permissions: ['system:dict:list']`	`@/views/system/dict/data.vue`	字典数据
`/tool/gen-edit/index/:tableId`	`permissions: ['tool:gen:edit']`	`@/views/tool/gen/editTable.vue`	生成配置

注：src/store/modules/permission.js 会拉取后端菜单并将字符串组件映射为真实组件，同时在前端兜底注入“路况管理”路由。

Tab 菜单与侧边栏

Tab	展示菜单（以后台 `meta.title` 为准）	侧边栏
`platform`	无	隐藏侧边栏（`useAppStore().toggleSideBarHide(true)`）
`car`	车辆监控、车辆管理	只展示对应菜单
`system`	角色管理、人员管理、操作日志	只展示对应菜单
`road`	路况管理（含子菜单）	保留“路况管理”及子菜单

视图模块

模块	页面	主要组件	关键功能
平台概览	`@/views/platform/index.vue`	OpenLayersMap、CarAlarm、Eventlist、AlarmNotification、WeatherStationPopup	告警统计、车辆列表、路口/信号灯图层、气象弹窗、地图交互
车辆监控	`@/views/car/monitor/index.vue`	VehicleTable、VehicleCards、VehicleDetail、VehicleMovementControlRefactored	列表/卡片切换、搜索过滤、详情、远程控制、轨迹回放
路况管理	路口管理/详情/信号灯	Intersection、IntersectionDetail、TrafficLight	路口与信号灯的增删改查与统计
系统管理	用户/角色/日志等	System 子页面	完整后台管理套件

地图配置（OpenLayers + SuperMap）

参数	值	位置	说明
投影	`EPSG:4528`	`src/components/map/OpenLayersMap.vue`	`proj4.register` 注册，平面坐标
底图源	`TileSuperMapRest`	同上	指向 `http://10.96.3.10:8090/.../QDJC2DZT`
`bounds`	`[40502704.7458807, 4019271.0092735, 40514081.829214096, 4030939.1342735]`	同上	地图适配范围
`center`	`[40512494.329214066, 4026228.757190162]`	同上	初始中心点
`rotation`	`-1.26`	同上	约 72° 逆时针
`resolutions`	自定义数组	同上	与 `zoom` 索引对应
`minZoom`	`7`	同上	最小缩放索引
`initialZoom`	`8`	同上	初始缩放索引（源码常量定义）
`maxZoom`	`resolutions.length - 1`	同上	最大缩放索引
`tileGrid.origin`	`[bounds[0], bounds[3]]`	同上	使用左上角为原点
视图持久化	`localStorage.defaultMapView`	同上	支持保存/恢复 `center`/`zoom`/`rotation`

地图控件与能力

组件/控件	文件	功能
缩放/指南针	`controls/OpenLayersZoomControl.vue`	缩放、旋转事件响应、重置视图
地图信息	`controls/OpenLayersMapInfo.vue`	显示 XY 与 WGS84 坐标
比例尺	`controls/OpenLayersScaleControl.vue`	动态计算并展示比例尺（米/公里），监听 `moveend`
鹰眼	集成 OpenLayers `OverviewMap`	自定义样式与内部视图，`160×160`
绘制	`controls/RouteDrawControl.vue`	点线面/路线绘制、统计面板、清除、导出/导入 `GeoJSON`

告警与统计组件

组件	文件	功能	暴露方法
告警通知	`info/AlarmNotification.vue`	标签页“全部/车辆冲突/越界/超速”，过滤展示告警列表	`updateAlarmList`、`show`、`hide`、`toggle`、`isVisible`
车辆告警统计	`info/carClarm.vue`	在线/离线/故障数量展示	`updateCounts(online, offline, fault)`

API（路况模块）

路口（`src/api/road/intersection.js`）

名称	方法	URL	说明
列表	GET	`/traffic-light/intersections/list`	查询路口列表
搜索	GET	`/traffic-light/intersections/search`	关键字查询
详情	GET	`/traffic-light/intersections/{id}`	获取路口详情
新增	POST	`/traffic-light/intersections`	创建路口
修改	PUT	`/traffic-light/intersections/{id}`	更新路口
统计	GET	`/traffic-light/intersections/statistics`	路口统计数据

信号灯（`src/api/road/trafficLight.js`）

名称	方法	URL	说明
列表	GET	`/traffic-light/devices/list`	查询设备列表
详情	GET	`/traffic-light/devices/{deviceId}`	获取设备详情
新增	POST	`/traffic-light/devices`	创建设备
修改	PUT	`/traffic-light/devices/{deviceId}`	更新设备
删除	DELETE	`/road/trafficLight/{trafficLightId}`	删除设备（旧路径，谨慎使用）
状态	PATCH	`/traffic-light/devices/{deviceId}/status`	设置设备状态
可用性	GET	`/traffic-light/devices/{deviceId}/availability`	检查设备可用性
统计	GET	`/traffic-light/devices/statistics`	设备统计数据
搜索	GET	`/traffic-light/devices/search`	关键字搜索
在线列表	GET	`/traffic-light/devices/online`	在线设备
按制造商	GET	`/traffic-light/devices/manufacturer/{manufacturer}`	制造商筛选
按路口	GET	`/traffic-light/devices/intersection/{intersectionId}`	路口设备
路口激活	GET	`/traffic-light/devices/intersection/{intersectionId}/active`	路口激活设备
激活且在线	GET	`/traffic-light/devices/active-online`	激活并在线设备

API（系统模块摘要）

模块	文件	能力摘要
用户	`src/api/system/user.js`	增删改查、状态/重置密码、头像上传、个人信息、授权角色、部门树、初始密码
角色	`src/api/system/role.js`	增删改查、数据权限、授权/取消授权用户、部门树
菜单	`src/api/system/menu.js`	增删改查、菜单下拉树、角色菜单树

Store（Pinia）

模块	文件	状态	关键动作
`settings`	`src/store/modules/settings.js`	主题、侧边主题、顶部导航、标签页、固定头、LOGO、动态标题	`changeSetting`、`setTitle`（调用 `useDynamicTitle`）
`permission`	`src/store/modules/permission.js`	路由/菜单、Tab、侧边栏菜单	`generateRoutes`、`updateSidebarByTab`、`setAllMenus`
`user`	`src/store/modules/user.js`	`token`、`name`、`avatar`、`roles`、`permissions`	`login`、`getInfo`、`logOut`
`app`	`src/store/modules/app.js`	侧边栏开关/隐藏、设备、尺寸	`toggleSideBar`、`closeSideBar`、`toggleSideBarHide`

WebSocket

项	值/方法	说明
运行时地址	`window.APP_CONFIG.WS_BASE_URL`	`ws://10.0.0.58:8080/collision`
创建	`createWebSocket(url, options)`	单例、自动重连（默认 3s 间隔，最多 10 次）
事件	`on(event, cb)` / `emit(event, ...)`	订阅与分发消息（`open`/`message`/`error`/`close` 等）
发送	`send(data)`	字符串或 JSON 自动处理
重置	`resetWebSocketInstance()`	关闭并清空实例，强制重建

如需将本表格扩展到更细的字段（例如系统所有菜单、各视图的交互时序与数据字典），请告知范围，我可以继续完善并补充到本文件。