vue3+vite大屏

🚀 基于 Vue3 + Vite 的交通能力评价大屏系统实战

📋 项目简介

这是一个基于 Vue 3 + Vite 构建的交通能力评价可视化大屏系统，主要用于展示公交、轨道、分公司等交通运营数据，通过数据可视化帮助管理者快速了解交通运营状况。

✨ 核心特性

• 🎨 现代化 UI 设计：采用深色主题，适配大屏展示
• 📊 丰富的数据可视化：集成 ECharts 实现多种图表展示
• 🗺️ 地图集成：基于高德地图展示地理信息
• 🔐 完善的权限管理：基于 RBAC 的权限控制系统
• 🧩 微前端架构：支持 iframe 嵌入和 postMessage 通信
• 📱 响应式适配：支持不同分辨率屏幕的自适应缩放
• 🚀 性能优化：代码分割、资源压缩、懒加载等优化策略

---

🛠️ 技术栈

核心框架

• Vue 3.5.13 - 渐进式 JavaScript 框架
• Vite 6.3.5 - 下一代前端构建工具
• Vue Router 4.5.1 - 官方路由管理器
• Pinia 3.0.3 - Vue 官方状态管理库

UI 组件库

• Element Plus 2.10.2 - 基于 Vue 3 的组件库
• @element-plus/icons-vue - Element Plus 图标库

数据可视化

• ECharts 5.6.0 - 强大的数据可视化图表库

地图服务

• @amap/amap-jsapi-loader - 高德地图 JS API 加载器

微前端

• @micro-zoe/micro-app - 微前端框架

工具库

• axios - HTTP 客户端
• js-cookie - Cookie 操作
• jsencrypt - RSA 加密
• crypto-js - 加密算法库
• vue3-seamless-scroll - 无缝滚动组件

---

📁 项目结构

traffic-capacity-bigscreen/
├── src/
│   ├── api/              # API 接口封装
│   │   ├── auth.js       # 认证相关接口
│   │   └── bus.js        # 公交模块接口
│   ├── components/       # 公共组件
│   │   ├── echarts/      # ECharts 图表组件
│   │   ├── mapLeft/      # 地图左侧组件
│   │   ├── header/       # 头部导航组件
│   │   ├── scaleBox/     # 屏幕适配组件
│   │   └── ...
│   ├── router/           # 路由配置
│   │   └── index.js      # 路由守卫和权限控制
│   ├── store/            # 状态管理
│   │   └── model/        # Pinia stores
│   ├── utils/            # 工具函数
│   │   ├── http/         # HTTP 请求封装
│   │   └── auth.js       # 认证工具
│   └── view/             # 页面组件
│       ├── home/         # 能力评价首页
│       ├── bus/          # 公交模块
│       ├── rail/         # 轨道模块
│       ├── filiale/      # 分公司模块
│       ├── erp-home/     # ERP 首页
│       └── login/        # 登录页面
├── vite.config.js        # Vite 配置文件
└── package.json          # 项目依赖

---

🎯 核心功能模块

1. 能力评价首页 (/home)

展示交通运营能力的综合评价，包括：

• 左侧：关键指标展示
• 中间：核心数据图表（柱状图、折线图等）
• 右侧：详细数据列表

2. 公交模块 (/bus)

公交运营数据可视化：

• 地图展示：公交线路和站点分布
• 数据统计：运营车辆数、客流量等
• 实时监控：线路运行状态

3. 轨道模块 (/rail)

轨道交通数据展示：

• 线路图：轨道线路可视化
• 运营数据：发车频次、客流量统计
• 站点信息：各站点详细数据

4. 分公司模块 (/filiale)

分公司运营情况：

• 分公司列表：各分公司基本信息
• 数据对比：不同分公司数据对比
• 趋势分析：运营趋势图表

5. ERP 集成 (/erp-home)

通过 iframe 集成 ERP 系统：

• Token 认证：自动获取 ERP token
• 跨域处理：通过代理解决跨域问题
• 环境适配：开发/测试/生产环境自动切换

---

🔑 核心技术实现

1. 路由权限控制

// src/router/index.js
router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore()
  
  // 权限检查函数
  const hasPermission = (permission) => {
    if (!permission) return true
    if (authStore.permissions?.includes('*:*:*')) return true
    return authStore.permissions?.includes(permission)
  }
  
  // 根据权限动态路由
  const resolveDefaultRoute = () => {
    const hasErpHome = hasPermission('bigScreen:homes')
    const hasBus = hasPermission('bigScreen:bus')
    const hasRail = hasPermission('bigScreen:rail')
    const hasHome = hasPermission('bigScreen:home')
    
    if (hasErpHome) return '/erp-home'
    if (hasBus && hasRail) return hasHome ? '/home' : '/bus'
    // ... 其他逻辑
  }
  
  // 路由守卫逻辑
  // ...
})

特点：

• 基于 RBAC 的权限模型
• 动态路由解析
• Token 自动刷新机制
• 支持 URL 参数自动登录

2. 屏幕自适应缩放

<!-- src/components/scaleBox/index.vue -->
<template>
  <div class="scale-box" :style="scaleStyle">
    <slot></slot>
  </div>
</template>

<script setup>
import { computed, onMounted, onBeforeUnmount, ref } from 'vue'

const scale = ref(1)
const baseWidth = 1920  // 设计稿宽度
const baseHeight = 1080  // 设计稿高度

const scaleStyle = computed(() => {
  return {
    transform: `scale(${scale.value})`,
    transformOrigin: 'top left'
  }
})

const updateScale = () => {
  const { innerWidth, innerHeight } = window
  const scaleX = innerWidth / baseWidth
  const scaleY = innerHeight / baseHeight
  scale.value = Math.min(scaleX, scaleY)
}

