服务器资源实时监控图表

a516ca5c · 杨琪琪 · 0731eaec · a516ca5c · a516ca5c · a516ca5c
Commit a516ca5c authored Apr 26, 2024 by 杨琪琪
9 changed files
--- a/src/main/resources/static/js/callSupervision/callChartOptions.js
+++ b/src/main/resources/static/js/callSupervision/callChartOptions.js
@@ -105,7 +105,7 @@ const labelOption = {
    align: 'left',
    verticalAlign: 'middle',
    rotate: 90,
-    formatter: '{c}  {name|{a}}',
+    formatter: '{@metric}  {name|{a}}',
    fontSize: 16,
    rich: {
        name: {}
@@ -117,26 +117,35 @@ var defaultYBarOptions = {
        textStyle: {fontSize: '14px', color: "#fff"},
        left: 'center'
    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
    grid: {
        left: '3%',
        right: '4%',
-        bottom: '5%',
+        bottom: '15%',
        containLabel: true
    },
    legend: {
-        data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
        textStyle: {
            color: "#fff",
        },
        left: 10
    },
-    xAxis: [
+    dataset: {
-        {
+        source: []
+    },
+    xAxis: {
        type: 'category',
        axisTick: {show: false},
-            data: ['2012', '2013', '2014', '2015', '2016']
+        axisLabel: {
+            interval: 0, // 显示所有刻度值
+            rotate: 270, // 可选：旋转刻度标签，以免重叠
        }
-    ],
+    },
    yAxis: [
        {
            type: 'value'
@@ -144,41 +153,24 @@ var defaultYBarOptions = {
    ],
    series: [
        {
-            name: 'Forest',
            type: 'bar',
            barGap: 0,
-            label: labelOption,
+            // label: labelOption,
            emphasis: {
                focus: 'series'
            },
-            data: [320, 332, 301, 334, 390]
-        },
-        {
-            name: 'Steppe',
-            type: 'bar',
-            label: labelOption,
-            emphasis: {
-                focus: 'series'
-            },
-            data: [220, 182, 191, 234, 290]
        },
+    ],
+    dataZoom: [ // 数据区域缩放配置
        {
-            name: 'Desert',
+            type: 'inside', // 内置型数据区域缩放
-            type: 'bar',
+            start: 0, // 默认开始位置百分比
-            label: labelOption,
+            end: 100 // 默认结束位置百分比
-            emphasis: {
-                focus: 'series'
-            },
-            data: [150, 232, 201, 154, 190]
        },
        {
-            name: 'Wetland',
+            type: 'slider', // 滑动条型数据区域缩放
-            type: 'bar',
+            start: 0, // 默认开始位置百分比
-            label: labelOption,
+            end: 100 // 默认结束位置百分比
-            emphasis: {
-                focus: 'series'
-            },
-            data: [98, 77, 101, 99, 40]
        }
    ]
 }
--- a/src/main/resources/static/layui2_9_8/css/layui.css
+++ b/src/main/resources/static/layui2_9_8/css/layui.css
--- a/src/main/resources/static/layui2_9_8/font/iconfont.eot
+++ b/src/main/resources/static/layui2_9_8/font/iconfont.eot
--- a/src/main/resources/static/layui2_9_8/font/iconfont.svg
+++ b/src/main/resources/static/layui2_9_8/font/iconfont.svg
--- a/src/main/resources/static/layui2_9_8/font/iconfont.ttf
+++ b/src/main/resources/static/layui2_9_8/font/iconfont.ttf
--- a/src/main/resources/static/layui2_9_8/font/iconfont.woff
+++ b/src/main/resources/static/layui2_9_8/font/iconfont.woff
--- a/src/main/resources/static/layui2_9_8/font/iconfont.woff2
+++ b/src/main/resources/static/layui2_9_8/font/iconfont.woff2
--- a/src/main/resources/static/layui2_9_8/layui.js
+++ b/src/main/resources/static/layui2_9_8/layui.js
--- a/src/main/resources/templates/callSupervision/index.html
+++ b/src/main/resources/templates/callSupervision/index.html
@@ -5,9 +5,9 @@
    <meta charset="UTF-8">
    <title>testUrl</title>
-    <link rel="stylesheet" href="newLayui/css/layui.css" media="all">
+    <link rel="stylesheet" href="layui2_9_8/css/layui.css" media="all">
    <link rel="stylesheet" href="css/callSupervision.css" media="all">
-    <script src="newLayui/layui.js"></script>
+    <script src="layui2_9_8/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts/echarts.js"></script>
    <style>
@@ -149,7 +149,18 @@
 <script th:inline="javascript">
    var gatewayUrl = [[${gatewayUrl}]];
 </script>
+<script>
+    // 添加响应拦截器
+    axios.interceptors.response.use(function (response) {
+        // 2xx 范围内的状态码都会触发该函数。
+        // 对响应数据做点什么
+        return response.data;
+    }, function (error) {
+        // 超出 2xx 范围的状态码都会触发该函数。
+        // 对响应错误做点什么
+        return Promise.reject(error);
+    });
+</script>
 <script>
    var timeLineChart = null;
    var courtBarChart = null;
@@ -158,6 +169,7 @@
    var currYear = new Date().strftime('%Y');
    var currMonth = new Date().strftime('%m');
    var currDate = new Date().strftime('%d');
+    var monitorInterval = null;
    // 确保layui和echarts已经加载
    layui.config({
@@ -183,9 +195,9 @@
        form.val('areaForm', {
            isRegion: true,
            interval: 'hour',
-            year: new Date().strftime('%Y'),
+            year: currYear,
-            month: new Date().strftime('%m'),
+            month: currMonth,
-            day: new Date().strftime('%d')
+            day: currDate
        })
        // 全区/地市 切换监听
@@ -202,7 +214,6 @@
            showBottom: false,
            // max: new Date(),
            done: function (value, date, endDate) {
-                console.log('选择了年份：', value, date, endDate); // 打印选择的日期值
                getBrokenLineData();
            }
        });
@@ -214,7 +225,12 @@
            // max: new Date(),
            isPreview: false, //禁用面板左下角选择值的预览，默认 true
            done: function (value, date, endDate) {
-                console.log('选择了月份：', value, date, endDate); // 打印选择的日期值
+                if (!value) {
+                    form.val("areaForm", {
+                        day: ""
+                    });
+                    $('.interval-box').css('display', 'none')
+                }
                getBrokenLineData();
            }
        });
@@ -226,7 +242,6 @@
            // max: new Date(),
            isPreview: false, //禁用面板左下角选择值的预览，默认 true
            done: function (value, date, endDate) {
-                console.log('选择了日期：', value, date, endDate); // 打印选择的日期值
                if (value) {
                    form.val("areaForm", {
                        interval: "hour"
@@ -236,10 +251,8 @@
                    form.val("areaForm", {
                        interval: ""
                    });
-                    // $('.interval-box').css('display', 'none')
+                    $('.interval-box').css('display', 'none')
                }
-                let fData = form.val('areaForm');
-                console.log(' --- form 更新 --- ', fData)
                getBrokenLineData();
            }
        });
@@ -247,11 +260,14 @@
        //时分秒选择框
        form.on('radio(radio-time)', function (data) {
            let val = data.value;
-            console.log(' --- 当前选择值 --- ', val)
            getBrokenLineData()
        });
        getBrokenLineData();
+        getServerMonitoring(true);
+        monitorInterval = setInterval(function () {
+            getServerMonitoring();
+        }, 5000)
        //    表格初始
        table.render({
@@ -381,15 +397,15 @@
                displayType = "detailed"
            }
            let startDate = fData.day ? `${fData.year}-${fData.month}-${fData.day}` : fData.month ? `${fData.year}-${fData.month}` : fData.year;
-            $.ajax({
+            axios({
                url: gatewayUrl + '/stat/getBrokenLineData',
-                type: 'get',
+                method: 'get',
-                data: {
+                params: {
                    displayType,
                    startDate,
                    interval: fData.interval
-                },
+                }
-                success: function (res) {
+            }).then(function (res) {
                if (res.success) {
                    let dataObj = JSON.parse(JSON.stringify(res.data));
                    let timeArr;
@@ -413,19 +429,18 @@
                        updateLineChart({dataObject: YArrObject, showLegend: true});
                    }
                }
-                },
+            }).catch(function (err) {
-                error: function (err) {
+                console.log(' --- 接口请求失败，抛出异常 --- ', err)
-                    console.log(' --- 报错 --- ', err)
+            })
-                }
-            });
        }
        //    获取法院调用排名
        function getCourtUseSum() {
-            $.ajax({
+            axios({
                url: gatewayUrl + '/appAbilityRecordAll/getCourtUseSum',
-                type: 'get',
+                method: 'get',
-                success: function (res) {
+                params: {}
+            }).then(function (res) {
                let arr = JSON.parse(JSON.stringify(res))
                let yAxisData = arr.map(item => {
                    return item.sortName
@@ -434,10 +449,8 @@
                    return item.sum
                })
                updateBarChart({yAxisData, seriesData});
-                },
+            }).catch(function (err) {
-                error: function (err) {
+                console.log(' --- 接口请求失败，抛出异常 --- ', err)
-                    console.log(' --- 报错 --- ', err)
-                }
            })
        }
@@ -445,69 +458,63 @@
            let option = courtBarChart.getOption();
            option.yAxis[0].data = yAxisData;
            option.series[0].data = seriesData;
-            courtBarChart.setOption(option);
+            courtBarChart.setOption(option, true);
        }
        //    获取年调用量
        function getCourtUseInYear() {
-            $.ajax({
+            axios({
                url: gatewayUrl + '/appAbilityRecordAll/getCourtUseInYear',
-                type: 'get',
+                method: 'get',
-                data: {
+                params: {
                    courtName: "全部",
                    year: currYear
-                },
+                }
-                success: function (res) {
+            }).then(function (res) {
                callYearNum = res.count;
                let len = $('#call-year-num').text(callYearNum).text().length;
                resizeText();
-                },
+            }).catch(function (err) {
-                error: function (err) {
+                console.log(' --- 接口请求失败，抛出异常 --- ', err)
-                    console.log(' --- 报错 --- ', err)
-                }
            })
        }
        //    获取月调用量
        function getCourtUseInMonth() {
-            $.ajax({
+            axios({
                url: gatewayUrl + '/appAbilityRecordAll/getCourtUseInMonth',
-                type: 'get',
+                method: 'get',
-                data: {
+                params: {
                    courtName: "全部",
                    year: currYear,
                    month: currMonth
-                },
+                }
-                success: function (res) {
+            }).then(function (res) {
                callMonthNum = res.count;
                let len = $('#call-month-num').text(callMonthNum).text().length;
                resizeText();
-                },
+            }).catch(function (err) {
-                error: function (err) {
+                console.log(' --- 接口请求失败，抛出异常 --- ', err)
-                    console.log(' --- 报错 --- ', err)
-                }
            })
        }
        //    获取年调用量
        function getCourtUseInDay() {
-            $.ajax({
+            axios({
                url: gatewayUrl + '/appAbilityRecordAll/getCourtUseInDay',
-                type: 'get',
+                method: 'get',
-                data: {
+                params: {
                    courtName: "全部",
                    year: currYear,
                    month: currMonth,
                    day: currDate
                },
-                success: function (res) {
+            }).then(function (res) {
                callDayNum = res.count;
                $('#call-day-num').text(callDayNum);
                resizeText();
-                },
+            }).catch(function (err) {
-                error: function (err) {
+                console.log(' --- 接口请求失败，抛出异常 --- ', err)
-                    console.log(' --- 报错 --- ', err)
-                }
            })
        }
@@ -593,8 +600,50 @@
                } else {
                    console.log(' --- 下载失败 --- ', data)
                }
+            }).catch(function (err) {
+                console.log(' --- 接口请求失败，抛出异常 --- ', err)
            })
        }
+        //    服务器资源实时监控
+        function getServerMonitoring(flag) {
+            axios({
+                url: gatewayUrl + '/stat/getServerMonitoring',
+                method: 'get',
+            }).then(function (res) {
+                if (res.success) {
+                    updateYBarChart(res.data, flag);
+                } else {
+                    console.log(' --- 获取服务器资源实时监控数据失败 --- ', res)
+                }
+            }).catch(function (err) {
+                console.log(' --- 接口请求失败，抛出异常 --- ', err)
+            })
+        }
+        function updateYBarChart(source, flag) {
+            // hardwareBarChart.clear();
+            let option = defaultYBarOptions;
+            let len = source[0].length - 1;
+            option.dataset['source'] = source;
+            if (flag) {
+                let bar = option.series[0];
+                let n = 0;
+                option.series = [];
+                while (n < len) {
+                    option.series.push(bar);
+                    n++;
+                }
+            }
+            hardwareBarChart.setOption(option, true);
+        }
+        //    页面即将销毁
+        $(window).on('beforeunload', function () {
+            if (monitorInterval) {
+                clearInterval(monitorInterval)
+            }
+        });
    });
 </script>
 </html>