Astro Zero,业务人员也能实现 “机房温度监控大屏” 【华为云Astro低代码体验季】

举报
福州司马懿 发表于 2023/06/07 00:15:51 2023/06/07
【摘要】 假设你是安防公司的运维人员,你手头管理着不下10间的机房,它们分布在这个城市的不同地方。此时,你迫切的想要知道每间机房现在的温度是多少,空调是否正常运转一共有多少台服务器处于正常工作状态,多少台服务器宕机,要咋办呢?华为云 Astro Canvas大屏可以帮您轻松实现,通过拖拉拽实现应用,数据通过JSON进行配置,完全摆脱了业务人员对开发人员的依赖,使得编程小白也能轻松创建自己的应用

情景假设

你是安防公司的运维人员,你手头管理着不下10间的机房,它们分布在这个城市的不同地方。此时,你迫切的想要知道

  1. 每间机房现在的温度是多少,空调是否正常运转
  2. 一共有多少台服务器处于正常工作状态,多少台服务器宕机

==============================================

需求分析

你可不想每天跑一遍所有机房,最好像诸葛亮一样躬耕于南阳,但对天下事运筹帷幄。

图片.png

于是,你开始幻想,如果你有一个大屏,能自动捕获所有机房的数据。这样即使你在家中睡懒觉,一开电脑,不就对所有机房的运行情况一目了然了,就再也不用没事天天跑机房了。

想着想着,你就开始在脑海里构思,你想要的大屏该是怎么样的呢?

于是脑海里浮现出了一张草图

图片.png

==============================================

低代码平台

需求有了,功能实现草图也有了,摆在你面前的三座大山,已经有两座已经被你解决了

图片.png

剩下一座,也是最棘手的 —— 你只会做运维,不会写代码,该怎么创建出你想要的系统呢?

偶然间,你在朋友的推荐下,认识了华为云“Astro Zero低代码平台”,你惊呼,这不正是你想要的。通过零代码或低代码,就能实现一个完整的应用,开发效率甚至比专业的开发人员还要快。

下面就开始来创建这个系统

==============================================

开始设计系统

首先,进入华为云Astro Zero官网 https://z1zydblxb2.my.cn-north-4.appcubecloud.com/nocode/workbench.html#/

图片.png

切换到“应用开发”选项卡,然后鼠标移动到“业务大屏”,点击开始创建按钮

图片.png

创建项目

新建项目,给项目起名为“机房温度监控系统”

图片.png

在这里,点击左上角的“新建页面”

图片.png

在“预制模板”中可以看到,“办公室环境检测”这个模板,和我们所需要的大屏很像。点击“使用此模板”

图片.png

新建页面

点击“新建页面”按钮

图片.png

选择“办公室环境检测模板”,然后点击“使用此模板”

图片.png

输入标题,还是“机房温度监控系统”

图片.png

页面创建成功,界面如下

图片.png

修改标题

点击“配置”图标,文本改为“机房温度监控系统”

图片.png

修改天气信息

首先,将文本内容修改为“一周天气情况”

图片.png

然后,点击到一周具体天气这里,点击“数据源”图标

图片.png

这里,由于我们没有服务器,因此就只能选择“静态数据”。如果你有服务器或者数据库,可以选择其它选项

图片.png

静态数据源配置为JSON类型即可

{
    "dataValue": {
        "dataNow": {
            "temp": "26",
            "cityName": "福州市",
            "fxDate": "05/15",
            "fxWeek": "星期六",
            "text": "雨",
            "icon": "307",
            "fxTime": "12:10   pm",
            "humidity": "31",
            "pressure": "1004",
            "windSpeed": "13",
            "aqi": 128
        },
        "dataForecast": [{
                "fxDate": "05/15",
                "fxWeek": "星期六",
                "tempMax": "26",
                "tempMin": "15",
                "iconDay": "307",
                "textDay": "小雨"
            },
            {
                "fxDate": "05/16",
                "fxWeek": "星期日",
                "tempMax": "26",
                "tempMin": "16",
                "iconDay": "307",
                "textDay": "小雨"
            },
            {
                "fxDate": "05/17",
                "fxWeek": "星期一",
                "tempMax": "28",
                "tempMin": "19",
                "iconDay": "307",
                "textDay": "小雨"
            },
            {
                "fxDate": "05/18",
                "fxWeek": "星期二",
                "tempMax": "30",
                "tempMin": "16",
                "iconDay": "307",
                "textDay": "阴"
            },
            {
                "fxDate": "05/19",
                "fxWeek": "星期三",
                "tempMax": "23",
                "tempMin": "14",
                "iconDay": "307",
                "textDay": "雨间小雨"
            },
            {
                "fxDate": "05/20",
                "fxWeek": "星期四",
                "tempMax": "26",
                "tempMin": "13",
                "iconDay": "307",
                "textDay": "阵雨"
            },
            {
                "fxDate": "05/21",
                "fxWeek": "星期五",
                "tempMax": "20",
                "tempMin": "11",
                "iconDay": "307",
                "textDay": "大雨"
            }
        ]
    }
}

修改雾霾浓度预测面板

修改雾霾面板,标题改为“雾霾浓度”预测,横坐标改为时间,每半小时一格

{
    "resCode": "0",
    "resMsg": "成功",
    "result": [{
        "order": {
            "dataX": [
                "9:00",
                "9:30",
                "10:00",
                "10:30",
                "11:00",
                "11:30",
                "12:00",
                "12:30",
                "13:00",
                "13:30",
                "14:00",
                "14:30",
                "15:00",
                "15:30",
                "16:00",
                "16:30"
            ],
            "dataValue": [{
                "title": "雾霾浓度预测",
                "value": [
                    62,
                    60,
                    63,
                    72,
                    80,
                    68,
                    252,
                    60,
                    56,
                    158,
                    68,
                    92,
                    62,
                    56,
                    58,
                    60
                ]
            }]
        }
    }]
}

