# wang_an

**Repository Path**: tangx0809/wang_an

## Basic Information

- **Project Name**: wang_an
- **Description**: 2026年网安小项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-25
- **Last Updated**: 2026-01-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 新媒体态势感知大屏系统

## 项目简介

本项目是一个"新媒体态势感知大屏"可视化系统，用于监控和分析新媒体平台上的舆情动态、风险预警、人员管控等关键信息。系统采用前后端分离架构，后端提供数据接口服务，前端负责大屏可视化展示和交互。

## 技术栈

### 后端
- **Java 8** - 开发语言
- **Spring Boot 2.7.6** - 后端框架
- **Maven** - 项目构建工具
- **Lombok** - 简化 Java 代码

### 前端
- **Vue 3** - 前端框架
- **Vite 7.2.4** - 构建工具
- **ECharts 6.0.0** - 数据可视化图表库
- **DataV Vue3** - 数据可视化组件库
- **Element Plus 2.13.0** - UI 组件库
- **Axios 1.13.2** - HTTP 客户端
- **Sass** - CSS 预处理器

### 资源与部署
- **OSS/CDN** - 静态资源存储（GeoJSON、视频、图片等）

## 项目结构

```
visualization-backend/
├── src/
│   ├── main/
│   │   ├── java/com/campus/visualizationbackend/
│   │   │   ├── config/              # 配置类
│   │   │   │   └── VideoResourceConfig.java    # 视频资源映射配置
│   │   │   ├── controller/          # 控制器层
│   │   │   │   └── DashboardController.java   # 大屏数据接口
│   │   │   ├── model/               # 数据模型
│   │   │   │   ├── ChartData.java
│   │   │   │   ├── PoliceAccount.java
│   │   │   │   ├── Result.java
│   │   │   │   ├── RiskData.java
│   │   │   │   └── UnitedPersonnel.java
│   │   │   ├── service/             # 服务层
│   │   │   │   └── DashboardService.java      # 数据服务
│   │   │   └── VisualizationBackendApplication.java  # 启动类
│   │   └── resources/
│   │       ├── application.properties        # 应用配置
│   │       └── static/
│   │           └── index.html                 # 静态页面
│   └── test/                         # 测试代码
├── visualization-frontend/          # 前端项目
│   ├── src/
│   │   ├── assets/                  # 静态资源
│   │   ├── components/              # Vue 组件
│   │   │   ├── charts/              # 图表组件
│   │   │   ├── columns/             # 列布局组件
│   │   │   ├── layout/              # 布局组件
│   │   │   ├── modals/              # 弹窗组件
│   │   │   ├── panels/              # 面板组件
│   │   │   └── widgets/             # 小部件组件
│   │   ├── views/                    # 页面视图
│   │   │   └── Dashboard.vue       # 主大屏页面
│   │   ├── main.js                   # 入口文件
│   │   └── global.css               # 全局样式
│   ├── public/                       # 公共资源
│   ├── package.json                  # 前端依赖配置
│   ├── vite.config.js               # Vite 配置
│   └── README.md                     # 前端说明
├── pom.xml                           # Maven 配置
├── package.json                      # 根目录依赖（部分共享）
├── start-backend.bat                 # 后端启动脚本
├── jiaxing.geojson                   # 嘉兴地区 GeoJSON 地图数据
├── development-report.md             # 开发报告
└── README.md                         # 项目说明（本文件）
```

## 功能特性

### 大屏展示模块

#### 左侧列
- **网络人士分类分组** - 饼图展示各平台人员分布，支持平台筛选
- **重点人员敏感帖文发文数量** - 柱状图展示月度趋势
- **重点群体分布** - 饼图展示重点群体分类，支持自定义标签

#### 中间列
- **流程按钮** - 领导批示、流转处置、对外预警快捷入口
- **地图模块** - 基于 ECharts 的嘉兴地区地图，支持视频预览和播放
- **风险预警处置实时监控** - 滚动列表展示风险事件

#### 右侧列
- **舆情风险** - 涉警/非涉警舆情热度排名，无缝滚动展示
- **公安新媒体矩阵** - 展示"嘉警小未"AI 形象及信息
- **网络团结人士动态** - 红色领航活动数据展示
- **新就业群体发帖情况** - 按群体分类展示发帖信息，支持筛选

### 后端 API 接口

所有接口统一前缀：`/api/dashboard`

