BI报表

一、路由设计

一级路由路径business_intelligent/
二级路径：以运营总览为例

// router.js
{
  path: business_intelligent/overvie,
  component: OverallPage，
  ToolbarStore,
  OverallStore，// 总充值与总消费柱状图
  PaymentStore，// 按需与预留柱状图
  PurchaseStore // 预留购买与消费柱状图
  CouponStore // 代金券赠送与消费
}

二、Store设计

每一个图或表格对应一个store，定义请求参数，将请求数据转换成图表可用的数据格式。接收用户输入的查询数据，重新计算请求参数并发起请求。

OverallStore extends BaseStore {
  @observable loading = false;
  @observable echartOption = { }; // echart画图直接使用的数据
  @observable overall_query = {}; // 用户选择时间段等参数
  // 请求参数
  @computed get overall_params () {
    ... this.overall_query;
    table: 'fact_sales_month_detail',
    dim_columns: [
      'month_id',
    ],
    data_columns: [
      'sale_amount',
      'sale_amount_day',
    ],
    group_by: [
      'month_id',
    ],
    sort_key: 'month_id',
    reverse: 0,
    condition: JSON.stringify({
      'month_id.range': filterMonth,
    }),
  }
 @action
 setEchart(resp, options) {
  // do parese response
  this.echartOption = {
    xAxis: {
      data: data.map(i => i.month_id),
    },
    yAxis: [{
      type: 'value',
      scale: true,
    }, {
      type: 'value',
      scale: true,
    }],
  }
 }
}

三、组件设计

页面结构：

<OverallPage>
  <Toolbar/>
  <Chart1/>
  <Chart2/>
  <Table3/>
  ...
</OverallPage>

Toorbar和OverallPage及其他众多Chart、Table的数据流动：

Toorbar组件中的ToolbarSotre收集用户输入的搜索参数，传递给各个Chart组件中的pageStore，pageStore触发fetch数据，然后组件重新渲染。

Table组件：

基本渲染步骤：设置columns，然后将它和store中的dataSource传进GridTable组件。
定制Td元素：通过columns传递小组件

可抽象的复用组件

• 总览页面条形图

  
  

• 消费总额概览

  
  

• 完成率横向条形图

  
  

• Top3

  
  

• 悬浮框表格

  
  

• 饼状图

  
  

• 详细占比数据

  
  

• 列表内比例图

  
  

• Tap切换