最后结果如下图所示：
话不多说，直接上代码
temperature.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ page isELIgnored="false"%><%@ taglib uri="/jsp/jstl/core" prefix="c"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";response.setHeader("Pragma", "no-cache");response.addHeader("Cache-Control", "must-revalidate");response.addHeader("Cache-Control", "no-cache");response.addHeader("Cache-Control", "no-store");response.setDateHeader("Expires", 0);%><title>XX远程维护系统</title><!--js全局变量，权限管理start--><script type='text/javascript'>var basePath = '<%=basePath%>';(function(){ USER_SESSION = <%=session.getAttribute("BACKEND_SESSION_USER_KEY")%>;BACKEND_SESSION_USER_AREA_KEY = <%=session.getAttribute("BACKEND_SESSION_USER_AREA_KEY")%>;if(USER_SESSION == null){window.location.href = "<%=basePath%>" + "resources/backendLogin.jsp";}})();var isDeleteState = '0';var login_Account = {loginAccount : USER_SESSION.username};var isYes = 'No';var MyDataStatic;var textData;</script><!--js全局变量，权限管理end--><script src="../resources/temperature/temperature.js"></script></head><body><c:choose><c:when test="${sessionScope.UserRole==0 }"><div class="demoTable"><!-- 设备ID： --><form class="layui-form"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">设备ID</label><div class="layui-input-inline"><select name="SelectEquipmentID" id="SelectEquipmentID"lay-verify="required" lay-search=""lay-filter="SelectEquipmentID"><option value="">请选择设备ID</option></select></div></div><div class="layui-inline"><label class="layui-form-label">开始时间:</label><div class="layui-input-inline"><input type="text" class="layui-input" id="startTime"placeholder="请输入开始时间"></div></div><div class="layui-inline"><label class="layui-form-label">结束时间:</label><div class="layui-input-inline"><input type="text" class="layui-input" id="endTime"placeholder="请输入结束时间"></div></div><div class="layui-inline"><a class="layui-btn" href="#" onclick="searchByTime()">查询</a></div></div></form></div><!-- 显示折线图 --><div id="AdminVision" style="width: 100%; height: 400px;"></div></c:when><c:otherwise><!-- 显示折线图 --><div id="OrdinaryVision" style="width: 100%; height: 400px;"></div></c:otherwise></c:choose></body></html>
temperature.js
//获取用户var admin = USER_SESSION.username;var role = USER_SESSION.role;//根据时间段，查询温度数据function searchByTime(){var selectEquipment = $("#SelectEquipmentID").val();var startTime = $("#startTime").val();var endTime = $("#endTime").val();loadTemperatureEcharts(selectEquipment,startTime,endTime);}// 加载温度折线图function loadTemperatureEcharts(selectEquipment,startTime,endTime) {var myTemperatureChart = echarts.init(document.getElementById('AdminVision'));// 显示标题，图例和空的坐标轴myTemperatureChart.setOption({title : {text : '温度数据'},tooltip : {trigger : 'axis'},legend : {data : [ '室内', '室外' ]},toolbox : {show : true,feature : {mark : {show : true},dataView : {show : true,readOnly : false},magicType : {show : true,type : [ 'line', 'bar' ]},restore : {show : true},saveAsImage : {show : true}}},calculable : true,// 设置可缩放dataZoom : [ {id : 'dataZoomX',type : 'slider',xAxisIndex : [ 0 ],filterMode : 'filter'}, {id : 'dataZoomY',type : 'slider',yAxisIndex : [ 0 ],filterMode : 'empty'} ],// 设置结束xAxis : {type : 'category',boundaryGap : false, // 取消左侧的间距data : []},yAxis : {type : 'value',splitLine : {show : false},// 去除网格线name : '',axisLabel: {formatter: '{value} °C' //设置Y轴，为Y轴添加℃},},series : [ {name : '室内',type : 'line',symbol : 'emptydiamond', // 设置折线图中表示每个坐标点的符号// emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形data : []}, {name : '室外',type : 'line',symbol : 'emptydiamond', // 设置折线图中表示每个坐标点的符号// emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形data : []} ]});myTemperatureChart.showLoading(); // 数据加载完之前先显示一段简单的loading动画var time = []; //类别数组（实际用来盛放X轴坐标值） var indoor = []; //室内数据var outdoor = []; //室外数据if(selectEquipment != "" && startTime == "" && endTime == ""){//请求数据$.ajax({url : basePath+ 'Temperature/getTemperatureData.action',async : false,cache : true,dataType : 'json',type : 'GET',data : {equipmentID : selectEquipment},success : function(data) {// 请求成功时执行该函数内容，result即为服务器返回的json对象for(i = 0; i < data.length; i++){time.push(data[i].time);indoor.push(data[i].inTemperature);outdoor.push(data[i].outTemperature);}myTemperatureChart.hideLoading(); // 隐藏加载动画myTemperatureChart.setOption({ // 加载数据图表xAxis : {data : time},series : [ {data : indoor}, {data : outdoor} ]});},error : function() {console.log("温度获取失败！");myTemperatureChart.hideLoading();}});}else if(selectEquipment != "" && startTime != "" && endTime != ""){$.ajax({url : basePath+ 'Temperature/searchByTimeAndEquipmentID.action',async : false,cache : true,dataType : 'json',type : 'GET',data : {equipmentID : selectEquipment,startTime : startTime,endTime : endTime},success : function(data) {// 请求成功时执行该函数内容，result即为服务器返回的json对象for(i = 0; i < data.length; i++){time.push(data[i].time);indoor.push(data[i].inTemperature);outdoor.push(data[i].outTemperature);}//myTemperatureChart.clear(); // 1、清除画布myTemperatureChart.hideLoading(); // 隐藏加载动画myTemperatureChart.setOption({ // 加载数据图表xAxis : {data : time},series : [ {data : indoor}, {data : outdoor} ]});},error : function() {console.log("温度获取失败！");myTemperatureChart.hideLoading();}});}}// 页面加载完请求$(document).ready(function() {// 如果是超级管理员的话,就根据输入的设备ID来显示折线图if(role == 0){// 获取下拉选框中设备的IDlayui.use([ 'form', 'upload', 'layer' ], function() {var form = layui.form;$.ajax({url : basePath+ '/Temperature/getAllEquipmentID.action',async : false,cache : true,dataType : 'json',type : 'POST',success : function(data) {for (var i = 0; i < data.length; i++) {$("#SelectEquipmentID").append("<option value='" + data[i] + "'>"+ data[i] + "</option>");}form.render('select');},error : function() {console.log("设备ID获取失败！！！");}});});// 存一级下拉框的值var selectEquipment = null;//定义用于判断var world = null;// 获取一级下拉框的值layui.form.on('select(SelectEquipmentID)', function(data) { // 对应lay-filterselectEquipment = data.value; // 获取value值//如果设备ID不为空时，显示折线图if(selectEquipment != world){//加载折线图loadTemperatureEcharts(selectEquipment,"","");}});layui.use('laydate', function(){var laydate = layui.laydate;//日期时间选择器laydate.render({elem: '#startTime',type: 'datetime'});//日期时间选择器laydate.render({elem: '#endTime',type: 'datetime'});});}else{//直接显示用户对应设备的温度数据}});
TemperatureController类：
package com.apt.Linjianji.controller;import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Date;import java.util.HashSet;import java.util.List;import java.util.Set;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.apt.Linjianji.entity.Equipment;import com.apt.Linjianji.entity.Temperature;import com.apt.Linjianji.service.EquipmentService;import com.apt.Linjianji.service.TemperatureService;import com.apt.Linjianji.utils.TemperatureEchartsUtils;@Controller@RequestMapping(value = "/Temperature/*")public class TemperatureController {@Autowiredprivate TemperatureService temperatureService;@Autowiredprivate EquipmentService equipmentService;// getTemperatureData.action获取温度数据，并在前端用折线图显示@RequestMapping(value = "getTemperatureData.action")public @ResponseBody List<TemperatureEchartsUtils> getTemperatureData(String equipmentID) {List<TemperatureEchartsUtils> temperatureEcharts = new ArrayList<TemperatureEchartsUtils>();List<Temperature> list = temperatureService.searchByEquipmentID(equipmentID);for (int i = list.size() - 1; i >= 0; i--) {TemperatureEchartsUtils echarts = new TemperatureEchartsUtils();echarts.setInTemperature(list.get(i).getInTemperature());echarts.setOutTemperature(list.get(i).getOutTemperature());echarts.setTime(list.get(i).getTime());temperatureEcharts.add(echarts);}return temperatureEcharts;}// getAllEquipmentID,获取所有的设备ID@RequestMapping(value = "getAllEquipmentID.action")public @ResponseBody Set<String> getAllEquipmentID() {Set<String> set = new HashSet<String>();List<Equipment> list = equipmentService.getAllEquipmentData();for (int i = 0; i < list.size(); i++) {set.add(list.get(i).getEquipmentId());}return set;}// searchByTimeAndEquipmentID.action限制条件：设备ID、开始时间和结束时间。获取温度数据，并在前端用折线图显示@RequestMapping(value = "searchByTimeAndEquipmentID.action")public @ResponseBody List<TemperatureEchartsUtils> searchByTimeAndEquipmentID(String equipmentID,String startTime,String endTime) throws ParseException {//类型转换，String类型转Date类型SimpleDateFormat ft = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Date startDate = ft.parse(startTime);Date endDate = ft.parse(endTime);//转换结束List<TemperatureEchartsUtils> temperatureEcharts = new ArrayList<TemperatureEchartsUtils>();List<Temperature> list = temperatureService.searchByTimeAndEquipmentID(equipmentID,startDate,endDate);for (int i = list.size() - 1; i >= 0; i--) {TemperatureEchartsUtils echarts = new TemperatureEchartsUtils();echarts.setInTemperature(list.get(i).getInTemperature());echarts.setOutTemperature(list.get(i).getOutTemperature());echarts.setTime(list.get(i).getTime());temperatureEcharts.add(echarts);}return temperatureEcharts;}}
TemperatureServiceImpl里的两个方法：
// 根据设备ID获取温度对象@Overridepublic List<Temperature> searchByEquipmentID(String equipmentID) {// TODO Auto-generated method stubreturn temperatureMapper.searchByEquipmentID(equipmentID);}// 根据限制条件开始时间、结束时间和设备ID，查询设备温度对象@Overridepublic List<Temperature> searchByTimeAndEquipmentID(String equipmentID,Date startTime, Date endTime) {// TODO Auto-generated method stubTemperatureExample example = new TemperatureExample();example.or().andEquipmentIdEqualTo(equipmentID).andTimeBetween(startTime, endTime);return temperatureMapper.selectByExample(example);}
以上只列出主要的代码。
欢迎交流，互相学习。
