# web_fujian

**Repository Path**: fujian-lab-develop/fuzhou

## Basic Information

- **Project Name**: web_fujian
- **Description**: 前端代码，实验室建设
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-16
- **Last Updated**: 2026-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 福州交通监控系统
## 现场部署位置
dev/fujian/frontend/static
## 接口请求地址配置
dist\config.js

```
window.APP_CONFIG = {
  WS_URL: 'ws://10.168.1.100:55557/ws', // WebSocket连接URL
  API_BASE_URL: 'http://10.168.1.100:55556', // 后端API基础URL
  ROBOT_API_BASE_URL: 'http://10.168.1.100:55557' // 机器人API基础URL
}
```

## 项目简介
本项目是一个基于Vue.js和Three.js开发的交通监控系统，用于实时监控交通流量、车辆识别和交通事件分析。
## 主要功能模块

### 1. 场景监控 (scene)
- 基于Three.js的3D场景展示
- 实时交通监控和数据可视化
- 设备状态监控

### 2. 目标检测 (target)
- 车辆实时检测和跟踪
- 基于WebRTC的视频流播放
- 目标特征分析

### 3. 事件管理 (event)
- 交通事件记录和展示
- 事件类型筛选和统计
- 事件详情查看

### 4. 数据分析 (analysis)
- 交通流量统计和分析
- 历史数据趋势展示
- 数据报表生成

## 技术栈
- **前端框架**: Vue.js 3
- **构建工具**: Vite
- **3D渲染**: Three.js
- **数据可视化**: ECharts
- **实时通信**: WebRTC
- **路由管理**: Vue Router
- **状态管理**: 自定义Store
- **AI模型**: ONNX Runtime Web
## 目录结构
├── .env                  # 环境变量配置文件
├── .gitignore            # Git忽略文件配置
├── .vscode/              # VSCode编辑器配置目录
│   └── extensions.json   # 推荐的VSCode扩展列表
├── README.md             # 项目说明文档（当前文件）
├── index.html            # 应用程序入口HTML文件
├── package-lock.json     # npm依赖版本锁定文件
├── package.json          # 项目配置和依赖声明
├── public/               # 静态资源目录（不会被构建工具处理）
│   ├── aiModels/         # AI模型文件目录
│   │   ├── best.onnx     # 通用目标检测模型
│   │   ├── car_detection.onnx  # 车辆检测专用模型
│   │   └── yolov8n.onnx  # YOLOv8-nano模型（轻量级目标检测）
│   ├── draco/            # 3D模型压缩库Draco
│   │   ├── README.md     # Draco库说明
│   │   ├── draco_decoder.js   # Draco解码器JavaScript实现
│   │   ├── draco_decoder.wasm # Draco解码器WebAssembly实现
│   │   ├── draco_encoder.js   # Draco编码器JavaScript实现
│   │   ├── draco_wasm_wrapper.js # WebAssembly包装器
│   │   └── gltf/         # GLTF格式支持文件
│   ├── models/           # 3D模型文件目录
│   │   ├── car.glb       # 车辆3D模型
│   │   ├── car_ft.glb    # 车辆3D模型（前置视图）
│   │   └── fzv1.8.glb    # 场景3D模型
│   └── vite.svg          # Vite默认图标
├── src/                  # 源代码目录
│   ├── App.vue           # 应用程序根组件
│   ├── assets/           # 资源文件目录
│   │   ├── fonts/        # 字体文件
│   │   ├── hdr/          # HDR图像文件（用于3D场景光照）
│   │   ├── images/       # 图像资源
│   │   ├── svg/          # SVG图标和图形
│   │   ├── tif/          # TIFF格式图像
│   │   ├── utils/        # 资源处理工具
│   │   └── weixing.png   # 卫星图像示例
│   ├── components/       # 公共组件目录
│   │   ├── EChartsComponent.vue # ECharts图表组件
│   │   ├── TargetVideoPlayer.vue # 目标检测视频播放器
│   │   ├── ThreeScene.vue # Three.js 3D场景组件
│   │   ├── WebRTCVideoPlayer.vue # WebRTC视频播放器
│   │   └── title_two/    # 二级标题相关组件
│   ├── layout/           # 布局组件目录
│   │   └── index.vue     # 主布局组件
│   ├── main.js           # 应用程序入口文件
│   ├── router/           # 路由配置目录
│   │   └── index.js      # 路由定义和配置
│   ├── store/            # 状态管理目录
│   │   └── trafficStore.js # 交通数据状态管理
│   ├── style.css         # 全局样式文件
│   ├── test.html         # 测试用HTML文件
│   ├── utils/            # 工具函数目录
│   │   ├── api.js        # API接口封装
│   │   └── threejs/      # Three.js相关工具函数
│   └── views/            # 页面视图目录
│       ├── analysis/     # 数据分析页面
│       ├── event/        # 事件管理页面
│       ├── scene/        # 场景监控页面
│       └── target/       # 目标检测页面
└── vite.config.js        # Vite构建配置文件

## 安装Node.js

### Windows系统安装Node.js

1. **下载Node.js安装包**
   - 访问 [Node.js官方网站](https://nodejs.org/)
   - 推荐下载LTS（长期支持）版本，例如Node.js 18.x或Node.js 20.x
   - 点击下载适合Windows的.msi安装包

2. **安装Node.js**
   - 双击下载的.msi文件开始安装
   - 在安装向导中，建议勾选"Add Node.js to PATH"选项，以便在命令行中直接使用Node.js和npm
   - 选择默认安装路径或自定义路径
   - 按照向导完成安装

3. **验证安装**
   - 打开命令提示符（CMD）或PowerShell
   - 输入以下命令检查Node.js版本：
     ```bash
     node -v
     ```
   - 输入以下命令检查npm版本：
     ```bash
     npm -v
     ```
   - 如果能正确显示版本号，则安装成功

### macOS系统安装Node.js

1. **使用官方安装包**
   - 访问 [Node.js官方网站](https://nodejs.org/)
   - 下载macOS的.pkg安装包
   - 双击安装包并按照向导完成安装

2. **或使用Homebrew安装**（推荐）
   - 如果已安装Homebrew，在终端中执行：
     ```bash
     brew install node
     ```

3. **验证安装**
   - 打开终端
   - 输入以下命令检查Node.js版本：
     ```bash
     node -v
     ```
   - 输入以下命令检查npm版本：
     ```bash
     npm -v
     ```

### Linux系统安装Node.js

1. **使用nvm（Node Version Manager）安装**（推荐）
   - 安装nvm：
     ```bash
     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
     # 或使用wget
     wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
     ```
   - 重新打开终端或执行：
     ```bash
     source ~/.bashrc  # 或 ~/.zshrc，根据你的shell配置
     ```
   - 安装最新的LTS版本：
     ```bash
     nvm install --lts
     ```
   - 设置默认版本：
     ```bash
     nvm use --lts
     ```

2. **验证安装**
   - 输入以下命令检查Node.js版本：
     ```bash
     node -v
     ```
   - 输入以下命令检查npm版本：
     ```bash
     npm -v
     ```

### 配置npm镜像源（可选，推荐国内用户）

由于网络原因，国内用户可配置npm镜像源以提高包下载速度：

```bash
# 使用淘宝npm镜像
npm config set registry https://registry.npmmirror.com/

# 或者使用腾讯npm镜像
npm config set registry http://mirrors.cloud.tencent.com/npm/
## 开发说明

### 安装依赖

```bash
npm install
```

### 开发环境运行
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```