327 lines
10 KiB
JavaScript
327 lines
10 KiB
JavaScript
function get_data() {
|
|
$.get('queryHook', function(res) {
|
|
if (res == 1) {
|
|
$("#play").remove()
|
|
} else {
|
|
$("#stop").remove()
|
|
}
|
|
$.getJSON('getData', {
|
|
|
|
}, function(res) {
|
|
var max = res["max"]
|
|
$("#prj_num").html(res['count'] + " / " + max)
|
|
$("#prj_num_bar").attr("aria-valuenow", res['count'])
|
|
$("#prj_num_bar").attr("aria-valuemax", max)
|
|
$("#prj_num_bar").css("width", (res['count'] * 100 / max) + "%")
|
|
globalRows = res["rows"]
|
|
init_table(res["rows"])
|
|
sync_chart()
|
|
})
|
|
})
|
|
|
|
}
|
|
var datatable = undefined
|
|
$(function() {
|
|
datePicker = $("#timeFilter").flatpickr({
|
|
"mode": "range"
|
|
})
|
|
})
|
|
|
|
function init_table(rows) {
|
|
console.log(rows)
|
|
if (datatable) {
|
|
datatable.destroy()
|
|
datatable.clear()
|
|
}
|
|
$("#mqttdata").empty()
|
|
for (i in rows) {
|
|
let row = rows[i]
|
|
row["time"] = new Date(new Date(row["time"]).getTime() + 480 * 60000).toLocaleString()
|
|
$("#mqttdata").append("<tr><td>" + row["topic"] + "</td><td>" + row["message"] + "</td><td>" + row["time"] + "</td></tr>")
|
|
}
|
|
|
|
|
|
if (lang == 'zh')
|
|
datatable = $("#apps_table").DataTable({
|
|
"order": [
|
|
[2, "asc"]
|
|
],
|
|
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": ": 以降序排列此列"
|
|
}
|
|
},
|
|
dom: 'lBrtip'
|
|
});
|
|
else if (lang == 'tw')
|
|
datatable = $("#apps_table").DataTable({
|
|
"order": [
|
|
[2, "asc"]
|
|
],
|
|
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": ": 以降序排列此列"
|
|
}
|
|
},
|
|
dom: 'lBrtip'
|
|
});
|
|
else
|
|
datatable = $("#apps_table").DataTable({
|
|
"order": [
|
|
[2, "asc"]
|
|
],
|
|
dom: 'lBrtip'
|
|
});
|
|
datatable.on("page", sync_chart)
|
|
datatable.on("length", sync_chart)
|
|
datatable.on("search", sync_chart)
|
|
}
|
|
|
|
var filter = function() {
|
|
var newRows = []
|
|
var selectedDates = datePicker.selectedDates
|
|
var compareTime = function(time1, time2) {
|
|
if (time1[0] > time2[0])
|
|
return 1
|
|
else if (time1[0] == time2[0]) {
|
|
if (time1[1] > time2[1])
|
|
return 1
|
|
else if (time1[1] == time2[1]) {
|
|
if (time1[2] > time2[2])
|
|
return 1
|
|
else if (time1[2] == time2[2])
|
|
return 0
|
|
else
|
|
return -1
|
|
} else
|
|
return -1
|
|
} else
|
|
return -1
|
|
}
|
|
var startTime = []
|
|
var endTime = []
|
|
if (selectedDates.length > 0) {
|
|
startTime = [selectedDates[0].getFullYear(), selectedDates[0].getMonth() + 1, selectedDates[0].getDate()]
|
|
endTime = [selectedDates[1].getFullYear(), selectedDates[1].getMonth() + 1, selectedDates[1].getDate()]
|
|
}
|
|
for (i in globalRows) {
|
|
let row = globalRows[i]
|
|
if (row["topic"].indexOf($("#topicFilter").val()) != -1) {
|
|
var curTime = [parseInt(row["time"].substr(0, 4)), parseInt(row["time"].substr(5, 2)), parseInt(row["time"].substr(8, 2))]
|
|
if (selectedDates.length == 0 || (compareTime(curTime, startTime) >= 0 && compareTime(endTime, curTime) >= 0))
|
|
newRows.push(row)
|
|
}
|
|
|
|
}
|
|
init_table(newRows)
|
|
sync_chart()
|
|
}
|
|
|
|
var undo = function() {
|
|
init_table(globalRows)
|
|
sync_chart()
|
|
$("#topicFilter").val("")
|
|
datePicker.clear()
|
|
}
|
|
|
|
var sync_chart = function() {
|
|
var rows = datatable.rows({
|
|
order: 'current',
|
|
page: 'current',
|
|
search: 'applied'
|
|
}).data()
|
|
var xis = []
|
|
var srs = []
|
|
for (var i = 0; i <= rows.length - 1; i = i + 1) {
|
|
if (xis.length == 0 || xis[xis.length - 1] != rows[i][2])
|
|
xis.push(rows[i][2])
|
|
var have = false
|
|
for (j in srs) {
|
|
if (srs[j]["name"] == rows[i][0])
|
|
have = true
|
|
}
|
|
if (!have) {
|
|
srs.push({
|
|
name: rows[i][0],
|
|
data: [],
|
|
type: "line"
|
|
})
|
|
}
|
|
}
|
|
for (i in xis) {
|
|
var time = xis[i]
|
|
for (j in srs) {
|
|
var name = srs[j]["name"]
|
|
var have = false
|
|
for (var k = 0; k <= rows.length - 1; k = k + 1) {
|
|
if (rows[k][0] == name && rows[k][2] == time) {
|
|
srs[j]["data"].push(rows[k][1])
|
|
have = true
|
|
break
|
|
}
|
|
}
|
|
if (!have)
|
|
srs[j]["data"].push(NaN)
|
|
}
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xis
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: srs
|
|
};
|
|
|
|
option && myChart.setOption(option, true);
|
|
}
|
|
$(function() {
|
|
var chartDom = document.getElementById('chart');
|
|
myChart = echarts.init(chartDom);
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
|
|
}]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
get_data()
|
|
})
|
|
|
|
var play = function() {
|
|
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
|
|
$.get('startHook', function(res) {
|
|
modald.close()
|
|
if (res == 1)
|
|
refresh()
|
|
else
|
|
showtext("unknown error")
|
|
})
|
|
}
|
|
|
|
var stop = function() {
|
|
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
|
|
$.get('stopHook', function(res) {
|
|
modald.close()
|
|
if (res == 1)
|
|
refresh()
|
|
else
|
|
showtext("unknown error")
|
|
})
|
|
}
|
|
|
|
var refresh = function() {
|
|
window.location.href = window.location.href
|
|
}
|
|
|
|
var output = function() {
|
|
var jsonData = datatable.data()
|
|
let str = `topic,message,time\n`;
|
|
for (let i = 0; i < jsonData.length; i++) {
|
|
for (let item in jsonData[i]) {
|
|
str += `${jsonData[i][item] + '\t'},`;
|
|
}
|
|
str += '\n';
|
|
}
|
|
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
|
|
let link = document.createElement("a");
|
|
link.href = uri;
|
|
link.download = "data.csv";
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
|
|
var clearAll = function() {
|
|
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
|
|
var condition = "topic like '%" + $("#topicFilter").val() + "%'"
|
|
var selectedDates = datePicker.selectedDates
|
|
if (selectedDates.length > 0) {
|
|
var startStr = ""
|
|
var startTime = [selectedDates[0].getFullYear(), selectedDates[0].getMonth() + 1, selectedDates[0].getDate()]
|
|
startStr = startStr + startTime[0] + "-"
|
|
if (startTime[1] >= 10)
|
|
startStr = startStr + startTime[1] + "-"
|
|
else
|
|
startStr = startStr + "0" + startTime[1] + "-"
|
|
if (startTime[2] >= 10)
|
|
startStr = startStr + startTime[2] + " 00:00:00"
|
|
else
|
|
startStr = startStr + "0" + startTime[2] + " 00:00:00"
|
|
var endStr = ""
|
|
var endTime = [selectedDates[1].getFullYear(), selectedDates[1].getMonth() + 1, selectedDates[1].getDate()]
|
|
endStr = endStr + endTime[0] + "-"
|
|
if (endTime[1] >= 10)
|
|
endStr = endStr + endTime[1] + "-"
|
|
else
|
|
endStr = endStr + "0" + endTime[1] + "-"
|
|
if (endTime[2] >= 10)
|
|
endStr = endStr + endTime[2] + " 23:59:59"
|
|
else
|
|
endStr = endStr + "0" + endTime[2] + " 23:59:59"
|
|
condition = condition + " and time>='" + startStr + "' and time<='" + endStr + "'"
|
|
}
|
|
$.get('clearHook', {
|
|
"condition": condition
|
|
}, function(res) {
|
|
modald.close()
|
|
if (res == 1)
|
|
refresh()
|
|
else
|
|
showtext("unknown error")
|
|
})
|
|
} |