「燃气监控流程图Demo APP」--supOS低代码开发(for supOS v3.0)

1. 课程简介

本次课程主要通过搭建Demo APP(燃气监控-流程图)的过程讲解如何在supOS平台通过组态开发与少量脚本服务设计创建一个APP；

课程视频：立即查看>>

2. 课程适配范围

supOS版本：v3.0.0

3. 详细介绍

通过之前的课程中，有提到过supOS低代码开发的基本介绍，其中有APP开发流程图说明以及对象建模和组态页面开发流程说明。

「流程图展示」

工艺流程图主要利用图形符号的表达方式，能够十分清晰明了的表达工艺流程中各部分原件的结构以及工艺的运行过程，将针对工艺流程图，进行案例说明，如何结合对象模板/实例/属性以及页面组态加低代码开发APP（例：燃气监控-流程图APP）。

要实现流程图中数据的显示，前提采集好流程图中需要的数据；

功能一：对象模型建模

步骤1：搭建对象模型

实现工厂的车间、设备、产品和物料等生产单元的数字化建模。根据工厂中的动设备（如压碎机、加热炉等）和静设备(如储罐等）不同特性进行建模，实现设备的静态属性、运行状态的统一管理和融合应用。

在[对象模型管理/对象模板]菜单下，选择一个模板作为父模板，点击 “+”，在该模板下创建一个新的对象模板，自动继承父模板。

• 对象名称：对象模板名称，用户可自定义修改；

• 父模板：自动显示创建模板时选中的父模板，不可手动修改；

• 别名：用于对象模板唯一标识，别名自动生成，可根据对象模板信息自行修改定义其含义；

步骤2：创建对象实例

1) 选择一个实体模板（例：仪表），点击对象实例信息界面的按钮，展开对象实例基础信息；

2) 输入对象实例的基础信息；

• 对象实例名称：用户可自定义修改，本章节以“压缩机”为例；

• 父模板：在创建实例时选择的模板作为该实例的父模板，在此处不可更改；

• 别名：用于对象实例唯一标识，别名自动生成，可根据对象实例信息自行修改定义其含义，在工厂中一般可与位号一致。例如“DJ_01”；

• APP：用于对象实例的分类，如果通过某个APP创建的对象实例，该对象实例会关联相应的工业APP标签。在平台端新建对象实例，该对象实例默认为system；在APP设计器内新建对象实例，该对象实例默认属于该APP；

3) 配置属性：选择对象实例中的“属性”菜单，显示已有“我的属性”以及继承的“其他属性”；

• 我的属性：当前对象实例创建的属性，可进行新建、迁移、复制以及删除操作；

• 其他属性：父模板或功能集合继承的属性，信息不可编辑；

在“我的属性”下点击创建新属性，配置属性信息；

• 名称：对象实例属性名称，用户可自定义修改。例如：“流量”；

• 别名：用于对象实例属性唯一标识，别名自动生成，可根据对象实例属性信息自行修改定义其含义；

• 类型：对象实例属性值所属数据类型，应与源数据类型一致；类型选择Integer、Long、Float、Double型等数值型，页面显示量程属性；选择非数值类型无量程属性；

• 数据来源：将实例属性字段与其他属性字段进行关系绑定；

• 读写状态：配置对象值的读写状态。选择“只读”，则属性值是静态的，无法写入值。若需要对值进行修改，唯一方式就是更改默认值；选择“读写”，该属性值可在脚本逻辑中被重写；

• 持久化：如果勾选该选项，则当这个属性值发生变化后会将最新值保存到supOS系统中；

• 历史：如果勾选该选项，则将这个属性值发生变化记录到supOS系统中，以供查询或分析；

功能二：页面组态及绑定数据源

步骤1：流程画面操作流程

双击页面区域进入组态界面，在[组件库/图元库]选中图形、数据连接、文本，在画布上按住鼠标进行拖拽或单击，图形按照拖动区域调整大小，在右侧配置区配置图形参数，将图形按照设备工艺流程图排列，将设备图形化展示；

步骤2：绑定数据源

选中图元库中的“数据连接”，点击页面区域，弹出“数据连接属性配置”，在对象选择器中找到对应的属性值，配置成功后，确认保存；

同类，点击组态中分液罐液位控件（矩形），双击该控件，填加数据源和配置属性，确认保存预览；

功能三：按钮启停控制加热炉

步骤1：上传图片

点击[表单库/图片]，在上传图片位置上传所需图片，拖动画出合适大小页面。

步骤2：添加按钮及单击事件

添加导出按钮，编辑其属性，添加单击事件，并编辑脚本，运行期点击该按钮，即可控制加热炉启停。

关闭脚本： document.getElementById('htDiv-kdr2kyx40-26510').style.visibility = 'hidden';

打开脚本： document.getElementById('htDiv-kdr2kyx40-26510').style.visibility = 'unset';

步骤3：添加交互时间

点击[交互/事件/内容加载]，在脚本位置填写脚本；

内容加载脚本：

function aa() {
    var params={
        "propName":'wendu'
    }
    //  console.log("111");
     scriptUtil.callFunction('jinmei_liuchengtu.yibiao/Jiarelu', 'getPropertyValue',params).then(function(res){
        // console.log("111");
        console.log(res.data);

        var result = res.data;
        if(result < 5) {
            document.getElementById('htDiv-kdr2kyx40-26510').style.visibility = 'hidden';
        } else {
            document.getElementById('htDiv-kdr2kyx40-26510').style.visibility = 'unset';
        }
    });
}
aa();
setInterval(() => {
  aa();
}, 2000);