update

2019-09-09 21:07:51 +08:00
parent dfa64a5847
commit 7488fe6bb6
132 changed files with 32120 additions and 168 deletions
--- 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;
 }
--- 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();
+}
--- a/web/html/js/views.js
+++ 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} <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: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());
+	}        
+});
--- a/web/html/views.html
+++ b/web/html/views.html
@@ -51,9 +51,20 @@
        <span>是否有人</span><br>
        <span>时间</span>
    </div>
-    <div class="health">
-        <h2>健康监测卡</h2>
-        <p>折线图</p>
-    </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>
+    <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>
+    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
+    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
+    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=uB12ibsD0tpHIixGOcHK0Ckm927qeToM"></script>
+    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
+    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
+    <script type="text/javascript" src="js/views.js"></script>
+       
 </body>
 </html>