diff --git a/web/html/css/views_style.css b/web/html/css/views_style.css
index f372b22..ce785f1 100644
--- a/web/html/css/views_style.css
+++ b/web/html/css/views_style.css
@@ -1,5 +1,5 @@
body {
- height: 2000px;
+ height: 3000px;
margin: 0px;
background-image: url("images/天空1.jpg");
background-repeat: no-repeat;
@@ -77,14 +77,14 @@ ul {
.info {
width: 450px;
height: 350px;
- background-color: white;
+ background-color: rgba(255, 255, 255, 0.5);
position: absolute;
top: 170px;
left: 140px;
}
.info h2 {
padding: 0 0 0 20px;
- color: rgb(255, 115, 0);
+ color: rgb(255, 206, 166);
}
.info span {
position: relative;
@@ -97,26 +97,52 @@ ul {
.room {
width: 450px;
height: 350px;
- background-color: white;
+ background-color: rgba(255, 255, 255, 0.5);
position: absolute;
top: 170px;
left: 660px;
}
.room h2 {
padding: 0 0 0 20px;
- color: rgb(255, 115, 0);
+ color: rgb(255, 206, 166);
}
-/* 健康监测卡 */
-.health {
+/* 本周步数 */
+.walk {
width: 450px;
height: 350px;
- background-color: white;
+ background-color: rgba(255, 255, 255, 0.5);
position: absolute;
top: 580px;
left: 140px;
}
-.health h2 {
- padding: 0 0 0 20px;
- color: rgb(255, 115, 0);
+
+/* 睡眠情况 */
+.sleep {
+ width: 450px;
+ height: 350px;
+ background-color: rgba(255, 255, 255, 0.5);
+ position: absolute;
+ top: 580px;
+ left: 640px;
+}
+
+/* 心率 */
+.heart {
+ width: 450px;
+ height: 350px;
+ background-color: rgba(255, 255, 255, 0.5);
+ position: absolute;
+ top: 980px;
+ left: 140px;
+}
+
+/* 行动轨迹 */
+.track {
+ width: 1150px;
+ height:550px;
+ background-color: rgba(255, 255, 255, 0.5);
+ position: absolute;
+ top: 1380px;
+ left: 40px;
}
\ No newline at end of file
diff --git a/web/html/js/login.js b/web/html/js/login.js
index 4b828b1..7fbf980 100644
--- a/web/html/js/login.js
+++ b/web/html/js/login.js
@@ -1,26 +1,21 @@
-var http = require('http');
-
-// 用于请求的选项
-var options = {
- host: '39.105.65.209',
- port: '8080',
- path: '/login.html'
-};
-
-// 处理响应的回调函数
-var callback = function (response) {
- // 不断更新数据
- var body = '';
- response.on('data',function (data) {
- body +=data;
+function login(){
+ $.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');
+ }
});
-
- response.on('end',function () {
- // 数据接收完成
- console.log(body);
- });
-}
-
-// 向服务器端发送请求
-var request = http.request(options,callback);
-request.end();
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/html/js/views.js b/web/html/js/views.js
new file mode 100644
index 0000000..1e09d5a
--- /dev/null
+++ b/web/html/js/views.js
@@ -0,0 +1,138 @@
+// 步数折线图
+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);
+}
+
+// 睡眠饼状图
+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}
{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:5, name:'深睡眠'},
+ {value:3, name:'浅睡眠'},
+ {value:1, name:'清醒'},
+ ]
+ }
+ ]
+};
+;
+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());
+ }
+});
\ No newline at end of file
diff --git a/web/html/views.html b/web/html/views.html
index 371575e..fef668e 100644
--- a/web/html/views.html
+++ b/web/html/views.html
@@ -51,9 +51,20 @@
是否有人
时间
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+