| | |
|---|
| | | <!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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body class="pdgxq-body"> |
|---|
| | | <div class="i-container"> |
|---|
| | | <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 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("数据保存成功"); |
|---|
| | | window.parent.parent.notify("SNMP模组状态保存成功"); |
|---|
| | | } else { |
|---|
| | | window.parent.parent.notify("数据保存出错，请重新操作！"+data.msg+"！"); |
|---|
| | | } |
|---|
| | | }, "json"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //导出 |
|---|
| | | function downLoadF() { |
|---|
| | | $.ajaxSettings.async = false; |
|---|
| | | $.get("./cgi-bin/snmp/download", function (data, status) { |
|---|
| | | if ("success" == data.code) { |
|---|
| | | downLoadF2(); |
|---|
| | | }else{ |
|---|
| | | window.parent.parent.notify("生成oid表出错"); |
|---|
| | | } |
|---|
| | | }, "json"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function downLoadF2() { |
|---|
| | | var fileName = "oid_list.csv"; |
|---|
| | | var url = "./cgi-bin/download/download.cgi?filename=/temp/oid_list.csv"; |
|---|
| | | |
|---|
| | | // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性 |
|---|
| | | if ('download' in document.createElement('a')) { // 支持a标签download的浏览器 |
|---|
| | | var link = document.createElement('a'); // 创建a标签 |
|---|
| | | link.download = fileName;// a标签添加属性 |
|---|
| | | link.style.display = 'none'; |
|---|
| | | // link.href = URL.createObjectURL(blob); |
|---|
| | | link.href = url; |
|---|
| | | document.body.appendChild(link); |
|---|
| | | link.click(); // 执行下载 |
|---|
| | | URL.revokeObjectURL(link.href); // 释放url |
|---|
| | | document.body.removeChild(link); // 释放标签 |
|---|
| | | } else { // 其他浏览器 |
|---|
| | | navigator.msSaveBlob(url, fileName); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | | <!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 += "<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.type + "</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>
|
|---|
