优维低代码实践：统计视图-Toy模板网

这篇具有很好参考价值的文章主要介绍了优维低代码实践：统计视图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

优维低代码实践：统计视图,低代码,低代码技术,低代码开发平台

文章来源地址https://www.toymoban.com/news/detail-598595.html

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

优维低代码实践连载第⑩期

《统计视图》

▽

Visual Builder内部提供了很多图标类型的构件，方便在用户做一些数据统计，同样在大屏项目中也可以得到很广泛地使用，下面我们简单地修改我们的编排，做一个建议的数据统计图表出来吧～

一、新增图表构件

定位到任务详情路由页面的 general-card 构件，将其子构件都删除，并添加我们新的图表构件： chart-v2.bar-chart，效果如下图：优维低代码实践：统计视图,低代码,低代码技术,低代码开发平台

优维低代码实践：统计视图,低代码,低代码技术,低代码开发平台

下面我们收到一个需求，在这个图标中，我们要现实任务卡片的状态还在处理中，或者未处理的情况，并进行展示，这里我们的修改如下：

二、对接后台数据

数据名称: taskList
类型: Provider
Provider: providers-of-cmdb.instance-api-post-search-v3
Args:
  - TASK_FOR_VB_LESSON
  - fields:
      - assignee
      - state
    page: 1
    pageSize: 3000

三、图表编排修改

属性面板-属性:
  data: <% FN.computedTaskList(CTX.taskList) %>
  height: 450
  legends: false
  xField: assignee
  yField: unFinishTask

四、新增 computedTaskList 微应用函数

function computedTaskList({ list }: Params): ResultItem[] {
  const obj = {};
  list.forEach((item) => {
    if (item.state === "研发完成") return;
    if (obj[item.assignee]) {
      obj[item.assignee]++;
    } else {
      obj[item.assignee] = 1;
    }
  });


  const arr: ResultItem[] = [];


  Object.entries(obj).forEach(([key, value]) => {
    arr.push({
      assignee: key,
      unFinishTask: value as number,
    });
  });


  return arr;
}


interface Params {
  list: Array<any>;
}


interface ResultItem {
  assignee: string;
  unFinishTask: number;
}

在处理完这些后，我们的图标就可以预期工作啦～看下预览图：优维低代码实践：统计视图,低代码,低代码技术,低代码开发平台