基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析

一、项目背景介绍：

随着电动汽车的普及，城市中充电设施的需求日益增长。为了提高充电设施的管理效率和用户体验，本文提出了一个停车场充电桩数据可视化平台的设计与实现。该平台旨在集成、处理并展示来自多个充电桩的实时数据，帮助管理者进行有效监控和决策支持，同时为车主提供便捷、直观的充电信息查询服务。
首先，本研究分析了现代停车场充电桩管理的业务需求，确定了平台的主要功能模块，包括管理员登录，数据源excel导入、数据清洗、大屏数据展示、以及不同维度数据分析图表展示等。在系统架构设计上，采用了模块化的设计思想，确保了系统的可扩展性和维护性。
其次，针对数据采集与处理问题，数据来源于真实的城市充电桩历史带出记录。利用数据处理技术和数据库，对收集到的数据进行存储、清洗和分析，保证了数据的准确性和可靠性。
在可视化界面设计方面，采用了现代网页技术（HTML5, CSS3, JavaScript）以及渐进式前端框架Vue.js,结合数据可视化库（ECharts）以及后端JAVA语言SpringBoot对数据进行快速清洗，过滤，并讲数据存储到MySQL数据库中，各个环节相扣充电桩数据可视化平台系统。
最后，通过对一系列真实不同月份的数据进行模拟测试，验证了所提出平台的有效性和实用性。测试结果显示，该平台能够准确反映充电桩的运行状况，为用户提供了直观的数据视图和便捷的操作体验，同时为停车场管理者提供了强有力的数据支持和决策工具。

二、项目技术简介：

1. JAVA：Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
2. Vue：Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。
   Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， 是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。
3. Element-UI：Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
4. Spring：Spring框架是一个开放源代码的J2EE应用程序框架，由Rod Johnson发起，是针对bean的生命周期进行管理的轻量级容器（lightweight container）。 Spring解决了开发者在J2EE开发中遇到的许多常见的问题，提供了功能强大IOC、AOP及Web MVC等功能。Spring可以单独应用于构筑应用程序，也可以和Struts、Webwork、Tapestry等众多Web框架组合使用，并且可以与 Swing等桌面应用程序AP组合。因此， Spring不仅仅能应用于J2EE应用程序之中，也可以应用于桌面应用程序以及小应用程序之中。Spring框架主要由七部分组成，分别是 Spring Core、 Spring AOP、 Spring ORM、 Spring DAO、Spring Context、 Spring Web和 Spring Web MVC。
5. SpringBoot：Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。
6. Mybatis-Plus：MyBatis-Plus（简称 MP）是一个 MyBatis的增强工具，在 MyBatis 的基础上只做增强不做改变，为 简化开发、提高效率而生。

三、系统功能模块介绍：

四、数据库设计：

1：'管理员'（admin）

字段名	类型	默认值	列注释
id	bigint	NULL	主键ID
user_name	varchar	NULL	用户名(select)
pass_word	varchar	NULL	密码
head_img	varchar	NULL	头像(img)
nick_name	varchar	NULL	姓名
create_time	datetime	NULL	创建时间

2：'订单数据表'（order_info）

