mbos之动态图表设计

前言

所谓，一图胜千言。人脑有80%的部分专门用于视觉处理。而随着数据时代的全面来临，我们自然有必要将数据转化为图形与图表。

Mbos是一个快速，稳定的云端轻应用开发平台。帮助企业快速开发移动应用，加快企业工作效率，为企业创造更多的效益。mbos移动设计器，可以在线进行界面设计，发布成移动云之家轻应用，方便开发，快捷交付！

其中，移动设计器还包含表单、列表、图表、控件等功能，支持在线js、css、服务端函数编辑。可以根据企业需要，快速定制开发轻应用。言归正传，下面介绍一下，在项目中，使用mbos图表功能做的财务预警轻应用中的一个图表化模块。

下面先上一个效果图：

动态参数-枚举控件

这里的每个枚举控件，都在属性中进行设置，绑定枚举数据源。这里因为选项都较为固定，因此可采用自定义枚举数据源，进行手动维护。

枚举控件设计的逻辑思维

　　例如上面的枚举控件中，企业与国资委对标值进行比对，企业状态分为三种：正常、关注、重点关注，而且状态相对固定，因此这块可以使用自定义枚举数据源。年份以及起始月，结束月还有预警指标（固定）同样的可以采用自定义枚举数据源进行维护。而公司这块，因为需要跟随 选择的状态的不同，需要在公司这个枚举控件的下拉框中显示 该状态对应的公司。因此需要写服务端函数进行 传递状态值 获取公司，然后将获得的公司列表赋值给公司这个枚举控件。

控件-数据源

选着好数据源，例如函数数据源，定义好数据源，然后编写服务端函数，绑定到该数据源上即可。

下面给出服务端函数 getComByStatus code:

传递参数： 通过JS的页面加载事件中参数赋值，传递给该服务端函数。 然后服务端函数及西宁获取传递的参数，进行条件查询。

   var newStatus = "关注";
   var newYear = "2017";
   var newMon = "4";
  // newStatus,newYear,newMon
   // mbos('selCompany').open();
   mbos("dsScript1").refresh();
   mbos('dsScriptCom').setParam({newStatus,newYear,newMon});

// var adc;
// var status = @{varStatus};
var status = context.getParamAsString(0); 
var year = context.getParamAsString(1); 
var month = context.getParamAsString(2); 
// adc = "123";
var sbSQL =  new java.lang.StringBuffer();
sbSQL.append("select cfcompanyName from CT_FIN_RiskItem where 1=1");
sbSQL.append(" and cfflag = 1");
sbSQL.append(" and cfyear = " + year);
sbSQL.append(" and cfmonth = " + month);
sbSQL.append(" and cfstatus = " + "'"+status+"'");
sbSQL.append(" order by cfsortnum");
var list = context.getDBUtil().executeQueryAsList(sbSQL.toString());
var list2 = new java.util.ArrayList();
for(var  i = 0; i < list.size(); i++){
    var ob = new java.util.HashMap();
    var bb;
    var companyName = list.get(i).toString();
        bb= companyName.substring(15,companyName.length()-1);
         ob.put("alias",bb);
     // ob.put("isenum",true);
        ob.put("value",bb);
         list2.add(ob);
}
// throw list2;
// throw companyName;
context.setResult(list2);

图表-折线图

在控件中选择折线图，然后给折线图绑定函数数据源，在给函数数据源绑定服务端函数，只需要编辑服务端函数即可。图表的一般都需要结合服务端变量，根据服务端变量值的改变，实现图表动态刷新。

折线图所有的函数数据源绑定的服务端函数 getData code:

/*Codeing**/
// var ctx = context.getBosContext();
var list22;
var obj1;
var obj2;
var obj3;
var obj4;
//获取服务端变量值
var year = @{varYear};

list22 = new java.util.ArrayList();
var monStart = @{varMonStart};
obj1 = new java.util.HashMap();

var monEnd =@{varMonEnd};
obj2 = new java.util.HashMap();
var companyName = @{varCompanyName};
obj3 = new java.util.HashMap();
var item =@{varItem};

