初始化

This commit is contained in:
2025-11-26 11:18:26 +08:00
commit 0564b8c1f3
579 changed files with 346253 additions and 0 deletions

View File

@@ -0,0 +1,279 @@
// 起始长度
let start = 1;
// 每页长度
let pagelength = 15;
//page
let page = 1;
// 起始时间
let startDate = null;
let endDate = null;
//展开的 数据 id
let sel_id = new Array();
let datatable = null;
let sx_time = null;
let last_time = new Date().getTime();
curr = new Date().getTime(),
out = 6 * 1000; //设置超时时间6s
// 是否正在刷新
let is_sx = false;
$(function () {
let udplog_data = Cookies.get('BLV_UdpDebug_data') || null;
udplog_data = udplog_data != null ? JSON.parse(udplog_data) : [];
$('#CONTENT_DECRYPT').val(udplog_data['CONTENT_DECRYPT']);
$('#DESTINATION_PORT').val(udplog_data['DESTINATION_PORT']);
$('#DESTINATION').val(udplog_data['DESTINATION']);
$('#SOURCE_PORT').val(udplog_data['SOURCE_PORT']);
$('#SOURCE_IP').val(udplog_data['SOURCE_IP']);
$('#DIRECTION').val(udplog_data['DIRECTION']);
$('#DATA_VALID').val(udplog_data['DATA_VALID']);
pagelength = udplog_data['pagelength'] || pagelength;
$('#pagelength').val(pagelength);
startDate = udplog_data.startDate || "2022-3-25 01:01:01";
endDate = udplog_data.endDate || moment().format('YYYY-MM-DD HH:mm:ss');
// 带有时间选择的日期范围选择器
$('#reservationtime').daterangepicker({
startDate: startDate || "2022-3-25 01:01:01",
endDate: endDate || new Date(),
timePicker: true,
maxDate: new Date(),
minDate: "2022-3-25 01:01:01",
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');
console.log(startDate);
endDate = picker.endDate.format('YYYY-MM-DD HH:mm:ss');
console.log(endDate);
}).on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
startDate = null;
endDate = null;
});
loc();
table_init();
// 用户操作后停止自动刷新
$(document).mouseover(function (e) {
last_time = new Date().getTime(); //更新操作时间
});
set_Timeout();
});
//头部点击隐藏
function titlehiede(that) {
$($(that).siblings()).toggle();
loc();
}
// 计算距离
/// 初始的 底部距离
let footloc = 0;
function loc() {
if (footloc == 0) {
footloc = $('.main-footer').offset().top;
$('.main-footer').hide();
}
let STR = "calc(100vh - " + $('.table-responsive').offset().top + "px";
//- (100vh - " + footloc + "px)) ";
console.log(STR);
$('.table-responsive').css("height", STR)
}
function lengthCHANGE(that) {
pagelength = $(that).val();
table_init();
}
// 定时检测刷新
function set_Timeout() {
sx_time = setInterval(function () {
curr = new Date().getTime(); //更新当前时间
if (
//curr - last_time > out //判断是否超时
// $("#remember").prop("checked") 是否勾选
//&& !is_sx &&
$("#remember").prop("checked")) {
if (startDate == null) {
startDate = moment().startOf("days").format('YYYY-MM-DD HH:mm:ss');
}
endDate = moment().format('YYYY-MM-DD HH:mm:ss');
$('#reservationtime').val(startDate + "-" + endDate)
is_sx = true;
table_init(function () {
is_sx = false;
});
}
}, 1000);
}
// table数据初始化刷新
function table_init(success = null) {
let data = {
DESTINATION_PORT: $('#DESTINATION_PORT').val(),
CONTENT_DECRYPT: $('#CONTENT_DECRYPT').val(),
DESTINATION: $('#DESTINATION').val(),
SOURCE_PORT: $('#SOURCE_PORT').val(),
SOURCE_IP: $('#SOURCE_IP').val(),
DIRECTION: $('#DIRECTION').val(),
DATA_VALID: $('#DATA_VALID').val(),
startDate,
endDate
};
if (datatable != null) {
datatable.destroy();
}
$.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
datatable = $('#dataTable').on('error.dt', function (e, settings, techNote, message) {
location.reload();
console.log(e, settings, techNote)
console.log('An error has been reported by DataTables: ', message);
}).DataTable({
"paging": true,
"serverSide": true,
"ajax": function (datas, callback, settings) {
data.start = datas.start;
data.length = datas.length;
data.draw = datas.draw
//is_sx 自动刷新的 话 取消弹窗
MyPost("/Server/GetBLV_UdpDebug", { data, isSwal: !is_sx }, res => { callback(res) });
},
"ordering": false,
"columns":
[
{ "data": "UDP_ID"},
{ "data": "SN"},
{ "data": "CreateDateTime" },
{ "data": "RcvDateTime" },
{ "data": "DataType" },
{ "data": "Custom" },
{ "data": "Datalen" },
{ "data": "RevDelayDateTime" },
{ "data": "RcvProcessDateTime" },
{ "data": "DataString1" },
{ "data": "DataString2" },
],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).addClass('bg-white').addClass('shadow');
return;
//$('thead').hide();
$(nRow).click(
function () {
ShowLog(nRow, aData);
}
)
},
"searching": false,
"autoWidth": false,
"bDeferRender ": true,
'iDisplayLength': pagelength,
"bLengthChange": false,
"initComplete": function (oSettings, json) {
Cookies.set('BLV_UdpDebug_data', data, { expires: 7, path: window.location.pathname });
return;
for (let i = 0; i < sel_id.length; i++) {
$($("#" + sel_id[i]).closest('tr')).click();
}
if (success != null) {
success();
}
},
'aLengthMenu': [50, 15, 25, 35,], //设置每页显示记录的下拉菜单
"language":
{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
}
// 搜索按钮
function search_result() {
table_init();
}
// 显示详细数据
function ShowLog(that, data) {
return;
let STR =
`
<div onclick="javascript:event.stopPropagation();event.preventDefault();" class="text-info card-body shadow-sm" style="padding:0.5rem; background-color: rgb(255, 250, 240);">
<div class="row">
<div class="col-md-4 col-6">
UDP_ID : <span class='text-gray'>`+ data.UDP_ID + `</span></div>
<div class="col-md-4 col-6">
MAC : <span class='text-gray'>`+ data.MAC + `</span></div>
<div class="col-md-4 col-6">
MSG_ID : <span class='text-gray'>`+ data.MSG_ID + `</span></div>
<div class="col-md-4 col-6">
长度 : <span class='text-gray'>`+ data.LENGTH + `</span></div>
<div class="col-md-4 col-6">
TCP_ID : <span class='text-gray'>`+ data.TCP_ID + `</span></div>
<div class="col-md-4 col-6">
处理结果 : <span class='text-gray'>`+ (data.RESULT == 0 ? "失败" : "成功") + `</span></div>
<div class="col-md-4 col-6">
重发次数 : <span class='text-gray'>`+ data.RETRY_COUNT + `</span></div>
<div class="col-md-4 col-6">
是否有效 : <span class='text-gray'>`+ (data.DATA_VALID == 0 ? "无效" : "有效") + `</span></div>
<div class="col-md-4 col-6">
接收间隔 : <span class='text-gray'>`+ data.RCV_TIMEOUT + `ms</span></div>
<div class="col-md-4 col-6">
通讯命令 : <span class='text-gray'>`+ data.UDP_CMD + `</span></div>
<div class="col-md-4 col-6">
发送间隔 : <span class='text-gray'>`+ data.SED_TIMEOUT + `ms</span></div>
<div class="col-md-4 col-6">
处理耗时 : <span class='text-gray'>`+ data.PROCESSING_TIMESPENT + `ms</span></div>
<div class="col-md-4 col-6">
端口通讯时差 : <span class='text-gray'>`+ data.Prot_TimeOut + `ms</span></div>
<div class="col-md-12 col-12 ">
备注 : <span class='text-gray'>`+ data.REMARK + `</span></div>
`;
if (($(that).find(".card-body").length != 0)) {
$($(that).find(".card-body")).toggle();
if ($($(that).find(".card-body")).attr("style").indexOf('display: none;') >= 0) {
sel_id = sel_id.filter((id) => {
return id != data.UDP_ID;
})
} else {
if (sel_id.indexOf(data.UDP_ID) < 0) {
sel_id.push(data.UDP_ID);
}
}
} else {
if (sel_id.indexOf(data.UDP_ID) < 0) {
sel_id.push(data.UDP_ID);
}
$(that).find("td").append(STR);
}
}

View File

@@ -0,0 +1,332 @@

// 这个是 实时模式 端口统计使用的功能
$("#Chart_ChangeTime").hide();
let Chart_ChangeTime = Cookies.get('BLV_UdpDebugImg_Chart_ChangeTime') || 1;
$("#Chart_ChangeTime").val(Chart_ChangeTime);
// 这个是 实时模式 端口统计使用的功能 结束
// 点击收起之后 选择的时间 是否改变 选择的时间改变 =》 图也要改变
// 相对指定图是否改变
let showchangelist = [false, false, false, false];
// 通讯包数统计
let chart = null;
// 通讯字节流量统计收起
let chart1 = null;
// 端口数据使用情况
let chart2 = null;
// 处理耗时
let chart3 = 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);
});
}
}
//TX RX复选框默认值 ----------------------------------------- 当前页面用不到 结束
//渲染全部 或者渲染指定绘图 前提是元素没有隐藏
function search_result(index = -1) {
let data = { RX: checkeddata.RX, TX: checkeddata.TX, startDate, endDate };
Cookies.set('BLV_UdpDebugImg_GetCHARTS', data, { expires: 7, path: window.location.pathname });
if (!$('#lineChart').is(':hidden') && (index == -1 || index == 0)) {
MyPost("/API/GetBLV_UdpDebugImg", { data, isSwal: endDate != null }, (RES) => {
barChartdatashow(chart, RES, 'lineChart');
});
}
if (!$('#barChart').is(':hidden') && (index == -1 || index == 1)) {
MyPost("/API/GetBLV_UdpDebugImg_PIE", { data, isSwal: endDate != null }, (RES) => {
barChartdatashow(chart1, RES, 'barChart');
}
);
}
if (!$('#Chart2').is(':hidden') && (index == -1 || index == 2)) {
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('BLV_UdpDebugImg_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');
}
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');
}
);
}
}
$(function () {
// 写入历史 历史只是隐藏的值
let btnshow_item = Cookies.get('BLV_UdpDebugImg_btnshow_item') || null;
btnshow_item = btnshow_item == null ? [] : JSON.parse(btnshow_item);
console.log(btnshow_item)
btnshow_item.forEach((item, index) => {
$(".btnshow").eq(item.index).click();
})
let data = Cookies.get('BLV_UdpDebugImg_GetCHARTS') || null;
let UDPINFO_ChangeTime = Cookies.get('BLV_UdpDebugImg_ChangeTime') || 1
UDPINFO_ChangeTime = Number.parseInt(UDPINFO_ChangeTime);
$("#UDPINFO_ChangeTime").val(UDPINFO_ChangeTime);
data = data != null ? JSON.parse(Cookies.get('BLV_UdpDebugImg_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);
}
}
//// 如果TX 不等于 .TX 长度减去1 那么久取消全选 ----------------------------------------- 当前页面用不到 结束
//// 如果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);
}
}
//// 如果RX 不等于 .RX 长度减去1 那么久取消全选 ----------------------------------------- 当前页面用不到 结束
// 时间选择 默认值
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--;
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().endOf('month').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().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('BLV_UdpDebugImg_ChangeTime', sel, { expires: 7, path: window.location.pathname });
$('#reservationtime').val(startDate + ' - ' + (endDate == null ? "" : endDate));
//时间选择改变所有的度改变
showchangelist = [true, true, true, true];
if (endDate == null) {
//显示 选择分钟事件
$("#Chart_ChangeTime").show();
// 第一次显示读取缓存
if (Chart_ChangeTime == -1) {
Chart_ChangeTime = Cookies.get('BLV_UdpDebugImg_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);
}
return;
}
if (is_NOW_SX <= 0) {
// 没有隐藏的画布执行刷新 刷新成功后 is_NOW_SX --
// is_NOW_SX == 0 表示所有画布没有隐藏度已经刷新
let lengthnum = 0;
for (let tump of $('.Chart')) {
if (!$(tump).is(':hidden')) {
lengthnum++;
}
}
is_NOW_SX = lengthnum;
search_result();
}
}, 1000);
}
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('BLV_UdpDebugImg_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('BLV_UdpDebugImg_btnshow_item', btnshow_item, { expires: 7, path: window.location.pathname });
Cookies.set('BLV_UdpDebugImg_Chart_ChangeTime', Chart_ChangeTime, { expires: 7, path: window.location.pathname });
}

View File

