# 云智控大屏系统

基于 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