@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
<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, maximum-scale=1">
<style>

    .layui-card {
        border: 1px solid #f2f2f2;
        border-radius: 5px;
    }

    .icon {
        margin-right: 10px;
        color: #1aa094;
    }

    .icon-cray {
        color: #ffb800 !important;
    }

    .icon-blue {
        color: #1e9fff !important;
    }

    .icon-tip {
        color: #ff5722 !important;
    }

    .layuimini-qiuck-module {
        text-align: center;
        margin-top: 10px
    }

        .layuimini-qiuck-module a i {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 30px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layuimini-qiuck-module a cite {
            position: relative;
            top: 2px;
            display: block;
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }

    .welcome-module {
        width: 100%;
        height: 210px;
    }

    .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
        box-shadow: 0 1px 1px rgba(0,0,0,.05)
    }

    .panel-body {
        padding: 10px
    }

    .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit
    }

    .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }

    .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }

    .layui-red {
        color: red
    }

    .main_btn > p {
        height: 40px;
    }

    .layui-bg-number {
        background-color: #F8F8F8;
    }

    .layuimini-notice:hover {
        background: #f6f6f6;
    }

    .layuimini-notice {
        padding: 7px 16px;
        clear: both;
        font-size: 12px !important;
        cursor: pointer;
        position: relative;
        transition: background 0.2s ease-in-out;
    }

    .layuimini-notice-title, .layuimini-notice-label {
        padding-right: 70px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .layuimini-notice-title {
        line-height: 28px;
        font-size: 14px;
    }

    .layuimini-notice-extra {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 16px;
        display: inline-block;
        height: 16px;
        color: #999;
    }
</style>
<script>
    layui.use(['layer', 'echarts', 'common'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            common = layui.common,
            echarts = layui.echarts;
        common = layui.common;
        common.iframeInterval(function () {
            loadInfo();
        }, 10000); //指定10秒刷新一次
        $(function () {
            loadInfo();
            loadChart();
        });
        wcLoading.close();
        function loadInfo() {
            $.ajax({
                url: "/SystemSecurity/ServerMonitoring/GetServerDataJson?v=" + new Date().Format("yyyy-MM-dd hh:mm:ss"),
                dataType: "json",
                success: function (data) {
                    $('#cpucout').html(data.CPU + "%");
                    $('#armcout').html(data.ARM + "%");
                    $('#TotalRAM').html(data.TotalRAM);
                    $('#OutIP').html(data.IP);
                }
            });
        }
        function loadChart() {
            var myChart = echarts.init(document.getElementById('echarts-records'), 'walden');
            var xData = [];
            var armData = [];
            var cpuData = [];
            common.ajax({
                url: "/SystemSecurity/ServerMonitoring/GetServerData",
                dataType: "json",
                async: false,
                success: function (data) {
                    var length = data.length;
                    for (var i = 0; i < length; i++) {
                        if (data[i]['F_Date'] !== null) {
                            xData.push(new Date(data[i]['F_Date']).Format("yyyy-MM-dd"));
                        }
                        if (data[i]['F_ARM'] !== null) {
                            armData.push(data[i]['F_ARM']);
                        }
                        if (data[i]['F_CPU'] !== null) {
                            cpuData.push(data[i]['F_CPU']);
                        }
                    }
                }
            });
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['CPU使用率', 'ARM使用率']
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'CPU使用率', type: 'line',
                        data: cpuData,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 10,
                        showAllSymbol: true,
                        color: '#2499F8',
                    },
                    {
                        name: 'ARM使用率', type: 'line',
                        data: armData,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 10,
                        showAllSymbol: true,
                        color: '#F90',

                    }
                ]
            };

            myChart.setOption(option);
            // echarts 窗口缩放自适应
            window.onresize = function () {
                myChart.resize();
            }
        };
    })
</script>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-warning icon"></i>状态信息</div>
                    <div class="layui-card-body">
                        <div class="welcome-module">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number" style="height:200px">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-blue">实时</span>
                                                <h5>CPU使用率</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id="cpucout"></h1>
                                                <small>当前记录</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number" style="height:200px">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-cyan">实时</span>
                                                <h5>ARM使用率</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id="armcout"></h1>
                                                <small>当前记录</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                    <div class="layui-card-body">
                        <div id="echarts-records" style="width: 100%;min-height:220px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-fire icon"></i>服务器信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>服务器名称</td>
                                    <td>
                                        @Environment.MachineName
                                    </td>
                                </tr>
                                <tr>
                                    <td>总内存</td>
                                    <td><span id="TotalRAM"></span></td>
                                </tr>
                                <tr>
                                    <td>操作系统</td>
                                    <td>@System.Runtime.InteropServices.RuntimeInformation.OSDescription</td>
                                </tr>
                                <tr>
                                    <td>系统架构</td>
                                    <td>@System.Runtime.InteropServices.RuntimeInformation.OSArchitecture</td>
                                </tr>
                                <tr>
                                    <td>外网IP</td>
                                    <td>
                                        <span id="OutIP"></span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-fire icon"></i>.NET信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>环境变量</td>
                                    <td>@Html.Raw(env.EnvironmentName)</td>
                                </tr>
                                <tr>
                                    <td>ContentRootPath</td>
                                    <td>
                                        @Html.Raw(env.ContentRootPath)
                                    </td>
                                </tr>
                                <tr>
                                    <td>WebRootPath</td>
                                    <td>@Html.Raw(env.WebRootPath)</td>
                                </tr>
                                <tr>
                                    <td>.NET版本</td>
                                    <td>
                                        @Html.Raw(System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription)
                                    </td>
                                </tr>
                                <tr>
                                    <td>启动时间</td>
                                    <td>
                                        @System.Diagnostics.Process.GetCurrentProcess().StartTime.ToString("yyyy-MM-dd HH:mm:ss")
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>