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 += '<tr><td>' + data[i].sn + '</td>';
|
html += '<td>' + data[i].name + '</td>';
|
html += '<td>' + data[i].id + '</td>';
|
html += '<td>' + strTime(data[i].time) + '</td>';
|
html += '<td>' + (data[i].flag == 0 ? '未处理' : '已处理') + '</td>';
|
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 += '<td>' + str + '</td></tr>';
|
}
|
}else{
|
html += '<tr><td colspan="6">暂无数据</td></tr>';
|
}
|
$("#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} <br/>{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} <br/>{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);
|
}
|
