diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..fd7f64f --- /dev/null +++ b/.env.development @@ -0,0 +1,3 @@ +# 开发环境配置 +# 使用相对路径,通过 vite proxy 代理到目标服务器 +VITE_API_BASE_URL= diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..7196be4 --- /dev/null +++ b/.env.production @@ -0,0 +1,2 @@ +# 生产环境配置 +VITE_API_BASE_URL=http://10.104.10.151:8888 diff --git a/README.md b/README.md new file mode 100644 index 0000000..a0141ac --- /dev/null +++ b/README.md @@ -0,0 +1,170 @@ +# 云智控大屏系统 + +基于 Vue3 + Element Plus 的数据可视化大屏系统,支持 4800x1600 大屏自适应缩放。 + +## 功能特性 + +- **Vue3 Composition API** - 使用最新的 Vue3 语法 +- **Element Plus** - 企业级 UI 组件库 +- **模块化路由** - 清晰的路由结构,支持路由守卫 +- **Axios 封装** - 统一的请求拦截、错误处理 +- **SM4 加解密** - 国密算法支持(需要后端配合) +- **自适应缩放** - 根据浏览器窗口自动缩放到指定尺寸 +- **大屏样式** - 深色主题,科技感设计 + +## 页面结构 + +``` +src/ +├── views/ +│ ├── login/ # 登录页 +│ ├── layout/ # 布局组件 +│ ├── home/ # 首页 +│ ├── dashboard/ # 数据大屏 +│ └── error/ # 错误页面(404/500) +├── utils/ +│ ├── request.js # Axios 请求封装 +│ ├── sm4.js # SM4 加解密 +│ ├── scale.js # 大屏缩放工具 +│ └── format.js # 格式化工具 +├── router/ +│ └── index.js # 路由配置 +└── styles/ + └── global.scss # 全局样式 +``` + +## 快速开始 + +### 安装依赖 + +```bash +npm install +``` + +### 启动开发服务器 + +```bash +npm run dev +``` + +### 构建生产版本 + +```bash +npm run build +``` + +## 默认登录账号 + +- 用户名:admin +- 密码:admin123 + +## 大屏配置 + +页面默认尺寸为 **4800 x 1600**,系统会自动根据浏览器窗口缩放。 + +如需修改尺寸,修改以下文件: + +- `src/utils/scale.js` - 修改 `baseWidth` 和 `baseHeight` + +## 接口配置 + +修改 `src/utils/request.js` 中的 `baseURL`,或创建 `.env` 文件: + +```env +VITE_API_BASE_URL=http://your-api-server.com/api +``` + +## SM4 加密 + +系统默认使用 SM4 加密传输数据。如需调整: + +1. 修改 `src/utils/sm4.js` 中的 `defaultKey` +2. 确保后端使用相同的密钥 + +如不需要加密,可以修改 `request.js` 中的请求拦截器。 + +## 路由说明 + +| 路径 | 页面 | 需要认证 | +|------|------|----------| +| /login | 登录页 | 否 | +| /home | 首页 | 是 | +| /dashboard | 数据大屏 | 是 | +| /404 | 404错误页 | 否 | +| /500 | 500错误页 | 否 | + +## 静态资源使用 + +### 目录结构 + +``` +public/ # 不经过构建处理的静态资源 +├── imgs/ # 全局图片(logo、背景图等) +├── js/ # 第三方JS库 +├── fonts/ # 字体文件 +└── data/ # 静态JSON数据 + +src/assets/ # 需要构建处理的资源 +├── imgs/ # 组件级图片 +├── icons/ # SVG图标 +└── styles/ # SCSS样式文件 +``` + +### 使用示例 + +**public 目录资源(直接通过根路径访问):** +```vue + + + +``` + +**assets 目录资源(通过别名访问):** +```vue + + + +``` + +**加载静态JSON数据:** +```javascript +import { loadJsonData } from '@/utils/assets' +const config = await loadJsonData('config.json') +``` + +## 项目结构 + +``` +yun3v2/ +├── index.html +├── package.json +├── vite.config.js +├── src/ +│ ├── main.js +│ ├── App.vue +│ ├── views/ +│ ├── utils/ +│ ├── router/ +│ └── styles/ +└── README.md +``` + +## 技术栈 + +- Vue 3.4 +- Vue Router 4.3 +- Pinia 2.1 +- Element Plus 2.6 +- Axios 1.6 +- Vite 5.1 +- SCSS diff --git a/TOMCAT_DEPLOY_README.md b/TOMCAT_DEPLOY_README.md new file mode 100644 index 0000000..9a06c4d --- /dev/null +++ b/TOMCAT_DEPLOY_README.md @@ -0,0 +1,116 @@ +# Tomcat 部署配置说明 + +## 问题原因 +Vue Router 使用 history 模式,刷新页面时 Tomcat 会尝试查找对应的物理路径,导致 404 错误。 + +## 解决方案 + +### 方案一:配置 Tomcat rewrite 规则(推荐) + +1. **下载 rewrite.jar** + - 下载 Tomcat rewrite 模块:https://tomcat.apache.org/download-90.cgi + - 将 `rewrite.jar` 放到 `$CATALINA_HOME/lib` 目录 + +2. **创建 WEB-INF/rewrite.config** + 在 `wdk/WEB-INF/` 目录下创建 `rewrite.config` 文件,内容如下: + ``` + # 所有非文件请求都转发到 index.html + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule ^.*$ /wdk/index.html [L] + ``` + +3. **修改 WEB-INF/web.xml** + 在 `wdk/WEB-INF/web.xml` 中添加 rewrite 过滤器: + ```xml + + + + Yun3v2 Application + + + + rewriteFilter + org.apache.rewrite.RewriteFilter + + + rewriteFilter + /* + + + + + index.html + + + ``` + +### 方案二:使用 hash 模式(简单但 URL 不美观) + +修改 `src/router/index.js`: +```javascript +import { createRouter, createWebHashHistory } from 'vue-router' + +const router = createRouter({ + history: createWebHashHistory(), // 使用 hash 模式 + routes +}) +``` + +这样 URL 会变成:`http://localhost:8080/wdk/#/home` + +### 方案三:配置 Tomcat 全局 error-page + +在 `wdk/WEB-INF/web.xml` 中添加: +```xml + + + + Yun3v2 Application + + + + 404 + /index.html + + + + + index.html + + +``` + +## 部署步骤 + +1. **重新构建项目** + ```bash + npm run build + ``` + +2. **复制文件到 Tomcat** + ``` + dist/ → tomcat/webapps/wdk/ + ``` + +3. **创建 WEB-INF 目录和配置文件** + ``` + tomcat/webapps/wdk/WEB-INF/ + ├── web.xml + └── rewrite.config (如果使用方案一) + ``` + +4. **重启 Tomcat** + +## 推荐方案 +- **生产环境**:使用方案一(rewrite 规则) +- **快速测试**:使用方案三(error-page) +- **内网简单部署**:使用方案二(hash 模式) diff --git a/index.html b/index.html new file mode 100644 index 0000000..a5a8325 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + 上海地铁运三运营有限公司数字监管平台 + + + +
+ + + diff --git a/public/imgs/tonebg.png b/public/imgs/tonebg.png deleted file mode 100644 index b904ff8..0000000 Binary files a/public/imgs/tonebg.png and /dev/null differ diff --git a/public/imgs/tonebg1.png b/public/imgs/tonebg1.png deleted file mode 100644 index 5cbc348..0000000 Binary files a/public/imgs/tonebg1.png and /dev/null differ diff --git a/public/imgs/traffic/1-bg.png b/public/imgs/traffic/1-bg.png new file mode 100644 index 0000000..ba5d790 Binary files /dev/null and b/public/imgs/traffic/1-bg.png differ diff --git a/public/imgs/traffic/2-bg.png b/public/imgs/traffic/2-bg.png new file mode 100644 index 0000000..2e41abd Binary files /dev/null and b/public/imgs/traffic/2-bg.png differ diff --git a/public/imgs/traffic/3-bg.png b/public/imgs/traffic/3-bg.png new file mode 100644 index 0000000..e3cf504 Binary files /dev/null and b/public/imgs/traffic/3-bg.png differ diff --git a/public/imgs/traffic/4-bg.png b/public/imgs/traffic/4-bg.png new file mode 100644 index 0000000..bfbdd0c Binary files /dev/null and b/public/imgs/traffic/4-bg.png differ diff --git a/public/imgs/traffic/5-bg.png b/public/imgs/traffic/5-bg.png new file mode 100644 index 0000000..2feef01 Binary files /dev/null and b/public/imgs/traffic/5-bg.png differ diff --git a/public/imgs/traffic/5-item.png b/public/imgs/traffic/5-item.png new file mode 100644 index 0000000..6c9baab Binary files /dev/null and b/public/imgs/traffic/5-item.png differ diff --git a/public/imgs/traffic/5-item1.png b/public/imgs/traffic/5-item1.png new file mode 100644 index 0000000..d9bdb73 Binary files /dev/null and b/public/imgs/traffic/5-item1.png differ diff --git a/public/imgs/traffic/6-bg.png b/public/imgs/traffic/6-bg.png new file mode 100644 index 0000000..4201a28 Binary files /dev/null and b/public/imgs/traffic/6-bg.png differ diff --git a/public/imgs/traffic/7-bg.png b/public/imgs/traffic/7-bg.png new file mode 100644 index 0000000..c396274 Binary files /dev/null and b/public/imgs/traffic/7-bg.png differ diff --git a/public/imgs/traffic/8-bg.png b/public/imgs/traffic/8-bg.png new file mode 100644 index 0000000..d4d6261 Binary files /dev/null and b/public/imgs/traffic/8-bg.png differ diff --git a/src/views/traffic/components/Traffic1.vue b/src/views/traffic/components/Traffic1.vue new file mode 100644 index 0000000..1e6a6dd --- /dev/null +++ b/src/views/traffic/components/Traffic1.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/views/traffic/components/Traffic2.vue b/src/views/traffic/components/Traffic2.vue new file mode 100644 index 0000000..e4079ad --- /dev/null +++ b/src/views/traffic/components/Traffic2.vue @@ -0,0 +1,429 @@ + + + + + diff --git a/src/views/traffic/components/Traffic3.vue b/src/views/traffic/components/Traffic3.vue new file mode 100644 index 0000000..d5674dd --- /dev/null +++ b/src/views/traffic/components/Traffic3.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/views/traffic/components/Traffic4.vue b/src/views/traffic/components/Traffic4.vue new file mode 100644 index 0000000..fd2565d --- /dev/null +++ b/src/views/traffic/components/Traffic4.vue @@ -0,0 +1,277 @@ + + + + + diff --git a/src/views/traffic/components/Traffic5.vue b/src/views/traffic/components/Traffic5.vue new file mode 100644 index 0000000..b3f3e2c --- /dev/null +++ b/src/views/traffic/components/Traffic5.vue @@ -0,0 +1,291 @@ + + + + + diff --git a/src/views/traffic/components/Traffic6.vue b/src/views/traffic/components/Traffic6.vue new file mode 100644 index 0000000..06335eb --- /dev/null +++ b/src/views/traffic/components/Traffic6.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/views/traffic/components/Traffic7.vue b/src/views/traffic/components/Traffic7.vue new file mode 100644 index 0000000..a335c46 --- /dev/null +++ b/src/views/traffic/components/Traffic7.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/views/traffic/components/Traffic8.vue b/src/views/traffic/components/Traffic8.vue new file mode 100644 index 0000000..caa28e3 --- /dev/null +++ b/src/views/traffic/components/Traffic8.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/views/traffic/index.vue b/src/views/traffic/index.vue index cd96a68..04783c2 100644 --- a/src/views/traffic/index.vue +++ b/src/views/traffic/index.vue @@ -1,123 +1,34 @@