[#import "/pages/common/base.html" as base]
[@base.page]
<div id="div_content">
<div class="widget-box widget-color-orange">
<div class="widget-header widget-header-small">
<h5 class="widget-title lighter">条件查询</h5>
<div class="widget-toolbar">
<a href="#" data-action="collapse">
<i class="1 ace-icon fa bigger-125 fa-chevron-up"></i>
</a>
</div>
</div>
<div class="widget-body">
<form id="form">
<div class="widget-main">
<fieldset>
<div class="form-fieldset">
<label class="text-label" for="machineType">机器类型:</label>
<select id="machineType" name="machineType" class="select"
style="width: 150px">
<option value=""></option>
<option value="ECM" selected >ECM(边缘机器)</option>
<option value="CVM">CVM(云服务器)</option>
</select>
</div>
<div>
<div>
<div class="form-fieldset">
<label class="text-label" for="modules">模块:</label>
<input id="modules" type="text" name="modules" style="width: 250px" placeholder="例: info 或 dispatch,info" autocomplete="off">
</div>
</div>
</div>
<div>
<div>
<div class="form-fieldset">
<label class="text-label" for="ips">ip:</label>
<input id="ips" type="text" name="ips" style="width: 250px" placeholder="多个ip以,分隔" autocomplete="off">
</div>
</div>
</div>
</fieldset>
</div>
<div class="form-actions no-margin">
<button id="btn_search" class="btn btn-sm btn-info" type="button">
<i class="ace-icon glyphicon glyphicon-search"></i> 查询
</button>
<!-- <button id="btn_reset" class="btn btn-sm" type="button">
<i class="ace-icon glyphicon glyphicon-refresh"></i> 重置
</button>-->
<!-- <button id="jqg_add" type="button" class="btn btn-success btn-sm" data-url="rcmnq/rc-config/save">
<i class="ace-icon glyphicon glyphicon-plus"></i> 新建
</button>-->
<!--<button id="btn_autoRefresh" class="btn btn-sm" type="button">
<input type="checkbox" id="autoRefreshCheckbox" name="autoRefreshCheckbox" disabled="true"> 自动刷新
</button>-->
<label class="btn checkbox-button">
<input type="checkbox" id="autoRefreshCheckbox" name="autoRefreshCheckbox" onclick="clickAutoRefreshCheckbox()"> 自动刷新
</label>
<button id="btn_refreshAllDns" type="button" class="btn btn-success btn-sm" data-url="rcmnq/rc-config/save">
<i class="ace-icon glyphicon glyphicon-upload"></i> 更新全部接口机DNS
</button>
<label class="showtime">
<div id="time"></div>
</label>
</div>
</form>
</div>
</div>
<div class="top-scrollbar" id="top-scrollbar"></div>
<div class="widget-grid" id="grid-container">
<table id="grid_table"></table>
<div id="grid_pager"></div>
</div>
<!-- 模态框的HTML结构 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>更新 全量接口机ip的解析dns记录,
请输入口令验证:</p>
<input type="password" id="passwordInput" placeholder="输入口令">
<button onclick="checkPassword()">确认</button>
</div>
</div>
<div class="alert alert-warning">
<strong>备注:</strong>
<ul>
<li>自动刷新: 每3秒刷新一次,5分钟后自动停止刷新</li>
<li>查询栏右侧自动刷新的时间为本地电脑上的时间</li>
<li>某一行标红:判定最后上报时间为60秒之前则标红</li>
</ul>
</div>
</div>
<script id="template_op" type="text/html">
<button class="btn btn-sm btn-white btn-info" style="margin: 3px;" type="button" onclick="showDetail('{{rowid}}')">查看详情</button>
</script>
<script id="template_op2" type="text/html">
<button class="btn btn-sm btn-white btn-info" style="margin: 3px;" type="button" onclick="refreshDns('{{rowid}}')">更新dns</button>
</script>
<script id="template_op3" type="text/html">
<button class="btn btn-sm btn-white btn-info" style="margin: 3px;" type="button" onclick="removeDns('{{rowid}}')">移除dns</button>
</script>
<style>
/* 自定义样式,创建顶部滚动条容器 */
.top-scrollbar {
overflow-x: auto;
overflow-y: auto;
width: 100%;
height: 20px;
}
/* 确保表格容器宽度与顶部滚动条一致 */
#grid-container {
width: 100%;
overflow-x: auto;
overflow-y: auto;
}
</style>
<script>
jQuery(function ($) {
grid.grid2({
url: "sdksys/dataInterfaceService/page",
form: "form",
pager: '#grid_pager',
colModel: [
{label: '', name: 'index', key: true, align: 'center',hidden: true},
{label: 'index', name: 'index', align: 'center',width:'60px', editable: true, sorttype:'int', editrules: {required: true}},
{label: '模块', name: 'modules', align: 'center',width:'100px',editable: true, editrules: {required: true}},
{label: 'ip', name: 'ip', align: 'center',editable: true, editrules: {required: true}},
{label: '内网ip', name: 'inner ip', align: 'center',editable: true, editrules: {required: true}},
{label: '机房区域', name: 'zoneid', align: 'center',width:'190px',editable: true, editrules: {required: true}},
{label: '运营商', name: 'isp', align: 'center',width:'110px', editable: true, editrules: {required: true}},
{label: 'cpu使用率', name: 'cpu', align: 'center',editable: true, sorttype:'float', editrules: {required: true}},
{label: '出/入的最大码率(mbps)', name: 'max mbps', align: 'center',editable: true, sorttype:'float', editrules: {required: true}},
{label: '出入包量和(w/s)', name: 'packets w/s', align: 'center',editable: true, sorttype:'float', editrules: {required: true}},
{label: '接收包bytes', name: 'in', align: 'center',width:'120px',editable: true, sorttype:'int', editrules: {required: true}},
{label: '发送包bytes', name: 'out', align: 'center',width:'120px',editable: true, sorttype:'int', editrules: {required: true}},
{label: '最后上报时间', name: 'last report', align: 'center',editable: true, editrules: {required: true}
// 一行的某列 标红
/*,formatter: function (cellValue, options, rowObject) {
if (rowObject.expired > 0 ) {
return "<div style='color:red;'>" + cellValue + "</div>";
}
return cellValue;
}*/
},
{label: '最后上报时间', name: 'last report', align: 'center',hidden: true},
{label: '最后记录时间', name: 'last record', align: 'center',editable: true, editrules: {required: true}},
{label: '国家', name: 'country', align: 'center',editable: true, editrules: {required: true}},
{label: '省份', name: 'province', align: 'center',editable: true, editrules: {required: true}},
{label: '城市', name: 'city', align: 'center',editable: true, editrules: {required: true}},
{label: '同机房同运营商机器数量', name: 'nodecount', align: 'center',editable: true, sorttype:'int', editrules: {required: true}},
{label: '同机房同运营商机器序号', name: 'nodesortnum', align: 'center',editable: true, sorttype:'int', editrules: {required: true}},
{label: '设置最大带宽(kbps)', name: '_band', align: 'center',editable: true, sorttype:'int', editrules: {required: true}},
{label: '最大支持包量(个/s)', name: '_packets', align: 'center',editable: true, sorttype:'int', editrules: {required: true}},
{label: '是否禁用', name: 'forbid', align: 'center',editable: true, editrules: {required: true}},
{label: 'expired', name: 'expired', align: 'center',hidden: true}
/* {label: '是否在线', name: 'status', align: 'center',
formatter: function(cellValue, options, rowObject) {
if(cellValue==1){return "<font style='color:blue'>在线</font>";}
else if(cellValue==0){return "<font style='color:red'>不在线</font>";}
}
},
{label: '是否在线', name: 'status', align: 'center',hidden: true}*/
,{
label: '操作', name: '', editable: false, sortable: false, fixed: true, align: "center",
formatter: function opformatter(cellvalue, options, rowObject) {
var data = {
rowid: options.rowId,
msgRange: rowObject.msgRange,
rowObject: rowObject.rowObject
};
return $.trim(template("template_op2", data));
}
}
,{
label: '删除', name: '', editable: false, sortable: false, fixed: true, align: "center",
formatter: function opformatter(cellvalue, options, rowObject) {
var data = {
rowid: options.rowId,
msgRange: rowObject.msgRange,
rowObject: rowObject.rowObject
};
return $.trim(template("template_op3", data));
}
}
],
loadonce : true, //一次加载全部数据到客户端,由客户端进行排序。
sortable: true,
sortname : 'id',
sortorder: "asc",
rowNum: 50,
rowList: [10, 20, 50, 100]
// 水平滚动条
,
shrinkToFit:false,
autoScroll: true,
loadComplete: function(data){
//$("#grid_table" ).closest(".ui-jqgrid-bdiv").css({"overflow-x":"scroll"});
// 一行标红
var rows = $("#grid_table").jqGrid('getRowData');
for (var i = 0; i < rows.length; i++) {
if (rows[i].expired == 1) {
//$("#grid_table").jqGrid('setRowData', rows[i].index, false, { backgroundcolor: 'red' });
$("#"+rows[i].index+ " td").css("background-color","#FFB6C1");
}else if(rows[i].expired > 1){
$("#"+rows[i].index+ " td").css("background-color","#BF8991");
}
}
}
,subGrid: true,
subGridOptions: {
plusicon : "ace-icon fa fa-plus center bigger-110 blue", //展开图标
minusicon : "ace-icon fa fa-minus center bigger-110 blue", //收缩图标
openicon : "ace-icon fa fa-chevron-right center orange" //打开时左侧图标
},
subGridRowExpanded: function(subgrid_id, row_id) {
var rowData = $("#grid_table").jqGrid('getRowData', row_id);
var modules_s =rowData.modules;
var ip_s =rowData.ip;
var isp_s =rowData.isp;
var country_s =rowData.country;
var province_s =rowData.province;
var city_s =rowData.city;
var subgrid_table_id = subgrid_id + "_t"; // 根据subgrid_id定义对应的子表格的table的id
var subgrid_div_id = subgrid_id + "_d"; // 根据subgrid_id定义对应的子表格的div分页的id
// 动态添加子报表的table
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>"+"<div id='" + subgrid_div_id + "'></div>");
$("#" + subgrid_table_id).grid2({
url: "sdksys/dataInterfaceService/oneDnsPage?ip="+ip_s,
form: "form",
//pager: "",
pager: subgrid_div_id,
//disableView: true,
serializeGridData: function(postData) {
postData = $.extend($("#form").serializeObject(),
{current: 1, size: postData.size, searchCount: false, sidx: postData.sidx, sord: postData.sord});
return postData;
},
colModel: [
{label: 'recordId', name: 'RecordId', key: true, hidden: true},
/*{label: '日期', name: 'rdate', formatter: 'date', formatoptions: {newformat:'Y-m-d'}, align: "center"},*/
{label: '子域名', name: 'RR', align: "center"},
{label: '解析线路', name: 'Type', align: "center"},
{label: '记录值', name: 'Value', align: "center"},
{label: '线路code', name: 'Line', align: "center"},
{label: '线路名', name: 'description', align: "center"},
{label: '备注', name: 'Remark', align: "center"},
{label: '状态', name: 'Status', align: "center"},
{label: '创建时间', name: 'CreateTimestamp', firstsortorder: 'desc', align: "center",
formatter: function(CreateTimestamp, options, rowObject) {
return new Date(CreateTimestamp).format('yyyy-MM-dd hh:mm:ss');
}
},
{label: '更新时间', name: 'UpdateTimestamp', firstsortorder: 'desc', align: "center",
formatter: function(UpdateTimestamp, options, rowObject) {
return new Date(UpdateTimestamp).format('yyyy-MM-dd hh:mm:ss');
}
},
{label: '记录值', name: 'RecordId', align: "center"},
],
//rowNum: -1,
loadonce : true, //一次加载全部数据到客户端,由客户端进行排序。
sortable: true,
sortname: 'id',
sortorder: "desc",
rowNum: 20,
rowList: [10, 20, 50, 100]
});
}
});
// 同步顶部滚动条和表格的滚动
$('#top-scrollbar').scroll(function () {
$('#grid-container').scrollLeft($(this).scrollLeft());
});
$('#grid-container').scroll(function () {
$('#top-scrollbar').scrollLeft($(this).scrollLeft());
});
// 复制表格的宽度到顶部滚动条
$('#top-scrollbar').width($('#grid_table').width());
function updateTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const formattedTime = "Local Time: "+ year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
document.getElementById('time').textContent = formattedTime;
}
// 初始化时间
updateTime();
// 每秒更新一次时间
setInterval(updateTime, 1000);
});
$("#btn_search").click(function() {
$("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid");
$("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid");
});
$("#btn_reset").click(function() {
$("#form")[0].reset();
resetDate();
});
$("#btn_refreshAllDns").click(function() {
refreshAllDns();
});
let timer;
const maxDuration = 5 * 60 * 1000; // 5分钟
const interval = 3 * 1000; // 3秒
let startTime;
function clickAutoRefreshCheckbox() {
var checkbox = document.getElementById('autoRefreshCheckbox');
//checkbox.checked = !checkbox.checked; // 切换 checked 状态
var isChecked = checkbox.checked;
console.log(isChecked);
if(isChecked) {
if (!startTime) {
startTime = Date.now();
}
clearInterval(timer);
timer = setInterval(function () {
if (Date.now() - startTime >= maxDuration) {
clearInterval(timer);
startTime = null;
if(checkbox.checked){ checkbox.checked = !checkbox.checked; }
//alert('定时刷新结束');
} else {
console.log("请求数据.");
$("#btn_search").click();
}
}, interval);
}else {
clearInterval(timer);
startTime = null;
if(checkbox.checked){ checkbox.checked = !checkbox.checked; }
//alert('定时刷新结束');
}
}
// 显示明细信息
function showDetail(rowid) {
var data = {};
if (rowid) {
$.extend(data, $("#grid_table").jqGrid('getRowData', rowid));
}
$("#div_content").showDetail3(data);
}
function refreshDns(rowid){
var data = {};
if (rowid) {
$.extend(data, $("#grid_table").jqGrid('getRowData', rowid));
}
data.isall = "0";
var text = " 是否确定要更新 zoneid:【"+data.zoneid+"】 ip:"+data.ip+" 的解析dns记录(可能耗时会久)?" ;
let res = confirm( text );
if(res == true) {
console.log('点击了确认');
comm.ajaxMessage({
type: "POST",
url: "sdksys/dataInterfaceService/refreshDns",
data: data,
autoClose: true,
completeCallback: function (data){
// $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid");
// $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid");
//console.log(data);
//alert("更新完成:\n" +data);
}
,success: function (data) {
if(data.code == 200) {
//alert("更新完成:\n" + data);
}else{
//alert("更新失败:\n" + data.msg );
}
}
});
}else{
console.log('点击了取消');
}
}
function removeDns(rowid){
var data = {};
if (rowid) {
$.extend(data, $("#grid_table").jqGrid('getRowData', rowid));
}
var text = " 是否确定要删除 zoneid:【"+data.zoneid+"】 ip:"+data.ip+" 的解析dns记录?\n慎重操作,仅在需要下线接口机时操作" ;
let res = confirm( text );
if(res == true) {
console.log('点击了确认删除');
comm.ajaxMessage({
type: "POST",
url: "sdksys/dataInterfaceService/removeDns",
data: data,
autoClose: true,
completeCallback: function (data){
// $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid");
// $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid");
//console.log(data);
//alert("更新完成:\n" +data);
}
,success: function (data) {
if(data.code == 200) {
//alert("更新完成:\n" + data);
}else{
//alert("更新失败:\n" + data.msg );
}
}
});
}else{
console.log('点击了取消删除');
}
}
function refreshAllDns(){
var data = {};
data.isall = "1";
var text = " 是否确定要更新 全量接口机ip的解析dns记录(可能耗时会久)?" ;
let res = confirm( text );
if(res == true) {
console.log('点击了确认');
comm.ajaxMessage({
type: "POST",
url: "sdksys/dataInterfaceService/refreshDns",
data: data,
autoClose: true,
completeCallback: function (data){
// $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid");
// $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid");
//console.log(data);
//alert("更新完成:\n" +data);
}
,success: function (data) {
if(data.code == 200) {
//alert("更新完成:\n" + data);
}else{
//alert("更新失败:\n" + data.msg );
}
}
});
}else{
console.log('点击了取消');
}
}
function _refreshAllDns(){
var data = {};
data.isall = "1";
var text = "准备更新 全量接口机ip的解析dns记录(可能耗时会久),\n请输入口令验证:" ;
var userInput = prompt( text );
if (userInput !== null) {
console.log('输入了');
data.pass =userInput;
/*comm.ajaxMessage({
type: "POST",
url: "sdksys/dataInterfaceService/refreshDns",
data: data,
autoClose: true,
completeCallback: function (data){
// $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid");
// $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid");
//console.log(data);
//alert("更新完成:\n" +data);
}
,success: function (data) {
if(data.code == 200) {
//alert("更新完成:\n" + data);
}else{
//alert("更新失败:\n" + data.msg );
}
}
});*/
}else{
console.log('没输入');
}
}
</script>
<style>
/* 自定义按钮样式 */
.checkbox-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 6px 9px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.checkbox-button input {
margin-right: 5px;
position: relative;
top: 2px;
}
.showtime {
/*position: fixed;*/ /*会导致固定在屏幕上,不随页面的滚动而移动。这意味着无论用户如何滚动页面,.showtime 元素都会保持在屏幕的同一位置*/
position: absolute;
right: 35px;
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
#time {
font-size: 20px;
margin: 10px;
}
</style>
[#include "/pages/common/date-picker.html"/]
[#include "/pages/common/chosen.html"/]
[/@base.page]
最新发布