一步一步教你使用AppCube应用魔方创建业务大屏应用

举报
lwq1228 发表于 2021/09/26 22:05:06 2021/09/26
【摘要】 一步一步教你使用AppCube应用魔方创建业务大屏应用

一、创建项目

1、打开AppCube官网

https://www.huaweicloud.com/product/appcube.html

2、点击“立即使用”按钮进入AppCube控制台

3、点击“进入开发环境”按钮进入开发环境如下

4、选择“项目”标签下的“业务大屏”进入项目列表页面

5、点击“新建项目”按钮

6、输入“标签”和“名称”,点击“新建”按钮

7、项目创建成功后,自动进入项目开发环境,至此项目创建完成

二、开发看板页面

1、创建页面

(1)点击左侧目录的加号,选择新建页面

(2)新建页面可以选择内置的业务大屏模板,也可以选择空白页,博主这里选择空白页

(3)输入页面标题,点击“创建”按钮

(4)创建完成后会直接打开新建的页面,后续在该页面进行编辑开发

2、页面素材图片准备

笔者用的所有素材图片如下,部分来自作业截图的抠图,部分图标来自于iconfont网站。

(1)标题背景图

(2)产量表格背景图

(3)时间图标

(4)化工图标

(5)热电图标

(6)水泥图标

3、业务大屏看板开发

以上准备工作已经完成,接下来可以逐步开始对业务大屏内容进行开发。

3.1、修改页面背景图

页面编辑窗口右侧背景图片处,点击查看全部即可显示所有内置的大屏背景图片,选择一个适合自己的即可

笔者这里选择如下图所示:

3.2、添加看板标题

(1)点开编辑界面的组件列表选项卡,选择图片组件和文本编辑组件拖动到页面上

(2)选中图片,鼠标右键,选择高级设置,设置图片背景及位置相关属性值

(3)弹出窗口点击选择图片按钮上传背景图片

(4)上传对应背景图片后选中,并点击确定按钮,返回后继续确定回到编辑界面,图片修改完成

(5)选中图片组件,在右侧属性窗口设置其属性值,主要设置宽高、位置,对应属性值如图

(6)修改文字编辑组件对应属性

文本格式设置如图:

3.3、界面左侧开发

3.3.1、时间组件

(1)界面添加时间展示组件

(2)设置时间展示组件的位置属性

(3)选中时间展示组件,鼠标右键,选择高级设置,设置时间展示组件的组件属性

设置标题不显示,设置年月日、时间、星期字体大小为28,字体颜色为白色,设置背景颜色和时间条颜色为透明色,配置如图:

这里只截取年月日的属性配置图,时间和星期的同年月日配置一致,背景颜色和时间条颜色直接将透明度设置为0即可。

(4)添加一个图片组件,用于显示时间图标(上传及修改图片的参考2.1即可,这里不再赘述),图标大小及位置属性如下

(5)整体时间部分效果如图

3.3.2、产量表格

(1)、添加表格背景图,属性配置如图

(2)添加产量表格,拖拽通用表格组件到界面

(3)设置表格位置及大小属性

(4)设置表格数据属性(右侧选择数据选项卡,桥接器实例选择表格桥接器,数据类型选择静态数据)

数据内容如下:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "order": {
        "dataValue": [
          {
            "output": "PVC",
            "outputDay": 20,
            "outputMonth": 632,
            "finishRate": 88
          },
          {
            "output": "烧碱",
            "outputDay": 18,
            "outputMonth": 588,
            "finishRate": 91
          },
          {
            "output": "盐酸",
            "outputDay": 19,
            "outputMonth": 603,
            "finishRate": 89
          },
          {
            "output": "水泥",
            "outputDay": 31,
            "outputMonth": 698,
            "finishRate": 94
          }
        ],
        "total": 4
      }
    }
  ]
}

(5)设置表格内容属性(选中表格组件鼠标邮件高级设置),配置如图(未截图的采用默认即可)

表格行数改为4:

表头行高占比改为15%,背景色改为rgba(6, 53, 134, 0.5)

行配置奇偶行背景色均改为透明:

序列号改为不显示:

数据映射的列与数据内容定义的属性值做对应:

