171 lines
3.7 KiB
Markdown
171 lines
3.7 KiB
Markdown
# 云智控大屏系统
|
||
|
||
基于 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
|
||
<template>
|
||
<img src="/imgs/logo.png" alt="logo">
|
||
</template>
|
||
|
||
<script>
|
||
import { getPublicImageUrl } from '@/utils/assets'
|
||
const logoUrl = getPublicImageUrl('imgs/logo.png')
|
||
</script>
|
||
```
|
||
|
||
**assets 目录资源（通过别名访问）：**
|
||
```vue
|
||
<template>
|
||
<img src="@/assets/imgs/avatar.png" alt="avatar">
|
||
</template>
|
||
|
||
<script>
|
||
import { getAssetImageUrl } from '@/utils/assets'
|
||
const avatarUrl = getAssetImageUrl('imgs/avatar.png')
|
||
</script>
|
||
```
|
||
|
||
**加载静态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
|