onMounted(() => {
  updateScale()
  window.addEventListener('resize', updateScale)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateScale)
})
</script>

特点：

• 基于设计稿的等比缩放
• 自动适配不同分辨率
• 保持宽高比不变形

3. iframe 通信机制

// src/App.vue
onMounted(() => {
  messageHandler = (event) => {
    const data = event?.data || {}
    if (data && data.path === 'nnts') {
      // 收到父页面 postMessage，跳转到指定页面
      router.replace('/home')
    }
  }
  window.addEventListener('message', messageHandler)
})

应用场景：

• 支持被其他系统通过 iframe 嵌入
• 通过 postMessage 接收外部指令
• 实现跨域页面通信

4. 环境配置管理

// src/api/auth.js
export function getErpToken(tokenParam) {
  const isDev = import.meta.env.DEV
  const apiUrl = import.meta.env.VITE_API_URL || ''
  
  let erpApiUrl
  if (isDev) {
    // 开发环境：使用代理
    erpApiUrl = `/erpbackend/system/auth/tokenLogin`
  } else {
    // 判断测试/生产环境
    const isTestEnv = apiUrl.includes('10.88.128.50') || 
                      apiUrl.includes('test') ||
                      apiUrl.includes('18080')
    
    if (isTestEnv) {
      // 测试环境：HTTP
      erpApiUrl = `http://10.99.213.43/erpbackend/system/auth/tokenLogin`
    } else {
      // 生产环境：HTTPS
      erpApiUrl = `https://10.99.213.43/erpbackend/system/auth/tokenLogin`
    }
  }
  
  return axios.get(erpApiUrl, { params: { token: tokenParam } })
}

特点：

• 开发/测试/生产环境自动切换
• 支持不同协议（HTTP/HTTPS）
• 通过环境变量灵活配置

5. HTTP 请求封装

// src/utils/http/index.js
const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 50000
})

// 请求拦截器：自动添加 token
service.interceptors.request.use(config => {
  const token = authStore.token || getToken()
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
})

// 响应拦截器：统一错误处理
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code === 200) return res
    
    // Token 过期自动刷新
    if ([401, 50008, 50012, 50014].includes(res.code)) {
      return refreshToken().then(newToken => {
        // 重新发起请求
      })
    }
    // ... 其他错误处理
  }
)

特点：

• 统一错误处理
• Token 自动刷新
• 请求/响应拦截
• 支持文件上传

---

🚀 性能优化

1. 代码分割

// vite.config.js
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia'],
        echarts: ['echarts'],
        elementPlus: ['element-plus']
      }
    }
  }
}

2. 资源压缩

// vite.config.js
plugins: [
  viteCompression({
    algorithm: 'gzip',
    threshold: 10240, // 10KB 以上才压缩
    deleteOriginFile: false
  })
]

3. 组件懒加载

// 路由懒加载
component: () => import('@/view/home/index.vue')

4. 自动导入

// vite.config.js
plugins: [
  Components({
    resolvers: [ElementPlusResolver()],
    dirs: ['src/components']
  }),
  AutoImport({
    imports: ['vue', 'vue-router', '@vueuse/core', 'pinia']
  })
]

---

🔧 开发指南

安装依赖

npm install
# 或
pnpm install

启动开发服务器

npm run dev

构建生产版本

# 测试环境
npm run build:test

# 生产环境
npm run build:prod

环境变量配置

创建 .env.test 文件：

VITE_API_URL=http://10.88.128.50:18080
VITE_BASE_URL=/traffic-capacity-bigscreen/
VITE_PORT=5173
VITE_VERSION=1.0.0

---

📦 部署说明

Nginx 配置

server {
    listen 80;
    server_name your-domain.com;
    
    root /path/to/traffic-capacity-bigscreen;
    index index.html;
    
    # 前端路由
    location /traffic-capacity-bigscreen {
        try_files $uri $uri/ /traffic-capacity-bigscreen/index.html;
    }
    
    # API 代理
    location /capacityApi {
        proxy_pass http://10.88.128.52:18080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # ERP API 代理（解决跨域）
    location /erpbackend {
        proxy_pass https://10.99.213.43;
        add_header Access-Control-Allow-Origin * always;
    }
}

---

🎨 UI 设计亮点

1. 深色主题：采用深蓝色背景（#000e1f），适合大屏展示
2. 数据卡片：使用渐变边框和阴影效果，突出数据展示
3. 动画效果：数字滚动动画、图表过渡动画
4. 响应式布局：三栏布局，左右固定，中间自适应

---

🔐 安全特性

1. Token 认证：基于 JWT 的 token 认证机制
2. 权限控制：路由级别的权限验证
3. 加密传输：敏感数据加密传输
4. XSS 防护：Vue 内置的 XSS 防护

---

📈 项目亮点总结

✅ 现代化技术栈：Vue 3 + Vite + Pinia，开发体验优秀
✅ 完善的权限系统：基于 RBAC 的权限控制
✅ 丰富的可视化：ECharts + 高德地图，数据展示直观
✅ 微前端支持：支持 iframe 嵌入和跨域通信
✅ 性能优化：代码分割、懒加载、资源压缩
✅ 环境适配：开发/测试/生产环境自动切换
✅ 响应式设计：适配不同分辨率屏幕

---

🤝 技术交流

如果这个项目对你有帮助，欢迎：

• ⭐ Star 本项目
• 🐛 提交 Issue
• 💡 提出建议
• 📝 分享使用经验

---

📄 许可证

本项目采用 MIT 许可证。

---

作者：谈深
日期：2026-01-27
版本：v1.0.0

---

💡 提示：本文档基于实际项目代码编写，涵盖了项目的核心技术点和实现细节。如果你也在开发类似的大屏项目，希望这些经验能对你有所帮助！