# 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

---

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

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

### 生产构建

```bash
npm run build
```

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

### 预览构建产物

```bash
npm run preview
```

---

## 配置说明

### 运行时配置（关键）

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

前端通过 [src/utils/config.ts](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](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`](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/utils/request.ts) 和 [src/stores/user.ts](src/stores/user.ts)：

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

---

## API 概览

后端接口统一由 [src/api/common.ts](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`