HTCloud/HT.Cloud.Web/Areas/SystemSecurity/Views/DeviceIOStatus/Index.cshtml

@{
    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 style ="width:100%;height:100%;">
    <div class="layuimini-container" style="width:100%;height:100%;">
        <div class="layuimini-main">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md15">
                    <iframe style="width:100%;height:95vh" src="http://192.168.110.249:1881/"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>