使用AppCube制作学生成绩看板【AppCube X WeLink双剑合璧】

举报
静Yu 发表于 2022/03/06 22:44:34 2022/03/06
【摘要】 在这些应用当中,AppCube应用魔方作为一个低代码应用开发平台,独具特色。本篇文章简单介绍了其中一个功能,就是制作一个可视化大屏,非常好用。

产品简介

华为云WeLink,是企业数字化转型的联接器,源自华为19万员工的数字化办公实践,支持iOS、Android、Windows、MACOS四大系统,融合即时通讯、企业邮箱、视频会议、音视频通话、直播、云笔记、云空间、企业OA、考勤打卡、待办审批等服务,打造新一代智能工作平台、远程办公平台、移动办公平台、协同办公软件,高效连接企业的团队、业务、知识、设备,助力企业数字化转型,提升企业办公效率,降低运营成本。
在这些应用当中,AppCube应用魔方作为一个低代码应用开发平台,独具特色。AppCube源于华为应用开发和数字化转型的实践,提供了云上无码化、低码化、支持多码化的应用开发模式,屏蔽了技术的复杂性,提升了企业开发的效率。
作为一款可部署在WeLink上的低代码开发平台应用,AppCube提供了丰富的办公流程模板。比如绩效管理、健康打卡、职场性格测试、会议室预定、在线订餐等,你都可以直接拿来使用;当然,你更可以根据自己的需求,自发创立一些模板,为己所用。

产品体验

前言

我们都是从学生时代过来的或者现在就是学生,以前肯定自己做表格或者老师做表格分析过我们的考试成绩,现在计算机飞速发展,可以通过AppCube来制作一个成绩看板,更加直观的分析和查看我们的成绩。

创建项目

1.首先进入AppCube控制台,然后点击进入开发环境,进入之后出现下图的页面。
控制台地址:https://console.huaweicloud.com/appcube/?region=cn-north-4#/home
image.png
2.进入业务大厅之后,选择到项目,然后进入业务大屏。
image.png
3.进入之后就开始创建我们的项目,并为自己的项目起一个项目名称,名称随意。
image.png
新建成功之后,就可以看到我们的大屏项目了,现在项目是空空如也,因为我们还没有添加任何东西,我们接下来的工作就是“美化”我们的业务大屏。
image.png

大屏开发

1.第一步就是新建页面,进入之后我们可以在旁边看到预置模板和自定义模板,这就是我们系统给制作好的模板或者是我们之前工作所做好的模板。我们今天介绍的是如何制作一个业务大屏,所以我们这里选择空白页面;新建空白页需要起一个页面标题,还是随意。不得不说的一点是官方制作的这些模板还是相当漂亮的。
image.png
2.新建空白页之后我们先整体浏览一下,左侧就是一些组件,右侧是我们的操作面板。组件包括图表、媒体、地图、文本、装饰等等,比如图表就是官方制作好的一些小的图表,我们可以直接拿来使用,将左侧需要使用的图表拖动到右侧操作面板处就可以了,非常简单方便。
image.png
3.接下来就是我们最重要的工作了,制作我们的业务大屏。
(1)添加看板标题,找到文本组件下的文本编辑,将文本编辑拖动到右侧,然后点击文本框就可以开始更换文字了。这里演示的是编程比赛学生成绩。
image.png
(2)可以在左上角添加一个时间展示组件,选择文本框下的时间展示。还是点击组件选择配置进行个性化设置。
image.png
可以进行背景设置,挑选一张好看的背景图片上传,然后更换就可以了,进行年月日、时间、星期的设置。也可以进行宽度和高度的设置完全就是会根据你的整体布局进行设置的。
image.png
(3)添加一个表格,依旧老规矩进行属性的设置,数据系列1、数据系列2时进行数据列的添加和删除,或者是对字体颜色、字体大小等等的设置。
image.png
表格主要是进行表中数据的设置,按照图中箭头所示点击数据就会出现一些代码,数据内容如下:

{
  "dataValue": [
    {
      "date": "Alice",
      "amount": 202201,
      "series": "91",
      "category": "other"
    },
    {
      "date": "Jshon",
      "amount": 202202,
      "series": "88",
      "category": "general"
    },
    {
      "date": "Bob",
      "amount": 2022003,
      "series": "86",
      "category": "other"
    },
    {
      "date": "Jack",
      "amount": 202204,
      "series": "80",
      "category": "general"
    },
    {
      "date": "Jim",
      "amount": 202205,
      "series": "70",
      "category": "other"
    },
    {
      "date": "Alen",
      "amount": 202206,
      "series": "66",
      "category": "general"
    },
}

image.png
(4)添加一个实心圆饼图,了解一下学生的成绩分布情况。图形的设置我们应该已经很熟悉了,我们主要还是看一下数据的设置。

{
  "dataValue": [
    {
      "name": "成绩分布",
      "value": [
        {
          "value": 635,
          "name": "60以下"
        },
        {
          "value": 310,
          "name": "60-90"
        },
        {
          "value": 310,
          "name": "90以上"
        }
      ]
    }
  ]
}

image.png
(5)最后我们再添加一个多折线图了解一下学生的月成绩变化,横坐标是月份,纵坐标是成绩.

{
  "dataX": [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月"
  ],
  "dataValue": [
    {
      "title": "成绩",
      "value": [
        90,
        85,
        80,
        86,
        92,
        80,
        85,
        88,
        90,
        95,
        91,
        96 
      ]
    }
  ]
}

image.png

最终效果

最终的效果图,如下图所示,整体来说,简简单单,不是那么的美观,我们是来学习制作过程的(嘿嘿嘿,给自己找一个借口),确实制作过程就是这个样子。感兴趣的还是自己动手试一试,肯定做的比我的好看。
image.png

总结

DMAX是AppCube中的一款可视化大屏构建工具,提供了丰富的可视化组件、灵活的数据接入和AI识别页面布局构建能力,同时支持多屏。

  • 空白页面,从零开始。
  • 导入页面文件模板。
  • 使用预置或自定义模板。
  • AI识别上传图片(手绘图/高清图)。

除了可视化大屏之外,AppCube还有很多其他的功能,提供全场景可视化开发能力和端到端部署能力,可快速搭建行业和大型企业级应用并沉淀复用行业资产,加速行业数字化。非常好的一个工具,建议大家试一试。

【AppCube X WeLink双剑合璧】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/334492

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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

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