<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>设备用电量统计查询</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
<link rel="stylesheet" href="mobilCss/jquery.mobile-1.4.5.min.css"/>
|
<link href="mobilCss/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
|
<link href="mobilCss/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
|
<link rel="stylesheet" href="mobilCss/jquery.mobile-1.4.5.min.css"/>
|
<link rel="stylesheet" type="text/css" href="css/tbl.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">
|
</head>
|
<body>
|
<div data-role="page" id="pageone">
|
<!-- 面板内容 -->
|
<div class="fg-panel">
|
<form>
|
<div class="fg-panel-header">筛选</div>
|
<div class="fg-panel-content">
|
<fieldset data-role="controlgroup">
|
<p>维护区</p>
|
<select id="privince" data-mini="true">
|
<option value="">全部</option>
|
</select>
|
|
<p>机房站点</p>
|
<select id="city" data-mini="true">
|
</select>
|
|
<p>统计参数</p>
|
<select data-mini="true" id="perindex">
|
<!-- <option value="">全部共四种</option> -->
|
</select>
|
<p>统计时间段</p>
|
<fieldset data-role="controlgroup" data-type="horizontal">
|
<input type="text" id="startime" name="appDate" class="appDate" />
|
<span class="sicon">¯</span>
|
<input type="text" id="endtime" name="appDate" class="appDate" />
|
</fieldset>
|
<div class="timebill">
|
<p >统计方式</p>
|
<select id="statistical-type" class="timebill" data-mini="true">
|
<option value="3">按年统计</option>
|
<option value="2">按季度统计</option>
|
<option value="1">按月份统计</option>
|
</select>
|
<p>年份</p>
|
<select id="search-year" class="timebill" data-mini="true">
|
</select>
|
</div>
|
|
</fieldset>
|
</div>
|
<div class="fg-panel-btn">
|
<a href="javascript:panel.hide(true);" data-role="button" id="submit" class="ui-btn ui-mini ui-btn-b ui-shadow">确定</a>
|
</div>
|
</form>
|
</div>
|
|
<!-- 头部内容 -->
|
<div data-role="header" data-position="fixed">
|
<a href="count-report.html" target="_top" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left" 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-grid ui-btn-icon-left" style="padding-top: 0.7em; padding-bottom: 0.7em;" id="screen">筛选</a>
|
</div>
|
<!-- 主体内容 -->
|
<div data-role="main">
|
<!-- 表格容器 -->
|
<!-- <div class="tbl-container"></div> -->
|
<!-- 图表容器 -->
|
<div id="conEchart"></div>
|
</div>
|
<!-- 页脚内容 -->
|
<!-- <div data-role="footer" data-position="fixed">
|
<div data-role="navbar">
|
<ul>
|
<li><a href="javascript:showTbl();" target="_top" data-icon="home">表格</a></li>
|
<li><a href="javascript:showEcharts();" data-icon="arrow-r" id="echart-pic">折线图</a></li>
|
</ul>
|
</div>
|
</div> -->
|
</div>
|
</body>
|
|
<script type="text/javascript" src="mobilJs/base.js"></script>
|
<script type="text/javascript" src="js/echarts.js"></script>
|
<script type="text/javascript" src="js/tbl.js"></script>
|
<script src="mobilJs/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
|
<script src="mobilJs/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
|
<script src="mobilJs/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
|
<script src="mobilJs/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
|
<script type="text/javascript" src="js/panel.js"></script>
|
<script type="text/javascript">
|
// 定义折线统计图
|
var breakLineGraph;
|
var wd = $(window).width();
|
var ht = $(window).height() -30;
|
$('#conEchart').css({
|
//display: 'none',
|
width: wd + 'px',
|
height: ht + 'px'
|
});
|
var lineGraph = $('#conEchart').get(0); // 折线统计图容器
|
breakLineGraph = echarts.init(lineGraph); // 初始化echarts对象
|
//creatLineGraph(breakLineGraph, [], [], [], '');
|
|
// 显示echarts
|
function showEcharts() {
|
$('.tbl-container').hide();
|
$('#conEchart').show();
|
breakLineGraph.resize();
|
}
|
|
// 隐藏echats显示表格
|
function showTbl() {
|
$('#conEchart').hide();
|
breakLineGraph.resize();
|
$('.tbl-container').show();
|
}
|
var ArrTh=['设备ID','设备名', '时间' ,'移动','电信','联通'];
|
|
$('document').ready(function(){
|
panel.show();
|
});
|
|
$(function () {
|
setTimes($("#startime"),'2000-01-01');
|
setTimes($("#endtime"),new Date().format("yyyy-MM-dd"));
|
|
$('#search-year').text('');
|
var currYear = new Date().getFullYear();
|
for(var i=2000;i<=currYear;i++){
|
var $option = $("<option value="+i+">"+i+"</option>");
|
if(i==currYear){
|
$option.attr('selected',true);
|
}
|
$('#search-year').append($option);
|
};
|
$('#search-year').siblings('span').text(currYear);
|
});
|
|
|
|
//点击筛选弹出选择框时,查询维护区中的枢纽类型(尝试加载就返回数据)
|
$.post("BattInfAction_serchByStation",null,function(data){
|
data=data.result;
|
data=eval("("+data+")");
|
//console.info(data);
|
if(data.code==1 && data.data.length>0){
|
var arr = new Array();
|
for(var i=0;i<=data.data.length;i++){
|
if(i == 0){
|
arr.push({
|
val:"",
|
txt:"全部(共"+data.sum+"个)"
|
});
|
}else{
|
arr.push({
|
val:data.data[i-1].StationName1,
|
txt:data.data[i-1].StationName1
|
});
|
}
|
updataSel($('#privince'),arr);
|
updataSel($('#privince1'),arr);
|
};
|
}
|
findStationNamebyStationname1();
|
});
|
|
//当维护区的值变换时更新机房站点
|
$('#privince').change(function(){
|
findStationNamebyStationname1();
|
});
|
|
//根据维护区查询站点
|
function findStationNamebyStationname1(){
|
var selectvalue=$("#privince option:selected").val();
|
//alert(selectvalue);
|
$.post("BattInfAction_serchByStationName","bif.StationName1="+selectvalue,function(data){
|
data=data.result;
|
data=eval("("+data+")");
|
//console.info(data);
|
if(data.code==1 && data.data.length>0){
|
var arr = new Array();
|
for(var i=0;i<data.data.length;i++){
|
arr.push({
|
val:data.data[i].StationId,
|
txt:data.data[i].StationName,
|
});
|
};
|
updataSel($("#city"), arr);
|
};
|
});
|
}
|
|
$(function(){
|
var PerArr=['电压','电流','功率','电度'];
|
$('.timebill').hide();
|
//$('#perindex').siblings('span').text(PerArr[0]);
|
for(var i=0;i<PerArr.length;i++){
|
$('#perindex').append('<option value="'+(i+1)+'"></option>').find('option').eq(i).text(PerArr[i]);
|
}
|
$('#perindex').siblings('span').text(PerArr[0]);
|
$('#perindex').change(function(){
|
if($('#perindex option:selected').text()=='电度'){
|
|
$('.timebill').show();
|
}else{
|
|
$('.timebill').hide();
|
}
|
});
|
|
});
|
|
|
$(function(){
|
$('#submit').click(function(){
|
var select = $("#perindex").val();
|
//console.info(select);
|
if(select == 4){
|
//查询电度
|
//console.info('查询电度');
|
searchDiandu();
|
|
}else{
|
//查询其他
|
//console.info('查询其他');
|
searchElse();
|
};
|
});
|
});
|
|
|
|
//查询电度
|
function searchDiandu(){
|
loadshow();
|
//console.info("查询电度");
|
var type = $("#statistical-type").val();
|
var temp = createSearchParam();
|
var json = JSON.stringify(temp);
|
var xdata = getXData(type);
|
var ydata = new Array();
|
var yarr = {lname:"移动",data:new Array()};
|
var larr = {lname:"联通",data:new Array()};
|
var darr = {lname:"电信",data:new Array()};
|
|
ArrTd = new Array();
|
$.ajax({
|
type: "post",
|
url: "../Batt_electricityAction!serchByCondition",
|
async:true,
|
dataType:'text',
|
data:"json="+json,
|
success: function(data){
|
data = eval('('+data+')');
|
var model = eval('('+data.result+')');
|
//console.info(model);
|
if(model.length > 0){
|
for(var i=0;i<model.length;i++){
|
|
if(type == 3){
|
//按年统计
|
xdata.push(model[i].code);
|
|
yarr.data.push((model[i].lowCA).toFixed(1)); //移动
|
darr.data.push((model[i].lowCH).toFixed(1)); //电信
|
larr.data.push((model[i].lowRA).toFixed(1)); //联通
|
}else{
|
//按月份统计和按季度统计
|
if(xdata.length >= model[i].sum){
|
yarr.data[model[i].sum-1] = ((model[i].lowCA).toFixed(1));
|
darr.data[model[i].sum-1] = ((model[i].lowCH).toFixed(1));
|
larr.data[model[i].sum-1] = ((model[i].lowRA).toFixed(1));
|
}
|
|
}
|
|
ArrTd.push(model[i].newsum); //设备ID
|
ArrTd.push(model[i].msg); //设备名称
|
ArrTd.push(model[i].msgN); //时间
|
ArrTd.push((model[i].lowCA).toFixed(1)); //移动电度
|
ArrTd.push((model[i].lowCH).toFixed(1)); //电信电度
|
ArrTd.push((model[i].lowRA).toFixed(1)); //联通电度
|
|
}
|
ydata.push(yarr);
|
ydata.push(darr);
|
ydata.push(larr);
|
}else{
|
$('#searchNull').popup('open');
|
}
|
//createTbl($('.tbl-container'),ArrTh,ArrTd);
|
// 清除折线图
|
breakLineGraph.clear();
|
//bigBreakLineGraph.clear();
|
createBar(breakLineGraph, xdata, ydata);
|
|
loadclose();
|
|
$('#pagetwo-title').text("设备用电量柱状图");
|
},
|
error:function(){
|
$('#searchErr').popup('open');
|
loadclose();
|
}
|
});
|
};
|
|
//查询电压电流功率
|
function searchElse(){
|
loadshow();
|
var temp = createSearchParam();
|
var json = JSON.stringify(temp);
|
var xdata = new Array();
|
var ydata = new Array();
|
ArrTd = new Array();
|
$.ajax({
|
type: "post",
|
url: "../Batt_DevdischargeAction!serchByCondition",
|
async:true,
|
dataType:'text',
|
data:"json="+json,
|
success: function(data){
|
data = eval('('+data+')');
|
var model = eval('('+data.result+')');
|
//console.info(model);
|
var yidong = new Array();
|
var liantong = new Array();
|
var dianxin = new Array();
|
if(model.code > 0){
|
for(var i=0;i<model.data.length;i++){
|
ArrTd.push(model.data[i].bd_CM.dev_id); //设备ID
|
ArrTd.push(model.data[i].bd_CM.dev_name); //设备名称
|
ArrTd.push(model.data[i].bd_CM.dev_recordtime); //时间
|
xdata.push(model.data[i].bd_CM.dev_recordtime);
|
var CM_value = 0;
|
var CT_value = 0;
|
var CU_value = 0;
|
if(temp.MonCount==1){
|
//电压
|
CM_value = parseFloat(model.data[i].bd_CM.dev_vol == undefined?0:model.data[i].bd_CM.dev_vol).toFixed(1);
|
CT_value = parseFloat(model.data[i].bd_CT.dev_vol == undefined?0:model.data[i].bd_CT.dev_vol).toFixed(1);
|
CU_value = parseFloat(model.data[i].bd_CU.dev_vol == undefined?0:model.data[i].bd_CU.dev_vol).toFixed(1);
|
}else if(temp.MonCount==2){
|
//电流
|
CM_value = parseFloat(model.data[i].bd_CM.dev_curr == undefined?0:model.data[i].bd_CM.dev_curr).toFixed(1);
|
CT_value = parseFloat(model.data[i].bd_CT.dev_curr == undefined?0:model.data[i].bd_CT.dev_curr).toFixed(1);
|
CU_value = parseFloat(model.data[i].bd_CU.dev_curr == undefined?0:model.data[i].bd_CU.dev_curr).toFixed(1);
|
}else{
|
//功率
|
CM_value = parseFloat(model.data[i].bd_CM.dev_power == undefined?0:model.data[i].bd_CM.dev_power).toFixed(1);
|
CT_value = parseFloat(model.data[i].bd_CT.dev_power == undefined?0:model.data[i].bd_CT.dev_power).toFixed(1);
|
CU_value = parseFloat(model.data[i].bd_CU.dev_power == undefined?0:model.data[i].bd_CU.dev_power).toFixed(1);
|
}
|
|
yidong.push(CM_value);
|
dianxin.push(CT_value);
|
liantong.push(CU_value);
|
|
|
ArrTd.push(CM_value); //移动电度
|
ArrTd.push(CT_value); //电信电度
|
ArrTd.push(CU_value); //联通电度
|
|
}
|
ydata.push(yidong);
|
ydata.push(dianxin);
|
ydata.push(liantong);
|
}else{
|
$('#searchNull').popup('open');
|
}
|
//console.info(ydata);
|
//createTbl($('.tbl-container'),ArrTh,ArrTd);
|
// 清除折线图
|
breakLineGraph.clear();
|
//bigBreakLineGraph.clear();
|
var lname = ['移动', '电信', '联通'];
|
var value = getUnit($('#perindex').val());
|
creatLineGraph(breakLineGraph, lname, xdata, ydata, value);
|
loadclose();
|
|
},
|
error:function(){
|
$('#searchErr').popup('open');
|
loadclose();
|
}
|
});
|
};
|
|
function getUnit(value){
|
var unit = "";
|
switch(value){
|
case 1:unit = "V";break;
|
case 2:unit = "A";break;
|
case 3:unit = "W";break;
|
}
|
return unit;
|
}
|
|
//构造查询条件
|
function createSearchParam(){
|
var temp = {
|
StationId:$('#city').val(), //机房id
|
StationName1:$('#privince').val(), //维护区
|
BattProductDate:$('#startime').val()+" 00:00:00", //统计开始时间段
|
BattProductDate1:$('#endtime').val()+" 23:59:59", //统计结束时间段
|
MonCount:$('#perindex').val(), //统计参数
|
SignalName:$('#statistical-type').val(), //统计年限
|
};
|
var target = $('#perindex').val();
|
var statisticaltype = $('#statistical-type').val();
|
if(target == 4 && statisticaltype <3){
|
temp.BattProductDate = $('#search-year').val()+"-01-01 00:00:00";
|
temp.BattProductDate1 = $('#search-year').val()+"-12-31 23:59:59";
|
}
|
//console.info(temp);
|
return temp;
|
}
|
|
/* var OconEchart=document.getElementById("conEchart"); //绘图区域对象
|
createPicture(); */
|
|
|
//创建图片
|
function createPicture(){
|
var date=['2015-07-7 8:10:10','2015-07-8 8:10:10','2015-07-9 8:10:10','2015-07-10 8:10:10'];
|
date.sort(function(a,b){
|
var d1=new Date(a.replace(/-/g,"/"));
|
var d2=new Date(b.replace(/-/g,"/"));
|
return d1-d2;
|
});
|
//console.info(date);
|
CreateLineEchart(OconEchart,['qq','ww','ee','rr'],date,[[20,40,60,80],[100,40,25,78],[90,14,35,67],[15,100,20,60]]);
|
};
|
|
|
//获取柱状图的横轴值
|
function getXData(value){
|
var arr = new Array();
|
//按季度统计
|
if(value == 2){
|
for(var i = 1 ;i<5;i++){
|
arr.push("第"+i+"季度");
|
}
|
//按月份统计
|
}else if(value == 1){
|
for(var i = 1 ;i<=12;i++){
|
arr.push(i+"月");
|
}
|
}
|
return arr;
|
}
|
|
$(function(){
|
$('#perindex').change(function(){
|
if($(this).val() == 4){
|
$('#echart-pic').text("柱状图");
|
}else{
|
$('#echart-pic').text("曲线图");
|
}
|
});
|
});
|
/**
|
生成柱状图
|
@param barObj echarts对象
|
@param xdata 柱状图x轴的数据 类型：array
|
@param barList 柱状图y轴数据结构为[{lname:str,data:arr},{lname:str,data:arr}...]
|
*/
|
|
function createBar(barObj, xdata, barList) {
|
var option = {
|
tooltip : {
|
trigger: 'axis',
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
}
|
},
|
legend: function() {
|
var item = new Object();
|
var lname = new Array();
|
for(var i = 0; i < barList.length; i++) {
|
lname.push(barList[i].lname);
|
}
|
item.data = lname;
|
return item;
|
}(),
|
grid: {
|
left: '3%',
|
right: '4%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type : 'category',
|
data : xdata
|
}
|
],
|
yAxis : [
|
{
|
type : 'value',
|
name : 'kW·h'
|
}
|
],
|
series : function() {
|
var serie = new Array();
|
for(var i = 0; i < barList.length; i++) {
|
var Item = {
|
name:barList[i].lname,
|
type:'bar',
|
data:barList[i].data
|
};
|
serie.push(Item);
|
}
|
return serie;
|
}()
|
};
|
barObj.setOption(option);
|
}
|
|
// 创建折线统计图
|
function creatLineGraph(breakLine, lname, xdata, sdata, unit) {
|
var option={
|
tooltip:{
|
//show:true,
|
trigger: 'axis',
|
|
},
|
legend: {
|
data: lname
|
},
|
grid: {
|
top:'6%',
|
left: '1%',
|
right: '5%',
|
bottom: '10%',
|
containLabel: true
|
},
|
calculable : true,
|
xAxis:{
|
data:xdata
|
},
|
yAxis:[{
|
type:'value',
|
axisLabel:{
|
formatter:function(value){
|
//解决原点处带符号问题
|
if(value==0)
|
{
|
return value;
|
}else{
|
return value +unit;
|
}
|
}
|
}
|
}],
|
series:function(){
|
var serie=[];
|
for( var i=0;i<sdata.length;i++){
|
var oItem={
|
type:'line',
|
symbol:'pin',
|
name:lname[i],
|
tooltip:{
|
show:true,
|
trigger:'axis',
|
showContent:true
|
},
|
data:sdata[i]
|
};
|
serie.push(oItem);
|
}
|
return serie;
|
}()
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
//console.info(option);
|
breakLine.setOption(option);
|
}
|
$(window).on("orientationchange",function(){
|
setTimeout(function() {
|
var wdt = $(window).width();
|
var htt = $(window).height()-30;
|
$('#conEchart').css({
|
width: wdt + 'px',
|
height: htt + 'px'
|
});
|
breakLineGraph.resize();
|
}, 200);
|
});
|
</script>
|
</html>
|
|
|
|
