初始化项目
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
<%@ 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}"/>
|
||||
<!DOCTYPE html>
|
||||
<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/bootstrap/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/basic.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/tip.css">
|
||||
<style>
|
||||
html, body {
|
||||
background-color: #F9F9F9 !important;
|
||||
}
|
||||
|
||||
.wanzhengdiv {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<%--<div id="message">aaa</div>--%>
|
||||
<div class="container-fluid">
|
||||
<div class="form-inline mt10 wanzhengdiv">
|
||||
<div class="form-group has-feedback mr10">
|
||||
<label>统计类型：</label>
|
||||
<input type="checkbox" checked class="wanzheng"/>
|
||||
<button id="helper" type="button" class="btn btn-primary tip tip-bottom" data-tip="数据完整性详解">
|
||||
<i class="glyphicon glyphicon-info-sign" style="margin-left: -3px;margin-right: -3px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<%--区域模块--%>
|
||||
<div class="col-sm-12" id="area"></div>
|
||||
<%--电压等级、终端厂家模块--%>
|
||||
<div class="col-sm-6" id="voltage"></div>
|
||||
<div class="col-sm-6" id="company"></div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="startTime">
|
||||
<input type="hidden" id="endTime">
|
||||
<input type="hidden" id="gist">
|
||||
<input type="hidden" id="type">
|
||||
<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}/jspJS/utils/loading.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/getTime.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/color.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
|
||||
<script src="${ctx}/js/basic.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/helper.js"></script>
|
||||
<script src="${ctx}/jspJS/overview/dataIntegrality.js"></script>
|
||||
<script type="text/javascript">
|
||||
$("#helper").click(function (){
|
||||
toHelper("#jcdsjwzx");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
929
pqs9000/src/main/webapp/WEB-INF/views/overview/deviceStatus.jsp
Normal file
929
pqs9000/src/main/webapp/WEB-INF/views/overview/deviceStatus.jsp
Normal file
@@ -0,0 +1,929 @@
|
||||
<%@ 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/bootstrap/bootstrap.min.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/basic.css">
|
||||
<style>
|
||||
html, body {
|
||||
background-color: #F9F9F9 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.wanzhengdiv {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="form-inline mt10 wanzhengdiv">
|
||||
<div class="form-group has-feedback mr10">
|
||||
<label>统计类型：</label>
|
||||
<input type="checkbox" checked class="wanzheng"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<%--区域模块--%>
|
||||
<div class="col-sm-7" id="area"></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"></div>
|
||||
<div class="col-sm-5" id="companyT">
|
||||
<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>
|
||||
</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/datatables/datatables.jquery.js"></script>
|
||||
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
|
||||
<script src="${ctx}/js/plugin/layui/layer.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/loading.js"></script>
|
||||
<script src="${ctx}/js/color.js"></script>
|
||||
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.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/getTime.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
|
||||
<script src="${ctx}/js/basic.js"></script>
|
||||
<script>
|
||||
var picHeight;
|
||||
var areLength;//区域的个数
|
||||
var companyLength;//厂家个数
|
||||
var tiggleValue = "";
|
||||
var areaResult = null;
|
||||
var companyResult = null;
|
||||
var buttonname;
|
||||
var companyname;
|
||||
$(function () {
|
||||
var end = getEndTime();
|
||||
var start = getMonthStartTime(end);
|
||||
|
||||
$.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;
|
||||
}
|
||||
});
|
||||
|
||||
//开关初始化
|
||||
$(".wanzheng").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();
|
||||
}
|
||||
});
|
||||
var i;
|
||||
picHeight = $(window).height() * 0.5 - 5;
|
||||
endTime = getEndTime();
|
||||
startTime = getMonthStartTime(endTime);
|
||||
$.ajax({
|
||||
url: '/pqs9000/overview/deviceStatus',
|
||||
type: 'post',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
startTime: startTime,
|
||||
endTime: endTime
|
||||
},
|
||||
beforeSend: function () {
|
||||
i = ityzl_SHOW_LOAD_LAYER();
|
||||
},
|
||||
success: function (data) {
|
||||
if (data.code === 500 | data.body === null) {
|
||||
companyResult = null;
|
||||
areaResult = null;
|
||||
} else {
|
||||
areLength = data.body.area === null ? 0 : data.body.area.length;
|
||||
companyLength = data.body.interval === null ? 0 : data.body.interval.length;
|
||||
companyResult = data.body.interval;
|
||||
areaResult = data.body.area;
|
||||
}
|
||||
startQuery();
|
||||
//***********关闭loading
|
||||
ityzl_CLOSE_LOAD_LAYER(i);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//按区域进行统计
|
||||
function drawAreaPic(area, lineFeed, route) {
|
||||
//给div指定宽高
|
||||
$("#area").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;
|
||||
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;
|
||||
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: '区域',
|
||||
x: 'center',
|
||||
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: '%',
|
||||
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('area'));
|
||||
district.setOption(option);
|
||||
district.on('click', function (params) {
|
||||
var city=params.data.areaIndex;
|
||||
if (getRole("/pqs9000/business/runtime") === 1) {
|
||||
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: '46%',
|
||||
padding: [
|
||||
15, // 上
|
||||
0, // 右
|
||||
0, // 下
|
||||
0, // 左
|
||||
]
|
||||
},
|
||||
// color: [green, yellow, grey],
|
||||
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: 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 () {
|
||||
// var city=params.data.areaIndex;
|
||||
alert(1)
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
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() {
|
||||
var width = $("#companyT").width();
|
||||
if (width > 100) {
|
||||
if (parseInt(areLength) > parseInt(barUpperLimit7)) {
|
||||
drawAreaPic(areaResult, noLineFeed, barRouteIncline);
|
||||
} else {
|
||||
drawAreaPic(areaResult, lineFeed, barRouteZero);
|
||||
}
|
||||
if (parseInt(companyLength) > parseInt(barUpperLimit7)) {
|
||||
drawCompanyPic(companyResult, noLineFeed, barRouteIncline);
|
||||
} else {
|
||||
drawCompanyPic(companyResult, lineFeed, barRouteZero);
|
||||
}
|
||||
initAreaTable(areaResult);
|
||||
initCompanyTable(companyResult);
|
||||
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 (areaResult === null) {
|
||||
drawAreaPic(null);
|
||||
initAreaTable(null);
|
||||
} else {
|
||||
if (parseInt(areLength) > parseInt(barUpperLimit7)) {
|
||||
drawAreaPic(areaResult, noLineFeed, barRouteIncline);
|
||||
} else {
|
||||
drawAreaPic(areaResult, lineFeed, barRouteZero);
|
||||
}
|
||||
initAreaTable(areaResult);
|
||||
}
|
||||
if (companyResult === null) {
|
||||
drawCompanyPic(null);
|
||||
initCompanyTable(null);
|
||||
} else {
|
||||
if (parseInt(companyLength) > parseInt(barUpperLimit7)) {
|
||||
drawCompanyPic(companyResult, noLineFeed, barRouteIncline);
|
||||
} else {
|
||||
drawCompanyPic(companyResult, lineFeed, barRouteZero);
|
||||
}
|
||||
initCompanyTable(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);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
112
pqs9000/src/main/webapp/WEB-INF/views/overview/frequency.jsp
Normal file
112
pqs9000/src/main/webapp/WEB-INF/views/overview/frequency.jsp
Normal file
@@ -0,0 +1,112 @@
|
||||
<%@ 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}"/>
|
||||
<!DOCTYPE html>
|
||||
<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/bootstrap/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/basic.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/tip.css">
|
||||
<style>
|
||||
html, body {
|
||||
background-color: #F9F9F9 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 2px;
|
||||
border: 1px solid #696969;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<%--<div id="message">aaa</div>--%>
|
||||
<div class="container-fluid">
|
||||
<ul class="nav nav-pills nav-justified mt10" id="qualifiedTab">
|
||||
<li class="active"><a href="#steady" data-toggle="tab" id="allData">全部</a></li>
|
||||
<li><a href="#steady" data-toggle="tab" id="frequency">频率偏差</a></li>
|
||||
<li><a href="#steady" data-toggle="tab" id="flicker">闪变</a></li>
|
||||
<li><a href="#steady" data-toggle="tab" id="uBalance">电压不平衡</a></li>
|
||||
<li><a href="#steady" data-toggle="tab" id="harmVoltage">谐波电压</a></li>
|
||||
<li><a href="#steady" data-toggle="tab" id="voltageDeviation">电压偏差</a></li>
|
||||
<li><a href="#steady" data-toggle="tab" id="harmElec">谐波电流</a></li>
|
||||
<li><a href="#steady" data-toggle="tab" id="iNeg">负序电流</a></li>
|
||||
<li><a href="#steady" data-toggle="tab" id="inUharm">间谐波电压含有率</a></li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="steady">
|
||||
<%--区域模块--%>
|
||||
<div class="col-sm-12 single" id="area"></div>
|
||||
<%--电压等级、终端厂家模块--%>
|
||||
<div class="col-sm-6 single" id="voltage"></div>
|
||||
<div class="col-sm-6 single" id="loadType"></div>
|
||||
<div class="col-sm-12 allArea" id="table">
|
||||
<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>
|
||||
<th>谐波电流(%)</th>
|
||||
<th>负序电流(%)</th>
|
||||
<th>间谐波电压含有率(%)</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-sm-12 allArea" id="allArea"></div>
|
||||
<div>
|
||||
<button id="helper" type="button" style="z-index: 999;margin-left: -270px;margin-top: 3px;"
|
||||
class="btn tip tip-bottom" data-tip="合格率详解">
|
||||
<i class="glyphicon glyphicon-info-sign" style="margin-left: -3px;margin-right: -3px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="startTime">
|
||||
<input type="hidden" id="endTime">
|
||||
<input type="hidden" id="gist">
|
||||
<input type="hidden" id="type">
|
||||
<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/bootstrap/bootstrap.min.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/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}/jspJS/utils/getTime.js"></script>
|
||||
<script src="${ctx}/js/color.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
|
||||
<script src="${ctx}/jspJS/area/steadyCommon.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/tableSort.js"></script>
|
||||
<script src="${ctx}/js/basic.js"></script>
|
||||
<script src="${ctx}/jspJS/overview/frequency.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/helper.js"></script>
|
||||
<script>
|
||||
$("#helper").click(function () {
|
||||
toHelper("#wtzbhgl");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
<%@ 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}" />
|
||||
<!DOCTYPE html>
|
||||
<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/bootstrap/bootstrap.min.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/basic.css">
|
||||
<style>
|
||||
html,body{
|
||||
background-color: #F9F9F9 !important;
|
||||
}
|
||||
.wanzhengdiv{
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="form-inline mt10 wanzhengdiv">
|
||||
<div class="form-group has-feedback mr10" >
|
||||
<label >统计类型：</label>
|
||||
<input type="checkbox" checked class="wanzheng" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<%--区域模块--%>
|
||||
<div class="col-sm-8" id="area"></div>
|
||||
<div class="col-sm-4" id="areaT">
|
||||
<table id="areaTable" class="table table-striped table-bordered dataTable no-footer">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>区域</th>
|
||||
<th id="typeTitle">终端个数</th>
|
||||
<th>在线率(%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<%--终端厂家模块--%>
|
||||
<div class="col-sm-8" id="company"></div>
|
||||
<div class="col-sm-4" id="companyT">
|
||||
<table id="companyTable" class="table table-striped table-bordered dataTable no-footer">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>终端厂家</th>
|
||||
<th id="typeTitle1">终端个数</th>
|
||||
<th>在线率(%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="startTime">
|
||||
<input type="hidden" id="endTime">
|
||||
<input type="hidden" id="gist">
|
||||
<input type="hidden" id="type">
|
||||
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
|
||||
<script src="${ctx}/js/plugin/echarts/echarts.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}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
|
||||
<script src="${ctx}/js/plugin/layui/layer.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/loading.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/getTime.js"></script>
|
||||
<script src="${ctx}/js/color.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/basic.js"></script>
|
||||
<script src="${ctx}/jspJS/overview/onlineRate.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
920
pqs9000/src/main/webapp/WEB-INF/views/overview/overview.jsp
Normal file
920
pqs9000/src/main/webapp/WEB-INF/views/overview/overview.jsp
Normal file
@@ -0,0 +1,920 @@
|
||||
<%@ 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}"/>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>概览页面</title>
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/slide/reset.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/slide/slide.css">
|
||||
<link rel="stylesheet" href="${ctx}/jspCSS/overview/overview.css">
|
||||
<style>
|
||||
li {
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div id="divinfo" class="alert alert-info" role="alert"
|
||||
style="position:absolute;width:180px;top:0px;left:5px;padding:0px 15px 0px 15px;">
|
||||
<div id="msgInfo" class="alert alert-info"
|
||||
style="position:absolute;white-space:pre;width:180px;left: 0px;"></div>
|
||||
</div>
|
||||
<div id="slide3d" class="slide-carousel slide-3d">
|
||||
<ul class="item-list clearfix">
|
||||
<shiro:hasPermission name="/pqs9000/business/frequency">
|
||||
<li id="item0">
|
||||
<div style="position:absolute;z-index: 99">
|
||||
<div>
|
||||
<span class='fr font12' style="margin-left: 10px;margin-top: 20px"><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="item-content" id="frequency" titles="稳态指标合格率">
|
||||
</div>
|
||||
</li>
|
||||
</shiro:hasPermission>
|
||||
<shiro:hasPermission name="/pqs9000/business/powerquality">
|
||||
<li id="item1">
|
||||
<div style="position:absolute;z-index: 99;bottom: 10px;margin-left: 10px" >
|
||||
<div>
|
||||
<div class="mt10">
|
||||
<span class='inB smallBlock2' style="background-color:#2E8B57 "></span> 优质
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<span class='inB smallBlock2' style="background-color:#84983C"></span> 良好
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<span class='inB smallBlock2' style="background-color:#DAA520"></span> 合格
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<span class='inB smallBlock2' style="background-color:#C06825"></span> 较差
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<span class='inB smallBlock2' style="background-color:#A52a2a"></span> 极差
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-content" id="powerquality" titles="电能质量评估">
|
||||
</div>
|
||||
</li>
|
||||
</shiro:hasPermission>
|
||||
<shiro:hasPermission name="/pqs9000/business/devicestatus">
|
||||
<li id="item2">
|
||||
<div style="position:absolute;z-index: 99">
|
||||
<div>
|
||||
<span class=' font12 fontBold ' style="display: block;margin-left: 10px">终端状态(左柱) <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' style="display: block;margin-left: 10px;margin-top: 8px" > 终端在线率(右柱) <span class='info'><span class='inB smallBlock' style="background-color:#2E8B57 "></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="item-content" id="devicestatus" titles="终端状态">
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</shiro:hasPermission>
|
||||
<shiro:hasPermission name="/pqs9000/business/detaintegrality">
|
||||
<li id="item3">
|
||||
<div style="position:absolute;z-index: 99">
|
||||
<div>
|
||||
<span class='fr font12' style="margin-left: 10px;margin-top: 20px"><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="item-content" id="dataintegrality" titles="数据完整性">
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</shiro:hasPermission>
|
||||
</ul>
|
||||
<%--indicators--%>
|
||||
<div class="indicator-list">
|
||||
<shiro:hasPermission name="/pqs9000/business/frequency">
|
||||
<a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
|
||||
</shiro:hasPermission>
|
||||
<shiro:hasPermission name="/pqs9000/business/powerquality">
|
||||
<a href="javascript:void(0);" data-slide-index="1"></a>
|
||||
</shiro:hasPermission>
|
||||
<shiro:hasPermission name="/pqs9000/business/devicestatus">
|
||||
<a href="javascript:void(0);" data-slide-index="2"></a>
|
||||
</shiro:hasPermission>
|
||||
<shiro:hasPermission name="/pqs9000/business/detaintegrality">
|
||||
<a href="javascript:void(0);" data-slide-index="3"></a>
|
||||
</shiro:hasPermission>
|
||||
</div>
|
||||
<%--controls--%>
|
||||
<div class="controls">
|
||||
<a class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
|
||||
<a class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
|
||||
<script src="${ctx}/js/slide.min.js"></script>
|
||||
<script src="${ctx}/js/plugin/echarts/echarts.js"></script>
|
||||
<script src="${ctx}/js/plugin/layui/layer.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/getTime.js"></script>
|
||||
<script src="${ctx}/jspJS/area/powerCommon.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/loading.js"></script>
|
||||
<script src="${ctx}/js/color.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
|
||||
<script src="${ctx}/js/mapCommon.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/barUtil.js"></script>
|
||||
<script src="${ctx}/js/basic.js"></script>
|
||||
<script>
|
||||
var mapEvent, loadingItem;
|
||||
var load = 0;
|
||||
var total = 0;
|
||||
var areLength;//区域的个数
|
||||
var companyLength;//厂家个数
|
||||
var color;
|
||||
var companyname;
|
||||
|
||||
function initInfo() {
|
||||
var endTime = getEndTime();
|
||||
var startTime = getMonthStartTime(endTime);
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
data:{
|
||||
start: startTime,
|
||||
end: endTime
|
||||
},
|
||||
url: "/pqs9000/device/getMsgInfo",
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
var str0 = "<b style='font-size: 13px;color:" + color + ";'>" + "统计时间：" +
|
||||
"</b>\n<b style='font-size: 12px;color: " + color + ";'> " + startTime + "至" + endTime + "</b>\n";
|
||||
var str1 = "<b style='font-size: 13px;color:" + color + ";'>" + data.body.name +
|
||||
":</b>\n<b style='font-size: 12px;color:" + color + ";'> 监测点数:" +data.body.pointCount +
|
||||
"</b>\n<b style='font-size: 12px;color: " + color + ";'> 终端数：" + data.body.count +
|
||||
"</b>\n<b style='font-size: 12px;color: " + color + ";'> 在线率：" + data.body.online +
|
||||
"%</b>\n<b style='font-size: 12px;color: " + color + ";'> 数据完整性：" + data.body.dataIntegrality + "%</b>\n";
|
||||
var str2 = "<b style='font-size: 13px;color: " + color + ";'>" + companyname +
|
||||
"</b>\n<b style='font-size: 12px;color: " + color + ";'> 监测点数：" + data.body.gwPointCount +
|
||||
"</b>\n<b style='font-size: 12px;color: " + color + ";'> 终端数：" + data.body.gwCount +
|
||||
"</b>\n<b style='font-size: 12px;color: " + color + ";'> 在线率：" + data.body.gwOnline +
|
||||
"%</b>\n<b style='font-size: 12px;color: " + color + ";'> 数据完整性：" + data.body.gwDataIntegrality + "%</b>\n";
|
||||
var str = str0;
|
||||
str += data.body.count == 0 ? "" : str1;
|
||||
str += data.body.gwCount == 0 ? "" : str2;
|
||||
|
||||
$("#msgInfo").html(str);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/pqs9000/theme/getThemeInfo",
|
||||
async: false,
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
color = data.body.value;
|
||||
companyname = data.body.name;
|
||||
}
|
||||
})
|
||||
|
||||
initInfo();
|
||||
var t1 = getRole("/pqs9000/business/frequency");
|
||||
var t2 = getRole("/pqs9000/business/powerquality");
|
||||
var t3 = 0;
|
||||
var t4 = getRole("/pqs9000/business/devicestatus");
|
||||
var t5 = getRole("/pqs9000/business/detaintegrality");
|
||||
|
||||
var index = 0;
|
||||
|
||||
addIndex(t1, "#item0");
|
||||
addIndex(t2, "#item1");
|
||||
addIndex(t4, "#item2");
|
||||
addIndex(t5, "#item3");
|
||||
|
||||
function addIndex(t, str) {
|
||||
if (t1 + t2 + t3 + t4 + t5 === 1) {
|
||||
index = 1;
|
||||
}
|
||||
|
||||
if (t == 1) {
|
||||
$(str).addClass("item" + index);
|
||||
index++;
|
||||
}
|
||||
}
|
||||
|
||||
total = t1 + t2 + t3 + t4 + t5;
|
||||
startQuery();
|
||||
loadingItem = ityzl_SHOW_LOAD_LAYER();
|
||||
$('#slide3d').slideCarsousel({slideType: '3d', indicatorEvent: 'click'});
|
||||
//获取当前内容的高度
|
||||
var height = $(window).height();
|
||||
$(".banner").css("height", height * 0.8);
|
||||
$(".banner").css("margin-top", height * 0.1);
|
||||
$("li").css("height", height * 0.8);
|
||||
var endTime = getEndTime();
|
||||
var startTime = getMonthStartTime(endTime);
|
||||
//打开电能质量评估页面---start
|
||||
|
||||
if (t1 == 1) {
|
||||
$.ajax({
|
||||
url: '/pqs9000/overview/frequencyDeviation',
|
||||
type: 'post',
|
||||
data: {
|
||||
startTime: startTime,
|
||||
overview: 'overview',
|
||||
endTime: endTime
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
load = load + 1;
|
||||
if (data.body === null) {
|
||||
drawFrequencyDeviationPic(null);
|
||||
} else {
|
||||
var deviaLength = data.body.area.length;
|
||||
if (parseInt(deviaLength) > parseInt(barspaclength)) {
|
||||
drawFrequencyDeviationPic(data.body.area, 0);
|
||||
} else {
|
||||
drawFrequencyDeviationPic(data.body.area, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取数据完整性并画缩略图
|
||||
if (t5 == 1) {
|
||||
$.ajax({
|
||||
url: '/pqs9000/overview/dataIntegrality',
|
||||
type: 'post',
|
||||
data: {
|
||||
startTime: startTime,
|
||||
overview: 'overview',
|
||||
endTime: endTime
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
load = load + 1;
|
||||
if (data.body === null) {
|
||||
drawIntegralityPic(null);
|
||||
} else {
|
||||
var typicLength = data.body.area.length;
|
||||
if (parseInt(typicLength) > parseInt(barspaclength)) {
|
||||
drawIntegralityPic(data.body.area, 0);
|
||||
} else {
|
||||
drawIntegralityPic(data.body.area, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取在线率数据并画图
|
||||
if (t3 == 1) {
|
||||
$.ajax({
|
||||
url: '/pqs9000/overview/onlineRate',
|
||||
type: 'post',
|
||||
data: {
|
||||
startTime: startTime,
|
||||
overview: 'overview',
|
||||
endTime: endTime
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
load = load + 1;
|
||||
if (data.body === null) {
|
||||
drawOnlineRatePic(null);
|
||||
} else {
|
||||
companyLength = data.body.area.length;
|
||||
if (parseInt(companyLength) > parseInt(barspaclength)) {
|
||||
drawOnlineRatePic(data.body.area, 0);
|
||||
} else {
|
||||
drawOnlineRatePic(data.body.area, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取终端运行状态数据并画图
|
||||
if (t4 == 1) {
|
||||
$.ajax({
|
||||
url: "/pqs9000/overview/deviceStatus",
|
||||
type: 'post',
|
||||
data: {
|
||||
startTime: startTime,
|
||||
overview: 'overview',
|
||||
endTime: endTime
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
load = load + 1;
|
||||
if (data.body === null) {
|
||||
drawDeviceStatusPic(null);
|
||||
} else {
|
||||
areLength = data.body.area.length;
|
||||
if (parseInt(areLength) > parseInt(barspaclength)) {
|
||||
drawDeviceStatusPic(data.body.area, 0);
|
||||
} else {
|
||||
drawDeviceStatusPic(data.body.area, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (t2 == 1) {
|
||||
$.ajax({
|
||||
url: '/pqs9000/overview/powerQualityVol',
|
||||
type: 'post',
|
||||
data: {
|
||||
startTime: startTime,
|
||||
overview: 'overview',
|
||||
endTime: endTime
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
load = load + 1;
|
||||
$("#powerquality").css("height", $("li").height())
|
||||
$("#powerquality").css("width", $("li").width())
|
||||
if (data.body === null) {
|
||||
initEvents(null);
|
||||
} else {
|
||||
initEvents(data.body.synData);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function initEvents(volData) {
|
||||
//地图容器
|
||||
mapEvent = echarts.init(document.getElementById('powerquality'));
|
||||
var pNode, node;
|
||||
$.ajax({
|
||||
url: '/pqs9000/area/getMapInfo',
|
||||
type: 'post',
|
||||
data: {
|
||||
area: "overview"
|
||||
},
|
||||
async: false,
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
pNode = data.body.name;
|
||||
node = data.body.subName;
|
||||
}
|
||||
})
|
||||
if (volData == null) {
|
||||
//获取地图数据
|
||||
var geoJson = getFullMapData(pNode, node);
|
||||
d = [];
|
||||
//注册地图
|
||||
echarts.registerMap('电能质量', geoJson);
|
||||
//绘制地图
|
||||
renderMapEvent(d);
|
||||
} else {
|
||||
if (volData.length > 1) {
|
||||
//获取地图数据
|
||||
var geoJson = getFullMapData(pNode, node);
|
||||
var d = [];
|
||||
for (var i = 0; i < volData.length; i++) {
|
||||
//根据level获取等级颜色
|
||||
var color = getColorByLevelAllData(volData[i].level);
|
||||
var dataTemp;
|
||||
if (volData[i].data === 3.1415) {
|
||||
dataTemp = "/";
|
||||
} else if (volData[i].data === 3.14159) {
|
||||
dataTemp = "（暂无数据）";
|
||||
} else {
|
||||
dataTemp = volData[i].data
|
||||
}
|
||||
d.push({
|
||||
name: volData[i].name,
|
||||
value: dataTemp,
|
||||
emphasis: {itemStyle: {areaColor: color, borderColor: "white", borderWidth: "1"}}
|
||||
})
|
||||
}
|
||||
//注册地图
|
||||
echarts.registerMap('电能质量', geoJson);
|
||||
//绘制地图
|
||||
renderMapEvent(d);
|
||||
} else {
|
||||
var d = [];
|
||||
var dataTemp;
|
||||
var color = getColorByLevelAllData(volData[0].level);
|
||||
if (volData[0].data === 3.1415) {
|
||||
dataTemp = "/";
|
||||
} else if (volData[0].data === 3.14159) {
|
||||
dataTemp = "（暂无数据）";
|
||||
} else {
|
||||
dataTemp = volData[0].data
|
||||
}
|
||||
//获取地图数据
|
||||
var data = getFullMapData(pNode, node);
|
||||
if (data !== null) {
|
||||
d.push({
|
||||
name: volData[0].name,
|
||||
value: dataTemp,
|
||||
emphasis: {itemStyle: {areaColor: color, borderColor: "white", borderWidth: "1"}}
|
||||
});
|
||||
//注册地图
|
||||
echarts.registerMap('电能质量', data);
|
||||
//绘制地图
|
||||
renderMapEvent(d);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//初始化绘制全国地图配置
|
||||
function renderMapEvent(data) {
|
||||
var optionEvent={
|
||||
backgroundColor: canvasBG,
|
||||
title: {
|
||||
text: '电能质量评估',
|
||||
left: 'center'
|
||||
},
|
||||
animationDuration: 1000,
|
||||
animationEasing: 'cubicOut',
|
||||
animationDurationUpdate: 1000,
|
||||
tooltip:{
|
||||
trigger: 'item',
|
||||
// formatter: '{b}<br/>{c} (p / km2)',
|
||||
show:false
|
||||
},
|
||||
visualMap:{
|
||||
type: 'piecewise',
|
||||
pieces: [
|
||||
{gt: 4.5, lte: 5, label: '优质'},
|
||||
{gt: 4, lte: 4.5, label: '良好'},
|
||||
{gt: 3, lte: 4, label: '合格'},
|
||||
{gt: 2, lte: 3, label: '较差'},
|
||||
{gte: 0, lte: 2, label: '极差'}
|
||||
],
|
||||
show:false,
|
||||
color: [green, yellow, red],
|
||||
inverse: false
|
||||
} ,
|
||||
series:{
|
||||
type: 'map',
|
||||
mapType: '电能质量',
|
||||
roam: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
ccolor: 'black',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#CCCCCC',
|
||||
borderColor: 'dodgerblue'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#B6B5B5'
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
}
|
||||
//渲染地图
|
||||
mapEvent.setOption(optionEvent);
|
||||
}
|
||||
|
||||
//绑定点击跳转
|
||||
$('ul').on('click', '.item1 .item-content', function () {
|
||||
var id = $(this).prop("id");
|
||||
var title = $(this).attr("titles");
|
||||
if (id !== '') {
|
||||
var info = '';
|
||||
if (id === 'onlinerate') {
|
||||
info = getTitleInfo("在线率", startTime, endTime, "在线率");
|
||||
} else if (id === "dataintegrality") {
|
||||
info = getTitleInfo("完整性", startTime, endTime, "数据完整性");
|
||||
} else if (id === "frequency") {
|
||||
info = getTitleInfo("合格率", startTime, endTime, "全部");
|
||||
} else if (id === "powerquality") {
|
||||
info = getTitleInfo("综合评估", startTime, endTime, "综合评估");
|
||||
}else if(id==="devicestatus"){
|
||||
info = getTitleInfo("终端状态", startTime, endTime, "终端状态");
|
||||
}
|
||||
onContent(id, title + info);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//画终端状态缩略图
|
||||
function drawDeviceStatusPic(area, intervals) {
|
||||
//给div指定宽高
|
||||
$("#devicestatus").css("height", $("li").height())
|
||||
$("#devicestatus").css("width", $("li").width())
|
||||
var normal = [];
|
||||
var breaks = [];
|
||||
var shutdown = [];
|
||||
var areas = [];
|
||||
var rate=[];
|
||||
if (null != area) {
|
||||
area = area.slice(0, 8);
|
||||
for (var i = 0; i < area.length; i++) {
|
||||
areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
|
||||
var monitors = area[i].amounts;
|
||||
if (Number(monitors) === 0) {
|
||||
var singleData = {};
|
||||
var item = {};
|
||||
singleData.value = 3.1415;
|
||||
item.color = noMonitor;
|
||||
singleData.itemStyle = item;
|
||||
normal[i] = singleData;
|
||||
rate[i] = singleData;
|
||||
breaks[i] = 0;
|
||||
shutdown[i] = 0;
|
||||
} else {
|
||||
var itemStyle={};
|
||||
normal[i] = area[i].status.normal;
|
||||
breaks[i] = area[i].status.breaks;
|
||||
shutdown[i] = area[i].status.shutdown;
|
||||
var singleData={};
|
||||
var normalData={};
|
||||
var onlineRate = Number(area[i].online);
|
||||
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;
|
||||
rate[i]=singleData;
|
||||
}
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
backgroundColor: canvasBG,//背景色
|
||||
title: {
|
||||
text: '终端状态',
|
||||
x: 'center'
|
||||
},
|
||||
color: [runColor, breaksColor, grey],
|
||||
//控制图标在dataroom中的位置大小
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '11%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: areas,
|
||||
name: '地区\n(终端个数)',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: intervals
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '%',
|
||||
nameLocation:'center',
|
||||
min: '0',
|
||||
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('devicestatus'));
|
||||
district.setOption(option);
|
||||
}
|
||||
|
||||
//裝置在线率缩略图
|
||||
function drawOnlineRatePic(area, intervals) {
|
||||
$("#onlinerate").css("height", $("li").height())
|
||||
$("#onlinerate").css("width", $("li").width())
|
||||
var onlinerate = echarts.init($("#onlinerate")[0]);
|
||||
var rate = [];
|
||||
var areas = [];
|
||||
if (null != area) {
|
||||
area = area.slice(0, 8);
|
||||
for (var i = 0; i < area.length; i++) {
|
||||
areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
|
||||
var onlineRate = Number(area[i].online);
|
||||
var singleData = {};
|
||||
var item = {};
|
||||
item.color = getColor(onlineRate);
|
||||
if (onlineRate === 3.1415) {
|
||||
singleData.value = onlineRate;
|
||||
} else if (onlineRate === 3.14159) {
|
||||
singleData.value = onlineRate;
|
||||
} else if (onlineRate < 3.15159) {
|
||||
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'
|
||||
},
|
||||
//控制图标在dataroom中的位置大小
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '11%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: areas,
|
||||
name: '地区\n(监测点数)',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: intervals
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '%',
|
||||
min: '0',
|
||||
max: '100'
|
||||
}],
|
||||
series: [{
|
||||
name: '在线率',
|
||||
type: 'bar',
|
||||
barMaxWidth: barMax,
|
||||
data: rate
|
||||
}]
|
||||
};
|
||||
onlinerate.setOption(option);
|
||||
}
|
||||
|
||||
//数据完整性缩率图
|
||||
function drawIntegralityPic(area, intervals) {
|
||||
//给div指定宽高
|
||||
$("#dataintegrality").css("height", $("li").height())
|
||||
$("#dataintegrality").css("width", $("li").width())
|
||||
var integrality = echarts.init($("#dataintegrality")[0]);
|
||||
var inte = [];
|
||||
var areas = [];
|
||||
if (null != area) {
|
||||
area = area.slice(0, 8);
|
||||
for (var i = 0; i < area.length; i++) {
|
||||
var integralityRate;
|
||||
areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
|
||||
integralityRate = Number(area[i].dataIntegrity);
|
||||
var singleData = {};
|
||||
var item = {};
|
||||
item.color = getColor(integralityRate);
|
||||
if (integralityRate === 3.1415) {
|
||||
singleData.value = integralityRate;
|
||||
} else if (integralityRate === 3.14159) {
|
||||
singleData.value = integralityRate;
|
||||
} else if (integralityRate < 3.15159) {
|
||||
singleData.value = 3.1415;
|
||||
item.actual = integralityRate;
|
||||
} else {
|
||||
singleData.value = integralityRate;
|
||||
}
|
||||
singleData.itemStyle = item;
|
||||
inte[i] = singleData;
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
backgroundColor: canvasBG,//背景色
|
||||
title: {
|
||||
text: '数据完整性',
|
||||
x: 'center'
|
||||
},
|
||||
//控制图标在dataroom中的位置大小
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '11%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: areas,
|
||||
name: '地区\n(监测点数)',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: intervals
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '%',
|
||||
nameLocation:'center',
|
||||
min: '0',
|
||||
max: '100'
|
||||
}],
|
||||
series: [{
|
||||
name: '完整性',
|
||||
type: 'bar',
|
||||
barMaxWidth: barMax,
|
||||
data: inte
|
||||
}]
|
||||
};
|
||||
integrality.setOption(option);
|
||||
};
|
||||
|
||||
//稳态指标合格率
|
||||
function drawFrequencyDeviationPic(area, intervals) {
|
||||
//给div指定宽高
|
||||
$("#frequency").css("height", $("li").height());
|
||||
$("#frequency").css("width", $("li").width());
|
||||
var frequency = echarts.init($("#frequency")[0]);
|
||||
var freRate = [];
|
||||
var areas = [];
|
||||
if (null != area) {
|
||||
area = area.slice(0, 8);
|
||||
for (var i = 0; i < area.length; i++) {
|
||||
areas[i] = area[i].name + "\n(" + area[i].monitors + ")";
|
||||
var acceptabilityRate = Number(area[i].frequency);
|
||||
var singleData = {};
|
||||
var item = {};
|
||||
item.color = getColor(acceptabilityRate);
|
||||
if (acceptabilityRate === 3.1415) {
|
||||
singleData.value = acceptabilityRate;
|
||||
} else if (acceptabilityRate === 3.14159) {
|
||||
singleData.value = acceptabilityRate;
|
||||
} else if (acceptabilityRate < 3.15159) {
|
||||
singleData.value = 3.1415;
|
||||
item.actual = acceptabilityRate;
|
||||
} else {
|
||||
singleData.value = acceptabilityRate;
|
||||
}
|
||||
singleData.itemStyle = item;
|
||||
freRate[i] = singleData;
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
backgroundColor: canvasBG,//背景色
|
||||
title: {
|
||||
text: '稳态指标合格率',
|
||||
x: 'center'
|
||||
},
|
||||
//控制图标在dataroom中的位置大小
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '11%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: areas,
|
||||
name: '地区\n(监测点数)',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: intervals
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '%',
|
||||
nameLocation:'center',
|
||||
min: '0',
|
||||
max: '100'
|
||||
}],
|
||||
series: [{
|
||||
name: '频率偏差合格率',
|
||||
type: 'bar',
|
||||
barMaxWidth: barMax,
|
||||
data: freRate
|
||||
}]
|
||||
};
|
||||
frequency.setOption(option);
|
||||
}
|
||||
|
||||
//根据跳转页面
|
||||
function onContent(id, title) {
|
||||
layer.open({
|
||||
id: 'overview',
|
||||
type: 2,
|
||||
title: title,
|
||||
maxmin: false,
|
||||
resize: false,
|
||||
shadeClose: true, //点击遮罩关闭层
|
||||
area: ['100%', '100%'],
|
||||
content: id,
|
||||
scrollbar: false
|
||||
});
|
||||
}
|
||||
|
||||
//获取layer打开新页面后，在标题添加内容并向右浮动
|
||||
function getTitleInfo(name, startTime, endTime, target) {
|
||||
startTime = startTime.replace(/-/g, '/');
|
||||
endTime = endTime.replace(/-/g, '/');
|
||||
if (name === "综合评估") {
|
||||
return "<span style='color:red;cursor:pointer;margin-right: 5px' class='fr fontBold font12' onMouseOver='divdangerMouseOver()' onMouseOut='divdangerMouseOut()' >详细电能质量评估等级划分</span><span class='fr font25'> | </span><span class='fr font12' ></span><span class='fr font12'> 统计指标：<span class='fontBold' id='target' >" + target + "</span></span><span class='fr font12'>统计时间：<span class='fontBold' >" + startTime + "-" + endTime + "</span></span>";
|
||||
}else if(name === "终端状态"){
|
||||
return "<span class='fr 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><span class='fr 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='fr font12 '><span class='fontBold'>统计时间：</span><span class='' >" + startTime + "-" + endTime + " </span></span>";
|
||||
} else {
|
||||
return "<span class='fr font12' ><span class='info'><span class='inB bg-info smallBlock'></span> "
|
||||
+ name + "≥90%</span><span class='warn''> <span class='inB bg-warn smallBlock'></span> 60%≤"
|
||||
+ name + "<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> "
|
||||
+ name + "<60%</span></span><span class='fr font25'> | </span><span class='fr font12'> 统计指标：<span class='fontBold' id='target' style='cursor:pointer' >" + target + "</span></span><span class='fr font12'>统计时间：<span class='fontBold' >" + startTime + "-" + endTime + "</span></span>";
|
||||
}
|
||||
}
|
||||
|
||||
function divdangerMouseOver() {
|
||||
var frameId = document.getElementById('overview').getElementsByTagName("iframe")[0].id;
|
||||
$('#' + frameId)[0].contentWindow.divdangerMouseOver();
|
||||
}
|
||||
|
||||
function divdangerMouseOut() {
|
||||
var frameId = document.getElementById('overview').getElementsByTagName("iframe")[0].id;
|
||||
$('#' + frameId)[0].contentWindow.divdangerMouseOut();
|
||||
}
|
||||
|
||||
//根据合格率获取颜色
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
var it = null;
|
||||
|
||||
function startQuery() {
|
||||
//实时刷新时间单位为毫秒
|
||||
it = setInterval('refreshQuery()', 100);
|
||||
|
||||
}
|
||||
|
||||
/* 刷新查询 */
|
||||
function refreshQuery() {
|
||||
if (load === total) {
|
||||
ityzl_CLOSE_LOAD_LAYER(loadingItem);
|
||||
window.clearInterval(it)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
163
pqs9000/src/main/webapp/WEB-INF/views/overview/powerQuality.jsp
Normal file
163
pqs9000/src/main/webapp/WEB-INF/views/overview/powerQuality.jsp
Normal file
@@ -0,0 +1,163 @@
|
||||
<%@ 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}" />
|
||||
<!DOCTYPE html>
|
||||
<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/bootstrap/bootstrap.min.css" >
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/basic.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/tip.css">
|
||||
<style>
|
||||
html,body{
|
||||
background-color: #F9F9F9 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
ul{
|
||||
padding: 0 2px;
|
||||
border: 1px solid #696969;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#tipTable,#tipTableAll{
|
||||
font-size:10px !important;
|
||||
}
|
||||
#tipTable td,#tipTableAll td{
|
||||
padding: 2px !important;
|
||||
vertical-align: center !important;
|
||||
}
|
||||
#tips,#tipsAll{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
right: 0px;
|
||||
z-index: 999;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<%--绝对定位的提示--%>
|
||||
<div id="tips">
|
||||
<table id="tipTable" class="table table-striped table-bordered dataTable no-footer">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>电能指标评估</td>
|
||||
<td>特质</td>
|
||||
<td>优质</td>
|
||||
<td>优良</td>
|
||||
<td>良好</td>
|
||||
<td>轻度污染</td>
|
||||
<td>中度污染</td>
|
||||
<td>重度污染</td>
|
||||
<td>极度污染</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="tipsAll">
|
||||
<table id="tipTableAll" class="table table-striped table-bordered dataTable no-footer">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>电能指标评估</td>
|
||||
<td>极差</td>
|
||||
<td>较差</td>
|
||||
<td>合格</td>
|
||||
<td>良好</td>
|
||||
<td>优质</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<%--<div id="message">aaa</div>--%>
|
||||
<div class="container-fluid">
|
||||
<ul class="nav nav-pills nav-justified mt10" id="qualifiedTab">
|
||||
<li class="active"><a href="#frequency" data-toggle="tab" id="allData">综合评估</a></li>
|
||||
<li ><a href="#frequency" data-toggle="tab" id="vuDev">电压偏差</a></li>
|
||||
<li ><a href="#frequency" data-toggle="tab" id="frequencyDeviation">频率偏差</a></li>
|
||||
<li ><a href="#frequency" data-toggle="tab" id="vthd">谐波含量</a></li>
|
||||
<li ><a href="#frequency" data-toggle="tab" id="vplt">电压闪变</a></li>
|
||||
<li ><a href="#frequency" data-toggle="tab" id="vUnbalance">三相电压不平衡度</a></li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="frequency">
|
||||
<%--区域模块--%>
|
||||
<div class="col-sm-5 col-md-5" id="map"></div>
|
||||
<div style="position: relative">
|
||||
<button id="helper" type="button" style="z-index: 999;position: absolute;top: 2px;left:25%;" class="btn tip tip-bottom" data-tip="综合评估详解">
|
||||
<i class="glyphicon glyphicon-info-sign" style="margin-left: -3px;margin-right: -3px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-7 col-md-7" >
|
||||
<div class="col-sm-12 col-md-12" id="bar"></div>
|
||||
<div class="col-sm-12 col-md-12" id="table">
|
||||
<table id="areaTable" class="table table-striped table-bordered dataTable no-footer">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>区域</th>
|
||||
<th id="norm">电压偏差</th>
|
||||
<th>等级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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/bootstrap/bootstrap.min.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}/jspJS/utils/getTime.js"></script>
|
||||
<script src="${ctx}/jspJS/area/powerCommon.js"></script>
|
||||
<script src="${ctx}/js/color.js"></script>
|
||||
<script src="${ctx}/js/mapCommon.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/basic.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
|
||||
<script src="${ctx}/jspJS/overview/powerQuality.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/helper.js"></script>
|
||||
<script>
|
||||
$("#helper").click(function (){
|
||||
toHelper("#zhpg");
|
||||
});
|
||||
|
||||
//点击ul切换页面表格数据
|
||||
$("#qualifiedTab a").on('click',function () {
|
||||
var html=$(this).html();
|
||||
parent.$("#target").text(html);
|
||||
//执行查询操作并画图
|
||||
var urlPart=$(this).prop("id");
|
||||
if(urlPart==="vuDev"){
|
||||
$("#helper").css("display", "none");
|
||||
}else if (urlPart==="frequencyDeviation"){
|
||||
$("#helper").css("display", "none");
|
||||
}else if (urlPart==="vthd"){
|
||||
$("#helper").css("display", "none");
|
||||
}else if (urlPart==="vplt"){
|
||||
$("#helper").css("display", "none");
|
||||
}else if (urlPart==="vUnbalance"){
|
||||
$("#helper").css("display", "none");
|
||||
}else if(urlPart==="allData"){
|
||||
$("#helper").css("display", "");
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
<%@ 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}" />
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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"/>
|
||||
<title>查询指定监测点的数据完整性</title>
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css" >
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/basic.css">
|
||||
<style>
|
||||
.table>tbody>tr>td,
|
||||
.table>tbody>tr>th,
|
||||
.table>tfoot>tr>td,
|
||||
.table>tfoot>tr>th,
|
||||
.table>thead>tr>td,
|
||||
.table>thead>tr>th{
|
||||
padding:3px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<table id="content" class="width100 table table-striped table-bordered" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>供电公司</th>
|
||||
<th>变电站</th>
|
||||
<th>终端</th>
|
||||
<th>终端IP</th>
|
||||
<th>监测点</th>
|
||||
<th>完整性</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script src="${ctx}/js/plugin/jquery/jquery.min.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}/js/plugin/layui/layer.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/loading.js"></script>
|
||||
<script>
|
||||
var startTime,endTime,gist,type;
|
||||
$(function () {
|
||||
startTime=parent.$("#startTime").val();
|
||||
endTime=parent.$("#endTime").val();
|
||||
gist=parent.$("#gist").val();
|
||||
gist=gist.replace(/(^\s*)|(\s*$)/g, '');
|
||||
type=parent.$("#type").val();
|
||||
switch (type){
|
||||
case'city':
|
||||
executeQuery(type+"Integrality");
|
||||
break;
|
||||
case'voltage':
|
||||
executeQuery(type+"Integrality");
|
||||
break;
|
||||
case'company':
|
||||
executeQuery(type+"Integrality");
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
//执行查询
|
||||
function executeQuery(name) {
|
||||
var i;
|
||||
$.ajax({
|
||||
url:"/pqs9000/overview/"+name,
|
||||
type:'post',
|
||||
data:{
|
||||
startTime:startTime,
|
||||
endTime:endTime,
|
||||
gist:gist
|
||||
},
|
||||
dataType:'json',
|
||||
beforeSend: function () {
|
||||
i = ityzl_SHOW_LOAD_LAYER();
|
||||
},
|
||||
success:function (data) {
|
||||
//画表格
|
||||
if(data.body===null){
|
||||
initTable(null)
|
||||
}else{
|
||||
initTable(data.body)
|
||||
}
|
||||
//***********关闭loading
|
||||
ityzl_CLOSE_LOAD_LAYER(i);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 执行表格数据添加
|
||||
function initTable(data){
|
||||
$('#content').DataTable({
|
||||
data:data,
|
||||
order:[],
|
||||
columnDefs:[
|
||||
{target:0,orderable:false}
|
||||
],
|
||||
info:false,
|
||||
paging:false,
|
||||
searching:false,
|
||||
lengthChange:false,
|
||||
columns:[
|
||||
{data:'gdName'},
|
||||
{data:'subName'},
|
||||
{data:'devName'},
|
||||
{data:'ip'},
|
||||
{data:'name'},
|
||||
{data:'integrality'}
|
||||
],
|
||||
language : {
|
||||
url:'/pqs9000/json/chine.json'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
<%@ 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}" />
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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"/>
|
||||
<title>查询指定终端在线率</title>
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css" >
|
||||
<link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
|
||||
<link rel="stylesheet" href="${ctx}/css/basic.css">
|
||||
<style>
|
||||
.table>tbody>tr>td,
|
||||
.table>tbody>tr>th,
|
||||
.table>tfoot>tr>td,
|
||||
.table>tfoot>tr>th,
|
||||
.table>thead>tr>td,
|
||||
.table>thead>tr>th{
|
||||
padding:3px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<table id="content" class="width100 table table-striped table-bordered" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>供电公司</th>
|
||||
<th>变电站</th>
|
||||
<th>终端</th>
|
||||
<th>终端IP</th>
|
||||
<th>在线率(%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="${ctx}/js/plugin/jquery/jquery.min.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}/js/plugin/layui/layer.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
|
||||
<script src="${ctx}/jspJS/utils/loading.js"></script>
|
||||
<script>
|
||||
var startTime,endTime,gist,type;
|
||||
$(function () {
|
||||
startTime=parent.$("#startTime").val();
|
||||
endTime=parent.$("#endTime").val();
|
||||
gist=parent.$("#gist").val();
|
||||
gist=gist.replace(/(^\s*)|(\s*$)/g, '');
|
||||
type=parent.$("#type").val();
|
||||
switch (type){
|
||||
case'city':
|
||||
executeQuery(type+"OnlineRate");
|
||||
break;
|
||||
case'voltage':
|
||||
executeQuery(type+"OnlineRate");
|
||||
break;
|
||||
case'company':
|
||||
executeQuery(type+"OnlineRate");
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
//执行查询
|
||||
function executeQuery(name) {
|
||||
var i;
|
||||
$.ajax({
|
||||
url:"/pqs9000/overview/"+name,
|
||||
type:'post',
|
||||
data:{
|
||||
startTime:startTime,
|
||||
endTime:endTime,
|
||||
gist:gist
|
||||
},
|
||||
dataType:'json',
|
||||
beforeSend: function () {
|
||||
i = ityzl_SHOW_LOAD_LAYER();
|
||||
},
|
||||
success:function (data) {
|
||||
//画表格
|
||||
if(data.body===null){
|
||||
initTable(null)
|
||||
}else{
|
||||
initTable(data.body)
|
||||
}
|
||||
//***********关闭loading
|
||||
ityzl_CLOSE_LOAD_LAYER(i);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 执行表格数据添加
|
||||
function initTable(data){
|
||||
$('#content').DataTable({
|
||||
data:data,
|
||||
order:[],
|
||||
columnDefs:[
|
||||
{target:0,orderable:false}
|
||||
],
|
||||
info:false,
|
||||
paging:false,
|
||||
searching:false,
|
||||
lengthChange:false,
|
||||
columns:[
|
||||
{data:'gdName'},
|
||||
{data:'subName'},
|
||||
{data:'name'},
|
||||
{data:'ip'},
|
||||
{data:'onlineRate'}
|
||||
],
|
||||
language : {
|
||||
url:'/pqs9000/json/chine.json'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user