sq_manage

sq_manage

申勤物业数字化平台 — 面向物业项目全生命周期的管理后台：合同到期预警、项目台账、市场部（续标 / 招标监测 / 标书 / 开标中标），集成外部「空间一张图」iframe，并在台账/建项中使用 Mapbox 面要素编辑。侧栏按「首页 / 项目中心 / 市场部 / 其他部门」分组（未落地模块可占位）。

---

技术栈

分类	技术	版本
框架	Vue 3	^3.4
语言	TypeScript	^5.3
构建	Vite	^5.1
路由	Vue Router	^4.3
状态管理	Pinia	^2.1
UI 组件库	Element Plus	^2.6
网络请求	Axios	^1.6
地图	Mapbox GL	^3.27
地图标注	Mapbox GL Draw	^1.5
地理空间分析	@turf/turf	^7.3
图表	ECharts	^5.5
工具库	moment.js / qs / markdown-it / vue-clipboard3 / wellknown	—

---

环境要求

• Node.js >= 18.0
• npm >= 9.0

---

快速开始

安装依赖

npm install

开发模式

npm run dev

开发服务器启动后访问 http://localhost:5173（Vite 默认端口）。所有 /api 前缀的请求会被代理到后端服务。

生产构建

npm run build

执行 vue-tsc 类型检查后，Vite 将项目编译到 dist/ 目录。

预览构建产物

npm run preview

---

配置说明

运行时配置（关键）

项目使用运行时注入的方式加载配置，避免构建时硬编码。配置文件位于 public/static/config/config.js，会在 HTML 入口处被加载，并将配置挂载到 window.CONFIG。

前端通过 src/utils/config.ts 读取 window.CONFIG，支持读取失败时的默认值兜底。

window.CONFIG 包含以下字段：

字段	说明
OAUTH_URL	认证中心服务地址（登录/改密等）
DMS_URL	文档管理服务地址（内容 CRUD、文件上传）
SQ_URL	申勤业务服务地址（统计、招标生成等）
ONEMAP_URL	一张图服务地址
FILEPATH	文件访问基路径
COLUMNIDARR	DMS 栏目 ID 数组
MODELIDARR	DMS 模型 ID 数组
TASKLIST	任务配置列表
MAPBOX_ACCESS_TOKEN	Mapbox 访问令牌
MAPBOX_TILES_NORMAL	普通地图瓦片 URL
MAPBOX_TILES_BLUE	蓝色风格地图瓦片 URL
MAPBOX_TILES_YXT	杨浦特地图瓦片 URL

部署注意：上线前必须修改 public/static/config/config.js 中的服务地址与 Mapbox Token 为实际生产值。

Vite 开发代理

vite.config.ts 中配置了开发代理：

/api → http://121.43.55.7:10081（路径前缀 /api 会被去掉）

如需代理到本地或其他后端，修改 server.proxy 中的 target 即可。

---

目录结构

下列为当前源码树（可读性整理后）。AGENTS.md 与 harness/ 默认不入库（见 .gitignore），仅本地 Agent 工作流使用。

