优维低代码实践:统计视图

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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;
}

在处理完这些后,我们的图标就可以预期工作啦~看下预览图:

五、页面样式优化,加入图片

我们模拟一个需求,这个页面太过单调了,我们想增加点图片让内容丰富一些,那么我们要怎么做呢?

首先在左侧侧边栏菜单选中图片tab,进入页面,点击右上角的 upload 按钮,上传图片,最后点击build & push,我们即可以对我们上传的图片进行使用了~详细请查看 《图片》章节

然后回到我们的任务详情页面,修改编排,具体如下图:

其中img的src,每个项目,每张图片都将不一样,请各位结合自己的项目使用相应的url。

相关推荐
欧雷殿6 小时前
超越 Vibe Coding 的智能研发
低代码·aigc·ai编程
zzywxc7878 小时前
AI技术正以前所未有的速度重塑职业生态与行业格局,尤其在自动化测试领域,AI驱动的测试框架通过智能化、低代码化重构传统测试流程。
网络·人工智能·经验分享·低代码·重构·实时互动·电脑
wenzhangli71 天前
AI+低代码双引擎驱动:重构智能业务系统的产品逻辑
人工智能·低代码·重构
Codebee2 天前
OneCode注解驱动:智能送货单系统的AI原生实现
人工智能·低代码
阴阳怪气乌托邦2 天前
低代码遇上Vue3,是“降维打击”还是“最佳拍档”?🤔 上手后我直呼“芜湖”!
低代码
Codebee3 天前
AI驱动的低代码革命:解构与重塑开发范式
人工智能·低代码·代码规范
NocoBase3 天前
NocoBase 本周更新汇总:支持自定义聚合变量
低代码·开源·资讯
NocoBase4 天前
NocoBase v1.8.0 正式版发布
低代码·开源·资讯
卷积殉铁子4 天前
低代码 + AIGC = 开发者的“双倍快乐”!效率起飞,告别996!
低代码·aigc
何遇er4 天前
大厂的前端面试——低代码混合
低代码·面试