<!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-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">
                <span><i class="fa fa-dashboard"></i> dashboard</span>
            </div>
            <div id="chart1" class="layui-card-body" style="height:400px;"></div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">
                <span><i class="fa fa-table"></i> 系统信息</span>
            </div>
            <div class="layui-card-body">
                <div class="layui-card-body" style="height:240px;">
                    <table class="layui-table timo-detail-table">
                        <tbody>
                        <tr>
                            <th>机器地址</th>
                            <td th:text="${hostAddr}"></td>
                        </tr>
                        <tr>
                            <th>操作系统</th>
                            <td th:text="${osInfo}"></td>
                        </tr>
                        <tr>
                            <th>JVM</th>
                            <td th:text="${jvmInfo}"></td>
                        </tr>
                        <tr>
                            <th>启动时间</th>
                            <td th:text="${startAt}"></td>
                        </tr>
                        </tbody>
                        <tr>
                            <th>PID</th>
                            <td th:text="${pid}"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </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">
    /*function initChart() {
        var base = +new Date(2014, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var date = [];
        var data = [Math.random() * 150];
        var now = new Date(base);

        function addData(shift) {
            now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
            date.push(now);

            data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

            if (shift) {
                date.shift();
                data.shift();
            }
            now = new Date(+new Date(now) + oneDay);
        }

        for (var i = 1; i < 100; i++) {
            addData();
        }

        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                boundaryGap: [0, '50%'],
                type: 'value'
            },
            series: [
                {
                    name:'成交',
                    type:'bar',
                    smooth:true,
                    symbol: 'none',
                    stack: 'a',
                    areaStyle: {
                        normal: {}
                    },
                    data: data
                }
            ]
        };
        setInterval(function () {
            addData(true);
            myChart.setOption({
                xAxis: {
                    data: date
                },
                series: [{
                    name:'成交',
                    data: data
                }]
            });
        }, 500);
        var myChart = echarts.init(document.getElementById('chart1'));
        myChart.setOption(option)
    }
    initChart()*/
</script>
</body>
</html>