跳到主要内容

操作按钮

本节主要介绍 AppStudio 控件库里的操作按钮控件。

该控件的主要作用包括：

  • 作为 FuncStudio 函数资源开始/停止事件的触发按钮；
  • 作为 EMTLab 模型资源实时电磁暂态仿真任务运行事件的触发按钮，支持实时仿真的开始/停止、停止/恢复、开始/停止录波等多类型的操作。
操作按钮控件
操作按钮控件

属性​

CloudPSS 提供了一套统一的控件属性参数

通用样式​

参数名键值 (key)单位备注类型描述
是否隐藏hidden选择是否隐藏控件选择选择隐藏或者显示，隐藏当前控件，或者显示当前控件，默认为显示状态
透明度style/opacity输入透明度常量输入透明度值，控件按照透明度值变化，范围为0~1 ，默认为 1

样式​

参数名键值 (key)单位备注类型描述
大小size选择样式大小选择样式大小：S、M、L、XL，默认为 M
安静quiet选择是否安静选择选择是或者否，默认为否状态
强调emphasized选择是否强调选择选择是或者否，默认为否状态

文本样式​

参数名键值 (key)单位备注类型描述
文字字体style/font-family选择文字字体选择标签文字字体样式，字体类型包括：默认、宋体、黑体、楷体、微软雅黑、Georgia、Palatino Linotype、Times New Roman、Arial、Arial Black、Verdana、Courier New、Trebuchet MS
文字间距style/letter-spacing输入文字间距常量文字间距
文字字号style/font-size输入文字字号常量输入文字字号
文字颜色style/color选择文字颜色颜色选择器点击文字颜色，弹出颜色选择器自定义颜色
文字粗细style/font-weight选择文字粗细选择选择标签文字粗细，默认、100、200、300、400、500、600、700、800、900、1000

边框样式​

参数名键值 (key)单位备注类型描述
边框圆角半径style/border-radiuspx、cm、em、rem输入边框圆角半径常量输入边框圆角半径
边框宽度style/border-widthpx、cm、em、rem输入边框宽度常量输入边框宽度
边框颜色style/border-color输入框常量输入边框颜色
边框类型style/border-style边框类型选择边框类型分为：默认、无边框、虚线边框、实线边框、双重边框、3D 沟槽边框、3D 脊边框、3D 突出边框、3D 嵌入边框，默认为实线边框

内容​

参数名键值 (key)单位备注类型描述
文本innerText按钮控件文本内容常量按钮控件文本内容，默认为：Click Me!
链接href按钮控件链接常量按钮控件链接
文件名download下载文件的保存名称常量仅用作下载按钮时，下载文件的保存名称，默认为空
目标target超链接常量超链接打开的位置：_blank 表示在新窗口打开；self 表示在当前窗口打开；默认为 _blank
禁用disabled禁用开关开关禁用选择开或者关，开启后控件禁止点击和交互，默认为关
自动切换toggles自动切换开关开关自动切换选择是或者否，默认为否
选中selected选中开关开关选中选择是或者否，默认为否

事件​

参数名键值 (key)单位备注类型描述
点击@click当点击时触发函数采用点击方式触发函数
切换@change当选中状态变化时触发函数采用更新方式触发，当选中状态变化时触发，必须设置自动切换选项

向导​

AppStudio 为操作按钮控件配置了向导功能，选中操作按钮控件，在右侧参数配置区上方点击向导图标进入向导界面。

操作按钮向导界面
操作按钮向导界面

用于引导用户快速配置控件属性，与实时仿真任务的开始/停止、停止/恢复、开始/停止录波等监控功能灵活绑定，系统会将向导中设置的方案按照特定的表达式自动写入操作按钮控件的属性框中，支持快速构建自定义实时态监控应用。支持如下属性的配置：

属性配置类型功能描述
操作按钮类型选择选择操作按钮功能类型
绑定资源选择选择资源标签页内添加的模型资源
参数方案选择选择模型资源的参数方案
计算方案选择选择模型资源的计算方案

