pn38qy6fk
/
watermonitor_GIt
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Merge branch 'master' of https://bdgit.educoder.net/pn38qy6fk/yangshihao_Git

Browse Source
lihaoxiang_branch
ysh 2 years ago
parent f520f3a0d9 3239c3743f
commit 68f3dfdfad
19 changed files with 2143 additions and 0 deletions
Show Stats Download Patch File Download Diff File

BIN
model/文件上传下载用例顺序图.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
model/水质水位监测系统界面类图：水位监测数据页面.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
model/水质水位监测系统界面类图：水质监测数据页面.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
model/水质水位监测系统界面类图：注册页面.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
model/水量水质监测系统数据设计类图.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
model/注册登录注销顺序图第一次迭代.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
model/注册登录注销顺序图第二次迭代.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
other/200340032夏泽宇实践总结报告.docx
View File

Binary file not shown.

237
src/src_qianduan/WEB-INF/add.jsp
Unescape View File

@ -0,0 +1,237 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>添加用户</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<style>
#name_sp,#age_sp,#qq_sp,#email_sp{
color: red;
}
</style>
</head>
<body style="background: url('img/img01.jpg') repeat-x;padding-top: 100px">
<div class="container">
<center><h3>添加联系人页面</h3></center>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post" id="form" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名：</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="col-sm-3">
<span id="name_sp"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别：</label>
<div class="col-sm-10">
<input type="radio" name="gender" value="男" id="nan" checked="checked"/>男
<input type="radio" name="gender" value="女" id="nv"/>女
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄：</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
</div>
<div class="col-sm-3">
<span id="age_sp"></span>
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">籍贯：</label>
<div class="col-sm-7">
<select name="address" class="form-control" id="address">
<option>--请选择--</option>
<option value="陕西">陕西</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
</div>
</div>
<div class="form-group">
<label for="qq" class="col-sm-2 control-label">QQ：</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/>
</div>
<div>
<span id="qq_sp" class="col-sm-3"></span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email：</label>
<div class="col-sm-7">
<input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/>
</div>
<div class="col-sm-3">
<span id="email_sp"></span>
</div>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回" />
</div>
</form>
</div>
<script>
function checkName()
{
var name = document.getElementById("name").value;
var zhengze=/^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/;
var b = zhengze.test(name);
if(b==true)
document.getElementById("name_sp").innerHTML="<img src='img/gou.png' width='50' height='30'>";
else
document.getElementById("name_sp").innerHTML="用户名格式错误";
return b;
}
function checkAge()
{
var age = document.getElementById("age").value;
var zhengze=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
var b = zhengze.test(age);
if(b==true)
document.getElementById("age_sp").innerHTML="<img src='img/gou.png' width='50' height='30'>";
else
document.getElementById("age_sp").innerHTML="年龄输入错误";
return b;
}
function cheskQq()
{
var qq = document.getElementById("qq").value;
var zhengze=/^[1-9][0-9]{4,9}$/;
var b = zhengze.test(qq);
if(b==true)
document.getElementById("qq_sp").innerHTML="<img src='img/gou.png' width='50' height='30'>";
else
document.getElementById("qq_sp").innerHTML="qq号格式错误";
return b;
}
function checkEmail()
{
var email = document.getElementById("email").value;
var zhengze=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
var b = zhengze.test(email);
if(b==true)
document.getElementById("email_sp").innerHTML="<img src='img/gou.png' width='50' height='30'>";
else
document.getElementById("email_sp").innerHTML="邮箱格式错误";
return b;
}
var form = document.getElementById("form");
form.onsubmit=function ()
{
checkName();
checkAge();
cheskQq();
checkEmail();
return checkName()&&checkAge()&&cheskQq()&&checkEmail();
}
$("#name").blur(function ()//姓名输入框离焦事件，采用jquery的写法
{
var name = $("name").val();
var zhengze=/^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/;
var b = zhengze.test(name);
if(b==true)
$("name_sp").html("<img src='img/gou.png' width='50' height='30'>");
else
$("name_sp").html("用户名格式错误");
});
$("#age").blur(function ()//年龄输入框离焦事件，采用jquery的写法
{
var age = $("age").val();
var zhengze=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
var b = zhengze.test(age);
if(b==true)
$("age_sp").html("<img src='img/gou.png' width='50' height='30'>");
else
$("age_sp").html("年龄格式错误");
});
$("#qq").blur(function ()//qq输入框离焦事件，采用jquery的写法
{
var qq = $("qq").val();
var zhengze=/^[1-9][0-9]{4,9}$/;
var b = zhengze.test(qq);
if(b==true)
$("qq_sp").html("<img src='img/gou.png' width='50' height='30'>");
else
$("qq_sp").html("qq号格式错误");
});
$("#email").blur(function ()//email输入框离焦事件，采用jquery的写法
{
var email = $("email").val();
var zhengze=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
var b = zhengze.test(email);
if(b==true)
$("email_sp").html("<img src='img/gou.png' width='50' height='30'>");
else
$("email_sp").html("邮箱格式错误");
});
$("#nan").click(
function ()
{
$("#nan").prop("checked","checked");
}
);
$("#nv").click(
function ()
{
$("#nv").prop("checked","checked");
}
);
$("input[value='返回']").click(function ()
{
window.location.href="${pageContext.request.contextPath}/list.jsp";
});
</script>
</body>
</html>

170
src/src_qianduan/WEB-INF/index.jsp
Unescape View File

