大棚WEB页面"/>
智慧大棚WEB页面
在servlet中查询最近的几十条湿度数据，并发送到前端网页
package mysqlLogin.servlet;import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;/*** Servlet implementation class Login*/
@WebServlet("/HumityShow")
public class HumityShow extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public HumityShow() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse* response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8"); String houseId= request.getParameter("houseId");if(houseId.contains("6")) {houseId = "0006";}else {houseId = "0001";} //System.out.println(houseId);String driverMysql = "com.mysql.jdbc.Driver";String urlMysql = "jdbc:mysql://localhost:3306/emp?useUnicode=true&characterEncoding=UTF-8&useSSL=false";String userNameMysql = "root";String passWordMysql = "asdf1234";String sql = "select humity from `emp`.`greenhouse`"+ "where houseid = " + houseId + " order by id desc limit 0,20 ";ArrayList<Humity> list = new ArrayList<Humity>();String gsObject = null;boolean t = false;try {Class.forName(driverMysql);Connection conn = DriverManager.getConnection(urlMysql, userNameMysql, passWordMysql);PreparedStatement ps = conn.prepareStatement(sql);ResultSet rs = ps.executeQuery();while(rs.next()){//�¶�String humity = rs.getString("humity");Humity humity666 = new Humity(new Double(humity));list.add(humity666);}Gson gs = new Gson();gsObject = gs.toJson(list);//System.out.println(gsObject);rs.close();conn.close();} catch (ClassNotFoundException | SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}response.setContentType("text/html;charset=UTF-8 ");response.getWriter().print(gsObject);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse* response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}
package mysqlLogin.servlet;public class Humity {double humity;public Humity(double humity) {super();this.humity = humity;}}
前端页面显示
前端调用echarts显示数据
<!DOCTYPE HTML>
<!--Arcana by HTML5 UPhtml5up | @n33coFree for personal and commercial use under the CCA 3.0 license (html5up/license)
-->
<html><head><title>智慧农业</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]--><link rel="stylesheet" href="assets/css/main.css" /><link rel="icon" href="images/webicon.png"><!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]--><!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]--><script src="assets/js/echartsmon.js"></script><!-- Scripts --><script src="assets/js/jquery.min.js"></script><script src="assets/js/jquery.dropotron.min.js"></script><script src="assets/js/skel.min.js"></script><script src="assets/js/util.js"></script><!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]--><script src="assets/js/main.js"></script>
</head><body><div id="page-wrapper"><!-- Header --><div id="header"><!-- Logo --><h1><a href="index.html" id="logo">智慧大棚精准控制系统</a></h1><!-- Nav --><nav id="nav"><ul><li ><a href="home.html">总体监控</a></li><li><a href="jiankong.html">详细参数</a></li><li class="current"><a href="tempshow.html">温度监控</a></li><li ><a href="humityshow.html">湿度监控</a></li><li><a href="nongzuowu.html">农作物详情</a></li><li ><a href="contactus.html">联系我们</a></li></ul></nav></div><!-- Main --><section class="wrapper style1" ><div class="container" style="width:1250;height:600px;"><span style="text-align: center; width:300px"> </span><span style="text-align: center; font-size: 16pt; font-weight: bold;">选择大棚编号</span><select id="tempselect"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option></select><br><br><!-- 图一所占空间 --><div id="staff_month_orderCount" style="width: 1000px;height:500px; margin-bottom: 20px;margin:auto"></div></div></section><!-- Footer --><div id="footer"><div class="container"><div class="row"><section class="3u 6u(narrower) 12u$(mobilep)"><h3>相关链接</h3><div class="links"><span><a href="/">中国农村网</a></span> <span><a href="/">农业网</a></span> <span><a href="/">中国农网</a></span> </div></section></div></div><!-- Copyright --><div class="copyright"><ul class="menu"><li>© 其实都队</li></ul></div></div></div><script type="text/javascript">var houseId = "0001";var t20= 0;var t19= 0;var t18= 0;var t17= 0;var t16= 0;var t15= 0;var t14= 0;var t13= 0;var t12= 0;var t11= 0;var t10= 0;var t9= 0;var t8= 0;var t7= 0;var t6= 0;var t5= 0;var t4= 0;var t3= 0;var t2= 0;var t1= 0;function showTempData(){var url = "DataShow";var args = {"houseId" : houseId, "time" : new Date()};$.post(url, args, function(data) { var jasondemo = $.parseJSON(data);t20 = jasondemo[0].temp;t19 = jasondemo[1].temp;t18 = jasondemo[2].temp;t17 = jasondemo[3].temp;t16 = jasondemo[4].temp;t15 = jasondemo[5].temp;t14 = jasondemo[6].temp;t13 = jasondemo[7].temp;t12 = jasondemo[8].temp;t11 = jasondemo[9].temp;t10 = jasondemo[10].temp;t9 = jasondemo[11].temp;t8 = jasondemo[12].temp;t7 = jasondemo[13].temp;t6 = jasondemo[14].temp;t5 = jasondemo[15].temp;t4 = jasondemo[16].temp;t3 = jasondemo[17].temp;t2 = jasondemo[18].temp;t1 = jasondemo[19].temp;// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('staff_month_orderCount'), 'dark');// 指定图表的配置项和数据var option = {title: {text: '温度变化图'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['温度实时数据']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']}],yAxis: [{type: 'value'}],series: [{name: 'Temp',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [t1,t2,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12,t13,t14,t15,t16,t17,t18,t19,t20]} ]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});};$(function(){setInterval(function(){showTempData();},2000);});$(function(){$("#tempselect").click(function(){houseId = $("#tempselect").val();});});</script></body></html>更多推荐
智慧大棚WEB页面
发布评论