SMART-ELE 是一个专业的变电站数字孪生大屏监控系统，采用现代化的前端技术栈构建。系统通过 3D 可视化技术，实时展示变电站的运行状态、设备监控数据和告警信息，为电力运维人员提供直观、高效的监控体验。

• 3D 数字孪生：基于 Three.js 构建的高精度 3D 变电站模型
• 实时监控：实时显示设备运行状态和关键参数
• 数据可视化：使用 ECharts 展示各类监控数据图表
• 智能告警：设备异常状态实时告警和可视化提示
• 响应式设计：支持多种屏幕尺寸，自适应布局

• 现代化框架：Vue 3 + Composition API + TypeScript
• 3D 渲染引擎：Three.js 实现高性能 3D 场景渲染
• 数据可视化：ECharts 图表库支持多种图表类型
• 动画效果：GSAP 和 Animate.css 提供流畅动画体验
• 自适应布局：autofit.js 实现多分辨率屏幕适配
• 代码规范：ESLint + Prettier + Stylelint 保证代码质量

MF-StationMonitor/
├── src/
│   ├── components/          # Vue 组件
│   │   ├── Layout*.vue     # 布局组件
│   │   └── WidgetPanel*.vue # 功能面板组件
│   ├── hooks/              # 自定义 Hooks
│   │   ├── useEcharts.ts   # ECharts 图表逻辑
│   │   ├── useStation.ts   # 变电站业务逻辑
│   │   └── useThree.ts     # Three.js 3D 场景逻辑
│   ├── assets/             # 静态资源
│   ├── App.vue             # 根组件
│   └── main.ts             # 应用入口
├── public/                 # 公共资源
├── docs/                   # 构建输出目录
└── screenshots/            # 项目截图

• Node.js >= 18.0.0
• npm/yarn/pnpm

# 使用 npm
npm install

# 使用 yarn
yarn install

# 使用 pnpm
pnpm install

# 启动开发服务器
npm run dev

# 或使用 yarn
yarn dev

# 或使用 pnpm
pnpm dev

访问 http://localhost:8090 查看应用

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - JavaScript 的超集，提供类型安全
• Three.js - 3D 图形库，用于构建 3D 场景
• ECharts - 数据可视化图表库
• GSAP - 高性能动画库
• autofit.js - 屏幕自适应解决方案

• Vite - 现代化构建工具
• ESLint - 代码质量检查
• Prettier - 代码格式化
• Stylelint - CSS 代码规范检查

# 开发环境
npm run dev              # 启动开发服务器

# 构建相关
npm run build            # 构建生产版本
npm run build-only       # 仅构建，不进行类型检查
npm run preview          # 预览构建结果

# 代码质量
npm run type-check       # TypeScript 类型检查
npm run lint             # ESLint 代码检查
npm run format           # Prettier 代码格式化
npm run lint:style       # Stylelint 样式检查

项目支持多种屏幕分辨率，在 src/main.ts 中配置：

const ScreenSize = {
  big: [2560, 1440],      // 大屏幕
  normal: [1920, 1080],   // 标准屏幕
  small: [1280, 720],     // 小屏幕
}['normal']  // 当前使用的分辨率

在 vite.config.ts 中可以修改开发服务器设置：

server: {
  host: '0.0.0.0',
  port: 8090,
  open: true,
  proxy: {
    '/bridge': {
      target: 'http://your-api-server:port',
      changeOrigin: true,
    },
  },
}

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

• Vue.js - 渐进式 JavaScript 框架
• Three.js - 3D 图形库
• ECharts - 数据可视化图表库
• Vite - 现代化构建工具