
<!-- "license": "ISC",--许可证信息,暂时没加 -->
<!-- "type": "module",----使用 ES Modules（ECMAScript 模块） -->
<!-- 生产环境插件 -->

<!-- "@vueup/vue-quill": "1.2.0",--富文本编辑器.适配vue3--暂时不填 -->
<!-- dependencies--生产环境插件,devDependencies--开发环境插件 -->
<!-- "@vueuse/core": "10.11.0",----基于 Vue.js 的实用工具库 -->
<!-- "file-saver": "2.0.5",---把文件流保存成各种文件-下载 -->
<!-- "jsencrypt": "3.3.2" ---用于加密 -->
<!-- "nprogress": "0.2.0",--用于页面跳转时头部显示进度条样式 -->
<!-- "cesium": "^1.123.1",---cesium地图功能 -->

 <!-- "pinia": "2.1.7",-----vue3的状态管理库 -->
<!-- 
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({
    users: [] // 初始状态是一个空数组
  }),
  getters: {
    // 一个 getter 函数，返回数组中的用户数量
    count: (state) => state.users.length
  },
  actions: {
    // 一个 action 函数，用于添加用户
    addUser(user) {
      this.users.push(user)
    }
  } -->

<!-- "qs": "^6.13.1",---把对象转换成字符串 -->
<!-- "vue-cropper": "1.1.1",---用于用户上传头像的剪切--暂时不填 -->
<!-- vuedraggable---拖拽功能 -->

<!-- 开发环境插件 -->

<!-- "unplugin-auto-import": "0.17.6",----自动导入模块，减少手动导入操作，提高开发效率。 -->
<!-- "unplugin-vue-setup-extend-plus": "1.0.1",-在<script setup>语法中直接定义组件的name属性 -->
<!-- "vite-plugin-compression": "0.5.1",---压缩文件,提高加载速度和用户体验 -->


#打包：
  1.npm run build
  2.pkg server.js -t node16-linux-x64 -o DataScreenServer

#git地址
  1.http://git.lingbtech.com:8090/nijiawen/SatelliteDigital

#线上系统地址
  1.http://121.229.107.155:3010

#接口文档
  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. **响应式适配**：控制面板根据屏幕宽度自动调整，小屏自动隐藏侧边面板

