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