文档章节

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

BuildRun团队
 BuildRun团队
发布于 07/13 22:24
字数 1806
阅读 43
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

课程说明

▍ 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 CODEArrayList<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;            }        }    }}

4 创建页面

▍ 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平台和企业级低代码开发平台,帮助隐藏应用所依赖的基础环境的复杂性,让每个人都只需要专注在业务逻辑上,以新的方式让团队能够快速、持续地将他们的想法转化为真正的商业价值。
 
欢迎免费注册,体验试用低代码应用开发
 
BuildRun团队
粉丝 2
博文 14
码字总数 26700
作品 0
闵行
私信 提问
加载中
请先登录后再评论。
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
5.8K
18
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.1K
1
TDD的测试框架--Machine.Specification

Machine.Specification 是一个 TDD 测试驱动开发的测试框架,简化了测试,无需关心语言本身特性。 Machine.Specifications 带来的好处是不需要在代码里有注释,但同时阅读代码的人可以一目了...

匿名
2013/01/22
1K
0
首列固定的列表

实现特殊的表格(UITableView)效果:即表格中的首列固定不动,而每一行除了首列均可左右拖动,以展现每一行更多内容。 作者谭林江(@无法越狱的痛)说:去益盟面试回来,感觉聊得有点郁闷,...

匿名
2013/01/24
1.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

SPSSAU 付费数据研究报告服务

SPSSAU-付费数据分析报告服务(周老师提供) 本文分享自微信公众号 - SPSSAU(spssau)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起...

SPSSAU
2017/11/08
0
0
芋艿-springcloud gateway

http://www.iocoder.cn/Spring-Cloud/Spring-Cloud-Gateway/?github

Java搬砖工程师
14分钟前
5
0
新零售小程序制作流程

最近有很多小伙伴们都在观望新零售小程序,其实新零售小程序制作还是比较简单的,只要你能熟知以下的新零售小程序制作流程,你也可以制作出属于自己的小程序。下面木鱼小铺(www.muyu007.cn)...

木鱼小铺小程序1
15分钟前
0
0
bat增加自定义参数

#xxx.bat --tag=dev1010 --context=3 --cpu=3 --memory=3 --build=1 --update=1 --api-version=1 @echo off setlocal enabledelayedexpansion set COMMANSLINE="%" :STR_VISTOR for /f "toke......

_snake_
17分钟前
3
0
谷歌SEO推广团队,这样管理更高效!

如今不论是外贸企业还是专业的海外推广公司都会组建自己的Google SEO推广团队,可以更有效的做好网站SEO,但是要发挥谷歌SEO推广团队的最大效能,我们并不能随意的让团队成员听之任之,随波逐...

一尘SEO
19分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部