ZLPMS/PMS.WebUI/Views/CloudMonitor/ServerInfo.cshtml


@{
    ViewBag.Title = "ServerHardwareMonitoringIndex";
    Layout = "~/Views/Shared/_MainLayoutPage.cshtml";
}
<div class="easyui-panel">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">时间段选择</label>
            <div class="layui-input-inline">
                <input type="text" id="YJLX" name="YJLX" lay-verify="YJLX" autocomplete="off" class="layui-input" style="height:38px;border-radius:4px" />
            </div>
        </div>
        <div class="layui-inline Custom" style="display:none;">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="datetime-local" id="KSSJ" name="KSSJ" lay-verify="KSSJ" autocomplete="off" class="layui-input" style="height:38px;border-radius:4px" />
            </div>
        </div>
        <div class="layui-inline Custom" style="display:none;">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="datetime-local" id="JSSJ" name="JSSJ" lay-verify="JSSJ" autocomplete="off" class="layui-input" style="height:38px;border-radius:4px" />
            </div>
            <button type="button" id="CX" class="layui-btn layui-btn-sm">查询</button>
        </div>
    </div>
    <div style="height: 500px; display: flex;">
        <div id="cpu" style="width:500px;" class="myChart"></div>
        <div id="nc" style="width:500px;" class="myChart"></div>
        <div id="zp" style="width:500px;" class="myChart"></div>
    </div>
