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

开发环境

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

• 初始版本，包含基础功能
• 登录流程，添加 token 过期检测
• 数据上图功能，添加数据上图功能
• 首页看板图表，添加项目统计
• Mapbox 地图配置，添加地图配置项
• 添加放大、缩小地图功能
• 添加地图点击事件
• 添加搜索地址功能
  

2026-05-15

• 优化登录流程，添加自动登录功能
• 优化地图配置项，添加地图配置项
• 添加员工数据统计显示
• 添加员工数据搜索功能
• Mapbox 地图添加绘制配置功能
• 添加项目搜索功能
• Mapbox 地图配置，添加浅色、深色、影像地图配置项

2026-05-22

• 优化数据列表子级和员工的信息搜索功能
• 优化表格显示效果
• 优化 Mapbox 地图绘制功能
• 添加地图中心基线功能
• 数据图层添加显隐功能
• 列表分区统计显示
• 添加项目总数统计

2026-06-18

• 增加外部链接自动登陆功能
• 优化员工表格分页显示效果
• 优化项目信息显示效果

2026-09-02

• 优化外部链接自动登陆功能，添加根据 token 自动登陆验证功能

2026-09-08

• 申勤项目数据读取重新替换新接口
• 读取出来的项目数据，处理成上图展示需要的格式
• 优化按新项目数据来修改项目信息的功能