finish
This commit is contained in:
vickihe
@@ -8,6 +8,7 @@
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="css/icons/favicon.png">
|
||||
<link rel="stylesheet" href="css/addPeople_style.css">
|
||||
<script src="js/addPeople.js"></script>
|
||||
<script src="../jquery/dist/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1">
|
||||
@@ -21,26 +22,26 @@
|
||||
<div class="register_1" id="register_1" style="display: block">
|
||||
<h3>老人注册</h3>
|
||||
<form>
|
||||
<input type="text" placeholder="账号"><br>
|
||||
<input type="password" placeholder="密码"><br>
|
||||
<input type="text" placeholder="账号" id="pAccount"><br>
|
||||
<input type="password" placeholder="密码" id="pPassword"><br>
|
||||
<input type="button" value="next" id="next" onclick="changeDiv()">
|
||||
</form>
|
||||
</div>
|
||||
<div class="register_2" id="register_2" style="display: none">
|
||||
<h3>老人注册</h3>
|
||||
<form action="firstPage.html">
|
||||
<input type="text" placeholder="姓名"><br>
|
||||
<input type="text" placeholder="身份证号"><br>
|
||||
<div class="gender">
|
||||
<input type="radio" value="mele">
|
||||
<form >
|
||||
<input type="text" placeholder="姓名" id="name"><br>
|
||||
<input type="text" placeholder="身份证号" id="cardId"><br>
|
||||
<div class="gender" id="gender">
|
||||
<input type="radio" name="gender" value="mele">
|
||||
<span>男</span>
|
||||
<input type="radio" value="female">
|
||||
<input type="radio" name="gender" value="female">
|
||||
<span>女</span><br>
|
||||
</div>
|
||||
<span id="birthday">生日：</span>
|
||||
<input type="date" id="date"><br>
|
||||
<input type="text" placeholder="入住房间"><br>
|
||||
<input type="submit" value="OK" id="submit">
|
||||
<input type="text" placeholder="房间号" id="roomId"><br>
|
||||
<input type="button" value="OK" id="submit" onclick="over()">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -97,7 +97,7 @@ body {
|
||||
width: 220px;
|
||||
height: 35px;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
top: 40px;
|
||||
left: 90px;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
@@ -117,13 +117,13 @@ body {
|
||||
.register_2 form .gender span {
|
||||
position: relative;
|
||||
left: -10px;
|
||||
top: 10px;
|
||||
top: 40px;
|
||||
color: gray;
|
||||
}
|
||||
.register_2 form span#birthday {
|
||||
color: gray;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
top: 40px;
|
||||
left: 110px;
|
||||
}
|
||||
.register_2 form input#date {
|
||||
@@ -139,7 +139,7 @@ body {
|
||||
background-color: rgb(255, 115, 0);
|
||||
color: white;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
top: 118px;
|
||||
left: 340px;
|
||||
}
|
||||
.register_2 form input#submit:hover {
|
||||
|
||||
@@ -76,5 +76,4 @@ body {
|
||||
}
|
||||
.delete form input#submit:active {
|
||||
background-color: rgba(255, 115, 0, 0.3);
|
||||
/* js写一个弹出确认框 显示老人名字和身份证号 */
|
||||
}
|
||||
@@ -77,29 +77,30 @@ ul {
|
||||
.box2 {
|
||||
width: auto;
|
||||
height: auto;
|
||||
/* background-color: yellow; */
|
||||
margin: 0 0 0 190px;
|
||||
}
|
||||
.box2 table tr td {
|
||||
padding: 150px 50px 90px 0;
|
||||
padding: 40px 50px 50px 0;
|
||||
}
|
||||
.box2 table tr td a {
|
||||
color: papayawhip;
|
||||
text-decoration-line: none;
|
||||
font-size: 14px;
|
||||
background-image: url("icons/房间.png");
|
||||
background-image: url("icons/老人2.png");
|
||||
background-repeat: no-repeat;
|
||||
padding: 100px 90px 20px 100px;
|
||||
background-position: 70px 35px;
|
||||
background-size: 40%;
|
||||
margin: 0 0 0 5px;
|
||||
/* background-color: yellow; */
|
||||
}
|
||||
.box2 table tr td a:hover {
|
||||
background-image: url("icons/房间light.png");
|
||||
background-image: url("icons/老人2light.png");
|
||||
}
|
||||
.box2 table tr td.last {
|
||||
padding: 150px 0 90px 0;
|
||||
padding: 40px 0 50px 0;
|
||||
}
|
||||
.box2 table tr td span {
|
||||
color: rgba(255, 239, 213);
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin: 0 0 0 90px;
|
||||
}
|
||||
|
||||
/* 纵向导航栏 */
|
||||
@@ -115,13 +116,11 @@ ul {
|
||||
}
|
||||
.guide li#delete {
|
||||
margin: 60px 0;
|
||||
/* background-color: yellow; */
|
||||
}
|
||||
.guide li a {
|
||||
text-decoration-line: none;
|
||||
color: white;
|
||||
padding: 16px 76px 20px 50px;
|
||||
/* background-color: yellow; */
|
||||
}
|
||||
.guide li a:hover {
|
||||
background-color: rgba(248, 148, 66, 0.7);
|
||||
|
||||
BIN
web/html/css/icons/老人2.png
Normal file
BIN
web/html/css/icons/老人2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
web/html/css/icons/老人2light.png
Normal file
BIN
web/html/css/icons/老人2light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
web/html/css/images/哭.png
Normal file
BIN
web/html/css/images/哭.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -81,16 +81,51 @@ ul {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 140px;
|
||||
text-align: justify;
|
||||
}
|
||||
.info h2 {
|
||||
padding: 0 0 0 20px;
|
||||
color: rgb(255, 206, 166);
|
||||
.info button {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-style: none;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
background-color: rgb(255, 183, 124);
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 360px;
|
||||
}
|
||||
.info button:hover {
|
||||
transform: translate(0,-1px);
|
||||
-ms-transform: translate(0,-1px);
|
||||
-webkit-transform: translate(0,-1px);
|
||||
-o-transform: translate(0,-1px);
|
||||
-moz-transform: translate(0,-1px);
|
||||
box-shadow: 3px 3px 3px rgba(139, 139, 139, 0.8);
|
||||
}
|
||||
.info button:active {
|
||||
background-color: rgba(255, 183, 124, 0.781);
|
||||
}
|
||||
.info h3 {
|
||||
padding: 0 0 25px 0 ;
|
||||
margin: 0;
|
||||
}
|
||||
.info span {
|
||||
position: relative;
|
||||
left: 20px;
|
||||
padding: 10px 0 10px 0;
|
||||
/* background-color: yellow; */
|
||||
padding: 10px 70px 10px 0;
|
||||
}
|
||||
.info span#idCard {
|
||||
margin-left: -15px;
|
||||
}
|
||||
.info span#roomName {
|
||||
margin-left: -15px;
|
||||
}
|
||||
.info table {
|
||||
margin-left:13px;
|
||||
}
|
||||
.info td {
|
||||
padding: 2px 5px 2px 5px;
|
||||
}
|
||||
|
||||
/* 房间实况 */
|
||||
@@ -124,7 +159,7 @@ ul {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
position: absolute;
|
||||
top: 580px;
|
||||
left: 640px;
|
||||
left: 660px;
|
||||
}
|
||||
|
||||
/* 心率 */
|
||||
@@ -137,6 +172,16 @@ ul {
|
||||
left: 140px;
|
||||
}
|
||||
|
||||
/* 血压 */
|
||||
.blood {
|
||||
width: 450px;
|
||||
height: 350px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
position: absolute;
|
||||
top: 980px;
|
||||
left: 660px;
|
||||
}
|
||||
|
||||
/* 行动轨迹 */
|
||||
.track {
|
||||
width: 1150px;
|
||||
@@ -144,5 +189,14 @@ ul {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
position: absolute;
|
||||
top: 1380px;
|
||||
left: 40px;
|
||||
left: 55px;
|
||||
}
|
||||
|
||||
|
||||
/* 无数据替换样式 */
|
||||
.noData {
|
||||
background-image: url("images/哭.png");
|
||||
opacity: 0.5;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -7,6 +7,8 @@
|
||||
<title>Old People Home - 老人注销</title>
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="css/icons/favicon.png">
|
||||
<link rel="stylesheet" href="css/deletePeople_style.css">
|
||||
<script src="js/deletePeople.js"></script>
|
||||
<script src="../jquery/dist/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1">
|
||||
@@ -19,9 +21,9 @@
|
||||
</div>
|
||||
<div class="delete">
|
||||
<h2>注销老人</h2>
|
||||
<form action="firstPage.html">
|
||||
<input type="text" placeholder="请输入要注销的老人的ID"><br>
|
||||
<input type="submit" value="OK" id="submit">
|
||||
<form>
|
||||
<input type="text" placeholder="请输入要注销的老人的ID" id="pId"><br>
|
||||
<input type="button" value="OK" id="submit" onclick="deleteData()">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -7,6 +7,9 @@
|
||||
<title>Old People Home</title>
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="css/icons/favicon.png">
|
||||
<link rel="stylesheet" href="css/firstPage_style.css">
|
||||
<script src="../jquery/dist/jquery.min.js"></script>
|
||||
<script src="js/firstPage.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1">
|
||||
@@ -27,40 +30,40 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- js写一个空房间显示 -->
|
||||
<div class="box2">
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="views.html">001</a></td>
|
||||
<td><a href="#">002</a></td>
|
||||
<td><a href="#">003</a></td>
|
||||
<td class="last"><a href="#">004</a></td>
|
||||
<td><a id="1" style="display: none" onclick="info1()" ></a><span id="s1"></span><div id="div1"></div></td>
|
||||
<td><a id="2" style="display: none" onclick="info2()"></a><span id="s2"></span><div id="div2"></div></td>
|
||||
<td><a id="3" style="display: none" onclick="info3()"></a><span id="s3"></span><div id="div3"></div></td>
|
||||
<td class="last"><a id="4" style="display: none" onclick="info4()"></a><span id="s4"></span><div id="div4"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">005</a></td>
|
||||
<td><a href="#">006</a></td>
|
||||
<td><a href="#">007</a></td>
|
||||
<td class="last"><a href="#">008</a></td>
|
||||
<td><a id="5" style="display: none" onclick="info5()"></a><span id="s5"></span><div id="div5"></div></td>
|
||||
<td><a id="6" style="display: none" onclick="info6()"></a><span id="s6"></span><div id="div6"></div></td>
|
||||
<td><a id="7" style="display: none" onclick="info7()"></a><span id="s7"></span><div id="div7"></div></td>
|
||||
<td class="last"><a id="8" style="display: none" onclick="info8()"></a><span id="s8"></span><div id="div8"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">009</a></td>
|
||||
<td><a href="#">010</a></td>
|
||||
<td><a href="#">011</a></td>
|
||||
<td class="last"><a href="#">012</a></td>
|
||||
<td><a id="9" style="display: none" onclick="info9()"></a><span id="s9"></span><div id="div9"></div></td>
|
||||
<td><a id="10" style="display: none" onclick="info10()"></a><span id="s10"></span><div id="div10"></div></td>
|
||||
<td><a id="11" style="display: none" onclick="info11()"></a><span id="s11"></span><div id="div11"></div></td>
|
||||
<td class="last"><a id="12" style="display: none" onclick="info12()"></a><span id="s12"></span><div id="div12"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">013</a></td>
|
||||
<td><a href="#">014</a></td>
|
||||
<td><a href="#">015</a></td>
|
||||
<td class="last"><a href="#">016</a></td>
|
||||
<td><a id="13" style="display: none" onclick="info13()"></a><span id="s13"></span><div id="div13"></div></td>
|
||||
<td><a id="14" style="display: none" onclick="info14()"></a><span id="s14"></span><div id="div14"></div></td>
|
||||
<td><a id="15" style="display: none" onclick="info15()"></a><span id="s15"></span><div id="div15"></div></td>
|
||||
<td class="last"><a id="16" style="display: none" onclick="info16()"></a><span id="s16"></span><div id="div16"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">017</a></td>
|
||||
<td><a href="#">018</a></td>
|
||||
<td><a href="#">019</a></td>
|
||||
<td class="last"><a href="#">020</a></td>
|
||||
<td><a id="17" style="display: none" onclick="info17()"></a><span id="s17"></span><div id="div17"></div></td>
|
||||
<td><a id="18" style="display: none" onclick="info18()"></a><span id="s18"></span><div id="div18"></div></td>
|
||||
<td><a id="19" style="display: none" onclick="info19()"></a><span id="s19"></span><div id="div19"></div></td>
|
||||
<td class="last"><a id="20" style="display: none" onclick="info20()"></a><span id="s20"></span><div id="div20"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<script src="js/firstPage.js"></script>
|
||||
</div>
|
||||
<div class="guide">
|
||||
<ul>
|
||||
|
||||
@@ -1,13 +1,35 @@
|
||||
function changeDiv() {
|
||||
register_1 = document.getElementById("register_1")
|
||||
register_2 = document.getElementById("register_2")
|
||||
if(register_1.style.display == "block"&®ister_2.style.display == "none"){
|
||||
register_1.style.display = "none"
|
||||
register_2.style.display = "block"
|
||||
console.log(register_1.style.display)
|
||||
}
|
||||
else if(register_1.style.display == "none"&®ister_2.style.display == "block") {
|
||||
register_1.style.display = "block"
|
||||
register_2.style.display = "none"
|
||||
}
|
||||
register_1 = document.getElementById("register_1");
|
||||
register_2 = document.getElementById("register_2");
|
||||
if(register_1.style.display == "block"&®ister_2.style.display == "none"){
|
||||
register_1.style.display = "none";
|
||||
register_2.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
function over(){
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "http://39.105.65.209:8080/parent/add",
|
||||
data: {
|
||||
parentAccount: $("#pAccount").val(),
|
||||
parentPassword: $('#pPassword').val(),
|
||||
parentName: $('#name').val(),
|
||||
parentLongId: $('#cardId').val(),
|
||||
parentSex: $('input:radio:checked').val(),
|
||||
parentBirth: $('#date').val(),
|
||||
parentRoomId: $('#roomId').val()
|
||||
},
|
||||
success: function(data){
|
||||
alert('桥豆麻袋！')
|
||||
window.location.href="firstPage.html";
|
||||
},
|
||||
error:function(){
|
||||
alert('请求失败，请重试')
|
||||
if(register_1.style.display == "none"&®ister_2.style.display == "block"){
|
||||
register_1.style.display = "block";
|
||||
register_2.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
18
web/html/js/deletePeople.js
Normal file
18
web/html/js/deletePeople.js
Normal file
@@ -0,0 +1,18 @@
|
||||
function deleteData(){
|
||||
if(confirm('确定要注销ID为'+$('#pId').val()+'的老人吗？')){
|
||||
$.ajax({
|
||||
url: 'http://39.105.65.209:8080/parent/delete/'+$('#pId').val(),
|
||||
type: 'delete',
|
||||
success: function(data){
|
||||
alert('删除成功');
|
||||
window.location.href="firstPage.html";
|
||||
},
|
||||
error: function(){
|
||||
alert('请求失败，请重试')
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
|
||||
}
|
||||
}
|
||||
90
web/html/js/firstPage.js
Normal file
90
web/html/js/firstPage.js
Normal file
@@ -0,0 +1,90 @@
|
||||
count = [
|
||||
document.getElementById('1'),
|
||||
document.getElementById('2'),
|
||||
document.getElementById('3'),
|
||||
document.getElementById('4'),
|
||||
document.getElementById('5'),
|
||||
document.getElementById('6'),
|
||||
document.getElementById('7'),
|
||||
document.getElementById('8'),
|
||||
document.getElementById('9'),
|
||||
document.getElementById('10')]
|
||||
arrays = [
|
||||
document.getElementById('s1'),
|
||||
document.getElementById('s2'),
|
||||
document.getElementById('s3'),
|
||||
document.getElementById('s4'),
|
||||
document.getElementById('s5'),
|
||||
document.getElementById('s6'),
|
||||
document.getElementById('s7'),
|
||||
document.getElementById('s8'),
|
||||
document.getElementById('s9'),
|
||||
document.getElementById('s10')
|
||||
]
|
||||
infos = [
|
||||
document.getElementById('div1'),
|
||||
document.getElementById('div2'),
|
||||
document.getElementById('div3'),
|
||||
document.getElementById('div4'),
|
||||
document.getElementById('div5'),
|
||||
document.getElementById('div6'),
|
||||
document.getElementById('div7'),
|
||||
document.getElementById('div8'),
|
||||
document.getElementById('div9'),
|
||||
document.getElementById('div10')
|
||||
]
|
||||
$.ajax({
|
||||
url:'http://39.105.65.209:8080/parent/list',
|
||||
type:'get',
|
||||
success:function (data) {
|
||||
$.each(data,function(i,n){
|
||||
count[i].style.display = "block";
|
||||
$(arrays[i]).html(n.parentName);
|
||||
$(infos[i]).html(n.parentId).hide();
|
||||
});
|
||||
},
|
||||
error: function(){
|
||||
alert('error')
|
||||
}
|
||||
});
|
||||
|
||||
function info1(){
|
||||
location.replace('views.html?parentId='+$('#div1').text());
|
||||
// alert($('#div1').text());
|
||||
}
|
||||
function info2(){
|
||||
location.replace('views.html?parentId='+$('#div2').text());
|
||||
// alert($('#div2').text());
|
||||
}
|
||||
function info3(){
|
||||
location.replace('views.html?parentId='+$('#div3').text());
|
||||
// alert($('#div3').text());
|
||||
}
|
||||
function info4(){
|
||||
location.replace('views.html?parentId='+$('#div4').text());
|
||||
// alert($('#div4').text());
|
||||
}
|
||||
function info5(){
|
||||
location.replace('views.html?parentId='+$('#div5').text());
|
||||
// alert($('#div5').text());
|
||||
}
|
||||
function info6(){
|
||||
location.replace('views.html?parentId='+$('#div6').text());
|
||||
// alert($('#div6').text());
|
||||
}
|
||||
function info7(){
|
||||
location.replace('views.html?parentId='+$('#div7').text());
|
||||
// alert($('#div7').text());
|
||||
}
|
||||
function info8(){
|
||||
location.replace('views.html?parentId='+$('#div8').text());
|
||||
// alert($('#div8').text());
|
||||
}
|
||||
function info9(){
|
||||
location.replace('views.html?parentId='+$('#div9').text());
|
||||
// alert($('#div9').text());
|
||||
}
|
||||
function info10(){
|
||||
location.replace('views.html?parentId='+$('#div10').text());
|
||||
// alert($('#div10').text());
|
||||
}
|
||||
@@ -1,21 +1,23 @@
|
||||
function login(){
|
||||
|
||||
var account1 = $("#account").val()
|
||||
var password2 = $('#password').val()
|
||||
|
||||
$.ajax({
|
||||
url:'http://39.105.65.209:8080/admin/login',
|
||||
type:'POST',
|
||||
data:[{"account": "root"},{"password": "root"}],
|
||||
success:function (data) {
|
||||
// if(data){
|
||||
// var jsonArray =typeof data=='string' ?JSON.parse(data):data;
|
||||
// }
|
||||
// console.log(jsonArray);
|
||||
// $.each(jsonArray, function(i, n){
|
||||
|
||||
// console.log(jsonArray[i])
|
||||
// });
|
||||
|
||||
// $('body').html(jsonArray[0]);
|
||||
if(account=='root'&&password=='root')
|
||||
$.open('html/firstPage.html');
|
||||
type: "POST",
|
||||
url: "http://39.105.65.209:8080/admin/login",
|
||||
data: {
|
||||
account: account1,
|
||||
password: password2
|
||||
},
|
||||
success: function(datas){
|
||||
|
||||
if(datas!=null){
|
||||
window.location.href="html/firstPage.html";
|
||||
}
|
||||
},
|
||||
error:function(){
|
||||
alert('请求失败，请重试')
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -1,138 +1,519 @@
|
||||
// 步数折线图
|
||||
var dom = document.getElementById("walk");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '本周步数'
|
||||
},
|
||||
// hover效果
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [1820, 2932, 1901, 3934, 3290, 1330, 2320],
|
||||
type: 'line'
|
||||
}]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
// 解析firstPage传过来的参数
|
||||
|
||||
//search获得地址中的参数，内容为'?itemId=12'
|
||||
var paras = location.search;
|
||||
//match是字符串中符合的字段一个一个取出来，result中的值为['login=xx','table=admin']
|
||||
var result = paras.match(/[^\?&]*=[^&]*/g);
|
||||
//让paras变成没有内容的json对象
|
||||
paras = {};
|
||||
for(i in result){
|
||||
//split()将一个字符串分解成一个数组,两次遍历result中的值分别为['itemId','xx']
|
||||
var temp = result[i].split('=');
|
||||
paras[temp[0]] = temp[1];
|
||||
}
|
||||
//根据参数名"itemId"，获取参数值
|
||||
var parentId1 = paras.parentId;
|
||||
console.log(parentId1);
|
||||
|
||||
// 睡眠饼状图
|
||||
var dom = document.getElementById("sleep");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
app.title = '环形图';
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: '睡眠情况'
|
||||
},
|
||||
// hover效果
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'right',
|
||||
data:['深睡眠','浅睡眠','清醒']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'睡眠情况',
|
||||
type:'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
setInterval(disp,1);
|
||||
function disp(){
|
||||
|
||||
$.ajax({
|
||||
url:'http://39.105.65.209:8080/parent/get/'+parentId1,
|
||||
type:'get',
|
||||
success:function (data) {
|
||||
$("#pName").html(data.parentName)
|
||||
$('#idCard').html(data.parentLongId)
|
||||
$('#roomName').html(data.parentRoom)
|
||||
$('#pGender').html(data.parentSex)
|
||||
$('#pBirth').html(data.parentBirth)
|
||||
$('#pAccount').html(data.parentAccount)
|
||||
$('#pPassword').html(data.parentPassword)
|
||||
$('#pPhone').html(data.parentPhone)
|
||||
$('#pHeight').html(data.parentHeight)
|
||||
$('#pWeight').html(data.parentWeight)
|
||||
|
||||
$.ajax({
|
||||
url: 'http://39.105.65.209:8080/child_parent/parent/'+parentId1,
|
||||
type: 'get',
|
||||
success: function(data2){
|
||||
$.each(data2,function(i,n){
|
||||
$('#cName').html(n.childName)
|
||||
$('#cGender').html(n.childSex)
|
||||
$('#cPhone').html(n.childPhone)
|
||||
})
|
||||
|
||||
|
||||
// 步数折线图初始化
|
||||
var walkTime = [];
|
||||
var walkCount = [];
|
||||
var cc = 0;
|
||||
// 睡眠饼状图初始化
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth()+1;
|
||||
var day = date.getDate();
|
||||
var hour = date.getHours();
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
var timetime = hour+':'+minute+':'+second;
|
||||
if(parseFloat(minute)>10){
|
||||
var pastMinute = parseFloat(minute)-10;
|
||||
}else{
|
||||
var pastMinute = 60-10+parseFloat(minute)
|
||||
}
|
||||
var pastTime = hour+':'+pastMinute+':'+second;
|
||||
|
||||
// console.log(timetime)
|
||||
if (month >= 1 && month <= 9) {
|
||||
month = "0" + month;
|
||||
}
|
||||
if (day >= 0 && day <= 9) {
|
||||
day = "0" + day;
|
||||
}
|
||||
var today = year+'-'+month+'-'+day;
|
||||
var lightSleep = [];
|
||||
var deepSleep = [];
|
||||
var awakeSleep = [];
|
||||
var dd = 0;
|
||||
// 心率折线图初始化
|
||||
var heartTime = [];
|
||||
var heartData = [];
|
||||
var ee = 0;
|
||||
|
||||
// 房间实况图初始化
|
||||
var roomTemp = [];
|
||||
var roomWet = [];
|
||||
var roomIn = [];
|
||||
var roomTime = [];
|
||||
var ff = 0;
|
||||
|
||||
// 血压折线图初始化
|
||||
var bloodTime = [];
|
||||
var bloodRate1 = [];
|
||||
var bloodRate2 = [];
|
||||
var bloodOxy = [];
|
||||
var gg = 0;
|
||||
|
||||
// 轨迹图初始化
|
||||
var inTimex = [];
|
||||
var inTimey = [];
|
||||
var hh = 0;
|
||||
var names = [];
|
||||
var inTime = [];
|
||||
|
||||
|
||||
|
||||
|
||||
// console.log('刷刷刷')
|
||||
// console.log(heartData)
|
||||
|
||||
// 步数折线图
|
||||
$.ajax({
|
||||
url: 'http://39.105.65.209:8080/motion/get/'+parentId1,
|
||||
type: 'get',
|
||||
success: function(count){
|
||||
$.each(count, function(i){
|
||||
cc++
|
||||
if(cc <= count.length ){
|
||||
if (count[i].motionDate == today){
|
||||
var dom = document.getElementById("walk");
|
||||
var myChart = echarts.init(dom);
|
||||
option = null;
|
||||
// newData = newData + count[i].motionCount
|
||||
walkTime.push(count[i].motionTime)
|
||||
walkCount.push(count[i].motionCount)
|
||||
option = {
|
||||
title: {
|
||||
text: '今日步数'
|
||||
},
|
||||
// hover效果
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: walkTime
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: {
|
||||
data: walkCount,
|
||||
type: 'line'
|
||||
}
|
||||
};
|
||||
|
||||
// console.log(count[i].motionDate)
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 睡眠饼状图
|
||||
$.ajax({
|
||||
url: 'http://39.105.65.209:8080/sleep/get/'+parentId1,
|
||||
type: 'get',
|
||||
success: function(sleep){
|
||||
$.each(sleep, function(i){
|
||||
dd++
|
||||
if(dd <= sleep.length){
|
||||
// console.log(sleep[i].date)
|
||||
if(sleep[i].date == today){
|
||||
|
||||
var dom = document.getElementById("sleep");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
app.title = '环形图';
|
||||
|
||||
|
||||
lightSleep = parseFloat(sleep[i].lightTime)
|
||||
deepSleep = parseFloat(sleep[i].deepTime)
|
||||
awakeSleep = parseFloat(sleep[i].awakeTime)
|
||||
|
||||
|
||||
// console.log(lightSleep)
|
||||
// console.log(deepSleep)
|
||||
// console.log(awakeSleep)
|
||||
// console.log(typeof(lightSleep))
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: '睡眠情况'
|
||||
},
|
||||
// hover效果
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'right',
|
||||
data:['深睡眠','浅睡眠','清醒']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'睡眠情况',
|
||||
type:'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: deepSleep, name: '深睡眠'},
|
||||
{value: lightSleep, name: '浅睡眠'},
|
||||
{value: awakeSleep, name: '清醒'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
// 心率折线图
|
||||
$.ajax({
|
||||
url: 'http://39.105.65.209:8080/heartrate/get/'+parentId1,
|
||||
type: 'get',
|
||||
success: function(heart){
|
||||
$.each(heart, function(i){
|
||||
ee++
|
||||
if(ee <= heart.length){
|
||||
s = heart[i].time;
|
||||
newS = s.split(" ");
|
||||
if(newS[0] == today){
|
||||
// console.log('aaaaaaaaaaaaa')
|
||||
var dom = document.getElementById("heart");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
heartTime.push(newS[1])
|
||||
heartData.push(heart[i].rate)
|
||||
// console.log(newS[1])
|
||||
// console.log(heart[i].rate)
|
||||
option = {
|
||||
title: {
|
||||
text: '心率折线图'
|
||||
},
|
||||
// hover效果
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: heartTime
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: heartData,
|
||||
type: 'line'
|
||||
}]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 房间实时状态折线图
|
||||
$.ajax({
|
||||
url: 'http://39.105.65.209:8080/rstate/get/1?start='+today+' '+pastTime+'&end='+today+' '+timetime,
|
||||
type: 'get',
|
||||
success: function(roomS){
|
||||
$.each(roomS, function(i){
|
||||
// console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
|
||||
|
||||
ff++
|
||||
if(ff <= roomS.length){
|
||||
str = roomS[i].time;
|
||||
newStr = str.split(" ");
|
||||
// console.log(newStr[1])
|
||||
if(newStr[0] == today){
|
||||
var dom = document.getElementById("roomState");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
roomTime.push(newStr[1])
|
||||
roomTemp.push(parseFloat(roomS[i].temperature) )
|
||||
roomWet.push(parseFloat(roomS[i].humidity) )
|
||||
roomIn.push(parseFloat(roomS[i].isin) )
|
||||
|
||||
// console.log(newStr[1])
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '房间实况'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['温度','湿度','是否有人']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: roomTime
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'温度',
|
||||
type:'line',
|
||||
data: roomTemp
|
||||
},
|
||||
{
|
||||
name:'湿度',
|
||||
type:'line',
|
||||
data: roomWet
|
||||
},
|
||||
{
|
||||
name:'是否有人',
|
||||
type:'line',
|
||||
data: roomIn
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 血压折线图
|
||||
$.ajax({
|
||||
url: 'http://39.105.65.209:8080/heartrate/get/'+parentId1,
|
||||
type: 'get',
|
||||
success: function(bloodData){
|
||||
$.each(bloodData, function(i){
|
||||
gg++
|
||||
if(gg <= bloodData.length){
|
||||
strb = bloodData[i].time;
|
||||
newStrb = strb.split(" ");
|
||||
// console.log(newStr[1])
|
||||
if(newStrb[0] == today){
|
||||
var dom = document.getElementById("blood");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
bloodTime.push(newStrb[1])
|
||||
bloodRate1.push(parseFloat(bloodData[i].rate1) )
|
||||
bloodRate2.push(parseFloat(bloodData[i].rate2) )
|
||||
bloodOxy.push(parseFloat(bloodData[i].oxy) )
|
||||
|
||||
// console.log(newStr[1])
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '今日血压'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['收缩压','舒张压','血液含氧量']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: bloodTime
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'收缩压',
|
||||
type:'line',
|
||||
data: bloodRate1
|
||||
},
|
||||
{
|
||||
name:'舒张压',
|
||||
type:'line',
|
||||
data: bloodRate2
|
||||
},
|
||||
{
|
||||
name:'血液含氧量',
|
||||
type:'line',
|
||||
data: bloodOxy
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 轨迹图
|
||||
|
||||
$.ajax({
|
||||
url: 'http://39.105.65.209:8080/location/get/'+parentId1,
|
||||
type: 'get',
|
||||
success: function(trackData){
|
||||
$.each(trackData, function(i){
|
||||
hh++
|
||||
names = hh
|
||||
// console.log(names)
|
||||
if(hh <= trackData.length){
|
||||
|
||||
strt = trackData[i].time;
|
||||
newStrt = strt.split(" ");
|
||||
if(newStrt[0] == today){
|
||||
var map = new BMap.Map("track"); // 创建地图实例
|
||||
var point = new BMap.Point(112.44183, 38.01419); // 创建点坐标
|
||||
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
|
||||
|
||||
trackData[i].longitude
|
||||
var polyline = new BMap.Polyline([
|
||||
new BMap.Point(parseFloat(trackData[i].longitude) , parseFloat( trackData[i].latitude)),
|
||||
// new BMap.Point(112.452, 38.014)
|
||||
],
|
||||
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
|
||||
);
|
||||
var polyline = new BMap.Polyline([
|
||||
new BMap.Point(112.444, 38.0116),
|
||||
new BMap.Point(112.455, 38.0107),
|
||||
new BMap.Point(112.455, 38.0107),
|
||||
new BMap.Point(112.455, 38.0107),
|
||||
new BMap.Point(112.452,38.0128),
|
||||
new BMap.Point(112.444, 38.0116)
|
||||
],
|
||||
|
||||
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
|
||||
);
|
||||
map.addOverlay(polyline);
|
||||
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:5, name:'深睡眠'},
|
||||
{value:3, name:'浅睡眠'},
|
||||
{value:1, name:'清醒'},
|
||||
]
|
||||
});
|
||||
},
|
||||
error: function(){
|
||||
alert('遇到错误了啊喂')
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
});
|
||||
}
|
||||
|
||||
// 心率折线图
|
||||
var dom = document.getElementById("heart");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '心率折线图'
|
||||
},
|
||||
// hover效果
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00', '01:00', '02:00', '03:00', '04:00', '05:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [76, 56, 68, 79, 67, 76, 57, 68, 86, 68, 78, 76, 58, 97, 57, 76, 78, 87, 67, 77, 58, 95, 59, 86],
|
||||
type: 'line'
|
||||
}]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
// 行动轨迹
|
||||
var map = new BMap.Map("track"); // 创建地图实例
|
||||
var point = new BMap.Point(112.44183, 38.01419); // 创建点坐标
|
||||
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
|
||||
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||||
|
||||
var geolocation = new BMap.Geolocation();
|
||||
// 开启SDK辅助定位
|
||||
geolocation.enableSDKLocation();
|
||||
geolocation.getCurrentPosition(function(r){
|
||||
if(this.getStatus() == BMAP_STATUS_SUCCESS){
|
||||
var mk = new BMap.Marker(r.point);
|
||||
map.addOverlay(mk);
|
||||
map.panTo(r.point);
|
||||
alert('您的位置：'+r.point.lng+','+r.point.lat);
|
||||
}
|
||||
else {
|
||||
alert('failed'+this.getStatus());
|
||||
}
|
||||
});
|
||||
// 修改资料卡
|
||||
function modify(){
|
||||
// $('<input>').replaceAll("#pNme")
|
||||
// alert('修改修改')
|
||||
// $.ajax({
|
||||
// url: 'http://39.105.65.209:8080/parent/update/'+parentId1,
|
||||
// type: 'post',
|
||||
// data: {
|
||||
// // parentName: $("#pName").val()
|
||||
// },
|
||||
// })
|
||||
}
|
||||
@@ -7,8 +7,9 @@
|
||||
<title>Old People Home - 查看</title>
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="css/icons/favicon.png">
|
||||
<link rel="stylesheet" href="css/views_style.css">
|
||||
<script src="../jquery/dist/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="disp()">
|
||||
<div class="box1">
|
||||
<span class="upper">O</span>
|
||||
<span class="lower">ld</span>
|
||||
@@ -27,34 +28,40 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="info">
|
||||
<h2>老人资料卡</h2>
|
||||
<span>身份证号码</span><br>
|
||||
<span>姓名</span><br>
|
||||
<span>性别</span><br>
|
||||
<span>生日</span><br>
|
||||
<span>账号</span><br>
|
||||
<span>电话</span><br>
|
||||
<span>亲属</span>
|
||||
<div class="info" >
|
||||
<h3>老人资料卡</h3>
|
||||
<!-- <button id="modify" onclick="modify()">修改</button> -->
|
||||
<span>姓名:</span><span class="text" id="pName"></span><br>
|
||||
<span>身份证:</span><span class="text" id="idCard"></span><br>
|
||||
<span>房间号:</span><span class="text" id="roomName"></span><br>
|
||||
<span>性别:</span><span class="text" id="pGender"></span><br>
|
||||
<span>生日:</span><span class="text" id="pBirth"></span><br>
|
||||
<span>账号:</span><span class="text" id="pAccount"></span><br>
|
||||
<span>密码:</span><span class="text" id="pPassword"></span><br>
|
||||
<span>电话:</span><span class="text" id="pPhone"></span><br>
|
||||
<span>身高:</span><span class="text" id="pHeight"></span><br>
|
||||
<span>体重:</span><span class="text" id="pWeight"></span><br>
|
||||
<span>亲属:</span>
|
||||
<table>
|
||||
<tr>
|
||||
<td>姓名</td>
|
||||
<td>关系</td>
|
||||
<td>联系电话</td>
|
||||
<td>姓名</td></span>
|
||||
<td>性别</td></span>
|
||||
<td>联系电话</td></span>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="cName"></td>
|
||||
<td id="cGender"></td>
|
||||
<td id="cPhone"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="room">
|
||||
<h2>房间实况</h2>
|
||||
<span>温度</span><br>
|
||||
<span>湿度</span><br>
|
||||
<span>是否有人</span><br>
|
||||
<span>时间</span>
|
||||
</div>
|
||||
|
||||
<div class="room" id="roomState"></div>
|
||||
<div class="walk" id="walk"></div>
|
||||
<div class="sleep" id="sleep"></div>
|
||||
<div class="heart" id="heart"></div>
|
||||
<div class="track" id="track"></div>
|
||||
<div class="blood" id="blood"></div>
|
||||
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
|
||||
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
|
||||
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
|
||||
|
||||
@@ -16,10 +16,10 @@
|
||||
<div>
|
||||
<p id="title_1">管理员登录</p>
|
||||
<div>
|
||||
<form id="name" >
|
||||
<input type="text" name="account" placeholder="用户名" autofocus required="required"><br><br><br>
|
||||
<input type="password" name="password" placeholder="密码" required="required"><br><br><br>
|
||||
<input type="submit" id="submit" value="OK" onclick="login()">
|
||||
<form id="name" method="POST">
|
||||
<input id="account" type="text" name="account" placeholder="用户名" autofocus required="required"><br><br><br>
|
||||
<input id="password" type="password" name="password" placeholder="密码" required="required"><br><br><br>
|
||||
<input type="button" id="submit" value="OK" onclick="login()">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user