</div>
<script src="~/Content/Scripts/Common.js"></script>
<script src="~/Content/Scripts/plugins/hcharts/highcharts.js"></script>
<script src="~/Content/Scripts/plugins/hcharts/highcharts-more.js"></script>
<script src="~/Content/Scripts/plugins/hcharts/modules/solid-gauge.js"></script>
<script>
    function startTime(time) {
        const nowTimeDate = new Date(time);
        return nowTimeDate.setHours(0, 0, 0, 0);
    }
    function endTime(time) {
        const nowTimeDate = new Date(time);
        return nowTimeDate.setHours(23, 59, 59, 999);
    }
    function getTodayStartTimeAndEndTime(time) {
        time = time ? time : new Date();
        return {
            startTime: new Date(time.setHours(0, 0, 0, 0)),
            endTime: new Date(time.setHours(23, 59, 59, 999)),
        };
    }
    function getCurrentWeekStartTimeAndEndTime(time) {
        const current = time ? time : new Date();
        // current是本周的第几天
        let nowDayOfWeek = current.getDay();
        if (nowDayOfWeek === 0) nowDayOfWeek = 7;
        const dayNum = 1 * 24 * 60 * 60 * 1000;
        // 获取本周星期一的时间，星期一作为一周的第一天
        const firstDate = new Date(current.valueOf() - (nowDayOfWeek - 1) * dayNum);
        // 获取本周星期天的时间，星期天作为一周的最后一天
        const lastDate = new Date(new Date(firstDate).valueOf() + 6 * dayNum);
        return {
            startTime: new Date(startTime(firstDate)),
            endTime: new Date(endTime(lastDate)),
        };
    }
    $(function () {

        let serverId = getQueryString("serverId");
        //修改图表时间差异
        Highcharts.setOptions({ global: { useUTC: false } });

        //项目
        $("#YJLX").combobox({
            data: [{
                "ID": 0,
                "名称": "当天",
            },
            {
                "ID": 3,
                "名称": "昨天",
            },
            {
                "ID": 4,
                "名称": "近三天",
            }, {
                "ID": 1,
                "名称": "本周",
            },
            {
                "ID": 2,
                "名称": "本月",
            },
            {
                "ID": -1,
                "名称": "自定义",
            }],
            valueField: 'ID',
            textField: '名称',
            limitToList: true,
            value: 0,
            onChange: function (value, index) {
                if (value == -1) {
                    //自定义时间
                    $(".Custom").css("display", "");
                } else {
                    //定时
                    $(".Custom").css("display", "none");
                    GetChartData(serverId);
                }
            }
        })

        /**查询 */
        $("#CX").click(function () {
            let sTime = $("#KSSJ").val();
            if (sTime === "") {
                ZLPMS.Msg("请输入开始时间！");
                return;
            }
            let eTime = $("#JSSJ").val();
            if (eTime === "") {
                ZLPMS.Msg("请输入结束时间！");
                return;
            }
            if (sTime > eTime) {
                ZLPMS.Msg("结束时间不能小于开始时间！");
                return;
            }
            GetChartData(serverId);
        })

        /**
         * 获取服务器数据
         */
        function GetChartData(serverId) {
            let type = $("#YJLX").val();
            let sTime = "";
            let eTime = "";
            switch (type) {
                case "0": {
                    //本日
                    sTime = new Date().format("yyyy-MM-ddT00:00:00");
                    eTime = new Date().format("yyyy-MM-ddT23:59:59");
                    break;
                }
                case "1": {
                    //本周
                    sTime = getCurrentWeekStartTimeAndEndTime().startTime.format("yyyy-MM-ddThh:mm:ss");
                    eTime = getCurrentWeekStartTimeAndEndTime().endTime.format("yyyy-MM-ddThh:mm:ss");
                    break;
                }
                case "2": {
                    //本月
                    sTime = new Date().format("yyyy-MM-01T00:00:00");
                    eTime = new Date().format("yyyy-MM-ddThh:mm:ss");
                    break;
                }
                case "3": {
                    //昨天
                    var day1 = new Date();
                    day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
                    sTime = new Date(day1).format("yyyy-MM-ddT00:00:00");
                    eTime = new Date(day1).format("yyyy-MM-ddT23:59:59");
                    break;
                }
                case "4": {
                    //近三天
                    var day1 = new Date();
                    day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000*3);
                    sTime = new Date(day1).format("yyyy-MM-ddT00:00:00");
                    eTime = new Date().format("yyyy-MM-ddThh:mm:ss");
                    break;
                }
                case "-1": {
                    //自定义
                    sTime = $("#KSSJ").val();
                    eTime = $("#JSSJ").val();
                    break;
                }
            }
            let data = ZLPMS.GetAPi(`/CloudMonitor/GetServerDetailByServerId?serverId=${serverId}&startTime=${sTime}&endTime=${eTime}`);
            let cpudata = [];
            let ncdata = [];
            let zpdata = [];
            data = data.sort((a, b) => {
                return b["时间戳创建时间"] - a["时间戳创建时间"];
            })
            for (var i = 0; i < data.length; i++) {
                let d = data[i];
                cpudata.push([d["时间戳创建时间"], d["CPU使用率"]]);
                ncdata.push([d["时间戳创建时间"], d["内存使用率"]]);
                zpdata.push([d["时间戳创建时间"], d["磁盘使用率"]]);
            }

            let alertConfiguration = ZLPMS.GetAPi(`/CloudMonitor/GetAlertConfiguration`);
            InitChart("cpu", "cpu资源", "CPU使用率", "CPU占用", cpudata, alertConfiguration.CPU使用濒危, alertConfiguration.CPU使用高危);
            InitChart("nc", "内存资源", "内存使用率", "内存占用", ncdata, alertConfiguration.内存使用濒危, alertConfiguration.内存使用高危);
            InitChart("zp", "磁盘资源", "磁盘使用率", "磁盘占用", zpdata, alertConfiguration.磁盘使用濒危, alertConfiguration.磁盘使用高危);
        }

        function InitChart(id, tltle, yName, showName, data, min, max) {
            let chart = Highcharts.chart(id, {
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: tltle
                },
                subtitle: {
                    text: ""//副标题
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        millisecond: '%H:%M:%S.%L',
                        second: '%H:%M:%S',
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%m-%d',
                        week: '%m-%d',
                        month: '%Y-%m',
                        year: '%Y'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br>' + `${showName}:${this.y}`;
                    },
                    dateTimeLabelFormats: {
                        millisecond: '%H:%M:%S.%L',
                        second: '%H:%M:%S',
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%Y-%m-%d',
                        week: '%m-%d',
                        month: '%Y-%m',
                        year: '%Y'
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: yName
                    },
                    plotBands: [{
                        from: 0,
                        to: min,
                        color: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, "#ffffff"],
                                [1, "#ffffff"]
                            ]
                        }
                    }, {
                        from: min,
                        to: max,
                        color: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, "#ffffc2"],
                                [1, "#ffffff"]
                            ]
                        }
                    }, {
                        from: max,
                        to: 100,
                        color: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, "#ffc2c2"],
                                [1, "#ffffc2"]
                            ]
                        }
                    }]
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                        fillColor: 'transparent', // 或者设置为 null
                        marker: {
                            radius: 1
                        },
                        lineWidth: 1,
                        lineColor: '#63b563', // 将线条颜色设置为黑色
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        }
                    }
                },
                series: [{
                    type: 'area',
                    name: showName,
                    data: data
                }]
            });
        }
        GetChartData(serverId);
        setInterval(function () {
            GetChartData(serverId);
        }, 60 * 1000);
    })
</script>