var lincChart1;
var lincChart2;
var pieChart;
var pieChart2;
var LIST_DEVICE;
var warnList;
(function () {
//请求获取警告并渲染
queryWarnAll();
//请求系统使用天数
queryDay();
//初始化警告折线图
lincChart1 = initChartLine1();
//初始化设备监控图
lincChart2 = initChartLine2();
//初始警告的饼状图
pieChart = initPieChart();
// pieChart2 = initPieChart2();
//PUE渲染
renderPue();
if(TEST_TAG){
return;
}
getRamStatus();
//请求获取警告并渲染
queryWarnAll();
//请求设备列表并渲染
queryDevice();
setInterval(function () {
queryWarnAll();
},5000);
}).call(this);
//查询系统使用时间
function queryDay() {
$.get("./cgi-bin/sys-set/query-info", function (data, status) {
if ("success" == status) {
renderDay(data.usedTime);
}
}, "json");
}
//渲染使用天数
function renderDay(dayTime) {
if (dayTime) {
dayTime = dayTime.substring(0, 4) + "/" + dayTime.substring(4, 6) + "/" +
dayTime.substring(6, 8) + " 00:00:00";
//获取开始使用时的毫秒数
var timestamp = new Date(dayTime).getTime();
//当前时间的毫秒数
var timestampNow = new Date().getTime();
var num = timestampNow - timestamp;
var daytamp = 1000 * 60 * 60 * 24;
var day = Math.ceil(num / daytamp);
$("#day").html(day);
}
}
//请求获取设备列表
function queryDevice() {
$.get("./cgi-bin/device/query-all", function (data, status) {
if ("success" == status) {
LIST_DEVICE = data;
renderDeviceInfo();
} else {
window.parent.notify("设备列表数据查询出错!");
}
}, "json");
}
//设备模块渲染
function renderDeviceInfo() {
var deviceSumNum = 0; //设备总个数
var deviceNum = 0; //设备激活数
//X轴数组
var xaxisData = new Array();
//对应Y轴数组
var seriesData = new Array();
if (LIST_DEVICE != null && LIST_DEVICE.length > 0) {
//统计设备总数
deviceSumNum = LIST_DEVICE.length;
$.each(LIST_DEVICE, function (index, item) {
if (item.vld == 0) {
deviceNum += 1;
}
});
//统计不同设备类型下的设备数
var its = [];
$.each(CATEGORY, function (index, data) {
var temp = 0;
var it = {};
if(data.code == CATEGORY.D2091.code || data.code == CATEGORY.D2090.code){
}else{
$.each(LIST_DEVICE, function (index, item) {
if (data.code == item.type) {
temp += 1;
}
});
if (temp != 0) {
xaxisData.push(data.name);
seriesData.push(temp);
}
it.name = data.name;
it.temp = temp;
its.push(it);
}
});
//降序排序
its.sort(function(a, b) {
return b.temp - a.temp;
});
//X轴数组
xaxisData = new Array();
//对应Y轴数组
seriesData = new Array();
$.each(its,function (index,item) {
if(item.temp > 0){
xaxisData.push(item.name);
seriesData.push(item.temp);
}
});
}
$("#deviceManageNum").html(deviceNum);
$("#deviceSumNum").html(deviceSumNum);
if (xaxisData.length > 0 && seriesData.length > 0) {
lincChart2.option.series[0].data = seriesData;
lincChart2.option.xAxis.data = xaxisData;
lincChart2.chart.setOption(lincChart2.option, true);
}
}
//查询近30天的警告数据
function queryWarnAll() {
//获取参数
var request = {};
var time = new Date();
//30天前时间
request.beginTime = timeHandle(new Date(time - 1000 * 60 * 60 * 24 * 30), 'start');
//当期天时间
request.endTime = timeHandle(time, 'end');
console.log(request);
$.post("./cgi-bin/warn-list/query-all", JSON.stringify(request), function (data, status) {
if ("success" == status) {
warnList = data;
//相关警告渲染
renderWarn();
} else {
window.parent.notify("警告数据查询出错!");
}
}, "json");
}
//警告渲染
function renderWarn() {
//饼状图
warnNum();
//折线图
warnLine();
//列表
warnTable();
}
//渲染警告饼状图及头部警告数
function warnNum() {
var warnSumNum = 0; //警告总个数
var warnNum1 = 0; //警告已处理数
var warnNum2 = 0; //警告未处理数
var warnNum3 = 0; //超时处理数
//警告饼状图数组
var legendData = new Array();
var series = new Array();
var data = warnList;
if (data != null && data.length > 0) {
warnSumNum = data.length;
$.each(data, function (index, item) {
//统计警告数
if (item.flag == 0) {
//未处理
warnNum2 += 1;
// if (timeCompare(item.time)) {
// //超时
// warnNum3 += 1;
// } else {
// //未处理
// warnNum2 += 1;
// }
} else {
//已处理
warnNum1 += 1;
}
});
//顶部警告数
$("#warnUnDoNum").html(warnNum2);
$("#warnSumNum").html(warnSumNum);
//饼状图数据及渲染
var obj = {};
legendData.push("已处理");
obj.name = "已处理";
obj.value = warnNum1;
series.push(obj);
obj = {};
legendData.push("未处理");
obj.name = "未处理";
obj.value = warnNum2;
series.push(obj);
// obj = {};
// legendData.push("超时处理");
// obj.name = "超时处理";
// obj.value = warnNum3;
// series.push(obj);
pieChart.option.legend.data = legendData;
pieChart.option.series[0].data = series;
pieChart.chart.setOption(pieChart.option, true);
}
}
//渲染警告折线图
function warnLine() {
var data = warnList;
if (data != null && data.length > 0) {
//统计30天内每天的警告数
var tempTime = new Date();
var temp;
var warnTime;
var count;
//X轴数组
var xaxisData = new Array();
//对应Y轴数组
var seriesData = new Array();
for (var i = 30; i >= 0; i--) {
count = 0;
temp = timeStr(new Date(tempTime - 1000 * 60 * 60 * 24 * i));
$.each(data, function (index, item) {
warnTime = item.time.substring(4, 6) + "-" + item.time.substring(6, 8);
if (temp == warnTime) {
count += 1;
}
});
if (count != 0) {
xaxisData.push(temp);
seriesData.push(count);
}
}
if (xaxisData.length > 0 && seriesData.length > 0) {
lincChart1.option.series[0].data = seriesData;
lincChart1.option.xAxis.data = xaxisData;
lincChart1.chart.setOption(lincChart1.option, true);
}
}
}
//渲染警告列表
function warnTable() {
var data = warnList;
var html = '';
if (data != null && data.length > 0) {
for (var i = data.length - 1; i > data.length - 6; i--) {
if(i < 0){
break;
}
html += '
' + data[i].sn + ' | ';
html += '' + data[i].name + ' | ';
html += '' + data[i].id + ' | ';
html += '' + strTime(data[i].time) + ' | ';
html += '' + (data[i].flag == 0 ? '未处理' : '已处理') + ' | ';
var str = data[i].msg;
str = str.replace("供电方式 : 0","供电方式 : 市电供电");
str = str.replace("供电方式 : 1","供电方式 : 电池供电");
str = str.replace("工作模式 : 0","工作模式 : 正常模式");
str = str.replace("工作模式 : 1","工作模式 : 旁路模式");
str = str.replace("工作模式 : 2","工作模式 : 电池供电");
// str = str.replaceAll(": 0",": 正常");
// str = str.replaceAll(": 1",": 告警");
html += '' + str + ' |
';
}
}else{
html += '暂无数据 |
';
}
$("#warnList").html(html);
}
//时间格式处理,20210226101010-----2021-02-26 10:10:10
function strTime(time) {
return time.substring(0, 4) + "-" + time.substring(4, 6) + "-" + time.substring(6, 8) + " " + time.substring(8, 10) + ":" + time.substring(10, 12) + ":" + time.substring(12, 14)
}
//警告时间比较
function timeCompare(time) {
time = time.substring(0, 4) + "/" + time.substring(4, 6) + "/" +
time.substring(6, 8) + " " + time.substring(8, 10) + ":" +
time.substring(10, 12) + ":" + time.substring(12, 14);
//警告时间
var timestamp = new Date(time).getTime();
//当前时间
var timestampNow = new Date().getTime();
//判断时间差是否大于2天,大于则为超时处理
var temp = timestampNow - timestamp;
if (temp > 1000 * 60 * 60 * 24 * 2) {
return true; //超时
} else {
return false; //未超时
}
}
//返回月日的时间格式,如02-25
function timeStr(d) {
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var res = (month<10?"0"+month:month) + "-" + (date<10?"0"+date:date);
return res;
// var arr = date.toLocaleDateString().split("/");
// if (arr[1].length < 2) {
// arr[1] = "0" + arr[1];
// }
// if (arr[2].length < 2) {
// arr[2] = "0" + arr[2];
// }
// return arr[1] + "-" + arr[2];
}
//时间格式处理
function timeHandle(d, tag) {
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
// var arr = date.toLocaleDateString().split("/");
// if (arr[1].length < 2) {
// arr[1] = "0" + arr[1];
// }
// if (arr[2].length < 2) {
// arr[2] = "0" + arr[2];
// }
// var time = arr[0] + arr[1] + arr[2];
// console.log(time);
if (tag == "end") {
return year + "" + (month<10?"0"+month:month) + (date<10?"0"+date:date) + "235959" ;
} else {
return year + "" + (month<10?"0"+month:month) + (date<10?"0"+date:date) + "000000" ;
}
}
//渲染PUE
function renderPue() {
var avgPue = [1.2, 1.23, 1.4, 1.25, 1.44, 1.46, 1.24, 1.35, 1.34, 1.33,
1.27, 1.49, 1.43, 1.34, 1.29, 1.2, 1.31, 1.42, 1.37, 1.29, 1.3, 1.4, 1.47, 1.34, 1.37,
1.27, 1.39, 1.23, 1.44, 1.29, 1.4, 1.41, 1.22, 1.37, 1.39, 1.4, 1.48, 1.46, 1.37];
var pue = [1.34, 1.29, 1.2, 1.31, 1.42, 1.37, 1.29, 1.3, 1.4, 1.47,
1.47, 1.2, 1.23, 1.4, 1.25, 1.44, 1.46, 1.24, 1.35, 1.34, 1.33, 1.33,
1.27, 1.49, 1.43, 1.34, 1.29, 1.2, 1.31, 1.42, 1.37, 1.29, 1.3, 1.4, 1.47, 1.34, 1.37];
// var day = new Date();
// var index = day.getDate();
var currentDate = new Date();
var dayOfMonth = currentDate.getDate();
// console.log("今天是这个月的第" + dayOfMonth + "天");
$("#pueCur").html(pue[dayOfMonth]);
$("#pueAvg").html(avgPue[dayOfMonth]);
// $("#pueCur").html("1.1");
// $("#pueAvg").html("1.18");
// var pueCur = 0.0;
// var pueAvg = 0.0;
//
// var aa1 = queryData("14");
// var aa2 = queryData("15");
// var bb1 = queryData("16");
// var bb2 = queryData("17");
//
// var ub1 = queryData("18");
// var ua1 = queryData("19");
// var ua2 = queryData("20");
//
// var p1 = 0;
// p1 = getPuePower(aa1,p1);
// p1 = getPuePower(aa2,p1);
// p1 = getPuePower(bb1,p1);
// p1 = getPuePower(bb2,p1);
// var p2 = 0;
// p2 = getPuePower(ub1,p2);
// p2 = getPuePower(ua1,p2);
// p2 = getPuePower(ua2,p2);
//
// p1 = formatNumber(p1) * 1;
// p2 = formatNumber(p2) * 1;
//
// pueCur = p1 / p2;
// pueAvg = p1 / p2;
// pueCur = formatNumber(pueCur);
// pueAvg = formatNumber(pueAvg);
// $("#pueCur").html(pueCur);
// $("#pueAvg").html(pueAvg);
}
function formatNumber(numStr){
return numStr ? parseFloat(numStr).toFixed(1):"0.0";
}
//初始化警告折线图
function initChartLine1() {
var option = {
title: {
text: '近30天警告个数统计',
textStyle: {
color: '#fff',
fontSize: 16,
lineHeight: 20
},
left: 15
},
tooltip: {
trigger: 'axis',
hideDelay: '300'
},
grid: {
top: '15%',
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7'],
axisLabel: {show: true, textStyle: {color: '#4FCCFF'}},
axisLine: {lineStyle: {color: '#162B5F', width: 1}},
axisTick: {
inside: true,
alignWithLabel: true
}
},
yAxis: {
minInterval: 1,
type: 'value',
axisLabel: {show: true, textStyle: {color: '#4FCCFF'}},
axisLine: {lineStyle: {color: '#162B5F', width: 2}},
splitLine: {lineStyle: {width: 1, color: ['#162B5F']}},
axisTick: {
inside: true
},
scale: true
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
series: [
{
data: [0, 0, 0, 0, 0, 0, 0],
type: 'line',
smooth: true,
symbol: '',
symbolSize: 6,
areaStyle: {
normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: '#154671'
// }, {offset: 0.4, color: '#154671' /*100% 处的颜色*/}, {offset: 1, color: '#020e2c' /*100% 处的颜色*/}]), //背景渐变色
lineStyle: {width: 1, type: 'solid', color: '#43effe'}
}
},
left: ['50%', '50%'],
itemStyle: {
normal: {
color: '#4fccff', //背景渐变色
lineStyle: {width: 2, type: 'solid', color: '#43effe'}
},
emphasis: {color: '#43effe', lineStyle: {width: 2, type: 'dotted', background: '#43effe'}}
},
symbolSize: 10
}
]
}
var myChart = echarts.init(document.getElementById('data2'), "light");
myChart.setOption(option, true);
return {
"chart": myChart,
"option": option
};
};
//初始化警告饼状图
function initPieChart() {
var option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} '
},
legend: {
x: 'right',
y: 'center',
top: '20',
orient: 'vertical',
data: ['未处理', '已处理', '忽略'],
textStyle: {color: '#4FCCFF'}
},
calculable: true,
series: [
{
name: '警报总览',
type: 'pie',
radius: '50%',
left: ['0%', '50%'],
// roseType: 'area',
data: [
{
value: 0,
name: '未处理',
itemStyle: {color: '#fb3434', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10},
label: {formatter: '{c}'}
},
{
value: 0,
name: '已处理',
itemStyle: {color: '#6fe621', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10},
label: {formatter: '{c}'}
},
// {value: 0, name: '忽略', itemStyle: {color: '#4fccff'}, label: {formatter: '{c}'}}
]
}
]
};
var myChart = echarts.init(document.getElementById('data1'), "light");
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
return {
"chart": myChart,
"option": option
}
};
//初始化警告饼状图
function initPieChart2() {
var option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} '
},
legend: {
x: 'right',
y: 'center',
top: '20',
orient: 'vertical',
data: ['已使用(MB)', '未使用(MB)'],
textStyle: {color: '#4FCCFF'}
},
calculable: true,
series: [
{
name: '内存使用情况',
type: 'pie',
radius: '50%',
left: ['0%', '50%'],
// roseType: 'area',
data: [
{
value: 412,
name: '已使用(MB)',
itemStyle: {color: '#e65131', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10},
label: {formatter: '{c}'}
},
{
value: 100,
name: '未使用(MB)',
itemStyle: {color: '#3fb8ff', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10},
label: {formatter: '{c}'}
}
]
}
]
};
var myChart = echarts.init(document.getElementById('rambox'), "light");
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
return {
"chart": myChart,
"option": option
}
};
//初始化设备柱状图
function initChartLine2() {
var option = {
grid: {
top: '5%',
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis',
hideDelay: '300'
},
xAxis: {
type: 'category',
data: ['温湿度', 'UPS', '精密空调', '电表', '配电', '烟感', '漏水', "其他"],
axisLabel: {interval: 0,show: true, textStyle: {color: '#4FCCFF'}},
axisLine: {lineStyle: {color: '#162B5F', width: 1}},
axisTick: {
inside: true,
alignWithLabel: true
}
},
yAxis: {
minInterval: 1,
type: 'value',
axisLabel: {show: true, textStyle: {color: '#4FCCFF'}},
axisLine: {lineStyle: {color: '#162B5F', width: 2}},
splitLine: {lineStyle: {width: 1, color: ['#162B5F']}},
axisTick: {
inside: true
}
},
series: [{
type: 'bar',
data: [6, 5, 4, 3,3,2 ,2, 1],
// data: [10, 9, 9, 7,6,5 ,4, 4,3, 3, 3, 2,2,2 ,1, 1],
label: {
show: true,
// position: 'top',
fontSize: 24,
},
itemStyle: {
borderRadius: [50, 50, 50, 50],
normal: {
color: function (params) {
var colorList = [
"#5470c6", "#91cc75", "#fac858", "#ee6666",
"#73c0de", "#3ba272", "#fc8452", "#9a60b4",
"#5470c6", "#91cc75", "#fac858", "#ee6666",
"#73c0de", "#3ba272", "#fc8452", "#9a60b4",
"#ea7ccc", "#c3ff24", "#ff785d", "#ff5f80"];
return colorList[params.dataIndex]
}
}
}
}]
};
var myChart = echarts.init(document.getElementById('data3'), "light");
myChart.setOption(option, true);
return {
"chart": myChart,
"option": option
}
};
//点击更多跳转警告列表页面
function toWarnView() {
var url = "./warn-list.html?t=m";
window.parent.openTab(url, "更多警告", "moreWarnList");
};
function queryData(deviceId) {
var result = null;
var data = {id: deviceId};
$.ajaxSettings.async = false;
$.post("./cgi-bin/detail/query-data", JSON.stringify(data), function (data, status) {
if ("success" == status) {
result = data;
} else {
window.parent.notify("数据查询出错,请重新操作!");
}
}, "json");
return result;
}
function getPuePower(item,power) {
var list1 = item.value;
for (var i = 1; i <= list1.length; i++) {
var cur = list1[i - 1];
//总功率
if(cur.passcode == 12){
if(cur.value){
power += cur.value;
break;
}
}
}
return power;
}
function getRamStatus() {
$.ajaxSettings.async = false;
$.get("./cgi-bin/file/get-ram", function (data, status) {
if ("success" == status) {
renderRamStatus(data);
} else {
window.parent.notify("数据查询出错,请重新操作!");
}
}, "json");
}
function renderRamStatus(data) {
var ram = data.ram;
var ramSur = data.ramSur;
ram = ram ? ram : 0;
ramSur = ramSur ? ramSur : 0;
var ramUsed = ram - ramSur;
$("#ramtxt").text("(总大小:"+ram+"MB)");
pieChart2.option.series[0].data[0].value = ramUsed;
pieChart2.option.series[0].data[1].value = ramSur;
pieChart2.chart.setOption(pieChart2.option, true);
}