Skip to content

S
SatelliteDigital
提交 8c8d22b4 authored 作者: 汪雄's avatar 汪雄
浏览文件
操作

更新readme

上级 87dbe58f
显示空白字符变更
内嵌 并排
正在显示 包含 267 行增加 和 3 行删除
README.md
浏览文件 @ 8c8d22b4
...@@ -43,13 +43,275 @@ export const useUserStore = defineStore('user', { ...@@ -43,13 +43,275 @@ export const useUserStore = defineStore('user', {
#打包： #打包：
1.npm run build 1.npm run build
2.pkg server.js -t node16-linux-x64 -o DataScreenServer 2.pkg server.js -t node16-linux-x64 -o DataScreenServer
3.两个文件发给后端
#git地址 #git地址
1.http://git.lingbtech.com:8090/nijiawen/SatelliteDigital 1.http://git.lingbtech.com:8090/nijiawen/SatelliteDigital
#线上系统服务器地址 #线上系统地址
1.http://121.229.107.155:3010 1.http://121.229.107.155:3010
#接口文档 #接口文档
1.http://121.229.107.155:19020/doc.html 1.http://121.229.107.155:19020/doc.html
---
# 千帆星座天地一体化智慧数字孪生应用平台
## 一、项目概述
卫星仿真系统大屏前端项目，与 **UE5（虚幻引擎5）** 深度集成，作为数字孪生大屏的数据可视化 UI 覆盖层。页面背景透明，通过 `window.ue5` bridge 与 UE5 双向通信。
---
## 二、技术栈
| 类别 | 技术 | 版本 | 用途 |
|------|------|------|------|
| 核心框架 | Vue 3 | ^3.5.13 | 前端框架 |
| 构建工具 | Vite | ^6.2.0 | 开发/构建 |
| 路由 | Vue Router | ^4.5.0 | 路由管理 |
| 状态管理 | Pinia | 2.1.7 | 全局状态 |
| UI 组件 | Element Plus | ^2.9.6 | 主 UI 库（中文国际化） |
| UI 组件 | VXE Table | ~4.15.9 | 高性能表格 |
| 数据可视化 | ECharts | 5.5.1 | 图表库 |
| HTTP 请求 | Axios | 0.28.1 | 接口请求 |
| 实时通信 | WebSocket (ws) | ^8.18.3 | 实时数据推送 |
| 生产服务器 | Express | ^5.1.0 | 静态服务 + API 代理 + WebSocket |
| CSS 预处理 | Sass | 1.77.5 | 样式编写 |
| 日期处理 | dayjs | ^1.11.19 | 日期格式化 |
| 加密 | jsencrypt | 3.3.2 | RSA 加密 |
| Cookie | js-cookie | 3.0.5 | Token 存储 |
| 文件下载 | file-saver | 2.0.5 | 文件流下载 |
---
## 三、目录结构
```
src/
├── main.js # 应用入口，注册插件、挂载全局组件
├── App.vue # 根组件
├── style.css # 全局样式
├── permission.js # 路由守卫（当前已放开鉴权）
│
├── api/ # API 接口层
│ └── Zodiac.js # 所有业务 API 接口定义
│
├── assets/ # 静态资源
│ ├── images/ # 图片资源（headers/lefts/footers/right2 等）
│ └── json/ # JSON 数据（世界地图、国家名称等）
│
├── components/ # 公共组件
│ ├── SvgIcon/ # SVG 图标组件（全局注册）
│ ├── FileUpload/ # 文件上传组件
│ ├── ImageUpload/ # 图片上传组件
│ ├── ImagePreview/ # 图片预览组件
│ └── searchTable/ # 搜索表格组件
│
├── directive/ # 自定义指令
│ └── permission/ # v-hasPermi / v-hasRole 权限指令（预留）
│
├── layout/ # 全局布局
│ └── index.vue # Header + router-view（keep-alive 缓存）
│
├── pages/ # 页面模块（核心业务）
│ ├── header/ # 顶部导航栏（标题、跳转、数字人、大屏配置）
│ ├── lefts/ # 左侧面板 - 主系统（星座构型规划）
│ ├── lefts2/ # 左侧面板 - 子系统（分系统实时遥测）
│ ├── rights/ # 右侧面板 - 主系统（通信数据可视化）
│ ├── rights2/ # 右侧面板 - 子系统（卫星弧段信息）
│ ├── footer/ # 底栏 - 时间轴 + 图例
│ ├── footer2/ # 底栏 - 子系统时间轴
│ ├── all/ # 主内容区（大屏三栏布局 + 悬浮控制面板）
│ └── error/ # 错误页 (401, 404)
│
├── router/ # 路由配置
│ └── index.js # 命名视图 + 嵌套路由
│
├── store/ # 状态管理
│ └── module/app.js # 全局应用状态（Pinia）
│
└── utils/ # 工具函数
├── request.js # Axios 封装（拦截器、错误处理、文件下载）
├── requestSocekt.js # 主系统 WebSocket（含自动重连）
├── subSystemRequestSocket.js # 子系统 WebSocket
├── auth.js # Token 管理（Cookie 读写）
├── local.js # 本地缓存封装（localStorage + sessionStorage）
├── dict.js # 字典数据工具（预留）
└── function.js # 通用工具（日期格式化、参数序列化等）
```
---
## 四、路由与页面结构
采用 **命名视图（Named Views）** 架构，支持主系统/子系统两个视图模式：
```
layout/index.vue（全局壳）
├── header/index.vue（顶部标题栏）
└── all/index.vue（数据大屏容器 + 悬浮控制面板）
├── router-view[name="left"] → 左侧面板
│ 主系统: lefts（星座构型规划）
│ 子系统: lefts2（分系统实时遥测）
├── router-view[name="right"] → 右侧面板
│ 主系统: rights（通信数据 - 热力图/曲线图）
│ 子系统: rights2（卫星弧段信息）
├── router-view[name="foot_one"] → 底部时间轴
└── router-view[name="foot_two"] → 底部图例/子系统时间轴
```
| 路径 | 名称 | 左侧面板 | 右侧面板 | 底部 |
|------|------|---------|---------|------|
| `/` | home | 星座构型规划 | 通信数据 | 时间轴 + 图例 |
| `/subsystem` | subsystem | 分系统实时遥测 | 卫星弧段信息 | 子系统时间轴 |
| `/404` | - | 错误页 | - | - |
---
## 五、业务模块说明
### 1. UE5 Bridge 通信模块
- **入口**：`index.html` 中内嵌 UE5 bridge 脚本，暴露 `window.ue5()` 全局方法
- **功能**：Vue 前端与 UE5 虚幻引擎双向通信
- **通信内容**：控制面板开关状态（时间轴/图例/数据面板/卫星轨道/波束）、卫星展开层级、时间轴播放控制
### 2. 星座构型管理模块（主系统 - 左侧面板）
- **位置**：`pages/lefts/index.vue`
- **功能**：星座核心指标展示（卫星数量/轨道面/轨道高度等）、轨道参数轮播、卫星列表、地面系统信息及异常查询
### 3. 通信数据可视化模块（主系统 - 右侧面板）
- **位置**：`pages/rights/index.vue` + `pages/all/components/`
- **功能**：
- 容量/流量热力地图（ECharts）
- CDF 可用性曲线（规划可用性 vs 实际可用性）
- 瞬时值曲线（搜星时延 / 丢包率）
### 4. 分系统遥测模块（子系统 - 左侧面板）
- **位置**：`pages/lefts2/index.vue`
- **功能**：子系统标签页切换、实时遥测数据展示、遥测曲线图、地面站弧段信息
### 5. 卫星弧段信息模块（子系统 - 右侧面板）
- **位置**：`pages/rights2/index.vue`
- **功能**：弧段列表（弧段编号/卫星编号/出入境时刻/时长/地面站/测控类型）、告警详情（I-IV 级）
### 6. 时间轴控制模块
- **位置**：`pages/footer/component/timers.vue`（主系统）+ `pages/footer2/timers.vue`（子系统）
- **功能**：全局时间轴控制、播放/暂停、速度调节（x1/x2/x4/x8/x16）、日期范围选择、与 UE5 时间同步
### 7. 图例模块
- **位置**：`pages/footer/component/legend.vue`
- **功能**：卫星状态图例（正常/异常/失效）、小卫星、星间链路、卫星波束、卫星轨道、服务格网等
### 8. 大屏配置模块
- **位置**：`pages/header/component/screenConfigeDialog.vue`
- **功能**：对象选取（区域/信关站/格网面板数据）、模板配置管理（CRUD）
### 9. WebSocket 实时通信模块
- **主系统**：`ws://121.229.107.155:19021/TestTimeSend`（测试时间推送，含自动重连）
- **子系统**：`ws://121.229.107.155:19021/systemData`（系统实时数据推送）
### 10. 生产服务器模块
- **位置**：`server.js`
- **功能**：静态文件服务（dist 目录）、API 代理（`/api` -> 后端）、WebSocket 中转（UE5 通信）、CORS/CSP 安全策略
- **部署**：使用 `pkg` 打包为 `DataScreenServer.exe` 独立可执行文件
---
## 六、API 接口汇总
基础地址：`http://121.229.107.155:19021/api`
| 模块 | 接口 | 方法 | 说明 |
|------|------|------|------|
| 星座 | `/constellationInfo/list` | GET | 星座构型信息 |
| 星座 | `/SatelliteBasicInfo/list` | GET | 卫星列表 |
| 地面系统 | `/SiteData/list` | GET | 地面系统信息列表 |
| 地面系统 | `/SiteData/pageError` | POST | 地面系统异常分页 |
| 地面系统 | `/GroundSystem/statistics` | GET | 地面/子系统统计 |
| 子系统 | `/subSystem/getSubSystem` | GET | 子系统选项列表 |
| 子系统 | `/subSystem/getSubSystemCurve` | GET | 子系统曲线数据 |
| 通信面板 | `/commPanel/getRegionPanel` | GET | 区域面板数据 |
| 通信面板 | `/commPanel/getSignalSitePanel` | GET | 信关站面板数据 |
| 通信面板 | `/commPanel/getGridPanel` | GET | 格网面板数据 |
| 通信面板 | `/commPanel/getCapacity` | GET | 容量数据 |
| 通信面板 | `/commPanel/getTraffic` | GET | 流量数据 |
| 通信面板 | `/commPanel/getAvailability` | GET | 规划可用性 |
| 通信面板 | `/commPanel/getDelay` | GET | 接入时延 |
| 通信面板 | `/commPanel/getLossRate` | GET | 丢包率 |
| 通信面板 | `/commPanel/getPanelCurve` | GET | 面板曲线数据 |
| 格网 | `/GridInfo/list` | GET | 格网信息列表 |
| 模板 | `/templateApi/list` | GET | 模板列表 |
| 模板 | `/templateApi/add` | POST | 模板新增 |
| 模板 | `/templateApi/update` | POST | 模板修改 |
| 模板 | `/templateApi/delete` | GET | 模板删除 |
| 模板 | `/templateApi/detail` | GET | 模板详情 |
| 配置 | `/objectApi/add` | POST | 对象配置新增 |
| 配置 | `/objectApi/queryByIp` | POST | 对象配置查询 |
---
## 七、状态管理（Pinia Store）
核心状态字段（`store/module/app.js`）：
| 分类 | 字段 | 说明 |
|------|------|------|
| 时间轴 | `globalTimeLineEndSelectTime` | 时间轴当前结束时间 |
| 时间轴 | `globalTimeLineStartTime` | 时间轴起始时间 |
| 时间轴 | `globalTimeLineEndTime` | 时间轴结束时间 |
| 时间轴 | `globaleAutoPlay` | 是否自动播放（默认 true） |
| 时间轴 | `globalIntervalTime` | 播放间隔（默认 3000ms） |
| 面板控制 | `isTimeLineShow` | 时间轴显示/隐藏 |
| 面板控制 | `islegendShow` | 图例显示/隐藏 |
| 面板控制 | `isdataPanelShow` | 数据面板显示/隐藏 |
| 面板控制 | `issatelliteOrbitShow` | 卫星轨道显示/隐藏 |
| 面板控制 | `issatelliteBeamShow` | 卫星波束显示/隐藏 |
| 面板控制 | `iscontrolPanelShow` | 控制面板显示/隐藏 |
| 子系统 | `subsystemSocket` | 子系统 WebSocket 实例 |
| 子系统 | `globalSubsystemActiveIndex` | 子系统当前激活标签 |
| 子系统 | `globalSubsystemSpeed` | 子系统播放速度 |
| 数据面板 | `gridPanelData` | 格网面板数据 |
| 数据面板 | `regionPanelData` | 区域面板数据 |
| 数据面板 | `signalSitePanelData` | 信关站面板数据 |
| 卫星搜索 | `globalSatelliteSearchID` | 搜索卫星 ID（默认 "4097"） |
---
## 八、环境与部署
### 开发环境
```bash
npm install
npm run dev
# 访问 http://localhost:8081
# API 代理: /api -> http://121.229.107.155:19020
```
### 生产构建
```bash
# 1. 前端打包
npm run build
# 2. 使用 pkg 打包为独立可执行文件
pkg server.js -t node16-win-x64 -o DataScreenServer
# 3. 运行
./DataScreenServer.exe
# 访问 http://localhost:3010
```
### 环境变量
- 开发环境：Vite 代理（`vite.config.js` 中配置）
- 生产环境：`.env.production`（`VITE_API_URL = http://121.229.107.155:19021/api`）
---
## 九、关键架构特点
1. **UE5 深度集成**：整个前端作为 UE5 数字孪生场景的透明 UI 覆盖层，通过 `window.ue5()` bridge 双向通信
2. **命名视图多面板布局**：Vue Router 命名视图实现左/中/右/底多面板布局，支持主系统/子系统视图切换
3. **实时数据驱动**：WebSocket 推送 + 时间轴回放，实现卫星轨道和遥测数据的历史回放
4. **ECharts 数据可视化**：热力地图、CDF 曲线、瞬时值曲线等多种图表展示通信数据
5. **响应式适配**：控制面板根据屏幕宽度自动调整，小屏自动隐藏侧边面板
src/pages/footer/component/timers.vue
浏览文件 @ 8c8d22b4
...@@ -1698,7 +1698,8 @@ onUnmounted(() => { ...@@ -1698,7 +1698,8 @@ onUnmounted(() => {
<style scoped> <style scoped>
.timeline-container { .timeline-container {
min-width: 800px; /* min-width: 800px; */
max-width: 1600px;
height: 140px; height: 140px;
margin: 0 auto; margin: 0 auto;
padding: 10px 45px; padding: 10px 45px;
...@@ -1706,6 +1707,7 @@ onUnmounted(() => { ...@@ -1706,6 +1707,7 @@ onUnmounted(() => {
background-color: #000000; background-color: #000000;
border-radius: 8px; border-radius: 8px;
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */ /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */
opacity: 1 !important;
} }
.timeline-controls { .timeline-controls {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论