sq_manage/
├── index.html                          # HTML 入口；注入 public 配置与 Vite 入口
├── package.json                        # 依赖与脚本（dev / build / preview）
├── package-lock.json                   # 依赖锁定
├── vite.config.ts                      # ⭐ Vite：别名 @、base、/api 开发代理
├── tsconfig.json                       # 应用 TS 配置
├── tsconfig.node.json                  # Node/Vite 侧 TS 配置
├── README.md                           # 本说明
├── API进度查询接口对接文档.md           # AI 标书生成进度接口说明
├── .gitignore                          # Git 忽略规则（含 AGENTS.md、harness/、系统操作流程.md）
│
├── public/                             # 不经打包的静态资源
│   ├── favicon.ico / favicon2.ico
│   └── static/
│       ├── config/config.js            # ⭐ 运行时配置（OAUTH/DMS/SQ、栏目 ID、Mapbox）
│       ├── image/logo.png              # 品牌 Logo
│       ├── data/                       # 静态示例数据（sq.md、index.html 等）
│       └── plugins/createAuth.js       # 登录加密依赖（encrypt 调用）
│
├── src/
│   ├── main.ts                         # 应用启动：Pinia、Router、Element Plus
│   ├── App.vue                         # 根组件（router-view）
│   ├── env.d.ts                        # Vite / Vue SFC 环境类型
│   │
│   ├── api/
│   │   └── common.ts                   # ⭐ 全部后端接口唯一出口（OAUTH / DMS / SQ）
│   │
│   ├── constants/
│   │   ├── dmsColumns.ts               # COLUMN / MODEL 语义别名（读 CONFIG 数组下标）
│   │   └── renewalSteps.ts             # 投续标指挥页 7 步静态定义
│   │
│   ├── composables/                    # 可复用业务逻辑（非 UI）
│   │   ├── useAdminArea.ts             # 区划 / 在管项目树加载（列表页共用）
│   │   ├── useNavigateToRenewalDetail.ts # 写 sessionStorage 并跳转指挥页
│   │   ├── renewal/
│   │   │   ├── useRenewalStage.ts      # 指挥页阶段 / 进度回写
│   │   │   ├── useRenewalTasks.ts      # 任务清单门禁与文案
│   │   │   ├── useBidGenerate.ts       # AI 标书生成 / 进度 / 下载门禁
│   │   │   └── useRenewalUploads.ts    # 指挥页四类文件上传
│   │   └── tenderpool/
│   │       └── useMonitorAddProject.ts # 招标监测「投标/续标」创建投续标
│   │
│   ├── components/
│   │   ├── bidResult/                  # 开标与中标相关
│   │   │   ├── addContent.vue          # 中标登记弹窗（编排层）
│   │   │   ├── addContent/
│   │   │   │   └── AddContentForm.vue  # 中标登记表单字段区
│   │   │   ├── addProject.vue          # 中标后新建在管项目（编排层）
│   │   │   ├── WonBidProjectForm.vue   # 建项表单字段
│   │   │   ├── ProjectMapSection.vue   # 建项地图 / 面要素区
│   │   │   ├── list/
│   │   │   │   ├── BidResultTabs.vue   # Tab +「中标登记」按钮
│   │   │   │   ├── BidMonitorList.vue  # 监控中投标列表
│   │   │   │   └── BidResultHistoryList.vue # 结果/历史列表
│   │   │   └── dialogs/
│   │   │       ├── DialogFileUpload.vue    # 文件上传对话框壳
│   │   │       └── DialogPushConfirm.vue   # 推送确认对话框
│   │   ├── ledger/                     # 项目台账详情拆分
│   │   │   ├── ProjectDetailHeader.vue # 详情头栏
│   │   │   ├── ProjectDetailInfo.vue   # 合同/字段信息区
│   │   │   └── ProjectDetailMap.vue    # 详情地图区
│   │   ├── map/
│   │   │   ├── MapDraw.vue             # Mapbox 绘制（建项/面要素）
│   │   │   └── ProMap.vue              # 项目详情等场景的地图展示
│   │   ├── person/
│   │   │   └── Table.vue               # 人员信息表格（地图弹层等）
│   │   ├── renewal/                    # 续标 / 续签列表与指挥页 UI
│   │   │   ├── BidRenewal.vue          # 投续标列表（编排层）
│   │   │   ├── Renew.vue               # 续签标列表
│   │   │   ├── list/                   # 投续标列表子组件
│   │   │   │   ├── BidRenewalFilters.vue
│   │   │   │   ├── BidRenewalCardList.vue
│   │   │   │   └── BidRenewalAddDialog.vue
│   │   │   ├── expire/                 # 投续标指挥页展示组件
│   │   │   │   ├── RenewalHeaderBar.vue
│   │   │   │   ├── RenewalStepper.vue
│   │   │   │   ├── TaskChecklistPanel.vue
│   │   │   │   ├── ProjectInfoSide.vue
│   │   │   │   ├── ZbInfoSide.vue
│   │   │   │   └── dialogs/            # 指挥页各类 Dialog 壳
│   │   │   │       ├── DialogZbMatch.vue      # 招标匹配/公告
│   │   │   │       ├── DialogKbjk.vue         # 开标监控登记
│   │   │   │       ├── DialogBidSubmit.vue    # 投标提交登记
│   │   │   │       ├── DialogBidFiles.vue     # 标书相关文件
│   │   │   │       └── DialogFinishBid.vue    # 中标确认
│   │   │   └── xq/                     # 续签详情 UI
│   │   │       ├── XqHeaderBar.vue
│   │   │       ├── XqMainPanel.vue
│   │   │       ├── XqSidePanel.vue
│   │   │       └── dialogs/DialogXqRegister.vue
│   │   ├── tenderpool/                 # 招标监测
│   │   │   ├── Monitor.vue             # 监测 Tab（编排层）
│   │   │   ├── Intention.vue           # 意向 Tab
│   │   │   ├── Notice.vue              # 公告相关（备用/未强依赖）
│   │   │   └── monitor/
│   │   │       ├── MonitorFilters.vue
│   │   │       ├── MonitorCardList.vue
│   │   │       └── MonitorDetailDrawer.vue
│   │   └── view/
│   │       └── GeoJsonEditor.vue       # GeoJSON 可视化编辑（jsoneditor）
│   │
│   ├── layouts/
│   │   └── MainLayout.vue              # 主壳：分组侧栏（首页/项目中心/市场部等）+ 顶栏 + 内容区
│   │
│   ├── router/
│   │   └── index.ts                    # ⭐ Hash 路由表
│   │
│   ├── stores/
│   │   └── user.ts                     # Pinia：登录态 / token / 登出
│   │
│   ├── styles/
│   │   ├── variables.css               # 主题 CSS 变量（teal 主色等）
│   │   └── element-theme-green.css     # Element Plus 主题覆盖
│   │
│   ├── types/
│   │   ├── window.d.ts                 # window.CONFIG 等全局类型
│   │   ├── md.d.ts                     # markdown 资源声明
│   │   └── renewal.ts                  # 续标步骤 / 任务 / 表单松散类型
│   │
│   ├── utils/
│   │   ├── config.ts                   # 读取 window.CONFIG（含兜底）
│   │   ├── request.ts                  # Axios + token 拦截 / 无效 token 踢登录
│   │   ├── encrypt.ts                  # 登录密码加密（依赖 createAuth）
│   │   ├── util.ts                     # 金额/UUID/下载/GeoJSON→WKT、项目标书→参考标书路径校验等
│   │   ├── displayUser.ts              # 登录名 → 展示名映射
│   │   ├── renewalMath.ts              # 合同剩余天数 / 档位样式计算
│   │   └── tree.ts                     # 在管项目列表 → 树节点
│   │
│   └── views/                          # 路由页面（编排层为主）
│       ├── login/Login.vue             # 登录页
│       ├── home/Dashboard.vue          # 工作台（统计 / 待办 / 近期项目）
│       ├── map/OneMap.vue              # 空间一张图（外部系统 iframe + 自动登录桥）
│       ├── ledger/
│       │   ├── Projects.vue            # 项目台账列表
│       │   └── ProjectDetail.vue       # 项目台账详情（编排层）
│       ├── market/Market.vue           # 市场拓展入口（模块卡片导航）
│       ├── bidPreparation/
│       │   ├── Renewal.vue             # 标书编制：投续标 / 续签 Tab 容器
│       │   ├── RenewalDetail.vue       # 续标简化详情
│       │   ├── RenewalExpireDetail.vue # ⭐ 投续标 7 步指挥页（核心）
│       │   ├── renewal-expire-detail.css # 指挥页 scoped 样式（外置）
│       │   └── RenewalXQDetail.vue     # 续签详情指挥页
│       ├── bidMonitor/
│       │   └── TenderPool.vue          # 招标监测页（监测 / 意向 Tab）
│       └── bidResult/
│           └── BidResult.vue           # 开标与中标页（编排层）
│
├── word/                               # 产品规格与 Demo 说明（非运行代码）
│   ├── 申勤物业数字化平台 · 市场续标 Demo 规格说明.md
│   ├── 结构与流程.md
│   └── …
│
├── harness/                            # 本地 Agent 工件（通常不入库）
│   ├── feature_list.json               # 功能状态唯一事实来源
│   ├── progress.md                     # 会话进度
│   ├── session-handoff.md              # 会话交接
│   ├── init.ps1 / init.sh              # 安装依赖 + npm run build
│   ├── clean-state-checklist.md
│   ├── evaluator-rubric.md
│   ├── quality-document.md
│   └── backup/                         # 历史备份（如指挥页 origin）
│
└── AGENTS.md                           # Agent 根指令 / 项目地图（通常不入库）