字段名	类型	默认值	列注释
id	bigint	NULL	主键ID
order_number	varchar	NULL	订单号
order_type	varchar	NULL	订单类型
charging_method	varchar	NULL	充电方式
charging_user	varchar	NULL	充电用户
user_nickname	varchar	NULL	用户昵称
card_number	varchar	NULL	卡号
start_time	datetime	NULL	开始时间
end_time	datetime	NULL	结束时间
charging_duration	decimal	NULL	充电时长
charging_quantity	decimal	NULL	充电电量（度）
start_soc	int	NULL	开始Soc（%）
end_soc	int	NULL	结束Soc（%）
charging_mode	varchar	NULL	充电模式
start_time_seconds	int	NULL	启动时间（秒）
station_operator	varchar	NULL	电站运营商
city_name	varchar	NULL	城市名称
charging_station	varchar	NULL	充电场站
station_id	int	NULL	电站id
charging_terminal	varchar	NULL	充电终端
terminal_code	varchar	NULL	终端编码
pile_type	varchar	NULL	电桩类型
pile_power	decimal	NULL	电桩功率（kW）
operator_property	varchar	NULL	运营商属性
institution_name	varchar	NULL	机构名称
license_plate	varchar	NULL	车牌号
vehicle_model	varchar	NULL	车型
vehicle_brand	varchar	NULL	车品牌
vehicle_remarks	varchar	NULL	车辆备注
charging_vin	varchar	NULL	充电VIN
binding_vin	varchar	NULL	绑定VIN
exception_reason	varchar	NULL	异常原因
flow_interconnect_number	varchar	NULL	流量互联单号
pile_interconnect_number	varchar	NULL	桩互联单号
transaction_attributes	varchar	NULL	交易属性
major_customer_order	varchar	NULL	大客户订单
settlement_time	datetime	NULL	结算时间
electricity_fee_amount	decimal	NULL	电费金额（元）
service_fee_amount	decimal	NULL	服务费金额（元）
order_amount	decimal	NULL	订单金额（元）
operator_activity_electricity_discount	decimal	NULL	运营商活动抵扣电费（元）
operator_activity_service_fee_discount	decimal	NULL	运营商活动抵扣服务费（元）
operator_activity_discount_amount	decimal	NULL	运营商活动抵扣金额（元）
operator_discount_electricity_fee	decimal	NULL	运营商优惠电费（元）
operator_discount_service_fee	decimal	NULL	运营商优惠服务费（元）
operator_discount_amount	decimal	NULL	运营商优惠金额（元）
plan_discount_electricity_fee	decimal	NULL	方案优惠电费（元）
plan_discount_service_fee	decimal	NULL	方案优惠服务费（元）
agency_sales_order_number	varchar	NULL	代运营包销单号
operator_receivable_electricity_fee	decimal	NULL	运营商应收电费（元）
operator_receivable_service_fee	decimal	NULL	运营商应收服务费（元）
operator_receivable_amount	decimal	NULL	运营商应收金额（元）
peak_electricity_reading	decimal	NULL	尖电度数
peak_electricity_degree	decimal	NULL	峰电度数
flat_electricity_degree	decimal	NULL	平电度数
valley_electricity_degree	decimal	NULL	谷电度数
peak_electricity_fee	decimal	NULL	尖电费
hump_electricity_fee	decimal	NULL	峰电费
flat_electricity_fee	decimal	NULL	平电费
valley_electricity_fee	decimal	NULL	谷电费
peak_service_fee	decimal	NULL	尖服务费
hump_service_fee	decimal	NULL	峰服务费
flat_service_fee	decimal	NULL	平服务费
valley_service_fee	decimal	NULL	谷服务费
peak_charging_time	decimal	NULL	尖充电时间
hump_charging_time	decimal	NULL	峰充电时间
flat_charging_time	decimal	NULL	平充电时间
valley_charging_time	decimal	NULL	谷充电时间
purchasing_company	varchar	NULL	采购公司
electricity_station_fee_amount	decimal	NULL	电站价电费金额
service_station_fee_amount	decimal	NULL	电站价服务费金额
total_amount	decimal	NULL	电站价总金额

五、功能模块：

1. 管理员用户登录：管理员在通过登录页面输入自己的账号密码进行登录后,会默认进入到后台系统首页

1. 数据大屏展示：管理员登录之后进入系统首页，系统首页即是一个大屏数据展示页面，主要从以下几个角度对数据进行展示。数据汇总，数据汇总展示系统分析的数据条数，以及数据中对应的月份数量，用户行为分析，行为分析通过柱状图的形式展示前50名用户的充电时长的车牌号，充电次数排名，对前50名充电次数的车牌号进行滚动展示，充电月份统计，通过折线图的形式展示对应月份每个月的总充电次数，充电方式统计，通过饼图的形式展示不同充电方式的总次数。

   

