436 lines
14 KiB
JavaScript
436 lines
14 KiB
JavaScript
|
|
|
|
$("#Chart_ChangeTime").hide();
|
|
|
|
let Chart_ChangeTime = Cookies.get('Chart_ChangeTime') || 1;
|
|
$("#Chart_ChangeTime").val(Chart_ChangeTime);
|
|
|
|
|
|
// 点击收起之后 选择的时间 是否改变 选择的时间改变 =》 图也要改变
|
|
// 相对指定图是否改变
|
|
let showchangelist = [false, false, false, false, false, false, false];
|
|
|
|
// 通讯包数统计
|
|
let chart = null;
|
|
// 通讯字节流量统计收起
|
|
|
|
let chart1 = null;
|
|
// 端口数据使用情况
|
|
|
|
let chart2 = null;
|
|
|
|
// 处理耗时
|
|
|
|
let chart3 = null;
|
|
// 接收延迟
|
|
let chart4 = null;
|
|
// TX命令饼图
|
|
let chart5 = null;
|
|
// rX命令饼图
|
|
let chart6 = null;
|
|
// tX重发饼图
|
|
let chart7 = null;
|
|
// rX重发饼图
|
|
|
|
let chart8 = null;
|
|
|
|
|
|
|
|
// 时间 起始 结束
|
|
let startDate, endDate;
|
|
//TX RX复选框默认值
|
|
let defauust = { RX: [1, 2, 3, 4], TX: [1, 2, 3, 4] };
|
|
//TX RX复选框当前选择值
|
|
let checkeddata = { RX: [1, 2, 3, 4], TX: [1, 2, 3, 4] };
|
|
//TX RX复选框事件
|
|
function checkbox_change(type_name, val) {
|
|
var event = window.e || window.event;
|
|
let checked = $(event.target).prop("checked");
|
|
if (val == 0) {
|
|
//全选/取消全选
|
|
$("." + type_name).prop("checked", checked);
|
|
checkeddata[type_name] = checked ? defauust[type_name] : [];
|
|
}
|
|
else {
|
|
if (checked == true) {
|
|
checkeddata[type_name].push(Number.parseInt(val));
|
|
if ($("." + type_name + ":checked").length == $("." + type_name).length - 1 && !$("." + type_name).eq(0).prop("checked")) {
|
|
$("." + type_name).eq(0).prop("checked", true);
|
|
}
|
|
return;
|
|
}
|
|
$("." + type_name).eq(0).prop("checked", false);
|
|
// 过滤
|
|
checkeddata[type_name] = checkeddata[type_name].filter((x) => {
|
|
return x != Number.parseInt(val);
|
|
});
|
|
}
|
|
}
|
|
|
|
//渲染全部 或者渲染指定绘图 前提是元素没有隐藏
|
|
function search_result(index = -1) {
|
|
console.log("index"+index);
|
|
let data = { RX: checkeddata.RX, TX: checkeddata.TX, startDate, endDate };
|
|
|
|
let newdata = JSON.parse(JSON.stringify(data));
|
|
if (endDate == null) {
|
|
let new_Chart_ChangeTime = Number.parseInt($("#Chart_ChangeTime").val());
|
|
if (new_Chart_ChangeTime != Chart_ChangeTime) {
|
|
Chart_ChangeTime = new_Chart_ChangeTime;
|
|
|
|
Cookies.set('Chart_ChangeTime', Chart_ChangeTime, { expires: 7, path: window.location.pathname });
|
|
}
|
|
newdata.startDate = moment().subtract(Chart_ChangeTime, 'minute').format('YYYY-MM-DD HH:mm:ss');
|
|
newdata.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
|
|
}
|
|
Cookies.set('UDPINFO_GetCHARTS', data, { expires: 7, path: window.location.pathname });
|
|
|
|
if (!$('#lineChart').is(':hidden') && (index == -1 || index == 0)) {
|
|
MyPost("/API/GetCHARTS", { data, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart, RES, 'lineChart');
|
|
});
|
|
}
|
|
if (!$('#barChart').is(':hidden') && (index == -1 || index == 1)) {
|
|
MyPost("/API/GetErrorSucess", { data, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart1,RES,'barChart');
|
|
}
|
|
);
|
|
}
|
|
if (!$('#Chart2').is(':hidden') && (index == -1 || index == 2)) {
|
|
|
|
|
|
MyPost("/API/GetProt", { data: newdata, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart2, RES,"Chart2");
|
|
}
|
|
);
|
|
}
|
|
if (!$('#Chart3').is(':hidden') && (index == -1 || index == 3)) {
|
|
MyPost("/API/GetPROCESSINGTIME", { data, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart3, RES, 'Chart3');
|
|
}
|
|
);
|
|
}
|
|
|
|
if (!$('#Chart4').is(':hidden') && (index == -1 || index == 4)) {
|
|
MyPost("/API/GetRevDelayDateTime", { data, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart4, RES, 'Chart4');
|
|
}
|
|
);
|
|
}
|
|
|
|
if (!$('#Chart5').is(':hidden') && (index == -1 || index == 5)) {
|
|
newdata.type = "TX";
|
|
MyPost("/API/GetCMDpie", { data:newdata, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart5, RES, 'Chart5');
|
|
}
|
|
);
|
|
newdata.type = "RX";
|
|
MyPost("/API/GetCMDpie", { data: newdata, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart6, RES, 'Chart6');
|
|
}
|
|
);
|
|
}
|
|
if (!$('#Chart7').is(':hidden') && (index == -1 || index == 5)) {
|
|
newdata.type = "TX";
|
|
MyPost("/API/GetRETRY_COUNT", { data: newdata, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart7, RES, 'Chart7');
|
|
}
|
|
);
|
|
newdata.type = "RX";
|
|
MyPost("/API/GetRETRY_COUNT", { data: newdata, isSwal: endDate != null }, (RES) => {
|
|
barChartdatashow(chart8, RES, 'Chart8');
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
// 写入历史 历史只是隐藏的值
|
|
let btnshow_item = Cookies.get('btnshow_item') || null;
|
|
btnshow_item = btnshow_item == null ? [] : JSON.parse(btnshow_item);
|
|
|
|
btnshow_item.forEach((item, index) => {
|
|
$(".btnshow").eq(item.index).click();
|
|
})
|
|
|
|
let data = Cookies.get('UDPINFO_GetCHARTS') || null;
|
|
let UDPINFO_ChangeTime = Cookies.get('UDPINFO_ChangeTime') || 1
|
|
UDPINFO_ChangeTime = Number.parseInt(UDPINFO_ChangeTime);
|
|
// 默认当天
|
|
$("#UDPINFO_ChangeTime").val(UDPINFO_ChangeTime);
|
|
data = data != null ? JSON.parse(Cookies.get('UDPINFO_GetCHARTS')) : [];
|
|
checkeddata.RX = data["RX"] || defauust["RX"];
|
|
checkeddata.TX = data["TX"] || defauust["TX"];
|
|
//// 如果TX 不等于 .TX 长度减去1 那么久取消全选
|
|
if ($(".TX").length != (checkeddata.TX.length + 1)) {
|
|
$(".TX").prop("checked", false);
|
|
for (var i of checkeddata.TX) {
|
|
$(".TX").eq(i).prop("checked", true);
|
|
}
|
|
}
|
|
//// 如果RX 不等于 .RX 长度减去1 那么久取消全选
|
|
if ($(".RX").length != (checkeddata.RX.length + 1)) {
|
|
$(".RX").prop("checked", false);
|
|
for (var i of checkeddata.RX) {
|
|
$(".RX").eq(i).prop("checked", true);
|
|
}
|
|
}
|
|
|
|
// 时间选择 默认值
|
|
startDate = data["startDate"] || moment().startOf("days").format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = data["endDate"] || moment().format('YYYY-MM-DD HH:mm:ss');
|
|
|
|
|
|
// 带有时间选择的日期范围选择器
|
|
$('#reservationtime').daterangepicker({
|
|
startDate: startDate,
|
|
endDate: endDate,
|
|
timePicker: true,
|
|
maxDate: new Date(),
|
|
minDate: "2022-3-25 00:00:00",
|
|
timePicker24Hour: true,
|
|
timePickerSeconds: true,
|
|
locale: {
|
|
cancelLabel: 'Clear',
|
|
format: 'YYYY-MM-DD HH:mm:SS'
|
|
}
|
|
}).on('apply.daterangepicker', function (ev, picker) {
|
|
startDate = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = picker.endDate.format('YYYY-MM-DD HH:mm:ss');
|
|
$('#UDPINFO_ChangeTime').val(8);
|
|
ChangeTime()
|
|
}).on('cancel.daterangepicker', function (ev, picker) {
|
|
$('UDPINFO_ChangeTime').val(8);
|
|
$(this).val('');
|
|
startDate = null;
|
|
endDate = null;
|
|
ChangeTime()
|
|
});
|
|
// 更改时间 触发 加载
|
|
ChangeTime();
|
|
});
|
|
|
|
|
|
//显示数据
|
|
function barChartdatashow(chartinfo, RES, element) {
|
|
try {
|
|
// 取消正刷新标识
|
|
is_NOW_SX--;
|
|
console.log(element +"--"+is_NOW_SX)
|
|
if (chartinfo != null ) {
|
|
chartinfo.dispose();
|
|
}
|
|
chartinfo = echarts.init(document.getElementById(element));
|
|
if (RES == null) {
|
|
return;
|
|
}
|
|
chartinfo.setOption(RES);
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
// 实时数据的刷新器
|
|
let NOW_SX = null;
|
|
|
|
// 是否正在刷新
|
|
let is_NOW_SX = 0;
|
|
|
|
|
|
/// 时间选择
|
|
function ChangeTime() {
|
|
let sel = Number.parseInt($("#UDPINFO_ChangeTime").val().replace(/\s*/g, ""));
|
|
try {
|
|
switch (sel) {
|
|
case 1:
|
|
startDate = moment().startOf("days").format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = moment().format('YYYY-MM-DD HH:mm:ss');
|
|
break;
|
|
case 2:
|
|
startDate = moment().subtract(1, 'days').startOf("days").format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = moment().subtract(1, 'days').endOf("days").format('YYYY-MM-DD HH:mm:ss');
|
|
break;
|
|
case 3:
|
|
startDate = moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = moment().format('YYYY-MM-DD HH:mm:ss');
|
|
break;
|
|
case 4:
|
|
startDate = moment().subtract(29, 'days').format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = moment().format('YYYY-MM-DD HH:mm:ss');
|
|
break;
|
|
case 5:
|
|
startDate = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = moment().format('YYYY-MM-DD HH:mm:ss');
|
|
break;
|
|
case 6:
|
|
startDate = moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss');
|
|
break;
|
|
case 7:
|
|
startDate = moment().format('YYYY-MM-DD HH:mm:ss');
|
|
endDate = null;
|
|
break;
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
|
|
Cookies.set('UDPINFO_ChangeTime', sel, { expires: 7, path: window.location.pathname });
|
|
|
|
|
|
$('#reservationtime').val(startDate + ' - ' + (endDate == null ? "" : endDate));
|
|
|
|
//时间选择改变所有的度改变
|
|
showchangelist = [true, true, true, true, true, true, true];
|
|
|
|
if (endDate == null) {
|
|
//显示 选择分钟事件
|
|
$("#Chart_ChangeTime").show();
|
|
|
|
// 第一次显示读取缓存
|
|
if (Chart_ChangeTime == -1) {
|
|
Chart_ChangeTime = Cookies.get('Chart_ChangeTime') || 1;
|
|
Chart_ChangeTime = Number.parseInt(Chart_ChangeTime);
|
|
$("#Chart_ChangeTime").val(Chart_ChangeTime);
|
|
}
|
|
|
|
if (NOW_SX != null) {
|
|
clearInterval(NOW_SX);
|
|
NOW_SX = null;
|
|
is_NOW_SX = 0;
|
|
}
|
|
|
|
//// 定时器
|
|
|
|
NOW_SX = setInterval(function () {
|
|
if (endDate != null) {
|
|
if (NOW_SX != null) {
|
|
clearInterval(NOW_SX);
|
|
NOW_SX = null;
|
|
is_NOW_SX = 0;
|
|
}
|
|
return;
|
|
}
|
|
if (is_NOW_SX <= 0) {
|
|
// 没有隐藏的画布执行刷新 刷新成功后 is_NOW_SX --
|
|
// is_NOW_SX == 0 表示所有画布没有隐藏度已经刷新
|
|
let lengthnum = 0;
|
|
|
|
var difftime = (new Date() - new Date(startDate)) / 1000; //计算时间差,并把毫秒转换成秒
|
|
|
|
console.log("实时的ms" + difftime);
|
|
|
|
if (difftime > 60 * 5) {
|
|
ChangeTime();
|
|
}
|
|
for (let tump of $('.Chart')) {
|
|
if (!$(tump).is(':hidden')) {
|
|
lengthnum++;
|
|
}
|
|
}
|
|
console.log(lengthnum)
|
|
is_NOW_SX = lengthnum;
|
|
search_result();
|
|
} else {
|
|
console.log("等待之前的未加载：" + is_NOW_SX)
|
|
}
|
|
}, 5000);
|
|
}
|
|
else {
|
|
clearInterval(NOW_SX);
|
|
$("#Chart_ChangeTime").hide();
|
|
}
|
|
search_result();
|
|
return;
|
|
}
|
|
|
|
|
|
// 显示隐藏 面板
|
|
function btnshow(that, index) {
|
|
|
|
let btntext = $(that).find("button").eq(0).text();
|
|
let isshow = btntext.indexOf("收起") >= 0; //TRUE 标识 隐藏
|
|
$(that).find("button").eq(0).text(isshow ? btntext.replace("收起", "展开") : btntext.replace("展开", "收起"));
|
|
$(that).next().toggle();
|
|
// 重新显示并且 之前选择的时间范围数值已经改变
|
|
if (!isshow && showchangelist[index]) {
|
|
search_result(index);
|
|
}
|
|
|
|
showchangelist[index] = false;
|
|
|
|
// 写入历史 历史只是隐藏的值
|
|
let btnshow_item = Cookies.get('btnshow_item') || null;
|
|
btnshow_item = btnshow_item == null ? [] : JSON.parse(btnshow_item);
|
|
if (!isshow) {
|
|
//移除原有的 隐藏的值
|
|
btnshow_item = btnshow_item.filter(x => {
|
|
return x.index != index;
|
|
})
|
|
} else {
|
|
let onok = true;
|
|
btnshow_item.filter(x => {
|
|
if (x.index == index) {
|
|
onok = false;
|
|
}
|
|
return true;
|
|
})
|
|
//添加 隐藏的值
|
|
if (onok) {
|
|
btnshow_item.push({ index });
|
|
}
|
|
}
|
|
// 写入缓存
|
|
Cookies.set('btnshow_item', btnshow_item, { expires: 7, path: window.location.pathname });
|
|
|
|
Cookies.set('Chart_ChangeTime', Chart_ChangeTime, { expires: 7, path: window.location.pathname });
|
|
|
|
}
|
|
// 重启服务等操作
|
|
function Changerserver(type)
|
|
{
|
|
$(".serverbtn").addClass('disabled');
|
|
MyPost("/API/Changerserver", { data: { type }, isSwal: false }, (RES) => {
|
|
toastr.success('操作成功~')
|
|
}, () => {
|
|
toastr.error('操作失败~')
|
|
});
|
|
}
|
|
|
|
|
|
// 检测服务是否有效
|
|
function udpinfo_RUCSSTATUS(x) {
|
|
// tcp 是否能连接 x[0] 0 未 1 ok
|
|
// 服务状态 x[1] 0 不存在 1 ok 2 未运行
|
|
$("#serverstatus").removeClass("bg-red");
|
|
$("#serverstatus").removeClass("bg-green");
|
|
$("#serverstatus").removeClass("bg-yellow");
|
|
$("#serverstatus").addClass( x[1] == 0 ? "bg-yellow" : (x[1] == 1 ? "bg-green" : "bg-red"));
|
|
$(".serverbtn").removeClass('disabled');
|
|
switch (x[1]) {
|
|
case 0:
|
|
$(".serverbtn").addClass('disabled');
|
|
break;
|
|
case 1:
|
|
$(".serverbtn").eq(0).addClass('disabled');
|
|
break;
|
|
case 2:
|
|
$(".serverbtn").eq(1).addClass('disabled');
|
|
break;
|
|
}
|
|
//tcpstatus
|
|
$("#tcpstatus").removeClass("bg-red");
|
|
$("#tcpstatus").removeClass("bg-green");
|
|
$("#tcpstatus").addClass(x[0] != 0 ? "bg-green" : "bg-red");
|
|
|
|
}
|
|
|
|
RUCSSTATUS_BACK.push(udpinfo_RUCSSTATUS);
|
|
|
|
// 第一次主动读取 其余推送 udpinfo_RUCSSTATUS 方法
|
|
udpinfo_RUCSSTATUS(RUCSSTATUS_Val);
|
|
|