604 lines
17 KiB
JavaScript
604 lines
17 KiB
JavaScript
var hasLoaded = false;
|
||
var prId = -1;
|
||
var ctValueAndDdNumbersMap = {};
|
||
var initDdNumberCallbackCount = 0;
|
||
var varTypesIdAndNameList = [];//变量类型及id的数组，例如[id:1010, typeName:"电流"]
|
||
var hasSent = false;//标记是否向主窗体发送过过滤条件
|
||
var isLoadingVarType = false;
|
||
// Add start 2018/8/23 16:00 kangzhi
|
||
var isLoadingChart = false;//加载'查看类型曲线'
|
||
// Add end 2018/8/23 16:00 kangzhi
|
||
|
||
var filterResult = {
|
||
locName: "高压侧",
|
||
ctValue: "1",
|
||
ddNumber: "201",
|
||
// Add start 2018/8/23 16:00 kangzhi
|
||
typeChartId: 'f',// 存储查看类型曲线 id
|
||
typeChartName: '频率',// 存储查看类型曲线 name
|
||
// Add end 2018/8/23 16:00 kangzhi
|
||
typeIds: [],
|
||
typeNames: [],
|
||
interval: 3600,
|
||
intervalDesc: "1小时"
|
||
};
|
||
|
||
|
||
/**
|
||
* 弹出提示框
|
||
*/
|
||
function toast(msg) {
|
||
api.toast({
|
||
msg: msg,
|
||
duration: 3000,
|
||
locaiton: 'top'
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 通过主界面
|
||
* @param {*} msg
|
||
*/
|
||
function remoteToast(msg) {
|
||
api.sendEvent({
|
||
name: 'historyDtRemoteToast',
|
||
extra: {
|
||
msg: msg
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 根据id清空所有子元素
|
||
*/
|
||
function clearAllChildren(id) {
|
||
var tobeRemoved = $("#" + id);
|
||
tobeRemoved.empty();
|
||
}
|
||
|
||
/**
|
||
* 界面显示完成后的回调
|
||
*/
|
||
function viewAppear(ret, err) {
|
||
if (!hasLoaded) {
|
||
//如果用户滑动打开了侧栏，但是还没加载过数据，则开始加载
|
||
toast("加载中...");
|
||
historyLoadData();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 主窗体通知侧栏加载数据
|
||
*/
|
||
function historyLoadData() {
|
||
//标记为已经加载数据
|
||
hasLoaded = true;
|
||
//获取prId
|
||
prId = $api.getStorage('powerRoom').prId;
|
||
if (prId > 0) {
|
||
//获取各个位置下的调度号
|
||
initDdNumber(function () {
|
||
var defaultDdNumbers = ctValueAndDdNumbersMap[filterResult.ctValue];
|
||
if (!(defaultDdNumbers && defaultDdNumbers.length > 0)) {
|
||
//提示用户手动选择分类
|
||
remoteToast("请选择查询条件");
|
||
}
|
||
//更新界面上的调度号显示
|
||
updateDdNumberView();
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 调接口获取各个分类下的调度号
|
||
*/
|
||
function initDdNumber(callback) {
|
||
ctValueAndDdNumbersMap["1"] = [];//高压侧调度号假数据
|
||
ctValueAndDdNumbersMap["2"] = [];//低压侧假数据
|
||
ctValueAndDdNumbersMap["3"] = [];//变压器假数据
|
||
ctValueAndDdNumbersMap["4"] = [];//直流屏假数据
|
||
ctValueAndDdNumbersMap["5"] = [];//信号屏假数据
|
||
ctValueAndDdNumbersMap["6"] = [];//其他假数据
|
||
initDdNumberCallbackCount = 0;//回调计数清零
|
||
|
||
var url = '/ems/rest/ddnum/list';
|
||
var args = { prId: prId, ct: 1 };
|
||
for (var i = 1; i <= 6; i++) {
|
||
args.location = i;
|
||
args.varType = '1'; // 只能查看AI点的历史数据
|
||
$api.get(url, args, function (data, err) {
|
||
initDdNumberCallbackCount++;
|
||
if (err) {
|
||
toast("网络请求失败");
|
||
} else {
|
||
if (!data.code || data.code != "200") {
|
||
toast("服务器响应错误" + (data.code ? ("，错误码：" + data.code) : ""));
|
||
} else {
|
||
if (data.body) {
|
||
for (var i = 0; i < data.body.length; i++) {
|
||
var element = data.body[i];
|
||
ctValueAndDdNumbersMap[element.location + ""].push(element.ddNum);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (initDdNumberCallbackCount == 4 && callback) {
|
||
callback();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 向调度号列表中添加一个调度号
|
||
*/
|
||
function addDdnumber(ddnumber) {
|
||
var template = '<input class="btn" type="button" value="{dd}" group="ddNumber"/>';
|
||
template = template.replace("{dd}", ddnumber);
|
||
|
||
$("#ddnumber-group").append(template);
|
||
}
|
||
|
||
/**
|
||
* 清空界面上的所有调度号
|
||
*/
|
||
function clearDdnumberGroup() {
|
||
clearAllChildren("ddnumber-group");
|
||
}
|
||
|
||
/**
|
||
* 调接口获取变量类型
|
||
*/
|
||
function initVarType() {
|
||
var url = '/ems/rest/var/category';
|
||
var args = { prId: prId, location: filterResult.ctValue, ddNum: filterResult.ddNumber, varType: "1" };
|
||
varTypesIdAndNameList = [];//先清空变量类型id和名称的数组
|
||
showVarTypeLoading();//显示载入中
|
||
// Add start 2018/8/23 16:00 kangzhi
|
||
showChartLoading();// 显示'查看类型曲线'加载中
|
||
// Add end 2018/8/23 16:00 kangzhi
|
||
|
||
$api.get(url, args, function (data, err) {
|
||
if (err) {
|
||
toast("网络请求失败");
|
||
} else {
|
||
if (!data.code || data.code != "200") {
|
||
toast("服务器响应错误" + (data.code ? ("，错误码：" + data.code) : ""));
|
||
} else {
|
||
for (var i = 0; i < data.body.length; i++) {
|
||
var v = data.body[i];
|
||
varTypesIdAndNameList.push({ id: v.categoryKey, typeName: v.categoryName });
|
||
}
|
||
//更新界面上显示的变量类型
|
||
updateVarTypesView();
|
||
//如果从未向主窗体发送过过滤条件，则发送一次
|
||
if (!hasSent) {
|
||
sendResult();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 清空界面上显示的变量类型
|
||
*/
|
||
function clearVarTypesGroup() {
|
||
clearAllChildren("vartype-group");
|
||
}
|
||
|
||
/**
|
||
* 向界面中的变量类型按钮组中添加一个变量类型按钮
|
||
*/
|
||
function addVarType(v) {
|
||
var template = '<button class="btn-free-width" type="button" value="{value}" group="vartype" typeId="{typeId}">{value}</button>';
|
||
template = template.replace(/{value}/g, v.typeName);
|
||
template = template.replace("{typeId}", v.id);
|
||
|
||
$("#vartype-group").append(template);
|
||
}
|
||
|
||
/**
|
||
* 更新界面上显示的变量类型
|
||
*/
|
||
function updateVarTypesView() {
|
||
//先清空界面上显示的变量类型
|
||
clearVarTypesGroup();
|
||
if (varTypesIdAndNameList) {
|
||
for (var i = 0; i < varTypesIdAndNameList.length; i++) {
|
||
var v = varTypesIdAndNameList[i];
|
||
addVarType(v);
|
||
}
|
||
}
|
||
//隐藏载入中的提示
|
||
hideVarTypeLoading();
|
||
//默认选中第前两个变量类型
|
||
var childrens = $("#vartype-group").children();
|
||
if (childrens.length >= 2) {
|
||
var first = $(childrens[0]);
|
||
var second = $(childrens[1]);
|
||
first.addClass("btn-highlight");
|
||
second.addClass("btn-highlight");
|
||
} else if (childrens.length >= 1) {
|
||
//如果只有一个就默认选中一个
|
||
var first = $(childrens[0]);
|
||
first.addClass("btn-highlight");
|
||
}
|
||
|
||
// Add start 2018/8/23 16:00 kangzhi
|
||
// 获取‘类型’中的所有按钮
|
||
var typeBtnList = $("#vartype-group").children();
|
||
// 更新查看曲线类型
|
||
updateChartBtn(typeBtnList);
|
||
// Add end 2018/8/23 16:00 kangzhi
|
||
|
||
//为所有的变量类型绑定事件
|
||
bindCheckButtonEvent($("#vartype-group").children());
|
||
}
|
||
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
/**
|
||
* 清除'查看曲线类型'中的所有按钮
|
||
*/
|
||
function clearChartGroup() {
|
||
clearAllChildren('chart-group');
|
||
}
|
||
|
||
/**
|
||
* 更新'查看类型曲线'(参数是'类型'中的所有按钮jQuery对象组成的数组)
|
||
*/
|
||
function updateChartBtn(typeBtnList) {
|
||
// 隐藏'查看类型曲线'加载中的提示
|
||
hideChartLoading();
|
||
// 先循环遍历 typeBtnList 当没有选中类型按钮时,查看类型曲线中显示'无'按钮，
|
||
// 当有选中类型按钮时，隐藏'无'按钮，正常显示选中的类型按钮
|
||
var flag = true;
|
||
for (var j = 0; j < typeBtnList.length; j++) {
|
||
if ($(typeBtnList[j]).hasClass('btn-highlight')) {
|
||
flag = false;
|
||
}
|
||
}
|
||
if (flag) {
|
||
showChartNoneBtn();
|
||
} else {
|
||
hideChartNoneBtn();
|
||
}
|
||
|
||
// 清空查看曲线类型
|
||
clearAllChildren('chart-group');
|
||
|
||
for (var i = 0; i < typeBtnList.length; i++) {
|
||
// 将 typeBtnList 中所有含有 btn-highlight 类名的按钮更新到 chart-group 中
|
||
if ($(typeBtnList[i]).hasClass('btn-highlight')) {
|
||
// 将含有 btn-highlight 类名的按钮 clone
|
||
var chartBtn = $(typeBtnList[i]).clone()
|
||
.removeClass('btn-highlight')
|
||
.attr('group', 'chart');
|
||
// 将克隆的按钮更新到 chart-group 中
|
||
$('#chart-group').append(chartBtn);
|
||
}
|
||
}
|
||
|
||
// 默认给'查看类型曲线'中第一个按钮添加 btn-highlight 类名
|
||
var chartBtnList = $('#chart-group').children();
|
||
$(chartBtnList[0]).addClass('btn-highlight');
|
||
// 将默认选中的第一个按钮的数据存储到 filterResult.typeChartId 和 filterResult.typeChartName 中
|
||
checkedChartButton_clicked($(chartBtnList[0]));
|
||
// 给'查看类型曲线'单选按钮添加点击事件
|
||
bindSwitchButtonEvent(chartBtnList);
|
||
}
|
||
|
||
/**
|
||
* 显示'查看曲线类型'中的'无'按钮
|
||
*/
|
||
function showChartNoneBtn() {
|
||
$('#chart-group').css('display', 'none');
|
||
$('#chart-group-none').css('display', 'block');
|
||
}
|
||
|
||
/**
|
||
* 隐藏'查看曲线类型'中的'无'按钮
|
||
*/
|
||
function hideChartNoneBtn() {
|
||
$('#chart-group').css('display', 'block');
|
||
$('#chart-group-none').css('display', 'none');
|
||
}
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
|
||
/**
|
||
* 显示变量类型载入中
|
||
*/
|
||
function showVarTypeLoading() {
|
||
isLoadingVarType = true;
|
||
$("#vartype-group-loading").css("display", "block");
|
||
$("#vartype-group").css("display", "none");
|
||
}
|
||
|
||
/**
|
||
* 隐藏变量类型载入中
|
||
*/
|
||
function hideVarTypeLoading() {
|
||
isLoadingVarType = false;
|
||
$("#vartype-group-loading").css("display", "none");
|
||
$("#vartype-group").css("display", "block");
|
||
}
|
||
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
/**
|
||
* 显示'查看类型曲线'载入中
|
||
*/
|
||
function showChartLoading() {
|
||
isLoadingChart = true;
|
||
$("#chart-group-loading").css("display", "block");
|
||
$("#chart-group").css("display", "none");
|
||
}
|
||
|
||
/**
|
||
* 隐藏'查看类型曲线'载入中
|
||
*/
|
||
function hideChartLoading() {
|
||
isLoadingChart = false;
|
||
$("#chart-group-loading").css("display", "none");
|
||
$("#chart-group").css("display", "block");
|
||
}
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
|
||
/**
|
||
* 显示调度号不存在和类型不存在的占位符
|
||
*/
|
||
function showEmptyDataPlaceHolder() {
|
||
//隐藏调度号
|
||
$("#ddnumber-group").css("display", "none");
|
||
$("#ddnumber-group-none").css("display", "flex");
|
||
//隐藏类型
|
||
$("#vartype-group").css("display", "none");
|
||
$("#vartype-group-none").css("display", "flex");
|
||
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
// 隐藏‘选择查看类型曲线’
|
||
$("#chart-group").css("display", "none");
|
||
$("#chart-group-none").css("display", "flex");
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
}
|
||
|
||
/**
|
||
* 隐藏调度号不存在和类型不存在的占位符
|
||
*/
|
||
function hideEmptyDataPlaceHolder() {
|
||
//隐藏调度号
|
||
$("#ddnumber-group").css("display", "flex");
|
||
$("#ddnumber-group-none").css("display", "none");
|
||
//隐藏类型
|
||
$("#vartype-group").css("display", "flex");
|
||
$("#vartype-group-none").css("display", "none");
|
||
}
|
||
|
||
/**
|
||
* 更新界面显示的调度号
|
||
*/
|
||
function updateDdNumberView() {
|
||
//先清空界面上显示的调度号
|
||
clearDdnumberGroup();
|
||
var ddNumbers = ctValueAndDdNumbersMap[filterResult.ctValue];
|
||
if (ddNumbers.length > 0) {
|
||
//隐藏占位符
|
||
hideEmptyDataPlaceHolder();
|
||
for (var i = 0; i < ddNumbers.length; i++) {
|
||
var dd = ddNumbers[i];
|
||
addDdnumber(dd);
|
||
}
|
||
//默认选中第一个调度号
|
||
var childrens = $("#ddnumber-group").children();
|
||
if (childrens.length > 0) {
|
||
var first = $(childrens[0]);
|
||
first.attr("class", "btn btn-highlight");
|
||
ddNumberButton_clicked(first);
|
||
}
|
||
//为所有的调度号绑定事件
|
||
bindSwitchButtonEvent($("#ddnumber-group").children());
|
||
} else {
|
||
//显示占位符
|
||
showEmptyDataPlaceHolder();
|
||
//设置调度号为空
|
||
filterResult.ddNumber = null;
|
||
//设置变量类型为空
|
||
filterResult.typeIds = [];
|
||
filterResult.typeNames = [];
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 用户点击了确定按钮
|
||
*/
|
||
function btOk_clicked() {
|
||
if (isLoadingVarType) {
|
||
toast("载入中，请稍后再试");
|
||
} else {
|
||
if (filterResult.ddNumber) {
|
||
sendResult();
|
||
api.closeDrawerPane();
|
||
} else {
|
||
toast("当前分类下暂无数据");
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 用户点击了取消按钮
|
||
*/
|
||
function btCancel_clicked() {
|
||
api.closeDrawerPane();
|
||
}
|
||
|
||
/**
|
||
* 向主窗体发送筛选条件
|
||
*/
|
||
function sendResult() {
|
||
//获取多选的变量类型
|
||
filterResult.typeIds = [];
|
||
filterResult.typeNames = [];
|
||
var checkButtons = $('#vartype-group').children();
|
||
for (var i = 0; i < checkButtons.length; i++) {
|
||
var cb = $(checkButtons[i]);
|
||
|
||
if (cb.hasClass('btn-highlight')) {
|
||
filterResult.typeIds.push(cb.attr('typeId'));
|
||
filterResult.typeNames.push(cb.attr('value'));
|
||
}
|
||
}
|
||
hasSent = true;
|
||
api.sendEvent({
|
||
name: 'filterSelectionChanged',
|
||
extra: filterResult
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 为单选按钮绑定事件
|
||
*/
|
||
function bindSwitchButtonEvent(buttons) {
|
||
for (var i = 0; i < buttons.length; i++) {
|
||
var btn = $(buttons[i]);
|
||
btn.on('touchend', switchButtonClicked);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 单选按钮被点击
|
||
*/
|
||
function switchButtonClicked() {
|
||
var sender = $(this);
|
||
var brothers = sender.parent().children();
|
||
for (var i = 0; i < brothers.length; i++) {
|
||
var inputElement = $(brothers[i]);
|
||
// inputElement.attr('class', 'btn');
|
||
inputElement.removeClass("btn-highlight");
|
||
}
|
||
// sender.attr('class', 'btn btn-highlight');
|
||
sender.addClass("btn-highlight");
|
||
|
||
var groupName = sender.attr('group');
|
||
switch (groupName) {
|
||
case "loc":
|
||
locationButton_clicked(sender);
|
||
break;
|
||
case "ddNumber":
|
||
ddNumberButton_clicked(sender);
|
||
break;
|
||
case "time":
|
||
timeIntervalButton_clicked(sender);
|
||
break;
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
// 当点击的是查看曲线按钮时
|
||
case "chart":
|
||
checkedChartButton_clicked(sender);
|
||
break;
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 为多选按钮绑定事件
|
||
* @param {*} buttons
|
||
*/
|
||
function bindCheckButtonEvent(buttons) {
|
||
for (var i = 0; i < buttons.length; i++) {
|
||
var btn = $(buttons[i]);
|
||
btn.on('touchend', checkButtonClicked);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 多选按钮被点击
|
||
*/
|
||
function checkButtonClicked(event) {
|
||
var sender = $(this);
|
||
|
||
if (sender.hasClass('btn-highlight')) {
|
||
sender.removeClass('btn-highlight');
|
||
} else {
|
||
sender.addClass('btn-highlight');
|
||
}
|
||
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
// 获取到当前'类型'中所有的多选按钮
|
||
var checkedTypeBtnList = $(event.target).parent().children();
|
||
// 调用更新类型曲线函数
|
||
updateChartBtn(checkedTypeBtnList);
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
|
||
// var groupName = sender.attr('group');
|
||
// switch (groupName) {
|
||
// case "vartype":
|
||
// break;
|
||
// default:
|
||
// break;
|
||
// }
|
||
}
|
||
|
||
/**
|
||
* 用户点击了位置按钮中的一个
|
||
*/
|
||
function locationButton_clicked(locButton) {
|
||
filterResult.locName = locButton.attr("value");
|
||
filterResult.ctValue = locButton.attr("ctvalue");
|
||
updateDdNumberView();
|
||
}
|
||
|
||
/**
|
||
* 用户点击了调度号中的一个
|
||
*/
|
||
function ddNumberButton_clicked(ddButton) {
|
||
filterResult.ddNumber = ddButton.attr("value");
|
||
//获取该调度号下的变量类型
|
||
initVarType();
|
||
}
|
||
|
||
/**
|
||
* 用户点击了时间粒度中的一个
|
||
*/
|
||
function timeIntervalButton_clicked(timeIntervalButton) {
|
||
filterResult.interval = timeIntervalButton.attr("interval");
|
||
filterResult.intervalDesc = timeIntervalButton.attr("value");
|
||
}
|
||
|
||
// Add start 2018/8/23 14:00 kangzhi
|
||
/**
|
||
* 用户点击了'查看类型曲线'中的一个
|
||
*/
|
||
function checkedChartButton_clicked(checkedChartButton) {
|
||
filterResult.typeChartId = checkedChartButton.attr('typeId');
|
||
filterResult.typeChartName = checkedChartButton.attr('value');
|
||
}
|
||
// Add end 2018/8/23 14:00 kangzhi
|
||
|
||
apiready = function () {
|
||
// 解决iphonex底部标签栏被虚拟home键遮挡
|
||
$api.fixTabBar($api.byId('footer'));
|
||
var ctrl = {
|
||
init: {},
|
||
bind: {}
|
||
}
|
||
|
||
ctrl.bind = function () {
|
||
//主窗体通知侧栏加载数据
|
||
api.addEventListener({ name: 'historyLoadData' }, historyLoadData);
|
||
//界面显示完成后的回调
|
||
api.addEventListener({ name: 'viewappear' }, viewAppear);
|
||
//为位置和类型绑定事件
|
||
bindSwitchButtonEvent($("#location-group").children());
|
||
bindSwitchButtonEvent($("#time-group").children());
|
||
//为确定和取消绑定事件
|
||
$("#btn-cancel").on("touchend", btCancel_clicked);
|
||
$("#btn-ok").on("touchend", btOk_clicked);
|
||
}
|
||
|
||
ctrl.init = function () {
|
||
ctrl.bind();
|
||
}
|
||
|
||
ctrl.init();
|
||
}
|