支持如下的功能类型：

功能类型描述对应的表达式
开始点击后函数资源/实时仿真任务开始执行禁用：$model.running 事件→点击：$model.start(-1)
停止点击后函数资源/实时仿真任务结束执行禁用：not $model.running 事件→点击：$model.terminate()
开始/停止首次点击后函数资源/实时仿真任务开始执行，操作按钮文本从“开始”变为“停止”；再次点击后函数资源/实时仿真任务结束执行，操作按钮文本从“停止”变为“开始”，文本：$model.running ? '停止' : '开始' 事件→点击：$model.running ? $model.terminate() : $model.start(-1)
暂停点击后实时仿真任务暂停执行禁用：not $model.running or not is($model.value.rt_state, "Object") or not $model.value.rt_state.monitoring 事件→点击：$model.send({"type": "monitoring", "state": false})
恢复点击后实时仿真任务恢复执行禁用：not $model.running or not is($model.value.rt_state, "Object") or $model.value.rt_state.monitoring 事件→点击：$model.send({"type": "monitoring", "state": true})
暂停/恢复首次点击后实时仿真任务暂停执行，操作按钮文本从“暂停”变为“恢复”；再次点击后实时仿真任务恢复执行，操作按钮文本从“恢复”变为“暂停”，文本：$model.running and is($model.value.rt_state, "Object") ? ($model.value.rt_state.monitoring ? "暂停" : "恢复") : "暂停" 禁用：not $model.running or not is($model.value.rt_state, "Object") 事件→点击：$model.send({"type": "monitoring", "state": not $model.value.rt_state.monitoring})
开始录波点击后实时仿真任务开始录波禁用：not $model.running or $model.emtp.recording 事件→点击：$model.emtp.startRecording()
停止录波点击后实时仿真任务停止录波禁用：not $model.running or not $model.emtp.recording 事件→点击：$model.emtp.stopRecording()
开始/停止录波首次点击后实时仿真任务开始录波，操作按钮文本从“录波”变为“停止”；再次点击后实时仿真任务录波结束，操作按钮文本从“停止”变为“录波”文本：$model.running ? ($model.emtp.recording ? "停止录波" : "开始录波") : "录波" 禁用：not $model.running 事件→点击：$model.emtp.recording ? $model.emtp.stopRecording() : $model.emtp.startRecording()

案例介绍​

  1. 创建一个操作按钮控件，在右侧的属性配置区内给操作按钮命名为 A

  2. 创建函数资源 asset1，选择资源类型为函数

  3. 配置函数资源 asset1，点击选择资源，绑定 rid 为 function/Maxwell/demo 的示例函数

  4. 鼠标选中操作按钮 A 的事件/点击属性栏，按下 Ctrl 输入 $asset1.start()

  5. 点击工具栏的预览快捷操作按钮(或者 Ctrl + P )，进入预览模式，点击操作按钮即可运行 function/Maxwell/demo 示例函数

创建操作按钮控件
创建操作按钮控件
创建函数资源
创建函数资源
绑定示例函数
绑定示例函数
示例函数详情
示例函数详情
更改操作按钮属性
更改操作按钮属性
预览模式
预览模式
FuncStudio 函数使用详情

查看 FuncStudio 函数工坊使用指南

常见问题​

什么是事件触发机制？

AppStudio 场景标签页内控件的属性有两种输入模式，一种是 (x) 值输入模式，另一种是 f(x) 表达式输入模式。 值输入模式是通过在属性框内直接输入值来配置控件属性，表达式输入模式则是在属性框内输入由变量/函数资源键名、控件属性键名构成的 math.js 表达式，通过表达式解析器计算出表达式的值来配置控件属性值。详情参见 控件属性的表达式输入

(x) 与 f(x) 的区别

事件是指对控件操作后产生的效果，事件触发使用 HTML 元素事件触发的回调函数结合 math.js 的表达式解析器进行控件属性或者资源的调用。详情参考 事件触发机制