数据采集任务配置管理前端

项目简介

这是一个基于Vue 3的数据采集任务配置管理前端项目，提供完整的用户界面来管理地域、网络类型、执行机、UE、逻辑环境、用例集、采集策略和采集任务等模块。

技术栈

• Vue 3.3.4
• Vue Router 4.2.4
• Pinia 2.1.6
• Element Plus 2.3.8
• Vite 4.4.5
• Axios 1.4.0
• Day.js

功能模块

1. 仪表盘

• 系统概览统计
• 最近任务列表
• 系统状态信息

2. 地域管理

• 片区、国家、省份、城市层级管理
• 支持层级联动选择
• 树形结构展示

3. 网络类型管理

• 四种网络类型：normal、弱网、拥塞、弱网+拥塞
• 基础CRUD操作

4. 执行机管理

• 执行机信息管理
• IP地址配置
• 地域关联
• 状态监控

5. UE管理

• UE基础信息管理
• UE ID和用途配置
• 网络类型关联

6. 逻辑环境管理

• 执行机和UE的组合管理
• 支持多UE关联
• 动态UE添加和移除

7. 用例集管理

• 用例集文件上传
• 自动解析文件名获取名称和版本
• 文件大小显示

8. 采集策略管理

• 策略配置管理
• 采集次数设置
• 逻辑环境关联

9. 采集任务管理

• 任务创建和配置
• 任务状态控制（启动、停止、暂停）
• 执行计划配置

快速开始

环境要求

• Node.js 16+
• npm 或 yarn

安装依赖

cd DataCollectFront
npm install

启动开发服务器

npm run dev

访问地址：http://localhost:3000

构建生产版本

npm run build

项目结构

src/
├── api/                    # API接口
│   └── region.js          # 地域管理API
├── components/            # 公共组件
├── layout/               # 布局组件
│   └── index.vue         # 主布局
├── router/               # 路由配置
│   └── index.js         # 路由定义
├── utils/                # 工具类
│   └── request.js       # HTTP请求工具
├── views/                # 页面组件
│   ├── dashboard/        # 仪表盘
│   ├── region/          # 地域管理
│   ├── network-type/    # 网络类型管理
│   ├── executor/        # 执行机管理
│   ├── ue/              # UE管理
│   ├── logic-environment/ # 逻辑环境管理
│   ├── test-case-set/   # 用例集管理
│   ├── collect-strategy/ # 采集策略管理
│   └── collect-task/    # 采集任务管理
├── App.vue              # 根组件
├── main.js              # 入口文件
└── style.css            # 全局样式

页面功能说明

仪表盘页面

• 显示各模块的数据统计
• 展示最近的任务信息
• 系统运行状态监控

地域管理页面

• 支持片区、国家、省份、城市的层级管理
• 提供新增、编辑、删除功能
• 支持按层级筛选和查询

网络类型管理页面

• 管理四种网络类型
• 支持启用/禁用状态切换
• 提供完整的CRUD操作

执行机管理页面

• 执行机信息管理
• 支持IP地址配置
• 关联地域信息
• 状态监控（在线、离线、故障）

UE管理页面

• UE基础信息管理
• 支持UE ID和用途配置
• 关联网络类型
• 状态管理

逻辑环境管理页面

• 执行机和UE的组合管理
• 支持多UE关联
• 提供UE的动态添加和移除功能
• 关联关系管理

用例集管理页面

• 支持zip文件上传
• 自动解析文件名格式（用例集名称_版本.zip）
• 文件大小显示
• 版本管理

采集策略管理页面

• 策略配置管理
• 采集次数设置
• 关联逻辑环境
• 状态管理

采集任务管理页面

• 任务创建和配置
• 支持Cron表达式配置执行计划
• 任务状态控制（启动、停止、暂停）
• 运行时间显示

开发说明

代码规范

• 使用Vue 3 Composition API
• 遵循Element Plus设计规范
• 统一的错误处理和消息提示
• 响应式设计，支持移动端

特殊功能

• 文件上传：支持用例集zip文件上传，自动解析文件名
• 地域联动：支持片区、国家、省份、城市的层级选择
• 逻辑环境：支持执行机和UE的多对多关联管理
• 任务控制：支持采集任务的启动、停止、暂停操作
• 状态管理：统一的状态显示和操作控制

API集成

• 使用Axios进行HTTP请求
• 统一的请求拦截器和响应拦截器
• 错误处理和消息提示
• 支持跨域请求

部署说明

开发环境

npm run dev

生产环境

npm run build
npm run preview

代理配置

开发环境下已配置API代理，指向后端服务：

// vite.config.js
proxy: {
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
  },
}

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88