#

# 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