🎯 战区态势指挥大屏

军事战区态势感知可视化大屏系统，支持世界地图态势总览、作战行动追踪、信息与电子战监控三页轮播展示。

技术栈

层级	技术	版本
前端框架	Vue 3 + Vite	3.5 / 8.1
图表引擎	ECharts	6.1
UI 组件	Element Plus	2.14
HTTP 客户端	Axios	1.18
后端框架	Spring Boot	2.7.18
ORM	MyBatis-Plus	3.5.3
连接池	Druid	1.2.18
数据库	MySQL	—
JDK	Java	11

项目结构

code/
├── README.md
├── 代码分析报告.md                    # 完整代码文件分析
├── dataview-backend/                  # Spring Boot 后端
│   ├── pom.xml
│   └── src/main/
│       ├── java/com/dataview/
│       │   ├── DataViewApplication.java        # 启动类
│       │   ├── common/Result.java              # 统一响应 {code, msg, data}
│       │   ├── config/CorsConfig.java          # CORS 跨域配置
│       │   ├── controller/
│       │   │   ├── MilitaryController.java     # GET /api/military/all 大屏数据
│       │   │   └── DataIngestController.java   # POST /api/data/* 外部数据接入
│       │   ├── entity/                         # 12 个实体类
│       │   ├── mapper/                         # 12 个 MyBatis Mapper
│       │   └── service/                        # 服务层
│       └── resources/
│           ├── application.yml                 # 数据库/端口/Druid 配置
│           └── init.sql                        # 建表 + 模拟数据
└── dataview-web/                      # Vue 3 前端
    ├── vite.config.js                  # Vite配置 + API代理
    ├── public/
    │   ├── china.json                  # 中国地图 GeoJSON (已废弃)
    │   └── world.json                  # 世界地图 GeoJSON (177国)
    └── src/
        ├── App.vue                     # 根组件
        ├── style.css                   # 全局暗色主题样式
        ├── api/dashboard.js            # axios API 封装
        ├── utils/format.js             # 数字格式化工具
        ├── views/screen/
        │   ├── DataScreen.vue          # 大屏主容器 (轮播/缩放/定时刷新)
        │   └── pages/
        │       ├── BattlefieldPage.vue  # 第1页: 世界战场态势
        │       ├── OperationsPage.vue   # 第2页: 作战行动与情报
        │       └── InfoWarPage.vue      # 第3页: 信息与电子战
        └── components/charts/
            ├── MapChart.vue            # 世界地图 (纬线+实时经纬度)
            ├── BarChart.vue            # 柱状图
            ├── LineChart.vue           # 折线图 (预留)
            ├── PieChart.vue            # 环形饼图
            ├── RadarChart.vue          # 雷达图 (支持双系列对比)
            ├── RankList.vue            # 排行榜 (预留)
            └── StatCard.vue            # 统计卡片 (预留)

数据流

init.sql (12张表, ~70条数据)
    ↓
MySQL dataview_db (localhost:3306, root/root)
    ↓ JDBC + MyBatis-Plus
MilitaryServiceImpl.getAll()  →  聚合为 page1/2/3
    ↓
GET /api/military/all  →  JSON {code, data: {page1, page2, page3}}
    ↓ Axios (Vite proxy /api → localhost:8080)
DataScreen.vue  →  3页轮播 (15秒切换, 30秒刷新)
    ↓
ECharts 渲染 (地图/雷达/柱状/饼图)

三页大屏

第1页：世界战场态势

左侧全高世界地图（含赤道/回归线/极圈纬线，鼠标悬停显示经纬度）
右侧竖排4面板：兵力状态 / 战力雷达 / 后勤资源 / 战损对比

第2页：作战行动与情报

作战任务列表 + 待执行任务队列
敌我战力对比雷达图
侦察情报 + 威胁告警

第3页：信息与电子战

通信网络状态（7条链路状态灯）
无人机群态势（汇总数字 + 类型饼图）
士气舆情监测

API 接口

大屏展示（只读）

方法	路径	说明
GET	`/api/military/all`	一次性返回所有大屏数据

数据接入（写入）

方法	路径	说明
POST	`/api/data/friendly-unit/batch`	批量更新我方部队
POST	`/api/data/enemy-unit/batch`	批量更新敌方部队
POST	`/api/data/battlefield-marker/batch`	批量更新地图标记
POST	`/api/data/logistics/batch`	批量更新后勤资源
POST	`/api/data/comms-status/batch`	批量更新通信状态
POST	`/api/data/drone-fleet/batch`	批量更新无人机群
POST	`/api/data/morale-stats/batch`	批量更新士气舆情
POST	`/api/data/casualty-stats`	追加战损记录
POST	`/api/data/mission`	新增作战任务
POST	`/api/data/intelligence`	新增侦察情报
POST	`/api/data/threat-alert`	新增威胁告警
PUT	`/api/data/mission/{id}/progress`	更新任务进度
PUT	`/api/data/threat-alert/{id}/acknowledge`	确认告警
PUT	`/api/data/logistics/{id}/level`	更新后勤存量
POST	`/api/data/sync-all`	一键全量同步

本地启动

前置条件

JDK 11+
Maven 3.9+
Node.js 18+
MySQL 8.0+ (root/root)

1. 初始化数据库

在 Navicat 或命令行执行 dataview-backend/src/main/resources/init.sql

2. 启动后端

cd dataview-backend
mvn org.springframework.boot:spring-boot-maven-plugin:2.7.18:run

3. 启动前端

cd dataview-web
npm install
npm run dev

4. 浏览器打开

http://localhost:3000

内网部署

前端打包: cd dataview-web && npm run build
复制静态文件: cp -r dist/* ../dataview-backend/src/main/resources/static/
后端打包: cd dataview-backend && mvn package -DskipTests
部署: java -jar target/dataview-backend-1.0.0.jar --spring.datasource.password=内网密码
访问: http://内网IP:8080

数据库表

表名	说明	数据量
friendly_unit	我方部队	7
enemy_unit	敌方部队	6
battlefield_markers	战场地图标记	10
logistics	后勤资源	7
casualty_stats	战损统计	14
missions	作战任务	5
mission_queue	任务队列	5
intelligence	侦察情报	5
threat_alerts	威胁告警	6
comms_status	通信网络状态	7
drone_fleet	无人机群	5
morale_stats	士气舆情	4