app-xiangsonghua/app-saas-src/script/feature/historyDataRightPanel.js

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