vb读取传感器温湿度存储到数据库中，java实现呈现在页面上

其他 2018-09-23 05:17:05 阅读次数: 0

首先看一下最终的效果图
在这里插入图片描述
数据库图片展示
在这里插入图片描述
最终代码:

<%@ 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">&#xe657;</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">&#xe606;</i><span class="s_g">H2S:${i.humi}</span><br><!--42  -->
      </c:if>
       <c:if test="${status.index == 2}">
    <i class="iconfont">&#xe606;</i><span class="s_g">SO2:${i.humi}</span><br><!--40  -->
       </c:if>
        <c:if test="${status.index == 7}">
    <i class="iconfont">&#xe606;</i><span class="s_g">TH:${i.humi}</span><br><!--45  -->
     </c:if>
     <c:if test="${status.index == 5}">
    <i class="iconfont">&#xe606;</i><span class="s_g">O2:${i.humi}</span><br><!-- 43 -->
   </c:if>
    <c:if test="${status.index == 6}">
    <i class="iconfont">&#xe606;</i><span class="s_g">CO:${i.humi}</span><br><!-- 44 -->
   </c:if>
    <c:if test="${status.index == 3}">
    <i class="iconfont">&#xe606;</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">&#xe657;</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">&#xe606;</i><span class="s_g">TS:${i.humi}</span><br><!-- 23 -->
    </c:if>
     <c:if test="${status.index == 12}">
    <i class="iconfont">&#xe606;</i><span class="s_g">CO:${i.humi}</span><br><!-- 24 -->
   </c:if>    
    <c:if test="${status.index == 9}">
    <i class="iconfont">&#xe606;</i><span class="s_g">NO2:${i.humi}</span><br><!-- 21 -->
    </c:if>
     <c:if test="${status.index == 10}">
    <i class="iconfont">&#xe606;</i><span class="s_g">H2S:${i.humi}</span><br><!-- 22 -->
     </c:if>
     <c:if test="${status.index == 8}">
    <i class="iconfont">&#xe606;</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">&#xe657;</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">&#xe606;</i><span class="s_g">TH:${i.humi}</span><!-- 31 --><br>
     </c:if>
     <c:if test="${status.index == 14}">
    <i class="iconfont">&#xe606;</i><span class="s_g">CO:${i.humi}</span><!-- 30 --><br>
    </c:if>
     <c:if test="${status.index == 16}">
    <i class="iconfont">&#xe606;</i><span class="s_g">CO2:${i.humi}</span><!--32 --><br>
    </c:if>
     <c:if test="${status.index == 17}">
    <i class="iconfont">&#xe606;</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">&#xe606;</i><span class="s_g">TH:${i.humi}</span><!-- 50 --><br>
     </c:if>
     <c:if test="${status.index == 19}">
    <i class="iconfont">&#xe606;</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">&#xe606;</i><span class="s_g">大气监测:${i.humi}</span><!-- 11 --><br>
    </c:if>
     <c:if test="${status.index == 22}">
     <i class="iconfont">&#xe606;</i><span class="s_g">TH:${i.humi}</span><!-- 10 --><br>
     </c:if>
      <c:if test="${status.index == 25}">
      <i class="iconfont">&#xe606;</i><span class="s_g">CO:${i.humi}</span><!-- 13 --><br>
       </c:if>
        <c:if test="${status.index == 24}">
       <i class="iconfont">&#xe606;</i><span class="s_g">CO2:${i.humi}</span><!-- 12 --><br>
    </c:if>
     <c:if test="${status.index == 21}">
    <i class="iconfont">&#xe606;</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;
}

猜你喜欢

转载自blog.csdn.net/qq_37591637/article/details/82803953
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022