# ztva-web-v3 **Repository Path**: newpc/ztva-web-v3 ## Basic Information - **Project Name**: ztva-web-v3 - **Description**: 视频分析算法服务 前端工程 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-26 - **Last Updated**: 2026-07-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ZTVA Web V3 基于 Vue 3 + TypeScript + Vite 构建的智能视频分析管理系统前端项目。 ## 技术栈 - **框架**: Vue 3.5 + TypeScript 6.0 - **构建工具**: Vite 8.0 - **UI 组件库**: Element Plus 2.14 - **状态管理**: Pinia 3.0 - **路由**: Vue Router 4 - **HTTP 客户端**: Axios 1.16 - **代码编辑器**: CodeMirror 6 - **视频播放器**: EasyPlayer、SeiPlayer（自研 H265/SEI） - **三维渲染**: Three.js（SR 局部感知）+ CesiumJS（三维地球） - **样式**: Sass - **代码规范**: ESLint ## 核心功能模块 ### 算法管理 - 事件模板配置 - 算法管理 - 模型管理 ### 字典管理 - 事件字典 - 标签字典 - 对象字典 - 分割字典 ### 文件管理 - 事件统计 - 媒体菜单 - 文件管理 - 上传事件 - 视频记录 ### 任务管理 - 实时任务 - 三维感知驾驶舱（实时 snapshot/WebSocket delta，支持模拟回放降级） - 智能采集（长期地图、目标测距、服务端特征相似度、空间轨迹与时间轴回放） - 图像任务 - 视频任务 - 验证任务 - 流列表 - MI7 列表 - 地图显示 ### 系统管理 - 用户管理 - 系统配置 - 接口管理 - 服务器管理 - 审计日志 - API 日志 - 事件详情管理 - 对象详情管理 - 分割区域详情管理 - GPS 轨迹管理 ## 开发环境 ### 环境要求 - Node.js >= 18.0.0 - Yarn 或 npm ### 安装依赖 ```bash yarn install # 或 npm install ``` ### 配置后端地址 编辑 `public/static/setting.js` 文件，配置后端服务地址： ```javascript // 方式一：直接配置 baseUrl window.baseUrl = 'http://127.0.0.1:13100' // 方式二：配置 IP 和端口 var ip = '127.0.0.1' var port = 13100 ``` 可从 `public/static/setting.example.js` 复制本地配置。浏览器地图请求统一经 CosmoMap 网关，运行时文件只配置网关地址和可选客户端 key，不要提交生产 key： ```javascript window.mapGatewayUrl = 'http://223.76.134.35:18330' window.mapClientKey = '' window.mediaBaseUrl = '' // 仅用于解析智能采集证据图的相对 thumbnailPath window.tiandituLayer = 'img' // img 或 vec window.tiandituAnnotation = true window.cesiumTerrainUrl = '' // 仅填写已授权 terrain URL window.cesiumTilesetUrl = '' // 仅填写已授权 3D Tiles URL window.cesiumTilesetStyle = 'white' // white 白模；original 保留原材质 ``` 管理后台的实时任务坐标弹窗、地图展示、驾驶舱与智能采集统一通过 `mapGatewayUrl` 加载底图。实时任务页面默认使用矢量+注记，可从标题栏切换为影像+注记，并统一作用于列表位置地图、视频地图侧栏及设备坐标弹窗；坐标弹窗按设备点固定缩放，不按完整轨迹范围缩放。实时任务坐标弹窗和地图展示支持 2D Leaflet / 3D Cesium 切换；3D 默认请求可用地形并允许关闭。地图展示页将“查询”“刷新”“全览”分离：图层和点位显隐不重置用户视角，刷新保留已加载告警与轨迹，设备详情可直接查看告警或轨迹，轨迹选择后可直接播放。实时任务列表会为“分析中”且坐标有效的设备展示二维小地图；两处小地图及已打开坐标弹窗的标记都会随列表坐标刷新并重新居中。网关未配置时驾驶舱使用随 Cesium 发布的 Natural Earth 低级别影像作为全球概览，业务地图则显示真实未配置/失败状态；非空 `cesiumTerrainUrl` 优先作为部署方授权地形源。地图栅格底图不能作为三维建筑或道路几何来源；建筑白模必须由已授权 3D Tiles 或后端输出的建筑 footprint/高度生成。 ### 启动开发服务器 ```bash yarn dev # 或 npm run dev ``` 开发服务器将在 `http://localhost:6555` 启动。 开发服务器对源码模块发送 `Cache-Control: no-store`，避免频繁热更新后浏览器用损坏的 304 缓存阻断动态路由。若浏览器已经出现 `ERR_CACHE_READ_FAILURE`，先等待 Vite 自动重启完成，再执行一次强制刷新。 Cesium 的 `Assets/ThirdParty/Widgets/Workers` 发布到带依赖版本号的静态目录，避免浏览器复用旧版本 Worker。升级 `cesium` 依赖时需同步更新 `src/utils/cesium-runtime.ts` 中的目录版本。 ### 构建生产版本 ```bash yarn build # 或 npm run build ``` ### 预览生产构建 ```bash yarn preview # 或 npm run preview ``` ### 代码检查 ```bash yarn lint # 或 npm run lint ``` ### 类型检查 ```bash yarn type-check # 或 npm run type-check ``` ## 项目结构 ``` ztva-web-v3/ ├── public/ # 静态资源 │ ├── static/ │ │ ├── easyplayer/ # 视频播放器资源 │ │ └── setting.js # 运行时配置文件 │ ├── favicon.svg │ └── icons.svg ├── tools/blender/ # Blender 5.2 三维资产离线生产与校验 ├── src/ │ ├── api/ # API 接口 │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ │ ├── AdvancedSearchDrawer/ # 高级搜索抽屉 │ │ ├── AlertPanel/ # 告警面板 │ │ ├── DrawerDialog/ # 抽屉对话框 │ │ ├── EasyPlayer6/ # 兼容视频播放器 │ │ ├── SeiPlayer/ # 自研 H265/SEI 播放器 │ │ ├── ImageViewer/ # 图片查看器 │ │ ├── JsonPreview/ # JSON 预览 │ │ ├── MapLocationDialog/ # 地图位置对话框 │ │ ├── PageTitle/ # 页面标题 │ │ ├── Pagination/ # 分页组件 │ │ ├── TableActions/ # 表格操作 │ │ ├── TableEmptyState/ # 表格空状态 │ │ └── VideoPlayerDialog/ # 视频播放对话框 │ ├── composables/ # 组合式函数 │ ├── filters/ # 过滤器 │ ├── layout/ # 布局组件 │ ├── router/ # 路由配置 │ ├── stores/ # 状态管理 │ ├── styles/ # 样式文件 │ ├── types/ # 类型定义 │ ├── utils/ # 工具函数 │ ├── views/ # 页面视图 │ │ └── task/ │ │ ├── spatial-cockpit/ # 三维感知驾驶舱 │ │ └── spatial-collection/ # 智能采集回放 │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── .gitignore ├── eslint.config.js # ESLint 配置 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── tsconfig.json # TypeScript 配置 └── vite.config.ts # Vite 配置 ``` ## 文档索引 - [模块索引](docs/MODULE_INDEX.md) - [系统配置模块](src/views/system/ztva-config/MODULE.md) - [Blender 5.2 三维资产流水线](tools/blender/README.md) ## 开发指南 ### 代码规范 - 使用 ESLint 进行代码检查 - 遵循 Vue 3 Composition API 最佳实践 - 使用 TypeScript 类型注解 - 组件使用 `