BuildRun低代码开发教程八节 | 图表和仪表盘展示

BuildRun技术团队
964 阅读6分钟

课程说明

▍1.1 课程实现功能
本课程为物联网应用平台设计一个仪表盘首页，包括以下内容：
  1. 卡片展示设备总数；
  2. 卡片展示网关总数；
  3. 卡片展示产品总数；
  4. 卡片展示产品分组总数；
  5. 图表展示各运营商的产品统计数量；
  6. 图表展示各云端协议的统计数量。
▍1.2 课程知识点
本课程涉及到的主要知识点包括：
  • 非存储数据库对象的应用；
  • JavaAction中对非存储数据库对象赋值；
  • 图表定义开发 （柱状图和饼图，更多图表类型读者自行查看文档）；
  • 自定义渲染器实现个性化组件。
▍1.3 卡片显示实现思路
  1. 创建包括4个属性的非存储数据库业务对象；
  2. 编写JavaAction来汇总业务对象的相关数量；
  3. 在数据源定义中调用JavaAction生成的逻辑流，自动执行查询获得汇总数量；
  4. 编写组件渲染器，将逻辑流返回的汇总数量信息显示为卡片的样式。

课程内容

01 创建业务对象
进入应用设计器定义业务对象：
  • 名称：数量统计
  • 编码：QTY_STATS
  • 存储数据库：否
定义整数组件信息：
02 编写JavaAction获取统计数量
仪表盘中设备、网关、产品和产品组的数量需要实时统计出来，通过在逻辑流中的JavaAction统计得出各数量。
1. 定义JavaAction信息如下：
  • 名称：汇总设备网关产品设备组数量
  • 编码：AllProductsCount
  • 返回值类型：List
  • 业务对象：数量统计
  • 暴露为逻辑流：是
  • 逻辑流类型：DataSet
  • DataSet业务对象类型：数量统计
2. JavaAction汇总设备网关产品设备组数量的参数如下：
  • 参数名称：dataSetConfig
  • 类型：DataSetConfig
  • 业务对象：数量统计
保存之后可以看到生成了逻辑流汇总设备网关产品设备组数量。
代码库中打开io/buildrun/engine/briotsrv/action/AllProductsCount.java（可以使用在线的Web IDE，也可以克隆到本地使用其他IDE工具完成），修改executeAction()方法为：
// BEGIN USER CODE
ArrayList<QtyStats> qtyArrayList = new ArrayList<QtyStats>();
​
JavaActionHelper javaActionHelper = context.getCore().getRuntimeManager().getPersistenceManager().getJavaActionHelper();
​
Long groupQty = (long)javaActionHelper.selectCountByExample(context,new DeviceGroups());
​
Long productQty = (long)javaActionHelper.selectCountByExample(context,new Products());
​
Products deviceProduct = new Products();
deviceProduct.setProductType("DEVICE");
Long deviceQty = (long)javaActionHelper.selectCountByExample(context,deviceProduct);
​
Products gatewayProduct = new Products();
gatewayProduct.setProductType("GATEWAY");
Long gatewayQty = (long)javaActionHelper.selectCountByExample(context,gatewayProduct);
​
QtyStats currentQtyStats = new QtyStats();
currentQtyStats.setDeviceQty(deviceQty);
currentQtyStats.setGroupQty(groupQty);
currentQtyStats.setProductQty(productQty);
currentQtyStats.setGatewayQty(gatewayQty);
​
qtyArrayList.add(currentQtyStats);
​
return qtyArrayList;
// END USER CODE

03 编写渲染器
首页中仪表盘显示，我们希望将各数量的统计显示为卡片风格，通过编写一个渲染器来实现卡片式显示。选择应用设计器左侧的渲染器图标进入界面列表窗口：
1. 选择右上角的创建链接进入创建渲染器窗口，录入如下信息：
  • 名称：卡片风格显示统计数据组件
  • 编码：CARD_VIEW_COMPONENT
  • 类型：通用组件渲染器
