Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/statisticalInfo.jsp

508 lines
21 KiB
Plaintext
Raw Normal View History

2026-01-16 14:13:44 +08:00
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page import="com.sipai.entity.base.ServerObject"%>
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<!-- Ionicons -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/ionicons/css/ionicons.min.css"/>
<!-- jvectormap -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/CSS/jvectormap/jquery-jvectormap.css">
<style type="text/css" rel="stylesheet">
.top-card {
background-color: white;
}
.top-card:hover {
color: black;
cursor: pointer;
}
.inner h3 {
text-align: right;
}
.inner p:hover {
color: black;
}
</style>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/jvectormap/jvectormap-next/jquery-jvectormap.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/jvectormap/jquery-jvectormap-cn-mill.js" charset="utf-8"></script>
<script type="text/javascript">
function goToLocation(url){
$.post(ext.contextPath +"/user/getMenuRelation.do",{location:url},function(data){
console.info(data)
if(data.length>2){
doforward(url,data[2].id,data[1].id,data[0].id)
}
},'json');
}
$(function() {
//获取所有当前待办任务数量
$.post(ext.contextPath +"/maintenance/getTaskListAmount.do",function(data){
if(data.total>0){
$('#taskNum').html(data.total)
}
},'json');
//获取问题发起数量
$.post(ext.contextPath +"/maintenance/getLaunchListAmount.do",function(data){
if(data.amount>0){
$('#launchProblemNum').html(data.amount)
}
},'json');
//获取问题未完成数量
$.post(ext.contextPath +"/maintenance/getUnfinishAmount.do",function(data){
if(data.amount>0){
$('#unFinishNum').html(data.amount)
}
},'json');
//获取维护详情未完成数量
$.post(ext.contextPath +"/maintenance/getUnfinishDetailAmount.do",function(data){
if(data.amount>0){
$('#unSolveNum').html(data.amount)
}
},'json');
//获取所有未读消息数量
$.post(ext.contextPath +"/msg/getUnreadMsgs.do",function(data){
if(data.total>0){
$('#unReadMsgNum').html(data.total)
}
},'json');
});
</script>
</head>
<body onload="initMenu();" class="hold-transition skin-blue sidebar-mini">
<div class="wrapper" style="margin-left:-230px;">
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<!-- <h1 id ="head_title">
首页
</h1> -->
<ol class="breadcrumb">
<li><a id ='head_firstlevel' onclick="goToMainPage();" style="cursor:pointer "><i class="fa fa-dashboard"></i> 首页</a></li>
</ol>
</section>
<!-- Main content -->
<section class="content" id="homePage">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-white top-card">
<div class="inner">
<span style="font-size:25px;">入住企业</span>
<h3 style="color:#64a5cb;font-size:60px;" id="enterpriseNum"><span style="font-size:14px;font-weight:normal">家</span></h3>
</div>
<!--<div class="icon">-->
<!--<i class="ion ion-bag"></i>-->
<!--</div>-->
<!--<a href="#" class="small-box-footer" style="background-color:white;color:white">M</a>-->
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-white top-card">
<div class="inner">
<span style="font-size:25px;">接入设备台数</span>
<h3 style="color:#64a5cb;font-size:60px;" id="equipmentsNum"><span style="font-size:14px;font-weight:normal">台</span></h3>
</div>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-white top-card">
<div class="inner">
<span style="font-size:25px;">接入测量点数</span>
<h3 style="color:#64a5cb;font-size:60px;" id="mpointsNum"> <span style="font-size:14px;font-weight:normal">个</span></h3>
</div>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-white top-card">
<div class="inner">
<span style="font-size:25px;">分布城市</span>
<h3 style="color:#64a5cb;font-size:60px;" id="citesNum"><span style="font-size:14px;font-weight:normal">个</span></h3>
</div>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row">
<!-- right col (We are only adding the ID to make the widgets sortable)-->
<section class="col-lg-9 connectedSortable">
<!-- Map box -->
<div class="box box-solid bg-light-blue-gradient">
<div class="box-header">
<!-- tools box -->
<div class="pull-right box-tools">
<button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="Date range">
<i class="fa fa-calendar"></i></button>
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
<i class="fa fa-minus"></i></button>
</div>
<!-- /. tools -->
<i class="fa fa-map-marker"></i>
<h3 class="box-title">
查看全国指数
</h3>
</div>
<div class="box-body">
<div id="china-map" style="height: 525px; width: 100%;"></div>
</div>
<!-- /.box-body-->
</div>
<!-- /.box -->
</section>
<!-- right col -->
<!-- Left col -->
<section class="col-lg-3 connectedSortable">
<div class="small-box bg-white top-card">
<div class="inner">
<span style="font-size:25px;">分布省</span>
<h3 style="color:#64a5cb;font-size:60px;" id="provincesNum"><span style="font-size:14px;font-weight:normal">个</span></h3>
</div>
</div>
<div class="small-box bg-white top-card">
<div class="inner">
<span style="font-size:25px;">待机率</span>
<h3 style="color:#64a5cb;font-size:60px;">0.01<span style="font-size:14px;font-weight:normal">%</span></h3>
</div>
</div>
<div class="small-box bg-white top-card">
<div class="inner">
<span style="font-size:25px;">故障率</span>
<h3 style="color:#64a5cb;font-size:60px;">0<span style="font-size:14px;font-weight:normal">%</span></h3>
</div>
</div>
<div class="small-box bg-white top-card">
<div class="inner">
<span style="font-size:25px;">运行率</span>
<h3 style="color:#64a5cb;font-size:60px;">21.13<span style="font-size:14px;font-weight:normal">%</span></h3>
</div>
</div>
</section>
<!-- /.Left col -->
</div>
<!-- /.row (main row) -->
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
<script type="text/javascript">
$(function(){
/* $.ajax("http://132.120.136.245:8080/DataManage/proapp.do?method=getStatisticalInfo",{
dataType: 'jsonp',
crossDomain: true,
success:function(data){
console.log(data);
}
}); */
$.get('${url}'+"/proapp.do?method=getStatisticalInfo",function(data){
console.log(ext.contextPath);
var visitorsData = {
US: 398, // USA
SA: 400, // Saudi Arabia
CA: 1000, // Canada
DE: 500, // Germany
FR: 760, // France
CN: 300, // China
AU: 700, // Australia
BR: 600, // Brazil
IN: 800, // India
GB: 320, // Great Britain
RU: 3000 // Russia
};
var dataStatus = [
/* { id: 'HKG', code:'', region:'', name: '香港', event: [], url: '' }, */
{ id: 'HAI', code:'CN-46', region:'', name: '海南', event: [], url: '' },
{ id: 'YUN', code:'CN-53', region:'', name: '云南', event: [], url: '' },
{ id: 'BEJ', code:'CN-11', region:'', name: '北京', event: [], url: '/event/1' },
{ id: 'TAJ', code:'CN-12', region:'', name: '天津', event: [], url: '' },
{ id: 'XIN', code:'CN-65', region:'', name: '新疆', event: [], url: '' },
{ id: 'TIB', code:'CN-54', region:'', name: '西藏', event: [], url: '' },
{ id: 'QIH', code:'CN-63', region:'', name: '青海', event: [], url: '' },
{ id: 'GAN', code:'CN-62', region:'', name: '甘肃', event: [], url: '' },
{ id: 'NMG', code:'CN-15', region:'', name: '内蒙古', event: [], url: '' },
{ id: 'NXA', code:'CN-64', region:'', name: '宁夏', event: [], url: '' },
{ id: 'SHX', code:'CN-14', region:'', name: '山西', event: [], url: '' },
{ id: 'LIA', code:'CN-21', region:'0411', name: '辽宁', event: [], url: '' },
{ id: 'JIL', code:'CN-22', region:'', name: '吉林', event: [], url: '' },
{ id: 'HLJ', code:'CN-23', region:'', name: '黑龙江', event: [], url: '' },
{ id: 'HEB', code:'CN-13', region:'', name: '河北', event: [], url: '' },
{ id: 'SHD', code:'CN-37', region:'', name: '山东', event: [], url: '' },
{ id: 'HEN', code:'CN-41', region:'', name: '河南', event: [], url: '' },
{ id: 'SHA', code:'CN-61', region:'', name: '陕西', event: [], url: '' },
{ id: 'SCH', code:'CN-51', region:'', name: '四川', event: [], url: '/event/2' },
{ id: 'CHQ', code:'CN-50', region:'', name: '重庆', event: [], url: '' },
{ id: 'HUB', code:'CN-42', region:'', name: '湖北', event: [], url: '/event/3' },
{ id: 'ANH', code:'CN-34', region:'', name: '安徽', event: [], url: '' },
{ id: 'JSU', code:'CN-32', region:'', name: '江苏', event: [], url: '' },
{ id: 'SHH', code:'CN-31', region:'021', name: '上海', event: [], url: '' },
{ id: 'ZHJ', code:'CN-33', region:'',name: '浙江', event: [], url: '' },
{ id: 'FUJ', code:'CN-47', region:'', name: '福建', event: [], url: '' },
{ id: 'TAI', code:'CN-48', region:'', name: '台湾', event: [], url: '' },
{ id: 'JXI', code:'CN-36', region:'', name: '江西', event: [], url: '' },
{ id: 'HUN', code:'CN-43', region:'', name: '湖南', event: [], url: '' },
{ id: 'GUI', code:'CN-52', region:'', name: '贵州', event: [], url: '' },
{ id: 'GXI', code:'CN-45', region:'', name: '广西', event: [], url: '' },
{ id: 'GUD', code:'CN-44', region:'', name: '广东', event: [], url: '' }
];
//var data = {"re0":"pass","re1":[{"alarmstate":"0","area":"上海","company":"BLG","distxt":"上海白龙港污水处理厂","equionumber":32,"id":"1","mpoint":73,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"JS","distxt":"上海金山新江污水处理厂","equionumber":27,"id":"2","mpoint":90,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"JSLX","distxt":"上海金山廊下污水处理厂","equionumber":18,"id":"3","mpoint":49,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"QY","distxt":"上海曲阳污水处理厂","equionumber":15,"id":"4","mpoint":42,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"SDK","distxt":"上海石洞口污水处理厂","equionumber":33,"id":"5","mpoint":70,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"SJXB","distxt":"上海新浜污水处理厂","equionumber":9,"id":"6","mpoint":30,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"TS","distxt":"上海天山污水处理厂","equionumber":19,"id":"7","mpoint":44,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"HQ","distxt":"上海虹桥能源中心","equionumber":0,"id":"8","mpoint":198,"nature":"企业","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"ZY1C","distxt":"上海竹园友联第一污水处理厂","equionumber":5,"id":"9","mpoint":57,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"ZY2C","distxt":"上海竹园第二污水处理厂","equionumber":11,"id":"10","mpoint":56,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"上海","company":"WS","distxt":"上海吴淞污水处理厂","equionumber":13,"id":"11","mpoint":107,"nature":"污水厂","region":"021 ","sucrate":100},{"alarmstate":"0","area":"大连","company":"DLQSH","distxt":"大连泉水河污水处理厂","equionumber":29,"id":"12","mpoint":117,"nature":"污水厂","region":"0411 ","sucrate":100},{"alarmstate":"0","area":"大连","company":"DLDLW","distxt":"大连大连湾污水处理厂","equionumber":39,"id":"13","mpoint":115,"nature":"污水厂","region":"0411 ","sucrate":100}]};
// 绘制数据地图
//setTimeout(function(){
createChinaMap(visitorsData,dataStatus,data);
//},0);
});
},'json');
// 绘制数据地图
function createChinaMap(visitorsData,dataStatus,data) {
data=JSON.parse(data);
console.log(data);
$.each(dataStatus,function(di,ds){
if(data.re1){
$.each(data['re1'], function(i,v){
console.log(v);
if($.trim(v.region) === ds.region) {
ds.event.push(v);
}
});
}
});
// jvectormap data
// China map by jvectormap
var opts = {
map: 'cn_mill',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: '#e4e4e4',
'fill-opacity': 1,
stroke: 'none',
'stroke-width': 0,
'stroke-opacity': 1
}
},
series: {
regions: [{
//values: visitorsData,
scale: ['#92c1dc', '#ebf4f9'],
normalizeFunction: 'polynomial'
}]
},
onRegionTipShow: function(event, label, code) {
$.each(dataStatus, function(i, items) {
if (code == items.code) {
if(label.region === ""){
label.html(items.name);
} else {
console.log(label);
console.log(items.name);
console.log("ddd@"+JSON.stringify(items));
var html = "<div>";
$.each(items.event,function(ei,ev){
console.log(ev);
html += "<span>" + ev.distxt + ",接入设备数:"+ ev.equionumber
+"</span><br/>";
});
label.html(html+"</div>");
}
} else {
if(label.region === ""){
label.html(label.name);
}
}
});
},
markerStyle: {
initial: {
fill: '#00a65a',
stroke: '#111'
}
},
markers: [
/* { latLng: [39.93, 116.40], name: '北京' },
{ latLng: [39.14, 117.21], name: '天津' },
{ latLng: [38.05, 114.52], name: '河北 - 石家庄' },
{ latLng: [37.89, 112.55], name: '山西 - 太原' },
{ latLng: [40.83, 111.66], name: '内蒙古自治区 - 呼和浩特' }, */
{ latLng: [41.81, 123.43], name: '辽宁省 - 沈阳' },
/* { latLng: [43.82, 125.32], name: '吉林省 - 长春' },
{ latLng: [45.77, 126.66], name: '黑龙江省 - 哈尔滨' }, */
{ latLng: [31.23, 121.48], name: '上海市' },
/* { latLng: [32.06, 118.78], name: '江苏省 - 南京' },
{ latLng: [30.26, 120.22], name: '浙江省 - 杭州' },
{ latLng: [31.87, 117.29], name: '安徽省 - 合肥' },
{ latLng: [26.05, 119.33], name: '福建省 - 厦门' },
{ latLng: [28.69, 115.89], name: '江西省 - 南昌' },
{ latLng: [30.26, 120.22], name: '浙江省 - 杭州' },
{ latLng: [31.87, 117.29], name: '安徽省 - 合肥' } */
]
};
/* var myCustomColors = {
'LIA': '#4E7387',
'SHH': '#333333'
};
opts.series.regions[0].setValues(myCustomColors); */
$('#china-map').vectorMap(opts);
/* $.each(dataStatus, function (i, items) {
console.log('lll',items.event);
if (items.event.length !== 0) {
var jsonStr = "{" + items.id + ":'#00FF00'}";
$('#china-map').vectorMap('set', 'colors', eval('(' + jsonStr + ')'));
}
}); */
console.log(dataStatus);
// 计算入住企业
calEnterpriseNum(dataStatus);
// 计算接入设备台数
calEquipmentsNum(dataStatus);
// 计算接入测量点数
calMpointsNum(dataStatus);
// 计算分布城市
calCitesNum(dataStatus);
// 计算分布省
calProvincesNum(dataStatus);
}
// 计算入住企业数
function calEnterpriseNum(dataStatus) {
var enterpriseNum = 0;
$.each(dataStatus,function(i,v){
if(v.event.length){
enterpriseNum += v.event.length;
}
});
$("#enterpriseNum").html(enterpriseNum);
}
// 计算设备接入台数
function calEquipmentsNum(dataStatus){
var equipmentsNum = 0;
$.each(dataStatus,function(i,v){
if(v.event.length){
$.each(v.event,function(k,val){
equipmentsNum += val.equionumber;
});
}
});
$("#equipmentsNum").html(equipmentsNum);
}
// 计算接入测量点数
function calMpointsNum(dataStatus){
var mpointsNum = 0;
$.each(dataStatus,function(i,v){
if(v.event.length){
$.each(v.event,function(k,val){
mpointsNum += val.mpoint;
});
}
});
$("#mpointsNum").html(mpointsNum);
}
// 计算分布省份
function calCitesNum(dataStatus) {
var citesNum = 0;
$.each(dataStatus,function(i,v){
if(v.event.length){
citesNum += 1;
}
});
$("#citesNum").html(citesNum);
}
// 计算分布省份
function calProvincesNum(dataStatus) {
var provincesNum = 0;
$.each(dataStatus,function(i,v){
if(v.event.length){
provincesNum += 1;
}
});
$("#provincesNum").html(provincesNum);
}
</script>
</body>
</html>