首先看一下最终的效果图
数据库图片展示
最终代码:
<%@ 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;
}