<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>home页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="./style/admin.css" th:href="@{/style/admin.css}" media="all">
    <link rel="stylesheet" href="./style/myself.css" th:href="@{/style/myself.css}" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
    <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
    <script type="text/javascript" charset="utf-8" th:inline="javascript">
        var ctxPath = /*[[@{/}]]*/'';
        var tokenValue = /*[[${_csrf.token}]]*/'';
    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm8">
            <div class=" layui-row layui-col-space10">
                <!--<div class="layui-col-sm6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            服务器
                            <span class="layui-badge layui-bg-black layuiadmin-badge">台</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" id="server-card-list-1">
                            <p class="layuiadmin-big-font layuiadmin-big-font-my"
                               th:text="${homeServerVo.serverSum}"></p>
                            <p>
                                Windows
                                <span class="layuiadmin-span-color">
                                    [[${homeServerVo.windowsSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/windows-16.png}"></i></span>
                            </p>
                            <p>
                                Linux
                                <span class="layuiadmin-span-color">
                                    [[${homeServerVo.linuxSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/linux-16.png}"></i></span>
                            </p>
                            <p>
                                其他
                                <span class="layuiadmin-span-color">
                                    [[${homeServerVo.otherSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/other-16.png}"></i></span>
                            </p>
                        </div>
                    </div>
                </div>-->
                <div class="layui-col-sm6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            服务器
                            <span class="layui-badge layui-bg-skyblue-my layuiadmin-badge">台</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" id="server-card-list-2">
                            <p class="layuiadmin-big-font">
                                [[${homeServerVo.serverSum}]]
                                <i class="home-i">[[${homeServerVo.serverOnLineRate}]]
                                    <img th:src="@{/images/icon16/percentage-16.png}"></i>
                            </p>
                            <p>
                                在线
                                <span class="layuiadmin-span-color">
                                    [[${homeServerVo.serverOnLineSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/on-line-16.png}"></i></span>
                            </p>
                            <p>
                                离线
                                <span class="layuiadmin-span-color">
                                    [[${homeServerVo.serverOffLineSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/off-line-16.png}"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            应用程序
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">个</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" id="instance-card-list">
                            <p class="layuiadmin-big-font">
                                [[${homeInstanceVo.instanceSum}]]
                                <i class="home-i">[[${homeInstanceVo.instanceOnLineRate}]]
                                    <img th:src="@{/images/icon16/percentage-16.png}"></i>
                            </p>
                            <p>
                                在线
                                <span class="layuiadmin-span-color">
                                    [[${homeInstanceVo.instanceOnLineSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/on-line-16.png}"></i></span>
                            </p>
                            <p>
                                离线
                                <span class="layuiadmin-span-color">
                                    [[${homeInstanceVo.instanceOffLineSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/off-line-16.png}"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            数据库
                            <span class="layui-badge layui-bg-green layuiadmin-badge">个</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" id="db-card-list">
                            <p class="layuiadmin-big-font layuiadmin-big-font-my">
                                [[${homeDbVo.dbSum}]]
                                <i class="home-i">[[${homeDbVo.dbConnectRate}]]
                                    <img th:src="@{/images/icon16/percentage-16.png}"></i>
                            </p>
                            <p>
                                正常
                                <span class="layuiadmin-span-color">
                                    [[${homeDbVo.dbConnectSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/normal-16.png}"></i></span>
                            </p>
                            <p>
                                异常
                                <span class="layuiadmin-span-color">
                                    [[${homeDbVo.dbDisconnectSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/exception-16.png}"></i></span>
                            </p>
                            <p>
                                未知
                                <span class="layuiadmin-span-color">
                                    [[${homeDbVo.dbUnsentSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/unknown-16.png}"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            网络
                            <span class="layui-badge layui-bg-orange layuiadmin-badge">个</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" id="ip-card-list">
                            <p class="layuiadmin-big-font layuiadmin-big-font-my">
                                [[${homeNetVo.netSum}]]
                                <i class="home-i">[[${homeNetVo.netConnectRate}]]
                                    <img th:src="@{/images/icon16/percentage-16.png}"></i>
                            </p>
                            <p>
                                正常
                                <span class="layuiadmin-span-color">
                                    [[${homeNetVo.netConnectSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/net-connect-16.png}"></i></span>
                            </p>
                            <p>
                                异常
                                <span class="layuiadmin-span-color">
                                    [[${homeNetVo.netDisconnectSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/net-disconnect-16.png}"></i></span>
                            </p>
                            <p>
                                未知
                                <span class="layuiadmin-span-color">
                                    [[${homeNetVo.netUnsentSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/net-unkown-16.png}"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            TCP
                            <span class="layui-badge layui-bg-black layuiadmin-badge">个</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" id="tcp-card-list">
                            <p class="layuiadmin-big-font layuiadmin-big-font-my">
                                [[${homeTcpVo.tcpSum}]]
                                <i class="home-i">[[${homeTcpVo.tcpConnectRate}]]
                                    <img th:src="@{/images/icon16/percentage-16.png}"></i>
                            </p>
                            <p>
                                正常
                                <span class="layuiadmin-span-color">
                                    [[${homeTcpVo.tcpConnectSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/tcp-connect-16.png}"></i></span>
                            </p>
                            <p>
                                异常
                                <span class="layuiadmin-span-color">
                                    [[${homeTcpVo.tcpDisconnectSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/tcp-disconnect-16.png}"></i></span>
                            </p>
                            <p>
                                未知
                                <span class="layuiadmin-span-color">
                                    [[${homeTcpVo.tcpUnsentSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/tcp-unkown-16.png}"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            HTTP
                            <span class="layui-badge layui-bg-skyblue-my layuiadmin-badge">个</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" id="http-card-list">
                            <p class="layuiadmin-big-font layuiadmin-big-font-my">
                                [[${homeHttpVo.httpSum}]]
                                <i class="home-i">[[${homeHttpVo.httpConnectRate}]]
                                    <img th:src="@{/images/icon16/percentage-16.png}"></i>
                            </p>
                            <p>
                                正常
                                <span class="layuiadmin-span-color">
                                    [[${homeHttpVo.httpConnectSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/http-connect-16.png}"></i></span>
                            </p>
                            <p>
                                异常
                                <span class="layuiadmin-span-color">
                                    [[${homeHttpVo.httpDisconnectSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/http-disconnect-16.png}"></i></span>
                            </p>
                            <p>
                                未知
                                <span class="layuiadmin-span-color">
                                    [[${homeHttpVo.httpUnsentSum}]]
                                    <i class="layui-inline layui-icon"><img
                                            th:src="@{/images/icon16/http-unkown-16.png}"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md2" style="display:none;">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            告警通知
                            <span class="layui-badge layui-bg-red layuiadmin-badge">次</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" id="alarm-card-list">
                            <p class="layuiadmin-big-font layuiadmin-big-font-my">
                                [[${homeAlarmRecordVo.alarmRecordSum}]]
                                <i class="home-i">[[${homeAlarmRecordVo.alarmSucRate}]]
                                    <img th:src="@{/images/icon16/percentage-16.png}"></i>
                            </p>
                            <p>
                                成功
                                <span class="layuiadmin-span-color">[[${homeAlarmRecordVo.alarmRecordSuccessSum}]]<i
                                        class="layui-inline layui-icon"><img
                                        th:src="@{/images/icon16/success-16.png}"></i></span>
                            </p>
                            <p>
                                失败
                                <span class="layuiadmin-span-color">[[${homeAlarmRecordVo.alarmRecordFailSum}]]<i
                                        class="layui-inline layui-icon"><img
                                        th:src="@{/images/icon16/fail-16.png}"></i></span>
                            </p>
                            <p>
                                不提醒
                                <span class="layuiadmin-span-color">[[${homeAlarmRecordVo.alarmRecordUnsentSum}]]<i
                                        class="layui-inline layui-icon"><img
                                        th:src="@{/images/icon16/unsent-16.png}"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <div class="layui-card">
                <div class="layui-card-header">
                    告警统计
                </div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview-my-550px" data-anim="fade"
                         lay-filter="LAY-index-dataview" id="layadmin-dataview-my">
                        <div carousel-item>
                            <!-- 通过ajax动态加载数据 -->
                            <div class="layui-row" id="last-7-days-alarm-record-statistics"></div>
                            <!-- 通过ajax动态加载数据 -->
                            <div class="layui-row" id="alarm-record-result-statistics"></div>
                            <!-- 通过ajax动态加载数据 -->
                            <div class="layui-row" id="alarm-record-type-statistics" style="top: 25px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="layui-card">
                <div class="layui-card-header">最新告警</div>
                <div class="layui-card-body">
                    <!-- 通过ajax动态加载数据 -->
                    <ul class="layuiadmin-card-status layuiadmin-home2-usernote" style="word-wrap:break-word;"
                        id="get-last-5-alarm-record"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<script src="./js/echarts.theme.infographic.js" th:src="@{/js/echarts.theme.infographic.js}"></script>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script>
    layui.config({
        base: ctxPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'home', 'util'], function () {
        var util = layui.util;
        // 右下脚回到顶部小图标
        util.fixbar({
            showHeight: 100
        });
    });
</script>
</body>
</html>