|
|
@@ -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>
|