<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        a{
            color: #005980;
        }
        .widget-small{
            background-color: #FFFFFF;
            overflow: hidden;
            text-align: center;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .widget-small .fa{
            float: left;
            width: 40%;
            line-height: 80px;
            color: #FFFFFF;
        }
        .widget-user .fa{
            background-color: #029789;
        }
        .widget-visit .fa{
            background-color: #17a2b8;
        }
        .widget-message .fa{
            background-color: #fbad4c;
        }
        .widget-like .fa{
            background-color: #ff646d;
        }
        .widget-small-info{
            float: left;
            text-align: left;
            width: 40%;
            margin-left: 20px;
            margin-top: 18px;
            line-height: 24px;
        }
        .widget-small-info h4{
            font-size: 18px;
        }
        .widget-small-info span{
            font-size: 16px;
        }
        .project-introduce{
            min-height: 466px;
        }
        .project-introduce h4{
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 8px;
        }
        .project-introduce li{
            list-style: decimal;
            margin-left: 28px;
        }
        .alert {
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }
    </style>
</head>

<body class="timo-layout-page">
<div class="layui-row layui-col-space15">
    <div class="layui-card">
        <div id="chart1" class="layui-card-body" style="height:500px;"></div>
    </div>
</div>

<script th:src="@{/js/plugins/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/echarts-4.7.0/echarts.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    var myChart = echarts.init(document.getElementById('chart1'));
    var xData = []
    var yData = []
    var option = {
        title: {
            text: 'Nginx Log'
        },
        tooltip: {},
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data:['reqs/s']
        },
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {},
        series: [{
            name: 'reqs/s',
            type: 'line',
            smooth:true,
            data: yData
        }],
        dataZoom: [{//这个是设置滚动条的,可以拉动这个滚动条来改变你的图形的显示比例
            type: 'slider',
            show: true, //flase直接隐藏图形
            xAxisIndex: [0],
            left: '9%', //滚动条靠左侧的百分比
            bottom: -5,
            start: 0,//滚动条的起始位置
            end: 50 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }]
    };
    myChart.setOption(option)
    $.get("/api/log/nginx/chart", function (result) {
        var data = result.data
        for (const x of data[0]) {
            xData.push(x)
        }
        for (const y of data[1]) {
            yData.push(y)
        }

        myChart.setOption({
            xAxis: {
                data: xData
            },
            series: [{
                data: yData
            }],
        })
    })

    var connected = false
    var ws
    function initWebSocket() {
        if ("WebSocket" in window) {
            var token = '0123456789'
            var app = 'admin-service'
            var host = '172.16.90.200'
            var params = 'token=' + token + '&app=' + app + '&host=' + host;

            var host1 = window.location.host
            var url = 'wss://' + host1 + '/ws/log/pull?' + params
            ws = new WebSocket(url);
            ws.onopen = function() {
                connected = true
                // Web Socket 已连接上，使用 send() 方法发送数据
                console.log("websocket connected...");
            };
            ws.onclose = function() {
                connected = false
                console.log("websocket connection closed...");
                reconnect()
            };
            ws.onerror = function () {
                connected = false
                console.log("websocket connection error...");
                reconnect()
            };
            ws.onmessage = function (evt) {
                /*var data = JSON.parse(evt.data)
                for (const x of data[0]) {
                    xData.push(x)
                }
                for (const y of data[1]) {
                    yData.push(y)
                }

                myChart.setOption({
                    xAxis: {
                        data: xData
                    },
                    series: [{
                        data: yData
                    }],
                })*/
            }
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }
    function reconnect() {
        if (connected) return

        setTimeout(function () {
            console.log('websocket reconnecting...')
            initWebSocket()
        }, 5000)
    }
    // initWebSocket()
</script>
</body>
</html>