@@ -0,0 +1,334 @@
let that;
let datatable = null;
const app = {
data() {
return {
// 第一次加载
isfirst: true,
// 酒店组值
selected_hotel_group: Cookies.get('EVENTLOGGING_hotelgroup') || 0,
// 酒店组
selecthotelgroup: [{ HotelGroupsId: "0", HotelGroupsName: "全部酒店组" }],
// 事件id
evenid: Cookies.get('EVENTLOGGING_evenid') || "",
// 房间当前选择
selected_room: Cookies.get('EVENTLOGGING_room') || 0,
// 房间选择
selectroom: [{ val: "0", text: "全部房间" }],
// 起始时间
startDate: Cookies.get('EVENTLOGGING_startDate') || moment().startOf("days").format('YYYY-MM-DD HH:mm:ss'),
// 结束时间
endDate: Cookies.get('EVENTLOGGING_endDate') || moment().format('YYYY-MM-DD HH:mm:ss'),
// 表格
datatable: null,
// 天数快捷选择值
selected_day: Cookies.get('EVENTLOGGING_day') || 1,
// 天数快捷选择
selectday: [{ val: "1", text: "今天" }, { val: "2", text: "昨天" }, { val: "3", text: "最近7天" }, { val: "4", text: "最近30天" }, { val: "-1", text: "自定义" }],
// 每页数量选择值
selected_page: Cookies.get('EVENTLOGGING_page') || 10,
// 每页数量
selectpage: [{ val: "10", text: "每页10条" }, { val: "20", text: "每页20条" }, { val: "30", text: "每页30条" }, { val: "10", text: "每页40条" }],
// 酒店选择
selecthotel: [{ HotelId: "0", HotelName: "全部酒店" }],
// 酒店选择值
selected_hotel: Cookies.get('EVENTLOGGING_hotel') || 0,
// 高度
appheight: "",
}
},
created() {
that = this;
setTimeout(function () { that.init(); }, 10);
},
methods: {
// 初始化
init() {
this.loc();
this.selectgroup_init();
// 带有时间选择的日期范围选择器
$('#reservationtime').daterangepicker({
startDate:that.startDate,
endDate: that.endDate,
timePicker: true,
maxDate: new Date(),
minDate: "2022-3-25 01:01:01",
timePicker24Hour: true,
timePickerSeconds: true,
locale: {
cancelLabel: 'Clear',
format: 'YYYY-MM-DD HH:mm:ss'
}
}).on('apply.daterangepicker', function (ev, picker) {
that.startDate = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
that.endDate = picker.endDate.format('YYYY-MM-DD HH:mm:ss');
that.selected_day = -1;
}).on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
that.startDate = null;
that.endDate = null;
that.selected_day = -1;
});
},
// 酒店组改变事件 更改酒店列表信息
selectgroup_init() {
try
{
if(that.isfirst) {
MyPost("/Api/HOTELINFO", { isSwal: that.isfirst }, res => {
if (res == null) {
toastr.error('酒店信息获取失败~');
return;
}
that.selecthotelgroup = that.selecthotelgroup.concat(res || []);
let oldok = false;
for (let i of that.selecthotelgroup) {
if (i.HotelGroupsId == that.selected_hotel_group) {
oldok = true;
break;
}
}
if (!oldok) {
// 历史选择的酒店组不存在
that.selected_hotel_group = 0;
that.selected_hotel = 0;
that.selected_room = 0;
}
// 初始化 酒店列表
that.selecthotel_init();
});
} else {
that.selecthotel_init();
}
} catch (e) {
console.log("酒店组选择报错."+e);
}
},
// 获取酒店下拉列表信息
selecthotel_init() {
that.selected_hotel_group = Number.parseInt(that.selected_hotel_group + "".replace(/\s*/g, ""));
// 如果历史酒店组的id 未能在数据找到 就让选择全部酒店组 显示所有酒店
let alldata = [{ HotelId: "0", HotelName: "全部酒店" }];
for (let i of that.selecthotelgroup) {
if (i.Hotels != null) {
alldata = alldata.concat(i.Hotels);
}
if (i.HotelGroupsId == that.selected_hotel_group && that.selected_hotel_group > 0) {
that.selecthotel = [{ HotelId: "0", HotelName: "全部酒店" }];
that.selecthotel = that.selecthotel.concat(i.Hotels || []);
let isold = false;
// 如果是第一次 那就 判断 历史选择的酒店 是否有存在 没有的话就 重置选择
if (that.isfirst && that.selected_hotel !=0) {
for (let j of that.selecthotel) {
if (j.HotelId == that.selected_hotel) {
isold = true;
break;
}
}
}
if (!isold) {
that.selected_hotel = 0;
that.selected_room = 0;
}
that.selectroom_init();
return;
}
}
// 如果没有找到 就 重置选择
that.selected_hotel_group = 0;// that.selected_hotel_group > 0 正常操作 是不存在找不到的 酒店组时已经判断过一次了。
that.selected_hotel = 0;
that.selected_room = 0;
that.selecthotel = alldata;
console.log(that.selecthotel)
console.log(alldata)
that.selectroom_init();
},
// 获取房间下拉列表信息
selectroom_init() {
that.selectroom = [{ val: "0", text: "全部房间" }];
MyPost("/Api/ROOMINFO", { isSwal: that.isfirst, data: { HotelId: that.selected_hotel, GroupId: that.selected_hotel_group } }, res => {
that.selectroom = that.selectroom.concat(res || []);
let oldok = false;
if (that.isfirst && that.selected_room != 0) {
for (let i of that.selectroom) {
if (i.val == that.selected_room) {
oldok = true;
break;
}
}
}
if (!oldok) {
// 历史选择的房间不存在 或者 不是第一次加载
that.selected_room = 0;
}
that.table_init();
});
},
// 时间快捷选择
selected_day_change: function () {
that.selected_day = Number.parseInt(that.selected_day + "".replace(/\s*/g, ""));
switch (that.selected_day) {
case 1:
that.startDate = moment().startOf("days").format('YYYY-MM-DD HH:mm:ss')
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss')
break;
case 2:
that.startDate = moment().subtract(1, 'days').startOf("days").format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().subtract(1, 'days').endOf("days").format('YYYY-MM-DD HH:mm:ss');
break;
case 3:
that.startDate = moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
break;
case 4:
that.startDate = moment().subtract(29, 'days').format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
break;
}
// that.selected_day 是string 类型 他会自己转成 number 进行比较
if (that.selected_day > -1) {
$('#reservationtime').val(that.startDate + ' - ' + that.endDate);
that.table_init();
}
},
// 计算距离
loc: function () {
// 采用的局部 vue 所以这里 有些许 jquery
//let footloc = $('.main-footer').offset().top;
$('.main-footer').hide();
this.appheight = "calc(100vh - " + $('.table-responsive').offset().top + "px)";
},
ellipsis(value) {
let var_ = "" + value
let length_ = var_.length;
let str = "";
for (var i = length_; i < 4; i++) {
str += "1";
}
return var_ + `<span style='opacity: 0;'>` + str + `</span>`;
},
// 表格初始化
table_init() {
try {
if (that.isfirst) {
that.isfirst = false;
}
if (datatable != null) {
datatable.destroy();
}
$.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
datatable = $('#dataTable').on('error.dt', function (e, settings, techNote, message) {
console.log(e, settings, techNote)
console.log('An error has been reported by DataTables: ', message);
}).DataTable({
"data": null,
"ordering": true,
"paging": true,
"serverSide": true,
"ajax": function (datas, callback, settings) {
datas.hotelid = that.selected_hotel;
datas.mac = that.mac;
datas.roomid = that.selected_room;
datas.evenid = that.evenid;
datas.startDate = that.startDate;
datas.endDate = that.endDate;
MyPost("/Server/EVENTLOGGING_", { isSwal: true, data: datas }, (res) => {
that.rcudata = res || [];
Cookies.set('EVENTLOGGING_hotelgroup', that.selected_hotel_group, { expires: 7, path: window.location.pathname });
if (that.endDate != null) {
Cookies.set('EVENTLOGGING_endDate', that.endDate, { expires: 7, path: window.location.pathname });
}
if (that.startDate != null) {
Cookies.set('EVENTLOGGING_startDate', that.startDate, { expires: 7, path: window.location.pathname });
}
// 写入数据缓存
Cookies.set('EVENTLOGGING_hotelgroup', that.selected_hotel_group, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_day', that.selected_day, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_hotel', that.selected_hotel, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_page', that.selected_page, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_evenid', that.evenid, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_room', that.selected_room, { expires: 7, path: window.location.pathname });
if (that.isfirst) { that.isfirst = false; }
callback(res);
}, (err) => {
toastr.error('网络繁忙~')
})
},
'iDisplayLength': that.selected_page,
"columns": [{
'sTitle': '',/*.substring(6)*/
'render': function (data, type, rcu) {
try {
let STR =
`<div class="col-12 col-md-6">
<span>`+ that.ellipsis(rcu.data.MFD_ID) + `</span>
<button type="button" class= "`+ (rcu.data.Available == 1 ? 'btn btn-xs btn-success' : 'btn btn-xs btn-danger') + `">` + (rcu.data.Available == 1 ? '可 用' : '不可用') + `</button>
`+ rcu.data.UploadDateTime + `
</div>
<div class="col-md-6 col-12">
FilePath : `+ rcu.data.Directory + `\\` + rcu.data.XML_FileName + `
</div>
<div class="col-md-6 col-12">
XLM_MD5 : `+ rcu.data.XLM_MD5 + `
</div>
<div class="col-md-6 col-12">
`+ rcu.size + `
<button type="button" onclick="del_file(this,`+ rcu.data.MFD_ID + `)" class="btn btn-danger btn-xs">删除文件</button>
</div>`;
return STR;
} catch (e) {
console.log(e);
}
}
}],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).addClass('bg-white').addClass('shadow');
$(nRow).children("td").addClass('row');
return;
},
"searching": false,
"autoWidth": false,
"bDeferRender ": true,
"bLengthChange": false,
"language":
{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
} catch (e) {
console.log(e)
}
}
}
}
Vue.createApp(app).mount('#app');
$('#app').show();

View File

@@ -0,0 +1,377 @@

