#
# 1、什么是指标?
指标就是报表指标,来自统计中的部分数据。
# 2、如何制作一个指标
# 3、开发一个指标栏目
我们可以把一个指标或多个指标开发为一个栏目,【column_factory】中有很多指标栏目可以参考,比较典型的是column-quota-card
,下面我们就深度解析此栏目来方便我们开发一个新的栏目
栏目样式:
文件夹结构:
3-1、入口文件
webpack 打包用的入口文件,一般只是单纯的应用vue对象,不做其他处理。
如果需要再vue安装此组件的时候先处理逻辑,可以写入install中。
import ColumnQuotaCard from './src/column-quota-card.vue';
ColumnQuotaCard.install = function (Vue) {
Vue.component(ColumnQuotaCard.name, ColumnQuotaCard);
};
export default ColumnQuotaCard;
3-2、示例数据
用于栏目在开发过程中或者未绑定数据源的时候做的临时数据,注意eg数据是个数组,数组的个数要跟config.elements的个数对应。
因为此指标点击要跳转穿透,所以我们定义了两个数据源
1、指标:dataFormat:1获取数据,
2、穿透:dataFormat:2获取跳转信息。
当然eg.json里面,数组第一个就是模拟获取指标数据。因为跳转信息无法模拟,所以写个{}空对象。这里必须一一对应。
3-3、配置文件
{
"name": "卡片式指标", // 栏目名称
"platform": "0", // 平台属性 0:全部 1:pc 2:移动
"bgColor": "#57CAC7", // 默认背景色
"skipOutStyle": true, // 跳过外部样式,让外部不再自动处理配置样式,全部交由自身控制
"height": "110", // 默认高度110px
"minHeight": "60", // 最小高度60px
"UUID": "4f0d2930-81bf-11e9-99d2-3520e7f11666", // 自动生成,全局唯一id
"options": [ // 3-3-1:高级属性配置
....
],
"labels": [ // 3-3-2:栏目上所显示描述的文字
{
"key": "1",
"name": "员工人数"
}
],
"elements": [ // 3-3-3:栏目元素
{
"name": "指标",
"description": "",
"dataFormat": "1",
"dataVersion": "V1"
},
{
"name": "穿透",
"description": "",
"dataFormat": "2",
"dataVersion": "V1"
}
]
}
3-3-1:高级属性配置、config.options 跟配置看板的映射关系,允许栏目开发者将部分权限交给用户,让其自己定义部分功能细节。
3-3-2:栏目上所显示描述的文字
3-3-3:栏目元素点位映射
hotPoint的个数跟栏目元素个数相关,序号从0开始。如果多个数据源要绑定到同一个dom上,那么用 / 线隔开
3-3-3:栏目元素的映射关系
3-3-4:穿透的映射关系
divClickJump 其实也是获取指标元素的数据,通过基础api:window.PortalAPI.menuJumpContent
直接跳转。 一定要使用基础api跳转,否则容易造成升级后错误。
divClickJump(index) {
const jump = this.columnData[this.el(index,'id')];
jump.data = jump.data || {};
jump.data.id = jump.data.id || this.el(index,'id');
jump && window.PortalAPI.menuJumpContent(jump);
}
创建人:yinyanting