obj4 = new java.util.HashMap();
//组装主查询sql
var sb =  new java.lang.StringBuffer();
sb.append(" select ");
sb.append(" cfmonth as 月份, ");
if(item == "营业利润"){
   sb.append(" CT_FIN_SasacEntry.cfpoor as 平均值, ");
   sb.append(" CT_FIN_SasacEntry.cfaverage as 较差值, ");
   }else{
    sb.append(" CT_FIN_SasacEntry.cfpoor/100 as 平均值, ");
   sb.append(" CT_FIN_SasacEntry.cfaverage/100 as 较差值, ");
   }

if(item == "资产负债率"){
    sb.append(" round(cftotalLiabilites/cftotalAssets,4) as  企业数据 ");
}else if(item == "营业利润"){
    sb.append(" round(cftrafficProfit/10000,4) as  企业数据 ");
}else if(item == "己获利息倍数"){
    sb.append(" round((cftotalProfit+cfinterestExpense)/cfinterestExpense,4) as  企业数据 ");
}else if(item == "流动比率"){
    sb.append(" round(cfcurrentAssets/cfcurrentLiabilities,4) as  企业数据 ");
}else if(item == "两金占流动资产比重"){
    sb.append(" round((cfaccountReceivable+cfstock)/cfcurrentAssets,4) as  企业数据 ");
}else if(item == "速动比率"){
    sb.append(" round((cfcurrentAssets-cfstock)/cfcurrentLiabilities,4)  as  企业数据 ");
}else if(item == "现金流动负债比率"){
    sb.append(" round(cfoperaCashFlow/cfcurrentLiabilities,4) as  企业数据 ");
}else if(item == "带息负债比率"){
    sb.append(" round((cfshortLoan+CFOneYearLongLiabilities+cflongLoan+CFBondsPayable+CFInterestPayable)/cftotalLiabilites,4) as  企业数据 ");
}else if(item == "或有负债比率"){
    sb.append(" round((CFDraft+CFBalance+CFAmountOfmatter+CFContingentLiabilities)/cfownerRights,4) as  企业数据 ");
}else if(item == "平均融资成本率"){
    sb.append(" round(CFTotalCosts/CFFinancingCost,4) as  企业数据 ");
}
//组装表 条件查询
sb.append(" from CT_FIN_RiskItem as CT_FIN_RiskItem ");
sb.append(" INNER join CT_FIN_Sasac as CT_FIN_Sasac on CT_FIN_RiskItem.cfyear = CT_FIN_Sasac.cfyear ");
sb.append(" INNER join CT_FIN_SasacEntry as CT_FIN_SasacEntry on CT_FIN_Sasac.fid = CT_FIN_SasacEntry.fparentid ");
sb.append(" where CT_FIN_RiskItem.cfyear = " + year);
sb.append(" and CT_FIN_RiskItem.cfcompanyName = " +"'"+ companyName+"'");
sb.append(" and CT_FIN_SasacEntry.cfname = " + "'" + item + "'");
sb.append(" and CT_FIN_RiskItem.cfmonth >= " + monStart);
sb.append(" and CT_FIN_RiskItem.cfmonth <= " + monEnd);
sb.append(" order by cfmonth");

//执行查询企业数据
var list = context.getDBUtil().executeQueryAsList(sb.toString()); 
if(list.toString().length()>0){
  context.setResult(list);
}
// context.setResult(list);
// throw list;

控件-变量

在控件中选择变量，定义服务端变量。服务端变量 需要通过 值改变事件 进行赋值 以及初始化。(服务端变量一定在JS中进行初始化)

为每个枚举控件绑定 值改变事件。

JS端

　　包含 每个控件的值改变事件，将对应控件选中的值 赋值给对应的 服务端变量，并进行刷新取数数据源。借助服务端变量进行图标数据源的属性，动态图表根据选择参数的不同，取数后的数据改变，导致图表的动态刷新！控件的初始化赋值（必须要做的操作，虽然会有点影响加载性能）  在用page 绑定 afterOnload 事件（页面加载后进行）进行初始化的赋值。

