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