Monitor.cshtml 9.54 KB
@{
    ViewData["Title"] = "系统监控";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header {
    <style type="text/css">
        .warning {
            color: red;
        }
    </style>
}
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header"><b>CPU</b></div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="line">
                        <thead>
                            <tr>
                                <th>属性</th>
                                <th>值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>型号</td>
                                <td><span id="cupName">未获取</span></td>
                            </tr>
                            <tr>
                                <td>制造商</td>
                                <td><span id="cpuSupper">未获取</span></td>
                            </tr>
                            <tr>
                                <td>核心数</td>
                                <td><span id="cpuNum">未获取</span></td>
                            </tr>
                            <tr>
                                <td>使用率</td>
                                <td><span id="cpuUsed">0%</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header"><b>内存</b></div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="line">
                        <thead>
                            <tr>
                                <th>属性</th>
                                <th>值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>总内存</td>
                                <td><span id="MemTotal">未获取</span></td>
                            </tr>
                            <tr>
                                <td>已用内存</td>
                                <td><span id="MemSys">未获取</span></td>
                            </tr>
                            <tr>
                                <td>剩余内存</td>
                                <td><span id="MemFree">未获取</span></td>
                            </tr>
                            <tr>
                                <td>使用率</td>
                                <td><span id="MemUsed">未获取</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header"><b>硬盘状态</b></div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line">
                    <thead>
                        <tr>
                            <th>盘符</th>
                            <th>文件系统</th>
                            <th>总大小</th>
                            <th>可用大小</th>
                            <th>已用大小</th>
                            <th>占用百分比</th>
                        </tr>
                    </thead>
                    <tbody id="SysFiles">
                        <tr>
                            <td colspan="6" style="text-align: center;">无数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header"><b>服务器信息</b></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <span class="layui-col-md3">服务器名称</span>
                    <span class="layui-col-md3" id="ComputerName">null</span>
                    <span class="layui-col-md3">操作系统</span>
                    <span class="layui-col-md3" id="Caption">未获取</span>
                </div>
                <hr class="layui-border-blue">
                <div class="layui-row">
                    <span class="layui-col-md3">服务器IP</span>
                    <span class="layui-col-md3" id="IP">未获取</span>
                    <span class="layui-col-md3">系统架构</span>
                    <span class="layui-col-md3" id="OSArchitecture">未获取</span>
                </div>
                <hr class="layui-border-blue">
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header"><b>程序运行环境</b></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <span class="layui-col-md3">框架平台</span>
                    <span class="layui-col-md3">Net Core</span>
                    <span class="layui-col-md3">运行时信息版本</span>
                    <span class="layui-col-md3">2.2</span>
                </div>
                <hr class="layui-border-blue">
                <div class="layui-row">
                    <span class="layui-col-md3">启动时间</span>
                    <span class="layui-col-md3"><span id="StartTime">0</span></span>
                    <span class="layui-col-md3">运行时长</span>
                    <span class="layui-col-md3"><span id="RunTime">0</span></span>
                </div>
                <hr class="layui-border-blue">
                <div class="layui-row">
                    <span class="layui-col-md3">项目路径</span>
                    <span class="layui-col-md9" id="Path">null</span>
                </div>
                <hr class="layui-border-blue">
            </div>
        </div>
    </div>

    @section Scripts {
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });

        function Update() {
            $.ajax({
                url: "GetSystemInfo",
                success: function (result) {
                    //CPU
                    $("#cpuNum").html(result.cpu.num);
                    $("#cupName").html(result.cpu.name);
                    $("#cpuSupper").html(result.cpu.supper);
                    $("#cpuUsed").html(result.cpu.used);
                    if (result.cpu.used.replace("%", "") >= 80) {
                        $("#cpuUsed").attr("class", "warning");
                    }
                    else {
                        $("#cpuUsed").attr("class", "");
                    }

                    //内存
                    $("#MemTotal").html(result.mem.total);
                    $("#MemFree").html(result.mem.free);
                    $("#MemSys").html(result.mem.sys);
                    $("#MemUsed").html(result.mem.used);
                    if (result.mem.used.replace("%", "") >= 80) {
                        $("#MemUsed").attr("class", "warning");
                    }
                    else {
                        $("#MemUsed").attr("class", "");
                    }

                    //SystemInfo
                    $("#StartTime").html(result.sys.startTime);
                    $("#RunTime").html(result.sys.runTime);
                    $("#Path").html(result.sys.path);
                    $("#ComputerName").html(result.sys.name);
                    $("#Caption").html(result.sys.caption);
                    $("#OSArchitecture").html(result.sys.osArchitecture)
                    $("#IP").html(result.sys.ip);
                    //磁盘信息
                    var sysFiles = [];
                    result.sysFiles.forEach((item, index) => {
                        var temp = `<tr>
                                                <td>${item.dirName}</td>
                                                <td>${item.sysTypeName}</td>
                                                <td>${item.total}</td>
                                                <td>${item.free}</td>
                                                <td>${item.used}</td>`;
                        if (item.usage.replace("%", "") >= 80) {
                            temp += `<td class="warning">${item.usage}</td>`
                        }
                        else {
                            temp += `<td>${item.usage}</td>`
                        };
                        temp += `</tr>`;
                        sysFiles.push(temp);
                    });
                    if (sysFiles.length > 0) {
                        $("#SysFiles").html(sysFiles);
                    }
                },
                error: function (error) {
                    var msg = error.responseText;
                    if (msg == "") {
                        layer.msg("网络故障或程序异常,获取数据失败!若长时间出现,请联系管理员处理!", { icon: 2 });
                    }
                    else {
                        console.error(msg);
                        layer.msg(`获取数据失败!${msg}若长时间出现,请联系管理员处理!`, { icon: 2 });
                    }
                }
            });
        }

        window.onload = Update;
        window.setInterval(Update, 1000);
    </script>
}