sq_manage

申勤物业数字化平台 — 面向物业项目全生命周期的管理后台系统，涵盖项目台账、市场信息、投标准备、招标监控、投标结果等核心业务模块，并集成基于 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 即可。

目录结构

sq_manage/
├── public/
│   ├── favicon.ico
│   └── static/
│       ├── config/config.js        # ⭐ 运行时配置（后端地址 / Mapbox Token）
│       ├── data/                   # 静态数据文件（md / html）
│       └── plugins/                # 第三方插件（如 createAuth）
│
├── src/
│   ├── api/common.ts               # ⭐ 后端 API 接口集合
│   ├── components/
│   │   ├── bidResult/              # 投标结果公共组件（AddContent、AddProject）
│   │   ├── map/                    # 地图绘制组件（MapDraw）
│   │   ├── renewal/                # 续标相关组件（BidRenewal、Renew）
│   │   ├── tenderpool/             # 招标池组件（Intention、Monitor、Notice）
│   │   └── view/                   # 通用视图组件（GeoJsonEditor）
│   ├── layouts/MainLayout.vue      # 主布局（侧边栏 + 顶部 + 内容区）
│   ├── router/index.ts             # ⭐ 路由配置（Hash 模式）
│   ├── stores/user.ts              # Pinia 用户状态（登录/登出/token）
│   ├── styles/                     # 全局样式 & 自定义 Element Plus 主题
│   ├── types/                      # TypeScript 类型声明（md.d.ts / window.d.ts）
│   ├── utils/
│   │   ├── config.ts               # 读取 window.CONFIG
│   │   ├── request.ts              # Axios 实例 + token 拦截器
│   │   ├── encrypt.ts              # 加密工具
│   │   └── util.ts                 # 通用工具函数
│   ├── views/
│   │   ├── home/Dashboard.vue          # 首页看板（ECharts 图表）
│   │   ├── map/OneMap.vue              # 一张图（Mapbox 地图 + GeoJSON 展示）
│   │   ├── ledger/Projects.vue         # 项目台账列表
│   │   ├── ledger/ProjectDetail.vue    # 项目台账详情
│   │   ├── market/Market.vue           # 市场信息
│   │   ├── bidPreparation/Renewal.vue          # 续标列表
│   │   ├── bidPreparation/RenewalDetail.vue    # 续标详情
│   │   ├── bidPreparation/RenewalExpireDetail.vue # 续标到期详情
│   │   ├── bidPreparation/RenewalXQDetail.vue  # 续标详情（XQ）
│   │   ├── bidMonitor/TenderPool.vue    # 招标池 / 开标监控
│   │   ├── bidResult/BidResult.vue      # 投标结果
│   │   └── login/Login.vue              # 登录页
│   ├── App.vue
│   ├── main.ts
│   └── env.d.ts
│
├── word/                           # 产品需求 & 设计文档
├── vite.config.ts                  # ⭐ Vite 构建配置（别名 @、开发代理）
├── tsconfig.json
├── index.html
└── package.json

业务模块

模块	路由	说明
登录	`/`	用户登录，token 存储到 localStorage
首页看板	`/#/dashboard`	项目统计、图表可视化
一张图	`/#/onemap`	Mapbox 地图展示物业项目空间分布，支持 GeoJSON 绘制
项目台账	`/#/projects`	物业项目全生命周期管理，含详情页
市场信息	`/#/market`	市场情报 & 竞争对手信息
续标管理	`/#/renewal`	投标准备阶段的续标工作流，含多类详情页
招标池	`/#/tender-pool`	招标公告、投标意向、开标监控
投标结果	`/#/bid-result`	投标结果录入与展示

认证流程

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

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

API 概览

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

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

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

开发注意

路径别名：@ → src/（在 vite.config.ts 和 tsconfig.json 中均已配置）
构建产物路径：Vite base 设为 ./，产物可直接部署到任意子路径
Token 过期：后端返回 无效token 或 HTTP 401/403 时，前端会自动清理登录态并跳转登录页
文件上传：uploadFile 接口使用 multipart/form-data，需传 FormData

License

Internal use only.

提交版本记录

2023-07-10 1、初始版本，包含基础功能 2、登录流程，添加 token 过期检测 3、首页看板图表，添加项目统计 4、项目台账模块，添加项目详情页 5、市场信息模块，添加竞争对手信息 6、续标管理模块，添加续标到期详情页 7、招标池模块，添加开标监控 8、投标结果模块，添加投标结果录入与展示 9、登录页，添加登录失败提示 10、项目台账模块，添加项目详情页的项目统计 11、市场信息模块，添加竞争对手详情页 12、续标管理模块，添加续标详情页的项目统计 13、招标池模块，添加开标监控页的项目统计 14、投标结果模块，添加投标结果详情页的项目统计 15、登录页，添加登录失败提示
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、优化确认中标功能，手动确认中标并生成新的项目

README.md 10 KB 히스토리 Raw