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

文章内容

原理概括

数据库调整

前端实现

总结

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">
<div class="box-header">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">{{widget.name}}</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body" ng-style="{height:row.height?row.height:300+'px'}">
<i class="fa fa-spinner fa-spin"></i> {{"COMMON.LOADING" | translate}}
</div>
</div>
</div>
</div>
</div>
</div>

将设计好的模板文件引入到ui-view（webapp\starter.html）中：

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" id="content-wrapper-id">
<div id="loading-bar-container"></div>
<ui-view>
<!-- Home Page -->
<div ng-include="'starter/home-page.html'"></div>
</ui-view>
</div>

测试的话，可以复制dashboard_board表中的配置，下一节完成主页配置功能；

3.2.首页图表配置

好吧，也是copy代码。

配置界面模板：

webapp\org\cboard\view\config\board.html

webapp\org\cboard\view\config\board\grid\grid.html

配置界面控制器逻辑：

webapp\org\cboard\controller\config\boardCtrl.js

因为只是完成主页配置，保存设置之后的JSON配置，简化之后如下：

配置界面模板：

文件：webapp\org\cboard\view\config\homePage.html

<!-- Content Wrapper. Contains page content -->
<div id="inner-container" class="content">
<div class="row">
<div class="col-md-9">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">{{'HOME_PAGE.CONFIG.TITLE'|translate}}</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-12">
<div ng-include="'org/cboard/view/config/homePage/grid.html'"></div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-danger pull-right" ng-click="cancel()">{{'COMMON.CANCEL'|translate}}</button>
<button type="submit" class="btn btn-success pull-right" ng-click="saveOption()"
style="margin-right: 5px">{{'COMMON.SAVE'|translate}}
</button>
</div>
</div>
</div>
</div>
<!-- /.box-footer-->
</div>
</div>
</div>
</div>
</div>

文件： webapp\org\cboard\view\config\homePage\grid.html

<div class="row">
<div class="form-group" style="margin: 5px 15px;">
<button type="submit" class="btn btn-success" ng-click="addRow()">
{{'CONFIG.DASHBOARD.ADD_ROW'|translate}}
</button>
</div>
</div>
<div dnd-list="curBoard.layout.rows" dnd-allowed-types="['r']">
<div class="dndPlaceholder row margin">
<div class="box sort-highlight" style="height: 130px"></div>
</div>
<div class="row margin" ng-repeat="row in curBoard.layout.rows">
<div ng-include="'org/cboard/view/config/board/grid/widget.html'"></div>
</div>
</div>
<div class="row" ng-if="curBoard.layout.rows.length >= 3">
<div class="form-group" style="margin: 5px 15px;">
<button type="submit" class="btn btn-success" ng-click="addRow()">
{{'CONFIG.DASHBOARD.ADD_ROW'|translate}}
</button>
</div>
</div>

文件： webapp\org\cboard\controller\config\homePageCtrl.js

cBoard.controller('homePageCtrl', function ($rootScope, $scope, $http, ModalUtils, $filter, $uibModal, $timeout, dataService, $state, $window) {
var translate = $filter('translate');

$scope.curBoard = {layout: {rows: []}};

var getCurBoard = function(){
$http.get("commons/getHomePageWidget.do").success(function(response){
if(response && response.optValue){
$scope.curBoard = angular.fromJson(response.optValue);
}
});
};

var getDatasetList = function () {
$http.get("dashboard/getDatasetList.do")
.then(function (response) {
$scope.datasetList = response.data;
return $http.get("dashboard/getWidgetList.do");
})
.then(function (response) {
$scope.widgetList = response.data;
$scope.widgetList = $scope.widgetList.map(function (w) {
if (w.data.datasetId != null) {
var dataset = _.find($scope.datasetList, function (ds) {
return ds.id == w.data.datasetId;
});
w.dataset = dataset == null ? 'Lost DataSet' : dataset.name;
} else {
w.dataset = "Query";
}
return w;
});
}
);
};

$scope.widgetGroup = function (item) {
return item.categoryName;
};

$scope.addWidget = function (row) {
var w = {};
w.name = '图表名称';
w.width = 12;
w.widgetId = $scope.widgetList[0].id;
row.widgets.push(w);
};

$scope.addRow = function () {
$scope.curBoard.layout.rows.push({type: 'widget', widgets: []});
};

$scope.addNode = function (node) {
$scope.curBoard.layout.rows.push({node: node, type: 'widget', widgets: []});
};

$scope.saveOption = function(){
$http.post("commons/saveHomePageWidget.do",{json:angular.toJson($scope.curBoard)}).success(function(response){
if(response.status == 1){
window.location.replace('starter.html');
}
else{
ModalUtils.alert(response.msg,"modal-warning", "sm");
}
});
};

$scope.cancel = function(){
window.location.replace('starter.html');
};

getCurBoard();
getDatasetList();

});

最后，配置路由规则，添加跳转功能按钮，则大功告成；

示例：

4.总结

其实，前面大部分的代码都是在理解原有实现的基础上，进行的copy和简化；

TIP:

其实，我在做的过程中遇到遇到一个棘手的问题：

现在前端功能界面的切换都是基于angularJS路由实现的，包括用户配置的看板，但是当这个数据量比较大时，会比较费时（虽然在有缓存的情况下，页面渲染是一个问题），于是，我们想加入TAB标签页来解决，但是，发现基于angularJS路由机制的TAB标签页供能并不容易实现，要不就放弃路由机制，希望大牛们不吝赐教！！！