logo
玩转smardaten | 如何用模板快速搭建园区设备管理应用
发布时间:2023/10/20 10:37:47
想开发一个园区物联管理系统,信息多、结构复杂,无从下手?
老板只说要好看,样式拖拖拽拽调半天做的页面呆板简陋怎么都没眼看。

不禁感叹无代码真难用,“哪里难用了,来看看你的方法有没有用对”

01
基于模板搭建应用思路

智慧园区涉及到多类数字化场景应用,通过运行质量监控实现对多园区设施设备进行指标化管理,实现实时管控和预警管控的管理目标。

下面我们就用物联设备管理和园区态势分析两个场景来演示一下模板的正确打开方式。

02
模板下载安装



①模板下载

注册登录smardaten平台账号后进入应用商超,这里为我们提供了丰富的模板供免费使用(含80+大屏&组件&应用模板)。
下载好本次演示需要用到的大屏模板和组件模板,如下:


②大屏模板安装

在新建大屏时我们可以从空白页面开始搭建也可以基于模板创建,本次我们需要点击更多模板,上传已经下载好的智慧园区设备管理安装包,创建完成后保存预览。



③组件模板安装

组件是组成应用页面的元素,在使用之前我们需要先创建一个应用,搭建好导航菜单并创建同名页面。然后打开组件库上传下载好的组件模板。

在页面的布局上,smardaten平台提供了常用的布局模板,如多列布局、页签、折叠面板、容器等,若需要构建的页面相对复杂,可以选择操作灵活度较高的画布布局,更能满足个性化需求。

本次我们选用两列布局和页签布局,将已经上传的组件拖入布局里。

页面拼装完后效果如下:



④大屏集成

应用构建里支持大屏、分析仪图表、数据文档等多种形式组件的引用,可以将已经创建好的园区设备管理大屏插入到应用里相关的页面中来。

03
业务模型搭建

在整体页面拼装完成之后我们来完善各组件卡片里的具体内容。这里的组件模板均是采用灵活性高展示样式更为丰富的画布模式,包含画布卡片和列表画布


①画布卡片

操作简便,可以通过拖拽组件并绑定数据,快速形成数据看板。进入画布模板快速设计,可以对里面的字段名称进行增删改的操作,字段样式可用格式刷一键复制给新增字段,避免了在样式调整上的大量重复操作。
字段名称一般使用静态文本,而里面的数据内容则可以绑定系统中的业务资产数据



②列表画布

列表画布属于列表信息展示的形式之一,我们点击进入已经添加好的列表画布模板的高级开发模式,可以直观地看到列表所展示字段的详细配置。
同样这里可以根据自己的业务模型进行字段增删改的操作,切记这里选择插入字段组件时要采用与字段类型相符的组件,不可给需要展示文本类型的字段添加数据组件。

此外这里添加字段名称时一定要采用形状里的“文字”,保证名称是一个静态文本。

做完样式的设计之后我们需要给它绑定数据资产,这里可以选择绑定提前创建好的对应的数据资产,也可以一键生成一个新的数据资产。

如果列表数据需要根据某个字段的内容进行差异化展示,例如这里根据处理状态显示不同的状态标签,可以复制一块画布为它配置显示条件

通常情况下,园区的设备读数信息会由检验人员填报至系统,即这里需要构建与展示列表对应的填报表单,由于数据模型已经在列表处设计完成,我们可以添加一个表单组件,直接引用列表的数据模型一键生成表单,简单调整样式后即可。

在日熟练smardaten平台开发后,表单和列表的构建可以不分先后,通常会先构建表单为主

04
业务数据绑定

在大屏模板中,我们已经做好了各种图表和标题的样式配置,在业务场景相似的情况下可直接复用模板内容进行简单的修改后投入使用,这里主要涉及到标题的修改和图表数据绑定,再进一步就涉及到大屏交互动作配置,下面进入具体内容演示。


①标题修改

模板中的标题主要包含两种,一种是采用的静态文本,直接选中在数据属性栏进行修改即可,同时可自由调整样式,另一种是为了更好的视觉效果,上传绘制好的文字图片作为标题,由于修改灵活度较低,用的相对较少。



②业务数据绑定

模板中的指标卡和图表均采用的是静态数据,在使用时需要将它们替换成我们的业务数据,选中对应图表后再数据绑定模块选择资产数据→选定需要统计的资产数据表→拖拽相关字段到画板中→对数据纬度字段进行统计操作,这时点击确认即可在大屏上显示相应的图表。

需要注意的是我们拖拽的字段需符合该图表的数据指标要求。



③大屏交互

数据大屏支持配置丰富的交互效果,包括指标数据查询、图表轮播切换、下钻、条件筛选、GIS点位交互等。

例如我们想要查看GIS地图中的点位信息,可通过配置点位弹窗加以实现,同时可以给弹窗里的内容添加交互事件,实现进一步的数据查询or跳转。

GIS地图详细配置参见这篇玩转系类文章👈

推荐阅读
先人一步,体验更专业更好用的企业级无代码软件平台