阅读提示

路径约定	说明
COLUMN.* / MODEL.*	业务代码请用 src/constants/dmsColumns.ts，勿直接写 CONFIG.COLUMNIDARR[n]
views/*	路由级页面；大业务多拆到 components/* + composables/*
sessionStorage	跨页临时态（如 dmsId / progres / projectName），改跳转逻辑时先核对现有键名

---

业务模块

模块	路由	说明
登录	/	用户登录，token 存储到 localStorage
首页	/#/dashboard	经营总览（统计 / 待办 / 近期项目）；侧栏无子目录直达
项目库	/#/projects	项目中心 · 在管项目列表与详情（详情内含 Mapbox）
项目分布	/#/onemap	项目中心 · 外部「空间一张图」iframe
市场拓展入口	/#/market	卡片导航（侧栏默认不展示，路由保留）
标书编制	/#/renewal	市场部 · 投续标 / 续签；指挥页 /#/renewal-expire-detail/:id
招标监测	/#/tender-pool	市场部 · 招标公告监测、意向、转投续标
开标与中标	/#/bid-result	市场部 · 开标监控、中标登记、推送与建项

侧栏另含运营 / 人事 / 采购 / 财务等分组占位（路由待落地）。

---

认证流程

项目采用基于 Token 的认证机制，核心逻辑在 src/utils/request.ts 和 src/stores/user.ts：

1. 登录时调用 api.login()，成功后 token 存入 localStorage
2. Axios 请求拦截器自动从 localStorage 读取 token，附加到请求头 token 字段
3. 响应拦截器检测到 无效token 或 401/403 状态码时，自动清除本地登录态并跳转回登录页

---

API 概览

后端接口统一由 src/api/common.ts 导出，按服务归属分为三类：

服务	前缀	用途
OAUTH	CONFIG.OAUTH_URL	登录、修改密码
DMS	CONFIG.DMS_URL	栏目查询、内容 CRUD、文件上传、审核
SQ	CONFIG.SQ_URL	统计、历史合作方、招标生成、标书生成进度查询

常用 SQ 能力说明：

接口方法	路径	说明
getGenerateTender	POST /tender/generate	发起 AI 标书生成（投续标 ID）
getTenderProgress	GET /tender/api/v1/jobs/{txbId}/progress	查询标书生成步骤进度

对接说明见仓库根目录 API进度查询接口对接文档.md。

所有请求走 /api 代理前缀，开发时由 Vite 转发到后端。

---

开发注意

• 路径别名：@ → src/（在 vite.config.ts 和 tsconfig.json 中均已配置）
• 构建产物路径：Vite base 设为 ./，产物可直接部署到任意子路径
• Token 过期：后端返回 无效token 或 HTTP 401/403 时，前端会自动清理登录态并跳转登录页
• 文件上传：uploadFile 接口使用 multipart/form-data，需传 FormData
• AI Agent 开发：项目已集成 Harness 工程文件，Agent 工作前请阅读根目录 AGENTS.md，通过 harness/init.ps1（PowerShell）或 bash harness/init.sh（Git Bash/WSL）一键完成依赖安装与基线验证

---

License

Internal use only.

提交版本记录

• 2023-07-10 1、 初始版本，包含基础功能 2、 登录流程，添加 token 过期检测 3、 首页看板图表，添加项目统计 4、 项目台账模块，添加项目详情页 5、 市场信息模块，添加竞争对手信息 6、 续标管理模块，添加续标到期详情页 7、 招标池模块，添加开标监控 8、 投标结果模块，添加投标结果录入与展示 9、 登录页，添加登录失败提示

• 2023-07-17 1、 优化登录页，添加登录失败提示 2、 优化项目台账模块，添加项目详情页的项目统计 3、 优化市场信息模块，添加竞争对手详情页 4、 优化续标管理模块，添加续标详情页的项目统计 5、 优化招标池模块，添加开标监控页的项目统计 6、 优化投标结果模块，添加投标结果详情页的项目统计

• 2023-08-04 1、 增加Mapbox引擎，展示物业项目空间分布，支持 GeoJSON 绘制 2、 增加JSONEDIT功能，用于编辑项目空间分布的 GeoJSON 数据 3、 优化项目台账模块，添加项目详情页的项目统计 4、 优化市场信息模块，添加竞争对手详情页 5、 优化续标管理模块，添加续标详情页的项目统计 6、 优化招标池模块，添加开标监控页的项目统计 7、 优化投标结果模块，添加中标流程功能，包含中标确认、中标结果展示、中标项目详情

• 2023-08-11 1、 优化Mapbox引擎，展示物业项目空间分布，支持 GeoJSON 绘制 2、 优化JSONEDIT功能，用于编辑项目空间分布的 GeoJSON 数据 3、 优化市场信息模块，添加竞争对手详情页 4、 优化续标管理模块，添加续标详情页的项目统计 5、 优化招标池模块，添加开标监控页的项目统计 6、 优化投标结果模块，添加投标结果详情页的项目统计

• 2023-08-28 1、 优化接口调用AI生成标书功能，支持文件上传 2、 优化判断标书文件格式是否正确，仅支持 .docx 格式 3、 优化匹配招标公告功能，根据项目信息自动匹配相关招标 4、 优化检测标书是否中标功能，根据项目信息自动检测标书是否中标， 5、 优化确认中标功能，手动确认中标并生成新的项目

• 2023-09-01 1、 增加AI Agent 开发，项目已集成 Harness 工程文件 2、 修改项目布局和Logo图标

• 2026-09-10 1、 优化投续标指挥页「标书制作」：任务4完成后可上传资料；行内「生成标书」+ 招标/采购/参考/澄清四类上传 2、 任务5更名为「招标公告与需求拆解」；待确认前须具备招标文件、采购需求与有效参考标书（docx） 3、 对接标书生成进度查询接口 getTenderProgress，获取标书按 c_ai_sczt（完成/失败/生成中）分流处理 4、 生成中刷新页面不再误回退到「生成标书」；失败仅在主动「获取标书」或进度失败时回退并清空状态 5、 续标创建时，在管项目历史标书为 docx 则写入投续标参考标书字段 c_ckbs 6、 修复投标结果页组件导入路径大小写，保证 Windows 下 vue-tsc 构建通过 7、 增加项目详情页的地图展示，支持点击面展示相关信息，如有员工可查看员工相关数据

• 2026-09-16 1、使用AI整理代码，增加代码可读性 2、从项目台账中进入续签或续标时，增加确认提示

• 2026-09-17 1、项目台账列表页面，显示增加过期数据，过期数据放在最后面显示 2、续签标列表查询功能，根据项目名称查询接口修改 3、空间一张图加载loading状态颜色调整， 与本项目其他loading状态颜色一致

• 2026-09-20 1、侧栏对齐流程协同页：首页（无子目录）、项目中心、市场部及运营/人事/采购/财务等分组；未落地子项占位、菜单区内滚动 2、台账「距到期」多选筛选；确认中标建项表单精简字段；统一页面字体继承 3、项目详情：已有续签/续标流程时，预警条改为「进入续签/续标流程」直达入口 4、标书编制：列表首屏与级联数据并行加载；修复新增弹窗区县→项目横向级联 5、续标/投标创建投续标时，将所选在管项目的项目标书（.docx）写入参考标书 c_ckbs 6、注册驻地/补充协议栏目 ID；本地手册 系统操作流程.md 纳入 .gitignore