一、路由设计
一级路由路径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切换
