| 
					
				 | 
			
			
				@@ -0,0 +1,234 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!DOCTYPE> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--解决idea thymeleaf 表达式模板报红波浪线--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--suppress ALL --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<html xmlns:th="http://www.thymeleaf.org"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<head> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <meta charset="UTF-8"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <title>实时日志</title> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <!-- 引入公用部分 --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <script th:replace="common/head::static"></script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</head> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<body> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!-- 标题 --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<h1 style="text-align: center;">app端实时日志</h1> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!-- 显示区 --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<div id="loggingText" contenteditable="true" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+     style="width:100%;height: 700px;background-color: ghostwhite; overflow: auto;"></div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!-- 操作栏 --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<div style="text-align: center;"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <button onclick="$('#loggingText').text('')" style="color: green; height: 35px;">清屏</button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <button onclick="$('#loggingText').animate({scrollTop:$('#loggingText')[0].scrollHeight});" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            style="color: green; height: 35px;">滚动至底部 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <button onclick="if(window.loggingAutoBottom){$(this).text('开启自动滚动');}else{$(this).text('关闭自动滚动');};window.loggingAutoBottom = !window.loggingAutoBottom" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            style="color: green; height: 35px; ">开启自动滚动 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<div id="echart-oAcc" style="height: 250px;"></div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<div id="echart-oGyro" style="height: 250px;"></div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</body> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!-- jQuery and bootstrtap js --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script src="main-bundles/lib.vendor.bundle.js"></script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!-- start plugin js file  --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script src="main-bundles/echarts.bundle.js"></script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!-- Start core js and page js --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script src="js/core.js"></script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--<script src="js/chart/echart.js"></script>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script th:inline="javascript"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    /** 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+     * 表格 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+     */ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var testData = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var domOAcc = document.getElementById("echart-oAcc"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var domOGyro = document.getElementById("echart-oGyro"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var oAccTable = echarts.init(domOAcc); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var oGyroTable = echarts.init(domOGyro); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var option = {}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // var date = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // var data = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // let oAccXArray = [], oAccYArray = [], oAccZArray = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // let oGyroXArray = [], oGyroYArray = [], oGyroZArray = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    $(window).on('resize', function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        oAccTable.resize(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        oGyroTable.resize(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    /** 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+     * websocket对象 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+     * @type {Array[]} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+     */ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    let port = [[${port}]];//端口 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    let websocket = null; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    //判断当前浏览器是否支持WebSocket 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    if ('WebSocket' in window) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //动态获取域名或ip 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let hostname = window.location.hostname; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        port = window.location.port; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let _f = "wss://"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (hostname.indexOf("192.168.0.108") > -1) {//暂时设置一个本地ip 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            _f = "ws://"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // websocket = new WebSocket(_f + hostname + ":" + port + ctx + "/websocket/APPLog/10000"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        websocket = new WebSocket("wss://www.9527fun.cn:/api_dev/websocket/APPLog/10000"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.log(_f + hostname + ":" + port + ctx + "/websocket/APPLog/10000"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.error("不支持WebSocket"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    //连接发生错误的回调方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    websocket.onerror = function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.error("WebSocket连接发生错误"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    //连接成功建立的回调方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    websocket.onopen = function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.log("WebSocket连接成功") 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    //接收到消息的回调方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    websocket.onmessage = function (event) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //追加 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (event.data) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //日志内容 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let $loggingText = $("#loggingText"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            $loggingText.append(event.data); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            testData.push.apply(testData,JSON.parse(event.data)); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // console.log(testData); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //重置数据长度 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let date = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let data = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let oAccXArray = [], oAccYArray = [], oAccZArray = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let oGyroXArray = [], oGyroYArray = [], oGyroZArray = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (let i = 0; i < testData.length; i++) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                let temp = testData[i]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                date.push(temp.index); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                // data.push(temp.gyroValue); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                oAccXArray.push(temp.acc.oAccX); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                oAccYArray.push(temp.acc.oAccY); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                oAccZArray.push(temp.acc.oAccZ); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                oGyroXArray.push(temp.gyro.oGyroX); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                oGyroYArray.push(temp.gyro.oGyroY); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                oGyroZArray.push(temp.gyro.oGyroZ); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            option = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                tooltip: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    trigger: 'axis', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    position: function (pt) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        return [pt[0], '10%']; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                grid: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    left: '5%', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    right: '0%', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    top: '2%', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    bottom: '20%', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                xAxis: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    type: 'category', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    boundaryGap: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    data: date, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    axisLine: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        lineStyle: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            color: anchor.colors["gray-100"], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    axisLabel: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        color: anchor.colors["gray-700"], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                yAxis: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    type: 'value', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    boundaryGap: [0, '100%'], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    splitLine: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        lineStyle: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            color: anchor.colors["gray-100"], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    axisLine: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        lineStyle: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            color: anchor.colors["gray-100"], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    axisLabel: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        color: anchor.colors["gray-700"], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                dataZoom: [{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    type: 'inside', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    start: 0, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    end: 10 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }, { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    start: 0, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    end: 10, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    handleSize: '80%', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    handleStyle: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        color: '#fff', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        shadowBlur: 3, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        shadowColor: 'rgba(0, 0, 0, 0.6)', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        shadowOffsetX: 2, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        shadowOffsetY: 2 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (option && typeof option === "object") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                option.series = [ { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    name: 'oAccX', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    type: 'line', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    data: oAccXArray 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        name: 'oAccY', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        type: 'line', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        data: oAccYArray 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        name: 'oAccZ', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        type: 'line', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        data: oAccZArray 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                oAccTable.setOption(option, true); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                option.series = [ { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    name: 'oGyroX', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    type: 'line', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    data: oGyroXArray 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    , 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        name: 'oGyroY', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        type: 'line', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        data: oGyroYArray 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        name: 'oGyroZ', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        type: 'line', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        data: oGyroZArray 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                oGyroTable.setOption(option,true); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //是否开启自动底部 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (window.loggingAutoBottom) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //滚动条自动到最底部 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                $loggingText.scrollTop($loggingText[0].scrollHeight); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    //连接关闭的回调方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    websocket.onclose = function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.log("WebSocket连接关闭") 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</html> 
			 |