CBoard框架使用总结七--添加首页图表

文章内容

1. 原理概括
2. 数据库调整
3. 前端实现
4. 总结

1.原理概括

在实际运用中我们可能不希望首页空白，同时希望用户客户化的配置自己想显示的图表，于是有了文章下面将要谈及的内容。

首先，由于是用户级的设置，需要在数据库建立对应的配置表（比如dashboard_user_option），用于保存用户相关配置；

其次，需要用户主页布局配置功能界面，可以参考引用系统原有的“看板设计”功能；

最后，就是图表的渲染了，同样可以借鉴现有的看板的实现(webapp\org\cboard\controller\dashboard\dashboardViewCtrl.js)，其次就是确定显示的位置了，由于现有前端框架使用的是adminLTE，基于angularJS路由机制实现功能界面的跳转，所以，首页的布局可以放在ui-view中，在切换功能时，实现可以进行覆盖；

2.数据库实现

数据库的调整主要是增加由于保存用户配置的数据库表；

示例：

字段名	描述	备注
id	主键
user_id	用户ID	使用中，我们统一了主键类型为BIGINT(20)
opt_key	配置键	用户每一项配置保证键值唯一
opt_value	配置值
create_by	创建者
create_date	创建日期
…	…	…

然后就是基于Mybatis自动生成Dao层相关代码；

3.前端实现

3.1.主页图表显示

在主页中我们对图表有的功能进行了简化，比如导出功能，行参数等；

通过分析看板界面的实现，我们发现几个主要的函数：

var loadCharts = function(){}
//获取图表配置并解析，调用loadWidget方法

var loadWidget = function (reload)
//遍历图表，调用buildRender方法绘制图表

var buildRender = function (w, reload)
//通过chartService服务实现各类图表绘制

$scope.modalChart = function (widget)
//图表弹窗显示

需要注意的是，图表配置的JSON格式，我们并未对原有格式进行调整

每一个widget对象还有两个比较重要的状态控制

widget.loading = true;
   widget.show = true;

分别用于加载框和隐藏控制

其次，是前端布局模板，同样可以借鉴看板功能（webapp\org\cboard\view\dashboard\layout\grid.html）

示例：
主页模板文件（webapp\starter\home-page.html）

<!-- Content Wrapper. Contains page content -->
<section class="content-header">

</section>
<div id="inner-container" class="content">
    <div class="row" ng-repeat="row in charts.rows track by $index" ng-style="{height:row.height+'px'}">
        <div ng-repeat="widget in row.widgets track by $index">
            <div ng-if="widget.show">
                <dashboard-widget ng-show="widget.loading == false"></dashboard-widget>
            </div>
            <div ng-if="widget.loading || !widget.show" class="col-md-{
   {
   widget.width}}" style="height: 50px;">
                <div class="box box-solid">
                    <