# LargeScreen2

**Repository Path**: lizhuosss/LargeScreen2

## Basic Information

- **Project Name**: LargeScreen2
- **Description**: 智慧楼宇可视化大屏是一个纯前端静态展示模板，技术点Vue3+Vite+jJavaScript+TypeScript,采用现代化前端技术栈构建，已成功交付多个客户使用。项目提供完整的可视化解决方案，适用于楼宇管理的多维度数据展示。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-10-30
- **Last Updated**: 2025-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目整体内容

```markdown
# 智慧楼宇可视化大屏项目文档

## 项目概述
智慧楼宇可视化大屏是一个纯前端静态展示模板，采用现代化前端技术栈构建，已成功交付多个客户使用。项目提供完整的可视化解决方案，适用于楼宇管理的多维度数据展示。

## 功能模块

### 核心功能模块
- **楼宇态势**
  - 实时展示楼宇整体运行状态
  - 人员流动热力分布图
  - 设备运行状态监控

- **便捷通行**
  - 访问详情统计
  - 通行记录查询
  - 车位使用状态实时监控

- **监控告警**
  - 安防监控可视化
  - 异常事件告警
  - 历史告警记录查询

- **能源消耗**
  - 实时能耗监测
  - 能源使用趋势分析
  - 节能建议报告

## 技术架构

### 核心技术栈
| 技术          | 版本     | 用途                     |
|---------------|----------|--------------------------|
| Vue           | 3.x      | 前端框架                 |
| Vite          | 4.x      | 构建工具                 |
| Element Plus  | 2.x      | UI组件库                 |
| ECharts       | 5.x      | 数据可视化               |
| Highcharts    | 11.x     | 高级图表展示             |

### 开发环境要求
- Node.js ≥ 18.x
- pnpm ≥ 7.x (推荐) 或 npm ≥ 8.x

## 项目配置

### 安装与运行
```bash
# 安装依赖
pnpm install # 推荐
或 npm install

# 开发模式运行
npm run dev

# 生产环境构建
npm run build
```
构建后生成`dist`目录，可直接部署到Nginx等Web服务器。

## Mock数据配置
项目内置Mock数据服务，用于前端开发阶段：
- 修改`mock/api/`目录下的JSON文件可调整模拟数据
- 接口路径配置在`mock/services.js`中
- 开发环境下自动启用Mock服务

## CDN加速配置（七牛云）

### 配置步骤
1. 修改`qiniu-upload-prefix.js`：
   ```js
   module.exports = {
     accessKey: '您的AccessKey',
     secretKey: '您的SecretKey',
     bucket: '存储空间名称',
     zone: '存储区域代号' // z0-华东, z1-华北等
   }
   ```

2. （可选）调整`vite.config.js`中的publicPath：
   ```js
   base: process.env.NODE_ENV === 'production' 
     ? 'https://cdn.yourdomain.com/' 
     : '/'
   ```

3. 构建后自动上传：
   ```bash
   npm run build && node qiniu.js
   ```

## 技术参考资料
| 技术        | 官方地址                                  |
|-------------|------------------------------------------|
| Vue         | https://cn.vuejs.org/                    |
| Element Plus| https://element-plus.org/                |
| ECharts     | https://echarts.apache.org/zh/index.html |
| Highcharts  | https://www.highcharts.com.cn/           |
| 七牛云      | https://developer.qiniu.com/             |
| Node.js     | https://nodejs.org/zh-cn/                |

## 开发建议
1. **组件开发规范**
   - 图表组件统一放在`src/components/charts/`目录
   - 每个功能模块对应独立的子路由
   - 遵循Element Plus的props命名规范

2. **性能优化建议**
   - 大屏页面使用`v-if`按需加载组件
   - 图表数据超过1000条时启用数据降采样
   - 静态资源建议全部走CDN加速

3. **扩展开发**
   - 新增模块建议复制现有模块目录结构
   - 图表配置可复用`src/utils/chartOptions.js`中的基础配置
   - 接口适配层在`src/api/`目录下扩展

## 注意事项
1. 生产环境部署前务必：
   - 检查`config.js`中的API地址配置
   - 验证CDN资源加载是否正常
   - 测试大屏在不同分辨率下的显示效果

2. 如需对接真实接口：
   - 关闭Mock服务（注释vite.config中的Mock插件）
   - 在`src/api/`中实现真实接口调用
   - 注意配置生产环境跨域策略