初始化
This commit is contained in:
435
WebUI/wwwroot/js_custom/UDPINFO.js
Normal file
435
WebUI/wwwroot/js_custom/UDPINFO.js
Normal file
@@ -0,0 +1,435 @@
|
||||
|
||||
|
||||
$("#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);
|
||||
|
||||
Reference in New Issue
Block a user