Spaces:
Configuration error
Configuration error
| <html> | |
| <head> | |
| <title>首页</title> | |
| {% include 'system/common/header.html' %} | |
| <link rel="stylesheet" href="{{ url_for('static', filename='system/system/css/other/console2.css') }}"/> | |
| </head> | |
| <body class="pear-container"> | |
| <div class="layui-row layui-col-space10"> | |
| <div class="layui-col-md8"> | |
| <div class="layui-row layui-col-space10"> | |
| <div class="layui-col-md6"> | |
| <div class="layui-card"> | |
| <div class="layui-card-header"> | |
| 主机信息 | |
| </div> | |
| <div class="layui-card-body"> | |
| <div class="layui-row layui-col-space10"> | |
| <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"> | |
| <div class="pear-card2"> | |
| <div class="title">核心数</div> | |
| <div class="count pear-text">{{ cpu_count }}</div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"> | |
| <div class="pear-card2"> | |
| <div class="title">空闲率</div> | |
| <div class="count pear-text"></div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"> | |
| <div class="pear-card2"> | |
| <div class="title">等待率</div> | |
| <div class="count pear-text"></div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"> | |
| <div class="pear-card2"> | |
| <div class="title">使用率</div> | |
| <div class="count pear-text">{{ cpus_percent }}%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md6"> | |
| <div class="layui-card"> | |
| <div class="layui-card-header"> | |
| 内存监控 | |
| </div> | |
| <div class="layui-card-body"> | |
| <div class="layui-row layui-col-space10"> | |
| <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"> | |
| <div class="pear-card2"> | |
| <div class="title">空闲内存</div> | |
| <div class="count pear-text">{{ memory_free }}M</div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"> | |
| <div class="pear-card2"> | |
| <div class="title">最大内存</div> | |
| <div class="count pear-text">{{ memory_total }}M</div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"> | |
| <div class="pear-card2"> | |
| <div class="title">已用内存</div> | |
| <div class="count pear-text">{{ memory_used }}M</div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"> | |
| <div class="pear-card2"> | |
| <div class="title">内存使用</div> | |
| <div class="count pear-text">{{ memory_usage }}%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md12"> | |
| <div class="layui-card"> | |
| <div class="layui-card-header">主机监控</div> | |
| <div class="layui-card-body"> | |
| <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief"> | |
| <div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="layui-col-md4"> | |
| <div class="layui-card"> | |
| <div class="layui-card-header">磁盘信息</div> | |
| <div class="layui-card-body"> | |
| <ul class="pear-card-status"> | |
| {% for i in disk_partitions_list %} | |
| <li> | |
| <p>{{ i.device }}</p> | |
| <p>{{ i.fstype }}</p> | |
| 磁盘大小 <span>{{ i.total }}M</span> | |
| 空闲大小 <span>{{ i.free }}M</span> | |
| <br/> | |
| <br/> | |
| 已经使用 <span>{{ i.used }}M</span> | |
| 使用概率 <span>{{ i.percent }}%</span> | |
| <br/> | |
| <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-primary pear-reply">详情</a> | |
| </li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="layui-card"> | |
| <div class="layui-card-header">主机信息</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>{{ hostname }}</td> | |
| </tr> | |
| <tr> | |
| <td>系统</td> | |
| <td>{{ system_version }}</td> | |
| </tr> | |
| <tr> | |
| <td>开机时间</td> | |
| <td>{{ boot_time }}</td> | |
| </tr> | |
| <tr> | |
| <td>运行时长</td> | |
| <td>{{ up_time_format }}</td> | |
| </tr> | |
| <tr> | |
| <td>python版本</td> | |
| <td>{{ python_version }}</td> | |
| </tr> | |
| <tr> | |
| <td>程序操作</td> | |
| <td> | |
| <a href="javascript:kill();" | |
| class="pear-btn pear-btn-xs pear-btn-primary">关闭程序</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% include 'system/common/footer.html' %} | |
| <script> | |
| layui.use(['layer', 'echarts', 'popup'], function () { | |
| var $ = layui.jquery, | |
| echarts = layui.echarts; | |
| let popup = layui.popup; | |
| var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); | |
| $("body").on("click", "[data-url]", function () { | |
| parent.layui.tab.addTabOnlyByElem("content", { | |
| id: $(this).attr("data-id"), | |
| title: $(this).attr("data-title"), | |
| url: $(this).attr("data-url"), | |
| close: true | |
| }) | |
| }) | |
| let bgColor = "#fff"; | |
| let color = [ | |
| "#0090FF", | |
| "#36CE9E", | |
| "#FFC005", | |
| "#FF515A", | |
| "#8B5CFF", | |
| "#00CA69" | |
| ]; | |
| let echartData = [ | |
| { | |
| name: "{{time_now}}", | |
| cpu_percent: {{ cpus_percent }}, | |
| memory_percent: {{ memory_usage }} | |
| }, | |
| ]; | |
| var xAxisData = echartData.map(v => v.name); | |
| // ["1", "2", "3", "4", "5", "6", "7", "8"] | |
| var yAxisData1 = echartData.map(v => v.cpu_percent); | |
| // [100, 138, 350, 173, 180, 150, 180, 230] | |
| var yAxisData2 = echartData.map(v => v.memory_percent); | |
| // [233, 233, 200, 180, 199, 233, 210, 180] | |
| const hexToRgba = (hex, opacity) => { | |
| let rgbaColor = ""; | |
| let reg = /^#[\da-f]{6}$/i; | |
| if (reg.test(hex)) { | |
| rgbaColor = | |
| `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt( | |
| "0x" + hex.slice(3, 5) | |
| )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`; | |
| } | |
| return rgbaColor; | |
| } | |
| option = { | |
| backgroundColor: bgColor, | |
| color: color, | |
| legend: { | |
| right: 10, | |
| top: 10 | |
| }, | |
| tooltip: { | |
| trigger: "axis", | |
| formatter: function (params) { | |
| let html = ''; | |
| params.forEach(v => { | |
| html += | |
| `<div style="color: #666;font-size: 14px;line-height: 24px"> | |
| <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span> | |
| ${v.seriesName}.${v.name} | |
| <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span> | |
| %`; | |
| }) | |
| return html | |
| }, | |
| extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;', | |
| axisPointer: { | |
| type: 'shadow', | |
| shadowStyle: { | |
| color: '#ffffff', | |
| shadowColor: 'rgba(225,225,225,1)', | |
| shadowBlur: 5 | |
| } | |
| } | |
| }, | |
| grid: { | |
| top: 100, | |
| containLabel: true | |
| }, | |
| xAxis: [{ | |
| type: "category", | |
| boundaryGap: false, | |
| axisLabel: { | |
| formatter: '{value}', | |
| textStyle: { | |
| color: "#333" | |
| } | |
| }, | |
| axisLine: { | |
| lineStyle: { | |
| color: "#D9D9D9" | |
| } | |
| }, | |
| data: xAxisData | |
| }], | |
| yAxis: [{ | |
| type: "value", | |
| name: '单位：百分比', | |
| axisLabel: { | |
| textStyle: { | |
| color: "#666" | |
| } | |
| }, | |
| nameTextStyle: { | |
| color: "#666", | |
| fontSize: 12, | |
| lineHeight: 40 | |
| }, | |
| splitLine: { | |
| lineStyle: { | |
| type: "dashed", | |
| color: "#E9E9E9" | |
| } | |
| }, | |
| axisLine: { | |
| show: false | |
| }, | |
| axisTick: { | |
| show: false | |
| } | |
| }], | |
| series: [{ | |
| name: "CPU", | |
| type: "line", | |
| smooth: true, | |
| symbolSize: 8, | |
| zlevel: 3, | |
| lineStyle: { | |
| normal: { | |
| color: color[0], | |
| shadowBlur: 3, | |
| shadowColor: hexToRgba(color[0], 0.5), | |
| shadowOffsetY: 8 | |
| } | |
| }, | |
| areaStyle: { | |
| normal: { | |
| color: new echarts.graphic.LinearGradient( | |
| 0, | |
| 0, | |
| 0, | |
| 1, | |
| [{ | |
| offset: 0, | |
| color: hexToRgba(color[0], 0.3) | |
| }, | |
| { | |
| offset: 1, | |
| color: hexToRgba(color[0], 0.1) | |
| } | |
| ], | |
| false | |
| ), | |
| shadowColor: hexToRgba(color[0], 0.1), | |
| shadowBlur: 10 | |
| } | |
| }, | |
| data: yAxisData1 | |
| }, { | |
| name: '内存', | |
| type: "line", | |
| smooth: true, | |
| symbolSize: 8, | |
| zlevel: 3, | |
| lineStyle: { | |
| normal: { | |
| color: color[1], | |
| shadowBlur: 3, | |
| shadowColor: hexToRgba(color[1], 0.5), | |
| shadowOffsetY: 8 | |
| } | |
| }, | |
| areaStyle: { | |
| normal: { | |
| color: new echarts.graphic.LinearGradient( | |
| 0, | |
| 0, | |
| 0, | |
| 1, | |
| [{ | |
| offset: 0, | |
| color: hexToRgba(color[1], 0.3) | |
| }, | |
| { | |
| offset: 1, | |
| color: hexToRgba(color[1], 0.1) | |
| } | |
| ], | |
| false | |
| ), | |
| shadowColor: hexToRgba(color[1], 0.1), | |
| shadowBlur: 10 | |
| } | |
| }, | |
| data: yAxisData2 | |
| }] | |
| }; | |
| echartsRecords.setOption(option); | |
| window.onresize = function () { | |
| echartsRecords.resize(); | |
| }; | |
| setInterval(ajaxPolling, 1000 * 10); | |
| function ajaxPolling() { | |
| $.ajax({ | |
| url: "/system/monitor/polling", | |
| success: function (data) { | |
| echartData.push({ | |
| name: data.time_now, | |
| cpu_percent: data.cups_percent, | |
| memory_percent: data.memory_used | |
| }); | |
| if (echartData.length > 8) { | |
| echartData.shift(); | |
| } | |
| xAxisData = echartData.map(v => v.name); | |
| yAxisData1 = echartData.map(v => v.cpu_percent); | |
| yAxisData2 = echartData.map(v => v.memory_percent); | |
| option.xAxis[0].data = xAxisData; | |
| option.series[0].data = yAxisData1; | |
| option.series[1].data = yAxisData2; | |
| echartsRecords.setOption(option); | |
| }, | |
| error: function (xhr, type, errorThrown) { | |
| popup.failure("api错误"); | |
| } | |
| }) | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |