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();
|
|||
|
|
}
|
|||
|
|
})()
|