# Fire_agent_front **Repository Path**: WJLGraph/fire_agent_front ## Basic Information - **Project Name**: Fire_agent_front - **Description**: 在我毕业可视化系统基础上修改成agent项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-08-31 - **Last Updated**: 2026-10-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 焰哨 FlameSentry · 智慧火险预警与多智能体协作平台 —— 前端(fire_agent_front) > **当前版本**:v1.0.1(v1.0.0 基线之上新增 3D 数字孪生大屏 / 明暗双主题 / Agent SSE 流式进度与 HITL 审批 / 流式 RAG 问答 / 个人中心等,详见 [9. 版本记录](#9-版本记录)) > 本项目是「焰哨 FlameSentry · 智慧火险预警与多智能体协作平台」(现实使用名:**焰哨多Agent与可视化平台**)的前端部分,基于 **Vue 3 + Vite + OpenLayers + Three.js + ECharts + Element Plus** 构建。 > 配套后端:[fire_agent_back](https://gitee.com/wjl2004/fire_agent_back)(FastAPI + PostgreSQL/PostGIS + LangChain/LangGraph) > 完整的系统设计文档见后端仓库《整体实现.md》。 > **在线演示**:https://wjl2004.ffuf.cn/(手机上可能会把这个网址ban掉) or https://8.156.67.47/login > **演示账户**:test 123456 > **GitHub 仓库**:https://github.com/wjl-cong/fire_agent(⭐ 欢迎 Star) --- ## 目录 1. [项目简介](#1-项目简介) 2. [技术栈](#2-技术栈) 3. [项目结构](#3-项目结构) 4. [页面功能详解](#4-页面功能详解) 5. [环境要求](#5-环境要求) 6. [快速启动](#6-快速启动) 7. [构建与部署](#7-构建与部署) 8. [常见问题](#8-常见问题) 9. [版本记录](#9-版本记录) --- ## 1. 项目简介 前端为**前后端分离架构**的 SPA 应用,共 8 个页面路由,覆盖火险治理全流程: | 页面 | 路由 | 权限 | 核心能力 | | -------------- | ------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | | 登录/注册 | `/login` | 公开 | JWT 登录、注册即登录、redirect 回跳 | | 作战大屏 | `/dashboard` | 登录 | 历史火点/预测火险/边界/热力图/聚合/量测/导出 PNG + 4 图表;**2D/3D 地图一键切换**(Three.js 3D 数字孪生);**左侧 AI 火情识别侧栏**(视觉模型识别 + 历史回看 + MD 渲染 + 语音播报) | | 智能查询 | `/smart-query` | 登录 | 自然语言 → LLM 解析 → 摘要/表格/图表/地图四维联动,查询历史后端持久化(同文本去重);**🎤 语音输入自动查询 + 🔊 摘要播报** | | 知识库 | `/knowledge-base` | 登录 | 文档上传管理 + RAG 问答(**流式打字机 + 非流式兜底**)+ 引用来源展示;**🎤 语音提问 + 🔊 回答播报** | | Agent 协作中心 | `/agent-center` | 登录 | 5 Agent 流水线 **SSE 节点级流式进度 + HITL 人工审批(通过/编辑/驳回)+ 任务历史完整回放**;**🎤 语音下发任务 + 🔊 报告播报** | | 报告中心 | `/report-center` | 登录 | 报告列表/详情/类型筛选/**模型名徽标**/导出 Markdown/HTML/打印 PDF(删除为软删);**🔊 报告语音播报** | | 个人中心 | `/profile` | 登录 | 顶栏头像入口,修改邮箱/修改密码 | | 系统管理 | `/admin` | **仅 admin** | 系统总览/数据源/模型接入(视觉/语音模型 + 百炼免费额度目录 + AMD 实时目录 + 额度快照)/Agent 参数/日志/用户管理 | **设计特色**: - **Agent 风味贯穿全系统**:大屏显示 DataAgent 数据管线状态与 VisionAgent 火情识别侧栏、查询页展示 QueryAgent 解析过程、知识库展示 RagAgent 检索过程、报告中心标识 ReportAgent 生成来源; - **3D 数字孪生大屏(v1.0.1)**:`components/Map3D.vue`(Three.js,sc-datav 风格)——州市面片挤出 + 侧面扫光 shader + 贝塞尔飞线 + 火点屏幕空间聚类柱状图(40px 贪心聚类,与 2D OL Cluster 缩放行为镜像联动),与 2D OpenLayers 一键切换; - **SSE 流式 Agent + HITL 人机协同(v1.0.1)**:Agent 执行全程 `EventSource` 节点级流式推送(断线自动降级拉详情),报告草稿经人工「通过/编辑/驳回」审批后才定稿落报告中心; - **明暗双主题(v1.0.1)**:`stores/theme.js` + `style/gis-theme.css` CSS 变量 token 全站自动适配,玻璃卡化风格 + sc-datav 英文角标; - **全链路语音交互**:`utils/speech.js` 统一封装录音(Web Audio API 采集 PCM → 纯前端编码 WAV)与播报(TTS 音频流播放),五个 AI 页面 🎤 输入自动执行、🔊 结果一键播报; - **降级兜底**:大屏后端 API 失败自动降级本地 JSON,核心页面永不白屏; - **统一交互**:左侧面板"点击标题栏展开/折叠"在查询/知识库/Agent/报告/火情识别五处统一,删除按钮常显 + `@click.stop` 防误触; - **等级同源**:5 级火险颜色/文案统一由 `utils/riskLevel.js` 管理,与后端分档完全一致。 --- ## 2. 技术栈 | 类别 | 技术 | 版本 | 用途 | | --------- | ------------------------ | ------- | --------------------------------------------------- | | 框架 | Vue 3(Composition API) | ^3.5.13 | 全部页面使用`