云智控大屏系统

基于 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     # 全局样式

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

默认登录账号

• 用户名：admin
• 密码：admin123

大屏配置

页面默认尺寸为 4800 x 1600，系统会自动根据浏览器窗口缩放。

如需修改尺寸，修改以下文件：

• src/utils/scale.js - 修改 baseWidth 和 baseHeight

接口配置

修改 src/utils/request.js 中的 baseURL，或创建 .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 目录资源（直接通过根路径访问）：

<template>
  <img src="/imgs/logo.png" alt="logo">
</template>

<script>
import { getPublicImageUrl } from '@/utils/assets'
const logoUrl = getPublicImageUrl('imgs/logo.png')
</script>

assets 目录资源（通过别名访问）：

<template>
  <img src="@/assets/imgs/avatar.png" alt="avatar">
</template>

<script>
import { getAssetImageUrl } from '@/utils/assets'
const avatarUrl = getAssetImageUrl('imgs/avatar.png')
</script>

加载静态JSON数据：

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