<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>智能运维管理系统-SNMP</title>
|
|
<link rel="stylesheet" type="text/css" href="plugins/layui/css/layui.css" />
|
<link rel="stylesheet" type="text/css" href="css/page/device-control.css" />
|
<style>
|
.layui-col-md4 {
|
width: 100%;
|
}
|
|
.layui-inline {
|
margin-left: unset;
|
}
|
|
.layui-layer-dialog .layui-layer-content {
|
border-bottom: solid 1px #eae5e5;
|
}
|
.btns button{
|
width: 120px;
|
}
|
@media only screen and (max-width:1080px) and (max-height: 1920px){
|
.i-container {
|
min-width: 750px;
|
height: 100%;
|
overflow-y: scroll;
|
}
|
/** 隐藏列表下拉滚动条 **/
|
.div-body::-webkit-scrollbar {
|
display: none;
|
}
|
/*IE 10+ ----隐藏滚动条*/
|
.div-body {
|
-ms-overflow-style: none;
|
}
|
/*Firefox ----隐藏滚动条*/
|
.div-body {
|
scrollbar-width: none;
|
}
|
.pdgxq-m1-left{
|
height: 1400px;
|
}
|
}
|
</style>
|
</head>
|
|
<body class="pdgxq-body">
|
<div class="i-container div-body">
|
<div class="jmkt-main">
|
<div class="layui-fluid">
|
<div class="pdgxq-m1 layui-row layui-col-space20">
|
<!--pdgxq-m1-left end-->
|
<div class="layui-col-lg12 layui-col-md12 img-main" id="img-main" style="padding: 20px;">
|
<div class="pdgxq-m1-left pdgxq-m1-box" style="width: 100%;">
|
<form class="layui-form" id="form-param" lay-filter="form-param" action="">
|
<div class="layui-row" style="padding: 20px 0;">
|
|
<div class="layui-col-md4">
|
<div class="layui-inline" style="margin-left: -16%">
|
<label class="layui-form-label">SNMP模组：</label>
|
<div class="layui-input-block">
|
<input type="checkbox" id="enable" name="enable" lay-skin="switch"
|
lay-filter="switch" lay-text="启用|停用">
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md4">
|
<div class="layui-inline">
|
<label class="layui-form-label">版本号：</label>
|
<div class="layui-input-block">
|
<input id="ver" type="text" name="ver" value="V2.0"
|
class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md4">
|
<div class="layui-inline">
|
<label class="layui-form-label">共用体名称：</label>
|
<div class="layui-input-block">
|
<input id="publicName" type="text" name="publicName" value="public"
|
class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md4">
|
<div class="layui-inline">
|
<label class="layui-form-label">端口号：</label>
|
<div class="layui-input-block">
|
<input id="port" type="text" name="port" value="161"
|
class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-col-md4" style="">
|
<div class="layui-inline">
|
<div class="layui-input-block btns" style="margin-left: 15px">
|
|
<button style="margin-right: 50px; font-size: 16px"
|
class="layui-btn layui-btn-warm"
|
onclick="javaScript:downLoadF(); return false;">导出OID表
|
</button>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</form>
|
</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="js/constant.js"></script>
|
|
<script src="plugins/external/jszip.min.js"></script>
|
<script src="plugins/external/FileSaver.js"></script>
|
<script src="plugins/external/excel-gen.js"></script>
|
|
<script type="text/javascript">
|
|
var layer;// 定义全局变量
|
var form;
|
var laydate;
|
$(function () {
|
layui.use(['layer', 'form', 'laydate'], function () {
|
layer = layui.layer;
|
form = layui.form;
|
laydate = layui.laydate;
|
|
form.on('switch(switch)', function(data){
|
//开关状态改变时触发
|
changeStatus(this.checked);
|
});
|
query();
|
});
|
});
|
|
function query() {
|
$.ajaxSettings.async = false;
|
$.get("./cgi-bin/snmp/query", function (data, status) {
|
if ("success" == status) {
|
form.val('form-param', {
|
"enable": data.enable//0-启用，1-禁用
|
});
|
form.render();
|
} else {
|
window.parent.parent.notify("系统获取监控设备信息失败！");
|
}
|
}, "json");
|
}
|
|
/**
|
* 修改状态
|
* @param enable true or false
|
*/
|
function changeStatus(enable) {
|
var obj = {"enable":enable};
|
$.post("./cgi-bin/snmp/enable", JSON.stringify(obj), function (data, status) {
|
if (data.code == "success") {
|
window.parent.parent.notify("数据保存成功");
|
} else {
|
window.parent.parent.notify("数据保存出错，请重新操作！"+data.msg+"！");
|
}
|
}, "json");
|
}
|
|
//导出
|
function downLoadF() {
|
$.ajaxSettings.async = false;
|
$.get("./cgi-bin/snmp/query_oid", function (data, status) {
|
renderHtml(data);
|
// if ("success" == data.code) {
|
// renderHtml(data);
|
// }else{
|
// window.parent.parent.notify("生成oid表出错");
|
// }
|
}, "json");
|
}
|
|
function renderHtml(data) {
|
console.log(data);
|
|
|
var thead = "";
|
thead += "<thead><tr>";
|
thead += "<th>设备名称</th>";
|
thead += "<th>OID</th>";
|
thead += "<th>设备ID</th>";
|
thead += "<th>通道号</th>";
|
thead += "<th>数据名称</th>";
|
thead += "<th>备注</th>";
|
thead += "</tr></thead>";
|
|
var tbody = "";
|
if (data != null && data.length > 0) {
|
$.each(data, function (index, item) {
|
tbody += "<tr><td>" + item.device + "</td>";
|
tbody += "<td>" + item.oid + "</td>";
|
tbody += "<td>" + item.index1 + "</td>";
|
tbody += "<td>" + item.index2 + "</td>";
|
tbody += "<td>" + item.param + "</td>";
|
tbody += "<td>" + (item.unit ?? "") + "</td></tr>";
|
});
|
}else {
|
tbody += '<tr><td colspan="8">暂未创建设备</td></tr>';
|
}
|
var html = thead + tbody;
|
|
tableToExcel(html);
|
}
|
|
|
function tableToExcel(html) {
|
var name = "告警记录";
|
var uri = 'data:application/vnd.ms-excel;base64,';
|
var template = '<html><head><meta charset="UTF-8"></head><body><table border="1">{table}</table></body></html>';
|
|
if(!html){
|
layer.msg("没有获取到要导出的内容！");
|
}
|
|
var ctx = {worksheet: name || 'Worksheet', table: html};
|
window.location.href = uri + base64(format(template, ctx))
|
}
|
function format(s, c) {
|
return s.replace(/{(\w+)}/g,function(m, p) { return c[p]; });
|
}
|
|
function base64(s) {
|
return window.btoa(unescape(encodeURIComponent(s)))
|
};
|
</script>
|
</body>
|
</html>
|
