1882 lines
73 KiB
Plaintext
1882 lines
73 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||
pageEncoding="UTF-8" %>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
|
||
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<title>终端状态</title>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport"
|
||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||
<link rel="stylesheet" href="${ctx}/css/plugin/slide/reset.css">
|
||
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
|
||
<link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
|
||
<link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
|
||
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
|
||
<link rel="stylesheet" href="${ctx}/css/plugin/ztree/zTreeStyle.css">
|
||
<link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
|
||
<link rel="stylesheet" href="${ctx}/css/basic.css">
|
||
<link rel="stylesheet" href="${ctx}/css/plugin/basicButton.css">
|
||
<style>
|
||
html, body {
|
||
background-color: #F9F9F9 !important;
|
||
}
|
||
|
||
table {
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
#before,#next,#query{
|
||
height: 20px !important;
|
||
}
|
||
.wanzhengdiv {
|
||
position: absolute;
|
||
z-index: 100;
|
||
top:70px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container-fluid">
|
||
<div class="form-inline mt5 wanzhengdiv">
|
||
<div class="form-group has-feedback mr10">
|
||
<span class=' font12 fontBold'>终端状态(左柱) <span class='run'><span class='inB bg-run smallBlock'></span> 投运 </span><span class='breaks'><span class='inB bg-breaks smallBlock'></span> 热备用 </span><span class='grey'><span class='inB bg-grey smallBlock'></span> 停运 </span></span>
|
||
<span class=' font12 fontBold' > 终端在线率(右柱) <span class='info'><span class='inB bg-info smallBlock'></span> 在线率≥90%</span><span class='warn'> <span class='inB bg-warn smallBlock'></span> 60%≤在线率<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> 在线率<60%</span> </span>
|
||
</div>
|
||
</div>
|
||
<div class="form-inline mt10">
|
||
<div class="form-group has-feedback mr10" >
|
||
<label >分类方式：</label>
|
||
<select class="width3 form-control" id="datatype">
|
||
<option selected value="0">区域</option>
|
||
<option value="1">电压等级</option>
|
||
<option value="2">终端厂家</option>
|
||
<option value="3">干扰源类型</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group has-feedback mr10" >
|
||
<label >统计类型：</label>
|
||
<input type="checkbox" checked class="checkbox" />
|
||
</div>
|
||
<div class="form-group">
|
||
<%@include file="../../include/time.jsp"%>
|
||
<button type="button" class="btn btn-primary " id="query">
|
||
<i class="glyphicon glyphicon-search"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-inline mt10">
|
||
<div class="form-group has-feedback" >
|
||
<label >区域：</label>
|
||
<div class="disinlineb">
|
||
<input id="area" class="form-control" style="width: 140px" readonly>
|
||
<i class="fa fa-caret-down areaicon"></i>
|
||
<i class="fa fa-caret-up treeUpIcon disnone"
|
||
style="color: #C9CBCE;position: absolute;left: 60px;font-size: 18px;z-index: 9999;top: 20px"></i>
|
||
<div class=" ztree treeUpDiv disnone " id="areaTree"
|
||
style="position: absolute;width: 140px;height: 147px;border: 2px solid #C9CBCE;overflow: auto;top: 32px;background: #fff;z-index: 100;border-radius: 2px">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group has-feedback mr10" >
|
||
<label >电压等级：</label>
|
||
<select class="width3 form-control" id="scale"></select>
|
||
</div>
|
||
<div class="form-group has-feedback mr10" >
|
||
<label >终端厂家：</label>
|
||
<select class="width3 form-control" id="manc"></select>
|
||
</div>
|
||
<div class="form-group has-feedback mr10" >
|
||
<label >干扰源类型：</label>
|
||
<select class="width3 form-control" id="loadtype"></select>
|
||
</div>
|
||
</div>
|
||
<div class="row mt5">
|
||
<%--区域模块--%>
|
||
<div class="col-sm-7" id="areaDepts"></div>
|
||
<div class="col-sm-5" id="areaT">
|
||
<table id="areaTable" class="table table-striped table-bordered dataTable no-footer">
|
||
<thead>
|
||
<tr>
|
||
<th>区域</th>
|
||
<th>终端个数</th>
|
||
<th>投运</th>
|
||
<th>热备用</th>
|
||
<th>停运</th>
|
||
<th>在线率(%)</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
<%-- 终端厂家模块 --%>
|
||
<div class="col-sm-7" id="company" style="display: none;"></div>
|
||
<div class="col-sm-5" id="companyT" style="display: none;">
|
||
<table id="companyTable" class="table table-striped table-bordered dataTable no-footer">
|
||
<thead>
|
||
<tr>
|
||
<th>厂家</th>
|
||
<th>终端个数</th>
|
||
<th>投运</th>
|
||
<th>热备用</th>
|
||
<th>停运</th>
|
||
<th>在线率(%)</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
<%-- 电压等级模块 --%>
|
||
<div class="col-sm-7" id="vol" style="display: none;"></div>
|
||
<div class="col-sm-5" id="volT" style="display: none;">
|
||
<table id="volTable" class="table table-striped table-bordered dataTable no-footer">
|
||
<thead>
|
||
<tr>
|
||
<th>电压等级</th>
|
||
<th>终端个数</th>
|
||
<th>投运</th>
|
||
<th>热备用</th>
|
||
<th>停运</th>
|
||
<th>在线率(%)</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
<%-- 干扰源模块 --%>
|
||
<div class="col-sm-7" id="loadtypep" style="display: none;"></div>
|
||
<div class="col-sm-5" id="loadtypeT" style="display: none;">
|
||
<table id="loadtypeTable" class="table table-striped table-bordered dataTable no-footer">
|
||
<thead>
|
||
<tr>
|
||
<th>干扰源类型</th>
|
||
<th>终端个数</th>
|
||
<th>投运</th>
|
||
<th>热备用</th>
|
||
<th>停运</th>
|
||
<th>在线率(%)</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
|
||
<script src="${ctx}/js/plugin/echarts/echarts.js"></script>
|
||
<script src="${ctx}/js/plugin/layui/layer.js"></script>
|
||
<script src="${ctx}/js/plugin/jquery/jquery.contextMenu.js"></script>
|
||
<script src="${ctx}/js/plugin/jquery/jquery.cleverTabs.js"></script>
|
||
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
|
||
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
|
||
<script src="${ctx}/jspJS/utils/loading.js"></script>
|
||
<script src="${ctx}/js/color.js"></script>
|
||
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
|
||
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
|
||
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
|
||
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
|
||
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
|
||
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
|
||
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
|
||
<script src="${ctx}/js/area.js"></script>
|
||
<script src="${ctx}/js/basic.js"></script>
|
||
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
|
||
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
|
||
<script>
|
||
var picHeight;
|
||
var tabs;
|
||
var $area = $("#area");
|
||
var $startTime = $("#startTime");
|
||
var $endTime = $("#endTime");
|
||
var areaResult = null;
|
||
var volResult = null;
|
||
var companyResult = null;
|
||
var loadtypeResult = null;
|
||
var tiggleValue = "";
|
||
var areLength;//区域的个数
|
||
var volLength;
|
||
var companyLength;//厂家个数
|
||
var loadtypeLength;
|
||
$("#interval").val("月份");
|
||
var showtype = 0;
|
||
var buttonname;
|
||
var companyname;
|
||
|
||
// 新增tab页
|
||
function addTab(url, label) {
|
||
tabs.add({url: url, label: label});
|
||
}
|
||
|
||
$("#datatype").on("change",function() {
|
||
var startTime = $startTime.eq(0).val();
|
||
var endTime = $endTime.eq(0).val();
|
||
var area = $area.eq(0).attr("index");
|
||
if($("option:selected",this).val() == 0){
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/pqs9000/user/getAreasInfo",
|
||
dataType: 'json',
|
||
async:false,
|
||
success: function (data) {
|
||
$("#area").val(data[0].name);
|
||
$("#area").attr("index", data[0].id);
|
||
areaTree = $.fn.zTree.init($("#areaTree"), settingAreaTree, data);
|
||
}
|
||
})
|
||
$("#area").attr("disabled",true);
|
||
$("#scale").attr("disabled",false);
|
||
$("#manc").attr("disabled",false);
|
||
$("#loadtype").attr("disabled",false);
|
||
|
||
showtype = 0;
|
||
var area = $area.eq(0).attr("index");
|
||
var scale = $("#scale").val();
|
||
var manc = $("#manc").val();
|
||
var loadtype = $("#loadtype").val();
|
||
refresh(startTime, endTime, area,scale,manc,loadtype)
|
||
}else if($("option:selected",this).val() == 1){
|
||
loadselect("电压等级","scale");
|
||
$("#area").attr("disabled",false);
|
||
$("#scale").attr("disabled",true);
|
||
$("#manc").attr("disabled",false);
|
||
$("#loadtype").attr("disabled",false);
|
||
|
||
$("#area").css("background-color","#fff");
|
||
showtype = 1;
|
||
var area = $area.eq(0).attr("index");
|
||
var scale = $("#scale").val();
|
||
var manc = $("#manc").val();
|
||
var loadtype = $("#loadtype").val();
|
||
refresh(startTime, endTime, area,scale,manc,loadtype);
|
||
}else if($("option:selected",this).val() == 2){
|
||
loadselect("制造厂商","manc");
|
||
$("#area").attr("disabled",false);
|
||
$("#scale").attr("disabled",false);
|
||
$("#manc").attr("disabled",true);
|
||
$("#loadtype").attr("disabled",false);
|
||
$("#area").css("background-color","#fff");
|
||
showtype = 2;
|
||
var scale = $("#scale").val();
|
||
var manc = $("#manc").val();
|
||
var loadtype = $("#loadtype").val();
|
||
refresh(startTime, endTime, area,scale,manc,loadtype);
|
||
}else if($("option:selected",this).val() == 3){
|
||
loadselect("干扰源类型","loadtype");
|
||
$("#area").attr("disabled",false);
|
||
$("#scale").attr("disabled",false);
|
||
$("#manc").attr("disabled",false);
|
||
$("#loadtype").attr("disabled",true);
|
||
$("#area").css("background-color","#fff");
|
||
showtype = 3;
|
||
var area = $area.eq(0).attr("index");
|
||
var scale = $("#scale").val();
|
||
var manc = $("#manc").val();
|
||
var loadtype = $("#loadtype").val();
|
||
refresh(startTime, endTime, area,scale,manc,loadtype);
|
||
}
|
||
})
|
||
|
||
$(function () {
|
||
var start = $startTime.eq(0).val();
|
||
var end = $endTime.eq(0).val();
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
data:{
|
||
start: start,
|
||
end: end
|
||
},
|
||
async:false,
|
||
url: "/pqs9000/device/getMsgInfo",
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
buttonname = data.body.name;
|
||
tiggleValue = data.body.name;
|
||
}
|
||
})
|
||
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/pqs9000/theme/getThemeInfo",
|
||
async: false,
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
companyname = data.body.name;
|
||
}
|
||
})
|
||
|
||
loadselect("电压等级","scale");
|
||
loadselect("制造厂商","manc");
|
||
loadselect("干扰源类型","loadtype");
|
||
|
||
$(".checkbox").bootstrapSwitch({
|
||
onText: buttonname, // 设置ON文本
|
||
offText: companyname, // 设置OFF文本
|
||
onColor: "primary",// 设置ON文本颜色 (info/success/warning/danger/primary)
|
||
offColor: "primary", // 设置OFF文本颜色 (info/success/warning/danger/primary)
|
||
size: "small", // 设置控件大小,从小到大 (mini/small/normal/large)
|
||
handleWidth: "60",//设置控件宽度
|
||
// 当开关状态改变时触发
|
||
onSwitchChange: function (event, state) {
|
||
if (state === true) {
|
||
tiggleValue = buttonname;
|
||
} else {
|
||
tiggleValue = companyname;
|
||
}
|
||
//重新画图
|
||
reDrawAllPic();
|
||
}
|
||
});
|
||
picHeight = ($(window).height() - 90);
|
||
tabs = $('#tabs').cleverTabs();
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/pqs9000/user/getAreasInfo",
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
$("#area").val(data[0].name);
|
||
$("#area").attr("index", data[0].id);
|
||
areaTree = $.fn.zTree.init($("#areaTree"), settingAreaTree, data);
|
||
|
||
$("#area").attr("disabled",true);
|
||
$("#scale").attr("disabled",false);
|
||
$("#manc").attr("disabled",false);
|
||
$("#loadtype").attr("disabled",false);
|
||
//初始化页面内容
|
||
var area = $area.eq(0).attr("index");
|
||
var startTime = $startTime.eq(0).val();
|
||
var endTime = $endTime.eq(0).val();
|
||
refresh(startTime, endTime, area);
|
||
}
|
||
})
|
||
})
|
||
|
||
$("#query").click(function () {
|
||
var area = $area.eq(0).attr("index");
|
||
var startTime = $startTime.eq(0).val();
|
||
var endTime = $endTime.eq(0).val();
|
||
var scale = $("#scale").val();
|
||
var manc = $("#manc").val();
|
||
var loadtype = $("#loadtype").val();
|
||
refresh(startTime, endTime, area,scale,manc,loadtype);
|
||
});
|
||
|
||
function refresh(startTime, endTime,area,scale,manc,loadtype) {
|
||
var i;
|
||
$.ajax({
|
||
url: '/pqs9000/area/deviceStatus',
|
||
type: 'post',
|
||
data: {
|
||
startTime: startTime,
|
||
endTime: endTime,
|
||
area: area,
|
||
scale:scale,
|
||
manc:manc,
|
||
loadtype:loadtype
|
||
},
|
||
dataType: 'json',
|
||
beforeSend: function () {
|
||
i = ityzl_SHOW_LOAD_LAYER();
|
||
},
|
||
success: function (data) {
|
||
if (data.code === 500 | data.body === null) {
|
||
companyResult = null;
|
||
volResult = null;
|
||
areaResult = null;
|
||
loadtypeResult = null;
|
||
} else {
|
||
areLength = data.body.area === null ? 0 : data.body.area.length;
|
||
companyLength = data.body.interval === null ? 0 : data.body.interval.length;
|
||
volLength = data.body.vol === null ? 0 : data.body.vol.length;
|
||
loadtypeLength = data.body.loadtype === null ? 0 : data.body.loadtype.length;
|
||
|
||
companyResult = data.body.interval;
|
||
areaResult = data.body.area;
|
||
volResult = data.body.vol;
|
||
loadtypeResult = data.body.loadtype;
|
||
}
|
||
startQuery();
|
||
//***********关闭loading
|
||
ityzl_CLOSE_LOAD_LAYER(i);
|
||
}
|
||
})
|
||
}
|
||
|
||
//按区域进行统计
|
||
function drawAreaPic(area, lineFeed,route) {
|
||
//给div指定宽高
|
||
$("#areaDepts").css("height", picHeight);
|
||
var normal = [];
|
||
var breaks = [];
|
||
var shutdown = [];
|
||
var areas = [];
|
||
var rate=[];
|
||
|
||
if (null != area) {
|
||
for (var i = 0; i < area.length; i++) {
|
||
var monitors;
|
||
var onlineRate;
|
||
if (tiggleValue === buttonname) {
|
||
monitors=area[i].amounts;
|
||
areas[i] = area[i].name + lineFeed+"(" + area[i].amounts + ")";
|
||
onlineRate = Number(area[i].online);
|
||
var singleDataNormal = {};
|
||
var singleDatabreal = {};
|
||
var singleDatashutdown = {};
|
||
singleDataNormal.value = area[i].status.normal;
|
||
singleDataNormal.areaIndex = area[i].deptsIndex;
|
||
normal[i]= singleDataNormal;
|
||
singleDatabreal.value = area[i].status.breaks;
|
||
singleDatabreal.areaIndex = area[i].deptsIndex;
|
||
breaks[i] = singleDatabreal;
|
||
singleDatashutdown.value = area[i].status.shutdown;
|
||
singleDatashutdown.areaIndex = area[i].deptsIndex;
|
||
shutdown[i] = singleDatashutdown;
|
||
} else {
|
||
monitors=area[i].gwamounts;
|
||
areas[i] = area[i].name + lineFeed+"(" + area[i].gwamounts + ")";
|
||
onlineRate = Number(area[i].gwonline);
|
||
if(null!==area[i].gdStatus){
|
||
var singleDataNormal = {};
|
||
var singleDatabreal = {};
|
||
var singleDatashutdown = {};
|
||
singleDataNormal.value = area[i].status.normal;
|
||
singleDataNormal.areaIndex = area[i].deptsIndex;
|
||
normal[i]= singleDataNormal;
|
||
singleDatabreal.value = area[i].status.breaks;
|
||
singleDatabreal.areaIndex = area[i].deptsIndex;
|
||
breaks[i] = singleDatabreal;
|
||
singleDatashutdown.value = area[i].status.shutdown;
|
||
singleDatashutdown.areaIndex = area[i].deptsIndex;
|
||
shutdown[i] = singleDatashutdown;
|
||
}else{
|
||
var singleData = {};
|
||
var item = {};
|
||
singleData.value = 3.1415;
|
||
item.color = noMonitor;
|
||
singleData.itemStyle = item;
|
||
singleData.areaIndex = area[i].deptsIndex;
|
||
normal[i] = singleData;
|
||
breaks[i] = 0;
|
||
shutdown[i] = 0;
|
||
}
|
||
}
|
||
if (Number(monitors) === 0) {
|
||
var singleData = {};
|
||
var item = {};
|
||
singleData.value = 3.1415;
|
||
item.color = noMonitor;
|
||
singleData.itemStyle = item;
|
||
singleData.areaIndex = area[i].deptsIndex;
|
||
normal[i] = singleData;
|
||
rate[i]=singleData;
|
||
breaks[i] = 0;
|
||
shutdown[i] = 0;
|
||
} else {
|
||
var singleData = {};
|
||
var normalData = {};
|
||
var itemStyle = {};
|
||
normalData.color = getColor(onlineRate);
|
||
if (onlineRate < 3.1414) {
|
||
singleData.value = 3.1415;
|
||
normalData.actual = onlineRate;
|
||
} else {
|
||
singleData.value = onlineRate;
|
||
}
|
||
itemStyle.normal = normalData;
|
||
singleData.itemStyle = itemStyle;
|
||
singleData.areaIndex = area[i].deptsIndex;
|
||
rate[i] = singleData;
|
||
}
|
||
}
|
||
}
|
||
var option = {
|
||
backgroundColor: canvasBG,//背景色
|
||
title: {
|
||
text: '区域',
|
||
left: '50%',
|
||
padding: [
|
||
25, // 上
|
||
0, // 右
|
||
0, // 下
|
||
0, // 左
|
||
]
|
||
},
|
||
color: [runColor, breaksColor, grey],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
position: function (point, params, dom, rect, size) {
|
||
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||
// 提示框位置
|
||
var x = 0; // x坐标位置
|
||
var y = 0; // y坐标位置
|
||
// 当前鼠标位置
|
||
var pointX = point[0];
|
||
var pointY = point[1];
|
||
// 外层div大小
|
||
// var viewWidth = size.viewSize[0];
|
||
// var viewHeight = size.viewSize[1];
|
||
// 提示框大小
|
||
var boxWidth = size.contentSize[0];
|
||
var boxHeight = size.contentSize[1];
|
||
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||
if (boxWidth > pointX) {
|
||
x = 5;
|
||
} else { // 左边放的下
|
||
x = pointX - boxWidth;
|
||
}
|
||
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||
if (boxHeight > pointY) {
|
||
y = 5;
|
||
} else { // 上边放得下
|
||
y = pointY - boxHeight;
|
||
}
|
||
return [x, y];
|
||
},
|
||
formatter: function (params) {
|
||
var tips="";
|
||
tips+='<font style="font-size: 12px">'+params[0].name+'</font>';
|
||
var color = params[0].color;
|
||
tips +='<br/><font style="font-size: 12px">终端状态(%)</font>';
|
||
if (color === noMonitor) {
|
||
tips += '<br/><font style="font-size: 10px">投运 : /</font>';
|
||
tips += '<br/><font style="font-size: 10px">热备用 : /</font>';
|
||
tips += '<br/><font style="font-size: 10px">停运 : /</font>';
|
||
tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
|
||
tips+='<br/><font style="font-size: 10px">/</font>';
|
||
}else{
|
||
for (var i = 0; i < 3; i++) {
|
||
tips+='<br/><font style="font-size: 10px">'+params[i].seriesName+' : '+params[i].value+'</font>';
|
||
}
|
||
tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
|
||
var onlineRate;
|
||
if(Number(params[3].value)===3.14159){
|
||
onlineRate='暂无数据';
|
||
}else if(Number(params[3].value)===3.1415){
|
||
onlineRate='/';
|
||
}else{
|
||
onlineRate=params[3].value;
|
||
}
|
||
tips+='<br/><font style="font-size: 10px">'+onlineRate+'</font>';
|
||
}
|
||
return tips;
|
||
}
|
||
},
|
||
//控制图标在dataroom中的位置大小
|
||
grid: {
|
||
left: '1%',
|
||
right: '11%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: areas,
|
||
name: '地区\n(终端个数)\n',
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show:true,
|
||
interval: 0,
|
||
rotate:route,
|
||
fontSize:10
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '%',
|
||
max: 100
|
||
}],
|
||
series: [{
|
||
name: '投运',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: normal
|
||
}, {
|
||
name: '热备用',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: breaks
|
||
}, {
|
||
name: '停运',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: shutdown
|
||
},{
|
||
name: '在线率',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
barMaxWidth: barMax,
|
||
data: rate
|
||
}]
|
||
};
|
||
var district = echarts.init(document.getElementById('areaDepts'));
|
||
district.setOption(option);
|
||
district.on('click', function (params) {
|
||
if (getRole("/pqs9000/business/runtime") === 1) {
|
||
var city=params.data.areaIndex;
|
||
window.top.addTab('runtime?area='+city, '终端运行情况')
|
||
}
|
||
});
|
||
}
|
||
|
||
//填充区域表格
|
||
function initAreaTable(data) {
|
||
var height = picHeight - 50;
|
||
if (data == null) {
|
||
data = [];
|
||
}
|
||
$("#areaTable").DataTable({
|
||
data: data,
|
||
autoWidth: false,
|
||
order:[1,"desc"],
|
||
columnDefs : [
|
||
{ orderable: false, targets: [0,2,3,4] }
|
||
],
|
||
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 === buttonname) {
|
||
if(full.amounts==0){
|
||
return "0";
|
||
}
|
||
return full.amounts;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "0";
|
||
}
|
||
return full.gwamounts;
|
||
}
|
||
}, type: "number-fate"},
|
||
{
|
||
data: 'status.normalData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.normalData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.normalData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{
|
||
data: 'status.breaksData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.breaksData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.breaksData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{
|
||
data: 'status.shutdownData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.shutdownData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.shutdownData;
|
||
}
|
||
}, type: "number-fate"
|
||
}, {data:'online', render:function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
data = full.online;
|
||
} else {
|
||
data = full.gwonline;
|
||
}
|
||
if (Number(data) === 3.1415) {
|
||
return "/";
|
||
} else if (Number(data) === 3.14159) {
|
||
return "（暂无数据）";
|
||
} else {
|
||
return data;
|
||
}
|
||
}, type: "number-fate"},
|
||
],
|
||
})
|
||
}
|
||
|
||
|
||
//按终端厂家进行统计
|
||
function drawCompanyPic(companys, lineFeed,route) {
|
||
$("#company").css("height", picHeight);
|
||
var run = [];
|
||
var breaks = [];
|
||
var shutdown = [];
|
||
var rate=[];
|
||
var areas = [];
|
||
if (null != companys) {
|
||
for(var i=0;i<companys.length;i++){
|
||
var monitors;
|
||
var onlineRate;
|
||
if (tiggleValue === buttonname) {
|
||
monitors=companys[i].amounts;
|
||
areas[i] = companys[i].name + lineFeed+"(" + companys[i].amounts + ")";
|
||
onlineRate = Number(companys[i].online);
|
||
run[i]=companys[i].status.normal;
|
||
breaks[i]=companys[i].status.breaks;
|
||
shutdown[i]=companys[i].status.shutdown;
|
||
} else {
|
||
monitors=companys[i].gwamounts;
|
||
areas[i] = companys[i].name + lineFeed+"(" + companys[i].gwamounts + ")";
|
||
onlineRate = Number(companys[i].gwonline);
|
||
if(null!==companys[i].gdStatus){
|
||
run[i] = companys[i].gdStatus.normal;
|
||
breaks[i] = companys[i].gdStatus.breaks;
|
||
shutdown[i] = companys[i].gdStatus.shutdown;
|
||
}else{
|
||
var singleData = {};
|
||
var item = {};
|
||
singleData.value = 3.1415;
|
||
item.color = noMonitor;
|
||
singleData.itemStyle = item;
|
||
run[i] = singleData;
|
||
breaks[i] = 0;
|
||
shutdown[i] = 0;
|
||
}
|
||
}
|
||
if(Number(monitors)===0){
|
||
var singleData={};
|
||
var normal={};
|
||
var itemStyle={};
|
||
singleData.value=3.1415;
|
||
normal.color=noMonitor;
|
||
itemStyle.normal=normal;
|
||
singleData.itemStyle=itemStyle;
|
||
run[i]=singleData;
|
||
rate[i]=singleData;
|
||
breaks[i]=0;
|
||
shutdown[i]=0;
|
||
}else{
|
||
var singleData={};
|
||
var normal={};
|
||
var itemStyle={};
|
||
normal.color = getColor(onlineRate);
|
||
if(onlineRate<3.1414){
|
||
singleData.value = 3.1415;
|
||
normal.actual = onlineRate;
|
||
}else{
|
||
singleData.value = onlineRate;
|
||
}
|
||
itemStyle.normal=normal;
|
||
singleData.itemStyle=itemStyle;
|
||
rate[i]=singleData;
|
||
}
|
||
}
|
||
}
|
||
var option = {
|
||
backgroundColor: canvasBG,//背景色
|
||
title: {
|
||
text: '终端厂家',
|
||
left: '50%',
|
||
padding: [
|
||
15, // 上
|
||
0, // 右
|
||
0, // 下
|
||
0, // 左
|
||
]
|
||
},
|
||
color: [runColor, breaksColor, grey],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
position: function (point, params, dom, rect, size) {
|
||
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||
// 提示框位置
|
||
var x = 0; // x坐标位置
|
||
var y = 0; // y坐标位置
|
||
// 当前鼠标位置
|
||
var pointX = point[0];
|
||
var pointY = point[1];
|
||
// 外层div大小
|
||
// var viewWidth = size.viewSize[0];
|
||
// var viewHeight = size.viewSize[1];
|
||
// 提示框大小
|
||
var boxWidth = size.contentSize[0];
|
||
var boxHeight = size.contentSize[1];
|
||
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||
if (boxWidth > pointX) {
|
||
x = 5;
|
||
} else { // 左边放的下
|
||
x = pointX - boxWidth;
|
||
}
|
||
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||
if (boxHeight > pointY) {
|
||
y = 5;
|
||
} else { // 上边放得下
|
||
y = pointY - boxHeight;
|
||
}
|
||
return [x, y];
|
||
},
|
||
formatter: function (params) {
|
||
var tips="";
|
||
tips+='<font style="font-size: 12px">'+params[0].name+'</font>';
|
||
var color = params[0].color;
|
||
tips +='<br/><font style="font-size: 12px">终端状态(%)</font>';
|
||
if (color === noMonitor) {
|
||
tips += '<br/><font style="font-size: 10px">投运 : /</font>';
|
||
tips += '<br/><font style="font-size: 10px">热备用 : /</font>';
|
||
tips += '<br/><font style="font-size: 10px">停运 : /</font>';
|
||
tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
|
||
tips+='<br/><font style="font-size: 10px">/</font>';
|
||
}else{
|
||
for (var i = 0; i < 3; i++) {
|
||
tips+='<br/><font style="font-size: 10px">'+params[i].seriesName+' : '+params[i].value+'</font>';
|
||
}
|
||
tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
|
||
var onlineRate;
|
||
if(Number(params[3].value)===3.14159){
|
||
onlineRate='暂无数据';
|
||
}else if(Number(params[3].value)===3.1415){
|
||
onlineRate='/';
|
||
}else{
|
||
onlineRate=params[3].value;
|
||
}
|
||
tips+='<br/><font style="font-size: 10px">'+onlineRate+'</font>';
|
||
}
|
||
return tips;
|
||
}
|
||
},
|
||
//控制图标在dataroom中的位置大小
|
||
grid: {
|
||
left: '1%',
|
||
right: '11%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: areas,
|
||
name: '终端厂家\n(终端个数)\n',
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show:true,
|
||
interval: 0,
|
||
rotate:route,
|
||
fontSize:10
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '%',
|
||
min: '0',
|
||
max: '100'
|
||
}],
|
||
series: [{
|
||
name: '投运',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: run
|
||
}, {
|
||
name: '热备用',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: breaks
|
||
}, {
|
||
name: '停运',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: shutdown
|
||
},{
|
||
name: '在线率',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
barMaxWidth: barMax,
|
||
data: rate
|
||
}]
|
||
};
|
||
var factory = echarts.init(document.getElementById('company'));
|
||
factory.setOption(option);
|
||
factory.on('click', function () {
|
||
if (getRole("/pqs9000/business/runtime") == 1) {
|
||
window.top.addTab('runtime', '终端运行情况')
|
||
}
|
||
});
|
||
}
|
||
|
||
//填充终端厂家表格
|
||
function initCompanyTable(data) {
|
||
var height = picHeight - 50;
|
||
if (data == null) {
|
||
data = [];
|
||
}
|
||
$("#companyTable").DataTable({
|
||
data: data,
|
||
autoWidth: false,
|
||
order:[1,"desc"],
|
||
columnDefs : [
|
||
{ orderable: false, targets: [0,2,3,4] }
|
||
],
|
||
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 === buttonname) {
|
||
if(full.amounts==0){
|
||
return "0";
|
||
}
|
||
return full.amounts;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "0";
|
||
}
|
||
return full.gwamounts;
|
||
}
|
||
}, type: "number-fate"},
|
||
{
|
||
data: 'status.normalData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.normalData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.normalData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{
|
||
data: 'status.breaksData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.breaksData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.breaksData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{
|
||
data: 'status.shutdownData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.shutdownData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.shutdownData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{data:'online', render:function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
data = full.online;
|
||
} else {
|
||
data = full.gwonline;
|
||
}
|
||
if (Number(data) === 3.1415) {
|
||
return "/";
|
||
} else if (Number(data) === 3.14159) {
|
||
return "（暂无数据）";
|
||
} else {
|
||
return data;
|
||
}
|
||
}, type: "number-fate"},
|
||
],
|
||
})
|
||
}
|
||
|
||
//按电压等级进行统计
|
||
function drawVolPic(companys, lineFeed,route) {
|
||
$("#vol").css("height", picHeight);
|
||
var run = [];
|
||
var breaks = [];
|
||
var shutdown = [];
|
||
var rate=[];
|
||
var areas = [];
|
||
if (null != companys) {
|
||
for(var i=0;i<companys.length;i++){
|
||
var monitors;
|
||
var onlineRate;
|
||
if (tiggleValue === buttonname) {
|
||
monitors=companys[i].amounts;
|
||
areas[i] = companys[i].name + lineFeed+"(" + companys[i].amounts + ")";
|
||
onlineRate = Number(companys[i].online);
|
||
run[i]=companys[i].status.normal;
|
||
breaks[i]=companys[i].status.breaks;
|
||
shutdown[i]=companys[i].status.shutdown;
|
||
} else {
|
||
monitors=companys[i].gwamounts;
|
||
areas[i] = companys[i].name + lineFeed+"(" + companys[i].gwamounts + ")";
|
||
onlineRate = Number(companys[i].gwonline);
|
||
if(null!==companys[i].gdStatus){
|
||
run[i] = companys[i].gdStatus.normal;
|
||
breaks[i] = companys[i].gdStatus.breaks;
|
||
shutdown[i] = companys[i].gdStatus.shutdown;
|
||
}else{
|
||
var singleData = {};
|
||
var item = {};
|
||
singleData.value = 3.1415;
|
||
item.color = noMonitor;
|
||
singleData.itemStyle = item;
|
||
run[i] = singleData;
|
||
breaks[i] = 0;
|
||
shutdown[i] = 0;
|
||
}
|
||
}
|
||
if(Number(monitors)===0){
|
||
var singleData={};
|
||
var normal={};
|
||
var itemStyle={};
|
||
singleData.value=3.1415;
|
||
normal.color=noMonitor;
|
||
itemStyle.normal=normal;
|
||
singleData.itemStyle=itemStyle;
|
||
run[i]=singleData;
|
||
rate[i]=singleData;
|
||
breaks[i]=0;
|
||
shutdown[i]=0;
|
||
}else{
|
||
var singleData={};
|
||
var normal={};
|
||
var itemStyle={};
|
||
normal.color = getColor(onlineRate);
|
||
if(onlineRate<3.1414){
|
||
singleData.value = 3.1415;
|
||
normal.actual = onlineRate;
|
||
}else{
|
||
singleData.value = onlineRate;
|
||
}
|
||
itemStyle.normal=normal;
|
||
singleData.itemStyle=itemStyle;
|
||
rate[i]=singleData;
|
||
}
|
||
}
|
||
}
|
||
var option = {
|
||
backgroundColor: canvasBG,//背景色
|
||
title: {
|
||
text: '电压等级',
|
||
left: '50%',
|
||
padding: [
|
||
15, // 上
|
||
0, // 右
|
||
0, // 下
|
||
0, // 左
|
||
]
|
||
},
|
||
color: [runColor, breaksColor, grey],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
position: function (point, params, dom, rect, size) {
|
||
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||
// 提示框位置
|
||
var x = 0; // x坐标位置
|
||
var y = 0; // y坐标位置
|
||
// 当前鼠标位置
|
||
var pointX = point[0];
|
||
var pointY = point[1];
|
||
// 外层div大小
|
||
// var viewWidth = size.viewSize[0];
|
||
// var viewHeight = size.viewSize[1];
|
||
// 提示框大小
|
||
var boxWidth = size.contentSize[0];
|
||
var boxHeight = size.contentSize[1];
|
||
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||
if (boxWidth > pointX) {
|
||
x = 5;
|
||
} else { // 左边放的下
|
||
x = pointX - boxWidth;
|
||
}
|
||
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||
if (boxHeight > pointY) {
|
||
y = 5;
|
||
} else { // 上边放得下
|
||
y = pointY - boxHeight;
|
||
}
|
||
return [x, y];
|
||
},
|
||
formatter: function (params) {
|
||
var tips="";
|
||
tips+='<font style="font-size: 12px">'+params[0].name+'</font>';
|
||
var color = params[0].color;
|
||
tips +='<br/><font style="font-size: 12px">终端状态(%)</font>';
|
||
if (color === noMonitor) {
|
||
tips += '<br/><font style="font-size: 10px">投运 : /</font>';
|
||
tips += '<br/><font style="font-size: 10px">热备用 : /</font>';
|
||
tips += '<br/><font style="font-size: 10px">停运 : /</font>';
|
||
tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
|
||
tips+='<br/><font style="font-size: 10px">/</font>';
|
||
}else{
|
||
for (var i = 0; i < 3; i++) {
|
||
tips+='<br/><font style="font-size: 10px">'+params[i].seriesName+' : '+params[i].value+'</font>';
|
||
}
|
||
tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
|
||
var onlineRate;
|
||
if(Number(params[3].value)===3.14159){
|
||
onlineRate='暂无数据';
|
||
}else if(Number(params[3].value)===3.1415){
|
||
onlineRate='/';
|
||
}else{
|
||
onlineRate=params[3].value;
|
||
}
|
||
tips+='<br/><font style="font-size: 10px">'+onlineRate+'</font>';
|
||
}
|
||
return tips;
|
||
}
|
||
},
|
||
//控制图标在dataroom中的位置大小
|
||
grid: {
|
||
left: '1%',
|
||
right: '11%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: areas,
|
||
name: '电压等级\n(终端个数)\n',
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show:true,
|
||
interval: 0,
|
||
rotate:route,
|
||
fontSize:10
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '%',
|
||
min: '0',
|
||
max: '100'
|
||
}],
|
||
series: [{
|
||
name: '投运',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: run
|
||
}, {
|
||
name: '热备用',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: breaks
|
||
}, {
|
||
name: '停运',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: shutdown
|
||
},{
|
||
name: '在线率',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
barMaxWidth: barMax,
|
||
data: rate
|
||
}]
|
||
};
|
||
var factory = echarts.init(document.getElementById('vol'));
|
||
factory.setOption(option);
|
||
factory.on('click', function () {
|
||
if (getRole("/pqs9000/business/runtime") == 1) {
|
||
window.top.addTab('runtime', '终端运行情况')
|
||
}
|
||
});
|
||
}
|
||
|
||
//填充电压等级表格
|
||
function initVolTable(data) {
|
||
var height = picHeight - 50;
|
||
if (data == null) {
|
||
data = [];
|
||
}
|
||
$("#volTable").DataTable({
|
||
data: data,
|
||
autoWidth: false,
|
||
order:[1,"desc"],
|
||
columnDefs : [
|
||
{ orderable: false, targets: [0,2,3,4] }
|
||
],
|
||
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 === buttonname) {
|
||
if(full.amounts==0){
|
||
return "0";
|
||
}
|
||
return full.amounts;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "0";
|
||
}
|
||
return full.gwamounts;
|
||
}
|
||
}, type: "number-fate"},
|
||
{
|
||
data: 'status.normalData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.normalData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.normalData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{
|
||
data: 'status.breaksData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.breaksData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.breaksData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{
|
||
data: 'status.shutdownData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.shutdownData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.shutdownData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{data:'online', render:function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
data = full.online;
|
||
} else {
|
||
data = full.gwonline;
|
||
}
|
||
if (Number(data) === 3.1415) {
|
||
return "/";
|
||
} else if (Number(data) === 3.14159) {
|
||
return "（暂无数据）";
|
||
} else {
|
||
return data;
|
||
}
|
||
}, type: "number-fate"},
|
||
],
|
||
})
|
||
}
|
||
|
||
//按干扰源类型进行统计
|
||
function drawloadtypePic(companys, lineFeed,route) {
|
||
$("#loadtypep").css("height", picHeight);
|
||
var run = [];
|
||
var breaks = [];
|
||
var shutdown = [];
|
||
var rate=[];
|
||
var areas = [];
|
||
if (null != companys) {
|
||
for(var i=0;i<companys.length;i++){
|
||
var monitors;
|
||
var onlineRate;
|
||
if (tiggleValue === buttonname) {
|
||
monitors=companys[i].amounts;
|
||
areas[i] = companys[i].name + lineFeed+"(" + companys[i].amounts + ")";
|
||
onlineRate = Number(companys[i].online);
|
||
run[i]=companys[i].status.normal;
|
||
breaks[i]=companys[i].status.breaks;
|
||
shutdown[i]=companys[i].status.shutdown;
|
||
} else {
|
||
monitors=companys[i].gwamounts;
|
||
areas[i] = companys[i].name + lineFeed+"(" + companys[i].gwamounts + ")";
|
||
onlineRate = Number(companys[i].gwonline);
|
||
if(null!==companys[i].gdStatus){
|
||
run[i] = companys[i].gdStatus.normal;
|
||
breaks[i] = companys[i].gdStatus.breaks;
|
||
shutdown[i] = companys[i].gdStatus.shutdown;
|
||
}else{
|
||
var singleData = {};
|
||
var item = {};
|
||
singleData.value = 3.1415;
|
||
item.color = noMonitor;
|
||
singleData.itemStyle = item;
|
||
run[i] = singleData;
|
||
breaks[i] = 0;
|
||
shutdown[i] = 0;
|
||
}
|
||
}
|
||
if(Number(monitors)===0){
|
||
var singleData={};
|
||
var normal={};
|
||
var itemStyle={};
|
||
singleData.value=3.1415;
|
||
normal.color=noMonitor;
|
||
itemStyle.normal=normal;
|
||
singleData.itemStyle=itemStyle;
|
||
run[i]=singleData;
|
||
rate[i]=singleData;
|
||
breaks[i]=0;
|
||
shutdown[i]=0;
|
||
}else{
|
||
var singleData={};
|
||
var normal={};
|
||
var itemStyle={};
|
||
normal.color = getColor(onlineRate);
|
||
if(onlineRate<3.1414){
|
||
singleData.value = 3.1415;
|
||
normal.actual = onlineRate;
|
||
}else{
|
||
singleData.value = onlineRate;
|
||
}
|
||
itemStyle.normal=normal;
|
||
singleData.itemStyle=itemStyle;
|
||
rate[i]=singleData;
|
||
}
|
||
}
|
||
}
|
||
var option = {
|
||
backgroundColor: canvasBG,//背景色
|
||
title: {
|
||
text: '干扰源类型',
|
||
left: '50%',
|
||
padding: [
|
||
15, // 上
|
||
0, // 右
|
||
0, // 下
|
||
0, // 左
|
||
]
|
||
},
|
||
color: [runColor, breaksColor, grey],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
position: function (point, params, dom, rect, size) {
|
||
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||
// 提示框位置
|
||
var x = 0; // x坐标位置
|
||
var y = 0; // y坐标位置
|
||
// 当前鼠标位置
|
||
var pointX = point[0];
|
||
var pointY = point[1];
|
||
// 外层div大小
|
||
// var viewWidth = size.viewSize[0];
|
||
// var viewHeight = size.viewSize[1];
|
||
// 提示框大小
|
||
var boxWidth = size.contentSize[0];
|
||
var boxHeight = size.contentSize[1];
|
||
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||
if (boxWidth > pointX) {
|
||
x = 5;
|
||
} else { // 左边放的下
|
||
x = pointX - boxWidth;
|
||
}
|
||
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||
if (boxHeight > pointY) {
|
||
y = 5;
|
||
} else { // 上边放得下
|
||
y = pointY - boxHeight;
|
||
}
|
||
return [x, y];
|
||
},
|
||
formatter: function (params) {
|
||
var tips="";
|
||
tips+='<font style="font-size: 12px">'+params[0].name+'</font>';
|
||
var color = params[0].color;
|
||
tips +='<br/><font style="font-size: 12px">终端状态(%)</font>';
|
||
if (color === noMonitor) {
|
||
tips += '<br/><font style="font-size: 10px">投运 : /</font>';
|
||
tips += '<br/><font style="font-size: 10px">热备用 : /</font>';
|
||
tips += '<br/><font style="font-size: 10px">停运 : /</font>';
|
||
tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
|
||
tips+='<br/><font style="font-size: 10px">/</font>';
|
||
}else{
|
||
for (var i = 0; i < 3; i++) {
|
||
tips+='<br/><font style="font-size: 10px">'+params[i].seriesName+' : '+params[i].value+'</font>';
|
||
}
|
||
tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
|
||
var onlineRate;
|
||
if(Number(params[3].value)===3.14159){
|
||
onlineRate='暂无数据';
|
||
}else if(Number(params[3].value)===3.1415){
|
||
onlineRate='/';
|
||
}else{
|
||
onlineRate=params[3].value;
|
||
}
|
||
tips+='<br/><font style="font-size: 10px">'+onlineRate+'</font>';
|
||
}
|
||
return tips;
|
||
}
|
||
},
|
||
//控制图标在dataroom中的位置大小
|
||
grid: {
|
||
left: '1%',
|
||
right: '11%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: areas,
|
||
name: '干扰源类型\n(终端个数)\n',
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show:true,
|
||
interval: 0,
|
||
rotate:route,
|
||
fontSize:10
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '%',
|
||
min: '0',
|
||
max: '100'
|
||
}],
|
||
series: [{
|
||
name: '投运',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: run
|
||
}, {
|
||
name: '热备用',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: breaks
|
||
}, {
|
||
name: '停运',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barMaxWidth: barMax,
|
||
data: shutdown
|
||
},{
|
||
name: '在线率',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
barMaxWidth: barMax,
|
||
data: rate
|
||
}]
|
||
};
|
||
var factory = echarts.init(document.getElementById('loadtypep'));
|
||
factory.setOption(option);
|
||
factory.on('click', function () {
|
||
if (getRole("/pqs9000/business/runtime") == 1) {
|
||
window.top.addTab('runtime', '终端运行情况')
|
||
}
|
||
});
|
||
}
|
||
|
||
//填充干扰源类型表格
|
||
function initloadtypeTable(data) {
|
||
var height = picHeight - 50;
|
||
if (data == null) {
|
||
data = [];
|
||
}
|
||
$("#loadtypeTable").DataTable({
|
||
data: data,
|
||
autoWidth: false,
|
||
order:[1,"desc"],
|
||
columnDefs : [
|
||
{ orderable: false, targets: [0,2,3,4] }
|
||
],
|
||
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 === buttonname) {
|
||
if(full.amounts==0){
|
||
return "0";
|
||
}
|
||
return full.amounts;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "0";
|
||
}
|
||
return full.gwamounts;
|
||
}
|
||
}, type: "number-fate"},
|
||
{
|
||
data: 'status.normalData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.normalData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.normalData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{
|
||
data: 'status.breaksData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.breaksData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.breaksData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{
|
||
data: 'status.shutdownData', render: function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
if(full.amounts==0){
|
||
return "/";
|
||
}
|
||
return full.status.shutdownData;
|
||
} else {
|
||
if(full.gwamounts==0){
|
||
return "/";
|
||
}
|
||
if(null===full.gdStatus){
|
||
return "0"
|
||
}
|
||
return full.gdStatus.shutdownData;
|
||
}
|
||
}, type: "number-fate"
|
||
},
|
||
{data:'online', render:function (data, type, full, meta) {
|
||
if (tiggleValue === buttonname) {
|
||
data = full.online;
|
||
} else {
|
||
data = full.gwonline;
|
||
}
|
||
if (Number(data) === 3.1415) {
|
||
return "/";
|
||
} else if (Number(data) === 3.14159) {
|
||
return "（暂无数据）";
|
||
} else {
|
||
return data;
|
||
}
|
||
}, type: "number-fate"},
|
||
],
|
||
})
|
||
}
|
||
|
||
//特殊处理，表头紧缩问题--start
|
||
var it = null;
|
||
|
||
function startQuery() {
|
||
//实时刷新时间单位为毫秒
|
||
it = setInterval('refreshQuery()', 100);
|
||
|
||
}
|
||
|
||
/* 刷新查询 */
|
||
function refreshQuery() {
|
||
if(showtype == 0){
|
||
$("#areaDepts").css("display", "");
|
||
$("#areaT").css("display", "");
|
||
$("#vol").css("display", "none");
|
||
$("#volT").css("display", "none");
|
||
$("#company").css("display", "none");
|
||
$("#companyT").css("display", "none");
|
||
$("#loadtypep").css("display", "none");
|
||
$("#loadtypeT").css("display", "none");
|
||
|
||
if (parseInt(areLength) > parseInt(barUpperLimit7)) {
|
||
drawAreaPic(areaResult, noLineFeed,barRouteIncline);
|
||
} else {
|
||
drawAreaPic(areaResult, lineFeed,barRouteZero);
|
||
}
|
||
initAreaTable(areaResult);
|
||
}else if(showtype == 1){
|
||
$("#areaDepts").css("display", "none");
|
||
$("#areaT").css("display", "none");
|
||
$("#vol").css("display", "");
|
||
$("#volT").css("display", "");
|
||
$("#company").css("display", "none");
|
||
$("#companyT").css("display", "none");
|
||
$("#loadtypep").css("display", "none");
|
||
$("#loadtypeT").css("display", "none");
|
||
|
||
if (parseInt(companyLength) > parseInt(barUpperLimit7)) {
|
||
drawVolPic(volResult, noLineFeed,barRouteIncline);
|
||
} else {
|
||
drawVolPic(volResult, lineFeed,barRouteZero);
|
||
}
|
||
initVolTable(volResult);
|
||
}else if(showtype == 2){
|
||
$("#areaDepts").css("display", "none");
|
||
$("#areaT").css("display", "none");
|
||
$("#vol").css("display", "none");
|
||
$("#volT").css("display", "none");
|
||
$("#company").css("display", "");
|
||
$("#companyT").css("display", "");
|
||
$("#loadtypep").css("display", "none");
|
||
$("#loadtypeT").css("display", "none");
|
||
|
||
if (parseInt(companyLength) > parseInt(barUpperLimit7)) {
|
||
drawCompanyPic(companyResult, noLineFeed,barRouteIncline);
|
||
} else {
|
||
drawCompanyPic(companyResult, lineFeed,barRouteZero);
|
||
}
|
||
initCompanyTable(companyResult);
|
||
}else if(showtype == 3){
|
||
$("#areaDepts").css("display", "none");
|
||
$("#areaT").css("display", "none");
|
||
$("#company").css("display", "none");
|
||
$("#companyT").css("display", "none");
|
||
$("#vol").css("display", "none");
|
||
$("#volT").css("display", "none");
|
||
$("#loadtypep").css("display", "");
|
||
$("#loadtypeT").css("display", "");
|
||
|
||
if (parseInt(companyLength) > parseInt(barUpperLimit7)) {
|
||
drawloadtypePic(loadtypeResult, noLineFeed,barRouteIncline);
|
||
} else {
|
||
drawloadtypePic(loadtypeResult, lineFeed,barRouteZero);
|
||
}
|
||
initloadtypeTable(loadtypeResult);
|
||
}
|
||
window.clearInterval(it)
|
||
}
|
||
|
||
//根据在线率获取颜色
|
||
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;
|
||
}
|
||
}
|
||
|
||
|
||
//开关触发图片更新
|
||
function reDrawAllPic() {
|
||
if(showtype == 0){
|
||
if (areaResult === null) {
|
||
drawAreaPic(null);
|
||
initAreaTable(null);
|
||
} else {
|
||
if (parseInt(areLength) > parseInt(barUpperLimit7)) {
|
||
drawAreaPic(areaResult, noLineFeed,barRouteIncline);
|
||
} else {
|
||
drawAreaPic(areaResult, lineFeed,barRouteZero);
|
||
}
|
||
initAreaTable(areaResult);
|
||
}
|
||
}else if(showtype == 1){
|
||
if (volResult === null) {
|
||
drawVolPic(null);
|
||
initVolTable(null);
|
||
} else {
|
||
if (parseInt(volLength) > parseInt(barUpperLimit7)) {
|
||
drawVolPic(volResult, noLineFeed,barRouteIncline);
|
||
} else {
|
||
drawVolPic(volResult, lineFeed,barRouteZero);
|
||
}
|
||
initVolTable(volResult);
|
||
}
|
||
}else if(showtype == 2){
|
||
if (companyResult === null) {
|
||
drawCompanyPic(null);
|
||
initCompanyTable(null);
|
||
} else {
|
||
if (parseInt(companyLength) > parseInt(barUpperLimit7)) {
|
||
drawCompanyPic(companyResult, noLineFeed,barRouteIncline);
|
||
} else {
|
||
drawCompanyPic(companyResult, lineFeed,barRouteZero);
|
||
}
|
||
initCompanyTable(companyResult);
|
||
}
|
||
}else if(showtype == 3){
|
||
if (loadtypeResult === null) {
|
||
drawloadtypePic(null);
|
||
initloadtypeTable(null);
|
||
} else {
|
||
if (parseInt(loadtypeLength) > parseInt(barUpperLimit7)) {
|
||
drawloadtypePic(loadtypeResult, noLineFeed,barRouteIncline);
|
||
} else {
|
||
drawloadtypePic(loadtypeResult, lineFeed,barRouteZero);
|
||
}
|
||
initloadtypeTable(companyResult);
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 数字排序自定义start
|
||
*/
|
||
jQuery.fn.dataTableExt.oSort['number-fate-asc'] = function (s1, s2) {
|
||
if(s1==="/" ){
|
||
s1=0;
|
||
}
|
||
if(s2==="/" ){
|
||
s2=0;
|
||
}
|
||
return Number(s1) - Number(s2);
|
||
};
|
||
|
||
jQuery.fn.dataTableExt.oSort['number-fate-desc'] = function (s1, s2) {
|
||
if(s1==="/" ){
|
||
s1=0;
|
||
}
|
||
if(s2==="/" ){
|
||
s2=0;
|
||
}
|
||
return Number(s2) - Number(s1);
|
||
};
|
||
|
||
function loadselect(dictypeName,div){
|
||
var part='#'+div;
|
||
$(part).find("option").remove();
|
||
$.ajax({
|
||
method : "post",
|
||
url : "/pqs9000/device/getselect",
|
||
data : {
|
||
dictypeName:dictypeName
|
||
},
|
||
async:false,
|
||
success : function(data) {
|
||
if(data == null){
|
||
var message = dictypeName + '信息加载失败';
|
||
layer.msg(message,{icon:1,time:1000});
|
||
}else{
|
||
var option0 = $("<option selected value='"
|
||
+ null + "'>"
|
||
+ "全部" + "</option>");
|
||
$(part).append(option0);
|
||
$.each(data, function(i, item) {
|
||
var option = $("<option value='"
|
||
+ item.dicIndex + "'>"
|
||
+ item.dicName + "</option>");
|
||
$(part).append(option);
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|