<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
<title>机房信息</title>
|
<link rel="stylesheet" href="mobilCss/jquery.mobile-1.4.5.min.css"/>
|
<script type="text/javascript" src="mobilJs/jquery-1.8.2.js"></script>
|
<script type="text/javascript" src="mobilJs/jquery.mobile-1.4.5.min.js"></script>
|
<link rel="stylesheet" href="css/fgpanel.css">
|
<!-- 导入百度地图API -->
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QAerSFEiGDCx1oHPB7Z5XYcBHI6R3qwx"></script>
|
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
|
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
|
<style type="text/css">
|
#map .explain-header:hover {
|
cursor: pointer;
|
background-color: #84ABFA !important;
|
color: #D6D1D1
|
}
|
.map-panel-btn {
|
/*初始化按钮*/
|
font-size: 12px;
|
text-decoration: none!important;
|
font-family: Helvetica, Arial, sans serif;
|
padding: 4px 12px;
|
border-radius: 3px;
|
-moz-border-radius: 3px;
|
box-shadow: inset 0px 0px 2px #fff;
|
-o-box-shadow: inset 0px 0px 2px #fff;
|
-webkit-box-shadow: inset 0px 0px 2px #fff;
|
-moz-box-shadow: inset 0px 0px 2px #fff;
|
/*定义颜色和样式*/
|
color: #41788c;
|
border: 1px solid #6fb1c7;
|
background-image: -moz-linear-gradient(#aae5f7, #73d0f1);
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73d0f1), to(#aae5f7));
|
background-image: -webkit-linear-gradient(#aae5f7, #73d0f1);
|
background-image: -o-linear-gradient(#aae5f7, #73d0f1);
|
text-shadow: 1px 1px 1px #bfeafb;
|
background-color: #73d0f1;
|
/* 定义位置 */
|
margin-left: 200px;
|
}
|
.map-panel-btn:hover {
|
border: 1px solid #4690ad;
|
background-image: -moz-linear-gradient(#73d0f1, #aae5f7);
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aae5f7), to(#73d0f1));
|
background-image: -webkit-linear-gradient(#73d0f1, #aae5f7);
|
background-image: -o-linear-gradient(#73d0f1, #aae5f7);
|
background-color: #aae5f7;
|
}
|
</style>
|
</head>
|
<body>
|
<div data-role="page">
|
<div class="fg-panel">
|
<div class="fg-panel-header">筛选</div>
|
<div class="fg-panel-content">
|
<fieldset style="margin-top: 5px;">
|
<legend><strong>页面显示内容选择:</strong></legend>
|
<label for="map">机房分布图</label>
|
<input type="radio" data-mini="true" name="page_content" id="map" checked>
|
<label for="batt_status">电池状态饼状图</label>
|
<input type="radio" data-mini="true" name="page_content" id="batt_status">
|
<label for="power_cut">机房停电饼状图</label>
|
<input type="radio" data-mini="true" name="page_content" id="power_cut">
|
<label for="batt_health">电池健康饼状图</label>
|
<input type="radio" data-mini="true" name="page_content" id="batt_health">
|
<label for="batt_warn">电池告警饼状图</label>
|
<input type="radio" data-mini="true" name="page_content" id="batt_warn">
|
</fieldset>
|
<div class="city-contain">
|
<legend><strong>城市列表：</strong></legend>
|
<select data-mini="true" id="city" name="city">
|
<option value="鄂州市">鄂州市</option>
|
<option value="武汉市">武汉市</option>
|
</select>
|
</div>
|
</div>
|
<div class="fg-panel-btn">
|
<a href="javascript:panel.hide(true);" data-role="button" class="ui-btn ui-mini ui-btn-b ui-shadow">确定</a>
|
</div>
|
</div>
|
<div data-role="header">
|
<a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left" target="_top" style="padding-top:0.7em;padding-bottom:0.7em;">返回</a>
|
<h1>机房信息</h1>
|
<a href="javascript:panel.show();" class="ui-btn ui-corner-all ui-shadow ui-icon-bullets ui-btn-icon-left" target="_top" style="padding-top:0.7em;padding-bottom:0.7em;">筛选</a>
|
</div>
|
<div data-role="main">
|
<div id="main"></div>
|
<div id="graph"></div>
|
</div>
|
<script type="text/javascript" src="js/echarts.js"></script>
|
<script type="text/javascript" src="js/panel.js"></script>
|
<script type="text/javascript">
|
// 初始化页面
|
// 定义饼状图
|
$(function() {
|
var $graph = $('#graph').get(0);
|
var graph = echarts.init($graph);
|
window.graph = graph; // 提升为全局变量
|
|
});
|
$(function() {
|
$('#graph').hide();
|
initPage();
|
// 当横屏和竖屏切换时更改面板的高度
|
$(window).on("orientationchange",function(){
|
setTimeout(function() {
|
initPage();
|
theLocationToCity(map);
|
}, 200);
|
});
|
});
|
|
|
// 定义地图
|
$(document).ready(function() {
|
// 生成地图
|
var map = new BMap.Map('main');
|
window.map = map; // 提升map为全局变量
|
var point = new BMap.Point(116.404, 39.915);
|
map.centerAndZoom(point, 18);
|
map.enableScrollWheelZoom(true);
|
// 定位到市
|
theLocationToCity(map);
|
|
$('#city').change(function() {
|
theLocationToCity(map);
|
});
|
});
|
|
// 点击筛选内容显示
|
$(function() {
|
// 显示电池状态
|
$('#batt_status').on('click', function() {
|
searchBattState();
|
});
|
|
// 显示机房停电
|
$('#power_cut').on('click', function() {
|
searchPowerOff();
|
});
|
|
// 显示电池健康率
|
$('#batt_health').on('click', function() {
|
searchBattGood();
|
});
|
|
// 显示电池告警率
|
$('#batt_warn').on('click', function() {
|
searchBattAlarm();
|
});
|
|
// 显示地图
|
$('#map').on('click', function() {
|
showMap(graph);
|
});
|
});
|
|
|
//查询电池状态
|
function searchBattState(){
|
$.post("Batt_rtstateAction!serchBattStateRate",null,function(data){
|
var model=eval("("+data.result+")");
|
//console.info(model);
|
var batt_status_obj = new Array();
|
setBatt_list(batt_status_obj,model.data);
|
//console.info(batt_status_obj);
|
var batt_status = "电池状态";
|
showPie(graph, batt_status, batt_status_obj);
|
});
|
}
|
|
//查询机房停电
|
function searchPowerOff(){
|
$.ajax({
|
type: "post",
|
url: "BattPower_offAction!serchPowerOff",
|
async:true,
|
dataType:'text',
|
data:null,
|
success: function(data){
|
var StationObj=new Array();
|
data = eval("("+data+")");
|
var model = eval("("+data.result+")");
|
//console.info(model);
|
if((model.sum>=0) && (model.newsum>=0) && (model.newsum>=model.sum)){
|
StationObj=[{name:"已停电机房数",val:model.sum}, /*已停电机房*/
|
{name:"未停电机房数",val:model.newsum-model.sum}]; /* 未停电机房 */
|
}else{
|
StationObj=[{name:"已停电机房数",val:0}, /* 已停电机房 */
|
{name:"未停电机房数",val:model.sum}]; /* '未修复' */
|
}
|
var StationTle="机房停电"; /* '机房停电' */
|
showPie(graph, StationTle, StationObj);
|
},
|
});
|
}
|
|
//查询电池健康率
|
function searchBattGood(){
|
$.post("Batttestdata_infAction!searchGood",null,function(data){
|
var model=eval("("+data.result+")");
|
//console.info(model);
|
var healthObj = new Array();
|
if(model.code==1){
|
//console.info(model);
|
healthObj=[{name:"健康电池",val:model.sum-model.newsum}, /* '健康电池' */
|
{name:"不健康电池",val:model.newsum}]; /* '不健康电池' */
|
}else{
|
healthObj=[{name:"健康电池",val:model.sum-model.newsum}, /* '健康电池' */
|
{name:"不健康电池",val:model.newsum}];
|
}
|
//创建电池健康率
|
var healthTle = "电池健康率";
|
showPie(graph,healthTle,healthObj);
|
});
|
}
|
|
//查询电池告警率
|
function searchBattAlarm(){
|
var cityname = "";
|
//查询各种告警记录
|
$.post("Battalarm_dataAction!serchAlm","bmd.binf.StationName="+cityname,function(data){
|
var model=eval("("+data.result+")");
|
if(model.code==1){
|
var Almarr = new Array();
|
if(model.data!=undefined){
|
var data=model.data;
|
//console.info(data);
|
//var warnObj=[{name:'电池告警',val:'500'},{name:'正常工作',val:'400'}];
|
Almarr.push({
|
name:"容量告警告警",val:parseInt(data.BattGroupId) // 容量告警告警 /* 容量告警 */
|
},{
|
name:"单体电压",val:parseInt(data.alm_level) // 单体电压
|
},{
|
name:"容量更换告警",val:parseInt(data.alm_value) // 容量更换告警 /* 容量更换告警 */
|
});
|
|
}else{
|
Almarr.push({
|
name:"容量告警告警",val:parseInt(0) //在线电压
|
},{
|
name:"单体电压",val:parseInt(0) // 单体电压
|
},{
|
name:"容量更换告警",val:parseInt(0) //容量更换告警
|
});
|
}
|
//创建电池告警饼状图
|
var warnTle="电池告警率"; /* 电池告警率 */
|
showPie(graph,warnTle,Almarr);
|
}
|
});
|
}
|
|
// 初始化页面高度
|
function initPage() {
|
var winHt = $.mobile.getScreenHeight();
|
$('#main').height(winHt - 48);
|
$('#graph').height(winHt - 48);
|
graph.resize();
|
}
|
|
// 定位到市
|
function theLocationToCity(bMap) {
|
var city = $('#city').val();
|
if(city != ""){
|
bMap.centerAndZoom(city,11); // 用城市名设置地图中心点
|
}
|
}
|
|
// 显示饼状图
|
// pieChart为init后的容器,tle是title.text,objEle是一个数组对象，数组内的对象name和val
|
function showPie(pieChart, tle, objEle) {
|
$('#main').hide();
|
$('.city-contain').hide();
|
$('#graph').show();
|
pieChart.resize();
|
createPie(graph,tle,objEle);
|
}
|
|
// 显示地图
|
function showMap(pieChart) {
|
$('#main').show();
|
$('.city-contain').show();
|
$('#graph').hide();
|
pieChart.resize();
|
}
|
|
|
//电池状态
|
var batt_states = [
|
{state:1,value:"浮充"}, //浮充
|
{state:2,value:"充电"}, //充电
|
{state:3,value:"放电"}, //放电
|
{state:4,value:"均充"}, //放电
|
];
|
|
//设置电池状态机房
|
function setBatt_list(list,data){
|
//console.info(data);
|
if(data!=undefined && data.length>0){
|
for(var i=0;i<batt_states.length;i++){
|
var f = false;
|
for(var j=0;j<data.length;j++){
|
if(data[j].batt_state == batt_states[i].state){
|
list.push({
|
name:batt_states[i].value,val:data[j].num, /* 充电 */
|
});
|
f = true;
|
break;
|
}
|
}
|
if(f == false){
|
list.push({
|
name:batt_states[i].value,val:0, /* 充电 */
|
});
|
}
|
}
|
}
|
}
|
|
//创建饼状图
|
//pieChart为init后的容器,tle是title.text,objEle是一个数组对象，数组内的对象name和val
|
function createPie(pieChart,tle,objEle){
|
//清理画布
|
pieChart.clear();
|
//定义饼状图的配置项和数据
|
var option={
|
title : {
|
text:tle,
|
x:'right'
|
},
|
tooltip : {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
legend: {
|
orient : 'vertical',
|
x : 'left',
|
data:function(){
|
var lgd=new Array();
|
for(var i=0;i<objEle.length;i++)
|
{
|
lgd.push(objEle[i].name);
|
}
|
return lgd;
|
}()
|
},
|
toolbox: {
|
show : true,
|
orient : 'vertical',
|
x: 'right',
|
y: 'center',
|
feature : {
|
mark : {show: true},
|
dataView : {show: true, readOnly: false},
|
magicType : {
|
show: true,
|
type: ['pie', 'funnel'],
|
option: {
|
funnel: {
|
x: '25%',
|
width: '50%',
|
funnelAlign: 'left',
|
max: 1548
|
}
|
}
|
},
|
restore : {show: true},
|
saveAsImage : {show: true}
|
}
|
},
|
calculable : true,
|
series : [
|
{
|
name:'电池信息',
|
type:'pie',
|
radius : '55%',
|
center: ['50%', '60%'],
|
data:function(){
|
var dataArr=new Array();
|
for(var i=0;i<objEle.length;i++)
|
{
|
var oItem={
|
value:objEle[i].val,
|
name:objEle[i].name
|
};
|
dataArr.push(oItem);
|
}
|
return dataArr;
|
}()
|
}
|
]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
pieChart.setOption(option);
|
}
|
|
|
var warnDotList = new Array();
|
var commonDot = new Array();
|
var behindCellList = new Array();
|
var dischargeDotList = new Array();
|
|
|
searchStation();
|
//查询机房
|
function searchStation(){
|
var temp = createSearchParam();
|
var json = JSON.stringify(temp);
|
$.ajax({
|
type: "post",
|
url: "BattMap_informationAction!searchAll",
|
async:true,
|
dataType:'text',
|
data:"json="+json,
|
success: function(data){
|
data = eval('('+data+')');
|
var list = eval('('+data.result+')');
|
console.info(list);
|
var allStation = new Array();
|
if(list!=undefined && list.length>0){
|
for(var i=0;i<list.length;i++){
|
//console.info("第"+i+"次:"+model.data[i].binformation.num);
|
//setAllStation(model.data[i],allStation);
|
allStation.push({
|
binformation:list[i].data,
|
alarm_num:list[i].code, //告警数目
|
low_num:list[i].sum, //落后数目
|
delay_num:list[i].newsum, //延时数目
|
});
|
}
|
}
|
for(var i=0;i<allStation.length;i++){
|
if(allStation[i].low_num>0){ //落后数目
|
behindCellList.push(analyzeData(allStation[i]));
|
//console.info(analyzeData(allStation[i]));
|
}else if(allStation[i].alarm_num>0){ //告警数目
|
warnDotList.push(analyzeData(allStation[i]));
|
}else if(allStation[i].delay_num > 0){ //延时数目
|
dischargeDotList.push(analyzeData(allStation[i]));
|
}else{
|
commonDot.push(analyzeData(allStation[i]));
|
}
|
}
|
|
addCommonDotHome(commonDot);
|
createWarnDot(map, warnDotList);
|
dischargeTimeOut(map, dischargeDotList);
|
behindDotCell(map, behindCellList);
|
|
}
|
});
|
}
|
|
//构造查询条件
|
function createSearchParam(){
|
var bmd = {
|
adata:{
|
alm_cleared_type:0,
|
alm_id:1,
|
},
|
bplan:{
|
discharge_reason:3,
|
}
|
};
|
//console.info($('#alarm-station').length);
|
//console.info(bmd);
|
return bmd;
|
}
|
|
// 分析数据
|
function analyzeData(obj) {
|
var objVal = new Object();
|
objVal.lng = obj.binformation.longitude;
|
objVal.lat = obj.binformation.latitude;
|
objVal.title = obj.binformation.StationName;
|
var temp = {
|
StationId:obj.binformation.StationId,
|
};
|
var json = JSON.stringify(temp);
|
var content = "";
|
//console.info(json);
|
$.ajax({
|
type: "post",
|
url: "BattInfAction!serchByIdLow",
|
async:false,
|
dataType:'text',
|
data:"result="+json,
|
success: function(data){
|
//console.info(data);
|
data = eval('('+data+')');
|
var model = eval('('+data.result+')');
|
//console.info(model);
|
if(model.code == 1){
|
content = '<div style="padding:6px;"><span>蓄电池组告警数目：</span>'+obj.alarm_num+'</div>'+
|
'<div style="padding:6px;"><span>蓄电池组落后数目：</span>'+obj.low_num+'</div>'+
|
'<div style="padding:6px;"><span>蓄电池组延时数目：</span>'+obj.delay_num+'</div>'+
|
'<div style="padding:6px;"><span>地址：</span>'+obj.binformation.Address+'</div>'+
|
'<input type="hidden" class="ipt-hide" value="'+model.data[0].BattGroupId+'">'+
|
'<input type="hidden" class="ipt-hide" value="'+obj.binformation.StationId+'">';
|
objVal.content = content;
|
}
|
|
}
|
});
|
|
return objVal;
|
|
}
|
|
// 生成普通机房
|
function addCommonDotHome(commonDotList) {
|
for(var i = 0; i < commonDotList.length; i++) {
|
var iconCommonDot = new BMap.Icon('../image/map-common.png', new BMap.Size(20, 28)); // 设置图片
|
var addPoint = new BMap.Point(commonDotList[i].lng, commonDotList[i].lat);
|
var mk = new BMap.Marker(addPoint, {icon: iconCommonDot});
|
|
mk.addEventListener('click', function(e) {
|
var target = e.target;
|
showMapPanel(target, commonDotList);
|
});
|
// 向地图添加覆盖物
|
map.addOverlay(mk);
|
}
|
}
|
|
// 创建告警点
|
function createWarnDot(map, warnDotList) {
|
for(var i = 0; i < warnDotList.length; i++) {
|
var warnIcon = new BMap.Icon('../image/map-warn.png', new BMap.Size(20, 28)); // 设置图片
|
// console.info(warnIcon);
|
var pt = new BMap.Point(warnDotList[i].lng, warnDotList[i].lat);
|
// console.info(pt);
|
var mk = new BMap.Marker(pt, {icon:warnIcon}); // 定义marker点
|
|
mk.addEventListener('click', function(e) {
|
var target = e.target;
|
showMapPanel(target, warnDotList);
|
});
|
// 向地图添加覆盖物
|
map.addOverlay(mk);
|
}
|
|
}
|
|
// 创建放电延时的点
|
function dischargeTimeOut(map, dotList) {
|
for(var i = 0; i < dotList.length; i++) {
|
var warnIcon = new BMap.Icon('image/map-delay.png', new BMap.Size(20, 28)); // 设置图片
|
// console.info(warnIcon);
|
var pt = new BMap.Point(dotList[i].lng, dotList[i].lat);
|
// console.info(pt);
|
var mk = new BMap.Marker(pt, {icon:warnIcon}); // 定义marker点
|
|
mk.addEventListener('click', function(e) {
|
var target = e.target;
|
showMapPanel(target, dotList);
|
});
|
// 向地图添加覆盖物
|
map.addOverlay(mk);
|
}
|
}
|
|
// 创建电池落后的点
|
function behindDotCell(map, dotList) {
|
for(var i = 0; i < dotList.length; i++) {
|
var warnIcon = new BMap.Icon('../image/map-behind.png', new BMap.Size(20, 28)); // 设置图片
|
// console.info(warnIcon);
|
var pt = new BMap.Point(dotList[i].lng, dotList[i].lat);
|
// console.info(pt);
|
var mk = new BMap.Marker(pt, {icon:warnIcon}); // 定义marker点
|
|
mk.addEventListener('click', function(e) {
|
var target = e.target;
|
showMapPanel(target, dotList);
|
});
|
// 向地图添加覆盖物
|
map.addOverlay(mk);
|
}
|
}
|
|
|
function showMapPanel(target, warnList) {
|
var point = target.point;
|
var searchInforWin = null;
|
for(var i = 0; i < warnList.length; i++) {
|
if(warnList[i].lng == point.lng && warnList[i].lat == point.lat) {
|
var opts = {
|
title : warnList[i].title, //标题
|
width : 290, //宽度
|
height : 140, //高度
|
panel : "panel", //检索结果面板
|
enableAutoPan : true, //自动平移
|
searchTypes :[
|
// BMAPLIB_TAB_SEARCH, //周边检索
|
// BMAPLIB_TAB_TO_HERE, //到这里去
|
// BMAPLIB_TAB_FROM_HERE //从这里出发
|
]
|
};
|
|
searchInforWin = new BMapLib.SearchInfoWindow(map, warnList[i].content, opts);
|
}
|
}
|
|
searchInforWin.open(point);
|
$('.BMapLib_sendToPhone').hide();
|
}
|
</script>
|
</div>
|
</body>
|
</html>
|
