使用flask-restful实现数据校验与序列化3
This commit is contained in:
zhengxinonly
@@ -1,408 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>首页</title>
|
||||
{% include 'admin/common/header.html' %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'admin/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: "/admin/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>
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
form.on('submit(role-save)', function (data) {
|
||||
$.ajax({
|
||||
url: '/admin/role/save',
|
||||
url: '/admin/role/add',
|
||||
data: JSON.stringify(data.field),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json',
|
||||
|
||||
@@ -32,9 +32,9 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">状态</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="enable" {% if role.enable == 0 %}checked {% endif %}value="0"
|
||||
<input type="radio" name="enable" {% if role.enable == 1 %}checked {% endif %}value="0"
|
||||
title="开启">
|
||||
<input type="radio" name="enable" {% if role.enable == 1 %}checked {% endif %} value="1"
|
||||
<input type="radio" name="enable" {% if role.enable == 0 %}checked {% endif %} value="1"
|
||||
title="关闭">
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
form.on('submit(role-update)', function (data) {
|
||||
$.ajax({
|
||||
url: '/admin/role/update',
|
||||
url: '/admin/role/edit/' + data.field.roleId,
|
||||
data: JSON.stringify(data.field),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json',
|
||||
@@ -96,6 +96,7 @@
|
||||
})
|
||||
return false
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
|
||||
@@ -137,14 +137,14 @@
|
||||
form.on('switch(role-enable)', function (obj) {
|
||||
let operate
|
||||
if (obj.elem.checked) {
|
||||
operate = 'enable'
|
||||
operate = 1
|
||||
} else {
|
||||
operate = 'disable'
|
||||
operate = 0
|
||||
}
|
||||
let loading = layer.load()
|
||||
$.ajax({
|
||||
url: '/admin/role/' + operate,
|
||||
data: JSON.stringify({ roleId: this.value }),
|
||||
url: '/admin/role/enable',
|
||||
data: JSON.stringify({ roleId: this.value, operate: operate }),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json',
|
||||
type: 'put',
|
||||
@@ -194,7 +194,7 @@
|
||||
layer.close(index)
|
||||
let loading = layer.load()
|
||||
$.ajax({
|
||||
url: MODULE_PATH + 'remove/' + obj.data['id'],
|
||||
url: MODULE_PATH + 'role_power/' + obj.data['id'],
|
||||
dataType: 'json',
|
||||
type: 'delete',
|
||||
success: function (result) {
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
dtree.render({
|
||||
elem: '#role-power',
|
||||
method: 'get',
|
||||
url: '/admin/role/getRolePower/' + {{id}},
|
||||
url: '/admin/role/role_power/' + {{id}},
|
||||
dataFormat: 'list',
|
||||
checkbar: true,
|
||||
skin: 'layui',
|
||||
@@ -56,7 +56,7 @@
|
||||
data.field.powerIds = ids
|
||||
|
||||
$.ajax({
|
||||
url: '/admin/role/saveRolePower',
|
||||
url: '/admin/role/role_power/' + data.field.roleId,
|
||||
data: data.field,
|
||||
dataType: 'json',
|
||||
type: 'put',
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
data.field.roleIds = roleIds
|
||||
|
||||
$.ajax({
|
||||
url: '/admin/user/save',
|
||||
url: '/users/add',
|
||||
data: JSON.stringify(data.field),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json',
|
||||
|
||||
@@ -258,7 +258,7 @@
|
||||
layer.close(index)
|
||||
let loading = layer.load()
|
||||
$.ajax({
|
||||
url: MODULE_PATH + 'remove/' + obj.data['id'],
|
||||
url: MODULE_PATH + obj.data['id'],
|
||||
dataType: 'json',
|
||||
type: 'delete',
|
||||
success: function (result) {
|
||||
|
||||
Reference in New Issue
Block a user