一、创建项目

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、最终效果

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

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