每一个属性列进行如下相同配置:列名分别改为产量、日产量、月产量和月计划完成率,字号改为18,字体颜色改为rgba(0, 106, 255, 1)

3.3.3、分割线一

(1)添加分割线组件,并设置位置及大小

(2)组件高级设置,设置分割线样式(选择模板5,并设置颜色为rgba(0, 106, 255, 1)

后续分割线均采用以上这个分割线,知识位置和大小略有不同。

3.3.4、水位图

(1)拖拽水位图到界面

(2)配置水位图大小及位置属性

(3)配置水位图数据属性

数据内容如下:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "PV合格率",
          "value": [
            {
              "value": 0.96,
              "name": ""
            }
          ]
        }
      ]
    }
  ]
}

(4)水位图显示属性高级设置(未截图采用默认设置)

选择蓝色带标题模板:

数据系列-图表形状直径改为90%:

水波颜色改为rgba(2, 174, 83, 1),水波背景色改为透明,波纹振幅改为10,显示双波纹改为关闭:

标签位置上偏移改为36%:

标签文字字体大小改为24,字体系列改为Din-Light:

轮廓样式如下:起始颜色rgba(2, 171, 95, 1),结束颜色rgba(3, 164, 136, 1)

显示图表标题为各系列名称:

(5)其他三个水位图通过复制第一个水位图得到,分别配置其数据及第三个的颜色即可

(6)烧碱合格率水位图配置

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "烧碱合格率",
          "value": [
            {
              "value": 0.83,
              "name": ""
            }
          ]
        }
      ]
    }
  ]
}

位置及大小:

(7)盐酸合格率水位图配置

水波颜色rgba(178, 22, 75, 1)

轮廓样式渐变色:起始颜色rgba(178, 32, 95, 1),结束颜色rgba(178, 22, 75, 1)

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "盐酸合格率",
          "value": [
            {
              "value": 0.56,
              "name": ""
            }
          ]
        }
      ]
    }
  ]
}

位置及大小:

(8)水泥合格率水位图配置

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "水泥合格率",
          "value": [
            {
              "value": 0.94,
              "name": ""
            }
          ]
        }
      ]
    }
  ]
}

位置及大小:

3.3.5、分割线二

复制3.3.3分割线,调整位置即可

3.3.6、原料库存柱状图

(1)拖拽基本柱状图到界面

(2)修改数据属性

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "order": {
        "dataX": [
          "电石",
          "原煤",
          "原盐"
        ],
        "dataValue": [
          {
            "title": "30天内",
            "value": [
              60,
              70,
              70
            ]
          },
          {
            "title": "30天外",
            "value": [
              55,
              43,
              85
            ]
          }
        ]
      }
    }
  ]
}

(3)修改柱形图显示高级属性

修改系列一颜色为rgba(84, 83, 252, 1)

添加系列2并修改系列2柱状图颜色为rgba(0, 169, 240, 1)

删除x轴坐标轴名称:

设置x轴柱间距为15:

删除y轴坐标轴名称:

设置标题不显示:

设置图例属性:

(4)设置柱状图位置及大小

(5)由于柱状图自带的标题与图例不在一行上,所以这里使用一个文本作为柱状图标题(字体大小为14px,颜色为白色)

大小及位置如下:

3.3.7、产品库存柱状图

添加方式同3.8一致,仅位置信息及数据内容不一样:

(1)配置标题位置及文字内容

(2)配置柱状图位置及数据内容

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "order": {
        "dataX": [
          "PVC",
          "烧碱",
          "盐酸",
          "水泥"
        ],
        "dataValue": [
          {
            "title": "30天内",
            "value": [
              78,
              62,
              62,
              62
            ]
          },
          {
            "title": "30天外",
            "value": [
              53,
              50,
              88,
              88
            ]
          }
        ]
      }
    }
  ]
}

位置及大小:

3.4、界面中间开发

3.4.1、地图

(1)拖拽地图控件到界面

(2)修改地图数据中的地图配置,选用静态数据

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "mapType": "BAIDU_MAP",
      "viewMode": "2D",
      "longitude": 102,
      "latitude": 35,
      "zoomLevel": 5,
      "mapStyle": "blue"
    }
  ]
}