2. 月度常规数据报表：通过月度报表，可以看到不同月份的总用电数，电费总金额，峰电度数，平电度数，谷电度数，峰电费，平电费，谷电费，总服务费，服务费优惠金，实际服务费。

   

3. 用户行为分析：在本节中，系统针对不同月份进行车牌充电时长总额的统计，并且将结果用柱状图进行展示

   

4. 各终端使用频率分析：系统管理员在选择月份之后可以看到当月充电数据中不同终端的使用比例，最终以南丁格尔玫瑰图进行展示

   

5. 不同时段分析：管理员通过一个具体的月份时间段，来对峰电度数，平电度数，谷电度数进行一个分月份的统计

   

六、代码示例：

    @GetMapping("/index")
    public ReturnMsg indexData() {
        HashMap<String, Object> res = new HashMap<>();
        // 当前数据条数
        int total = this.baseService.count();
        res.put("total", total);
        // 每个月份所占比例
        List<EchartsData> echarts7 = baseService.echarts7();
        res.put("echarts7", echarts7);
        // 月份总数
        res.put("monthNum", echarts7.size());
        // 充电次数排名
        List<EchartsData> echarts8 = baseService.echarts8();
        res.put("echarts8", echarts8);
        // 中间车牌
        List<EchartsData> echarts2 = baseService.echarts2(new OrderInfoDTO());
        res.put("echarts2", echarts2);

        List<EchartsData> echarts9 = baseService.echarts9();
        res.put("echarts9", echarts9);

        List<EchartsData> echarts10 = baseService.echarts10();
        res.put("echarts10", echarts10);

        return ReturnMsg.ok(res);
    }

七、项目总结：

基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析的开发制作，从题目确定到成品完成，自己投入的精力与心血是非常多的。从基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析的前台页面实现，到基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析的后台代码的编辑，我用到的软件包括了数据库软件MySQL，Java开发工具IDEA，办公软件Office，浏览器软件Fireworks，图像处理软件Photoshop等，这也是我第一次使用Java语言，开发的这个比较简单的基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析。

基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析开发过程中，自己之前觉得比较抽象的许多门课程，例如数据库原理，软件工程，动态网站开发等课程开始变得很清晰，只有自己独立开发程序，才会觉得这些开发类的课程在实践中具有的重要作用。为了让自己设计的作品能够顺利的完成，我把所学知识全部运用在程序的开发流程中，包括了程序的需求分析环节，程序的编码环节，程序的测试环节等，让程序软件在开发周期内完成制作，并能够保证程序质量达标，力求程序开发流程规范化，程序对应的配套文档标准化。

本次开发的系统整体界面还是比较清晰简明，功能上面考虑得比较全，几乎可以满足用户使用要求。尽管我对这次的毕设付出了许多的努力，但是程序还是有很多不足的地方，系统界面整体感觉还行，但是字体字号的选取上面还是有些不符合现实审美，在程序的CSS样式编码上面，我还有许多不熟悉的地方，虽然经过反复的测试与调试选中了现在这样的程序界面，但是我还是明显感觉到自己对一些常用CSS样式的不熟悉，编码过程中，我还要多次进行资料查看才知道。另外我编写的代码写作不是很规范，可读性比较差，幸运的是，我最终还是实现了系统中所要求的功能。

基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析现已完成了开发，除了基本功能可以符合用户需求外，在页面设计层面上没有融入更多的设计元素，需要从美学角度进行优化，另外在程序的代码层面，也有许多重合部分，需要进行整理归类，让代码变得更加的简洁。

实践出真知，但是知识也是通过实践变得更加深刻，这次作品制作，让自己的专业知识水平与解决问题的能力得到了提高。也让自己更加明白活到老学到老的真正含义。

总的说来，这次编写毕业设计作品，我真正锻炼了自己的实际操作能力，以前只知道理论知识，现在通过实践，我对理论知识的认识变得更加深刻，由于编写程序时间比较短暂，程序开发期间遇到过很多坎坷，但最后都通过老师还有同学帮忙解决了，可以说这次的毕设作品进展得还算顺利。