From 7df1fab7ff3f6ae6f69c51eb8c92b5c5fec52114 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=80=97=E5=AD=90?= Date: Sat, 3 Dec 2022 02:09:01 +0800 Subject: [PATCH] =?UTF-8?q?=E7=89=B9=E6=80=A7=EF=BC=88=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E7=9B=91=E6=8E=A7=EF=BC=89=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E9=80=89=E6=8B=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Controllers/Api/MonitorsController.php | 16 +- resources/views/monitor.blade.php | 353 +++++++++--------- resources/views/plugin.blade.php | 2 +- 3 files changed, 179 insertions(+), 192 deletions(-) diff --git a/app/Http/Controllers/Api/MonitorsController.php b/app/Http/Controllers/Api/MonitorsController.php index 04545c06..f2999a71 100644 --- a/app/Http/Controllers/Api/MonitorsController.php +++ b/app/Http/Controllers/Api/MonitorsController.php @@ -69,21 +69,15 @@ class MonitorsController extends Controller { $start = $request->input('start') ?? now(); $end = $request->input('end') ?? now(); - $start = Carbon::create($start)->startOfDay(); - $end = Carbon::create($end)->endOfDay(); + $start = Carbon::create($start); + $end = Carbon::create($end); $data = Monitor::query()->where('created_at', '>=', $start)->where('created_at', '<=', $end)->get()->toArray(); $res['code'] = 0; $res['msg'] = 'success'; if (empty($data)) { - $res['data']['times'] = []; - $res['data']['uptime'] = []; - $res['data']['cpu']['use'] = []; - $res['data']['memory']['mem_use'] = []; - $res['data']['memory']['mem_use_p'] = []; - $res['data']['memory']['swap_use'] = []; - $res['data']['memory']['swap_use_p'] = []; - $res['data']['network']['tx_now'] = []; - $res['data']['network']['rx_now'] = []; + $res['code'] = 1; + $res['msg'] = '暂无数据'; + return response()->json($res); } foreach ($data as $key => $value) { $info = json_decode($value['info'], true); diff --git a/resources/views/monitor.blade.php b/resources/views/monitor.blade.php index 52d693fb..c6ff688d 100644 --- a/resources/views/monitor.blade.php +++ b/resources/views/monitor.blade.php @@ -2,7 +2,7 @@
-
+
开启监控
-
+
+ 时间选择 +
+
+ +
+ - +
+ +
+
+
@@ -28,19 +43,6 @@
负载 -
- {{----}} - - {{-- - - --}} -
@@ -52,18 +54,6 @@
CPU -
- {{----}} - - {{-- - - --}} -
@@ -77,20 +67,6 @@
内存 -
- {{----}} - - {{-- - - --}} -
@@ -101,17 +77,6 @@
网络 -
- {{----}} - - {{-- - - --}} -
@@ -126,6 +91,25 @@ var view = layui.view; var $ = layui.jquery; var form = layui.form; + var laydate = layui.laydate; + + // 渲染时间选择器 + // 默认开始时间为今天0点，结束时间为当前时间 + var startDate = new Date(new Date().setHours(0, 0, 0, 0)); + var endDate = new Date(); + // 拼接时间字符串 + var startStr = startDate.getFullYear() + '-' + (startDate.getMonth() + 1) + '-' + startDate.getDate() + ' ' + startDate.getHours() + ':' + startDate.getMinutes() + ':' + startDate.getSeconds(); + var endStr = endDate.getFullYear() + '-' + (endDate.getMonth() + 1) + '-' + endDate.getDate() + ' ' + endDate.getHours() + ':' + endDate.getMinutes() + ':' + endDate.getSeconds(); + laydate.render({ + elem: '#monitor-date' + , type: 'datetime' + , range: ['#monitor-startDate', '#monitor-endDate'] + , value: startStr + ' - ' + endStr + , calendar: true + , done: function (value, date, endDate) { + getMonitorData(date.year + '-' + date.month + '-' + date.date + ' ' + date.hours + ':' + date.minutes + ':' + date.seconds, endDate.year + '-' + endDate.month + '-' + endDate.date + ' ' + endDate.hours + ':' + endDate.minutes + ':' + endDate.seconds); + } + }); // 获取监控开关和保存天数 admin.req({ @@ -206,136 +190,145 @@ }); }); - // 获取监控数据 - admin.req({ - url: '/api/panel/monitor/getMonitorData', - type: 'get', - dataType: 'json', - success: function (res) { - if (res.code !== 0) { - layer.msg(res.msg, {icon: 2}); - return false; - } - let loadChart = renderEcharts('load_monitor', '负载监控', undefined, res.data.times, [{ - name: '负载', - type: 'line', - smooth: true, - itemStyle: {normal: {areaStyle: {type: 'default'}}}, - data: res.data.uptime.uptime, - markPoint: { - data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] - }, - markLine: { - data: [{type: 'average', name: '平均值'}] - } - }], [{ - type: 'value', - }]); - let cpuChart = renderEcharts('cpu_monitor', 'CPU监控', undefined, res.data.times, [{ - name: '使用率', - type: 'line', - smooth: true, - itemStyle: {normal: {areaStyle: {type: 'default'}}}, - data: res.data.cpu.use, - markPoint: { - data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] - }, - markLine: { - data: [{type: 'average', name: '平均值'}] - } - }], [{ - name: '单位 %', - min: 0, - max: 100, - type: 'value', - axisLabel: { - formatter: '{value} %' - } - }]); - let memoryChart = renderEcharts('memory_monitor', '内存', { - x: 'left', - data: ["内存", "Swap"] - }, res.data.times, [{ - name: '内存', - type: 'line', - smooth: true, - itemStyle: {normal: {areaStyle: {type: 'default'}}}, - data: res.data.memory.mem_use, - markPoint: { - data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] - }, - markLine: { - data: [{type: 'average', name: '平均值'}] - } - }, { - name: 'Swap', - type: 'line', - smooth: true, - itemStyle: {normal: {areaStyle: {type: 'default'}}}, - data: res.data.memory.swap_use, - markPoint: { - data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] - }, - markLine: { - data: [{type: 'average', name: '平均值'}] - } - }], [{ - name: '单位 MB', - min: 0, - max: res.data.mem_total, - type: 'value', - axisLabel: { - formatter: '{value} M' - } - }]); - let networkChart = renderEcharts('network_monitor', '网络', { - x: 'left', - data: ["出", "入"] - }, res.data.times, [{ - name: '出', - type: 'line', - smooth: true, - itemStyle: {normal: {areaStyle: {type: 'default'}}}, - data: res.data.network.tx_now, - markPoint: { - data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] - }, - markLine: { - data: [{type: 'average', name: '平均值'}] - } - }, { - name: '入', - type: 'line', - smooth: true, - itemStyle: {normal: {areaStyle: {type: 'default'}}}, - data: res.data.network.rx_now, - markPoint: { - data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] - }, - markLine: { - data: [{type: 'average', name: '平均值'}] - } - }], [{ - name: '单位 Kb/s', - type: 'value', - axisLabel: { - formatter: '{value} Kb' - } - }]); - - // 在窗口大小改变时，重置图表大小 - window.addEventListener("resize", function () { - loadChart.resize(); - cpuChart.resize(); - memoryChart.resize(); - networkChart.resize(); - }); - }, error: function (xhr, status, error) { - console.log('耗子Linux面板：ajax请求出错，错误' + error); - } - }); + getMonitorData(startStr, endStr); }); + + // 获取监控数据 + function getMonitorData(startDate, endDate) { + layui.use(['admin'], function () { + let admin = layui.admin; + // 获取监控数据 + admin.req({ + url: '/api/panel/monitor/getMonitorData?start=' + startDate + '&end=' + endDate, + type: 'get', + dataType: 'json', + success: function (res) { + if (res.code !== 0) { + layer.msg(res.msg, {icon: 2}); + return false; + } + let loadChart = renderEcharts('load_monitor', '负载', undefined, res.data.times, [{ + name: '负载', + type: 'line', + smooth: true, + itemStyle: {normal: {areaStyle: {type: 'default'}}}, + data: res.data.uptime.uptime, + markPoint: { + data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] + }, + markLine: { + data: [{type: 'average', name: '平均值'}] + } + }], [{ + type: 'value', + }]); + let cpuChart = renderEcharts('cpu_monitor', 'CPU', undefined, res.data.times, [{ + name: '使用率', + type: 'line', + smooth: true, + itemStyle: {normal: {areaStyle: {type: 'default'}}}, + data: res.data.cpu.use, + markPoint: { + data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] + }, + markLine: { + data: [{type: 'average', name: '平均值'}] + } + }], [{ + name: '单位 %', + min: 0, + max: 100, + type: 'value', + axisLabel: { + formatter: '{value} %' + } + }]); + let memoryChart = renderEcharts('memory_monitor', '内存', { + x: 'left', + data: ["内存", "Swap"] + }, res.data.times, [{ + name: '内存', + type: 'line', + smooth: true, + itemStyle: {normal: {areaStyle: {type: 'default'}}}, + data: res.data.memory.mem_use, + markPoint: { + data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] + }, + markLine: { + data: [{type: 'average', name: '平均值'}] + } + }, { + name: 'Swap', + type: 'line', + smooth: true, + itemStyle: {normal: {areaStyle: {type: 'default'}}}, + data: res.data.memory.swap_use, + markPoint: { + data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] + }, + markLine: { + data: [{type: 'average', name: '平均值'}] + } + }], [{ + name: '单位 MB', + min: 0, + max: res.data.mem_total, + type: 'value', + axisLabel: { + formatter: '{value} M' + } + }]); + let networkChart = renderEcharts('network_monitor', '网络', { + x: 'left', + data: ["出", "入"] + }, res.data.times, [{ + name: '出', + type: 'line', + smooth: true, + itemStyle: {normal: {areaStyle: {type: 'default'}}}, + data: res.data.network.tx_now, + markPoint: { + data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] + }, + markLine: { + data: [{type: 'average', name: '平均值'}] + } + }, { + name: '入', + type: 'line', + smooth: true, + itemStyle: {normal: {areaStyle: {type: 'default'}}}, + data: res.data.network.rx_now, + markPoint: { + data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}] + }, + markLine: { + data: [{type: 'average', name: '平均值'}] + } + }], [{ + name: '单位 Kb/s', + type: 'value', + axisLabel: { + formatter: '{value} Kb' + } + }]); + + // 在窗口大小改变时，重置图表大小 + window.addEventListener("resize", function () { + loadChart.resize(); + cpuChart.resize(); + memoryChart.resize(); + networkChart.resize(); + }); + }, error: function (xhr, status, error) { + console.log('耗子Linux面板：ajax请求出错，错误' + error); + } + }); + }); + } + // 渲染图表 function renderEcharts(element_id, title, legend = undefined, data_xAxis, series, yAxis = undefined) { var Chart = echarts.init(document.getElementById(element_id), layui.echartsTheme); diff --git a/resources/views/plugin.blade.php b/resources/views/plugin.blade.php index 3c139ebe..57cbd034 100644 --- a/resources/views/plugin.blade.php +++ b/resources/views/plugin.blade.php @@ -3,7 +3,7 @@
- 按钮点击一次即可，请勿重复点击以免重复操作，任务中心在右上角！ + 按钮点击一次即可，请勿重复点击以免重复操作，任务中心在右上方！