@ -0,0 +1,170 @@
<%@ page import="java.util.List" %>
<%@ page import="domain.WaterQualityStation" %><%--
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>首页</title>
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/shouye.css">
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/init.js">
</script>
</head>
<body style="background: url('img/img01.jpg') repeat-x;padding-top: 52px">
<!--导航条-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text"><span class="glyphicon glyphicon-time" aria-hidden="true"></span>&nbsp;时间：<span id="time_sp" style="color:dodgerblue"></span></p></li>
<c:if test="${user!=null}">
<li><p class="navbar-text"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;<span>用户：</span><a target="myframe" href="../userPage/currentUserInfo.jsp">${user.name}</a></p></li>
</c:if>
<c:if test="${user==null}">
<li><p class="navbar-text"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;<span>用户：</span>未登录</p></li>
</c:if>
<c:if test="${user!=null}">
<li><p class="navbar-text"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>&nbsp;<a href="${pageContext.request.contextPath}/LogoutServlet">注销</a></p></li>
</c:if>
<c:if test="${user==null}">
<li><p class="navbar-text"><a href="${pageContext.request.contextPath}/login.jsp" style="color: yellow">点击登录</a></p></li>
</c:if>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="height: 700px;">
<div class="leftsidebar_box"><%--侧边菜单栏--%>
<dl>
<dt class="first_dt" ><span class="glyphicon glyphicon-plus"></span>&nbsp;数据采集与录入<img src="img/select_xl01.png"/></dt>
<dd><a href="waterLevelPage/addWaterLevelData.jsp" target="myframe" style="color: white">水位监测数据</a></dd>
<dd><a href="waterQualityPage/addWaterQualityData.jsp" target="myframe" style="color: white">水质监测数据</a></dd>
</dl>
<dl>
<dt><span class="glyphicon glyphicon-blackboard"></span>&nbsp;水质水位信息展示<img src="img/select_xl01.png"/></dt>
<dd><a target="myframe" href="viewMap.jsp" style="color: white">信息展示</a></dd>
</dl>
<dl>
<dt><span class="glyphicon glyphicon-equalizer"></span>&nbsp;数据管理<img src="img/select_xl01.png"/></dt>
<dd ><a href="waterQualityStationPage/viewWaterQualityData.jsp" target="myframe" style="color: white">水质信息管理</a></dd>
<dd> <a href="waterLevelPage/viewWaterLevelInfo.jsp" target="myframe" style="color: white">水位信息管理</a></dd>
</dl>
<dl>
<dt><span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp;预警处理<img src="img/select_xl01.png"/></dt>
<dd> <a href="emergencyPage/emergencyDecision.jsp" target="myframe" style="color: white">预警及相关措施</a></dd>
</dl>
<dl>
<dt><span class="glyphicon glyphicon-user"></span>&nbsp;用户管理<img src="img/select_xl01.png"/></dt>
<dd><a href="updatepassword.jsp" target="myframe" style="color: white">修改当前用户密码</a></dd>
</dl>
</div><%--侧边栏的结尾--%>
</div>
<div class="col-sm-10" style="padding-left: 0px;padding-right: 0px">
<iframe style="width: 100%;height: 700px;border: 0px" name="myframe" src="welcom.jsp"></iframe>
</div>
</div> <%--<div class="row">的结尾--%>
</div><%--container的结尾--%>
<script>
//顶部导航栏的时间
function getCurrentTime()
{
var time=new Date();
var s=dateFormat("yyyy年MM月dd日 HH时mm分ss秒",time);
return s;
}
function f()
{
$("#time_sp").html(getCurrentTime());
}
window.setInterval(f,1000);
function dateFormat(fmt, date) //时间格式化
{
var ret;
var opt =
{
"y+": date.getFullYear().toString(), // 年
"M+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"m+": date.getMinutes().toString(), // 分
"s+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (var k in opt)
{
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret)
{
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
</script>
</body>
</html>

236
src/src_qianduan/WEB-INF/list.jsp
Unescape View File

@ -0,0 +1,236 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>用户信息管理系统</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
<script>
function deleteUser(id)
{
//用户安全提示
if(confirm("您确定要删除吗？"))
{
//访问路径
location.href="${pageContext.request.contextPath}/delUserServlet?id="+id;
}
}
window.onload = function()
{
//给删除选中按钮添加单击事件
document.getElementById("delSelected").onclick = function()
{
if(confirm("您确定要删除选中条目吗？"))
{
var flag = false;
//判断是否有选中条目
var cbs = document.getElementsByName("uid");
for (var i = 0; i < cbs.length; i++)
{
if(cbs[i].checked)
{
//有一个条目选中了
flag = true;
break;
}
}
if(flag)
{//有条目被选中
//表单提交
document.getElementById("form").submit();
}
}
}
//1.获取第一个cb
document.getElementById("firstCb").onclick = function()
{
//2.获取下边列表中所有的cb
var cbs = document.getElementsByName("uid");
//3.遍历
for (var i = 0; i < cbs.length; i++)
{
//4.设置这些cbs[i]的checked状态 = firstCb.checked
cbs[i].checked = this.checked;
}
}
document.getElementById("back").onclick=function ()
{
window.location.href="${pageContext.request.contextPath}/index.jsp";
}
}
</script>
</head>
<body style="background: url('img/img01.jpg') repeat-x;padding-top: 100px">
<div class="container">
<div class="row">
<div class="col-sm-2">
<button class="btn btn-primary" id="back"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>&nbsp;返回首页</button>
</div>
</div>
<h3 style="text-align: center">用户信息列表</h3>
<div style="float: left;">
<form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post">
<div class="form-group">
<label for="exampleInputName2">姓名</label>
<input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group">
<label for="exampleInputName3">籍贯</label>
<input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3" >
</div>
<div class="form-group">
<label for="exampleInputEmail2">邮箱</label>
<input type="text" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2" >
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
<div style="float: right;margin: 5px;">
<a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加用户</a>
<a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>
</div>
<form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th><input type="checkbox" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:forEach items="${pb.list}" var="user" varStatus="s">
<tr>
<td><input type="checkbox" name="uid" value="${user.id}"></td>
<td>${s.count}</td>
<td>${user.name}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.address}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
<td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>&nbsp;
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
</tr>
</c:forEach>
</table>
</form>
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${pb.currentPage == 1}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage != 1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i" >
<c:if test="${pb.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
</c:forEach>
<c:if test="${pb.currentPage==pb.totalPage}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage!=pb.totalPage}">
<li>
</c:if>
<c:if test="${pb.currentPage==pb.totalPage}"><%--如果当前页面是最后一页了，用户再继续点击“下一页”的话，则请求的数据就是totalPage的数据--%>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.totalPage}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</c:if>
<c:if test="${pb.currentPage!=pb.totalPage}"><%--如果当前页面不是最后一页，用户再继续点击“下一页”的话，则请求的数据就是currentPage+1的数据--%>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</c:if>
</li>
<span style="font-size: 25px;margin-left: 5px;">
共${pb.totalCount}条记录，共${pb.totalPage}页
</span>
</ul>
</nav>
</div>
</div>
</body>
</html>

201
src/src_qianduan/WEB-INF/login.jsp
Unescape View File

@ -0,0 +1,201 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>登录</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//切换验证码
function refreshCode(){
//1.获取验证码图片对象
var vcode = document.getElementById("vcode");
//2.设置其src属性，加时间戳
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
</script>
<style>
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 50px;
background-color: #f5f5f5;
}
</style>
</head>
<body style="background: url('img/img01.jpg') repeat-x;padding-top: 100px;">
<div class="demo form-bg">
<div class="row">
<div class="col-sm-6 col-sm-offset-5">
<h2>欢迎登陆</h2>
</div>
</div>
<div class="row col-sm-offset-2">
<form action="${pageContext.request.contextPath}/loginServlet" method="post" class="form-horizontal">
<div class="form-group">
<label for="user" class="col-sm-2 control-label">用户名：</label>
<div class="col-sm-6">
<input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
</div>
<div class="col-sm-2">
<span id="username_sp" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码：</label>
<div class="col-sm-6">
<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
</div>
<div class="col-sm-2">
<span id="password_sp" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label for="verifycode" class="col-sm-2 control-label">验证码：</label>
<div class="col-sm-4">
<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码"/>
</div>
<div class="col-sm-4">
<a href="javascript:refreshCode();">
<img src="${pageContext.request.contextPath}/checkCodeServlet" id="vcode"/>
</a>
<a href="javascript:void(0)" id="kan">看不清？点我</a>
</div>
<div class="col-sm-2">
<span id="code_sp"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<input class="btn btn btn-primary form-control" type="submit" value="登录">
</div>
<div class="col-sm-3 col-sm-offset-2">
还没有账号？<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span> <a href="${pageContext.request.contextPath}/register.jsp">注册一个</a>
</div>
</div>
</form>
<c:if test="${requestScope.login_msg!=null}"><%--如果提示信息不为空的话，才会显示提示框--%>
<!-- 出错显示的信息框 -->
<div class="alert alert-warning alert-dismissible col-sm-6 col-sm-offset-2" role="alert">
<button type="button" class="close" data-dismiss="alert" >
<span>&times;</span>
</button>
<strong>${requestScope.login_msg}</strong>
</div>
</c:if>
</div><%--row end--%>
</div><%--container结尾--%>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-offset-4">
<strong>Copyright &copy; 2019-2020 <a href="https://blog.csdn.net/Deep_rooted">Yingyong Lao</a>.</strong> All rights reserved.
</div>
</div>
</div>
</footer>
<script>
//点击图片右侧文字刷新验证码
var kan = document.getElementById("kan");
kan.onclick=function ()
{
var vcode = document.getElementById("vcode");
vcode.src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
/***************以下为表单校验********************/
function checkUserName()//校验用户名
{
var username = $("#user").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//用户名正则，4到16位（字母，数字，下划线）
var b = zhengze.test(username);
return b;
}
function checkPassword()
{
var password=$("#password").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//密码正则，4到16位（字母，数字，下划线）
var b = zhengze.test(password);
return b;
}
$("form").submit(function ()//用户名或者密码格式错误的话，点击登录按钮是不会提交表单的，减轻了服务器的压力
{
checkUserName();
checkPassword();
return checkUserName()&&checkPassword();//只有同时为true，才会提交表单
});
$("#user").blur(function ()
{
var username = $("#user").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//用户名正则，4到16位（字母，数字，下划线）
var b = zhengze.test(username);
if(b!=true)
{
$("#username_sp").html("用户名格式错误");
}
else
{
$("#username_sp").html("格式正确");
$("#username_sp").css("color","green");
}
});
$("#password").blur(function ()
{
var password=$("#password").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//密码正则，4到16位（字母，数字，下划线）
var b = zhengze.test(password);
if(b!=true)
{
$("#password_sp").html("密码格式错误");
}
else
{
$("#password_sp").html("格式正确");
$("#password_sp").css("color","green");
}
});
</script>
</body>
</html>

27
src/src_qianduan/WEB-INF/message.jsp
Unescape View File

@ -0,0 +1,27 @@
<%--
Created by Yingyong Lao.
User: laoyingyong
Date: 2020-02-11
Time: 12:44
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>文件上传</title>
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>
<body style="background: url('img/img01.jpg') repeat-x;">
<h3>总共保存了${message}条记录！</h3><button class="btn-info btn" onclick="back();">返回</button>
<script>
function back()
{
window.location.href="waterQualityPage/addWaterQualityData.jsp";
}
</script>
</body>
</html>

27
src/src_qianduan/WEB-INF/otherPage/message2.jsp
Unescape View File

@ -0,0 +1,27 @@
<%--
Created by Yingyong Lao.
User: laoyingyong
Date: 2020-02-11
Time: 12:44
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>文件上传</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<!-- 1. 导入CSS的全局样式 -->
<link href="../css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../js/bootstrap.min.js"></script>
</head>
<body style="background: url('../img/img01.jpg') repeat-x;">
<h3>总共保存了${message}条记录！</h3><button class="btn-info btn" onclick="back();">返回</button>
<script>
function back()
{
window.location.href="waterLevelPage/addWaterLevelData.jsp";
}
</script>
</body>
</html>

188
src/src_qianduan/WEB-INF/register.jsp
Unescape View File

@ -0,0 +1,188 @@
<%--
Created by Yingyong Lao.
User: laoyingyong
Date: 2019-12-02
Time: 14:42
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>注册</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body style="background: url('img/img01.jpg') repeat-x;padding-top: 100px;">
<div class="container">
<form id="form" class="form-horizontal" method="post" action="${pageContext.request.contextPath}/RegisterServlet">
<div class="form-group">
<label class="col-sm-2 col-sm-offset-4"><h2>欢迎注册</h2></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-6">
<input type="text" placeholder="请输入用户名" class="form-control" id="username" name="username"/>
</div>
<div class="col-sm-2">
<span id="username_sp" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-6">
<input type="password" placeholder="请输入密码" class="form-control" id="password1" name="password"/>
</div>
<div class="col-sm-2">
<span id="password1_sp" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-6">
<input type="password" placeholder="请再次输入密码" class="form-control" id="password2"/>
</div>
<div class="col-sm-2">
<span id="password2_sp" style="color: red"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<input type="submit" value="注册" class="btn btn-primary form-control">
</div>
<div class="col-sm-2 col-sm-offset-2">
已有账号？<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;<a href="${pageContext.request.contextPath}/login.jsp">登录</a>
</div>
</div>
</form>
<c:if test="${requestScope.register_msg!=null}"><%--如果提示信息不为空的话，才会显示提示框--%>
<!-- 出错显示的信息框 -->
<div class="alert alert-warning alert-dismissible col-sm-6 col-sm-offset-2" role="alert">
<button type="button" class="close" data-dismiss="alert" >
<span>&times;</span>
</button>
<strong>${requestScope.register_msg}</strong>
</div>
</c:if>
</div>
<script>
/***************以下为表单校验*****************/
function checkUserName()//校验用户名
{
var username = $("#username").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//用户名正则，4到16位（字母，数字，下划线）
var b = zhengze.test(username);
return b;
}
function checkPassword1()
{
var password=$("#password1").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//密码正则，4到16位（字母，数字，下划线）
var b = zhengze.test(password);
return b;
}
function checkPassword2()
{
var password=$("#password2").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//密码正则，4到16位（字母，数字，下划线）
var b = zhengze.test(password);
return b;
}
function isPasswordSame()//判断输入框的密码是否相等
{
var password1 = $("#password1").val();
var password2 = $("#password2").val();
if(password1===password2)
{
return true
}
else
{
return false;
}
}
document.getElementById("form").onsubmit=function()//用户名或者密码格式错误的话，点击注册按钮是不会提交表单的，减轻了服务器的压力
{
if(isPasswordSame()===false)
{
$("#password2_sp").html("两次输入的密码不一致");
}
if(checkUserName()==true&&checkPassword1()==true&&checkPassword2()==true&&isPasswordSame()==true)
{
return true;
}
else
{
return false;
}
}
$("#username").blur(function ()
{
var username = $("#username").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//用户名正则，4到16位（字母，数字，下划线）
var b = zhengze.test(username);
if(b!==true)
{
$("#username_sp").html("用户名格式错误");
}
else
{
$("#username_sp").html("<img src='img/gou.png' width='50' height='30'>");
}
});
$("#password1").blur(function ()
{
var password=$("#password1").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//密码正则，4到16位（字母，数字，下划线）
var b = zhengze.test(password);
if(b!==true)
{
$("#password1_sp").html("密码格式错误");
}
else
{
$("#password1_sp").html("<img src='img/gou.png' width='50' height='30'>");
}
});
$("#password2").blur(function ()
{
var password=$("#password2").val();
var zhengze=/^[a-zA-Z0-9_]{4,16}$/;//密码正则，4到16位（字母，数字，下划线）
var b = zhengze.test(password);
if(!isPasswordSame())
{
$("#password2_sp").html("两次输入的密码不一致");
}
if(b!==true)
{
$("#password2_sp").html("密码格式错误");
}
if(b===true&&isPasswordSame())
{
$("#password2_sp").html("<img src='img/gou.png' width='50' height='30'>");
}
});
</script>
</body>
</html>

106
src/src_qianduan/WEB-INF/update.jsp
Unescape View File

@ -0,0 +1,106 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改用户信息</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body style="background: url('img/img01.jpg') repeat-x">
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">修改联系人</h3>
<form action="${pageContext.request.contextPath}/updateUserServlet" method="post">
<!-- 隐藏域 提交id-->
<input type="hidden" name="id" value="${user.id}">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" value="${user.name}" readonly="readonly" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label>性别：</label>
<c:if test="${user.gender == '男'}">
<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女
</c:if>
<c:if test="${user.gender == '女'}">
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" checked />女
</c:if>
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" value="${user.age}" id="age" name="age" placeholder="请输入年龄" />
</div>
<div class="form-group">
<label for="address">籍贯：</label>
<select name="address" id="address" class="form-control" >
<c:if test="${user.address == '陕西'}">
<option value="陕西" selected>陕西</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</c:if>
<c:if test="${user.address == '北京'}">
<option value="陕西" >陕西</option>
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
</c:if>
<c:if test="${user.address == '上海'}">
<option value="陕西" >陕西</option>
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
</c:if>
<c:if test="${user.address!='陕西'&&user.address!='北京'&&user.address!='上海'}">
<option selected>--请选择--</option>
<option value="陕西" >陕西</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</c:if>
</select>
</div>
<div class="form-group">
<label for="qq">QQ：</label>
<input type="text" id="qq" class="form-control" value="${user.qq}" name="qq" placeholder="请输入QQ号码"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="text" id="email" class="form-control" value="${user.email}" name="email" placeholder="请输入邮箱地址"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回" id="back"/>
</div>
</form>
</div>
<script>
$("#back").click(function ()
{
window.location.href="list.jsp";
});
</script>
</body>
</html>

77
src/src_qianduan/WEB-INF/updatepassword.jsp
Unescape View File

@ -0,0 +1,77 @@
<%--
Created by Yingyong Lao.
User: laoyingyong
Date: 2019-12-09
Time: 22:44
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>修改密码</title>
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 1. 导入CSS的全局样式 -->
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script>
$(function () //入口函数
{
$("#myform").submit(function ()
{
$.post("UpdatePasswordServlet",$("#myform").serialize(),function (data) //发送ajax请求
{
alert(data.msg);
});
return false;//不让表单提交
});
});
</script>
</head>
<body style="background: url('img/img01.jpg') repeat-x">
<div class="container">
<div class="row" style="margin-top: 50px">
<div class="col-sm-10 col-sm-offset-2"id="xiugai_div">
<form id="myform" class="form-horizontal" method="post">
<div class="form-group">
<label class="col-sm-2 col-sm-offset-4"><h2>修改密码</h2></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-6">
<input type="text" readonly="readonly" class="form-control" id="username" name="username" value="${user.username}"/>
</div>
<div class="col-sm-2">
<span id="username_sp" style="color: red"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">新密码:</label>
<div class="col-sm-6">
<input type="password" placeholder="请输入新密码" class="form-control" id="password2" name="newPassword"/>
</div>
<div class="col-sm-2">
<span id="password2_sp" style="color: red"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<input type="submit" value="修改" class="btn btn-primary form-control">
</div>
</div>
</form>
</div>
</div><%--row的结尾--%>
</div><%--container的结尾--%>
</body>
</html>

114
src/src_qianduan/WEB-INF/userPage/currentUserInfo.jsp
Unescape View File

@ -0,0 +1,114 @@
<%--
Created by Yingyong Lao.
User: laoyingyong
Date: 2020-01-22
Time: 17:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户资料</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body style="background: url('../img/img01.jpg') repeat-x;padding-top: 50px">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<table class="table table-bordered" id="userInfoTable">
<caption style="text-align: center;font-size: 24px">个人资料</caption>
<tr>
<th>姓名：</th>
<td>${user.name}</td>
</tr>
<tr>
<th>性别：</th>
<td>${user.gender}</td>
</tr>
<tr>
<th>年龄：</th>
<td>${user.age}</td>
</tr>
<tr>
<th>贯籍：</th>
<td>${user.address}</td>
</tr>
<tr>
<th>QQ：</th>
<td>${user.qq}</td>
</tr>
<tr>
<th>邮箱：</th>
<td>${user.email}</td>
</tr>
<tr>
<th>操作：</th>
<td><button class="btn btn-info btn-primary" onclick="update();">修改个人资料</button></td>
</tr>
</table>
</div>
</div>
</div>
<script>
function update()
{
var tableStr='<caption style="text-align: center;font-size: 24px">修改个人资料</caption>';
var contentStr='<tr>\n' +
' <th>姓名：</th>\n' +
' <td><input type="text" id="name" value="${user.name}"/><input id="id" type="hidden" value="${user.id}"/></td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>性别：</th>\n' +
' <td><input id="gender" type="text" value="${user.gender}"/></td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>年龄：</th>\n' +
' <td><input id="age" type="text" value="${user.age}"/></td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>贯籍：</th>\n' +
' <td><input id="address" type="text" value="${user.address}"/></td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>QQ：</th>\n' +
' <td><input id="qq" type="text" value="${user.qq}"/></td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>邮箱：</th>\n' +
' <td><input id="email" type="text" value="${user.email}"/></td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>操作：</th>\n' +
' <td><button class="btn btn-info btn-primary" onclick="confirmUpdate();">修改</button></td>\n' +
' </tr>\n';
tableStr+=contentStr;
$("#userInfoTable").html(tableStr);
}
function confirmUpdate()
{
var id=$("#id").val();
var name=$("#name").val();
var gender=$("#gender").val();
var age=$("#age").val();
var address=$("#address").val();
var qq=$("#qq").val();
var email=$("#email").val();
$.post("../UpdateUserInfoServlet",{id:id,name:name,gender:gender,age:age,address:address,qq:qq,email:email},function (data)
{
alert(data.msg);
});
}
</script>
</body>
</html>

760
src/src_qianduan/WEB-INF/waterQualityStationPage/viewWaterQualityData.jsp
Unescape View File

@ -0,0 +1,760 @@
<%--
Created by Yingyong Lao.
User: laoyingyong
Date: 2019-12-12
Time: 21:48
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>查看水质信息</title>
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="../js/jquery-1.11.2.min.js"></script>
<!-- 1. 导入CSS的全局样式 -->
<link href="../css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/costomizeAlertDialog/customizeAlert.css" rel="stylesheet">
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-ui.js"></script>
<script src="../js/echarts.min.js"></script>
<link rel="stylesheet" href="../css/jquery-ui.min.css"/>
<script>
$(function () //入口函数
{
$.post("../FindByPageServlet",{currentPage:1,pageSize:5},function (data)
{
var totalCount = data.totalCount;
var totalPage = data.totalPage;
var currentPage = data.currentPage;
var array = data.list;
if(currentPage==1)
{
var str=' <ul class="pagination">\n' +
' <li class="disabled" onclick="findByPage('+(currentPage-1)+',5)">\n' +
' <a href="#" aria-label="Previous">\n' +
' <span aria-hidden="true">&laquo;</span>\n' +
' </a>\n' +
' </li>';
}
else
{
var str=' <ul class="pagination">\n' +
' <li onclick="findByPage('+(currentPage-1)+',5)">\n' +
' <a href="#" aria-label="Previous">\n' +
' <span aria-hidden="true">&laquo;</span>\n' +
' </a>\n' +
' </li>';
}
for(var i=1;i<=totalPage;i++)
{
if(currentPage==i)
{
var item=' <li class="active" onclick="findByPage('+i+',5)"><a href="#">'+i+'</a></li>';
}
else
{
var item=' <li onclick="findByPage('+i+',5)"><a href="#">'+i+'</a></li>';
}
str+=item;
}
var end=' <li onclick="findByPage('+(currentPage+1)+',5)">\n' +
' <a href="#" aria-label="Next">\n' +
' <span aria-hidden="true">&raquo;</span>\n' +
' </a>\n' +
' </li>\n' +
' </ul>\n' +
' <div>\n' +
' <span style="font-size: 24px" id="total_sp">共'+totalCount+'条记录，共'+totalPage+'页</span>\n' +
' </div>';
str+=end;
$("#fenyetiao").html(str);//分页条的初始化
var tableStr=' <caption style="text-align: center;font-size: 24px">测站一览</caption>\n' +
' <tr class="success">\n' +
' <th style="text-align: center">id</th>\n' +
' <th style="text-align: center">监测站名称</th>\n' +
' <th style="text-align: center">操作</th>\n' +
' </tr>';
for (var i=0;i<array.length;i++)
{
var obj = array[i];
var id = obj.id;
var stationName = obj.stationName;
var longitude= obj.longitude;
var latitude= obj.latitude;
var section = obj.section;
var introduction = obj.introduction;
var oneRecord='<tr class="info">\n' +
' <td style="text-align: center">'+id+'</td>\n' +
' <td style="text-align: center">'+stationName+'</td>\n' +
' <td style="text-align: center">\n' +
' <input onclick="viewWaterQualityInfo(\''+stationName+'\');" type="button" class="btn btn-info btn-xs" value="查看监测数据">&nbsp;&nbsp;\n' +
' <input onclick="viewStatistics(\''+stationName+'\')" type="button" class="btn btn-info btn-xs" value="查看水质统计图">&nbsp;&nbsp;\n'+
' <input onclick="intro('+id+');" type="button" class="btn btn-info btn-xs" value="查看简介">&nbsp;&nbsp;\n' +
' <input onclick="update('+id+',\''+stationName+'\','+longitude+','+latitude+',\''+section+'\',\''+introduction+'\')" type="button" class="btn btn-info btn-xs" value="修改">&nbsp;&nbsp;\n' +
' <input onclick="dele('+id+');" type="button" class="btn btn-info btn-xs" value="删除">\n' +
' </td>\n' +
' </tr>';
tableStr+=oneRecord;
}
$("#waterQuality_table").html(tableStr);
});
});//入口函数的结尾
function findByPage(currentPage,pageSize)
{
$.post("../FindByPageServlet",{currentPage:currentPage,pageSize:pageSize},function (data)
{
var totalCount = data.totalCount;
var totalPage = data.totalPage;
var currentPage = data.currentPage;
var array = data.list;
if(currentPage==1)
{
var str=' <ul class="pagination">\n' +
' <li class="disabled" onclick="findByPage('+(currentPage-1)+',5)">\n' +
' <a href="#" aria-label="Previous">\n' +
' <span aria-hidden="true">&laquo;</span>\n' +
' </a>\n' +
' </li>';
}
else
{
var str=' <ul class="pagination">\n' +
' <li onclick="findByPage('+(currentPage-1)+',5)">\n' +
' <a href="#" aria-label="Previous">\n' +
' <span aria-hidden="true">&laquo;</span>\n' +
' </a>\n' +
' </li>';
}
for(var i=1;i<=totalPage;i++)
{
if(currentPage==i)
{
var item=' <li class="active" onclick="findByPage('+i+',5)"><a href="#">'+i+'</a></li>';
}
else
{
var item=' <li onclick="findByPage('+i+',5)"><a href="#">'+i+'</a></li>';
}
str+=item;
}
if(currentPage==totalPage)
{
var end=' <li class="disabled" onclick="findByPage('+(currentPage+1)+',5)">\n' +
' <a href="#" aria-label="Next">\n' +
' <span aria-hidden="true">&raquo;</span>\n' +
' </a>\n' +
' </li>\n' +
' </ul>\n' +
' <div>\n' +
' <span style="font-size: 24px" id="total_sp">共'+totalCount+'条记录，共'+totalPage+'页</span>\n' +
' </div>';
}
else
{
var end=' <li onclick="findByPage('+(currentPage+1)+',5)">\n' +
' <a href="#" aria-label="Next">\n' +
' <span aria-hidden="true">&raquo;</span>\n' +
' </a>\n' +
' </li>\n' +
' </ul>\n' +
' <div>\n' +
' <span style="font-size: 24px" id="total_sp">共'+totalCount+'条记录，共'+totalPage+'页</span>\n' +
' </div>';
}
str+=end;
$("#fenyetiao").html(str);//分页条的初始化
var tableStr=' <caption style="text-align: center;font-size: 24px">测站一览</caption>\n' +
' <tr class="success">\n' +
' <th style="text-align: center">id</th>\n' +
' <th style="text-align: center">监测站名称</th>\n' +
' <th style="text-align: center">操作</th>\n' +
' </tr>';
for (var i=0;i<array.length;i++)
{
var obj = array[i];
var id = obj.id;
var stationName = obj.stationName;
var longitude = obj.longitude;
var latitude = obj.latitude;
var section = obj.section;
var introduction = obj.introduction;
var oneRecord='<tr class="info">\n' +
' <td style="text-align: center">'+id+'</td>\n' +
' <td style="text-align: center">'+stationName+'</td>\n' +
' <td style="text-align: center">\n' +
' <input onclick="viewWaterQualityInfo(\''+stationName+'\');" type="button" class="btn btn-info btn-xs" value="查看监测数据">&nbsp;&nbsp;\n' +
' <input onclick="viewStatistics(\''+stationName+'\')" type="button" class="btn btn-info btn-xs" value="查看水质统计图">&nbsp;&nbsp;\n'+
' <input onclick="intro('+id+');" type="button" class="btn btn-info btn-xs" value="查看简介">&nbsp;&nbsp;\n' +
' <input onclick="update('+id+',\''+stationName+'\','+longitude+','+latitude+',\''+section+'\',\''+introduction+'\')" type="button" class="btn btn-info btn-xs" value="修改">&nbsp;&nbsp;\n' +
' <input onclick="dele('+id+');" type="button" class="btn btn-info btn-xs" value="删除">\n' +
' </td>\n' +
' </tr>';
tableStr+=oneRecord;
}
$("#waterQuality_table").html(tableStr);
});
}
//查看简介的回调函数
function intro(id)
{
$.post("../FindIntroServlet",{id:id},function (data)
{
var introduction = data.introduction;
alertMsg(introduction);
});
}
//查看对应的水质信息的回调函数
function viewWaterQualityInfo(stationName)
{
$("#qualityDia").dialog("open");
$.post("../ViewWaterQulityInfoServlet",{stationName:stationName},function (data)
{
if(data=="")
{
alert("数据库尚未有该站点的监测数据！");
}
var strTab='<table class="table table-bordered table-hover" id="waterQualityTab">\n' +
' <tr class="success">\n' +
' <th>所属测站</th>\n' +
' <th>PH</th>\n' +
' <th>溶解氧</th>\n' +
' <th>氨氮</th>\n' +
' <th>高猛酸钾盐指数</th>\n' +
' <th>总有机碳</th>\n' +
' <th>水质类别</th>\n' +
' <th>测量时间</th>\n' +
' <th>操作</th>\n' +
' </tr>';
for(var i=0;i<data.length;i++)
{
var obj=data[i];
var id=obj.id;
var belongStation=obj.belongStation;
var pH=obj.pH;
var dO=obj.dO;
var nH4=obj.nH4;
var cODMn=obj.cODMn;
var tOC=obj.tOC;
var level=obj.level;
var dateTime=obj.dateTime;
var date=new Date(dateTime);
var dateStr=dateFormat("yyyy-MM-dd HH:mm",date)
var tdStr;
if(level==="III")
{
tdStr=' <td style="background-color: #03ff03">'+level+'</td>';
}
else if(level==="II")
{
tdStr=' <td style="background-color: #34c3f6">'+level+'</td>';
}
else if(level==="IV")
{
tdStr=' <td style="background-color: #faff19">'+level+'</td>';
}
else if(level==="I")
{
tdStr=' <td style="background-color: #c5ffff">'+level+'</td>';
}
else if(level==="V")
{
tdStr=' <td style="background-color: #ff9000">'+level+'</td>';
}
else if(level==="劣V")
{
tdStr=' <td style="background-color: #ff0000">'+level+'</td>';
}
else
{
tdStr=' <td style="background-color: #ffffff">'+level+'</td>';
}
var strRow='<tr class="info">\n' +
' <td>'+belongStation+'</td>\n' +
' <td>'+pH+'</td>\n' +
' <td>'+dO+'</td>\n' +
' <td>'+nH4+'</td>\n' +
' <td>'+cODMn+'</td>\n' +
' <td>'+tOC+'</td>\n' +
tdStr+
' <td>'+dateStr+'</td>\n' +
' <td><input onclick="updateQuality('+id+',\''+belongStation+'\','+pH+','+dO+','+nH4+','+cODMn+','+tOC+',\''+level+'\',\''+dateStr+'\');" type="button" class="btn btn-info btn-xs" value="修改">&nbsp;&nbsp;' +
'<input type="button" class="btn btn-info btn-xs" value="删除" onclick="deleQuality('+id+');"></td>\n' +
' </tr>';
strTab+=strRow;
}
var strEnd='</table>';
strTab+=strEnd;
$("#waterQualityDiv").html(strTab);
});
}
//搜索按钮的回调函数
function searchByCondition()
{
var stationName = $("#stationName").val();
$.post("../ConditionalQueryStationByPageServlet",{stationName:stationName,currentPage:1,pageSize:30},function (data)
{
var totalCount=data.totalCount;
if(totalCount==0)
{
alert("数据库中没有相关记录！")
}
var totalPage=data.totalPage;
var currentPage = data.currentPage;
var array = data.list;
var waterQuality_table_str='<caption style="text-align: center;font-size: 24px">查询结果</caption>\n' +
' <tr class="success">\n' +
' <th style="text-align: center">id</th>\n' +
' <th style="text-align: center">监测站名称</th>\n' +
' <th style="text-align: center">操作</th>\n' +
' </tr>';
for(var i=0;i<array.length;i++)
{
var obj = array[i];
var id = obj.id;
var stationName= obj.stationName;
var longitude = obj.longitude;
var latitude = obj.latitude;
var section = obj.section;
var introduction = obj.introduction;
var itemStr='<tr class="info">\n' +
' <td style="text-align: center">'+id+'</td>\n' +
' <td style="text-align: center">'+stationName+'</td>\n' +
' <td style="text-align: center">\n' +
' <input onclick="viewWaterQualityInfo(\''+stationName+'\');" type="button" class="btn btn-info btn-xs" value="查看监测数据">&nbsp;&nbsp;\n' +
' <input onclick="viewStatistics(\''+stationName+'\')" type="button" class="btn btn-info btn-xs" value="查看水质统计图">&nbsp;&nbsp;\n'+
' <input onclick="intro('+id+');" type="button" class="btn btn-info btn-xs" value="查看简介">&nbsp;&nbsp;\n' +
' <input onclick="update('+id+',\''+stationName+'\','+longitude+','+latitude+',\''+section+'\',\''+introduction+'\')" type="button" class="btn btn-info btn-xs" value="修改">&nbsp;&nbsp;\n' +
' <input onclick="dele('+id+');" type="button" class="btn btn-info btn-xs" value="删除">\n' +
' </td>\n' +
' </tr>';
waterQuality_table_str+=itemStr;
}
var endStr=' </table>';
waterQuality_table_str+=endStr;
$("#waterQuality_table").html(waterQuality_table_str);
var fenyelanStr=' <span style="font-size: 24px" id="total_sp">共'+totalCount+'条记录</span>&nbsp;&nbsp;<input class="btn btn-info" value="返回一览表" type="button" onclick="fuwei();">';
$("#fenyetiao").html(fenyelanStr);
});
}
//返回一览表的回调函数
function fuwei()
{
window.location.href='viewWaterQualityData.jsp';
}
//更新按钮的回调函数
function update(id,stationName,longitude,latitude,section,introduction)
{
var tableStr='<table class="table table-bordered table-hover" id="update_table">\n' +
' <caption style="text-align: center;font-size: 24px">修改测站信息</caption>\n' +
' <tr class="success">\n' +
' <th style="text-align: center">id</th>\n' +
' <th style="text-align: center">监测站名称</th>\n' +
' <th style="text-align: center">经度</th>\n' +
' <th style="text-align: center">纬度</th>\n' +
' <th style="text-align: center">所属断面</th>\n' +
' <th style="text-align: center">简介</th>\n' +
' <th style="text-align: center">操作</th>\n' +
' </tr>\n' +
' <tr class="info">\n' +
' <td style="text-align: center"><input id="stationId" type="text" readonly="readonly" value="'+id+'" style="width: 120px"></td>\n' +
' <td style="text-align: center"><input id="StationName" type="text" value="'+stationName+'" placeholder="请输入测站名称" style="width: 120px"></td>\n' +
' <td style="text-align: center"><input id="longitude" type="text" value="'+longitude+'" placeholder="请输入经度" style="width: 120px"></td>\n' +
' <td style="text-align: center"><input id="latitude" type="text" value="'+latitude+'" placeholder="请输入纬度" style="width: 120px"></td>\n' +
' <td style="text-align: center"><input id="Section" type="text" value="'+section+'" style="width: 120px" placeholder="请输入断面名称"></td>\n' +
' <td style="text-align: center"><textarea id="jianjie" cols="20" rows="5" placeholder="请输入简介">'+introduction+'</textarea></td>\n' +
' <td style="text-align: center">\n' +
' <input onclick="confirmUpdate('+id+');" type="button" class="btn btn-info btn-xs" value="确认修改">\n' +
' </td>\n' +
' </tr>\n' +
' </table>';
$("#update_div").html(tableStr);
}
function confirmUpdate(id) //确认更新按钮的回调函数
{
var id=$("#stationId").val();
var stationName=$("#StationName").val();
var longitude=$("#longitude").val();
var latitude=$("#latitude").val();
var section=$("#Section").val();
var introduction=$("#jianjie").val();
$.post("../UpdateStationInfoServlet",{id:id,stationName:stationName,longitude:longitude,latitude:latitude,section:section,introduction:introduction},function (data)
{
alert(data.msg);
window.location.href="viewWaterQualityData.jsp";
});
}
//删除按钮的回调函数
function dele(id)
{
var b = window.confirm("您确定要删除吗？");
if(b)
{
$.post("../DeleteStationServlet",{id:id},function (data)
{
alert(data.msg);
window.location.href="viewWaterQualityData.jsp";
});
}
}
//更新水质信息按钮的回调函数
function updateQuality(id,belongStation,ph,oxygen,nitrogen,permangan,orgacarbon,level,datetime)
{
var tableStr=' <table class="table table-bordered">\n' +
' <caption style="text-align: center;font-size: 24px">修改水质信息</caption>\n' +
' <tr class="success">\n' +
' <th>所属测站</th>\n' +
' <th>ph</th>\n' +
' <th>溶解氧</th>\n' +
' <th>氨氮</th>\n' +
' <th>高锰酸钾指数</th>\n' +
' <th>总有机碳</th>\n' +
' <th>水质类别</th>\n' +
' <th>测量时间</th>\n' +
' <th>操作</th>\n' +
' </tr>\n' +
' <tr class="info">\n' +
' <td><input id="BelongStation" readonly="readonly" type="text" style="width: 150px" value="'+belongStation+'"></td>\n' +
' <td><input id="PH" type="number" step="0.01" min="0" style="width: 50px" value="'+ph+'"></td>\n' +
' <td><input id="Oxygen" type="number" step="0.01" min="0" style="width: 50px" value="'+oxygen+'"></td>\n' +
' <td><input id="Nitrogen" type="number" step="0.01" min="0" style="width: 50px" value="'+nitrogen+'"></td>\n' +
' <td><input id="Permangan" type="number" step="0.01" min="0" style="width: 50px" value="'+permangan+'"></td>\n' +
' <td><input id="Orgacarbon" type="number" step="0.01" min="0" style="width: 50px" value="'+orgacarbon+'"></td>\n' +
' <td><input id="PhQuality" type="text" style="width: 50px" value="'+level+'"></td>\n' +
' <td><input id="Time" type="text" style="width: 160px" value="'+datetime+'"></td>\n' +
' <td><input type="button" class="btn btn-xs btn-info" value="确认修改" onclick="confirmUpdateQuality('+id+')"></td>\n' +
' </tr>\n' +
' </table>';
$("#waterQualityDiv").html(tableStr);
}
//确认更新水质信息的回调函数
function confirmUpdateQuality(id)
{
var belongStation=$("#BelongStation").val();
var ph=$("#PH").val();
var oxygen=$("#Oxygen").val();
var nitrogen=$("#Nitrogen").val();
var permangan=$("#Permangan").val();
var orgacarbon=$("#Orgacarbon").val();
var phquality=$("#PhQuality").val();
var time=$("#Time").val();
$.post("../UpdateWaterQualityInfoServlet",
{id:id,belongStation:belongStation,ph:ph,oxygen:oxygen,nitrogen:nitrogen,
permangan:permangan,orgacarbon:orgacarbon,phquality:phquality,time:time},function (data)
{
alert(data.msg);
window.location.href="viewWaterQualityData.jsp";
});
}
function deleQuality(id) //删除水质信息按钮的回调函数
{
var b = window.confirm("您确定要删除吗？");
if(b)
{
$.post("../DeleteWaterQualityInfoServlet",{id:id},function (data)
{
alert(data.msg);
window.location.href="viewWaterQualityData.jsp";
});
}
}
</script>
</head>
<body style="background: url('../img/img01.jpg') repeat-x;padding-top: 50px">
<div class="container">
<div class="row">
<div class="col-sm-6">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="stationName">Email address</label>
<input type="text" class="form-control" id="stationName" name="stationName" placeholder="请输入测站名称,支持模糊查询" style="width: 230px">
</div>
<button type="button" onclick="searchByCondition();" class="btn btn-warning">搜索</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-7">
<table class="table table-bordered table-hover" id="waterQuality_table">
<caption style="text-align: center;font-size: 24px">测站一览</caption>
<tr class="success">
<th style="text-align: center">id</th>
<th style="text-align: center">监测站名称</th>
<th style="text-align: center">操作</th>
</tr>
<tr class="info">
<td style="text-align: center">id</td>
<td style="text-align: center">监测站名称</td>
<td style="text-align: center">
<input onclick="viewWaterQualityInfo(stationName);" type="button" class="btn btn-info btn-xs" value="查看监测数据">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" class="btn btn-info btn-xs" value="查看水质统计图">&nbsp;&nbsp;&nbsp;&nbsp;
<input onclick="intro(id);" type="button" class="btn btn-info btn-xs" value="查看简介">&nbsp;&nbsp;&nbsp;&nbsp;
<input onclick="update(id)" type="button" class="btn btn-info btn-xs" value="修改">&nbsp;&nbsp;&nbsp;&nbsp;
<input onclick="dele(id);" type="button" class="btn btn-info btn-xs" value="删除">
</td>
</tr>
</table>
<nav aria-label="Page navigation" id="fenyetiao">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
<div>
<span style="font-size: 24px" id="total_sp">共2条记录，共1页</span>
</div>
</nav>
</div><%--单元格end--%>
<div class="col-sm-5">
<div id="main" style="width: 500px;height: 500px;">
</div>
</div>
<div id="qualityDia" title="水质信息">
<div id="waterQualityDiv">
<table class="table table-bordered table-hover" id="waterQualityTab">
<tr class="success">
<th>所属测站</th>
<th>PH</th>
<th>溶解氧</th>
<th>氨氮</th>
<th>高猛酸钾盐指数</th>
<th>总有机碳</th>
<th>水质类别</th>
<th>测量时间</th>
<th>操作</th>
</tr>
<tr class="info">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="button" class="btn btn-info btn-xs" value="修改">&nbsp;&nbsp;<input type="button" class="btn btn-info btn-xs" value="删除"></td>
</tr>
</table>
</div>
</div>
</div><%--row end--%>
<div class="row">
<hr style="background-color: silver;border: none;height: 2px">
</div>
<div class="row">
<div class="col-sm-8" id="update_div">
</div>
</div>
</div>
<script src="../js/customizeAlertDialog/customizeAlert.js"></script>
<script>
function viewStatistics(stationName)
{
//$("#main").css("background-color","white");
$.post("../StatisticsWaterQualityServlet",{stationName:stationName},function (data)
{
var a=data.a;
var b=data.b;
var c=data.c;
var d=data.d;
var e=data.e;
var f=data.f;
var g=data.g;
if(a==0&&b==0&&c==0&&d==0&&e==0&&f==0)
{
alert("数据库中尚未有该站点的数据！");
}
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main'));
myChart2.setOption({
legend:{orient:"vertical",left:"70%",y:"center",data:["I类水质","II类水质","III类水质","IV类水质","V类水质","劣V类水质"]},
toolbox:{feature:{ saveAsImage:{ type:'png'}}},
tooltip: {},
title: {
text: stationName,
left: 'left',//主副标题的水平位置
subtext:"历史水质统计图",
subtextStyle: {//副标题的属性
color: '#000000',
// 同主标题
},
},
series : [
{
center:["30%","50%"],
label:{ formatter:"{b}:{c}({d}%)"},
color: ['#c5ffff','#34c3f6', '#03ff03', '#faff19', '#ff9000','#ff0000'],
name: '水质类别',
type: 'pie', // 设置图表类型为饼图
radius: '30%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data:[ // 数据数组，name 为数据项名称，value 为数据项值
{value:a, name:'I类水质'},
{value:b, name:'II类水质'},
{value:c, name:'III类水质'},
{value:d, name:'IV类水质'},
{value:e, name:'V类水质'},
{value:f, name:'劣V类水质'}
]
}
]
})
});
}
$("#qualityDia").dialog
(
{
closeText:"关闭",
height:500,
width:900,
modal: true,
autoOpen:false//默认隐藏对话框
}
);
function dateFormat(fmt, date) //时间格式化
{
var ret;
var opt =
{
"y+": date.getFullYear().toString(), // 年
"M+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"m+": date.getMinutes().toString(), // 分
"s+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (var k in opt)
{
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret)
{
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save