<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
<title>智能机房管理平台</title>
|
|
<link rel="shortcut icon" href="favicon.ico">
|
<link rel="stylesheet" type="text/css" href="./plugins/layui/css/layui.css"/>
|
<link rel="stylesheet" type="text/css" href="css/page/sys-set.css" />
|
<style>
|
.layui-form-item{
|
margin: 3px;
|
}
|
.label-text{
|
padding: 9px 5px 9px 15px;
|
color: #ffffff;
|
font-size: 16px;
|
text-align: right;
|
}
|
.btn-test{
|
text-align: center;
|
}
|
#echarts01{
|
width: 600px;
|
height: 280px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="i-container">
|
|
<div class="jmkt-main">
|
|
<div class="layui-fluid">
|
<div class="pdgxq-m1 layui-row layui-col-space20">
|
|
<div class="layui-col-lg12 layui-col-md12">
|
<div class="pdgxq-m1-right pdgxq-m1-box">
|
<!-- <div class="pdgxq-H">-->
|
<!-- <h3 style="color: #ffffff;">系统配置</h3>-->
|
<!-- </div>-->
|
<div class="f-left" style="margin-top: 20px;">
|
<div class="layui-card">
|
<div class="layui-card-header"><i class="layui-icon layui-icon-key"></i>系统存储空间使用情况</div>
|
<div class="layui-card-body">
|
|
<form class="layui-form" id="form2" lay-filter="form-info" action="">
|
<div class="layui-row ft">
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-row">
|
<div class="layui-col-md4 label-text">
|
数据区大小：
|
</div>
|
<div class="layui-col-md8">
|
<input type="text" id="size" name="size" class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-row">
|
<div class="layui-col-md4 label-text">
|
已使用空间：
|
</div>
|
<div class="layui-col-md8">
|
<input type="text" id="used" name="used" class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-row">
|
<div class="layui-col-md4 label-text">
|
剩余空间：
|
</div>
|
<div class="layui-col-md8">
|
<input type="text" id="available" name="available" class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-row">
|
<div class="layui-col-md4 label-text">
|
已使用空间占比：
|
</div>
|
<div class="layui-col-md8">
|
<input type="text" id="use" name="use" class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item layui-col-md12" style="text-align: center;">
|
<div id="echarts01"></div>
|
</div>
|
|
|
</div>
|
|
</form>
|
|
</div>
|
</div>
|
</div>
|
<div class="f-right" style="margin-top: 20px;">
|
<div class="layui-card">
|
<div class="layui-card-header"><i class="layui-icon layui-icon-key"></i>系统存储配置</div>
|
<div class="layui-card-body">
|
|
<form class="layui-form" id="" lay-filter="time" action="">
|
<div class="layui-row ft" style="">
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-row">
|
<div class="layui-col-md4 label-text">
|
上传间隔时间(s)：
|
</div>
|
<div class="layui-col-md8">
|
<input type="text" id="uploadTime" name="uploadTime" class="layui-input">
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-row">
|
<div class="layui-col-md4 label-text">
|
告警数据存储时间(天)：
|
</div>
|
<div class="layui-col-md8">
|
<input type="text" id="alarmStoreTime" name="alarmStoreTime" class="layui-input">
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-row">
|
<div class="layui-col-md4 label-text">
|
历史数据存储时间(天)：
|
</div>
|
<div class="layui-col-md8">
|
<input type="text" id="storeTime" name="storeTime" class="layui-input">
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-row">
|
<div class="layui-col-md4 label-text">
|
网关运行情况通知时间：
|
</div>
|
<div class="layui-col-md5">
|
<input type="text" id="operationTime" name="operationTime" class="layui-input">
|
</div>
|
<div class="layui-col-md3 label-text" style="color: #79ffeb;font-size:14px;text-align: left;">
|
注：整点数值0~23
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item layui-col-md12">
|
<div class="layui-inline">
|
<div class="pop-btnbox">
|
<button type="button" class="layui-btn layui-btn-normal" onclick="saveConf();">
|
保存配置
|
</button>
|
</div>
|
</div>
|
</div>
|
|
</form>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div><!--pdgxq-m1 end-->
|
</div>
|
</div><!--jmkt-main end-->
|
</div><!--i-container end-->
|
|
<script type="text/javascript" src="./js/jquery.min.js"></script>
|
<script src="./plugins/layui/layui.js"></script>
|
<script src="./plugins/echarts/echarts.min.js"></script>
|
<script type="text/javascript">
|
var chart = initPieChart();
|
|
init();
|
function init() {
|
// var datat = {"size":"200.0M","used":"100.0M","available":"200.0M","use%":"50%"};
|
//获取存储使用情况
|
querySpace();
|
|
queryConf();
|
}
|
|
function querySpace() {
|
$.get("./cgi-bin/sys-set/systemSpace", function (data, status) {
|
if ("success" == status) {
|
$("#size").val(data.size);
|
$("#used").val(data.used);
|
$("#available").val(data.available);
|
$("#use").val(data["use%"]);
|
|
var used = data.used.substring(0,data.used.length-1);
|
var available = data.available.substring(0,data.available.length-1);
|
|
|
chart.option.series[0].data[0].value=available;
|
chart.option.series[0].data[1].value=used;
|
chart.chart.setOption(chart.option,false);
|
} else {
|
window.parent.notify("数据查询出错，请重新操作！！");
|
}
|
}, "json");
|
}
|
|
function queryConf() {
|
$.get("./cgi-bin/sys-set/queryDataConfig", function (data, status) {
|
if ("success" == status) {
|
$("#uploadTime").val(data.uploadTime);
|
$("#alarmStoreTime").val(data.alarmStoreTime);
|
$("#storeTime").val(data.storeTime);
|
$("#operationTime").val(data.operationTime);
|
} else {
|
window.parent.notify("数据查询出错，请重新操作！！");
|
}
|
}, "json");
|
}
|
|
function saveConf() {
|
var obj = {};
|
obj.uploadTime = $("#uploadTime").val();
|
obj.alarmStoreTime = $("#alarmStoreTime").val();
|
obj.storeTime = $("#storeTime").val();
|
obj.operationTime = $("#operationTime").val();
|
$.post("./cgi-bin/sys-set/saveDataConfig", JSON.stringify(obj), function (data, status) {
|
if ("success" == status) {
|
window.parent.notify("数据保存成功");
|
} else {
|
window.parent.notify("数据查询出错，请重新操作！！");
|
}
|
}, "json");
|
}
|
|
//初始化饼状图
|
function initPieChart() {
|
var option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b} : {c} '
|
},
|
legend: {
|
x: 'right',
|
y: 'center',
|
top: '20',
|
orient: 'vertical',
|
data: ['未使用空间', '已使用空间'],
|
textStyle: {color: '#4FCCFF'}
|
},
|
calculable: true,
|
series: [{
|
name: '存储空间使用情况',
|
type: 'pie',
|
radius: '50%',
|
left: ['0%', '50%'],
|
// roseType: 'area',
|
data: [
|
{
|
value: 100,
|
name: '未使用空间',
|
itemStyle: {color: '#6fe621', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10},
|
label: {formatter: '{c}'}
|
},
|
{
|
value: 103,
|
name: '已使用空间',
|
itemStyle: {color: '#1ddfff', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10},
|
label: {formatter: '{c}'}
|
}]
|
}
|
]
|
}
|
var myChart = echarts.init(document.getElementById('echarts01'), "light");
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option, true);
|
return {
|
"chart": myChart,
|
"option": option
|
}
|
};
|
</script>
|
</body>
|
|
</html>
|