| 接口路径 | 方法 | 说明 | 返回类型 |
|---------|------|------|---------|
| `/personnel-classification` | GET | 网络人士分类数据 | `Result<List<ChartData>>` |
| `/key-groups` | GET | 重点群体分布数据 | `Result<List<ChartData>>` |
| `/risk-warnings` | GET | 风险预警列表 | `Result<List<RiskData>>` |
| `/opinion-heat` | GET | 舆情热度数据 | `Result<Map<String, List<String>>>` |
| `/police-accounts` | GET | 公安新媒体账号矩阵 | `Result<List<PoliceAccount>>` |
| `/united-personnel` | GET | 网络团结人士数据 | `Result<List<UnitedPersonnel>>` |
| `/key-personnel` | GET | 重点人员管控数据 | `Result<Map<String, Object>>` |

### 统一响应格式

```json
{
  "code": 200,
  "msg": "success",
  "data": {}
}
```

### 资源映射

- **视频资源**：`/videos/**` 映射到项目根目录和 `videos/` 子目录，仅允许 `.mp4` 格式

## 安装与运行

### 环境要求

- **JDK 1.8+**
- **Maven 3.6+**
- **Node.js 16+**
- **npm** 或 **yarn**

### 后端启动

1. **使用 Maven 打包**
   ```bash
   mvn clean package
   ```

2. **运行 JAR 文件**
   ```bash
   java -jar target/visualization-backend-0.0.1-SNAPSHOT.jar
   ```
   或使用提供的启动脚本（Windows）：
   ```bash
   start-backend.bat
   ```

3. **访问后端**
   - 默认端口：`8080`
   - 访问地址：`http://localhost:8080`

### 前端启动

1. **进入前端目录**
   ```bash
   cd visualization-frontend
   ```

2. **安装依赖**
   ```bash
   npm install
   ```

3. **开发模式运行**
   ```bash
   npm run dev
   ```
   访问地址：`http://localhost:5173`

4. **生产构建**
   ```bash
   npm run build
   ```
   构建产物在 `dist/` 目录

5. **预览生产构建**
   ```bash
   npm run preview
   ```

## 配置说明

### 后端配置

**application.properties**
```properties
# 应用服务 WEB 访问端口
server.port=8080
```

### 前端配置

**vite.config.js**
- 开发环境：使用本地路径 `/`
- 生产环境：使用 CDN Base URL（OSS）

**环境变量**（`.env.production`）
- 可配置生产环境的 API 地址等

### CORS 配置

后端已配置跨域支持，允许所有来源访问（`@CrossOrigin(origins = "*")`）。**生产环境建议限制具体域名**。

## 数据说明

### 当前数据状态

⚠️ **重要提示**：当前系统使用 **Mock 数据**（示例数据），前后端尚未完全对接。

- 后端 `DashboardService` 提供示例数据
- 前端 `Dashboard.vue` 中的 `loadData()` 方法使用本地 Mock 数据
- 数据源未接入真实数据库或外部服务

### 数据模型

- **ChartData** - 图表数据（名称、数值）
- **RiskData** - 风险数据（人员、关键词、事件、平台、浏览量、热度）
- **PoliceAccount** - 公安账号（名称、粉丝数、互动数、链接）
- **UnitedPersonnel** - 团结人士数据（标签、单位、数值、子标签、详细数值）
- **Result<T>** - 统一响应封装（code、msg、data）

## 开发建议

### 后续优化方向

1. **数据对接**
   - 接入真实数据库（MySQL/PostgreSQL）
   - 集成外部数据服务 API
   - 实现前后端数据接口完整对接

2. **安全性**
   - 收紧 CORS 策略，限制允许的域名
   - 添加身份认证和权限控制
   - 对敏感接口进行鉴权

3. **功能增强**
   - 实现数据实时更新（WebSocket）
   - 添加数据导出功能
   - 支持多主题切换

4. **测试覆盖**
   - 添加单元测试
   - 集成测试
   - 端到端测试（E2E）

5. **资源管理**
   - 将外部 GeoJSON/视频资源本地化
   - 提供资源加载失败降级策略
   - 优化资源加载性能

## 注意事项

1. **编码问题**：项目中存在编码混用情况，可能导致部分注释显示异常
2. **依赖外部资源**：地图和视频依赖 OSS/CDN，离线或跨域失败会影响功能
3. **数据源**：当前所有数据为示例数据，需要替换为真实数据源
4. **CORS 安全**：生产环境需要限制跨域访问的域名白名单

## 许可证

本项目为内部项目，未经授权不得外传。

## 联系方式

如有问题或建议，请联系项目维护团队。

---

**最后更新**：2026-01-25