跳到主要内容

简单加法计算案例

场景描述

使用公式编辑器组件或 Vs Code组件 创建一个自定义组件,该组件可实现数值的相加,输入两个数值后,输出运算结果

方法一

使用“公式编辑器”组件

  1. 依照下图,从左侧“内置组件”栏中拖出,定时触发、数字、公式编辑器组件,其中
    1. 定时触发组件:可实现手动或自动触发流计算的功能
    2. 数字组件:用来产生测试数字
    3. 公式编辑器组件:对字符串或数字进行匹配、比较、计算等逻辑判断,输入数据也接受Json对象或csv文件,具体组件[使用介绍](https://xuelangyun.yuque.com/docs/share/df2aa23a-f345-42ce-a496-7a6117111e62?# 《公式编辑器使用说明》)
  2. 将公式编辑器的数据接收方式,改为“同步接收”
  3. 点击右上角,运行模板

image.png image.png

  1. 对两个数字组件分别设置测试数值

image.png image.png

  1. 对 公式编辑器组件 的公式编辑区进行如下编辑,即 将两个变量相加,点击【确认】
  2. 此时,当上游节点传来数据,公式编辑器组件则会产生 out1 的计算结果,即 2+5 = 7

image.png

方法二

使用“Vs Code”组件

1、从后面板中拖入一个vscode组件,用于进行加法运算,从前面板中拖入两个输入框组件,用于输入数值,再从前面板拖入一个文本组件,用于显示计算结果,按照数据流通关系连线,部署后打开代码编辑面板 image.pngimage.png2、打开main.py文件,编辑代码调试脚本 image.png

import suanpan
from suanpan.app import app
from suanpan.app.arguments import Int
from suanpan import g

g.in1 = None
g.in2 = None

@app.input(Int(key="inputData1"))
@app.input(Int(key="inputData2"))
@app.output(Int(key="outputData1"))
def HelloWorld(context):
args = context.args

# Custom Code Here.

if args.inputData1:
g.in1 = args.inputData1
if g.in2:
return g.in1+g.in2
else:
g.in2 = args.inputData2
if g.in1:
return g.in1+g.in2


if __name__ == "__main__":
suanpan.run(app)

3、运行编辑完成的脚本,依次点击左上角菜单栏—termina—new terminal image.png 输入./run.sh回车,运行脚本image.png 这样一个简单的加法运算组件就完成了

4、回到算盘的画布,点击前面板跳转链接image.png 在前面板输入框中输入数值,即可得出计算结果image.png tips:可以根据已有加法案例,衍生开发出减法、乘法、除法组件,下面将以除法组件的开发为例。
除第2步外,所有流程都与上述加法教程相同,若要修改为除法,只需在代码编辑页面进行以下操作
将此处的加号+修改为除号/,减法、乘法同理(运算符号:+、-、*、/) image.png 源代码如下:

import suanpan
from suanpan.app import app
from suanpan.app.arguments import Int
from suanpan import g

g.in1 = None
g.in2 = None

@app.input(Int(key="inputData1"))
@app.input(Int(key="inputData2"))
@app.output(Int(key="outputData1"))
def HelloWorld(context):
args = context.args

# Custom Code Here.

if args.inputData1:
g.in1 = args.inputData1
if g.in2:
return g.in1/g.in2
else:
g.in2 = args.inputData2
if g.in1:
return g.in1/g.in2


if __name__ == "__main__":
suanpan.run(app)

5、除法组件开发完成后,可以结合加法组件搭建一个简单的先加法再除法的运算,如(15+25)/5
后面板组件如图 image.png 前面板展示如图,直接在输入框输入数值即可得出运算结果 image.png