2. 生成代码后，代码库中打开 react/render/CARD_VIEW_COMPONENT/index.js（可以使用在线的Web IDE，也可以克隆到本地使用其他IDE工具完成）修改 observer(props)方法为：
// BEGIN USER CODE AREAconst qtyStatsDataset = useDataSet('QTY_STATS');const { name: cardName, code } = designProps.toData();const iconMap = {    device_qty: 'memory',    gateway_qty: 'router',    product_qty: 'widgets',    group_qty: 'view_week',};​return(    <div className="el-card__body">        <div className="count-card el-row">            <div className="el-col">                <Icon className ="iconfont icon-devices-dashboard" type={iconMap[code] || 'important_devices'} />            </div>            <div className="count-desc el-col">                <li>{cardName}</li>                <li className="count-text">                    <span id="device-count-text2">{qtyStatsDataset.current?.get(code?.toUpperCase())??0}</span>                </li>            </div>        </div>    </div>);// END USER CODE AREA 请把你的逻辑代码写在这个注释之间
3. 新增react/render/CARD_VIEW_COMPONENT/index.less，添加如下的样式代码：
.el-card__body {    width: 100%;    height: 100%;    padding: 20px 28px;​    .el-row {        display: flex;        height: 100%;​        .el-col {            flex: 1;        }    }​    .count-card {        text-align: center;​        .iconfont {            display: inline-block;            float: left;            width: 60px;            height: 60px;            line-height: 60px;            font-size: 28px;            font-weight: 600;            color: #34c388;            background-color: #f6f7fb;            border-radius: 50%;        }​        .count-desc {            text-align: right;            color: #b6bac5;            font-size: 16px;​            li {                line-height: 30px;                list-style-type: none;            }​            .count-text {                font-size: 24px;                color: #646775;            }        }    }}
04 创建页面
▍4.1 定义页面
进入应用设计器定义页面：
  • 名称：首页
  • 编码：homePage
  • 标题：物联网平台首页
▍4.2 定义数据源
定义如下数据源：
设置数据源数量统计的处理逻辑：
  • 自动查询：是
  • 逻辑流：汇总设备网关产品设备组数量
▍4.3 定义卡片表格
在section下添加2行，设置行的“列间隔=20”，盒模型的上margin=20。 第一行中添加4列，列的属性设置栏格数=6 , 高度=100, 边框样式=阴影，拖动4个自定义组件分别到第一行的4列中：
▍4.4 定义图表
在section下的第二行中添加两列。
1. 拖动图表组件到第一列中，选择数据源设备
  • 组件名称：图表1
  • 标题：产品数量
  • 副标题：分运营商显示
  • 图标样式：柱状图
  • 分类：运营商
  • 左值轴：产品
2. 拖动图表组件到第二列中，选择数据源产品组件
  • 名称：图表2
  • 标题：云端协议
  • 副标题：分类统计
  • 图标样式：饼图
  • 分类：云端协议
  • 指标：设备数量

05 发布和运行应用

发布应用后显示如下效果：
--To be continued--
这一节介绍了非存储数据库对象的应用和图表定义开发，下一节将介绍格式化报表的定义开发。本系列开发教程持续更新，欢迎关注。

前四节课程回顾▼

遇到问题怎么办？

在Buildrun使用过程中，任何关于平台的问题和建议，都可以点击页面右下角用户反馈按钮，实时向开发团队提交反馈，我们会在第一时间处理。

关于BuildRun

BuildRun带来了多云架构环境下基于视觉的企业级应用创建、集成、部署、生命周期管理和分发的能力，由开源Choerodon猪齿鱼核心团队创立的BuildRun公司（上海翘腾科技有限公司）的使命是以云原生的现代化软件架构来帮助企业提升软件开发生产力和业务敏捷性，它提供企业级DevOps平台和企业级低代码开发平台，帮助隐藏应用所依赖的基础环境的复杂性，让每个人都只需要专注在业务逻辑上，以新的方式让团队能够快速、持续地将他们的想法转化为真正的商业价值。
欢迎免费注册，体验试用低代码应用开发


avatar
文章
阅读
粉丝