1351 lines
46 KiB
JavaScript
1351 lines
46 KiB
JavaScript
apiready = function() {
|
||
//默认显示对比分页tab-panel 即 ctrl.mode = ctrl.modes.COMPARE;
|
||
//默认时间粒度是日数据 即 ctrl.dimension = ctrl.dimensions.DAY;
|
||
//默认时间是当前月
|
||
|
||
//当收到侧栏页的 “energySelectedNumber”的消息，也就是侧栏页选中了调度号，同时在消息体里把调度号传回主页 调用获取数据的方法 getData
|
||
//getData方法调用各个获取数据的具体方法
|
||
// getTimeData()
|
||
// getCompareData()
|
||
//获取到数据之后 保存在对用的数据对象里
|
||
// compareAChartData
|
||
// compareATableData
|
||
// timeAChartData
|
||
// timeBChartData
|
||
// timeCChartData
|
||
// 然后调用分别在各个获取数据的方法里调用对应的render方法来渲染表格或者图表
|
||
|
||
//当切换了“分时分析”和“对比分析”panel 调用对应的render方法，不在调用getData();
|
||
|
||
//当点击“选择回路”按钮 弹出侧栏 选中调度号后 点击确定 主页收到“energySelectedNumber”消息 重新调用getData()方法，重复上述步骤
|
||
|
||
//当选择了“日数据”或“月数据”按钮， 重新调用getData()方法
|
||
|
||
//重新选择了日期之后， 重新调用getData()方法
|
||
var ctrl = {
|
||
init: {},
|
||
initChart: {},
|
||
bind: {},
|
||
backCallback: {},
|
||
|
||
modes: {
|
||
"COMPARE": 1,
|
||
"TIME": 2
|
||
},
|
||
mode: null,
|
||
dimensions: {
|
||
"HOUR": 1, //时数据
|
||
"DAY": 2, //日数据
|
||
"MONTH": 3, //月数据
|
||
"YEAR": 4 //年数据
|
||
},
|
||
dimension: null,
|
||
when: null,
|
||
number: null, //调度号
|
||
name: null, //设备名称
|
||
|
||
getCompareData: {},
|
||
|
||
compareAChartData: null,
|
||
compareAChart: null,
|
||
compareAChartOption: null,
|
||
|
||
compareATableData: null,
|
||
|
||
getTimeData: {},
|
||
|
||
timeAChart: null,
|
||
timeBChart: null,
|
||
timeCChart: null,
|
||
|
||
timeAChartData: null,
|
||
timeBChartData: null,
|
||
timeCChartData: null,
|
||
|
||
timeAChartOption: null,
|
||
timeBChartOption: null,
|
||
timeCChartOption: null,
|
||
|
||
renderTimeAChart: {}, //渲染AChart
|
||
renderTimeBChart: {}, //渲染BChart
|
||
renderTimeCChart: {}, //渲染CChart
|
||
renderTimePanel: {}, //渲染整个分时分析的panel
|
||
|
||
}
|
||
|
||
ctrl.init = function() {
|
||
if (api.systemType == "android") {
|
||
api.setScreenOrientation({
|
||
orientation: 'landscape_left'
|
||
});
|
||
}
|
||
var _this = this;
|
||
|
||
//默认选择日数据模式
|
||
_this.dimension = _this.dimensions.DAY;
|
||
|
||
//默认显示对比分析
|
||
_this.mode = _this.modes.COMPARE;
|
||
|
||
//获取配电室id
|
||
_this.prId = $api.getStorage('powerRoom').prId;
|
||
|
||
//初始化时间
|
||
ctrl.initDate();
|
||
|
||
ctrl.bind();
|
||
|
||
//关闭首页正在加载的提示框
|
||
api.execScript({
|
||
name: 'index',
|
||
frameName: 'featureFrame',
|
||
script: "api.hideProgress();"
|
||
});
|
||
|
||
|
||
|
||
}
|
||
//初始化时间选择器 默认为日数据的近一个星期
|
||
ctrl.initDate = function() {
|
||
var _this = this;
|
||
//时数据
|
||
if (_this.dimension == _this.dimensions.HOUR) {
|
||
//切换选择器类型 精确到时间
|
||
$('.iptime').attr("type", "datetime-local");
|
||
//默认是今天
|
||
var dateUtils = new DateUtils();
|
||
var endDate = dateUtils.getFormattedDate('yyyy/MM/dd hh');
|
||
$('#lbEndTime').html(endDate);
|
||
_this.endLine = dateUtils.getMillisecondOfHourEnd();
|
||
dateUtils.subDays(1);
|
||
var startDate = dateUtils.getFormattedDate('yyyy/MM/dd hh');
|
||
$('#lbStartTime').html(startDate);
|
||
_this.startLine = dateUtils.getMillisecondOfHour();
|
||
}
|
||
//日数据
|
||
if (_this.dimension == _this.dimensions.DAY) {
|
||
//切换选择器类型 精确到时间
|
||
$('.iptime').attr("type", "date");
|
||
//默认范围 七天之前 - 今天
|
||
var dateUtils = new DateUtils();
|
||
var endDate = dateUtils.getFormattedDate('yyyy-MM-dd');
|
||
$('#lbEndTime').html(endDate);
|
||
_this.endLine = dateUtils.getMillisecondOfDateEnd();
|
||
dateUtils.subDays(7);
|
||
var startDate = dateUtils.getFormattedDate('yyyy-MM-dd');
|
||
$('#lbStartTime').html(startDate);
|
||
_this.startLine = dateUtils.getMillisecondOfDate();
|
||
|
||
}
|
||
//月数据
|
||
if (_this.dimension == _this.dimensions.MONTH) {
|
||
//切换选择器类型 精确到时间
|
||
$('.iptime').attr("type", "month");
|
||
//默认范围 31天之前 - 今天
|
||
var dateUtils = new DateUtils();
|
||
var endDate = dateUtils.getFormattedDate('yyyy-MM');
|
||
$('#lbEndTime').html(endDate);
|
||
_this.endLine = dateUtils.getMillisecondOfLastDay();
|
||
dateUtils.subDays(31);
|
||
var startDate = dateUtils.getFormattedDate('yyyy-MM');
|
||
$('#lbStartTime').html(startDate);
|
||
_this.startLine = dateUtils.getMillisecondOfFirstDay();
|
||
|
||
}
|
||
//年数据
|
||
if (_this.dimension == _this.dimensions.YEAR) {
|
||
//切换选择器类型 精确到时间
|
||
$('.iptime').attr("type", "month");
|
||
//默认范围 1年之前 - 今年
|
||
var dateUtils = new DateUtils();
|
||
var endDate = dateUtils.getFormattedDate('yyyy年');
|
||
$('#lbEndTime').html(endDate);
|
||
ctrl.endLine = dateUtils.getMillisecondOfLastMonth();
|
||
dateUtils.subDays(365);
|
||
var startDate = dateUtils.getFormattedDate('yyyy年');
|
||
$('#lbStartTime').html(startDate);
|
||
ctrl.startLine = dateUtils.getMillisecondOfFirstMonth();
|
||
}
|
||
// ctrl.getData();
|
||
|
||
}
|
||
|
||
ctrl.bind = function() {
|
||
var height = $(window).height() - $("header").height() - $(".tabs").height();
|
||
$(".content-container").css("height", height);
|
||
//绑定返回按钮
|
||
$api.addEvt($api.dom("#back"), "touchend", function() {
|
||
ctrl.backCallback();
|
||
})
|
||
|
||
//点击系统返回按钮
|
||
api.addEventListener({
|
||
name: 'keyback'
|
||
}, function(ret, err) {
|
||
ctrl.backCallback();
|
||
});
|
||
|
||
//点击选择回路
|
||
$api.addEvt($api.dom("#btn-pick-number"), "touchend", function() {
|
||
api.openDrawerPane({
|
||
type: 'right'
|
||
});
|
||
}, false);
|
||
|
||
|
||
//页面加载完成 初始化图表
|
||
api.addEventListener({
|
||
name: 'viewappear'
|
||
}, function(ret, err) {
|
||
api.sendEvent({
|
||
name: 'energyAskNumber'
|
||
});
|
||
})
|
||
|
||
//点击对比分析按钮
|
||
$api.addEvt($api.dom("#compare-tab"), "touchend", function() {
|
||
$api.addCls(this, "active");
|
||
$api.removeCls($api.dom("#time-tab"), "active");
|
||
$api.css($api.dom("#compare-tab-panel"), 'display:block');
|
||
$api.css($api.dom("#time-tab-panel"), 'display:none');
|
||
ctrl.mode = ctrl.modes.COMPARE;
|
||
|
||
//显示时数据
|
||
if ($('.hour')) {
|
||
$('#time-selector').find('.hour').remove();
|
||
}
|
||
var str = '<option value="1" class="hour"> 时数据</option>'
|
||
$('#time-selector').append(str);
|
||
ctrl.dimension = ctrl.dimensions.DAY;
|
||
$('#day').prop("selected", true);
|
||
ctrl.initDate();
|
||
ctrl.getData();
|
||
// ctrl.renderComparePanel();
|
||
}, false);
|
||
|
||
//点击分时分析按钮
|
||
$api.addEvt($api.dom("#time-tab"), "touchend", function() {
|
||
$api.addCls(this, "active");
|
||
$api.removeCls($api.dom("#compare-tab"), "active");
|
||
$api.css($api.dom("#time-tab-panel"), 'display:block');
|
||
$api.css($api.dom("#compare-tab-panel"), 'display:none');
|
||
ctrl.mode = ctrl.modes.TIME;
|
||
$('#time-selector').find('.hour').remove();
|
||
//重新
|
||
ctrl.dimension = ctrl.dimensions.DAY;
|
||
$('#day').prop("selected", true);
|
||
ctrl.initDate();
|
||
ctrl.getData();
|
||
// ctrl.renderTimePanel();
|
||
|
||
}, false);
|
||
|
||
|
||
//页面滚动 隐藏掉所有toopTip
|
||
$api.addEvt($api.dom("body"), "touchmove", function() {
|
||
ctrl.compareAChart && ctrl.compareAChart.dispatchAction({
|
||
type: 'hideTip'
|
||
});
|
||
ctrl.timeAChart && ctrl.timeAChart.dispatchAction({
|
||
type: 'hideTip'
|
||
});
|
||
if (true) {
|
||
|
||
}
|
||
ctrl.timeBChart && ctrl.timeBChart.dispatchAction({
|
||
type: 'hideTip'
|
||
});
|
||
ctrl.timeCChart && ctrl.timeCChart.dispatchAction({
|
||
type: 'hideTip'
|
||
});
|
||
}, false);
|
||
|
||
//监听收到选择调度号的事件
|
||
api.addEventListener({
|
||
name: 'energySelectedNumber'
|
||
}, function(ret, err) {
|
||
var number = ret.value.number;
|
||
var name = ret.value.name;
|
||
ctrl.number = number;
|
||
ctrl.name = name;
|
||
ctrl.getData();
|
||
});
|
||
|
||
//监听数据类型的变化
|
||
$('#time-selector').on("change", function() {
|
||
ctrl.getDataType();
|
||
})
|
||
|
||
//监听开始时间变化
|
||
$('#startTime-select').on('change', function() {
|
||
var startTimeValue = $api.val($api.dom("#startTime-select"));
|
||
var dates = new Date(startTimeValue);
|
||
var year = dates.getUTCFullYear();
|
||
var month = dates.getUTCMonth() + 1;
|
||
var date = dates.getUTCDate();
|
||
var hour = dates.getUTCHours();
|
||
//时数据
|
||
if (ctrl.dimension == ctrl.dimensions.HOUR) {
|
||
startTimeValue = year + '/' + month + '/' + date + ' ' + hour;
|
||
var startLine = startTimeValue + ":00:00";
|
||
ctrl.startLine = new Date(startLine).getTime();
|
||
|
||
}
|
||
//日数据
|
||
if (ctrl.dimension == ctrl.dimensions.DAY) {
|
||
startTimeValue = year + '/' + month + '/' + date;
|
||
var startLine = startTimeValue + " 00:00:00";
|
||
ctrl.startLine = new Date(startLine).getTime();
|
||
}
|
||
|
||
//月数据
|
||
if (ctrl.dimension == ctrl.dimensions.MONTH) {
|
||
startTimeValue = year + '/' + month;
|
||
var startLine = startTimeValue + "/1 00:00:00";
|
||
ctrl.startLine = new Date(startLine).getTime();
|
||
|
||
}
|
||
|
||
//年数据
|
||
if (ctrl.dimension == ctrl.dimensions.YEAR) {
|
||
startTimeValue = year;
|
||
var startLine = startTimeValue + "/1/1 00:00:00";
|
||
ctrl.startLine = new Date(startLine).getTime();
|
||
}
|
||
|
||
|
||
var lbStartTime = $('#lbStartTime');
|
||
if (startTimeValue) {
|
||
lbStartTime.html(startTimeValue);
|
||
|
||
} else {
|
||
lbStartTime.html("开始日期");
|
||
}
|
||
})
|
||
|
||
|
||
//监听结束时间变化
|
||
$('#endTime-select').on('change', function() {
|
||
var endTimeValue = $api.val($api.dom("#endTime-select"));
|
||
var dates = new Date(endTimeValue);
|
||
var year = dates.getUTCFullYear();
|
||
var month = dates.getUTCMonth() + 1;
|
||
var date = dates.getUTCDate();
|
||
var hour = dates.getUTCHours();
|
||
//时数据
|
||
if (ctrl.dimension == ctrl.dimensions.HOUR) {
|
||
endTimeValue = year + '/' + month + '/' + date + ' ' + hour;
|
||
var endLine = endTimeValue + ":59:59";
|
||
ctrl.endLine = new Date(endLine).getTime();
|
||
}
|
||
|
||
//日数据
|
||
if (ctrl.dimension == ctrl.dimensions.DAY) {
|
||
endTimeValue = year + '/' + month + '/' + date;
|
||
var endLine = endTimeValue + " 23:59:59";
|
||
ctrl.endLine = new Date(endLine).getTime();
|
||
}
|
||
|
||
//月数据
|
||
if (ctrl.dimension == ctrl.dimensions.MONTH) {
|
||
var dateUtils = new DateUtils();
|
||
var endMonthDay = dateUtils.getMonthDays(month - 1, year);
|
||
endTimeValue = year + '/' + month;
|
||
|
||
var endLine = endTimeValue + '/' + endMonthDay + " 23:59:59";
|
||
ctrl.endLine = new Date(endLine).getTime();
|
||
}
|
||
|
||
//年数据
|
||
if (ctrl.dimension == ctrl.dimensions.YEAR) {
|
||
endTimeValue = year;
|
||
var endLine = endTimeValue + "/12/31 23:59:59";
|
||
ctrl.endLine = new Date(endLine).getTime();
|
||
}
|
||
|
||
|
||
var lbEndTime = $('#lbEndTime');
|
||
if (endTimeValue) {
|
||
lbEndTime.html(endTimeValue);
|
||
|
||
} else {
|
||
lbEndTime.html("结束日期");
|
||
}
|
||
})
|
||
|
||
//选择时间结束后必须点击查询按钮才能请求数据
|
||
$("#query").on("touchend", function() {
|
||
if (ctrl.dimension != ctrl.dimensions.YEAR) {
|
||
ctrl.verifyDate();
|
||
|
||
} else {
|
||
//年数据不需要验证
|
||
ctrl.getData();
|
||
}
|
||
|
||
})
|
||
|
||
}
|
||
/**
|
||
* 弹出提示框
|
||
*/
|
||
|
||
ctrl.toast = function(msg) {
|
||
api.toast({
|
||
msg: msg,
|
||
duration: 3000,
|
||
locaiton: 'top'
|
||
});
|
||
}
|
||
//验证时间的合法性
|
||
ctrl.verifyDate = function() {
|
||
var _this = this;
|
||
if (_this.endLine - _this.startLine < 0) {
|
||
var tempLine;
|
||
tempLine = _this.startLine;
|
||
_this.startLine = _this.endLine;
|
||
_this.endLine = tempLine;
|
||
}
|
||
//时数据 时间区间不超过2天
|
||
if (_this.dimension == _this.dimensions.HOUR) {
|
||
if (_this.endLine - _this.startLine > (48 * 60 * 60 * 1000)) {
|
||
_this.toast("建议时间区间不超过2天，请重新选择");
|
||
return false;
|
||
}
|
||
_this.getData();
|
||
}
|
||
//日数据 时间区间不超过31天
|
||
if (_this.dimension == _this.dimensions.DAY) {
|
||
if (_this.endLine - _this.startLine > (31 * 24 * 60 * 60 * 1000)) {
|
||
_this.toast("建议时间区间不超过31天，请重新选择");
|
||
return false;
|
||
}
|
||
|
||
_this.getData();
|
||
}
|
||
//月数据 时间区间不超过2年
|
||
if (_this.dimension == _this.dimensions.MONTH) {
|
||
if (_this.endLine - _this.startLine > (24 * 30 * 24 * 60 * 60 * 1000)) {
|
||
_this.toast("建议时间区间不超过两年，请重新选择");
|
||
return false;
|
||
}
|
||
_this.getData();
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
//选择时间类型
|
||
// 对比分析 时数据 日数据 月数据 年数据
|
||
// 分时分析 日数据 月数据 年数据
|
||
ctrl.getDataType = function() {
|
||
this.dimension = $('#time-selector').val();
|
||
this.initDate();
|
||
ctrl.getData();
|
||
}
|
||
|
||
ctrl.backCallback = function() {
|
||
//关闭首页正在加载的提示框
|
||
api.execScript({
|
||
name: 'index',
|
||
frameName: 'featureFrame',
|
||
script: "api.hideProgress();"
|
||
});
|
||
api.setScreenOrientation({
|
||
orientation: 'auto_portrait'
|
||
});
|
||
api.setFullScreen({
|
||
fullScreen: false
|
||
});
|
||
api.closeWin({});
|
||
}
|
||
|
||
ctrl.getData = function() {
|
||
if (!ctrl.number) {
|
||
$api.toast({
|
||
'msg': '请先选择回路'
|
||
});
|
||
return false;
|
||
}
|
||
api.showProgress({
|
||
'title': '加载中',
|
||
'text': '请稍等'
|
||
})
|
||
if (ctrl.mode == ctrl.modes.COMPARE) {
|
||
ctrl.getCompareData();
|
||
} else {
|
||
ctrl.getTimeData();
|
||
}
|
||
}
|
||
|
||
ctrl.getCompareData = function() {
|
||
var url = "/edp/rest/data/energy/contrast";
|
||
var data = {
|
||
prId: ctrl.prId,
|
||
ddNum: ctrl.number,
|
||
flag: ctrl.dimension,
|
||
startTime: ctrl.startLine,
|
||
endTime: ctrl.endLine,
|
||
}
|
||
$api.get(url, data, function(ret, err) {
|
||
api.hideProgress();
|
||
if (ret) {
|
||
if (ret.code == '200') {
|
||
var list = ret.body;
|
||
var when = [];
|
||
var lastYear = [];
|
||
var lastMonth = [];
|
||
var current = [];
|
||
var yesterday = [];
|
||
var An = [];
|
||
var Mon = [];
|
||
var an, mon;
|
||
if (!list) {
|
||
return;
|
||
}
|
||
var length = list.length;
|
||
|
||
for (var i = 0; i < length; i++) {
|
||
//去年同期
|
||
if (list[i].lastYearValue >= 0 && list[i].lastYearValue != null) {
|
||
list[i].lastYearValue = list[i].lastYearValue;
|
||
} else {
|
||
list[i].lastYearValue = NaN;
|
||
}
|
||
|
||
//上月同期
|
||
if (list[i].lastMonthValue >= 0 && list[i].lastMonthValue != null) {
|
||
list[i].lastMonthValue = list[i].lastMonthValue;
|
||
} else {
|
||
list[i].lastMonthValue = NaN;
|
||
}
|
||
|
||
//本期
|
||
if (list[i].currentValue >= 0 && list[i].currentValue != null) {
|
||
list[i].currentValue = list[i].currentValue;
|
||
} else {
|
||
list[i].currentValue = NaN;
|
||
}
|
||
|
||
//昨日同期
|
||
if (list[i].yesterdayValue >= 0 && list[i].yesterdayValue != null) {
|
||
list[i].yesterdayValue = list[i].yesterdayValue;
|
||
} else {
|
||
list[i].yesterdayValue = NaN;
|
||
}
|
||
|
||
if (list[i].lastMonthValue && list[i].currentValue) {
|
||
mon = ((list[i].currentValue - list[i].lastMonthValue) * 100 / list[i].lastMonthValue).toFixed(2);
|
||
} else {
|
||
mon = "-"
|
||
}
|
||
|
||
if (list[i].yesterdayValue && list[i].currentValue) {
|
||
an = ((list[i].currentValue - list[i].yesterdayValue) * 100 / list[i].yesterdayValue).toFixed(2);
|
||
} else {
|
||
an = "-"
|
||
}
|
||
|
||
An.push(an);
|
||
Mon.push(mon);
|
||
|
||
when.push(list[i].current);
|
||
lastYear.push(list[i].lastYearValue);
|
||
lastMonth.push(list[i].lastMonthValue);
|
||
current.push(list[i].currentValue);
|
||
yesterday.push(list[i].yesterdayValue);
|
||
}
|
||
|
||
ctrl.compareAChartData = {};
|
||
ctrl.compareAChartData.when = when;
|
||
ctrl.compareAChartData.lastYear = lastYear;
|
||
ctrl.compareAChartData.lastMonth = lastMonth;
|
||
ctrl.compareAChartData.current = current;
|
||
ctrl.compareAChartData.yesterday = yesterday;
|
||
|
||
ctrl.compareATableData = {};
|
||
ctrl.compareATableData.when = when;
|
||
ctrl.compareATableData.lastYear = lastYear;
|
||
ctrl.compareATableData.lastMonth = lastMonth;
|
||
ctrl.compareATableData.current = current;
|
||
ctrl.compareATableData.yesterday = yesterday;
|
||
ctrl.compareATableData.Mon = Mon;
|
||
ctrl.compareATableData.An = An;
|
||
|
||
if (ctrl.mode == ctrl.modes.COMPARE) {
|
||
ctrl.renderComparePanel();
|
||
}
|
||
|
||
} else {
|
||
|
||
$api.toast({
|
||
'msg': '获取数据错误'
|
||
});
|
||
|
||
}
|
||
} else {
|
||
$api.toast({
|
||
'msg': '网络故障'
|
||
});
|
||
}
|
||
}, false);
|
||
}
|
||
|
||
//获取分时分析数据
|
||
ctrl.getTimeData = function() {
|
||
if (!ctrl.number) {
|
||
$api.toast({
|
||
'msg': '请选择回路'
|
||
});
|
||
return false;
|
||
}
|
||
//记录接口调用成功的标识 当标识等于2是 才渲染页面
|
||
var requestSuccessFlag1 = 0;
|
||
var requestSuccessFlag2 = 0;
|
||
|
||
//获取分时分析的选择时间段内 各个时间的尖峰平谷的数据量
|
||
//统计选中时间段内的尖峰平谷的总和
|
||
var url = "/edp/rest/data/energy/proportion";
|
||
var data = {
|
||
prId: ctrl.prId,
|
||
ddNum: ctrl.number,
|
||
startTime: ctrl.startLine,
|
||
endTime: ctrl.endLine,
|
||
flag: ctrl.dimension
|
||
}
|
||
api.showProgress({
|
||
'title': '加载中',
|
||
'text': '请稍等'
|
||
})
|
||
$api.get(url, data, function(ret, err) {
|
||
api.hideProgress();
|
||
if (ret) {
|
||
if (ret.code == '200') {
|
||
var list = ret.body;
|
||
var length = list.length;
|
||
var JIAN = [];
|
||
var FENG = [];
|
||
var PING = [];
|
||
var GU = [];
|
||
var when = [];
|
||
|
||
var JIAN_total = 0;
|
||
var FENG_total = 0;
|
||
var PING_total = 0;
|
||
var GU_total = 0;
|
||
for (var i = 0; i < length; i++) {
|
||
|
||
(list[i].tip < 0 || !list[i].tip || isNaN(list[i].tip)) && (list[i].tip = 0);
|
||
(list[i].peak < 0 || !list[i].peak || isNaN(list[i].peak)) && (list[i].peak = 0);
|
||
(list[i].flat < 0 || !list[i].flat || isNaN(list[i].flat)) && (list[i].flat = 0);
|
||
(list[i].valley < 0 || !list[i].valley || isNaN(list[i].valley)) && (list[i].valley = 0);
|
||
(list[i].currentDate < 0 || !list[i].currentDate) && (list[i].currentDate = 0);
|
||
|
||
JIAN.push(list[i].tip);
|
||
FENG.push(list[i].peak);
|
||
PING.push(list[i].flat);
|
||
GU.push(list[i].valley);
|
||
when.push(list[i].currentDate);
|
||
|
||
JIAN_total += list[i].tip;
|
||
FENG_total += list[i].peak;
|
||
PING_total += list[i].flat;
|
||
GU_total += list[i].valley;
|
||
|
||
}
|
||
|
||
//分时用电量
|
||
ctrl.timeAChartData = {
|
||
JIAN: JIAN,
|
||
FENG: FENG,
|
||
PING: PING,
|
||
GU: GU,
|
||
when: when
|
||
}
|
||
|
||
//用电结构
|
||
ctrl.timeCChartData = {
|
||
JIAN_total: JIAN_total,
|
||
FENG_total: FENG_total,
|
||
PING_total: PING_total,
|
||
GU_total: GU_total
|
||
}
|
||
|
||
// requestSuccessFlag++;
|
||
requestSuccessFlag1 = 1;
|
||
if (ctrl.mode == ctrl.modes.TIME && requestSuccessFlag1 == 1 && requestSuccessFlag2 == 1) {
|
||
ctrl.renderTimePanel();
|
||
}
|
||
|
||
} else {
|
||
|
||
$api.toast({
|
||
'msg': '获取数据错误'
|
||
});
|
||
|
||
}
|
||
} else {
|
||
$api.toast({
|
||
'msg': '网络故障'
|
||
});
|
||
}
|
||
}, false);
|
||
//TimeAChart TimeCChart 结束
|
||
|
||
//获取本期 上月同期 去年同期的尖峰平谷的总和 在TimeBChart里显示
|
||
var url = "/edp/rest/data/energy/proportion/contrast";
|
||
var data = {
|
||
prId: ctrl.prId,
|
||
ddNum: ctrl.number,
|
||
startTime: ctrl.startLine,
|
||
endTime: ctrl.endLine,
|
||
flag: ctrl.dimension
|
||
}
|
||
|
||
$api.get(url, data, function(ret, err) {
|
||
if (ret) {
|
||
if (ret.code == '200') {
|
||
//list 如果是日数据
|
||
//第一个对象是本期数据 第二个对象是上月数据 第三个对象是去年数据
|
||
//如果是月数据
|
||
//第一个对象是本期数据 第二个对象是去年数据
|
||
var list = ret.body;
|
||
var current = [];
|
||
var lastMonth = [];
|
||
var lastYear = [];
|
||
if (list.current) {
|
||
current = [
|
||
(list.current.tip < 0 || !list.current.tip || isNaN(list.current.tip)) ? 0 : list.current.tip,
|
||
(list.current.peak < 0 || !list.current.peak || isNaN(list.current.peak)) ? 0 : list.current.peak,
|
||
(list.current.flat < 0 || !list.current.flat || isNaN(list.current.flat)) ? 0 : list.current.flat,
|
||
(list.current.valley < 0 || !list.current.valley || isNaN(list.current.valley)) ? 0 : list.current.valley
|
||
];
|
||
}
|
||
if (list.lastMonth) {
|
||
lastMonth = [
|
||
(list.lastMonth.tip < 0 || !list.lastMonth.tip || isNaN(list.lastMonth.tip)) ? 0 : list.lastMonth.tip,
|
||
(list.lastMonth.peak < 0 || !list.lastMonth.peak || isNaN(list.lastMonth.peak)) ? 0 : list.lastMonth.peak,
|
||
(list.lastMonth.flat < 0 || !list.lastMonth.flat || isNaN(list.lastMonth.flat)) ? 0 : list.lastMonth.flat,
|
||
(list.lastMonth.valley < 0 || !list.lastMonth.valley || isNaN(list.lastMonth.valley)) ? 0 : list.lastMonth.valley
|
||
];
|
||
}
|
||
if (list.lastYear) {
|
||
lastYear = [
|
||
(list.lastYear.tip < 0 || !list.lastYear.tip || isNaN(list.lastYear.tip)) ? 0 : list.lastYear.tip,
|
||
(list.lastYear.peak < 0 || !list.lastYear.peak || isNaN(list.lastYear.peak)) ? 0 : list.lastYear.peak,
|
||
(list.lastYear.flat < 0 || !list.lastYear.flat || isNaN(list.lastYear.flat)) ? 0 : list.lastYear.flat,
|
||
(list.lastYear.valley < 0 || !list.lastYear.valley || isNaN(list.lastYear.valley)) ? 0 : list.lastYear.valley
|
||
];
|
||
}
|
||
|
||
ctrl.timeBChartData = {
|
||
current: current.length ? current : [0, 0, 0, 0],
|
||
lastMonth: lastMonth.length ? lastMonth : [0, 0, 0, 0],
|
||
lastYear: lastYear.length ? lastYear : [0, 0, 0, 0]
|
||
}
|
||
requestSuccessFlag2 = 1;
|
||
if (ctrl.mode == ctrl.modes.TIME && requestSuccessFlag1 == 1 && requestSuccessFlag2 == 1) {
|
||
ctrl.renderTimePanel();
|
||
}
|
||
|
||
} else {
|
||
|
||
$api.toast({
|
||
'msg': '获取数据错误'
|
||
});
|
||
|
||
}
|
||
} else {
|
||
$api.toast({
|
||
'msg': '网络故障'
|
||
});
|
||
}
|
||
}, false);
|
||
|
||
}
|
||
|
||
//渲染对比分析panel
|
||
ctrl.renderComparePanel = function() {
|
||
//判断数据是否为空
|
||
//如果为空 隐藏掉图表
|
||
//显示空数据提示
|
||
if (ctrl.compareAChartData.when.length == 0) {
|
||
$api.css($api.dom("#compare-AChart"), "display:none");
|
||
$api.css($api.dom("#compare-ATable-con"), "display:none");
|
||
$api.css($api.dom("#compare-panel-empty-tips"), "display:block");
|
||
return false;
|
||
} else {
|
||
$api.css($api.dom("#compare-AChart"), "display:block");
|
||
$api.css($api.dom("#compare-ATable-con"), "display:table");
|
||
$api.css($api.dom("#compare-panel-empty-tips"), "display:none");
|
||
}
|
||
|
||
ctrl.renderCompareAChart();
|
||
ctrl.renderCompareATable();
|
||
}
|
||
|
||
//渲染分时分析panel
|
||
ctrl.renderTimePanel = function() {
|
||
ctrl.renderTimeAChart();
|
||
ctrl.renderTimeBChart();
|
||
ctrl.renderTimeCChart();
|
||
}
|
||
|
||
ctrl.renderCompareAChart = function() {
|
||
ctrl.compareAChart = echarts.init($api.dom('#compare-AChart'));
|
||
|
||
var legendData = [];
|
||
var series = [];
|
||
|
||
//时数据
|
||
if (ctrl.dimension == ctrl.dimensions.HOUR) {
|
||
legendData = [{
|
||
name: "本期",
|
||
icon: 'circle'
|
||
},
|
||
|
||
{
|
||
name: "昨日同期",
|
||
icon: 'circle'
|
||
}, {
|
||
name: "上月同期",
|
||
icon: 'circle'
|
||
}
|
||
];
|
||
series.push({
|
||
name: '本期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.current,
|
||
}, {
|
||
name: '昨日同期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.yesterday,
|
||
}, {
|
||
name: '上月同期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.lastMonth,
|
||
})
|
||
|
||
}
|
||
//日数据
|
||
if (ctrl.dimension == ctrl.dimensions.DAY) {
|
||
legendData = [{
|
||
name: "本期",
|
||
icon: 'circle'
|
||
},
|
||
|
||
{
|
||
name: "上月同期",
|
||
icon: 'circle'
|
||
}, {
|
||
name: "去年同期",
|
||
icon: 'circle'
|
||
}
|
||
];
|
||
series.push({
|
||
name: '本期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.current,
|
||
}, {
|
||
name: '上月同期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.lastMonth,
|
||
}, {
|
||
name: '去年同期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.lastYear,
|
||
})
|
||
|
||
}
|
||
|
||
|
||
//月数据
|
||
if (ctrl.dimension == ctrl.dimensions.MONTH) {
|
||
legendData = [{
|
||
name: "本期",
|
||
icon: 'circle'
|
||
},
|
||
|
||
{
|
||
name: "去年同期",
|
||
icon: 'circle'
|
||
}
|
||
];
|
||
series.push({
|
||
name: '本期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.current,
|
||
}, {
|
||
name: '去年同期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.lastYear,
|
||
})
|
||
|
||
}
|
||
|
||
//年数据
|
||
if (ctrl.dimension == ctrl.dimensions.YEAR) {
|
||
legendData = [{
|
||
name: "本期",
|
||
icon: 'circle'
|
||
},
|
||
|
||
];
|
||
series.push({
|
||
name: '本期',
|
||
type: 'bar',
|
||
data: ctrl.compareAChartData.current,
|
||
})
|
||
|
||
}
|
||
|
||
ctrl.compareAChartOption = {
|
||
title: {
|
||
show: true,
|
||
text: ctrl.name + '(' + ctrl.number + ")用电量(kWh)",
|
||
left: "center",
|
||
top: "3%",
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
position: function(pos, params, el, elRect, size) {
|
||
var obj = {
|
||
top: 10
|
||
};
|
||
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
|
||
return obj;
|
||
}
|
||
},
|
||
legend: {
|
||
show: true,
|
||
itemWidth: 14,
|
||
data: legendData,
|
||
bottom: "3%"
|
||
},
|
||
color: ["#dfdfdf", "#ffd35e", "#00ccff"],
|
||
grid: {
|
||
top: '15%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ctrl.compareAChartData.when,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#03b679",
|
||
width: 2
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#03b679",
|
||
width: 2
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}],
|
||
barGap: '-40%',
|
||
barCategoryGap: '10%',
|
||
barMaxWidth: '35',
|
||
series: series
|
||
}
|
||
ctrl.compareAChart.setOption(ctrl.compareAChartOption);
|
||
}
|
||
|
||
ctrl.renderCompareATable = function() {
|
||
|
||
var tbody = '';
|
||
var data = ctrl.compareATableData;
|
||
var length = data.when.length;
|
||
tbody += '<tr><td>日期</td><td>本期电量(kWh)</td>';
|
||
//时数据
|
||
if (ctrl.dimension == ctrl.dimensions.HOUR) {
|
||
tbody += '<td>昨日同期电量(kWh)</td><td>上月同期电量(kWh)</td><td>环比(%)</td></tr>'
|
||
}
|
||
//日数据
|
||
if (ctrl.dimension == ctrl.dimensions.DAY) {
|
||
tbody += '<td>上月同期电量(kWh)</td><td>去年同期电量(kWh)</td><td>环比(%)</td><td>同比(%)</td></tr>'
|
||
}
|
||
//月数据
|
||
if (ctrl.dimension == ctrl.dimensions.MONTH) {
|
||
tbody += '<td>去年同期电量(kWh)</td><td>同比(%)</td></tr>'
|
||
}
|
||
//年数据
|
||
if (ctrl.dimension == ctrl.dimensions.YEAR) {
|
||
tbody += '</tr>';
|
||
}
|
||
|
||
for (var i = 0; i < length; i++) {
|
||
|
||
tbody += '<tr>';
|
||
tbody += '<td>' + data.when[i] + '</td>';
|
||
tbody += '<td>' + (isNaN(data.current[i]) ? "-" : data.current[i]) + '</td>';
|
||
if (ctrl.dimension == ctrl.dimensions.HOUR) {
|
||
tbody += '<td>' + (isNaN(data.yesterday[i]) ? "-" : data.yesterday[i]) + '</td>';
|
||
tbody += '<td>' + (isNaN(data.lastMonth[i]) ? "-" : data.lastMonth[i]) + '</td>';
|
||
tbody += '<td>' + (isNaN(data.Mon[i]) ? "-" : data.Mon[i]) + '</td>';
|
||
}
|
||
if (ctrl.dimension == ctrl.dimensions.DAY) {
|
||
tbody += '<td>' + (isNaN(data.lastMonth[i]) ? "-" : data.lastMonth[i]) + '</td>';
|
||
tbody += '<td>' + (isNaN(data.lastYear[i]) ? "-" : data.lastYear[i]) + '</td>';
|
||
tbody += '<td>' + (isNaN(data.Mon[i]) ? "-" : data.Mon[i]) + '</td>';
|
||
tbody += '<td>' + (isNaN(data.An[i]) ? "-" : data.An[i]) + '</td>';
|
||
}
|
||
if (ctrl.dimension == ctrl.dimensions.MONTH) {
|
||
tbody += '<td>' + (isNaN(data.lastYear[i]) ? "-" : data.lastYear[i]) + '</td>';
|
||
tbody += '<td>' + (isNaN(data.An[i]) ? "-" : data.An[i]) + '</td>';
|
||
}
|
||
if (ctrl.dimension == ctrl.dimensions.YEAR) {
|
||
|
||
}
|
||
tbody += '</tr>';
|
||
|
||
}
|
||
|
||
$api.html($api.dom("#compareATable"), tbody);
|
||
}
|
||
|
||
//渲染TimeAChart
|
||
ctrl.renderTimeAChart = function() {
|
||
|
||
if (!ctrl.timeAChart) {
|
||
|
||
ctrl.timeAChart = echarts.init($api.dom('#time-AChart'));
|
||
|
||
}
|
||
|
||
ctrl.timeAChartOption = {
|
||
title: {
|
||
show: true,
|
||
text: ctrl.name + '(' + ctrl.number + ")用电量(kWh)",
|
||
left: "center",
|
||
top: "3%",
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
position: function(pos, params, el, elRect, size) {
|
||
var obj = {
|
||
top: 10
|
||
};
|
||
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
|
||
return obj;
|
||
}
|
||
},
|
||
|
||
legend: {
|
||
show: true,
|
||
itemWidth: 14,
|
||
data: [{
|
||
'name': '尖电量',
|
||
icon: 'circle'
|
||
}, {
|
||
'name': '峰电量',
|
||
icon: 'circle'
|
||
}, {
|
||
'name': '平电量',
|
||
icon: 'circle'
|
||
}, {
|
||
'name': '谷电量',
|
||
icon: 'circle'
|
||
}],
|
||
bottom: "3%"
|
||
},
|
||
color: ["#f44336", "#ffc107", "#2196f3", "#4caf50"],
|
||
grid: {
|
||
top: '15%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ctrl.timeAChartData.when,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#03b679",
|
||
width: 2
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#03b679",
|
||
width: 2
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}],
|
||
barGap: '-40%',
|
||
barCategoryGap: '10%',
|
||
barMaxWidth: '35',
|
||
series: [{
|
||
name: '尖电量',
|
||
type: 'bar',
|
||
data: ctrl.timeAChartData.JIAN
|
||
}, {
|
||
name: '峰电量',
|
||
type: 'bar',
|
||
data: ctrl.timeAChartData.FENG
|
||
}, {
|
||
name: '平电量',
|
||
type: 'bar',
|
||
data: ctrl.timeAChartData.PING
|
||
}, {
|
||
name: '谷电量',
|
||
type: 'bar',
|
||
data: ctrl.timeAChartData.GU
|
||
}, ]
|
||
}
|
||
|
||
ctrl.timeAChart.setOption(ctrl.timeAChartOption);
|
||
}
|
||
|
||
//渲染TimeBChart
|
||
ctrl.renderTimeBChart = function() {
|
||
ctrl.timeBChart = echarts.init($api.dom('#time-BChart'));
|
||
//如果是日数据显示上月同期
|
||
var legendData = [];
|
||
var series = [];
|
||
var colors = [];
|
||
if (ctrl.dimension == ctrl.dimensions.DAY) {
|
||
legendData = ['去年同期', '上月同期', '本期'];
|
||
colors = ["#dfdfdf", "#ffd35e", "#00ccff"];
|
||
series.push({
|
||
name: '去年同期',
|
||
type: 'bar',
|
||
data: ctrl.timeBChartData.lastYear
|
||
}, {
|
||
name: '上月同期',
|
||
type: 'bar',
|
||
data: ctrl.timeBChartData.lastMonth
|
||
}, {
|
||
name: '本期',
|
||
type: 'bar',
|
||
data: ctrl.timeBChartData.current
|
||
})
|
||
}
|
||
if (ctrl.dimension == ctrl.dimensions.YEAR) {
|
||
legendData = ['本期'];
|
||
colors = ["#00ccff"]
|
||
series.push({
|
||
name: '本期',
|
||
type: 'bar',
|
||
data: ctrl.timeBChartData.current
|
||
})
|
||
}
|
||
|
||
if (ctrl.dimension == ctrl.dimensions.MONTH) {
|
||
legendData = ['去年同期', '本期'];
|
||
colors = ["#dfdfdf", "#00ccff"]
|
||
series.push({
|
||
name: '去年同期',
|
||
type: 'bar',
|
||
data: ctrl.timeBChartData.lastYear
|
||
}, {
|
||
name: '本期',
|
||
type: 'bar',
|
||
data: ctrl.timeBChartData.current
|
||
})
|
||
}
|
||
|
||
ctrl.timeBChartOption = {
|
||
title: {
|
||
show: true,
|
||
text: ctrl.name + "对比分析(kWh)",
|
||
top: "3%",
|
||
left: "3%",
|
||
textStyle: {
|
||
fontSize: 14,
|
||
fontWeight: 'normal'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
show: true,
|
||
position: function(pos, params, el, elRect, size) {
|
||
var obj = {
|
||
top: 10
|
||
};
|
||
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
|
||
return obj;
|
||
}
|
||
},
|
||
legend: {
|
||
show: true,
|
||
data: legendData,
|
||
bottom: "5%"
|
||
},
|
||
color: ["#dfdfdf", "#ffd35e", "#00ccff"],
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
top: "15%",
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['尖占比', '峰占比', '平占比', '谷占比'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#03b679",
|
||
width: 2
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#03b679",
|
||
width: 2
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}],
|
||
barGap: '-35%',
|
||
barCategoryGap: '10%',
|
||
barMaxWidth: '35',
|
||
series: series
|
||
};
|
||
ctrl.timeBChart.setOption(ctrl.timeBChartOption);
|
||
}
|
||
|
||
//渲染TimeCChart
|
||
ctrl.renderTimeCChart = function() {
|
||
if (!ctrl.timeCChart) {
|
||
ctrl.timeCChart = echarts.init($api.dom('#time-CChart'));
|
||
}
|
||
ctrl.timeCChartOption = {
|
||
title: {
|
||
show: true,
|
||
text: ctrl.name + "用电结构",
|
||
top: "3%",
|
||
left: "3%",
|
||
textStyle: {
|
||
fontSize: 14,
|
||
fontWeight: 'normal'
|
||
}
|
||
},
|
||
color: ["#f44336", "#ffc107", "#2196f3", "#4caf50"],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
data: [{
|
||
'name': '尖电量',
|
||
icon: 'circle'
|
||
}, {
|
||
'name': '峰电量',
|
||
icon: 'circle'
|
||
}, {
|
||
'name': '平电量',
|
||
icon: 'circle'
|
||
}, {
|
||
'name': '谷电量',
|
||
icon: 'circle'
|
||
}],
|
||
bottom: "3%",
|
||
right: "3%"
|
||
},
|
||
series: [{
|
||
name: '用电结构',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['45%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: '10',
|
||
fontWeight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
|
||
data: [{
|
||
value: ctrl.timeCChartData.JIAN_total,
|
||
name: '尖电量'
|
||
}, {
|
||
value: ctrl.timeCChartData.FENG_total,
|
||
name: '峰电量'
|
||
}, {
|
||
value: ctrl.timeCChartData.PING_total,
|
||
name: '平电量'
|
||
}, {
|
||
value: ctrl.timeCChartData.GU_total,
|
||
name: '谷电量'
|
||
}, ]
|
||
}]
|
||
};
|
||
ctrl.timeCChart.setOption(ctrl.timeCChartOption);
|
||
}
|
||
|
||
ctrl.init();
|
||
|
||
}
|