1024节使用应用魔方做个航天飞船控制台大屏丨【玩转应用魔方】

AppCube概述

AppCube是一个高效易用的低代码开发平台，它可以进行轻应用，行业应用，业务大屏开发，云端可视化页面编排，支持多端适配，一键发布等功能，可以让业务人员直接构建应用。

轻应用开发主要是可以使用内置模板（办公管理，人事管理，项目管理等）进行开发，也可以自定义页面编排开发业务场景，数据流和业务流程编排简单，支持多端使用。

行业应用主要是面向园区、城市、交通等应用解决方案，实现端到端、监控告警数字化场景，助力企业的应用、资产视图高效构建，提升企业效益。

业务大屏主要可视化开发，可以自由组合使用图表，文字，媒体，地图，仪表盘，导航等组件，支持多种数据源，支持多端发布，多种部署方式，帮助企业快速构建业务大屏应用。

AppCube大屏开发

这次我们就使用业务大屏功能开发一个飞船控制台，图片的资源文件华为云已经为我们提供了，也可以自己去找一些素材进行个性化开发。

打开AppCube平台

地址：https://www.huaweicloud.com/product/appcube.html

点击“立即使用”

如果未开通，请先免费开通试用，如果已经开通，点击“进入开发环境”。

这里就进入了开发环境，在“项目”里可以看到有轻应用、行业应用、业务大屏等开发，也可以去“学习中心”去学习提供的一些案例知识。

点击“业务大屏”，进入后就可以进行创建项目，也可以打开原有开发好的项目。还可以在“系统教程”里面学习提供的案例开发。

这里面的“数据中心”是用来配置管理数据源，自定义数据集，方便图形组件使用的数据。

点击“新建项目”，输入标签和名称，点击“新建”就进行入了项目开发页面。

点击左侧“+”，点击“新建页面”，可以“选择创建空白页”创建；也可以使用AI，通过一个绘制的大屏设计图自动识别创建；还可以选择预置的模板进行创建。

页面创建完成后，就进入了拖拽，配置，保存，发布等开发环节。

注意看项目名称旁边的①返回上一级页面②打开组件列表③获取项目锁，页面处于非编辑。③左侧有设置，③右侧还有释放项目锁，保存，发布，预览功能，都是需要使用的。

打开组件列表会看到有图表，媒体，地图，文本，装饰，仪表盘，导航，其它等组件，可以随意拖入中间页面编辑区进行排版。

右侧页面设置，可以进行屏幕大小，背景图片和颜色设置。

一个好的大屏设计，更多的需要好的图片素材和颜色搭配，本次用到的图片素材比较多，拖入矩形装饰，文字装饰，边框装饰，发现设置背景的图片链接，只能使用网络链接地址，不支持本地上传图片，只有页面的背景支持本地上传。

OBS发布图片链接

图片链接地址，如果使用本地素材如何才能使用，1.要不自己有个云服务器，发布个图片站点；2.使用华为云的对象存储服务（OBS）。

简单介绍使用OBS来使用图片资源

打开OBS

https://console.huaweicloud.com/console/?region=MOS#/obs/manager/buckets

点击“创建桶”，填写桶名称，选择单AZ存储，点击“立即创建”

桶列表里面点击创建好的桶名称“obs-imgs”，打开以后点击左侧“对象”，然后点击“上传对象”。

点击图片名称，打开后就可以看到链接地址了。

如果链接无法访问，可以在左侧“访问权限控制”里面进行权限配置，添加一个桶策略。

大屏开发设置

矩形装饰

用来设置背景图，可以用来显示图标，以及其他一些组件的底部显示背景。

边框装饰

可以用来设置边框的样式，右侧组件设置，属性标签可以设置背景、颜色、样式等内容。组件右键“高级设置”可以选择参考模板。

文本编辑

用来显示文字内容，可以设置文字大小，颜色，位置等属性。

进度条

用来显示进度组件，右侧组件设置，属性标签可以设置位置，边框，背景，特性等内容；数据标签可以配置数据源，静态数据等内容。组件右键“高级设置”可以设置标题，XY轴，数据系列等内容。

水位图

用来显示水位效果的百分比图形，右侧组件设置，属性标签可以设置模板，标题，边框圆角，数据系列等内容；数据标签可以配置数据源为静态数据等内容。组件右键“高级设置”可以设置模板，背景颜色，阴影，边框等内容。

点击右上角“发布”， “预览”，就可以看到效果图。

预览效果图

温馨提示

文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~

文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。

【玩转应用魔方】有奖征文火热进行中：https://bbs.huaweicloud.com/blogs/306271

应用魔方 AppCube 控制台

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除侵权内容。