vb讀取感測器溫溼度儲存到資料庫中，java實現呈現在頁面上
阿新 • • 發佈：2018-12-11
首先看一下最終的效果圖
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>華金礦業-感測器頁面圖紙</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/total.css"> <link rel="stylesheet" type="text/css" href="css/iconfont3.css"> <link rel="stylesheet" type="text/css" href="css/sensor.css"> <script type="text/javascript"> function hide(){ var id=document.getElementById("center_img"); var name=id.getAttribute("name"); var left=document.getElementById("center-left"); if(name=="block"){ left.setAttribute("style", "display:none;"); id.setAttribute("name", "none"); }if(name=="none"){ left.setAttribute("style", "display:block;"); id.setAttribute("name", "block"); } } function display(a){ var elements=[]; //獲得所有的li標籤 var list=document.getElementsByTagName("li"); var len=list.length;//獲得長度 //把class=sub-menu的li都放在集合裡面 for(var i=0;i<len;i++){ if(list[i].className== "sub-menu"){ elements[elements.length]=list[i]; } } /*把所有的隱藏 */ for(var i=0;i<elements.length;i++){ //獲得下面的ul var ul=elements[i].childNodes[3]; /* 設定屬性為隱藏 */ ul.setAttribute("style","display:none"); /* 點選當前元素的Ul設定可見 */ } /* 對所有的input背景顏色設定 */ var tree=document.getElementsByName("tree"); for(var i=0;i<tree.length;i++){ tree[i].setAttribute("style", "background-color:#E1F1FD;"); } var input=document.getElementById(a); input.setAttribute("style", "background-color:#5094D6;"); var ula=input.parentNode; var lla=ula.childNodes; for(var i=0;i<lla.length;i++){ if(lla[i].nodeName=='UL'){ lla[i].setAttribute("style","display:block"); } } } /*獲取當前的日期和時間 */ function tm(){ var today = new Date(); var year=today.getFullYear(); var month=today.getMonth()+1; var day=today.getDay(); var tm=year+"年"+month+"月"+day+"日"+" "+today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); ; var rq=document.getElementById("rq"); rq.innerHTML=tm; } </script> </head> <body onload="tm();"> <!-- 上 --> <div id="up" style="width:119%;"> <div id="up_left"> <ul> <li style="font-size:12px;">銅陵華金礦業有限責任公司</li> <li>井下綜合監管系統</li> </ul> </div> <table id="up_right"> <tr> <td class="prompt">您好！<%=request.getParameter("username") %></td> <td class="prompt">[華金礦業]:</td> <td class="prompt" id="rq"></td> </tr> <tr> <td class="prompt">密碼</td> <td class="prompt">桌面</td> <td class="prompt">登出</td> </tr> </table> </div> <div style="width:119%;height: 50px;background-color: #4891C6;position: relative;margin-top: -14px;margin-left: -7px;"></div> <!--中 --> <div id="centers"> <div id="center-left"> <input type="button" value="功能選單" class="view"> <ul id="all"> <!-- 第一個選單 --> <li class="sub-menu"> <input type="button" value="圖形展現" class="button" name="tree" id="jpg" onclick="display(this.id);"> <ul style="display: none;"> <li><a href="total_picture.jsp">實時總圖</a></li> <li><a href="role_position.jsp" >軌跡定位</a></li> </ul> </li> <!-- 第二個選單 --> <li class="sub-menu"> <input type="button" value="人員定位" class="button" name="tree" id="people" onclick="display(this.id);"> <ul style="display: none;"> <li>井下人員狀況</li> <li>LED通知管理</li> <li>LED顯示管理</li> <li>大螢幕輸出</li> <li>人員定位搜尋</li> <li>人員考勤搜尋</li> <li>排程統計</li> </ul> </li> <!-- 第三個選單 --> <li class="sub-menu"> <input type="button" value="環境監測" class="button" name="tree" id="supervise" onclick="display(this.id);"> <ul style="display: none;"> <li>環境測試總圖</li> <li>環境監測資料查詢</li> <li>環境報警資料查詢</li> </ul> </li> <!-- 第四個選單 --> <li class="sub-menu"> <input type="button" value="查詢統計" class="button" name="tree" id="select" onclick="display(this.id);"> <ul style="display: none;"> <li>人員報警查詢</li> <li>超時人員查詢</li> <li>裝置工作狀況</li> <li>裝置工作狀態查詢</li> </ul> </li> <!-- 第五個選單 --> <li class="sub-menu"> <input type="button" value="基礎資訊管理" class="button" name="tree" id="information" onclick="display(this.id);"> <ul style="display: none;"> <li>基站定義</li> <li>採集基站定義</li> <li>採集裝置定義</li> <li><a href="/Socket/Personnel_definition">人員定義</a></li> <li>工種定義</li> <li>職務定義</li> <li>帶班領導定義</li> </ul> </li> <!-- 第六個選單 --> <li class="sub-menu"> <input type="button" value="系統管理" class="button" name="tree" id="system" onclick="display(this.id)"> <ul style="display: none;"> <li>機構定義</li> <li>使用者定義</li> </ul> </li> </ul> <!--隱藏下面的具體位元組 --> </div> <!--左邊 中間 右邊 --> <div id="mycenter"> <!-- 左邊 --> <div class="cup"> <embed src="images/one.svg" type="image/svg+xml" style="width:884px;height: 880px;" /> </div> <iframe class="cdown" name="testFrame" src="sensor_dwg.jsp" scrolling="no" frameborder="no" ></iframe> </div> </div> <%--繪製風機氣體在圖形上---%> <c:forEach items="${list}" var="i" varStatus="status"> <div> <c:if test="${status.index == 1}"> <label id="sensor_one"> <i class="iconfont"></i> <span class="s_g">風速：${i.humi}</span><!-- 6 --> </label> </c:if> <label id="gas_one"> <c:if test="${status.index == 4}"> <i class="iconfont"></i><span class="s_g">H2S:${i.humi}</span><br><!--42 --> </c:if> <c:if test="${status.index == 2}"> <i class="iconfont"></i><span class="s_g">SO2:${i.humi}</span><br><!--40 --> </c:if> <c:if test="${status.index == 7}"> <i class="iconfont"></i><span class="s_g">TH:${i.humi}</span><br><!--45 --> </c:if> <c:if test="${status.index == 5}"> <i class="iconfont"></i><span class="s_g">O2:${i.humi}</span><br><!-- 43 --> </c:if> <c:if test="${status.index == 6}"> <i class="iconfont"></i><span class="s_g">CO:${i.humi}</span><br><!-- 44 --> </c:if> <c:if test="${status.index == 3}"> <i class="iconfont"></i><span class="s_g">NO2:${i.humi}</span><!-- 41 --> </c:if> </label> <label id="sensor_two"> <c:if test="${status.index == 13}"> <i class="iconfont"></i> <span class="s_g">風速：:${i.humi}</span><!-- 4 --> </c:if> </label> <label id="gas_two"> <c:if test="${status.index == 11}"> <i class="iconfont"></i><span class="s_g">TS:${i.humi}</span><br><!-- 23 --> </c:if> <c:if test="${status.index == 12}"> <i class="iconfont"></i><span class="s_g">CO:${i.humi}</span><br><!-- 24 --> </c:if> <c:if test="${status.index == 9}"> <i class="iconfont"></i><span class="s_g">NO2:${i.humi}</span><br><!-- 21 --> </c:if> <c:if test="${status.index == 10}"> <i class="iconfont"></i><span class="s_g">H2S:${i.humi}</span><br><!-- 22 --> </c:if> <c:if test="${status.index == 8}"> <i class="iconfont"></i><span class="s_g">SO2:${i.humi}</span><!--20 --> </c:if> </label> <label id="sensor_three"> <c:if test="${status.index == 18}"> <i class="iconfont"></i> <span class="s_g">大氣監測：:${i.humi}</span><!-- 5 --> </c:if> </label> <label id="gas_three"> <c:if test="${status.index == 15}"> <i class="iconfont"></i><span class="s_g">TH:${i.humi}</span><!-- 31 --><br> </c:if> <c:if test="${status.index == 14}"> <i class="iconfont"></i><span class="s_g">CO:${i.humi}</span><!-- 30 --><br> </c:if> <c:if test="${status.index == 16}"> <i class="iconfont"></i><span class="s_g">CO2:${i.humi}</span><!--32 --><br> </c:if> <c:if test="${status.index == 17}"> <i class="iconfont"></i><span class="s_g">O2:${i.humi}</span><!-- 33 --> </c:if> </label> <label id="gas_four"> <c:if test="${status.index == 20}"> <i class="iconfont"></i><span class="s_g">TH:${i.humi}</span><!-- 50 --><br> </c:if> <c:if test="${status.index == 19}"> <i class="iconfont"></i><span class="s_g">CO:${i.humi}</span><!-- 51 --> </c:if> </label> <label id="gas_five"> <c:if test="${status.index == 23}"> <i class="iconfont"></i><span class="s_g">大氣監測:${i.humi}</span><!-- 11 --><br> </c:if> <c:if test="${status.index == 22}"> <i class="iconfont"></i><span class="s_g">TH:${i.humi}</span><!-- 10 --><br> </c:if> <c:if test="${status.index == 25}"> <i class="iconfont"></i><span class="s_g">CO:${i.humi}</span><!-- 13 --><br> </c:if> <c:if test="${status.index == 24}"> <i class="iconfont"></i><span class="s_g">CO2:${i.humi}</span><!-- 12 --><br> </c:if> <c:if test="${status.index == 21}"> <i class="iconfont"></i><span class="s_g">O2:${i.humi}</span><!-- 3 --> </c:if> </label> </div> </c:forEach> </body> </html>
servlet程式碼：
package cn.com.servlet; import java.io.IOException; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.com.gj.Test; import cn.com.lf.JdbcUtils; public class Sensor_Page extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.查詢感測器最新的值放在頁面上25個地址 String [] tell={"地址為6號","地址為40號","地址為41號","地址為42號","地址為43號","地址為44號","地址為45號","地址為20號","地址為21號","地址為22號","地址為23號","地址為24號","地址為4號","地址為30號","地址為31號","地址為32號","地址為33號","地址為5號","地址為51號","地址為50號","地址為3號","地址為10號","地址為11號","地址為12號","地址為13號"}; //String sql="SELECT * FROM test WHERE tell=? ORDER BY DATE DESC LIMIT 1"; List<Test> list=new ArrayList<Test>(); for (int i = 0; i < tell.length; i++) { //對所有的地址都進行查詢 String sql="select * from test where tell = '"+tell[i]+"' order by date desc limit 1"; //把每一次的結果都放在一個集合裡面，最好是一一對應的集合 ResultSet rs=JdbcUtils.select(sql, null); try { while(rs.next()){ try { Test test=new Test(rs.getInt(1),rs.getString(2), rs.getString(3), rs.getString(4), rs.getString(5), rs.getString(6), rs.getString(7)); list.add(test); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } //在控制檯打印出來 for (Test test : list) { System.out.println(test.getTell()); } request.setAttribute("list", list); //把所有的查詢結果都顯示出來以後就轉到頁面上面 request.getRequestDispatcher("/sensor_page.jsp").forward(request, response); } }
資訊類程式碼:
package cn.com.gj; public class Test { //這個是感測器溫室度的封裝類 private int id; private String date; private String tell; private String tnum; private String hnum; private String humi; private String temp; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getDate() { return date; } public void setDate(String date) { this.date = date; } public String getTell() { return tell; } public void setTell(String tell) { this.tell = tell; } public String getTnum() { return tnum; } public void setTnum(String tnum) { this.tnum = tnum; } public String getHnum() { return hnum; } public void setHnum(String hnum) { this.hnum = hnum; } public String getHumi() { return humi; } public void setHumi(String humi) { this.humi = humi; } public String getTemp() { return temp; } public void setTemp(String temp) { this.temp = temp; } public Test(int id, String date, String tell, String tnum, String hnum, String humi, String temp) { super(); this.id = id; this.date = date; this.tell = tell; this.tnum = tnum; this.hnum = hnum; this.humi = humi; this.temp = temp; } public Test(int i, String string, String string2, String string3, String string4, String string5){ super(); } }
css樣式：
@CHARSET "UTF-8";
#sensor_one{
position: relative;
left:654px;
top:-522px;
}
#gas_one{
position: relative;
left:654px;
top:-515px;
}
#sensor_two{
position: relative;
left:411px;
top:-411px;
}
#gas_two{
position: relative;
left:412px;
top:-298px;
}
#sensor_three{
position: relative;
left:595px;
top:-513px;
}
#gas_three{
position: relative;
left:595px;
top:-417px;
}
#gas_four{
position: relative;
left:323px;
top:-370px;
}
#gas_five{
position: relative;
left:547px;
top:-357px;
}
.s_g{
font-size: 12px;
color: #5094d6;
}