(3)修改地图大小及位置

3.4.2、产量表格

(1)复制左侧的产量表格

(2)修改表格绑定的数据如下

{  "resCode": "0",  "resMsg": "成功",  "result": [    {      "order": {        "dataValue": [          {            "output": "PVC",            "dayOrder": 16,            "monthOrder": 350,            "daySale": 13,            "monthSale": 280,            "daySend": 10,            "monthSend": 250          },          {            "output": "烧碱",            "dayOrder": 15,            "monthOrder": 280,            "daySale": 11,            "monthSale": 260,            "daySend": 9,            "monthSend": 200          },          {            "output": "盐酸",            "dayOrder": 19,            "monthOrder": 310,            "daySale": 17,            "monthSale": 250,            "daySend": 13,            "monthSend": 220          },          {            "output": "水泥",            "dayOrder": 22,            "monthOrder": 379,            "daySale": 16,            "monthSale": 320,            "daySend": 19,            "monthSend": 310          }        ],        "total": 4      }    }  ]}

(3)修改表格高级设置内容的数据映射部分,参照3.3.2修改列绑定及标题内容

修改表头行高占比14%,字体为16:

修改字号为16,列宽占比(第一列:14.2%,中间列14.3%,最后一列14.5%):

(4)修改位置及大小

3.4.3、仪表盘

(1)拖动仪表盘组件到界面

(2)修改仪表盘数据属性

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "PVC完成率",
          "data": [
            {
              "value": 96
            },
            {
              "value": 96
            }
          ]
        }
      ]
    }
  ]
}

(2)修改仪表盘显示高级设置

设置标题不显示:

单位设置为空,区间范围0到100,分段个数为10个:

仪表盘轴线宽度改为2,阴影颜色透明,阴影大小改为0,三个颜色位置分别为0.2、0.8、1:

详情(用来显示数据)配置字体颜色rgba(28, 204, 215, 1),阴影、边框及背景色均设置为透明:

刻度标签阴影设置为透明:

刻度样式阴影设置为透明:

分割线阴影设置为透明:

(3)设置仪表盘大小及位置

(4)设置仪表盘下方标题(使用文本组件设置)

文字大小16px,位置及大小如图:

(5)其他三个仪表盘配置方式同上,只是数据内容及位置不同

(6)烧炭完成率仪表盘

标题位置:

距离左侧:806像素距离上侧:1020像素

仪表盘位置:

距离左侧:764像素距离上侧:840像素

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "P烧炭完成率",
          "data": [
            {
              "value": 82
            },
            {
              "value": 82
            }
          ]
        }
      ]
    }
  ]
}

(7)盐酸完成率仪表盘

标题位置:

距离左侧:997像素
距离上侧:1020像素

仪表盘位置:

距离左侧:956像素
距离上侧:840像素

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "盐酸完成率",
          "data": [
            {
              "value": 79
            },
            {
              "value": 79
            }
          ]
        }
      ]
    }
  ]
}

(8)水泥完成率仪表盘

标题位置:

距离左侧:1187像素
距离上侧:1020像素

仪表盘位置:

距离左侧:1146像素
距离上侧:840像素

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "水泥完成率",
          "data": [
            {
              "value": 91
            },
            {
              "value": 91
            }
          ]
        }
      ]
    }
  ]
}

(9)至此完成效果如图

3.5、界面右侧开发

3.5.1、翻牌器

(1)拖拽翻牌器组件到界面

(2)设置翻牌器数据

{  "value": {    "number": 456.888  }}

(3)设置翻牌器样式

设置数字大小为30,数字背景色为rgba(0, 39, 122, 1),数字间隔为3,

不显示千分号,显示标题,标题内容为“应收金额”,标题颜色rgba(0, 106, 255, 1),标题大小为28:

(4)设置位置及大小

(5)设置应用额(直接复制应收金额组件,修改标题内容和位置即可)

3.5.2、分割线三

复制3.3.3分割线,调整位置即可

3.5.3、金额表格

(1)拖动底纹组件到界面

(2)调整底纹组件大小及位置

