(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 = '{time}'; template = template.replace("{time}", time); $("#timeColumn").append(template); } /** * 向表格插入一类表头 */ function addHeaderItem(headerItem) { var templateHead = '{name}'; templateHead = templateHead.replace("{col}", headerItem.vars.length); templateHead = templateHead.replace("{name}", headerItem.categotyName); $("#table-header-list").append(templateHead); var templateTitle = '{title}'; 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 = ''; 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 += ""; row += values[i]; row += ""; } } row += ""; 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(); } })()