let that;
let datatable = null;
const app = {
data() {
return {
// 类型筛选选择值
selecttype: [{ val: "0", text: "全部类型" }, { val: "1", text: "Launcher信息" }, { val: "2", text: "系统信息" }, { val: "3", text: "设备通讯" }, { val: "4", text: "通讯状态" }, { val: "5", text: "定期保存" }, { val: "6", text: "网络处理" }, { val: "7", text: "事件处理" }],
// 类型筛选选择值
type: Cookies.get('EVENTLOGGING_type') || 0,
// 收起
sq: false,
// 第一次加载
isfirst: true,
// 酒店组值
selected_hotel_group: Cookies.get('EVENTLOGGING_hotelgroup') || 0,
// 酒店组
selecthotelgroup: [{ HotelGroupsId: "0", HotelGroupsName: "全部酒店组" }],
// mac
mac: Cookies.get('EVENTLOGGING_mac') || "",
// 起始时间
startDate: Cookies.get('EVENTLOGGING_startDate') || moment().startOf("days").format('YYYY-MM-DD HH:mm:ss'),
// 结束时间
endDate: Cookies.get('EVENTLOGGING_endDate') || moment().format('YYYY-MM-DD HH:mm:ss'),
// 表格
datatable: null,
// 天数快捷选择值
selected_day: Cookies.get('EVENTLOGGING_day') || 1,
// 天数快捷选择
selectday: [{ val: "1", text: "今天" }, { val: "2", text: "昨天" }, { val: "3", text: "最近7天" }, { val: "4", text: "最近30天" }, { val: "-1", text: "自定义" }],
// 每页数量选择值
selected_page: Cookies.get('EVENTLOGGING_page') || 10,
// 每页数量
selectpage: [{ val: "10", text: "每页10条" }, { val: "20", text: "每页20条" }, { val: "50", text: "每页30条" }, { val: "100", text: "每页40条" }],
// 高度
appheight: "",
// 酒店选择
selecthotel: [{ HotelId: "0", HotelName: "全部酒店" }],
// 酒店选择值
selected_hotel: Cookies.get('EVENTLOGGING_hotel') || 0,
}
},
mounted() {
that = this;
that.init();
},
methods: {
// 收起按钮
sq_change() {
that.sq = !that.sq;
this.loc();
},
// 初始化
init() {
this.loc();
this.selectgroup_init();
// 带有时间选择的日期范围选择器
$('#reservationtime').daterangepicker({
startDate: that.startDate,
endDate: that.endDate,
timePicker: true,
maxDate: new Date(),
minDate: "2022-3-25 01:01:01",
timePicker24Hour: true,
timePickerSeconds: true,
locale: {
cancelLabel: 'Clear',
format: 'YYYY-MM-DD HH:mm:ss'
}
}).on('apply.daterangepicker', function (ev, picker) {
that.startDate = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
that.endDate = picker.endDate.format('YYYY-MM-DD HH:mm:ss');
that.selected_day = -1;
}).on('cancel.daterangepicker', function (ev, picker) {
// 这个 this 指向的是时间输入框
$(this).val('');
that.startDate = null;
that.endDate = null;
that.selected_day = -1;
});
},
// 酒店组改变事件 更改酒店列表信息
selectgroup_init() {
try {
if (that.isfirst) {
MyPost("/Api/HOTELINFO", { isSwal: that.isfirst }, res => {
if (res == null) {
toastr.error('酒店信息获取失败~');
return;
}
that.selecthotelgroup = that.selecthotelgroup.concat(res || []);
let oldok = false;
for (let i of that.selecthotelgroup) {
if (i.HotelGroupsId == that.selected_hotel_group) {
oldok = true;
break;
}
}
if (!oldok) {
// 历史选择的酒店组不存在
that.selected_hotel_group = 0;
that.selected_hotel = 0;
that.selected_room = 0;
}
// 初始化 酒店列表
that.selecthotel_init();
});
} else {
that.selecthotel_init();
}
} catch (e) {
console.log("酒店组选择报错." + e);
}
},
// 获取酒店下拉列表信息
selecthotel_init() {
that.selected_hotel_group = Number.parseInt(that.selected_hotel_group + "".replace(/\s*/g, ""));
// 如果历史酒店组的id 未能在数据找到 就让选择全部酒店组 显示所有酒店
let alldata = [{ HotelId: "0", HotelName: "全部酒店" }];
for (let i of that.selecthotelgroup) {
if (i.Hotels != null) {
alldata = alldata.concat(i.Hotels);
}
if (i.HotelGroupsId == that.selected_hotel_group && that.selected_hotel_group > 0) {
that.selecthotel = [{ HotelId: "0", HotelName: "全部酒店" }];
that.selecthotel = that.selecthotel.concat(i.Hotels || []);
let isold = false;
// 如果是第一次 那就 判断 历史选择的酒店 是否有存在 没有的话就 重置选择
if (that.isfirst && that.selected_hotel != 0) {
for (let j of that.selecthotel) {
if (j.HotelId == that.selected_hotel) {
isold = true;
break;
}
}
}
if (!isold) {
that.selected_hotel = 0;
}
that.table_init();
return;
}
}
console.log(alldata)
// 如果没有找到 就 重置选择
that.selected_hotel_group = 0;// that.selected_hotel_group > 0 正常操作 是不存在找不到的 酒店组时已经判断过一次了。
that.selected_hotel = 0;
that.selected_room = 0;
that.selecthotel = alldata;
},
// 时间快捷选择
selected_day_change: function () {
that.selected_day = Number.parseInt(that.selected_day + "".replace(/\s*/g, ""));
switch (that.selected_day) {
case 1:
that.startDate = moment().startOf("days").format('YYYY-MM-DD HH:mm:ss')
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss')
break;
case 2:
that.startDate = moment().subtract(1, 'days').startOf("days").format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().subtract(1, 'days').endOf("days").format('YYYY-MM-DD HH:mm:ss');
break;
case 3:
that.startDate = moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
break;
case 4:
that.startDate = moment().subtract(29, 'days').format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
break;
}
// that.selected_day 是string 类型 他会自己转成 number 进行比较
if (that.selected_day > -1) {
$('#reservationtime').val(that.startDate + ' - ' + that.endDate);
that.table_init();
}
},
// 计算距离
loc() {
setTimeout(() => {
$('.main-footer').hide();
that.appheight = "calc(100vh - " + $('.table-responsive').offset().top + "px)";
}, 10);
},
// 信息类型判断
typetext(val_num,type = 0) {
val_num = Number.parseInt(val_num + "".replace(/\s*/g, ""));
switch (val_num) {
case 1:
val_num = "Launcher信息";
if (type == 1) {
val_num = "#00868B"
}
break;
case 2:
val_num = "系统信息";
if (type == 1) {
val_num = "#43CD80"
}
break;
case 3:
val_num = "设备通讯";
if (type == 1) {
val_num = "#698B22"
}
break;
case 4:
val_num = "通讯状态";
if (type == 1) {
val_num = "#8B814C"
}
break;
case 5:
val_num = "定期保存";
if (type == 1) {
val_num = "#8B658B"
}
break;
case 6:
val_num = "网络处理";
if (type == 1) {
val_num = "#CD6839"
}
break;
case 7:
val_num = "事件处理";
if (type == 1) {
val_num = "#D02090"
}
break;
default:
val_num = "其他处理";
if (type == 1) {
val_num = "#8A2BE2"
}
break;
}
return val_num;
},
// 省略
ellipsis(value) {
if ((""+value).length > 8) {
value = value.slice(0,8)+"..."
}
return value;
},
// 表格初始化
table_init() {
try {
if (that.isfirst) {
that.isfirst = false;
}
if (datatable != null) {
datatable.destroy();
}
$.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
datatable = $('#dataTable').on('error.dt', function (e, settings, techNote, message) {
console.log(e, settings, techNote)
console.log('An error has been reported by DataTables: ', message);
}).DataTable({
"data": null,
"ordering": true,
"paging": true,
"serverSide": true,
"ajax": function (datas, callback, settings) {
datas.hotelid = that.selected_hotel;
datas.mac = that.mac;
datas.roomid = that.selected_room;
datas.startDate = that.startDate;
datas.endDate = that.endDate;
datas.type = that.type;
MyPost("/Server/Find_Mac", { isSwal: true, data: datas }, (res) => {
that.rcudata = res || [];
// 写入数据缓存
Cookies.set('EVENTLOGGING_hotelgroup', that.selected_hotel_group, { expires: 7, path: window.location.pathname });
if (that.endDate != null) {
Cookies.set('EVENTLOGGING_endDate', that.endDate, { expires: 7});
}
if (that.startDate != null) {
Cookies.set('EVENTLOGGING_startDate', that.startDate, { expires: 7 });
}
Cookies.set('EVENTLOGGING_day', that.selected_day, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_hotel', that.selected_hotel, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_page', that.selected_page, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_mac', that.mac, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_room', that.selected_room, { expires: 7, path: window.location.pathname });
if (that.isfirst) { that.isfirst = false; }
callback(res);
}, (err) => {
toastr.error('网络繁忙~')
})
},
'iDisplayLength': that.selected_page,
"columns": [{
'sTitle': '',/*.substring(6)*/
'render': function (data, type, rcu) {
try {
let STR =
`<div class="text-success col-6 col-md-4">
<button type="button" style="display: none;" class='btn btn-xs' style="COLOR:#FFF !important; background: `+ that.typetext(rcu.log_type,1) +` !important;border: none; ">` + that.typetext(rcu.log_type) + `</button>
`+ rcu.mac + `
</div>
<div class="col-md-4 col-6 text-info">
酒店:`+ rcu.hotelname + `
<span class="text-danger" style="display: none;" >
(`+ rcu.log_timespan + `)</span>
</div>
<div class="col-md-4 text-danger" style="display: none;" ></div>
<div class="col-md-4 col-6">
房间:`+ rcu.room_number + `
</div>
<div style="display: none;" class="col-md-4 col-6">
`+ rcu.room_number + `
</div>
`;
return STR;
} catch (e) {
console.log(e);
}
}
}],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).addClass('bg-white').addClass('shadow')
$(nRow).children("td").addClass('row');
$(nRow).children("td").click(
function () {
window.location.href = "/Server/RcuDataLog?mac=" + aData.mac;
//that.showtype(nRow, aData);
}
)
return;
},
"searching": false,
"autoWidth": false,
"bDeferRender ": true,
"bLengthChange": false,
"language":
{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
} catch (e) {
console.log(e)
}
}
}
}
Vue.createApp(app).mount('#app');
$('#app').show();

View File

@@ -0,0 +1,280 @@
let that;
let datatable = null;
let del_file = null;
const app = {
data() {
return {
selected_page: Cookies.get('selmodelfile_page') || 10,
selectpage: [{ val: "10", text: "每页10条" }, { val: "20", text: "每页20条" }, { val: "30", text: "每页30条" }, { val: "10", text: "每页40条" }],
datatable: null,
// 数据
select: [{ text: "全部", val: "" }, { text: "485Model", val: "485Model" }, { text: "BaseModel", val: "BaseModel" }, { text: "RCUModel", val: "RCUModel" }],
// 数据
selected: Cookies.get('selmodelfile')||"",
// 数据
rcudata: [],
// 高度
appheight: "",
// 添加类型 v
add_type: 0,
// 文件列表
files_data: [],
// 文件名 单独 方便筛选
files_name: [],
// 表单input 数量
files_ele_count: 0
}
},
created() {
that = this;
setTimeout(function () { that.init(); }, 10);
del_file = this.del_file;
},
methods: {
init() {
this.table_init();
this.loc();
},
clickCallback: function (pageNum) {
console.log(pageNum)
},
// 唤起文件选择
click_file(type) {
// 取消上传等按钮 取消唤醒
if (type == -10 && this.files_name.length > 0) {
this.init();
}
if (type != -1) {
this.files_ele_count = 0;
this.files_name = [];
this.files_data = [];
this.add_type = type
}
// 取消上传等按钮 取消唤醒
if (type == -10) {
return;
}
var str = 'filedata' + this.files_ele_count;
// this.$refs[str].click();
// VUE触发报错
$(this.$refs[str]).click();
},
add_file() {
let data = new window.FormData(this.$refs['addfile']);
let class_ = $('#filedata').attr('class');
let class_1 = $('#file_data').attr('class');
// 移除是为了 防止多个弹窗 同时挤掉
//$('#filedata').attr('class','');
//$('#file_data').attr('class', '');
let _data = that.files_data.concat();
that.files_data = [];
MyPost("/Api/AddModelFile", { isSwal: true, title: "上传中...", data, type: 1 }, (res) => {
for (let i = 0; i < _data.length; i++) {
// 已经上传的文件不再上传
if (_data[i].isok > -2) {
continue;
}
_data[i].isok = res[_data[i].name];
if (res[_data[i].name]) {
var str = 'filedata' + i;
$(that.$refs[str]).val("");
}
}
that.files_data = _data.concat();
//toastr.success('添加成功~');
}, (err) => {
toastr.error('网络繁忙~')
}, () => {
try {
setTimeout(function () {
$('#filedata').attr('class', class_);
$('#file_data').attr('class', class_1);
}, 200);
} catch (e) {
console.log("completeback - err");
}
}
);
},
filechange() {
var str = 'filedata' + this.files_ele_count;
var files = $('.filedata')[this.files_ele_count].files;
for (let i of files) {
if (i.type.toUpperCase() != "text/xml".toUpperCase()) {
this.$refs[str].value = null;
toastr.error('只能上传.XML格式的文件!');
return false;
}
if (this.files_name.indexOf(i.name) >= 0) {
$(this.$refs[str]).val("");
toastr.error('文件重复!');
return false;
}
this.files_name.push(i.name);
this.files_data.push(i);
}
this.files_ele_count++;
},
del_file(e,id) {
console.log(id)
let index = -1;
for (let i = 0; i < that.rcudata.data.length; i++) {
if (that.rcudata.data[i].data.MFD_ID == id) {
index = i;
break;
}
}
if (index == -1) {
console.log("非法访问~");
return;
}
Swal.fire({
title: ' ',
text: "您确定要删除文件:" + that.rcudata.data[index].data.XML_FileName + " ?",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '确认',
cancelButtonText: '取消'
}).then((result) => {
if (result.value) {
MyPost("/Api/DelModelFile", { isSwal: true, title: "正删除...", data: { id: that.rcudata.data[index].data.MFD_ID } }, (res) => {
if (res) {
try {
that.rcudata.data.splice(index,1);
toastr.success('删除成功~');
$(e).closest("tr").remove();
} catch (e) {
console.log(e)
}
}
else
toastr.error('删除失败~');
}, (err) => {
toastr.error('删除失败~');
})
}
})
},
rem_file: function (index) {
this.files_data.splice(index, 1);
this.files_name.splice(index, 1);
var str = 'filedata' + index;
$(this.$refs[str]).val("");
},
loc: function () {
// 采用的局部 vue 所以这里 有些许 jquery
let footloc = $('.main-footer').offset().top;
$('.main-footer').hide();
this.appheight = "calc(100vh - " + $('.table-responsive').offset().top + "px)";
},
ellipsis(value) {
let var_ = "" + value
let length_ = var_.length;
let str = "";
for (var i = length_; i < 4; i++) {
str += "1";
}
return var_ + `<span style='opacity: 0;'>` + str + `</span>`;
},
table_init() {
try {
if (datatable != null) {
datatable.destroy();
}
$.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
datatable = $('#dataTable').on('error.dt', function (e, settings, techNote, message) {
console.log(e, settings, techNote)
console.log('An error has been reported by DataTables: ', message);
}).DataTable({
"data": null,
"ordering": true,
"paging": true,
"serverSide": true,
"ajax": function (datas, callback, settings) {
datas.type = that.selected;
MyPost("/Api/SelModelFile", { isSwal: true, data: datas }, (res) => {
that.rcudata = res || [];
Cookies.set('selmodelfile', that.selected, { expires: 7, path: window.location.pathname });
Cookies.set('selmodelfile_page', that.selected_page, { expires: 7, path: window.location.pathname });
callback(res);
}, (err) => {
toastr.error('网络繁忙~')
})
},
'iDisplayLength': that.selected_page,
"columns": [{
'sTitle': '',/*.substring(6)*/
'render': function (data, type, rcu) {
try {
let STR =
`<div class="col-12 col-md-6">
<span>`+ that.ellipsis(rcu.data.MFD_ID) + `</span>
<button type="button" class= "`+ (rcu.data.Available == 1 ? 'btn btn-xs btn-success' : 'btn btn-xs btn-danger') + `">` + (rcu.data.Available == 1 ? '可 用' : '不可用') + `</button>
`+ rcu.data.UploadDateTime + `
</div>
<div class="col-md-6 col-12">
FilePath : `+ rcu.data.Directory + `\\` + rcu.data.XML_FileName + `
</div>
<div class="col-md-6 col-12">
XLM_MD5 : `+ rcu.data.XLM_MD5 + `
</div>
<div class="col-md-6 col-12">
`+ rcu.size + `
<button type="button" onclick="del_file(this,`+ rcu.data.MFD_ID+`)" class="btn btn-danger btn-xs">删除文件</button>
</div>`;
return STR;
} catch (e) {
console.log(e);
}
}
}],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).addClass('bg-white').addClass('shadow');
$(nRow).children("td").addClass('row');
return;
},
"searching": false,
"autoWidth": false,
"bDeferRender ": true,
"bLengthChange": false,
"language":
{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
} catch (e) {
console.log(e)
}
}
}
}
Vue.createApp(app).mount('#app');
$('#app').show();

View File

@@ -0,0 +1,127 @@
let ajxjsum = 0;
// 判断是否未定义 或者 null
function IsUndefined(obj) {
return typeof obj === 'undefined' || obj == null;
}
let tc = null;
function MyPost(url, data, back, badback, completeback) {
if (IsUndefined(data) || IsUndefined(data.isSwal) || data.isSwal != false) {
ajxjsum++;
tc = Swal.fire({
onClose: (elm) => {
if (!(IsUndefined(completeback))) {
completeback();
}
},
title: '',
html: !(IsUndefined(data) || IsUndefined(data.title)) ? data.title : '加载中...',
showConfirmButton: false,
allowOutsideClick: false,
showCancelButton: false,
onBeforeOpen: () => {
Swal.showLoading()
}
})
}
try {
if ((!IsUndefined(data) && !IsUndefined(data.type) && data.type == 1)) {
$.ajax({
type: "post",
url: url,
cache: false,
processData: false,
contentType: false,
data: !(IsUndefined(data) || IsUndefined(data.data))?data.data : {},
"success": function (res) {
// 已经失去登录信息 刷新界面重新登录
if (typeof (res) == 'string' && res.indexOf("<title>BLV RCU | 登录</title>") > -1) {
location.reload();
}
if (!(IsUndefined(back))) {
try {
back(res);
} catch (e) {
console.log("bad - err");
}
}
},
"error": function (xmlhttp, errorText) {
if (!(IsUndefined(badback))) {
try {
badback(errorText);
} catch (e) {
console.log("badback - err");
}
}
},
"complete": function (XMLHttpRequest, status) {
if (IsUndefined(data) || IsUndefined(data.isSwal) || data.isSwal != false) {
ajxjsum--;
}
/// 动画不突兀
if (ajxjsum == 0) {
if (ajxjsum == 0 && tc != null) {
tc.close();
}
}
},
})
return;
}
$.ajax({
"url": url,
"type": 'POST',
"data": !(IsUndefined(data) || IsUndefined(data.data)) ? data.data : {},
"success": function (res) {
// 已经失去登录信息 刷新界面重新登录
if (typeof (res) == 'string' && res.indexOf("<title>BLV RCU | 登录</title>") > -1) {
location.reload();
}
if (!(IsUndefined(back))) {
try {
back(res);
} catch (e) {
console.log(e)
}
}
},
"error": function (xmlhttp, errorText) {
if (!(IsUndefined(badback))) {
try {
badback(errorText);
} catch (e) {
}
}
},
"complete": function (XMLHttpRequest, status) {
if (IsUndefined(data) || IsUndefined(data.isSwal) || data.isSwal != false) {
ajxjsum--;
}
if (ajxjsum == 0 && tc != null) {
tc.close();
}
}
})
} catch (e) {
console.log(e)
ajxjsum--;
if (!(IsUndefined(badback))) {
badback(e);
}
} finally {
if (ajxjsum < 0) {
ajxjsum = 0;
}
}
}

View File

@@ -0,0 +1,353 @@
let that;
const app = {
data() {
return {
// 定时请求,下发进度
timer_send:null,
// 正在发送的MAC
mac_send:[],
// 防抖 输入停止后才搜索
fd: null,
// datatable 实例
datatable: null,
// 每页长度
page_length: Cookies.get('page_length') || 21,
// 数据
rcudata: [],
// 内容高度
appheight: "",
// 房号
roomnumber: "",
// 房间状态
room_type: Cookies.get('room_type') || 0,
// 下发多选
moresel: false,
// tool展开
tool: false,
// 多选的rcu
sel_rcu: [],
// 下发类型 1 固件 2 配置
send_type: Cookies.get('send_type') || 1,
// 全选
moresel_all: false,
// 房间在线 -1 全部 1 在线 0 不在线
room_online_satatus: Cookies.get('room_online_satatus') || -1,
}
},
mounted() {
that = this;
that.init();
},
methods: {
// 一些隐藏显示
moresel_(type = 1) {
switch (type) {
case 1:
that.moresel = !that.moresel;
that.show_rcu_chek();
break;
case 2:
that.tool = !that.tool;
break;
}
},
// 房间前面显示多选按钮
show_rcu_chek: function () {
if (that.moresel) {
$('.rcu_chek').show();
}
else {
$('.rcu_chek').hide();
// 房间 复选框消失 同时清空之前勾选的数据
that.sel_rcu = [];
// 全选标记取消
that.moresel_all = false;
$('.rcu_chek').prop('checked', false);//取消勾选
}
},
// 加入或者取消选择 type = 1 表示 单个下发 会直接下发
sel_rcu_chek: function (elm, type = 0) {
let data = JSON.parse($(elm).attr('data-text'));
if (type == 1) {
let data_ = new Object();
data_.type = that.send_type;
data_.MAC = new Array();
data_.MAC.push(data.MAC);
that.SendCmd(data_);
// 开始单个下发
return;
}
if ($(elm).prop('checked')) {
// 判断是否有
let ok = false;
try {
that.sel_rcu.forEach(function (val) {
if (val.MAC == data.MAC) {
ok = true;
console.log(val.MAC);
console.log(data.MAC);
throw "存在跳出...";
}
});
}
catch (err) {
console.log(err);
}
if (!ok) {
that.sel_rcu.push(data);
}
} else {
// 取消全选
that.moresel_all = false;
// 移除
that.sel_rcu = that.sel_rcu.filter(function (val) {
return val.MAC != data.MAC;
})
}
},
// 下发确认弹窗 暂时不做
Send_ok: function (data = null, back = null) {
if (back == null || data == null) {
console.log("Send_ok 参数不对.....");
return;
}
},
// 批量下发
more_send: function () {
that.SendCmd();
},
// 初始化函数
init: function () {
that.loc();
that.table_init();
},
// 请求数据
getdata: function (data, back = null) {
MyPost("/Api/GetRCU", { isSwal: that.fd == null, data }, (res) => {
if (back != null) {
back(res);
}
}, (err) => {
toastr.error('网络繁忙~')
console.log(err);
})
},
// 下发
SendCmd: function (data = null, back = null) {
// 单个下发时 会自动传入参数 data
if (data == null) {
data = new Object();
data.type = that.send_type;
data.MAC = new Array();
that.sel_rcu.forEach((x) => {
data.MAC.push(x.MAC);
$('.' + x.MAC).find('div').css('width','0');// 点击下发 进度条为0 无作用
});
}
// 记录勾选的 下发文件类型
Cookies.set('send_type', that.send_type, { expires: 7, path: window.location.pathname });
MyPost("/Api/SendCmd", { isSwal: true, title: "下发中...", data }, (res) => {
if (res == null) {
toastr.error('网络繁忙~');
return;
}
that.sel_rcu = []; // 清空记录
$('.rcu_chek').prop('checked', false);//取消勾选
that.moresel_all = false; // 全选标记取消
// 正在下发的MAC
that.mac_send = [];
for (let i = 0; i < res.length; i++) {
let str = data.MAC[i] + '下发' + (data.type == 1 ? '固件命令' :'配置命令')+ (res[i] ? '成功~' : '下发失败~');
if (res[i]) {
// 添加到正在下发的数据
that.mac_send.push(data.MAC[i]);
// 下发成功的开始显示进度条
$('.' + data.MAC[i]).show();
} else {
toastr.error(str);
}
}
},(err) => {
toastr.error('网络繁忙~')
console.log(err);
})
},
// 高度
loc: function () {
// 采用的局部 vue 所以这里 有些许 jquery
let footloc = $('.main-footer').offset().top;
$('.main-footer').hide();
this.appheight = "calc(100vh - " + $("#app").offset().top + "px)";
},
// 防抖 输入停止后才搜索
fd_: function () {
if(that.fd != null) {
clearTimeout(that.fd);
that.fd = null;
}
that.fd = setTimeout(function () { that.table_init(); },500);
},
// 数据初始化
table_init() {
try {
if (that.datatable != null) {
that.datatable.destroy();
}
$.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
that.datatable = $('#dataTable').on('draw', function (e, settings, techNote, message) {
console.log(e, settings, techNote)
console.log('An error has been reported by DataTables: ', message);
}).on('xhr.dt', function (e, settings, json, xhr) {
// 每次请求数据之后根据勾选显示每个房间 的勾选框
setTimeout(() => {
that.show_rcu_chek();
}, 10);
})
.DataTable({
"data": null,
"ordering": true,
"paging": true,
"serverSide": true,
"ajax": function (datas, callback, settings) {
datas.roomnumber = that.roomnumber;
datas.room_type = that.room_type;
datas.room_online_satatus = that.room_online_satatus;
that.getdata(datas, res => {
Cookies.set('room_online_satatus', that.room_online_satatus, { expires: 7, path: window.location.pathname });
Cookies.set('page_length', that.page_length, { expires: 7, path: window.location.pathname });
Cookies.set('room_type', that.room_type, { expires: 7, path: window.location.pathname });
callback(res)
});
},
'iDisplayLength': that.page_length,
"columns": [{
'sTitle': '',/* .substring(6) */
'render': function (data, type, rcu) {
try {
let STR =
`<div class= "` + (rcu.ONLINE_SATATUS == 0 ? 'mb' : '') + `">
<input type="checkbox" data-text='`+ JSON.stringify(rcu) +`' onchange="that.sel_rcu_chek(this)" class="rcu_chek" >
<button type="button" data-text='`+ JSON.stringify(rcu) +`' onclick="that.sel_rcu_chek(this,1)" class= " btn btn-xs btn-success ">下发</button>
<button type="button" class= "`+ (rcu.ONLINE_SATATUS == 1 ? 'btn btn-xs btn-success' : 'btn btn-xs btn-danger') + `">` + (rcu.ONLINE_SATATUS == 1 ? '在线' : '离线') + `</button>
<button type="button" class= " btn btn-xs `+
(rcu.RoomStatusID == 16 ? 'btn-info' : (rcu.RoomStatusID == 2 ? 'btn-success' : (rcu.RoomStatusID == 8 ? 'btn-warning' : (rcu.RoomStatusID == 4 ? 'btn-secondary' : 'btn-danger'))))
+ `">` +
(rcu.RoomStatusID == 16 ? '空房' : (rcu.RoomStatusID == 2 ? '出租中' : (rcu.RoomStatusID == 8 ? '退房中' : (rcu.RoomStatusID == 4 ? '待租' : '未知'))))
+ `</button> <lable class="">` + (("" + rcu.COMM_TIMEMARK) == 'null' ? " - " : rcu.COMM_TIMEMARK) + ` </lable>
` + rcu.MAC +`
`+ rcu.ROOM_NUMBER + `
</div>
<div title='已完成0%' class="`+ rcu.MAC +` progress mt-1 mb-1" style="display:none;">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
</div>
<!-- @* style的效果是父元素绝对居中 *@ -->
<span class=" text-white" style='position:absolute;line-height:16px;width: 200px;text-align: center;left: calc(50% - 100px);'>完成0%</span></div>`;
return STR;
} catch (e) {
console.log(e);
}
}
}],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).addClass('p-1').addClass('m-0 row col-md-4 col-12');
$(nRow).children("td").addClass('col-12 p-2 bg-white');
// .addClass('shadow');
return;
},
"searching": false,
"autoWidth": false,
"bDeferRender ": true,
"bLengthChange": false,
"language":
{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
} catch (e) {
console.log(e)
}
},
//全选按钮文字 点击事件
moresel_all_: function () {
// 没有开启多选无法点击
if (!that.moresel) { return; }
that.moresel_all = !that.moresel_all;
that.moresel_all_sel();
},
// 取消全选
moresel_all_sel: function () {
// 没有开启多选无法点击
if (!that.moresel) { return; }
$('.rcu_chek').prop('checked',that.moresel_all);//房间前面的按钮全勾选、取消勾选
$('.rcu_chek').change();//调用事件添加、移除到选定的数组中
},
// 请求进度
send_schedule: function () {
let data = new Object();
data.mac = that.mac_send;
data.type = that.send_type;
MyPost("/Api/send_schedule", { isSwal: false, data }, (res) =>
{
if (res == null) {
toastr.error('网络繁忙~');
return;
}
that.mac_send = that.mac_send.filter(key => {
if (res[key] != null) {
$('.' + key).find('div').css('width', res[key]);
$('.' + key).parent().find('span').html(res[key]);
}
return res[key] != "100.00%";
});
}, (err) => {
toastr.error('网络繁忙~')
console.log(err);
})
}
},
watch: {
mac_send: function (val) {
that.mac_send = val;
if (that.timer_send != null) {
clearInterval(that.timer_send);
}
if (that.mac_send.length>0) {
that.timer_send = setInterval(() => {
// 定时请求 发送进度接口
that.send_schedule();
}, 500);
}
},
}
}
Vue.createApp(app).mount('#app');
$('#app').show();

View File

@@ -0,0 +1,604 @@
let that;
let datatable = null;
const app = {
data() {
return {
// 搜索结果
sreach: [],
// 搜索的酒店id 用于改变下拉框选择
sreach_hotel: 0,
// 搜索的房间id 用于改变下拉框选择
sreach_room: 0,
// 搜索的酒店id
sreach: [],
// 类型筛选选择值
selecttype: [{ val: "0", text: "全部类型" }, { val: "1", text: "Launcher信息" }, { val: "2", text: "系统信息" }, { val: "3", text: "设备通讯" }, { val: "4", text: "通讯状态" }, { val: "5", text: "定期保存" }, { val: "6", text: "网络处理" }, { val: "7", text: "事件处理" }],
// 类型筛选选择值
type: Cookies.get('EVENTLOGGING_type') || 0,
// 收起
sq: false,
// 第一次加载
isfirst: true,
// 酒店组值
selected_hotel_group: Cookies.get('EVENTLOGGING_hotelgroup') || 0,
// 酒店组
selecthotelgroup: [{ HotelGroupsId: "0", HotelGroupsName: "全部酒店组" }],
// 事件id
mac: "",
// 房间当前选择
selected_room: Cookies.get('EVENTLOGGING_room') || 0,
// 房间选择
selectroom: [{ val: "0", text: "全部房间", mac: "" }],
// 起始时间
startDate: Cookies.get('EVENTLOGGING_startDate') || moment().startOf("days").format('YYYY-MM-DD HH:mm:ss'),
// 结束时间
endDate: Cookies.get('EVENTLOGGING_endDate') || moment().format('YYYY-MM-DD HH:mm:ss'),
// 表格
datatable: null,
// 天数快捷选择值
selected_day: Cookies.get('EVENTLOGGING_day') || 1,
// 天数快捷选择
selectday: [{ val: "1", text: "今天" }, { val: "2", text: "昨天" }, { val: "3", text: "最近7天" }, { val: "4", text: "最近30天" }, { val: "-1", text: "自定义" }],
// 每页数量选择值
selected_page: Cookies.get('EVENTLOGGING_page') || 10,
// 每页数量
selectpage: [{ val: "10", text: "每页10条" }, { val: "20", text: "每页20条" }, { val: "50", text: "每页30条" }, { val: "100", text: "每页40条" }],
// 酒店选择
selecthotel: [{ HotelId: "0", HotelName: "全部酒店" }],
// 酒店选择值
selected_hotel: Cookies.get('EVENTLOGGING_hotel') || 0,
// 高度
appheight: "",
data_: {}
,
}
},
mounted() {
that = this;
that.init();
},
methods: {
// 获取参数
getUrlParam: function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
},
// 弹窗酒店 点击酒店隐藏房间列表
// 逻辑思维 我们给每个酒店的房间 添加样式类为 hotelid + 酒店id 形成独特的样式类
// 点击酒店名称时 会把对应的 独特的样式类 传过来 这里使用 toggle() 就可以做到缩放自如
sqjd(class_) {
// 获取他下面有几个相关的mac
$("." + class_).toggle()
},
// 搜索结果点击房间 mac显示在搜索结果弹窗顶部 如果是val = 1 则点击了确定按钮 表示选定了mac 执行最后的搜索
selmac_(mac, hotel, room, val = 0) {
hotel = Number.parseInt(hotel + "".replace(/\s*/g, ""))
room = Number.parseInt(room + "".replace(/\s*/g, ""))
if (val == 1) {
if (that.sreach_hotel == -1) {
table_init();
return;
}
that.mac = that.mac_;
// 改变选择 酒店组 暂时 不反推 反推需要写接口
that.selected_hotel = that.sreach_hotel;
that.selected_room = that.sreach_room;
that.selected_hotel_group = that.sreach_room = that.sreach_room = 0;
that.selecthotel_init();
return;
}
that.sreach_room = room;
that.mac_ = mac;
that.sreach_hotel = hotel;
$('#selmac_').val(mac);
},
// 点击文件显示文件名下的信息
logfilename: function (nRow, aData,hide = -1) {
let start = 0;
if (hide == -1 && $(nRow).find('.SHOW').length == 1) {
$(nRow).find('.SHOW').last().toggle();
return;
};
console.log(that.data_[aData.logfilename])
if (typeof (that.data_[aData.logfilename]) != 'undefined' && that.data_[aData.logfilename].length > 0) {
start = that.data_[aData.logfilename].length;
} else {
that.data_[aData.logfilename] = [];
}
MyPost("/Server/LOGFILENAME", { data: { type: that.type, start, name: aData.logfilename } }, res => {
if (res == null) {
toastr.error('酒店信息获取失败~');
return;
}
that.data_[aData.logfilename] = that.data_[aData.logfilename].concat(res);
try {
let div = $(nRow).find('.SHOW').length > 0 ? $(nRow).find('.SHOW').last().html() : `<div style=" overflow: scroll;max-height:300px" class="col-12 row SHOW"></div>`;
let sqt = "";
for (let _data of res) {
sqt += `<div class="bg-info col-12">` + `sn:` + _data['log_sn']+`</div>`;
for (let j in _data) {
if (j.indexOf('__tag__:__') >= 0) { continue; }
if (j == 'log_type') {
sqt += `<div class="col-12 col-md-4">` + j + `:` + that.typetext(_data[j]) + `</div>`;
continue;
}
sqt += `<div class="col-12 col-md-4">` + j + `:` + _data[j]+`</div>`;
}
}
let s = Number.parseInt(aData.sum) > Number.parseInt(that.data_[aData.logfilename].length);
console.log(s)
sqt += `<div onclick='that.logfilename("` + (s ? nRow + "," + aData + ",-1" : "") + `")' class=" bg-` + (s ? "info" : "warning") + ` text-center col-12">` + (s ? "加载更多..." : "已加载全部数据") + `</div>`;
div = div.substring(0, div.length - 6);
div += sqt + "</div>";
$(nRow).find('.SHOW').remove();
$(nRow).find('td').append(div);
} catch (e) {
console.log(e)
}
});
},
// 搜索mac 显示弹窗
selmac() {
MyPost("/API/FindROOMINFO", { isSwal: true, title: "搜索中...", data: { mac: that.mac_, type: 1 } }, (res) => {
if (res == null || res == 'null' || res.length <= 0) {
toastr.error('未能查询到数据~')
return;
}
that.sreach = res;
// 清空之的搜索
// that.mac_ = "";
let data = `<div class="input-group mb-1">
<div class="input-group-prepend">
<span class="input-group-text">选择的MAC</span>
</div>
<input id ='selmac_' type="text" disabled value="`+ that.mac + `" class="form-control">
</div>
<div style="max-height: 50vh;overflow: scroll;" class='text-left row'>{elm}</div>`;
let elm = ``;
for (let i of res) {
elm += `<div onclick="that.sqjd('hotelid` + i[0].hotelid + `')" class='col-12 text-info'>` + i[0].hotelname + `(` + i.length + `)</div>`;
for (let j of i) {
elm += `<div onclick="that.selmac_('` + j.mac + `','` + j.hotelid + `','` + j.id + `')" class='col-6 hotelid` + i[0].hotelid + `'>` + j.room_number + `</div>`;
elm += `<div onclick="that.selmac_('` + j.mac + `','` + j.hotelid + `','` + j.id + `')" class='col-6 hotelid` + i[0].hotelid + `'>` + j.mac + `</div>`;
}
}
data = data.replace("{elm}", elm);
setTimeout(function () {
let sw = Swal.fire({
title: '',
html: data,
confirmButtonText: '确定',
cancelButtonText: '取消',
showCancelButton: true,
reverseButtons: true
}).then((result) => {
if (result.value) {
// 点击了确定按钮
that.selmac_("", "", "", 1);
}
})
}, 500);
});
},
// 数据弹窗
loc_(el) {
let data = JSON.parse($(el).attr('data'));
let STR =
`<div class="col-12 row text-info card-body shadow-sm" style="padding:0.5rem; background-color: rgb(255, 250, 240);">
{{elm}}
</div>
`;
let streml = "";
for (let i = 1; i < 11; i++) {
let istr = "type_param_" + i;
let istr_ = "p" + i;
streml += `<div class="col-12 text-left">
`+ istr_ + ` : <span class='text-gray'>` + data[istr] + `</span></div>`;
}
STR = STR.replace("{{elm}}", streml);
let sw = Swal.fire({
title: '',
html: STR,
confirmButtonText: '确定',
showCancelButton: false,
})
},
// 收起按钮 页面顶部点击收起
sq_change() {
that.sq = !that.sq;
this.loc();
},
// 初始化
init() {
that.mac = that.getUrlParam('mac');
this.loc();
that.table_init();
//this.selectgroup_init();
// 带有时间选择的日期范围选择器
$('#reservationtime').daterangepicker({
startDate: that.startDate,
endDate: that.endDate,
timePicker: true,
maxDate: new Date(),
minDate: "2022-3-25 01:01:01",
timePicker24Hour: true,
timePickerSeconds: true,
locale: {
cancelLabel: 'Clear',
format: 'YYYY-MM-DD HH:mm:ss'
}
}).on('apply.daterangepicker', function (ev, picker) {
that.startDate = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
that.endDate = picker.endDate.format('YYYY-MM-DD HH:mm:ss');
that.selected_day = -1;
}).on('cancel.daterangepicker', function (ev, picker) {
// 这个 this 指向的是时间输入框
$(this).val('');
that.startDate = null;
that.endDate = null;
that.selected_day = -1;
});
},
// 酒店组改变事件 更改酒店列表信息
selectgroup_init() {
try {
if (that.isfirst) {
MyPost("/Api/HOTELINFO", { isSwal: that.isfirst }, res => {
if (res == null) {
toastr.error('酒店信息获取失败~');
return;
}
that.selecthotelgroup = that.selecthotelgroup.concat(res || []);
let oldok = false;
for (let i of that.selecthotelgroup) {
if (i.HotelGroupsId == that.selected_hotel_group) {
oldok = true;
break;
}
}
if (!oldok) {
// 历史选择的酒店组不存在
that.selected_hotel_group = 0;
that.selected_hotel = 0;
that.selected_room = 0;
}
// 初始化 酒店列表
that.selecthotel_init();
});
} else {
that.selecthotel_init();
}
} catch (e) {
console.log("酒店组选择报错." + e);
}
},
// 获取酒店下拉列表信息
selecthotel_init() {
that.selected_hotel_group = Number.parseInt(that.selected_hotel_group + "".replace(/\s*/g, ""));
// 如果历史酒店组的id 未能在数据找到 就让选择全部酒店组 显示所有酒店
let alldata = [{ HotelId: "0", HotelName: "全部酒店" }];
for (let i of that.selecthotelgroup) {
if (i.Hotels != null) {
alldata = alldata.concat(i.Hotels);
}
if (i.HotelGroupsId == that.selected_hotel_group && that.selected_hotel_group > 0) {
that.selecthotel = [{ HotelId: "0", HotelName: "全部酒店" }];
that.selecthotel = that.selecthotel.concat(i.Hotels || []);
let isold = false;
// 如果是第一次 那就 判断 历史选择的酒店 是否有存在 没有的话就 重置选择
if (that.isfirst && that.selected_hotel != 0) {
for (let j of that.selecthotel) {
if (j.HotelId == that.selected_hotel) {
isold = true;
break;
}
}
}
if (!isold) {
that.selected_hotel = 0;
that.selected_room = 0;
}
that.selectroom_init();
return;
}
}
// 如果没有找到 就 重置选择
that.selected_hotel_group = 0;// that.selected_hotel_group > 0 正常操作 是不存在找不到的 酒店组时已经判断过一次了。
that.selected_hotel = 0;
that.selected_room = 0;
that.selecthotel = alldata;
that.selectroom_init();
},
// 获取房间下拉列表信息
selectroom_init() {
that.selectroom = [{ val: "0", text: "全部房间", mac: "" }];
MyPost("/Api/ROOMINFO", { isSwal: that.isfirst, data: { HotelId: that.selected_hotel, GroupId: that.selected_hotel_group } }, res => {
that.selectroom = that.selectroom.concat(res || []);
let oldok = false;
if (that.isfirst && that.selected_room != 0) {
for (let i of that.selectroom) {
if (i.val == that.selected_room) {
oldok = true;
break;
}
}
}
if (!oldok) {
// 历史选择的房间不存在 或者 不是第一次加载
that.selected_room = 0;
}
if (that.selected_room > 0 && !that.isfirst) {
that.table_init();
}
});
},
// 房间选择事件信息
room_change() {
let mac = that.selectroom[that.selected_room].mac + "".replace(/\s*/g, "");
if (mac.length <= 1) {
toastr.error('当前房间没有绑定mac~')
return;
}
that.mac = mac;
that.table_init();
},
// 时间快捷选择
selected_day_change: function () {
that.selected_day = Number.parseInt(that.selected_day + "".replace(/\s*/g, ""));
switch (that.selected_day) {
case 1:
that.startDate = moment().startOf("days").format('YYYY-MM-DD HH:mm:ss')
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss')
break;
case 2:
that.startDate = moment().subtract(1, 'days').startOf("days").format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().subtract(1, 'days').endOf("days").format('YYYY-MM-DD HH:mm:ss');
break;
case 3:
that.startDate = moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
break;
case 4:
that.startDate = moment().subtract(29, 'days').format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
break;
}
// that.selected_day 是string 类型 他会自己转成 number 进行比较
if (that.selected_day > -1) {
$('#reservationtime').val(that.startDate + ' - ' + that.endDate);
that.table_init();
}
},
// 计算距离
loc() {
setTimeout(() => {
$('.main-footer').hide();
that.appheight = "calc(100vh - " + $('.table-responsive').offset().top + "px)";
}, 10);
},
// 点击显示
showtype(elm, data) {
let STR =
`
<div data='`+ JSON.stringify(data) + `' onclick="javascript:event.stopPropagation();event.preventDefault();that.loc_(this)" class="col-12 row text-info card-body shadow-sm" style="padding:0.5rem; background-color: rgb(255, 250, 240);">
{{elm}}
</div>
`;
let streml = "";
//streml += `<div class="col-12 col-md-6">create: <span class='text-gray'>` + data['createdatetime'] + `</span></div>`;
streml += `<div class="col-12">log_datetime: <span class='text-gray'>` + data['log_datetime'] + `</span></div>`;
for (let i = 3; i < 11; i++) {
let istr = "type_param_" + i;
let istr_ = "p" + i;
streml += `<div class="col-md-4 col-6">
`+ istr_ + ` : <span class='text-gray'>` + data[istr] + `</span></div>`;
}
streml += `<div class="col-12">file: <span class='text-gray'>` + data['logfilename'] + `</span></div>`;
STR = STR.replace("{{elm}}", streml);
if (($(elm).find(".card-body").length != 0)) {
$($(elm).find(".card-body")).toggle();
} else {
$(elm).find("td").append(STR);
}
},
// 信息类型判断
typetext(val_num, type = 0) {
val_num = Number.parseInt(val_num + "".replace(/\s*/g, ""));
switch (val_num) {
case 1:
val_num = "Launcher信息";
if (type == 1) {
val_num = "#00868B"
}
break;
case 2:
val_num = "系统信息";
if (type == 1) {
val_num = "#43CD80"
}
break;
case 3:
val_num = "设备通讯";
if (type == 1) {
val_num = "#698B22"
}
break;
case 4:
val_num = "通讯状态";
if (type == 1) {
val_num = "#8B814C"
}
break;
case 5:
val_num = "定期保存";
if (type == 1) {
val_num = "#8B658B"
}
break;
case 6:
val_num = "网络处理";
if (type == 1) {
val_num = "#CD6839"
}
break;
case 7:
val_num = "事件处理";
if (type == 1) {
val_num = "#D02090"
}
break;
default:
val_num = "其他处理";
if (type == 1) {
val_num = "#8A2BE2"
}
break;
}
return val_num;
},
// 省略
ellipsis(value) {
if (("" + value).length > 8) {
value = value.slice(0, 8) + "..."
}
return value;
},
// 表格初始化
table_init() {
try {
that.mac = that.mac + "".replace(/\s*/g, "");
if (that.mac.length <= 0) {
toastr.error('未选定mac~')
return;
}
if (that.isfirst) {
that.isfirst = false;
}
if (datatable != null) {
datatable.destroy();
}
$.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
datatable = $('#dataTable').on('error.dt', function (e, settings, techNote, message) {
console.log(e, settings, techNote)
console.log('An error has been reported by DataTables: ', message);
}).DataTable({
"data": null,
"ordering": true,
"paging": true,
"serverSide": true,
"ajax": function (datas, callback, settings) {
datas.hotelid = that.selected_hotel;
datas.mac = that.mac;
datas.roomid = that.selected_room;
datas.startDate = that.startDate;
datas.endDate = that.endDate;
datas.type = that.type;
MyPost("/Server/RcuDataLog_", { isSwal: true, data: datas }, (res) => {
that.rcudata = res || [];
// 写入数据缓存
Cookies.set('EVENTLOGGING_hotelgroup', that.selected_hotel_group, { expires: 7, path: window.location.pathname });
if (that.endDate != null) {
Cookies.set('EVENTLOGGING_endDate', that.endDate, { expires: 7, path: window.location.pathname });
}
if (that.startDate != null) {
Cookies.set('EVENTLOGGING_startDate', that.startDate, { expires: 7, path: window.location.pathname });
}
Cookies.set('EVENTLOGGING_day', that.selected_day, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_hotel', that.selected_hotel, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_page', that.selected_page, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_mac', that.mac, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_room', that.selected_room, { expires: 7, path: window.location.pathname });
if (that.isfirst) { that.isfirst = false; }
callback(res);
}, (err) => {
toastr.error('网络繁忙~')
})
},
'iDisplayLength': that.selected_page,
"columns": [{
'sTitle': '',/*.substring(6)*/
'render': function (data, type, rcu) {
try {
let STR =
`<div class="text-success col-10 col-md-4">
<button style="display:none;" type="button" class='btn btn-xs' style="COLOR:#FFF !important; background: `+ that.typetext(rcu.log_type, 1) + ` !important;border: none; ">` + that.typetext(rcu.log_type) + `</button>
`+ rcu.logfilename + `
</div>
<div class="col-md-4 col-2 text-info">
`+ rcu.sum + `
<span style="display:none;" class="text-danger">
(`+ rcu.log_timespan + `) SN:</span>
</div>
<div style="display:none;" class="col-md-4 text-danger"></div>
<div style="display:none;" class="col-md-4 col-6">
`+ rcu.createdatetime + `
</div>
<div style="display:none;" class="col-md-4 col-6">
`+ rcu.type_param_2 + `
</div>
`;
return STR;
} catch (e) {
console.log(e);
}
}
}],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).addClass('bg-white').addClass('shadow')
$(nRow).children("td").addClass('row');
$(nRow).children("td").click(
function () {
//that.showtype(nRow, aData);
that.logfilename(nRow, aData);
}
)
return;
},
"searching": false,
"autoWidth": false,
"bDeferRender ": true,
"bLengthChange": false,
"language":
{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
} catch (e) {
console.log(e)
}
}
}
}
Vue.createApp(app).mount('#app');
$('#app').show();

View File

@@ -0,0 +1,453 @@

let that;
let datatable = null;
const app = {
data() {
return {
// 类型筛选选择值
selecttype: [{ val: "0", text: "全部类型" }, { val: "1", text: "Launcher信息" }, { val: "2", text: "系统信息" }, { val: "3", text: "设备通讯" }, { val: "4", text: "通讯状态" }, { val: "5", text: "定期保存" }, { val: "6", text: "网络处理" }, { val: "7", text: "事件处理" }],
// 类型筛选选择值
type: Cookies.get('EVENTLOGGING_type') || 0,
// 收起
sq: false,
// 第一次加载
isfirst: true,
// 酒店组值
selected_hotel_group: Cookies.get('EVENTLOGGING_hotelgroup') || 0,
// 酒店组
selecthotelgroup: [{ HotelGroupsId: "0", HotelGroupsName: "全部酒店组" }],
// 事件id
mac: Cookies.get('EVENTLOGGING_mac') || "",
// 房间当前选择
selected_room: Cookies.get('EVENTLOGGING_room') || 0,
// 房间选择
selectroom: [{ val: "0", text: "全部房间" }],
// 起始时间
startDate: Cookies.get('EVENTLOGGING_startDate') || moment().startOf("days").format('YYYY-MM-DD HH:mm:ss'),
// 结束时间
endDate: Cookies.get('EVENTLOGGING_endDate') || moment().format('YYYY-MM-DD HH:mm:ss'),
// 表格
datatable: null,
// 天数快捷选择值
selected_day: Cookies.get('EVENTLOGGING_day') || 1,
// 天数快捷选择
selectday: [{ val: "1", text: "今天" }, { val: "2", text: "昨天" }, { val: "3", text: "最近7天" }, { val: "4", text: "最近30天" }, { val: "-1", text: "自定义" }],
// 每页数量选择值
selected_page: Cookies.get('EVENTLOGGING_page') || 10,
// 每页数量
selectpage: [{ val: "10", text: "每页10条" }, { val: "20", text: "每页20条" }, { val: "50", text: "每页30条" }, { val: "100", text: "每页40条" }],
// 酒店选择
selecthotel: [{ HotelId: "0", HotelName: "全部酒店" }],
// 酒店选择值
selected_hotel: Cookies.get('EVENTLOGGING_hotel') || 0,
// 高度
appheight: "",
}
},
mounted() {
that = this;
that.init();
},
methods: {
// 数据弹窗
loc_(el) {
let data = JSON.parse($(el).attr('data'));
let STR =
`<div class="col-12 row text-info card-body shadow-sm" style="padding:0.5rem; background-color: rgb(255, 250, 240);">
{{elm}}
</div>
`;
let streml ="";
for (let i = 1; i < 11; i++) {
let istr = "type_param_" + i;
let istr_ = "p" + i;
streml += `<div class="col-12 text-left">
`+ istr_ + ` : <span class='text-gray'>` + data[istr] + `</span></div>`;
}
STR = STR.replace("{{elm}}", streml);
let sw = Swal.fire({
title: '',
html: STR,
confirmButtonText: '确定',
showCancelButton: false,
})
},
// 收起按钮
sq_change() {
that.sq = !that.sq;
this.loc();
},
// 初始化
init() {
this.loc();
this.selectgroup_init();
// 带有时间选择的日期范围选择器
$('#reservationtime').daterangepicker({
startDate: that.startDate,
endDate: that.endDate,
timePicker: true,
maxDate: new Date(),
minDate: "2022-3-25 01:01:01",
timePicker24Hour: true,
timePickerSeconds: true,
locale: {
cancelLabel: 'Clear',
format: 'YYYY-MM-DD HH:mm:ss'
}
}).on('apply.daterangepicker', function (ev, picker) {
that.startDate = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
that.endDate = picker.endDate.format('YYYY-MM-DD HH:mm:ss');
that.selected_day = -1;
}).on('cancel.daterangepicker', function (ev, picker) {
// 这个 this 指向的是时间输入框
$(this).val('');
that.startDate = null;
that.endDate = null;
that.selected_day = -1;
});
},
// 酒店组改变事件 更改酒店列表信息
selectgroup_init() {
try {
if (that.isfirst) {
MyPost("/Api/HOTELINFO", { isSwal: that.isfirst }, res => {
if (res == null) {
toastr.error('酒店信息获取失败~');
return;
}
that.selecthotelgroup = that.selecthotelgroup.concat(res || []);
let oldok = false;
for (let i of that.selecthotelgroup) {
if (i.HotelGroupsId == that.selected_hotel_group) {
oldok = true;
break;
}
}
if (!oldok) {
// 历史选择的酒店组不存在
that.selected_hotel_group = 0;
that.selected_hotel = 0;
that.selected_room = 0;
}
// 初始化 酒店列表
that.selecthotel_init();
});
} else {
that.selecthotel_init();
}
} catch (e) {
console.log("酒店组选择报错." + e);
}
},
// 获取酒店下拉列表信息
selecthotel_init() {
that.selected_hotel_group = Number.parseInt(that.selected_hotel_group + "".replace(/\s*/g, ""));
// 如果历史酒店组的id 未能在数据找到 就让选择全部酒店组 显示所有酒店
let alldata = [{ HotelId: "0", HotelName: "全部酒店" }];
for (let i of that.selecthotelgroup) {
if (i.Hotels != null) {
alldata = alldata.concat(i.Hotels);
}
if (i.HotelGroupsId == that.selected_hotel_group && that.selected_hotel_group > 0) {
that.selecthotel = [{ HotelId: "0", HotelName: "全部酒店" }];
that.selecthotel = that.selecthotel.concat(i.Hotels || []);
let isold = false;
// 如果是第一次 那就 判断 历史选择的酒店 是否有存在 没有的话就 重置选择
if (that.isfirst && that.selected_hotel != 0) {
for (let j of that.selecthotel) {
if (j.HotelId == that.selected_hotel) {
isold = true;
break;
}
}
}
if (!isold) {
that.selected_hotel = 0;
that.selected_room = 0;
}
that.selectroom_init();
return;
}
}
// 如果没有找到 就 重置选择
that.selected_hotel_group = 0;// that.selected_hotel_group > 0 正常操作 是不存在找不到的 酒店组时已经判断过一次了。
that.selected_hotel = 0;
that.selected_room = 0;
that.selecthotel = alldata;
that.selectroom_init();
},
// 获取房间下拉列表信息
selectroom_init() {
that.selectroom = [{ val: "0", text: "全部房间" }];
MyPost("/Api/ROOMINFO", { isSwal: that.isfirst, data: { HotelId: that.selected_hotel, GroupId: that.selected_hotel_group } }, res => {
that.selectroom = that.selectroom.concat(res || []);
let oldok = false;
if (that.isfirst && that.selected_room != 0) {
for (let i of that.selectroom) {
if (i.val == that.selected_room) {
oldok = true;
break;
}
}
}
if (!oldok) {
// 历史选择的房间不存在 或者 不是第一次加载
that.selected_room = 0;
}
//if (that.selected_room == 0 && that.selected_hotel == 0 && !that.isfirst) {
// return;
//}
that.table_init();
});
},
// 时间快捷选择
selected_day_change: function () {
that.selected_day = Number.parseInt(that.selected_day + "".replace(/\s*/g, ""));
switch (that.selected_day) {
case 1:
that.startDate = moment().startOf("days").format('YYYY-MM-DD HH:mm:ss')
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss')
break;
case 2:
that.startDate = moment().subtract(1, 'days').startOf("days").format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().subtract(1, 'days').endOf("days").format('YYYY-MM-DD HH:mm:ss');
break;
case 3:
that.startDate = moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
break;
case 4:
that.startDate = moment().subtract(29, 'days').format('YYYY-MM-DD HH:mm:ss');
that.endDate = moment().format('YYYY-MM-DD HH:mm:ss');
break;
}
// that.selected_day 是string 类型 他会自己转成 number 进行比较
if (that.selected_day > -1) {
$('#reservationtime').val(that.startDate + ' - ' + that.endDate);
that.table_init();
}
},
// 计算距离
loc() {
setTimeout(() => {
$('.main-footer').hide();
that.appheight = "calc(100vh - " + $('.table-responsive').offset().top + "px)";
}, 10);
},
// 点击显示
showtype(elm, data) {
let STR =
`
<div data='`+ JSON.stringify(data) +`' onclick="javascript:event.stopPropagation();event.preventDefault();that.loc_(this)" class="col-12 row text-info card-body shadow-sm" style="padding:0.5rem; background-color: rgb(255, 250, 240);">
{{elm}}
</div>
`;
let streml = "";
//streml += `<div class="col-12 col-md-6">create: <span class='text-gray'>` + data['createdatetime'] + `</span></div>`;
streml += `<div class="col-12">log_datetime: <span class='text-gray'>` + data['log_datetime'] + `</span></div>`;
for (let i = 3; i < 11; i++) {
let istr = "type_param_" + i;
let istr_ = "p" + i;
streml += `<div class="col-md-4 col-6">
`+ istr_ + ` : <span class='text-gray'>` + that.ellipsis(data[istr]) + `</span></div>`;
}
streml += `<div class="col-12">file: <span class='text-gray'>` + data['logfilename'] + `</span></div>`;
STR = STR.replace("{{elm}}", streml);
if (($(elm).find(".card-body").length != 0)) {
$($(elm).find(".card-body")).toggle();
} else {
$(elm).find("td").append(STR);
}
},
// 信息类型判断
typetext(val_num,type = 0) {
val_num = Number.parseInt(val_num + "".replace(/\s*/g, ""));
switch (val_num) {
case 1:
val_num = "Launcher信息";
if (type == 1) {
val_num = "#00868B"
}
break;
case 2:
val_num = "系统信息";
if (type == 1) {
val_num = "#43CD80"
}
break;
case 3:
val_num = "设备通讯";
if (type == 1) {
val_num = "#698B22"
}
break;
case 4:
val_num = "通讯状态";
if (type == 1) {
val_num = "#8B814C"
}
break;
case 5:
val_num = "定期保存";
if (type == 1) {
val_num = "#8B658B"
}
break;
case 6:
val_num = "网络处理";
if (type == 1) {
val_num = "#CD6839"
}
break;
case 7:
val_num = "事件处理";
if (type == 1) {
val_num = "#D02090"
}
break;
default:
val_num = "其他处理";
if (type == 1) {
val_num = "#8A2BE2"
}
break;
}
return val_num;
},
// 省略
ellipsis(value) {
if ((""+value).length > 8) {
value = value.slice(0,8)+"..."
}
return value;
},
// 表格初始化
table_init() {
try {
if (that.isfirst) {
that.isfirst = false;
}
if (datatable != null) {
datatable.destroy();
}
$.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
datatable = $('#dataTable').on('error.dt', function (e, settings, techNote, message) {
console.log(e, settings, techNote)
console.log('An error has been reported by DataTables: ', message);
}).DataTable({
"data": null,
"ordering": true,
"paging": true,
"serverSide": true,
"ajax": function (datas, callback, settings) {
datas.hotelid = that.selected_hotel;
datas.mac = that.mac;
datas.roomid = that.selected_room;
datas.startDate = that.startDate;
datas.endDate = that.endDate;
datas.type = that.type;
MyPost("/Server/RcuDataLog_", { isSwal: true, data: datas }, (res) => {
that.rcudata = res || [];
// 写入数据缓存
Cookies.set('EVENTLOGGING_hotelgroup', that.selected_hotel_group, { expires: 7, path: window.location.pathname });
if (that.endDate != null) {
Cookies.set('EVENTLOGGING_endDate', that.endDate, { expires: 7, path: window.location.pathname });
}
if (that.startDate != null) {
Cookies.set('EVENTLOGGING_startDate', that.startDate, { expires: 7, path: window.location.pathname });
}
Cookies.set('EVENTLOGGING_day', that.selected_day, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_hotel', that.selected_hotel, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_page', that.selected_page, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_mac', that.mac, { expires: 7, path: window.location.pathname });
Cookies.set('EVENTLOGGING_room', that.selected_room, { expires: 7, path: window.location.pathname });
if (that.isfirst) { that.isfirst = false; }
callback(res);
}, (err) => {
toastr.error('网络繁忙~')
})
},
'iDisplayLength': that.selected_page,
"columns": [{
'sTitle': '',/*.substring(6)*/
'render': function (data, type, rcu) {
try {
let STR =
`<div class="text-success col-6 col-md-4">
<button type="button" class='btn btn-xs' style="COLOR:#FFF !important; background: `+ that.typetext(rcu.log_type,1) +` !important;border: none; ">` + that.typetext(rcu.log_type) + `</button>
`+ rcu.mac + `
</div>
<div class="col-md-4 col-6 text-info">
SN:`+ rcu.log_sn + `
<span class="text-danger">
(`+ rcu.log_timespan + `)</span>
</div>
<div class="col-md-4 text-danger"></div>
<div class="col-md-4 col-6">
`+ rcu.createdatetime + `
</div>
<div class="col-md-4 col-6">
`+ rcu.type_param_2 + `
</div>
`;
return STR;
} catch (e) {
console.log(e);
}
}
}],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).addClass('bg-white').addClass('shadow')
$(nRow).children("td").addClass('row');
$(nRow).children("td").click(
function () {
that.showtype(nRow, aData);
}
)
return;
},
"searching": false,
"autoWidth": false,
"bDeferRender ": true,
"bLengthChange": false,
"language":
{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
} catch (e) {
console.log(e)
}
}
}
}
Vue.createApp(app).mount('#app');
$('#app').show();

View 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);

View File

@@ -0,0 +1,252 @@
// 刷新数据
function switchhotel() {
try {
Gethotel();
} catch (e) {
console.log(e)
}
}
// 刷新数据
function Gethotel() {
MyPost("/Home/Privacy", { title: "刷新中..." }, function (res) {
if (res.IsSuccess) {
toastr.success(res.Result)
}
else {
try {
toastr.error(res.Result)
} catch (e) {
console.log(e)
}
}
}, function (errorText) {
toastr.error("网络繁忙~")
});
}
let SelHotelSwal = null;
//选择酒店
function SelHotel(type, group = 0) {
if (type == 0) {
toastr.error("没有酒店权限~");
return;
}
getgroupstr(0)
}
function getgroupstr(group, search = "") {
let selhotel = 0;
let str = JSON.parse(Cookies.get("historyItems") || "[]") ;
if (search.length > 0) {
// 如果存在就移除之前的 然后添加到末尾
str = str.filter(function (x){
return x != search;
})
str.unshift(search);
if (str.length > 5) {
str.length = 5;
}
Cookies.set('historyItems', JSON.stringify(str), { expires: 7, path: window.location.pathname });
}
MyPost('/Api/GetGroup',
{
isSwal: false,
data: { group: Number(group), search}
}, function (res) {
if (SelHotelSwal == null) {
SelHotelSwal =
Swal.fire({
title: '',
html: res,
customClass: 'swal-wide',
onClose: (res) => { SelHotelSwal = null;},
showConfirmButton: false,
allowOutsideClick: true,
showCancelButton: false,
preConfirm: function (x) {
// 选择了酒店
let sel = $("#ifm").contents().find("#hidden").val();
if (sel == "") {
toastr.error("未选择任何酒店信息~")
} else {
MyPost("/Api/Sel", {
title: "切换中...",
data: { id: sel }
}, function (res) {
if (res.IsSuccess) {
location.reload();
//location.href = "/";
}
else {
try {
toastr.error(res.Result || "切换失败~")
} catch (e) {
console.log(e)
}
}
}, function (errorText) {
toastr.error("网络繁忙~")
});
}
}
})
} else {
$('.swal-wide').html(res);
}
// 添加搜素历史
for (var i of str ){
$(".history_list").append(`<li>` + i + `</li>`)
}
// 点击历史 的搜素时候赋值并收起历史
$(".history_list li").click((e) => {
$('#searchtext').val($(e.currentTarget).text())
$('.history_list').mouseout();
});
// 用于判断是否 在触摸历史记录区域 在触摸时候不会隐藏
// 主要原因是因为点击历史区域时是先触发input的fouout 事件 然后区域隐藏 然后就是不会触发点击事件了
let ismovehos = false;
$('#searchtext').focusout(
(e) => {
if (!ismovehos) {
$('.history_list').hide();
}
}
);
$('#searchtext').focus(
(e) => {
$('.history_list').show();
}
);
$('.history_list').mouseout(() => {
ismovehos = false;
if (!$('#searchtext').is(':focus')) { $('.history_list').hide(); }
})
$('.history_list').mousemove(() => {
ismovehos = true;
$('.history_list').show();
});
//添加搜索事件
$("#search").click((e) => {
getgroupstr(group, $("#searchtext").val());
});
$("#searchtext").prop('type', 'text');
// 添加酒店组点击事件
$(".groupinfo").click((e) => {
let dom = e.currentTarget;
let id = $(dom).attr("data-id");
getgroupstr(id);
});
$(".Hotel_hover").click((e) => {
let dom = e.currentTarget;
let id = $(dom).attr("data-id") ;
let datagroup = $(dom).attr("data-group");
let name = $(dom).attr("data-name");
selhotel = id;
$(".hiddtext").removeClass("btn-primary");
$(".hiddtext").addClass("btn-success");
$(dom).find(".hiddtext").removeClass("btn-success").addClass("btn-primary");
let oldtext = $('#seltext').text();
$('#seltext').text(datagroup + "-" + name);
});
$("#qdbtn").click((e) => {
if (selhotel <= 0) {
toastr.error('请选择酒店~')
return;
}
MyPost("/api/Sel/", { data: { id: selhotel }, isSwal: true, title: "切换中.." }, (res) => {
if (res.IsSuccess) {
window.location.href = "/";
} else {
toastr.error(res.Result || '切换失败~')
}
})
});
})
}
//如果日志数量元素显示在界面上每隔 5s刷新一次log数量
// 初始化数量
Getudplogcount();
//是否未在刷新 false 时
let udplogcount = false;
let udplogtime = setInterval(function () {
//不自动刷新数量 只会有一次结果
clearInterval(udplogtime)
return;
if (!$('#udplogcount').is(":hidden") ) {
if (!udplogcount) {
udplogcount = true;
setTimeout(() => {
Getudplogcount();
}, 4500)
}
}
}, 500)
// 获取UDPlog 数量 和 rcu数量
function Getudplogcount() {
if ($('#udplogcount').length <= 0) { return; }
MyPost("/Api/Getudplogcount", { isSwal: false }, (X) => {
$('#rcucount').text(X.rcu||0);
$('#udplogcount').text(X.udp||0);
if (udplogcount)
udplogcount = false;
}, (err) => {
console.log(err);
clearInterval(udplogtime)
})
}
// 5s刷新一次log数量 结束
// rucs 服务状态
// 状态回调 服务器状态监测
let RUCSSTATUS_BACK = [];
// 状态值
let RUCSSTATUS_Val = Cookies.get('RUCSSTATUS_Val') || null;
RUCSSTATUS_Val = RUCSSTATUS_Val == null ? [] : JSON.parse(RUCSSTATUS_Val);
$(function () {
let sx_token = false;
setInterval(() => {
if (sx_token) {
return;
}
sx_token = true;
MyPost("/api/Token", { isSwal: false }, (res) => {
if (IsUndefined(res) || IsUndefined(res.IsSuccess) || res.IsSuccess != true) {
window.href = "~/Api/signout";
return;
}
RUCSSTATUS_Val = res.Result;
Cookies.set('RUCSSTATUS_Val', RUCSSTATUS_Val);
RUCSSTATUS_BACK.forEach(x => {
x(RUCSSTATUS_Val);
});
sx_token = false;
});
},1000 * 5
)
});

View File

@@ -0,0 +1,30 @@
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function () {
setTimeout(lazyload(imgs), 20);
}
//// 获取图片列表即img标签列表
var imgs = document.querySelectorAll('img');
function getTop(e) {
return e.offsetTop;
}
// 懒加载实现
function lazyload(imgs) {
imgs = document.querySelectorAll('img');
for (let i of imgs) {
if ($(i).is(':visible') == true) {
let trueSrc = i.getAttribute("data-src");
if (trueSrc != 'null' && trueSrc != null && trueSrc.indexOf('{{') < 0 && trueSrc.indexOf('}}') < 0) {
$(i).removeAttr("data-src")
i.setAttribute("src", trueSrc);
}
}
}
}
// 滚屏函数
window.onscroll = function () {
//保证每次取到的为最新的
lazyload(imgs);
}

View File

@@ -0,0 +1,10 @@
function rucs_log() {
MyPost("/Server/RUCS_Log", { isSwal: false }, (res) => {
$('.container-fluid').html(res);
})
}
rucs_log();
setInterval(() => {
//rucs_log();
},3000)

View File

@@ -0,0 +1,314 @@
// <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD>
let start = 1;
// ÿҳ<C3BF><D2B3><EFBFBD><EFBFBD>
let pagelength = 15;
//page
let page = 1;
// <20><>ʼʱ<CABC><CAB1>
let startDate = null;
let endDate = null;
//չ<><D5B9><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD> id
let sel_id = new Array();
let datatable = null;
let sx_time = null;
let last_time = new Date().getTime();
curr = new Date().getTime(),
out = 6 * 1000; //<2F><><EFBFBD>ó<EFBFBD>ʱʱ<CAB1>䣺6s
// <20>Ƿ<EFBFBD><C7B7><EFBFBD><EFBFBD><EFBFBD>ˢ<EFBFBD><CBA2>
let is_sx = false;
$(function () {
let udplog_data = Cookies.get('udplog_data') || null;
udplog_data = udplog_data != null ? JSON.parse(udplog_data) : [];
$('#CONTENT_DECRYPT').val(udplog_data['CONTENT_DECRYPT']);
$('#DESTINATION_PORT').val(udplog_data['DESTINATION_PORT']);
$('#DESTINATION').val(udplog_data['DESTINATION']);
$('#SOURCE_PORT').val(udplog_data['SOURCE_PORT']);
$('#SOURCE_IP').val(udplog_data['SOURCE_IP']);
$('#DIRECTION').val(udplog_data['DIRECTION']);
$('#DATA_VALID').val(udplog_data['DATA_VALID']);
pagelength = udplog_data['pagelength'] || pagelength;
$('#pagelength').val(pagelength);
startDate = udplog_data.startDate || moment().startOf("days").format('YYYY-MM-DD HH:mm:ss');
endDate = udplog_data.endDate || moment().format('YYYY-MM-DD HH:mm:ss');
// <20><><EFBFBD><EFBFBD>ʱ<EFBFBD><CAB1>ѡ<EFBFBD><D1A1><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ڷ<EFBFBD>Χѡ<CEA7><D1A1><EFBFBD><EFBFBD>
$('#reservationtime').daterangepicker({
startDate: startDate || "2022-3-25 01:01:01",
endDate: endDate || new Date(),
timePicker: true,
maxDate: new Date(),
minDate: "2022-3-25 01:01:01",
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');
}).on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
startDate = null;
endDate = null;
});
loc();
table_init();
// <20>û<EFBFBD><C3BB><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ֹͣ<CDA3>Զ<EFBFBD>ˢ<EFBFBD><CBA2> δʹ<CEB4><CAB9>
$(document).mouseover(function (e) {
last_time = new Date().getTime(); //<2F><><EFBFBD>²<EFBFBD><C2B2><EFBFBD>ʱ<EFBFBD><CAB1>
});
set_Timeout();
});
//ͷ<><CDB7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
function titlehiede(that) {
$($(that).siblings()).toggle();
loc();
}
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
/// <20><>ʼ<EFBFBD><CABC> <20>ײ<EFBFBD><D7B2><EFBFBD><EFBFBD><EFBFBD>
let footloc = 0;
function loc() {
if (footloc == 0) {
footloc = $('.main-footer').offset().top;
$('.main-footer').hide();
}
let STR = "calc(100vh - " + $('.table-responsive').offset().top + "px)";
$('.table-responsive').css("height", STR)
}
// ѡ<>񳤶<EFBFBD>
function lengthCHANGE(that) {
pagelength = $(that).val();
table_init();
}
// <20><>ʱ<EFBFBD><CAB1><EFBFBD><EFBFBD>ˢ<EFBFBD><CBA2> <20><>ѡ<EFBFBD>˾<EFBFBD><CBBE>Զ<EFBFBD>ˢ<EFBFBD><CBA2>
function set_Timeout() {
sx_time = setInterval(function () {
curr = new Date().getTime(); //<2F><><EFBFBD>µ<EFBFBD>ǰʱ<C7B0><CAB1>
if (
//curr - last_time > out //<2F>ж<EFBFBD><D0B6>Ƿ<EFBFBD><C7B7><EFBFBD>ʱ
// $("#remember").prop("checked") <20>Ƿ<EFBFBD><C7B7><EFBFBD>ѡ
//&& !is_sx &&
$("#remember").prop("checked")) {
if (startDate == null) {
startDate = moment().startOf("days").format('YYYY-MM-DD HH:mm:ss');
}
endDate = moment().format('YYYY-MM-DD HH:mm:ss');
$('#reservationtime').val(startDate + "-" + endDate)
is_sx = true;
table_init(function () {
is_sx = false;
});
}
}, 1000);
}
// table<6C><65><EFBFBD>ݳ<EFBFBD>ʼ<EFBFBD><CABC>ˢ<EFBFBD><CBA2>
function table_init(success = null) {
let data = {
DESTINATION_PORT: $('#DESTINATION_PORT').val(),
CONTENT_DECRYPT: $('#CONTENT_DECRYPT').val(),
DESTINATION: $('#DESTINATION').val(),
SOURCE_PORT: $('#SOURCE_PORT').val(),
SOURCE_IP: $('#SOURCE_IP').val(),
DIRECTION: $('#DIRECTION').val(),
DATA_VALID: $('#DATA_VALID').val(),
startDate,
endDate
};
if (datatable != null) {
datatable.destroy();
//$('#dataTable').empty();
}
$.fn.dataTable.ext.errMode = 'none';//<2F><><EFBFBD>ε<EFBFBD><CEB5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
datatable = $('#dataTable').on('error.dt', function (e, settings, techNote, message) {
console.log(e, settings, techNote)
console.log('An error has been reported by DataTables: ', message);
location.reload();
}).DataTable({
"ordering": false,
"paging": true,
"serverSide": true,
"ajax": function (datas, callback, settings) {
data.start = datas.start;
data.length = datas.length;
data.draw = datas.draw
//is_sx <20>Զ<EFBFBD>ˢ<EFBFBD>µ<EFBFBD> <20><> ȡ<><C8A1><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
MyPost("/Server/GetUDPLog", { data, isSwal: !is_sx }, res => { callback(res) });
},
"columns": [{
'sTitle': '',/*.substring(6)*/
'render': function (data, type, row) {
return `
<td class=" text-gray info-box-content" style="padding: 0; margin: 0; line-height: 1; overflow: hidden;display:block;width:100%;">
<div style='color: #D3D3D3;' class="row " `+ (sel_id.indexOf(row["UDP_ID"]) != -1 ? "ID = '" + row["UDP_ID"] + "'" : "") + ` >
<div class="col-6">
`+ row["UDP_ID"] + `
<span style="background-color:`+ (row["DIRECTION"] == "TX" ? '#FFB6C1' : '#B0E0E6') + ` !important; padding-left:5px;padding-right:5px;margin-left:5px;" class=' ` + (row["DIRECTION"] == "TX" ? 'bg-danger' : 'bg-success') + ` '>
`+ row["DIRECTION"] + `</span>
<span style='color:gray;'> ` +
//<2F><>Ч<EFBFBD><D0A7><EFBFBD>ݲ<EFBFBD><DDB2>ж<EFBFBD>ָ<EFBFBD><D6B8>
(row["DATA_VALID"] != "1" ? "" : (
(row["CONTENT_DECRYPT"].trim().substring(48, 50) == "01" ? "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>" :
(row["CONTENT_DECRYPT"].trim().substring(48, 50) == "02" ? "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Կ" :
(row["CONTENT_DECRYPT"].trim().substring(48, 50) == "03" ? "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>" :
(row["CONTENT_DECRYPT"].trim().substring(48, 50) == "04" ? "״̬<D7B4>ϱ<EFBFBD>" :
(row["CONTENT_DECRYPT"].trim().substring(48, 50) == "05" ? "<22>·<EFBFBD><C2B7><EFBFBD><EFBFBD><EFBFBD>" :
(row["CONTENT_DECRYPT"].trim().substring(48, 50) == "06" ? "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>" :
(row["CONTENT_DECRYPT"].trim().substring(48, 50) == "07" ? "RCU<43><55><EFBFBD>Ͳ<EFBFBD><CDB2><EFBFBD>" : "<22><><EFBFBD><EFBFBD>")))))))
+ (row["DIRECTION"] != "TX" ? "" : "ACK"))) +
`</span>
</div>
<div class="col-6 ">src:
`+ row["SOURCE_IP"] + `:
`+ row["SOURCE_PORT"] + `
</div>
<div class="col-6 ">
`+ row["DATETIME"].substring(2).replace("T", " ") + `
</div>
<div class="col-6 ">dst:
`+ row["DESTINATION"] + `:
`+ row["DESTINATION_PORT"] + `
</div>
<div STYLE="`+ (row["DATA_VALID"] == "0" ? "" : "color: #D3D3D3;") + `" class="col-12 ` + (row["DATA_VALID"] == "0" ? '' : 'text-success') + `">
<text style="color:`+ (row["DATA_VALID"] == "1" ? '#D3D3D3 !important' : ' ') + `">` + row["CONTENT_DECRYPT"].trim().substring(0, 18) + `</text>
<text style="color:`+ (row["DATA_VALID"] == "1" ? '#000 !important' : ' ') + `">` + row["CONTENT_DECRYPT"].trim().substring(18, 24) + `</text>
<text style="color:`+ (row["DATA_VALID"] == "1" ? '#DC143C !important' : ' ') + `">` + row["CONTENT_DECRYPT"].trim().substring(24, 27) + `</text>
<text style="color:`+ (row["DATA_VALID"] == "1" ? '#D3D3D3 !important' : ' ') + `">` + row["CONTENT_DECRYPT"].trim().substring(27, 30) + `</text>
<text>`+ row["CONTENT_DECRYPT"].trim().substring(30, 48) + `</text>
<text style="`+ (row["DATA_VALID"] == "1" ? 'color:#9932CC !important;FONT-WEIGHT: BOLD;' : ' ') + `">` + row["CONTENT_DECRYPT"].trim().substring(48, 54) + `</text>
<text>`+ row["CONTENT_DECRYPT"].trim().substring(54) + `</text>
</div>
</div>
</td>`
}
}],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).addClass('bg-white').addClass('shadow');
$('thead').hide();
$(nRow).click(
function () {
ShowLog(nRow, aData);
}
)
},
"searching": false,
"autoWidth": false,
"bDeferRender ": true,
'iDisplayLength': pagelength,
"bLengthChange": false,
"initComplete": function (oSettings, json) {
Cookies.set('udplog_data', data, { expires: 7, path: window.location.pathname });
for (let i = 0; i < sel_id.length; i++) {
$($("#" + sel_id[i]).closest('tr')).click();
}
if (success != null) {
success();
}
},
'aLengthMenu': [50, 15, 25, 35,], //<2F><><EFBFBD><EFBFBD>ÿҳ<C3BF><D2B3>ʾ<EFBFBD><CABE>¼<EFBFBD><C2BC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˵<EFBFBD>
"language":
{
"sProcessing": "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>...",
"sLengthMenu": "<22><>ʾ _MENU_ <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>",
"sZeroRecords": <><C3BB>ƥ<EFBFBD><C6A5><EFBFBD><EFBFBD><EFBFBD><EFBFBD>",
"sInfo": "<22><>ʾ<EFBFBD><CABE> _START_ <20><> _END_ <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> _TOTAL_ <20><>",
"sInfoEmpty": "<22><>ʾ<EFBFBD><CABE> 0 <20><> 0 <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> 0 <20><>",
"sInfoFiltered": "(<28><> _MAX_ <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>)",
"sInfoPostFix": "",
"sSearch": "<22><><EFBFBD><EFBFBD>:",
"sUrl": "",
"sEmptyTable": "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ϊ<EFBFBD><CEAA>",
"sLoadingRecords": "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "<22><>ҳ",
"sPrevious": "<22><>ҳ",
"sNext": "<22><>ҳ",
"sLast": "ĩҳ"
},
"oAria": {
"sSortAscending": ": <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>д<EFBFBD><D0B4><EFBFBD>",
"sSortDescending": ": <20>Խ<EFBFBD><D4BD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>д<EFBFBD><D0B4><EFBFBD>"
}
}
});
}
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ť
function search_result() {
table_init();
}
// <20><>ʾ<EFBFBD><CABE>ϸ<EFBFBD><CFB8><EFBFBD><EFBFBD>
function ShowLog(that, data) {
let STR =
`
<div onclick="javascript:event.stopPropagation();event.preventDefault();" class="text-info card-body shadow-sm" style="padding:0.5rem; background-color: rgb(255, 250, 240);">
<div class="row">
<div class="col-md-4 col-6">
UDP_ID : <span class='text-gray'>`+ data.UDP_ID + `</span></div>
<div class="col-md-4 col-6">
MAC : <span class='text-gray'>`+ data.MAC + `</span></div>
<div class="col-md-4 col-6">
MSG_ID : <span class='text-gray'>`+ data.MSG_ID + `</span></div>
<div class="col-md-4 col-6">
<20><><EFBFBD><EFBFBD> : <span class='text-gray'>`+ data.LENGTH + `</span></div>
<div class="col-md-4 col-6">
TCP_ID : <span class='text-gray'>`+ data.TCP_ID + `</span></div>
<div class="col-md-4 col-6">
<20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> : <span class='text-gray'>`+ (data.RESULT == 0 ? <><CAA7>" : "<22>ɹ<EFBFBD>") + `</span></div>
<div class="col-md-4 col-6">
<20>ط<EFBFBD><D8B7><EFBFBD><EFBFBD><EFBFBD> : <span class='text-gray'>`+ data.RETRY_COUNT + `</span></div>
<div class="col-md-4 col-6">
<20>Ƿ<EFBFBD><C7B7><EFBFBD>Ч : <span class='text-gray'>`+ (data.DATA_VALID == 0 ? "<22><>Ч" : "<22><>Ч") + `</span></div>
<div class="col-md-4 col-6">
<20><><EFBFBD>ռ<EFBFBD><D5BC><EFBFBD> : <span class='text-gray'>`+ data.RCV_TIMEOUT + `ms</span></div>
<div class="col-md-4 col-6">
ͨѶ<CDA8><D1B6><EFBFBD><EFBFBD> : <span class='text-gray'>`+ data.UDP_CMD + `</span></div>
<div class="col-md-4 col-6">
<20><><EFBFBD>ͼ<EFBFBD><CDBC><EFBFBD> : <span class='text-gray'>`+ data.SED_TIMEOUT + `ms</span></div>
<div class="col-md-4 col-6">
<20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʱ : <span class='text-gray'>`+ data.PROCESSING_TIMESPENT + `ms</span></div>
<div class="col-md-4 col-6">
<20>˿<EFBFBD>ͨѶʱ<D1B6><CAB1> : <span class='text-gray'>`+ data.Prot_TimeOut + `ms</span></div>
<div class="col-md-12 col-12 ">
<20><>ע : <span class='text-gray'>`+ data.REMARK + `</span></div>
`;
// <20>Զ<EFBFBD>ˢ<EFBFBD>º<EFBFBD> <20><><EFBFBD><EFBFBD> <20>Ѿ<EFBFBD>չ<EFBFBD><D5B9><EFBFBD><EFBFBD>ʾ <20><>ô<EFBFBD><C3B4> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
if (($(that).find(".card-body").length != 0)) {// <20>ж<EFBFBD><D0B6>Ƿ<EFBFBD>֮ǰ<D6AE><C7B0>չ<EFBFBD><D5B9><EFBFBD><EFBFBD> <20>еĻ<D0B5><C4BB>Ͳ<EFBFBD><CDB2><EFBFBD>ִ<EFBFBD><D6B4><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
$($(that).find(".card-body")).toggle();// <20><>ʾ <20><><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD>
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><>ִ<EFBFBD><D6B4><EFBFBD>Ƴ<EFBFBD><C6B3><EFBFBD>¼
if ($($(that).find(".card-body")).attr("style").indexOf('display: none;') >= 0) {
sel_id = sel_id.filter((id) => {
return id != data.UDP_ID;
})
} else {
if (sel_id.indexOf(data.UDP_ID) < 0) {
sel_id.push(data.UDP_ID);
}
}
} else {
// <20>ж<EFBFBD><D0B6>Ƿ<EFBFBD>֮ǰ<D6AE><C7B0><EFBFBD><EFBFBD><EFBFBD>ӹ<EFBFBD> <20>еĻ<D0B5><C4BB>Ͳ<EFBFBD><CDB2><EFBFBD><EFBFBD><EFBFBD>¼
if (sel_id.indexOf(data.UDP_ID) < 0) {
sel_id.push(data.UDP_ID);
}
$(that).find("td").append(STR);
}
}