云枢智城 · 数字孪生可视化系统基于Vue 3、ECharts / ECharts-GL与数字孪生思路打造的智慧城市可视化大屏。 中央为可交互的世界/国家/省/市/街道孪生地图四周以透明面板叠加多类数据图表配套登录鉴权、角色权限、SQLite 数据管理、样式配置与拥堵预测等能力。目录功能概览技术栈环境要求快速开始演示账号项目结构页面与功能说明地图下钻与图表联动权限模型数据存储主要接口主题与样式常用命令注意事项功能概览模块说明登录体系豆包风格登录页青金智城主题支持账号密码 图形验证码、手机号 短信验证码孪生大屏中央全屏 Map左右透明 ECharts 覆盖顶栏导航、底栏图例与分页地图交互世界 → 国家 → 中国省级 → 市级 → 街道拥堵着色可切换拥堵 / AQI / 孪生指数图表联动地图切换地区后四周图表标题与数据同步变为该地区指标多页图表态势总览、交通孪生、环境感知、关系网络、时空立方、运行监测、三维剖析用户管理管理员可增删改用户、分配角色admin / operator / viewer数据管理街道拥堵、行政区、传感器、预警、世界指标的 CRUDExcel 导入导出数据源SQLite 连接路径测试与切换可保存 MySQL 配置运行时以 SQLite 为主样式设置预设主题 自定义背景/强调色/字体/地图配色可写入设置表孪生预测滑条调试预测参数、上传场景图片、输出拥堵预测曲线与历史记录技术栈前端Vue 3Composition APIViteVue Router路由与登录守卫Pinia用户会话与主题状态ECharts 5ECharts-GL二维 / 三维图表、地图、关系图等Element Plus管理端表格、表单、对话框Axios统一请求与 Token 注入后端Node.jsExpresssql.jsWebAssembly 版 SQLite免原生编译JWT登录态、bcryptjs密码哈希svg-captcha图形验证码multer文件上传、xlsxExcel 导入导出地图数据世界 GeoJSON首次请求时缓存至server/geo/中国及行政区阿里云 DataVareas_v3按 adcode 缓存环境要求Node.js≥ 18推荐 20 LTSnpm≥ 9首次进入大屏需能访问外网以下载/缓存世界与中国地图 GeoJSON之后走本地缓存快速开始# 进入项目目录 cd Vue26 ​ # 安装依赖 npm install ​ # 同时启动后端 (3001) 与前端 (5173) npm run dev浏览器访问http://localhost:5173/也可分开启动npm run server # API → http://127.0.0.1:3001 npm run client # Vite → http://localhost:5173生产构建npm run build npm run preview开发环境下Vite 已将/api、/uploads代理到后端3001端口。演示账号用户名密码手机号角色可访问adminadmin12313800138000管理员全部页面operatorop12345613900139000运维员大屏、数据、预测、样式viewerview123413700137000观察员大屏、预测登录方式密码登录输入账号/手机号、密码并填写右侧图形验证码点击图片可刷新。手机号登录输入已注册手机号点击「获取验证码」。演示环境会在页面提示devCode填入后即可登录。项目结构Vue26/ ├── index.html # 入口 HTML、字体引入 ├── package.json ├── vite.config.js # 别名 、开发代理 ├── public/ │ └── favicon.svg ├── server/ │ ├── index.js # Express 路由与中间件 │ ├── db.js # SQLite 初始化、种子数据、持久化 │ ├── data/city.db # 运行后生成的数据库文件 │ ├── geo/ # 地图 GeoJSON 缓存 │ └── uploads/ # 预测图片等上传文件 └── src/ ├── main.js ├── App.vue ├── api/http.js # Axios 实例与拦截器 ├── router/index.js # 路由与权限守卫 ├── stores/ │ ├── user.js # Token、角色、权限页 │ └── theme.js # 主题预设与 CSS 变量 ├── styles/global.css # 全局主题、滚动条、表格透明化 ├── utils/ │ ├── map.js # 地图主题、街道生成、国家别名 │ └── regionData.js # 按地区生成/筛选图表数据 ├── charts/options.js # 各类 ECharts option 工厂 ├── components/ │ ├── TwinMap.vue # 孪生地图与下钻 │ └── ChartBox.vue # 图表容器自适应、动态刷新 └── views/ ├── Login.vue # 登录页 ├── Dashboard.vue # 可视化大屏 ├── AdminLayout.vue # 管理端布局 ├── DataManage.vue # 数据管理 ├── UserManage.vue # 用户管理 ├── StyleSettings.vue # 样式设置 ├── Prediction.vue # 孪生预测 └── DbSettings.vue # 数据源连接页面与功能说明1. 登录页/login左侧品牌「云枢智城」 氛围背景右侧浅色卡片豆包式大圆角输入与主按钮配色改为青金主题。支持密码登录 / 手机号登录切换。登录成功后跳转态势大屏。2. 态势大屏/dashboard布局地图全屏底层顶栏 / 底栏 / 左右图表层叠在上方中间区域可点击地图。图表分页底栏切换态势总览嵌套环、堆叠面积、阶段速度仪表、能耗堆叠柱交通孪生动态排序柱、凹凸图、断轴柱、阶梯瀑布环境感知年历热力、相关矩阵、主题河流、AQI 平行坐标关系网络关系图、径向树、模块依赖、依赖星云GraphGL时空立方星云散点、安斯库姆四重奏、单轴散点、散点矩阵运行监测象形柱、可滚动图例柱、虚线柱、微型条形矩阵三维剖析三维散点、三维堆叠柱、打卡统计 Bar3D、相关散点顶栏显示当前地区标签、时钟、用户角色并链到其他业务页。3. 数据管理/data数据表街道拥堵、行政区、传感器、预警、世界指标。支持新增、编辑、删除、刷新、Excel 导入 / 导出。表格背景已透明化适配深色主题。4. 用户管理/users仅管理员可见。维护用户名、手机号、显示名、角色、状态与密码。5. 孪生预测/predict参数滑条平滑系数 α、预测时长、敏感度、天气扰动、事件增益。可上传场景图片结合文件特征给出场景密度提示。输出未来若干小时拥堵 / 速度曲线并记录历史。6. 样式设置/style预设夜航青金、晨雾银灰、赤潮琥珀、深海墨蓝。可调背景、强调色、点缀色、文字色、字体、地图主题。「保存到数据库」写入settings表本地同时缓存到localStorage。7. 数据源连接/db配置 SQLite 文件路径测试可用性并应用切换。可记录历史连接MySQL 表单仅保存配置说明运行时引擎仍为 SQLite。地图下钻与图表联动下钻路径世界地图 ├─ 点击「中国」→ 省级区划 │ └─ 点击省份 → 城市 │ └─ 进入街道层拥堵颜色绿 → 黄 → 橙 → 红 └─ 点击其他国家 → 国家轮廓 该国相关指标面包屑可逐级返回。顶部可切换地图着色指标拥堵 / AQI / 孪生指数。图表联动TwinMap在区域变化时触发region-change。Dashboard通过buildRegionChartData优先筛选 SQLite 中该地区的交通、传感器、预警等真实数据不足时用地区稳定伪随机补齐保证「同地区一致、不同地区不同」图表标题前缀带上当前地区名底栏缩略图标题同步变化。权限模型角色代码页面管理员admin大屏、数据、用户、预测、样式、数据源运维员operator大屏、数据、预测、样式观察员viewer大屏、预测前端stores/user.js的ROLE_PAGES 路由meta.page守卫。 后端requireRole(...)中间件校验写操作与敏感接口。数据存储数据库文件默认server/data/city.dbsql.js 导出的 SQLite 文件。主要表表名用途users用户账号、手机号、角色、状态traffic街道拥堵、速度、流量、坐标regions省 / 市指标人口、GDP、AQI、能耗等sensors传感设备实时值alerts预警事件world_stats世界主要国家指标settings主题等键值配置db_config数据源连接记录predictions预测结果与图片路径首次启动若库为空会自动写入演示用户与样例城市 / 街道数据。主要接口前缀均为/api。需登录的接口请在 Header 携带Authorization: Bearer token方法路径说明GET/health健康检查与当前库信息GET/auth/captcha图形验证码POST/auth/login密码登录POST/auth/sms发送短信验证码演示返回devCodePOST/auth/login-phone手机号登录GET/auth/me当前用户CRUD/users用户管理adminCRUD/data/:typetraffic/regions/sensors/alerts/worldGET/export/:type导出 ExcelPOST/import/:type导入 ExcelmultipartGET/PUT/settings系统设置GET/POST/db-config/*数据源查询、测试、应用GET/dashboard/overview大屏总览数据GET/geo/world/geo/china/geo/adcode/:code地图 GeoJSONPOST/predict拥堵预测可带图片GET/predict/history预测历史主题与样式默认视觉夜航青金深海背景 青色强调 金色点缀避免通用紫霓虹风。CSS 变量--bg、--panel、--accent、--gold、--text、--muted等由 Piniatheme写入:root。管理页表格、输入框、对话框在.app-shell下强制透明/深色消除 Element Plus 默认白底。全局自定义滚动条管理页与预测页可滚动查看全部内容。地图配色与主题联动见src/utils/map.js中MAP_THEMES。常用命令npm install # 安装依赖 npm run dev # 前后端一并开发启动 npm run server # 仅后端 npm run client # 仅前端 npm run build # 前端生产构建 → dist/ npm run preview # 预览构建产物注意事项首次打开大屏会请求世界 / 中国地图若网络受限请检查代理或稍后重试成功后文件缓存在server/geo/。三维 / GraphGL图表依赖 WebGL请使用较新的 Chrome / Edge低配机器可少开「关系网络」「三维剖析」分页。短信验证码为演示模式不会真实发短信接口返回devCode供联调。删除或损坏server/data/city.db后重启服务会重新初始化种子数据。建议大屏分辨率 ≥ 1920×1080窄屏下左右图表宽度会收缩部分底栏缩略图会隐藏。许可与说明本项目用于智慧城市 / 数字孪生可视化教学与演示。演示数据均为虚构样例不代表真实城市运行状态。https://github.com/zhangsansh/Vue3-ECharts-ECharts-GL.githttps://github.com/zhangsansh/Vue3-ECharts-ECharts-GL.git