(3)拖动矩形装饰组件到界面

(4)调整矩形装饰组件高级设置

修改渐变背景色:渐变方向改为向右,颜色1改为rgba(0, 137, 164, 0.5),颜色2改为rgba(2, 22, 55, 0.6)

边框设置关闭圆角:

(5)调整矩形装饰组件位置及大小

(6)将上述矩形装饰组件复制两个,分别调整位置如下

(7)拖动文组件到界面,修改内容、样式及大小位置(文字大小为24px,字体颜色为白色)

(8)将上述文字复制两个,分别调整内容及位置如下

(9)拖动图片组件到界面,并设置图片及大小和位置

(10)将上述图片复制两个,分别设置图片、大小及位置如下

(11)添加分割线四

设置分割线使用模板七,设置位置及大小如下

(12)添加应收额行数据

标题字体大小20px,字体颜色白色,组件大小及位置:

数值字体大小20px,字体颜色#018BD6,组件大小及位置:

复制上述数字文本组件,设置其位置如下:

(13)添加应用额行数据

配置方式同12,除数字部分颜色不同及位置不同外,其他样式与上述组件一致。

标题位置:

数字颜色#00A550,数字位置配置如下:

3.5.4、饼状图

(1)添加渐变色饼图到界面

(2)修改饼图数据属性

数据内容如下:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "金额",
          "value": [
            {
              "value": 64.29,
              "name": "30天内"
            },
            {
              "value": 35.71,
              "name": "30天外"
            }
          ]
        }
      ]
    }
  ]
}

(3)修改饼图显示的高级设置

组件标题设置不显示:

数据系列半径修改如下:

数据系列圆心坐标修改如下:

扇区展现修改如下:

图形样式修改如下:

数据项展现-数据项1配置如下(起始颜色rgba(27, 147, 255, 1),结束颜色rgba(90, 211, 250, 1)):

数据项展现-数据项2配置如下(起始颜色rgba(41, 70, 92, 1),结束颜色rgba(41, 70, 92, 1)):

图例设置不显示:

设置图例大小及位置:

(4)将上述设置的饼图复制两份,修改其位置属性,改后如图

(5)修改中间饼图的高级设置中的图列属性

(6)完成效果如图

3.5.5、分割线五

复制3.3.3分割线,调整位置即可

3.5.6、区域图

(1)拖拽区域图组件到界面

(2)修改区域图数据属性

数据内容:

{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "order": {
        "dataX": [
          "9/01",
          "9/02",
          "9/03",
          "9/04",
          "9/05",
          "9/06",
          "9/07",
          "9/08",
          "9/09",
          "9/10"
        ],
        "dataValue": [
          {
            "title": "原盐单价",
            "value": [
              9,
              5,
              6,
              3,
              15,
              24,
              15,
              24,
              22,
              20
            ]
          }
        ]
      }
    }
  ]
}

(3)修改区域图高级设置

渐变色颜色1:rgba(63, 117, 255, 1),渐变色颜色2:rgba(5, 203, 246, 1)

拐点颜色:渐变色1rgba(30, 87, 244, 1),渐变色2rgba(12, 241, 249, 1),区域渐变色1rgba(63, 117, 225, 0.6),区域渐变色2rgba(91, 226, 255, 0.2)

设置x轴标题不显示:

x轴轴线配置如下(颜色rgba(1, 140, 200, 0.3),文本颜色rgba(255, 255, 255, 1)):

网格线设置不显示:

关闭刻度标签间隔:

设置y轴标题不显示:

y轴坐标轴最小间隔大小修改为0:

y轴轴线设置如下(颜色rgba(1, 140, 200, 0.3),文本颜色rgba(255, 255, 255, 1)):

设置图表标题属性如下:

设置图列不显示:

(4)设置区域图大小及位置

(5)将原盐单价区域图复制两个,分别修改标题及位置即为煤炭单价区域图和石灰石单价区域图,两个区域图位置信息如下

煤炭单价区域图位置:

石灰石单价位置:

4、最终效果

至此能源化工管理看板界面开发完成,整体开发效果如下图所示:

整体运行效果如下图所示:

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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

举报
请填写举报理由
0/200