然后点击卡片,删除不必要的标题内容

图片.png

雾霾浓度单位是个文本框,调整下它的位置,置于合适的区域

图片.png

重做室内环境温度面板

该面板的数值统计柱状图,由6个分组组成。在任意一个分组右击,可以“解除分组”。解除分组后,我们可以看到每个分组都由以下几个部件组成

  1. 自定义背景框(坐标轴标题背景)
  2. 文本框(坐标轴标题)
  3. 文本框(水平柱状图描述)
  4. 水平柱状图(单个柱形)

图片.png

然后再看下原本的数据格式,可以发现,每个水平基本柱图,都要配置一个数值(如果后期改为报文请求,实在太麻烦了)

图片.png

因此,将其全部删除。从左侧拖拽一个“水平基本柱状图”进来

图片.png

修改柱状图数据为

{
    "dataX": [
        "中央机房",
        "北区机房",
        "南区机房",
        "东区机房",
        "西区机房",
        "郊区机房"
    ],
    "dataValue": [{
        "value": [
            26,
            23,
            24,
            32,
            20,
            18
        ]
    }]
}

点击按钮保存

图片.png

删除标题,然后背景色改为透明

图片.png

注意:这里有多个背景色,都要进行修改

图片.png

背景都改成透明后,看到还有个像卡片一样的悬浮效果没被删除。这个要点击“卡片”—>“卡片装饰”—>“清除样式”

图片.png

可以看到,最终的样式如下图(水平柱状图默认会根据数值的大小,由高到低进行排序,然后显示

图片.png

重做服务器运行情况面板

点击翻牌器的“配置”图标,将“单位内容”修改为“台”

图片.png

点击“数据”图标,将数值修改为 173

{
    "value": {
        "number": 173
    }
}

修改标题为“正常运作”

图片.png

同理,将第二个卡片修改为“服务器总数”,值改为“181”,单位“台”

图片.png

右击图形,选择解除分组

图片.png

删除第三个无用的卡片,和左侧两个饼图

图片.png

图片.png

修改标题文本框,点击“配置”按钮,将文本内容修改为“服务器运行情况”

图片.png

修改后的文本,由于字数与之前不同,位置也会发生偏差。这里需要手动调整 XY 的位置,并更改宽高

图片.png

然后添加一个“贪吃蛇饼图”

图片.png

点击“数据”图标,进行修改

图片.png

数据修改如下

{
    "dataValue": [{
        "name": "服务器运行情况",
        "value": [{
                "value": 173,
                "name": "正常运作"
            },
            {
                "value": 8,
                "name": "宕机"
            }
        ]
    }]
}

注意,两者相加等于饼图的100%,即上面配的都是饼图的各个块大小,它们加起来等于整个饼图大小

图片.png

点击“卡片”,删除这里的“标题内容”

图片.png

点击“卡片装饰”,然后选择“清除样式”,这样卡片底色就变透明了

图片.png

调整饼图位置。我这里后来又增加了一个卡片,用来显示宕机数(添加方式可以在已有的卡片上面右键,然后选择“复制并粘贴”

图片.png

图片.png

未成组的控件如下图,内部还存在多个控件。拖动时只能拖动单一控件

图片.png

为了整体移动,可以右键,然后选择“创建分组”,这样拖动时就不是单一控件被拖动,而是卡片内的所有控件被当成一个整体被拖动

图片.png

这是成组的控件

图片.png

移动好后,一个静态的“机房温度监控大屏”就做好了

图片.png

==============================================

预览

点击顶部的“预览”按钮,可以查看在浏览器上的实际显示效果

图片.png

图片.png

右上角可以改变主题样式

图片.png

现在有如下4种主题,可供选择

  1. 经典原始(即清除样式)
    图片.png
  2. 基础(蓝色调)
    图片.png
  3. 主题一(红色调)
    图片.png
  4. 主题二(黄色调)
    图片.png

修改完后要记得 “Ctrl + S”保存页面

下载页面

顶部工具栏提供了一个“下载当前页面”的按钮

图片.png

下载好后是一个 *.page 文件,打开该文件可以看到,文件内容是一堆乱码(说明页面配置代码已被加密

图片.png

页面配置

顶部工具栏还有一个页面配置按钮,在这里你可以配置页面的大小信息、页面颜色、适应方式等

图片.png

发布应用

发布应用是一个小飞机的图标,点击发送应用后,会提示你“当链接被发布后,可能会有被转发、截屏等信息安全风险”,并询问你是否发布链接

图片.png

打开发布链接的开关,对话框会立即更新,并展示出分享的URL链接

图片.png

点击该链接就可以跳转到项目展示页了,连服务器都不用搭,非常适合业务人员使用,非常方便!

图片.png

结束语

作为一名不懂编程的业务人员,跟着本文实践下来,你会发现 —— 即使不懂代码,居然也能实现一个静态的应用大屏,真是太神奇了。

没错,这就是华为云 Astro Canvas大屏应用设计巧妙的地方,通过拖拉拽实现应用,数据通过JSON进行配置,完全摆脱了业务人员对开发人员的依赖,使得编程小白也能轻松创建自己的应用。

此外,为了让开发更轻松,Astro还内置了众多的模板,大部分情况下,只需要在原有模板基础上进行修改即可实现需求。

我正在参加【有奖征文 第22期】华为云Astro低代码体验季,输出优质文章,赢开发者大礼包!
https://bbs.huaweicloud.cn/blogs/397241

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。