- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

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

福州司马懿发表于 2023/06/07 00:15:51 2023/06/07

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

情景假设

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

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

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

需求分析

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

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

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

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

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

低代码平台

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

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

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

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

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

开始设计系统

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

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

创建项目

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

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

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

新建页面

点击“新建页面”按钮

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

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

页面创建成功，界面如下

修改标题

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

修改天气信息

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

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

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

静态数据源配置为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
                ]
            }]
        }
    }]
}

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

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

重做室内环境温度面板

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

自定义背景框（坐标轴标题背景）
文本框（坐标轴标题）
文本框（水平柱状图描述）
水平柱状图（单个柱形）

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

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

修改柱状图数据为

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

点击按钮保存

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

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

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

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

重做服务器运行情况面板

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

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

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

修改标题为“正常运作”

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

右击图形，选择解除分组

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

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

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

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

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

数据修改如下

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