# 申勤数据可视化一张图平台

> 基于 Vue 3 + Mapbox GL JS 构建，集成申勤项目数据上图、辖区可视化、绘制工具、员工信息管理于一体，支持手动登录与外部链接 token 自动登录两种模式。

## 技术栈

| 分类 | 技术 |
| --- | --- |
| 框架 | Vue 3.2 + Vue Router 4 + Vuex 4 |
| UI | Element Plus 2.9 + Element Plus Icons |
| 地图 | Mapbox GL JS 3.21 + @mapbox/mapbox-gl-draw + @turf/turf |
| 图表 | ECharts 5.6 |
| HTTP | Axios 0.27 + qs |
| 工具 | wellknown（WKT/GeoJSON 互转）、moment、xlsx、vue-clipboard3 |
| 编辑器 | json-editor-vue、vue-json-ui-editor |
| 构建 | Vue CLI 5 + Less + compression-webpack-plugin（gzip）+ terser |

## 目录结构

```
sq_dataview/
├── public/
│   ├── index.html                     # 入口模板（引入 mapbox/turf/jquery/mapDraw 等静态插件）
│   └── static/
│       ├── config/config.js           # 全局配置 webConfig（服务地址、地图瓦片、字段映射等）
│       ├── data/area.geojson          # 上海16区辖区面数据
│       └── plugins/
│           ├── mapDraw.js             # 自定义 Mapbox 绘制插件（绘点/线/面/圆/矩形/测距/测面）
│           ├── mapbox-v3.20.0/        # Mapbox GL 本地资源
│           ├── turf.min.js            # 空间计算
│           ├── jquery/                # jQuery 工具
│           └── createAuth.js          # 认证辅助
├── src/
│   ├── api/
│   │   ├── common.js                  # 登录、用户、内容增删改查、数据列表
│   │   ├── content.js                 # 栏目模型、内容导入导出、权限
│   │   └── mapCommon.js               # 地址搜索接口
│   ├── components/
│   │   ├── Map.vue                    # 地图主容器（底图、数据上图、辖区、弹窗、图层控制）
│   │   ├── DrawMap.vue                # 绘制工具栏
│   │   ├── Header.vue                 # 顶部栏（时间、天气、全屏）
│   │   ├── LeftMenu.vue               # 左侧项目列表（按市辖区/管理区域分级、搜索、总数统计）
│   │   ├── Table.vue                  # 员工信息表格（分页、搜索、编辑）
│   │   ├── JsonEditor.vue             # 图层要素 JSON 编辑器
│   │   └── editManage.vue             # 员工信息编辑表单
│   ├── views/
│   │   ├── Login.vue                  # 手动登录页
│   │   ├── AutoLogin.vue              # 外部链接 token 自动登录页
│   │   └── IndexView.vue              # 主视图（地图 + 搜索 + 底图切换）
│   ├── router/index.js                # 路由（/、/index、/autoLogin）
│   ├── store/index.js                 # Vuex（token、userState、userInfo，持久化到 localStorage）
│   ├── utils/
│   │   ├── request.js                 # axios 封装（get/post/postform/postFile/getFile 等）
│   │   ├── util.js                    # 终端判断、GeoJSON→WKT 等
│   │   ├── encrypt‌.js                # 登录加密
│   │   └── loading.js                 # 全局 loading
│   ├── App.vue
│   └── main.js                        # 入口（注册 ElementPlus、全局 $getUserType、$copyText）
├── vue.config.js                      # Vue CLI 配置（别名、gzip、geojson loader、devServer 代理）
└── package.json
```

## 核心功能

- **登录与认证**
  - 手动登录：用户名 + 加密密码
  - 自动登录：外部系统通过 `postMessage` 传递 token，校验 `getUserByToken` 自动登录
  - 用户类型：1 游客 / 2 普通用户 / 3 管理员（基于权限判断，管理员可见编辑入口）

- **地图可视化**
  - 三种底图切换：浅色地图、深色地图、影像地图（上海一张图 + 天地图影像）
  - 项目数据上图：通过 DMS 接口拉取项目内容，WKT 转 GeoJSON 渲染面/线/符号图层
  - 辖区可视化：上海 16 区 `fill-extrusion` 立体面 + 多层光晕边线 + 名称标注
  - 中心基准线：地图中心十字准线，实时显示中心点经纬度（可复制）
  - 图层显隐：数据图层、辖区图层独立控制
  - 地图点击弹窗：展示项目信息，支持跳转员工列表

- **绘制工具**
  - 绘点、绘线、绘面、绘圆、矩形
  - 测距、测面、清空

- **项目列表**
  - 按市辖区 → 管理区域两级折叠树展示
  - 项目名称/地址搜索、项目总数统计
  - 点击项目飞行定位并弹窗展示项目信息

- **员工信息管理**
  - 分页表格、姓名搜索
  - 管理员可编辑员工信息

- **图层 JSON 编辑**
  - 编辑图层要素属性，保存到 DMS（申勤项目数据栏目）

- **顶部信息栏**
  - 实时时间、星期、天气（心知天气 API）
  - 全屏切换

## 快速开始

### 安装依赖
```
npm install
```

### 开发环境
```
npm run serve
```
默认端口 `2120`，devServer 代理配置见 `vue.config.js`：
- `/proxy_auth` → 认证服务
- `/proxy_dms` → 数据管理服务
- `/proxy_map_search_address`、`/proxy_map_search` → 地图地址搜索

### 生产环境打包
```
npm run build
```
生产环境自动启用。

## 配置说明

全局配置位于 `public/static/config/config.js`：

- `systemName`：系统名称
- `OAUTH_URL` / `DMS_URL` / `PROXY_URL_SEARCH_*`：服务地址
- `MAPBOX_ACCESS_TOKEN`：Mapbox token
- `MAPBOX_TILES_NORMAL/BLUE/YXT`：三种底图瓦片地址
- `CITY_CODE_LIST`：上海 16 区列表
- `columnArr`：申勤员工栏目配置
- `FILTER_PARAM`：弹窗/列表显示字段映射
- `defaultAccount.adminRoleId`：管理员角色 ID


## 提交版本记录

- **2026-04-27**
>
1、 初始版本，包含基础功能
2、 登录流程，添加 token 过期检测
3、 数据上图功能，添加数据上图功能
4、 首页看板图表，添加项目统计
5、 Mapbox 地图配置，添加地图配置项
6、 添加放大、缩小地图功能
7、 添加地图点击事件
8、 添加搜索地址功能

- **2026-05-15**
>
1、 优化登录流程，添加自动登录功能
2、 优化地图配置项，添加地图配置项
3、 添加员工数据统计显示
4、 添加员工数据搜索功能
5、 Mapbox 地图添加绘制配置功能
6、 添加项目搜索功能
7、 Mapbox 地图配置，添加浅色、深色、影像地图配置项

- **2026-05-22**
>
1、 优化数据列表子级和员工的信息搜索功能
2、 优化表格显示效果
3、 优化 Mapbox 地图绘制功能
4、 添加地图中心基线功能
5、 数据图层添加显隐功能
6、 列表分区统计显示
7、 添加项目总数统计

- **2026-06-18**
>
1、 增加外部链接自动登陆功能
2、 优化员工表格分页显示效果
3、 优化项目信息显示效果

- **2026-09-02**
>
1、 优化外部链接自动登陆功能，添加根据 token 自动登陆验证功能

- **2026-09-08**
>
1、 申勤项目数据读取重新替换新接口
2、 读取出来的项目数据，处理成上图展示需要的格式
3、 优化按新项目数据来修改项目信息的功能