<!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/device-expand.css" />
|
<style>
|
body {
|
scrollbar-width: inherit;
|
}
|
.layui-input {
|
width: 280px;
|
background: #3f474e;
|
border-style: solid;
|
border-width: 0;
|
color: #ffffff;
|
}
|
.pdgxq-table-box {
|
height: 590px;
|
}
|
.table-tbody {
|
height: 530px;
|
overflow-y: scroll;
|
}
|
.popCon {
|
height: 120px;
|
padding: 0 50px;
|
margin-top: 5px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<!-- <h2>临时页面</h2>-->
|
<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-lg5 layui-col-md5">
|
<div class="pdgxq-m1-left pdgxq-m1-box" style="height: 53px;padding: 5px 0 5px 0;">
|
<div style="margin: 0 20px;">
|
<div class="layui-col-md3" style="">
|
<input type="text" id="pingIp" name="pingIp" class="layui-input" placeholder="请输入">
|
</div>
|
<div class="layui-col-md1">
|
<button class="layui-btn layui-btn-warm"
|
onclick="pingTest();">Ping测试
|
</button>
|
</div>
|
<div class="layui-col-md2">
|
<button class="layui-btn layui-btn-normal"
|
onclick="query();">查询刷新
|
</button>
|
<button class="layui-btn layui-btn-normal"
|
onclick="popF(-1);">新增路由
|
</button>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-lg7 layui-col-md7">
|
<div class="pdgxq-m1-right pdgxq-m1-box">
|
<div class="pdgxq-table jmkt-table-wrap">
|
<i class="i"></i>
|
<div class="pdgxq-table-box" style="">
|
<div class="table-thead">
|
<table class="layui-table pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="12%">
|
<col width="12%">
|
<col width="12%">
|
<col width="5%">
|
<col width="5%">
|
<col width="5%">
|
<col width="5%">
|
<col width="15%">
|
<col>
|
</colgroup>
|
<thead>
|
<tr>
|
<th>目标IP</th>
|
<th>网关</th>
|
<th>子网掩码</th>
|
<th>标志</th>
|
<th>跃点</th>
|
<th>引用</th>
|
<th>使用</th>
|
<th>接口</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
<div class="table-tbody">
|
<table class="layui-table pdgxq-table1" lay-skin="nob">
|
<colgroup>
|
<col width="12%">
|
<col width="12%">
|
<col width="12%">
|
<col width="5%">
|
<col width="5%">
|
<col width="5%">
|
<col width="5%">
|
<col width="15%">
|
<col>
|
</colgroup>
|
<tbody id="tbodyList">
|
<tr>
|
<td>192.168.1.100</td>
|
<td>192.168.1.1</td>
|
<td>255.255.255.0</td>
|
<td>UG</td>
|
<td>10000</td>
|
<td>1000</td>
|
<td>1000</td>
|
<td>abcdefghigklmn</td>
|
<td>
|
<!-- <button style="height: 29px;line-height: 29px;"-->
|
<!-- class="layui-btn layui-btn-normal" lay-event="edit"-->
|
<!-- onclick="popF(1);">编辑-->
|
<!-- </button>-->
|
<button style="height: 29px;line-height: 29px;"
|
class="layui-btn layui-btn-danger" lay-event="detail" onclick="del(1);">删除
|
</button>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<div style="height: 15px;border-top: 1px solid #444d58;"></div>
|
</div><!--pdgxq-table end-->
|
</div>
|
</div><!--pdgxq-m1-left end-->
|
</div><!--pdgxq-m1 end-->
|
</div>
|
</div><!--jmkt-main end-->
|
</div> <!--i-container end-->
|
|
<!--弹出框-->
|
<div id="editDeviceDom" class="pophide" style="width:100%; display: none;overflow: hidden;">
|
<div class="i-popBox-tit layui-clear bor-b-1">
|
<div class="pdgxq-H">
|
<h3><i></i>属性</h3>
|
</div>
|
<i class="i-popclose layui-icon-close layui-icon layui-anim layui-anim-rotate" onclick="closepopBtn();"></i>
|
</div>
|
|
<div class="popCon">
|
<form class="layui-form" id="pop-form" lay-filter="pop-form">
|
|
<div class="pop-group layui-clear">
|
<div class="pop-item fl">
|
<div class="layui-form-item">
|
<label class="layui-form-label">目标IP:</label>
|
<div class="layui-input-block">
|
<input type="text" id="Destination" name="Destination" required lay-verify="required"
|
placeholder="请输入" class="layui-input pop-input">
|
</div>
|
</div>
|
</div>
|
|
<div class="pop-item fr">
|
<div class="layui-form-item">
|
<label class="layui-form-label">网关</label>
|
<div class="layui-input-block">
|
<input type="text" id="Gateway" name="Gateway" class="layui-input pop-input"
|
placeholder="请输入">
|
</div>
|
</div>
|
</div>
|
|
</div><!--pop-group end-->
|
|
<div class="pop-group layui-clear">
|
<div class="pop-item fl">
|
<div class="layui-form-item">
|
<label class="layui-form-label">掩码</label>
|
<div class="layui-input-block">
|
<input type="text" id="Genmask" name="Genmask" class="layui-input pop-input"
|
placeholder="请输入">
|
</div>
|
</div>
|
</div>
|
|
<div class="pop-item fr">
|
<div class="layui-form-item">
|
<label class="layui-form-label">接口</label>
|
<div class="layui-input-block">
|
<select lay-ignore="" class="layui-input layui-select" id="Interface" name="Interface">
|
<option value="#" selected>请选择</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
</div><!--pop-group end-->
|
|
<div class="pop-btnbox">
|
<button type="button" id="add" class="layui-btn layui-btn-normal pop-btn"
|
onclick="save(this.id);">保存</button>
|
<button type="button" id="edit" class="layui-btn layui-btn-normal pop-btn"
|
onclick="save(this.id);" style="display: none;">保存</button>
|
<button type="button" class="layui-btn popClose-btn" onclick="closepopBtn();">关闭</button>
|
</div>
|
</form>
|
|
</div><!--popCon end-->
|
</div>
|
|
<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 routeList = [];
|
|
init_();
|
function init_() {
|
layui.use(['layer'], function () {
|
layer = layui.layer;
|
|
query();
|
});
|
}
|
function pingTest() {
|
var obj = {};
|
obj.ip = $("#pingIp").val();
|
$.post("./cgi-bin/route/ping", JSON.stringify(obj), function (data, status) {
|
// console.log(data);
|
if ("true" == data.data) {
|
layer.msg("Ping操作成功");
|
} else {
|
layer.alert("Ping操作失败");
|
}
|
}, "json");
|
}
|
|
|
function query() {
|
$.get("./cgi-bin/route/route", function (data, status) {
|
if ("success" == status) {
|
routeList = data;
|
renderTable();
|
renderSelect();
|
} else {
|
layer.msg("数据查询出错，请重新操作！！");
|
// window.parent.notify("数据查询出错，请重新操作！！");
|
}
|
}, "json");
|
}
|
function renderSelect() {
|
$("#Interface").html('');
|
if(routeList){
|
$.each(routeList,function (index,it) {
|
var html = '<option value="'+it.Interface+'">'+it.Interface+'</option>';
|
$("#Interface").append(html);
|
});
|
}
|
}
|
function renderTable() {
|
$("#tbodyList").html('');
|
if(routeList){
|
$.each(routeList,function (index,it) {
|
var html = '';
|
html += '';
|
html += '<tr>';
|
html += '<td>'+it.Destination+'</td>';
|
html += '<td>'+it.Gateway+'</td>';
|
html += '<td>'+it.Genmask+'</td>';
|
html += '<td>'+it.Flags+'</td>';
|
html += '<td>'+it.Metric+'</td>';
|
html += '<td>'+it.Ref+'</td>';
|
html += '<td>'+it.Use+'</td>';
|
html += '<td>'+it.Interface+'</td>';
|
html += '<td>';
|
// html += '<button style="height: 29px;line-height: 29px;" class="layui-btn layui-btn-normal" lay-event="edit" onclick="popF('+index+');">编辑';
|
// html += '</button>';
|
html += '<button style="height: 29px;line-height: 29px;"class="layui-btn layui-btn-danger" lay-event="detail" onclick="del('+index+');">删除';
|
html += '</button>';
|
html += '</td>';
|
html += '</tr>';
|
$("#tbodyList").append(html);
|
});
|
}
|
}
|
|
function popF(i) {
|
var cur = {};
|
$(".pop-btn").hide();
|
if(i == -1){
|
$("#pop-form")[0].reset();
|
$(".pop-name").html("新增路由信息");
|
$("#add").show();
|
}else{
|
if(routeList){
|
cur = routeList[i];
|
}else{
|
return;
|
}
|
$(".pop-name").html("编辑路由信息");
|
$("#edit").show();
|
$("#Destination").val(cur.Destination);
|
$("#Gateway").val(cur.Gateway);
|
$("#Genmask").val(cur.Genmask);
|
$("#Interface").val(cur.Interface);
|
}
|
|
var widthPop = "55%";
|
var heightPop = "45%";
|
if(screen.width==1920 && screen.height==1080){
|
widthPop = "55%";
|
heightPop = "45%";
|
}else if(screen.width==1280 && screen.height==1024){
|
widthPop = "75%";
|
heightPop = "60%";
|
}else{
|
widthPop = "55%";
|
heightPop = "45%";
|
}
|
|
layer.open({
|
skin: 'mypop',
|
type: 1,
|
// title: '警报信息',
|
title: false,
|
area: [widthPop, heightPop],
|
closeBtn: 0,
|
shade: 0,
|
scrollbar: false,
|
content: $('#editDeviceDom')
|
});
|
}
|
|
function save() {
|
var obj = {};
|
obj.Destination = $("#Destination").val();
|
obj.Gateway = $("#Gateway").val();
|
obj.Genmask = $("#Genmask").val();
|
obj.Interface = $("#Interface").val();
|
|
var url = "./cgi-bin/route/add";
|
// if ("edit" == btn) {
|
// url = "./cgi-bin/device-io/edit";
|
// }
|
$.post(url, JSON.stringify(obj), function (data, status) {
|
if ("success" == data.code) {
|
layer.closeAll();
|
layer.msg("数据保存成功！");
|
query();
|
} else {
|
layer.msg("数据保存出错，请重新操作！"+data.msg+"！");
|
// window.parent.notify("数据保存出错，请重新操作！"+data.msg+"！");
|
}
|
}, "json");
|
}
|
|
function del(i) {
|
var cur = {};
|
if(routeList){
|
cur = routeList[i];
|
}else{
|
return;
|
}
|
|
var obj = {};
|
obj.Destination = cur.Destination;
|
obj.Gateway = cur.Gateway;
|
obj.Genmask = cur.Genmask;
|
obj.Interface = cur.Interface;
|
|
var url = "./cgi-bin/route/delete";
|
$.post(url, JSON.stringify(obj), function (data, status) {
|
if ("success" == data.code) {
|
layer.closeAll();
|
layer.msg("数据删除成功！");
|
// window.parent.notify("数据删除成功！");
|
query();
|
} else {
|
layer.msg("数据删除出错，请重新操作！"+data.msg+"！");
|
// window.parent.notify("数据删除出错，请重新操作！"+data.msg+"！");
|
}
|
}, "json");
|
}
|
|
|
function closepopBtn() {
|
//清空表单信息
|
$("#pop-form")[0].reset();
|
layer.closeAll();
|
|
}
|
</script>
|
|
</body>
|
|
</html>
|
