633 lines
16 KiB
JavaScript
633 lines
16 KiB
JavaScript
(function () {
|
||
var prId;
|
||
var startTime;
|
||
var endTime;
|
||
var typeIds = [];
|
||
var typeNames = [];
|
||
var ddNumber;
|
||
var interval;
|
||
var intervalDesc;
|
||
var locName;
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
// 将筛选页面传递的选中的‘选择查看类型曲线’的数据保存在 typeChartName 中
|
||
var typeChartName;
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
|
||
/**
|
||
* 根据id清空所有子元素
|
||
*/
|
||
function clearAllChildren(id) {
|
||
var tobeRemoved = $("#" + id);
|
||
tobeRemoved.empty();
|
||
}
|
||
|
||
/**
|
||
* 显示右侧边栏
|
||
*/
|
||
function showRightPanel() {
|
||
api.openDrawerPane({
|
||
type: 'right'
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 弹出提示框
|
||
*/
|
||
function toast(msg) {
|
||
api.toast({
|
||
msg: msg,
|
||
duration: 5000,
|
||
locaiton: 'top'
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 格式化moment对象
|
||
*/
|
||
function momentFormat(date, format) {
|
||
if (format) {
|
||
return date.format(format);
|
||
}
|
||
return date.format("YYYY-MM-DD");
|
||
}
|
||
|
||
/**
|
||
* 设置默认起止时间
|
||
* 默认开始时间为前两天零时
|
||
* 默认结束时间为前一天23:59:59
|
||
*/
|
||
function resetDefaultDateTime() {
|
||
startTime = moment().subtract(2, 'days').startOf('day');
|
||
endTime = moment().subtract(1, 'days').endOf('day');
|
||
}
|
||
|
||
/**
|
||
* 更新界面上的起止时间
|
||
*/
|
||
function updateDateTimeView() {
|
||
$("#lbStartTime").html(momentFormat(startTime));
|
||
$("#lbEndTime").html(momentFormat(endTime));
|
||
}
|
||
|
||
/**
|
||
* 界面显示完成，通知侧栏开始加载数据
|
||
*/
|
||
function viewAppear(ret, err) {
|
||
api.sendEvent({ name: "historyLoadData" });
|
||
}
|
||
|
||
/**
|
||
* 向表格中插入一行时间
|
||
*/
|
||
function addTime(time) {
|
||
time = time.slice(5);
|
||
|
||
var template = '<tr><td>{time}</td></tr>';
|
||
template = template.replace("{time}", time);
|
||
|
||
$("#timeColumn").append(template);
|
||
}
|
||
|
||
/**
|
||
* 向表格插入一类表头
|
||
*/
|
||
function addHeaderItem(headerItem) {
|
||
var templateHead = '<td colspan="{col}">{name}</td>';
|
||
templateHead = templateHead.replace("{col}", headerItem.vars.length);
|
||
templateHead = templateHead.replace("{name}", headerItem.categotyName);
|
||
|
||
$("#table-header-list").append(templateHead);
|
||
|
||
var templateTitle = '<td>{title}</td>';
|
||
var titleList = $("#table-title-list");
|
||
for (var i = 0; i < headerItem.vars.length; i++) {
|
||
var item = headerItem.vars[i];
|
||
var title = item.tagKey + (item.unit ? '(' + item.unit + ')' : '' );
|
||
titleList.append(templateTitle.replace("{title}", title ));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 检查日期是否合法
|
||
*/
|
||
function checkDate() {
|
||
//起止日期不能是未来时间
|
||
var endOfToday = moment().endOf("day");
|
||
var tmpEndTime = endTime.clone().startOf("day");
|
||
if (endOfToday.isBefore(tmpEndTime) || endOfToday.isBefore(startTime)) {
|
||
toast("起止日期不能是未来时间");
|
||
return false;
|
||
}
|
||
//结束日期不能比起始日期早
|
||
if (!endTime.isAfter(startTime)) {
|
||
toast("结束日期不能比起始日期早");
|
||
return false;
|
||
}
|
||
//天 366天 小时 30分 7天 15分钟5分钟30秒1天
|
||
//按天查询，最多查询366天
|
||
if (interval >= 86400) {
|
||
//按天查询时，时间跨度不能超过一年
|
||
if (endTime.diff(startTime, 'days') > 366) {
|
||
toast("按天查询时，时间跨度不能超过一年");
|
||
return false;
|
||
}
|
||
} else if (interval >= 1800) {
|
||
//按小时及30分钟查询查询，时间跨度不能超过7天
|
||
if (endTime.diff(startTime, 'days') > 7) {
|
||
toast("按小时及30分钟查询时，时间跨度不能超过7天");
|
||
return false;
|
||
}
|
||
} else {
|
||
//按分钟及秒查询时，时间跨度不能超过1天
|
||
if (endTime.diff(startTime, 'seconds') > 86400) {
|
||
toast("按分钟及秒查询时，时间跨度不能超过1天");
|
||
return false;
|
||
}
|
||
}
|
||
|
||
return true;
|
||
}
|
||
|
||
/**
|
||
* 检查类型选择是否正确
|
||
* 类型至少选择一项
|
||
*/
|
||
function checkType() {
|
||
if (typeIds && typeIds.length > 0) {
|
||
return true;
|
||
}
|
||
toast("筛选类型必须至少选择一项");
|
||
return false;
|
||
}
|
||
|
||
/**
|
||
* 请求历史数据
|
||
*/
|
||
function queryData() {
|
||
//检查日期是否合法
|
||
if (!checkDate()) {
|
||
return;
|
||
}
|
||
//检查类型选择是否正确
|
||
if (!checkType()) {
|
||
return;
|
||
}
|
||
|
||
//显示载入动画
|
||
api.showProgress({
|
||
title: '载入中...',
|
||
text: '请稍后',
|
||
modal: false
|
||
});
|
||
|
||
//当结束时间在未来时，将结束时间替换为当前时间
|
||
var endTimeValue = endTime.valueOf();
|
||
var nowTimeValue = moment().valueOf();
|
||
|
||
var url = '/edp/rest/data/ai/history';
|
||
var args = {
|
||
prId: prId,
|
||
categoryKeys: typeIds,
|
||
ddNum: ddNumber,
|
||
startTime: startTime.valueOf(),
|
||
endTime: endTimeValue > nowTimeValue ? nowTimeValue : endTimeValue,
|
||
interval: interval,
|
||
flag: 1 // 1.查询历史
|
||
};
|
||
|
||
$api.get(url, args, function (data, err) {
|
||
//隐藏载入动画
|
||
api.hideProgress();
|
||
if (err) {
|
||
toast("网络请求失败");
|
||
} else {
|
||
if (!data.code || data.code != "200") {
|
||
toast("服务器响应错误" + (data.code ? ("，错误码：" + data.code) : ""));
|
||
} else {
|
||
if (data.body && data.body.timeList && data.body.categories) {
|
||
data = data.body;
|
||
|
||
// Add start 2018/8/23 14:01 kangzhi
|
||
// 初始化 echarts 表
|
||
initechart(data);
|
||
// Add end 2018/8/23 14:01 kangzhi
|
||
|
||
//清空界面上的时间列表
|
||
clearAllChildren("timeColumn");
|
||
for (var i = 0; i < data.timeList.length; i++) {
|
||
var time = moment(data.timeList[i]).format('YYYY-MM-DD hh:mm:ss');
|
||
addTime(time);
|
||
}
|
||
//清空表头
|
||
clearAllChildren("table-header-list");
|
||
clearAllChildren("table-title-list");
|
||
|
||
$("#header-table").width(0);
|
||
|
||
for (var i = 0; i < data.categories.length; i++) {
|
||
var head = data.categories[i];
|
||
addHeaderItem(head);
|
||
}
|
||
//清空表格中的值
|
||
clearAllChildren("tbHistroyValue");
|
||
var historyValueTable = $("#tbHistroyValue");
|
||
historyValueTable.width(0);
|
||
var rowCount = data.timeList.length;
|
||
for (var i = 0; i < rowCount; i++) {
|
||
//生成第一行的数据
|
||
var row = '<tr>';
|
||
for (var j = 0; j < data.categories.length; j++) {
|
||
var type = data.categories[j];
|
||
for (var k = 0; k < type.vars.length; k++) {
|
||
var values = type.vars[k].values;
|
||
values[i] = parseFloat(values[i]);
|
||
if(isNaN(values[i])){
|
||
values[i] = '-'
|
||
}else{
|
||
values[i] = parseFloat(values[i]).toFixed(2)
|
||
}
|
||
row += "<td>";
|
||
row += values[i];
|
||
row += "</td>";
|
||
}
|
||
}
|
||
row += "</tr>";
|
||
historyValueTable.append(row);
|
||
}
|
||
setTimeout(function () {
|
||
//计算列宽
|
||
var tableTitleTds = $('#table-title-list>td');
|
||
var tableValuesTds = $('#tbHistroyValue>tr').eq(0).find('td');
|
||
var columnCounts = tableTitleTds.length;
|
||
var widthSum = 0;
|
||
for (var i = 0; i < columnCounts; i++) {
|
||
var title = $(tableTitleTds[i]);
|
||
var value = $(tableValuesTds[i]);
|
||
var titleWidth = title.width();
|
||
var valueWidth = value.width();
|
||
var width = titleWidth > valueWidth ? titleWidth : valueWidth;
|
||
|
||
width += 10;
|
||
widthSum += width;
|
||
title.width(width);
|
||
value.width(width);
|
||
}
|
||
$("#header-table").width(widthSum);
|
||
$("#tbHistroyValue").width(widthSum);
|
||
}, 100);
|
||
|
||
$('#empty-tips').hide();
|
||
$('#table-panel').show();
|
||
$('#echarts-container').show();
|
||
}else {
|
||
$('#table-panel').hide();
|
||
$('#echarts-container').hide();
|
||
$('#empty-tips').show();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 筛选条件发生变化
|
||
*/
|
||
function filterSelectionChanged(ret, err) {
|
||
var result = ret.value;
|
||
|
||
typeIds = result.typeIds;
|
||
interval = result.interval;
|
||
intervalDesc = result.intervalDesc;
|
||
ddNumber = result.ddNumber;
|
||
locName = result.locName;
|
||
typeNames = result.typeNames;
|
||
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
// 存储‘选择查看类型曲线’的数据
|
||
typeChartName = result.typeChartName;
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
|
||
$("#btn-location").attr("value", locName);
|
||
$("#btn-ddnumber").attr("value", (ddNumber ? ddNumber : "-"));
|
||
$("#btn-time").attr("value", intervalDesc);
|
||
//开始请求历史数据
|
||
queryData();
|
||
}
|
||
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
/**
|
||
* 初始化 echarts 表
|
||
*/
|
||
function initechart(data) {
|
||
var chart = echarts.init($('#echarts-container')[0]);
|
||
var option = {
|
||
title: {
|
||
text: '',
|
||
textStyle: {
|
||
color: '#000',
|
||
fontSize: 20,
|
||
fontWeight: '100'
|
||
},
|
||
top: '0%',
|
||
left: 'center',
|
||
bottom: '30%'
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'line',
|
||
axis: 'auto',
|
||
snap: true
|
||
}
|
||
},
|
||
legend: {
|
||
data:[],
|
||
left: 'center',
|
||
top: '10%'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: []
|
||
},
|
||
yAxis: {
|
||
name: '',
|
||
type: 'value',
|
||
min: 'dataMin',
|
||
nameTextStyle: {
|
||
color: '#5a5a5a',
|
||
fontSize: 18
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
bottom: '0%',
|
||
height: '50%',
|
||
top: '32%',
|
||
// Add start 2018/9/29 16:31 kangzhi
|
||
containLabel: true
|
||
// Add end 2018/9/29 16:31 kangzhi
|
||
},
|
||
series: [{
|
||
data: [],
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
color: 'red'
|
||
},
|
||
lineStyle: {
|
||
color: 'red'
|
||
}
|
||
}]
|
||
};
|
||
|
||
// 先筛选出'查看类型曲线'中选中的项
|
||
var aimCategory = data.categories.filter(function (item) {
|
||
return item.categotyName === typeChartName;
|
||
});
|
||
|
||
// 修改echarts的 option中的legend选项
|
||
for (var i = 0; i < aimCategory[0].vars.length; i++) {
|
||
var legendDataStr = aimCategory[0].vars[i].tagKey;
|
||
option.legend.data.push(legendDataStr);
|
||
}
|
||
|
||
// 修改 echarts 的 option 中 title.fontSize 和 yAxis.nameTextStyle.fontSize
|
||
var fontSize = parseInt($('html').css('font-size'));
|
||
|
||
option.title.textStyle.fontSize = Math.floor(fontSize * 16 / 12);
|
||
option.yAxis.nameTextStyle.fontSize = Math.floor(fontSize * 12 / 12);
|
||
|
||
// 修改echarts的 option中的xAxis选项
|
||
var myTimeList = [];
|
||
// 格式化日期
|
||
for (var j = 0; j < data.timeList.length; j++) {
|
||
var date = new Date(data.timeList[j]);
|
||
var timeStr = '';
|
||
var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
|
||
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
|
||
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
|
||
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
|
||
timeStr = month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||
myTimeList.push(timeStr);
|
||
}
|
||
|
||
option.xAxis.data = myTimeList;
|
||
|
||
// 修改echarts的 option中的yAxis选项
|
||
if (aimCategory[0].vars[0].unit) {
|
||
option.yAxis.name = '单位：' + aimCategory[0].vars[0].unit;
|
||
} else {
|
||
option.yAxis.name = '单位：无';
|
||
}
|
||
|
||
// 修改 echarts 的 options 中的 title 选项
|
||
option.title.text = typeChartName;
|
||
|
||
// 修改echarts的 option中的series选项
|
||
var seriesData = [];
|
||
|
||
// 将折现显示的颜色存储到一个数组中
|
||
var colorArr = ['#ff1918', '#fab409', '#07f5fa'];
|
||
|
||
// 循环生成series选项
|
||
for (var k = 0; k < aimCategory[0].vars.length; k++){
|
||
// 首先初始化一个series中元素的对象
|
||
var seriesNum = {
|
||
itemStyle: {
|
||
normal: {
|
||
color: '',
|
||
lineStyle: {
|
||
color: ''
|
||
}
|
||
}
|
||
},
|
||
};
|
||
|
||
// 纵坐标数据值如果是NaN，将此处的数据显示成0
|
||
var arr = aimCategory[0].vars[k].values.map(function (value) {
|
||
if (value === 'NaN') {
|
||
return 0;
|
||
} else {
|
||
return value;
|
||
}
|
||
});
|
||
seriesNum.data = arr;
|
||
seriesNum.type = 'line';
|
||
seriesNum.itemStyle.normal.color = colorArr[k];
|
||
seriesNum.itemStyle.normal.lineStyle.color = colorArr[k];
|
||
seriesNum.smooth = true;
|
||
seriesNum.name = aimCategory[0].vars[k].tagKey;
|
||
seriesData.push(seriesNum);
|
||
}
|
||
|
||
option.series = seriesData;
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示echarts图表
|
||
chart.setOption(option);
|
||
|
||
}
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
|
||
/**
|
||
* 侧边栏通过主界面toast提示的事件
|
||
* @param {*} ret
|
||
* @param {*} err
|
||
*/
|
||
function historyDtRemoteToast(ret, err) {
|
||
var result = ret.value;
|
||
toast(result.msg);
|
||
$('#table-panel').hide();
|
||
$('#echarts-container').hide();
|
||
$('#empty-tips').show();
|
||
}
|
||
|
||
apiready = function () {
|
||
var ctrl = {
|
||
init: {},
|
||
bind: {}
|
||
}
|
||
// 适配安卓状态栏
|
||
CommonModel.fitInStatusBar();
|
||
var searcherTop = $('#heightHeader').height();
|
||
$('#searcher').css('top',searcherTop);
|
||
ctrl.init = function () {
|
||
prId = $api.getStorage('powerRoom').prId;
|
||
ctrl.bind();
|
||
//设置默认开始时间和结束时间
|
||
resetDefaultDateTime();
|
||
updateDateTimeView();
|
||
//初始化与边栏的通信事件机制
|
||
//筛选条件发生变化
|
||
api.addEventListener({ name: 'filterSelectionChanged' }, filterSelectionChanged);
|
||
api.addEventListener({ name: 'viewappear' }, viewAppear);
|
||
api.addEventListener({ name: 'historyDtRemoteToast' }, historyDtRemoteToast);
|
||
|
||
//初始化表格容器的高度
|
||
var winHeight = api.winHeight;
|
||
var winWidth = api.winWidth;
|
||
var headerHeight = $("#header").height();
|
||
var searcherHeight = $("#searcher").height();
|
||
var tableHeight = winHeight - (headerHeight + searcherHeight);
|
||
|
||
$("#table-panel").height(tableHeight);
|
||
$("#table-panel").css("top", (headerHeight + searcherHeight) + "px");
|
||
|
||
//计算table-head-right的宽度和位置
|
||
var tableHeadLeftWidth = $("#table-head-left").width() - 1;//由于四舍五入 可能多出1像素 -1 保证没有缝隙
|
||
$("#table-head-right").width(winWidth - tableHeadLeftWidth);
|
||
$("#table-head-right").css("left", tableHeadLeftWidth + "px");
|
||
|
||
|
||
|
||
//算出table-body的高度和位置
|
||
var tableHeadHeight = $("#table-head").height();
|
||
var tableBodyHeight = tableHeight - tableHeadHeight;
|
||
|
||
$("#table-body").height(tableBodyHeight);
|
||
$("#table-body").css("top", (tableHeadHeight + 3) + "px"); //3像素的border
|
||
$("#table-body-left").height(tableBodyHeight);
|
||
$("#table-body-right").css("left", tableHeadLeftWidth + "px");
|
||
$("#table-body-right").height(tableBodyHeight);
|
||
$("#table-body-right").width(winWidth - tableHeadLeftWidth);
|
||
|
||
}
|
||
|
||
ctrl.bind = function () {
|
||
//用户点击了返回按钮
|
||
$(".back").on("touchend", function () {
|
||
api.closeWin();
|
||
});
|
||
|
||
//用户点击了位置按钮
|
||
$("#btn-location").on("touchend", function () {
|
||
showRightPanel();
|
||
});
|
||
|
||
//用户点击了调度号按钮
|
||
$("#btn-ddnumber").on("touchend", function () {
|
||
showRightPanel();
|
||
});
|
||
|
||
//用户点击了时间间隔按钮
|
||
$("#btn-time").on("touchend", function () {
|
||
showRightPanel();
|
||
});
|
||
|
||
//用户点击了筛选按钮
|
||
$("#btn-filter").on("touchend", function () {
|
||
showRightPanel();
|
||
});
|
||
|
||
//用户点击了查询按钮
|
||
$("#btn-quary").on("touchend", function () {
|
||
queryData();
|
||
});
|
||
|
||
//用户点击了开始时间
|
||
$("#divStartTime").on("touchend", function () {
|
||
api.openPicker({
|
||
type: 'date',
|
||
date: momentFormat(startTime),
|
||
title: '选择时间'
|
||
}, function (ret, err) {
|
||
if (ret) {
|
||
startTime.date(ret.day);
|
||
startTime.month(ret.month - 1);
|
||
startTime.year(ret.year);
|
||
startTime = startTime.startOf('day');
|
||
// alert(momentFormat(startTime, "YYYY-MM-DD HH:mm:ss"));
|
||
updateDateTimeView()
|
||
} else {
|
||
alert(JSON.stringify(err));
|
||
}
|
||
});
|
||
});
|
||
|
||
//用户点击了结束时间
|
||
$("#divEndTime").on("touchend", function () {
|
||
api.openPicker({
|
||
type: 'date',
|
||
date: momentFormat(endTime),
|
||
title: '选择时间'
|
||
}, function (ret, err) {
|
||
if (ret) {
|
||
endTime.date(ret.day);
|
||
endTime.month(ret.month - 1);
|
||
endTime.year(ret.year);
|
||
endTime.endOf('day');
|
||
// alert(momentFormat(endTime, "YYYY-MM-DD HH:mm:ss"));
|
||
updateDateTimeView()
|
||
} else {
|
||
alert(JSON.stringify(err));
|
||
}
|
||
});
|
||
});
|
||
|
||
//监听表的滚动事件 同步各区域滚动
|
||
$("#table-body-right").on("scroll", function () {
|
||
var top = $(this).scrollTop();
|
||
var left = $(this).scrollLeft();
|
||
$("#table-body-left").scrollTop(top);
|
||
$("#table-head-right").scrollLeft(left);
|
||
})
|
||
|
||
$("#table-body-left").on("scroll", function () {
|
||
var top = $(this).scrollTop();
|
||
$("#table-body-right").scrollTop(top);
|
||
|
||
})
|
||
|
||
$("#table-head-right").on("scroll", function () {
|
||
var left = $(this).scrollLeft();
|
||
$("#table-body-right").scrollLeft(left);
|
||
|
||
})
|
||
}
|
||
|
||
ctrl.init();
|
||
}
|
||
})()
|