450 lines
14 KiB
JavaScript
450 lines
14 KiB
JavaScript
|
var picHeight, endTime, startTime;
|
|||
|
|
var tiggleValue = "系统";
|
|||
|
|
var areaResult = null;
|
|||
|
|
var companyResult = null;
|
|||
|
|
var areLength;//区域的个数
|
|||
|
|
var companyLength;//厂家个数
|
|||
|
|
$(function () {
|
|||
|
|
//开关初始化
|
|||
|
|
$(".wanzheng").bootstrapSwitch({
|
|||
|
|
onText: "系统", // 设置ON文本
|
|||
|
|
offText: "网公司", // 设置OFF文本
|
|||
|
|
onColor: "primary",// 设置ON文本颜色 (info/success/warning/danger/primary)
|
|||
|
|
offColor: "primary", // 设置OFF文本颜色 (info/success/warning/danger/primary)
|
|||
|
|
size: "small", // 设置控件大小,从小到大 (mini/small/normal/large)
|
|||
|
|
handleWidth: "40",//设置控件宽度
|
|||
|
|
// 当开关状态改变时触发
|
|||
|
|
onSwitchChange: function (event, state) {
|
|||
|
|
if (state == true) {
|
|||
|
|
tiggleValue = "系统";
|
|||
|
|
} else {
|
|||
|
|
tiggleValue = "网公司";
|
|||
|
|
}
|
|||
|
|
//重新画图
|
|||
|
|
reDrawAllPic();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
var i;
|
|||
|
|
picHeight = $(window).height() * 0.5 - 5;
|
|||
|
|
endTime = getEndTime();
|
|||
|
|
startTime = getMonthStartTime(endTime);
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/pqs9000/overview/onlineRate',
|
|||
|
|
data: {
|
|||
|
|
startTime: startTime,
|
|||
|
|
endTime: endTime
|
|||
|
|
},
|
|||
|
|
type: 'post',
|
|||
|
|
dataType: 'json',
|
|||
|
|
beforeSend: function () {
|
|||
|
|
i = ityzl_SHOW_LOAD_LAYER();
|
|||
|
|
},
|
|||
|
|
success: function (data) {
|
|||
|
|
if (data.code === 500 | data.body === null) {
|
|||
|
|
drawAreaPic(null);
|
|||
|
|
drawCompanyPic(null);
|
|||
|
|
initAreaTable(null);
|
|||
|
|
initCompanyTable(null);
|
|||
|
|
} else {
|
|||
|
|
areLength = data.body.area === null ? 0 : data.body.area.length;
|
|||
|
|
companyLength = data.body.interval === null ? 0 : data.body.interval.length;
|
|||
|
|
if (parseInt(areLength) > parseInt(barspaclength)) {
|
|||
|
|
drawAreaPic(data.body.area, 1);
|
|||
|
|
} else {
|
|||
|
|
drawAreaPic(data.body.area, 0);
|
|||
|
|
}
|
|||
|
|
if (parseInt(companyLength) > parseInt(barspaclength)) {
|
|||
|
|
drawCompanyPic(data.body.interval, 1);
|
|||
|
|
} else {
|
|||
|
|
drawCompanyPic(data.body.interval, 0);
|
|||
|
|
}
|
|||
|
|
companyResult = data.body.interval;
|
|||
|
|
areaResult = data.body.area;
|
|||
|
|
|
|||
|
|
initAreaTable(data.body.area);
|
|||
|
|
initCompanyTable(data.body.interval);
|
|||
|
|
}
|
|||
|
|
//***********关闭loading
|
|||
|
|
ityzl_CLOSE_LOAD_LAYER(i);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
//描绘区域图
|
|||
|
|
function drawAreaPic(area, intervals) {
|
|||
|
|
var xTip;
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
xTip = '地区\n(终端数)\n';
|
|||
|
|
} else {
|
|||
|
|
xTip = '地区\n(监测点数)\n';
|
|||
|
|
}
|
|||
|
|
$("#area").css("height", picHeight);
|
|||
|
|
var areaOption = echarts.init($("#area")[0]);
|
|||
|
|
var rate = [];
|
|||
|
|
var areas = [];
|
|||
|
|
if (null != area) {
|
|||
|
|
for (var i = 0; i < area.length; i++) {
|
|||
|
|
var onlineRate;
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
|
|||
|
|
onlineRate = Number(area[i].online);
|
|||
|
|
} else {
|
|||
|
|
areas[i] = area[i].name + "\n(" + area[i].gwamounts + ")";
|
|||
|
|
onlineRate = Number(area[i].gwonline);
|
|||
|
|
}
|
|||
|
|
var singleData = {};
|
|||
|
|
var item = {};
|
|||
|
|
item.color = getColor(onlineRate);
|
|||
|
|
if (onlineRate < 3.1414) {
|
|||
|
|
singleData.value = 3.1415;
|
|||
|
|
item.actual = onlineRate;
|
|||
|
|
} else {
|
|||
|
|
singleData.value = onlineRate;
|
|||
|
|
}
|
|||
|
|
singleData.areaIndex = area[i].deptsIndex;
|
|||
|
|
singleData.itemStyle = item;
|
|||
|
|
rate[i] = singleData;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: canvasBG,//背景色
|
|||
|
|
title: {
|
|||
|
|
text: '区域',
|
|||
|
|
x: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var color = params[0].color;
|
|||
|
|
var tips = "";
|
|||
|
|
tips += params[0].name;
|
|||
|
|
if (color === noMonitor) {
|
|||
|
|
tips += '<br/>' + params[0].seriesName + ' : /';
|
|||
|
|
} else if (color === noData) {
|
|||
|
|
tips += '<br/>' + params[0].seriesName + ' : （暂无数据）';
|
|||
|
|
} else {
|
|||
|
|
if (params[0].data.itemStyle.actual !== undefined) {
|
|||
|
|
tips += '<br/>' + params[0].seriesName + ' : ' + params[0].data.itemStyle.actual;
|
|||
|
|
} else {
|
|||
|
|
tips += '<br/>' + params[0].seriesName + ' : ' + params[0].value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return tips;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//控制图标在dataroom中的位置大小
|
|||
|
|
grid: {
|
|||
|
|
left: '1%',
|
|||
|
|
right: '10%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: areas,
|
|||
|
|
name: xTip,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
interval: intervals
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '%',
|
|||
|
|
min: '0',
|
|||
|
|
max: '100'
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: '在线率',
|
|||
|
|
type: 'bar',
|
|||
|
|
barMaxWidth: barMax,
|
|||
|
|
data: rate
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
areaOption.setOption(option);
|
|||
|
|
areaOption.on('click', function (params) {
|
|||
|
|
if (getRole("/pqs9000/area/onlineratetable") == 1) {
|
|||
|
|
var city = params.data.areaIndex;
|
|||
|
|
window.top.addTab('/pqs9000/area/onlineratetable?startTime=' + startTime + '&endTime=' + endTime + '&area=' + city + '&interval=月份', '在线率列表')
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//填充区域表格
|
|||
|
|
function initAreaTable(data) {
|
|||
|
|
var height = picHeight - 50;
|
|||
|
|
if (data == null) {
|
|||
|
|
data = [];
|
|||
|
|
}
|
|||
|
|
$("#areaTable").DataTable({
|
|||
|
|
data: data,
|
|||
|
|
autoWidth: false,
|
|||
|
|
columnDefs: [
|
|||
|
|
{"width": "33%", "targets": 0},
|
|||
|
|
{"width": "33%", "targets": 1},
|
|||
|
|
{"width": "33%", "targets": 2}
|
|||
|
|
],
|
|||
|
|
order: [2, "desc"],
|
|||
|
|
paging: false,
|
|||
|
|
lengthChange: false,
|
|||
|
|
searching: false,
|
|||
|
|
destroy: true,
|
|||
|
|
scrollY: height,
|
|||
|
|
info: false,
|
|||
|
|
language: {
|
|||
|
|
url: '/pqs9000/json/chine.json',
|
|||
|
|
},
|
|||
|
|
columns: [
|
|||
|
|
{data: 'name'},
|
|||
|
|
{
|
|||
|
|
data: 'amounts', render: function (data, type, full, meta) {
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
return full.amounts;
|
|||
|
|
} else {
|
|||
|
|
return full.gwamounts;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: 'online', render: function (data, type, full, meta) {
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
data = full.online;
|
|||
|
|
} else {
|
|||
|
|
data = full.gwonline;
|
|||
|
|
}
|
|||
|
|
if (Number(data) === 3.1415) {
|
|||
|
|
return "/";
|
|||
|
|
} else if (Number(data) === 3.14159) {
|
|||
|
|
return "（暂无数据）";
|
|||
|
|
} else {
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//描绘终端厂家图
|
|||
|
|
function drawCompanyPic(company, intervals) {
|
|||
|
|
var xTip;
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
xTip = '终端厂家\n(终端数)\n';
|
|||
|
|
} else {
|
|||
|
|
xTip = '终端厂家\n(监测点数)\n';
|
|||
|
|
}
|
|||
|
|
$("#company").css("height", picHeight);
|
|||
|
|
var comOption = echarts.init($("#company")[0]);
|
|||
|
|
var rate = [];
|
|||
|
|
var areas = [];
|
|||
|
|
if (null != company) {
|
|||
|
|
for (var i = 0; i < company.length; i++) {
|
|||
|
|
var onlineRate;
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
areas[i] = company[i].name + "\n(" + company[i].amounts + ")";
|
|||
|
|
onlineRate = Number(company[i].online);
|
|||
|
|
} else {
|
|||
|
|
areas[i] = company[i].name + "\n(" + company[i].gwamounts + ")";
|
|||
|
|
onlineRate = Number(company[i].gwonline);
|
|||
|
|
}
|
|||
|
|
var singleData = {};
|
|||
|
|
var item = {};
|
|||
|
|
item.color = getColor(onlineRate);
|
|||
|
|
if (onlineRate < 3.1414) {
|
|||
|
|
singleData.value = 3.1415;
|
|||
|
|
item.actual = onlineRate;
|
|||
|
|
} else {
|
|||
|
|
singleData.value = onlineRate;
|
|||
|
|
}
|
|||
|
|
singleData.itemStyle = item;
|
|||
|
|
rate[i] = singleData;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: canvasBG,//背景色
|
|||
|
|
title: {
|
|||
|
|
text: '终端厂家',
|
|||
|
|
x: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var color = params[0].color;
|
|||
|
|
var tips = "";
|
|||
|
|
tips += params[0].name;
|
|||
|
|
if (color === noMonitor) {
|
|||
|
|
tips += '<br/>' + params[0].seriesName + ' : /';
|
|||
|
|
} else if (color === noData) {
|
|||
|
|
tips += '<br/>' + params[0].seriesName + ' : （暂无数据）';
|
|||
|
|
} else {
|
|||
|
|
if (params[0].data.itemStyle.actual !== undefined) {
|
|||
|
|
tips += '<br/>' + params[0].seriesName + ' : ' + params[0].data.itemStyle.actual;
|
|||
|
|
} else {
|
|||
|
|
tips += '<br/>' + params[0].seriesName + ' : ' + params[0].value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return tips;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//控制图标在dataroom中的位置大小
|
|||
|
|
grid: {
|
|||
|
|
left: '1%',
|
|||
|
|
right: '10%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: areas,
|
|||
|
|
name: xTip,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
interval: intervals
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '%',
|
|||
|
|
min: '0',
|
|||
|
|
max: '100'
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: '在线率',
|
|||
|
|
type: 'bar',
|
|||
|
|
barMaxWidth: barMax,
|
|||
|
|
data: rate
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
comOption.setOption(option);
|
|||
|
|
comOption.on('click', function (params) {
|
|||
|
|
if (getRole("/pqs9000/area/onlineratetable") == 1) {
|
|||
|
|
window.top.addTab('/pqs9000/area/onlineratetable?startTime=' + startTime + '&endTime=' + endTime + '&interval=月份', '在线率列表')
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//填充终端厂家表格
|
|||
|
|
function initCompanyTable(data) {
|
|||
|
|
var height = picHeight - 50;
|
|||
|
|
if (data == null) {
|
|||
|
|
data = [];
|
|||
|
|
}
|
|||
|
|
$("#companyTable").DataTable({
|
|||
|
|
data: data,
|
|||
|
|
autoWidth: false,
|
|||
|
|
columnDefs: [
|
|||
|
|
{"width": "33%", "targets": 0},
|
|||
|
|
{"width": "33%", "targets": 1},
|
|||
|
|
{"width": "33%", "targets": 2}
|
|||
|
|
],
|
|||
|
|
order: [2, "desc"],
|
|||
|
|
paging: false,
|
|||
|
|
lengthChange: false,
|
|||
|
|
searching: false,
|
|||
|
|
destroy: true,
|
|||
|
|
scrollY: height,
|
|||
|
|
info: false,
|
|||
|
|
language: {
|
|||
|
|
url: '/pqs9000/json/chine.json',
|
|||
|
|
},
|
|||
|
|
columns: [
|
|||
|
|
{data: 'name'},
|
|||
|
|
{
|
|||
|
|
data: 'amounts', render: function (data, type, full, meta) {
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
return full.amounts;
|
|||
|
|
} else {
|
|||
|
|
return full.gwamounts;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: 'online', render: function (data, type, full, meta) {
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
data = full.online;
|
|||
|
|
} else {
|
|||
|
|
data = full.gwonline;
|
|||
|
|
}
|
|||
|
|
if (Number(data) === 3.1415) {
|
|||
|
|
return "/";
|
|||
|
|
} else if (Number(data) === 3.14159) {
|
|||
|
|
return "（暂无数据）";
|
|||
|
|
} else {
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取指定区域下终端的在线率具体数据（最多10条）
|
|||
|
|
*/
|
|||
|
|
function showDetailData(content, title) {
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
title: title + '终端在线率详情（前10）',
|
|||
|
|
shadeClose: true,
|
|||
|
|
resize: false,
|
|||
|
|
area: '650px',
|
|||
|
|
scrollbar: false,
|
|||
|
|
content: content
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//开关触发图片更新
|
|||
|
|
function reDrawAllPic() {
|
|||
|
|
if (tiggleValue === "系统") {
|
|||
|
|
$("#typeTitle").html("终端数");
|
|||
|
|
$("#typeTitle1").html("终端数");
|
|||
|
|
} else {
|
|||
|
|
$("#typeTitle").html("监测点数");
|
|||
|
|
$("#typeTitle1").html("监测点数");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (areaResult === null) {
|
|||
|
|
drawAreaPic(null);
|
|||
|
|
initAreaTable(null);
|
|||
|
|
} else {
|
|||
|
|
drawAreaPic(areaResult);
|
|||
|
|
initAreaTable(areaResult);
|
|||
|
|
}
|
|||
|
|
if (companyResult === null) {
|
|||
|
|
drawCompanyPic(null);
|
|||
|
|
initCompanyTable(null);
|
|||
|
|
} else {
|
|||
|
|
drawCompanyPic(companyResult);
|
|||
|
|
initCompanyTable(companyResult);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//根据在线率获取颜色
|
|||
|
|
function getColor(data) {
|
|||
|
|
if (data >= 90) {
|
|||
|
|
return green;
|
|||
|
|
} else if (data === 3.1415) {
|
|||
|
|
return noMonitor;
|
|||
|
|
} else if (data === 3.14159) {
|
|||
|
|
return noData;
|
|||
|
|
} else if (data < 60) {
|
|||
|
|
return red;
|
|||
|
|
} else {
|
|||
|
|
return yellow;
|
|||
|
|
}
|
|||
|
|
}
|