_this.changeSelYear = function(event){
    mbos.variable.setValue("varYear",event.new_value.alias);
    mbos("dsScript1").refresh();
}
_this.changeSelectItem = function(event){
    mbos.variable.setValue("varItem",event.new_value.alias);
    mbos("dsScript1").refresh();
}

_this.changeStartMonth = function(event){
    mbos.variable.setValue("varMonStart",event.new_value.alias);
    mbos("dsScript1").refresh();
}
_this.changeEndMonth = function(event){
      var endMon = event.new_value.alias;
    var startMon =  mbos("selectMonthStart").value().alias;
        // if(endMon < startMon){
        // var param = {title:"错误",msg:"请正确选择月份",timeOutFn:function(data){if(data==0){alert("确定按钮")}}};
        // mbos.ui.showError(param);
        // }
    mbos.variable.setValue("varMonEnd",endMon);
    mbos("dsScript1").refresh();
}
//预警状态 值改变
_this.changeStatus = function(event){
    mbos.variable.setValue("varStatus",event.new_value.alias);
  var newStatus = event.new_value.alias;
  var newYear = mbos("selYear").value().alias;
  var newMon = mbos("selectMonthStart").value().alias;

  //刷新 获取公司函数源
    mbos("dsScript1").refresh();
    mbos('dsScriptCom').setParam({newStatus,newYear,newMon});
}
//selCompany
_this.changeCompany = function(event){
    mbos.variable.setValue("varCompanyName",event.new_value.alias);
   mbos("dsScript1").refresh();
}

//页面加载后初始化
mbos('page').bind("afterOnload",function(){
  //设置初始值 每个都要有初始值..顺便给控件赋初始值
  mbos.variable.setValue("varYear",'2017');
  mbos.variable.setValue("varItem",'资产负债率');
   mbos.variable.setValue("varMonStart",'4');
   mbos.variable.setValue("varMonEnd",'5');
   mbos.variable.setValue("varStatus",'关注');
   // mbos.variable.setValue("varCompanyName",'百利装备');
  // debugger;
  //组织隔离
     var company = easContext[0].name;
  if(company =="天津百利机械装备集团有限公司"){
         mbos.variable.setValue("varCompanyName",'百利装备');
         mbos('selCompany').value({
          alias: "百利装备", 
          isenum: true, 
          value: "百利装备"
        });
     }else{
       //禁用枚举 公司 和状态控件
        mbos('selCompany').disable();
        mbos('selStatus').disable();
       // mbos('selStatus').remove();
        // 赋值公司值为 当前组织公司
         mbos.variable.setValue("varCompanyName",company);
           mbos('selCompany').value({
            alias:company, 
            isenum: true, 
            value: company
            });
     }
  
  
  mbos('selYear').value({
    alias: "2017", 
    isenum: true, 
    value: "2017"
});
  
  mbos('selectItem').value({
    alias: "资产负债率", 
    isenum: true, 
    value: "资产负债率"
});
 
    mbos('selectMonthStart').value({
    alias: "4", 
    isenum: true, 
    value: "4"
});
 
    mbos('selectMonthEnd').value({
    alias: "5", 
    isenum: true, 
    value: "5"
});
//    mbos('selStatus').value({
//       alias: "关注", 
//       isenum: true, 
//       value: "关注"
// });
  
//     mbos('selCompany').value({
//     alias: "百利装备", 
//     isenum: true, 
//     value: "百利装备"
// });
   var newStatus = "关注";
   var newYear = "2017";
   var newMon = "4";
  // newStatus,newYear,newMon
   // mbos('selCompany').open();
   mbos("dsScript1").refresh();
   mbos('dsScriptCom').setParam({newStatus,newYear,newMon});
  
})
            

至此，图表制作的步骤就介绍完毕了，多参考开发文档：https://mbos.kingdee.com/doc/index.html