从零搭建企业级能耗监控平台，记录开发过程中的技术选型、核心实现与踩坑心得

📌 一、项目背景

随着“双碳”政策的推进，企业对能源消耗的精细化管理需求日益迫切。螺蛳粉科技公司作为一家大型食品生产企业，拥有机加工车间、运输车间、公用设施、办公室、试验中心等多个能耗单元，每月电费开支巨大。

传统的Excel手工统计方式存在三大痛点：

• ❌ 数据滞后：月底才能统计上月能耗，无法及时发现问题

• ❌ 人工易错：多车间数据汇总容易出错，核对耗时

• ❌ 缺乏直观：纯数字报表难以快速定位能耗异常点

基于以上问题，我开发了赛克能源管理系统，实现能耗数据的实时查询、可视化展示和报表导出功能。

🛠️ 二、技术选型

2.1 技术栈概览

层级	技术	选型理由
前端	Vue 3 + Vite	响应式开发体验，构建速度快
UI组件	原生CSS + ECharts	轻量级，图表功能强大
HTTP客户端	Axios	Promise风格，拦截器完善
后端	Spring Boot 2.7	生态丰富，快速构建REST API
数据库	MySQL 8.0 + MyBatis-Plus	主流组合，开发效率高
可视化	Apache ECharts	百度开源，图表种类丰富

2.2 项目结构

text

vue-frontend/
├── src/
│   ├── components/
│   │   ├── Login.vue          # 登录页面
│   │   ├── EnergyQuery.vue    # 能耗查询页面
│   │   └── EnergyChart.vue    # 能耗图表页面
│   ├── router/
│   │   └── index.js           # 路由配置
│   └── main.js                # 入口文件

💻 三、核心功能实现

3.1 登录认证模块

采用JWT + Session结合的方式，后端验证用户凭证后返回用户信息：

java

@RestController
@RequestMapping("/api")
public class LoginController {
    
    @Autowired
    private UserService userService;
    
    @PostMapping("/login")
    public Map<String, Object> login(@RequestBody Map<String, String> params) {
        String username = params.get("username");
        String password = params.get("password");
        
        User user = userService.login(username, password);
        Map<String, Object> result = new HashMap<>();
        
        if (user != null) {
            result.put("success", true);
            result.put("message", "登录成功");
            result.put("data", user);
        } else {
            result.put("success", false);
            result.put("message", "用户名或密码错误");
        }
        return result;
    }
}

前端使用Axios发送请求并处理响应：

javascript

const handleLogin = async () => {
  try {
    const response = await axios.post('http://localhost:9763/home/api/login', {
      username: username.value,
      password: password.value
    })
    
    if (response.data.success) {
      localStorage.setItem('user', JSON.stringify(response.data.data))
      router.push('/energy')
    }
  } catch (error) {
    errorMessage.value = '登录失败，请检查网络连接'
  }
}

3.2 能耗数据可视化

使用ECharts绘制折线图，支持周度/月度切换、数据缩放、图片保存等功能：

javascript

// ECharts 核心配置
const option = {
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: dates },
  yAxis: { type: 'value', name: '能耗 (kWh)' },
  series: [{
    name: '机加工车间',
    type: 'line',
    data: [2800, 2950, 3100, 3050, 2900]
  }],
  toolbox: {
    feature: {
      saveAsImage: { title: '保存为图片' },
      dataZoom: { title: { zoom: '区域缩放', back: '还原' } }
    }
  }
}

3.3 数据导出功能

实现CSV格式导出，包含BOM头解决中文乱码问题：

javascript

const exportData = () => {
  let csvContent = '\uFEFF日期,机加工车间,运输车间,总计\n'
  chartData.value.forEach(item => {
    csvContent += `${item.date},${item.machining},${item.transport},${item.total}\n`
  })
  
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `能耗数据_${dateRange.value.start}_至_${dateRange.value.end}.csv`
  link.click()
}

🐛 四、踩坑与解决

4.1 问题1：跨域请求被拦截

现象：前端请求后端接口时，浏览器报CORS错误

解决方案：后端添加CORS配置类

java

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8081")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

4.2 问题2：数据库表不存在

现象：登录时报错 Table 'ems.ems_user' doesn't exist

解决方案：创建对应的数据库表

sql

CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `name` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
);

4.3 问题3：图表横坐标过于紧凑

现象：日期过多时，X轴标签挤在一起无法辨认

解决方案：动态计算旋转角度和显示间隔

javascript

const needRotate = dates.length > 10
const needInterval = dates.length > 15

xAxis: {
  axisLabel: {
    rotate: needRotate ? 35 : 0,
    interval: needInterval ? Math.floor(dates.length / 10) : 0
  }
}

📊 五、成果展示

5.1 登录页面

https://img-blog.csdnimg.cn/direct/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2%E6%88%AA%E5%9B%BE

简洁的左右布局，左侧展示校园风景，右侧为登录表单，支持回车键快速登录。

5.2 能耗查询页面

https://img-blog.csdnimg.cn/direct/%E6%9F%A5%E8%AF%A2%E7%95%8C%E9%9D%A2%E6%88%AA%E5%9B%BE

支持时间范围选择、多车间筛选，点击“查询能耗数据”跳转至图表页面。

5.3 能耗趋势图表

https://img-blog.csdnimg.cn/direct/%E5%9B%BE%E8%A1%A8%E6%88%AA%E5%9B%BE

折线图清晰展示各车间能耗变化趋势，支持：

• 📈 周度/月度视图切换

• 🖱️ 鼠标悬停显示详细数值

• 💾 一键保存为图片

• 🔍 区域缩放查看细节

5.4 数据明细表

https://img-blog.csdnimg.cn/direct/%E8%A1%A8%E6%A0%BC%E6%88%AA%E5%9B%BE

下方展示详细的能耗数据表格，包含每日各车间能耗及总计，支持导出CSV文件。

💡 六、心得体会

6.1 技术收获

1. 前后端分离架构：明确了API设计规范，使用统一的Response格式返回数据

2. 组件化开发：Vue的组件复用大大提高了开发效率

3. 数据处理技巧：学会了用Map结构处理多维度数据聚合

6.2 开发感悟

• ⭐ 调试是程序员的基本功：遇到问题不要慌，善用浏览器开发者工具的Network和Console面板

• ⭐ API优先设计：先定义好接口文档，再分别开发前后端，能减少大量联调问题

• ⭐ 用户体验很重要：添加加载状态、错误提示、空状态展示，让应用更友好

6.3 可优化方向

• 🔄 接入WebSocket实现实时能耗监控

• 📱 开发移动端H5版本，方便移动办公

• 🤖 加入AI预测模块，基于历史数据预测未来能耗趋势

🎯 七、总结

通过本次项目实践，我完整经历了一个企业级Web应用从需求分析、技术选型、开发实现到部署上线的全流程。Vue3 + SpringBoot的组合开发效率高、社区活跃，非常适合中小型项目快速落地。

ECharts作为可视化工具，配置灵活、文档完善，能够满足大部分数据展示需求。项目开发过程中遇到的跨域、数据库连接、图表适配等问题，最终都通过查阅资料逐一解决，这些实战经验比书本知识更加宝贵。

---

项目源码：GitHub仓库链接（此处可附上你的仓库地址）

在线演示：部署后的访问地址（可选）

---

💬 欢迎在评论区交流讨论，如有问题我会及时回复！

📧 联系邮箱：your-email@example.com