|
|
@@ -1,6 +1,103 @@
|
|
|
-# sq_dataview
|
|
|
+# 申勤数据可视化一张图平台
|
|
|
|
|
|
-## 安装依赖
|
|
|
+> 基于 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
|
|
|
```
|
|
|
@@ -9,30 +106,35 @@ npm install
|
|
|
```
|
|
|
npm run serve
|
|
|
```
|
|
|
+默认端口 `2120`，devServer 代理配置见 `vue.config.js`：
|
|
|
+- `/proxy_auth` → 认证服务
|
|
|
+- `/proxy_dms` → 数据管理服务
|
|
|
+- `/proxy_map_search_address`、`/proxy_map_search` → 地图地址搜索
|
|
|
|
|
|
### 生产环境打包
|
|
|
```
|
|
|
npm run build
|
|
|
```
|
|
|
+生产环境自动启用。
|
|
|
|
|
|
-## 数据上图
|
|
|
-
|
|
|
-### 配置项
|
|
|
+## 配置说明
|
|
|
|
|
|
-- config.js中的配置项为适配域名服务器，在服务器上有修改
|
|
|
+全局配置位于 `public/static/config/config.js`：
|
|
|
|
|
|
-- npm config set registry https://registry.npm.taobao.org
|
|
|
-- npm config set registry https://registry.npmjs.org
|
|
|
+- `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
|
|
|
|
|
|
-```
|
|
|
-"scripts": {
|
|
|
- "minify": "terser public/static/plugins/mapDraw.js -o public/static/plugins/mapDraw.min.js -m -c"
|
|
|
-},
|
|
|
-```
|
|
|
|
|
|
## 提交版本记录
|
|
|
|
|
|
- **2026-04-27**
|
|
|
+>
|
|
|
1、 初始版本，包含基础功能
|
|
|
2、 登录流程，添加 token 过期检测
|
|
|
3、 数据上图功能，添加数据上图功能
|
|
|
@@ -43,32 +145,37 @@ npm run build
|
|
|
8、 添加搜索地址功能
|
|
|
|
|
|
- **2026-05-15**
|
|
|
+>
|
|
|
1、 优化登录流程，添加自动登录功能
|
|
|
2、 优化地图配置项，添加地图配置项
|
|
|
-4、 Mapbox 地图配置，添加浅色、深色、影像地图配置项
|
|
|
3、 添加员工数据统计显示
|
|
|
4、 添加员工数据搜索功能
|
|
|
-5、 Mapbox地图添加绘制配置功能
|
|
|
+5、 Mapbox 地图添加绘制配置功能
|
|
|
6、 添加项目搜索功能
|
|
|
+7、 Mapbox 地图配置，添加浅色、深色、影像地图配置项
|
|
|
|
|
|
- **2026-05-22**
|
|
|
+>
|
|
|
1、 优化数据列表子级和员工的信息搜索功能
|
|
|
2、 优化表格显示效果
|
|
|
-4、 优化Mapbox地图绘制功能
|
|
|
-3、 添加地图中心基线功能
|
|
|
-4、 数据图层添加显隐功能
|
|
|
-5、 列表分区统计显示
|
|
|
-6、 添加项目总数统计
|
|
|
+3、 优化 Mapbox 地图绘制功能
|
|
|
+4、 添加地图中心基线功能
|
|
|
+5、 数据图层添加显隐功能
|
|
|
+6、 列表分区统计显示
|
|
|
+7、 添加项目总数统计
|
|
|
|
|
|
- **2026-06-18**
|
|
|
+>
|
|
|
1、 增加外部链接自动登陆功能
|
|
|
2、 优化员工表格分页显示效果
|
|
|
3、 优化项目信息显示效果
|
|
|
|
|
|
- **2026-09-02**
|
|
|
-1、 优化外部链接自动登陆功能，添加根据token自动登陆验证功能
|
|
|
+>
|
|
|
+1、 优化外部链接自动登陆功能，添加根据 token 自动登陆验证功能
|
|
|
|
|
|
- **2026-09-08**
|
|
|
+>
|
|
|
1、 申勤项目数据读取重新替换新接口
|
|
|
2、 读取出来的项目数据，处理成上图展示需要的格式
|
|
|
3、 优化按新项目数据来修改项目信息的功能
|
mork