首页 > 其他分享 >万维组态扩展图元示例文档

万维组态扩展图元示例文档

时间：2024-07-01 13:58:49浏览次数：18  
标签：万维 fns mxConstants VERTICAL 示例 menu mxRc defaultImg 组态

   演示地址：http://121.40.16.189:12000

  1. 万维组态本地部署文档
  2. 万维组态线上部署文档
  3. 万维组态操作说明文档
  4. 万维组态接入文档
  5. 万维组态绑点示例文档
  6. 万维组态接入源代码说明
  7. 万维组态扩展图元示例文档
  8. 万维组态大屏图元示例文档

1、新增左侧图元模块

左侧图元模块

1.1、添加菜单

编辑 Sidebar.js 文件，打开 Sidebar.js 文件，找到 Sidebar.prototype.categoryMenus 属性；

以控制组件栏目为例，在中添加如下实体

Sidebar.prototype.categoryMenus = [
    {
        id: 4,
        name: '控制组件',
        defaultSrc: mxUtils.staticImg('/rcscada/menu/ic_menu_control_default.svg'),
        checkedSrc: mxUtils.staticImg('/rcscada/menu/ic_menu_control_check.svg'),
        checked: false,
        funcNames: ['addCustomStateImagePalette'],
    },
]

在上面代码中，我们增加了一个控制组件实体，name为菜单名字，defaultSrc为默认图标， checkedSrc为选中图标，funcNames为添加子分组的方法名字；注意 funcNames 是一个方法名数组，意味着可以定义多个分组， funcNames 中的方法是定义在 Sidebar.prototype 属性上的 如上面的 addCustomStateImagePalette 则是 Sidebar.prototype.addCustomStateImagePalette 方法；由于静态图元太多会导致 Sidebar.js文件非常的大，会出现编译卡顿问题， 所以我们把 Sidebar.js 拆分， 比如我们在 CustomExpands.js addCustomStateImagePalette方法，然后在 Sidebar.js 文件中引入 CustomExpands.js， import {CustomExpands} from './sidebar/CustomExpands'; 就可以避免 Sidebar.js 文件大的问题； addCustomStateImagePalette 方法也能挂载到 Sidebar.prototype 上；

1.2、添加分组

编辑 CustomExpands.js 文件，打开 CustomExpands.js 文件，在 CustomExpands.js中找到 Sidebar.prototype.addCustomStateImagePalette 方法的定义如下：

Sidebar.prototype.addCustomStateImagePalette= function () {
    const fns = [];
    let closeImg = `/rcscada/images/usr/switch/1.svg`;
    let openImg = `/rcscada/images/usr/switch/2.svg`;
    let s = `shape=mxgraph.rc.mxRc_stateSwitch;readonly=1;rcDprop=openCloseValues;igDprop=commonStrokeColor;openStateImg=${openImg};closeStateImg=${closeImg};html=1;shadow=0;dashed=0;strokeWidth=1;stateValue=0;title=切换开关;opacity=100;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
    fns.push(this.createVertexTemplateEntry(s, 150, 150, '', '切换开关', true, '', '', mxUtils.staticImg(closeImg), ''));
    let defaultImg = `/rcscada/images/usr/light/1.png`;
    s = `shape=mxgraph.rc.mxRc_stateImage;readonly=1;igDprop=commonStrokeColor;rcSprop=defaultImg;rcDprop=stateImageValues;defaultImg=${defaultImg};stateImage=;html=1;shadow=0;dashed=0;strokeWidth=1;stateValue=0;title=状态图片1;opacity=100;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
    fns.push(this.createVertexTemplateEntry(s, 150, 150, '', '状态图片', true, '', '', mxUtils.staticImg(defaultImg), ''));
    defaultImg = `/rcscada/menu/ic_menu_text.svg`;
    s = 'text;rcDprop=stateTextValues;readonly=1;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;';
    fns.push(this.createVertexTemplateEntry(s, 200, 100, '文字', '状态文字', true, '', '', mxUtils.staticImg(defaultImg), ''));
    s = 'text;rcDprop=textOutputValues;html=1;strokeColor=#000000;fillColor=#FFFFFF;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=2;';
    fns.push(this.createVertexTemplateEntry(s, 200, 100, '文字', '变量文本', true, '', '', mxUtils.staticImg(defaultImg), ''));

    defaultImg = `/rcscada/menu/ic_menu_pip_flow.gif`;
    fns.push(this.createEdgeTemplateEntry(
        'endArrow=none;html=1;endArrow=none;endFill=0;enableFlow=1;strokeWidth=10;strokeColor=#28E8D8;pipWidth=13;pipDash=10;strokeBgColor=#312727;flowDirection=1;',
        200, 200, '', '流动条', null, null, null, true, mxUtils.staticImg(defaultImg), ''));

    defaultImg = `/rcscada/menu/ic_menu_trough.svg`;//troughMinScale=0;troughMaxScale=100;
    s = `shape=mxgraph.rc.mxRc_squareTrough;igDprop=commonStrokeColor;rcDprop=troughLiquidProgressValues;rcSprop=troughMinScale,troughMaxScale,troughBorderWidth,troughBorderRadius,troughBorderColor,troughBackgroundColor,troughLiquidColor;troughMinScale=0;troughMaxScale=100;troughBorderWidth=5;troughBorderRadius=5;troughBorderColor=#000000;troughBackgroundColor=#FFFFFF;troughLiquidColor=#00AAFF;html=1;shadow=0;dashed=0;strokeWidth=1;stateValue=0;title=水槽;opacity=100;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
    fns.push(this.createVertexTemplateEntry(s, 200, 200, '', '液体容器', true, '', '', mxUtils.staticImg(defaultImg), ''));

    //readonly == 1 时 showFontStyle 是否显示字体设置面板 1 显示 默认不显示
    defaultImg = `/rcscada/menu/ic_menu_shuzi_time.svg`;
        s = `shape=mxgraph.rc.mxRc_shu_zi_time;rcDprop=shuziTimeValues;showFontStyle=1;readonly=1;timeFormat=0;igDprop=commonStrokeColor;rcSprop=timeFormat;html=1;shadow=0;dashed=0;strokeWidth=1;stateValue=0;title=数字日期;opacity=100;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=middle;`;
    fns.push(this.createVertexTemplateEntry(s, 180, 180, '', '数字日期', true, '', '', mxUtils.staticImg(defaultImg), ''));

    defaultImg = `/rcscada/menu/ic_menu_video_play.svg`;
    s = `shape=mxgraph.rc.mxRc_video_play;rcDprop=videoPlayerValues;readonly=1;igDprop=commonStrokeColor,commonFontColor;html=1;shadow=0;dashed=0;strokeWidth=0;title=点播直播;opacity=100;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
    fns.push(this.createVertexTemplateEntry(s, 200, 120, '', '点播/直播', true, '', '', mxUtils.staticImg(defaultImg), ''));

    defaultImg = `/rcscada/menu/ic_menu_thermometer.png`;
    s = `shape=mxgraph.rc.mxRc_thermometer;readonly=1;rcDprop=scaleValValues;rcSprop=showScale,bgFillColor1,bgFillColor2,minScale,maxScale,smallUnitScale,bigUnitScale,scaleValDuration,scaleTransX,scaleFontSize,scaleColor,scaleFontColor;scaleTransX=0.0;scaleColor=#528CFF;bgFillColor1=#F8D7D1;bgFillColor2=#FF5D3C;igDprop=commonStrokeColor,commonFontColor;html=1;shadow=0;dashed=0;showScale=1;scaleValDuration=1.0;minScale=0;maxScale=100;smallUnitScale=2;bigUnitScale=20;strokeWidth=1;strokeColor=#528CFF;fontColor=#528CFF;fontSize=12;title=温度计;opacity=100;fillColor=none;aspect=fixed;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
    fns.push(this.createVertexTemplateEntry(s, 120, 200, '', '温度计', true, '', '', mxUtils.staticImg(defaultImg), ''));

    defaultImg = `/rcscada/menu/ic_menu_rcgauge1.png`;
    s = `shape=mxgraph.rc.mxRc_gauge1;readonly=1;rcDprop=scaleValValues;rcSprop=showScale,bgFillColor1,bgFillColor2,minScale,maxScale,smallUnitScale,bigUnitScale,scaleValDuration,scaleTransX,scaleFontSize,scaleColor,scaleFontColor;perimeterSpacing=40;scaleTransX=0.0;scaleColor=#528CFF;bgFillColor1=#F8D7D1;bgFillColor2=#FF5D3C;igDprop=commonStrokeColor,commonFontColor;html=1;shadow=0;dashed=0;showScale=1;scaleValDuration=1.0;minScale=0;maxScale=100;smallUnitScale=2;bigUnitScale=20;strokeWidth=1;strokeColor=#528CFF;fontColor=#528CFF;fontSize=12;title=计量器;opacity=100;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
    fns.push(this.createVertexTemplateEntry(s, 150, 200, '', '计量器', true, '', '', mxUtils.staticImg(defaultImg), ''));

    defaultImg = `/rcscada/menu/ic_menu_htmlInput.png`;
    s = `shape=mxgraph.rc.mxRc_htmlInput;showFontStyle=1;placeholderText=请输入;readonly=1;rcDprop=htmlTextInputDefaultValues;igDprop=commonStrokeColor,commonFontColor;html=1;shadow=0;dashed=0;strokeWidth=1;strokeColor=#528CFF;fontColor=#333;fontSize=12;title=文本域;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
    fns.push(this.createVertexTemplateEntry(s, 200, 60, '', '文本框', true, '', '', mxUtils.staticImg(defaultImg), ''));

    defaultImg = `/rcscada/menu/ic_menu_htmlTextArea.png`;
    s = `shape=mxgraph.rc.mxRc_htmlTextarea;showFontStyle=1;placeholderText=请输入;textareaRows=4;readonly=1;rcDprop=htmlTextareaDefaultValues;igDprop=commonStrokeColor,commonFontColor;html=1;shadow=0;dashed=0;strokeWidth=1;strokeColor=#528CFF;fontColor=#333;fontSize=12;title=文本域;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
    fns.push(this.createVertexTemplateEntry(s, 300, 120, '', '文本域', true, '', '', mxUtils.staticImg(defaultImg), ''));
    this.addPaletteFunctions('mxRc_stateSwitch', '变量控制', true, fns);
};

在上面代码中， 我们定义了一个分组，名为 变量控制， const fns = [];中存放的就是我们的静态图元;

2、定义静态图元

在上面步骤中我们已经添加好了分组，接下俩就是在分组中添加图元了； 

2.1、添加图元

新增分组时使用了 addPaletteFunctions方法：

Sidebar.prototype.addPaletteFunctions = function (id, title, expanded, fns) {
    this.addPalette(id, title, expanded, mxUtils.bind(this, function (content) {
        for (var i = 0; i < fns.length; i++) {
            content.appendChild(fns[i](content));
        }
    }));
};

addPaletteFunctions方法接受四个参数： id, title, expanded, fns; 其中 fns中存放的就是我们要添加的图元；

以上图为例我们新增一个开关图元，代码如下：

let closeImg = `/rcscada/images/usr/switch/1.svg`;
let openImg = `/rcscada/images/usr/switch/2.svg`;
let s = `shape=mxgraph.rc.mxRc_stateSwitch;readonly=1;rcDprop=openCloseValues;igDprop=commonStrokeColor;openStateImg=${openImg};closeStateImg=${closeImg};html=1;shadow=0;dashed=0;strokeWidth=1;stateValue=0;title=切换开关;opacity=100;fillColor=none;${mxConstants.STYLE_VERTICAL_LABEL_POSITION}=bottom;${mxConstants.STYLE_VERTICAL_ALIGN}=top;`;
fns.push(this.createVertexTemplateEntry(s, 150, 150, '', '切换开关', true, '', '', mxUtils.staticImg(closeImg), ''));

其中 let s中定义了图元的style样式，150, 150是图元初始化宽高，'切换开关'是图元名称； let s的 shape属性指定了图元的渲染类；

2.2、图元渲染类

像上面 开关图元的渲染类就是 mxRc_stateSwitch.js，那么为什么是mxRc_stateSwitch.js 类呢？

其实在mxRc_stateSwitch.js中，我们定义了如下 SHAPE_NAME


mxRc_stateSwitch.prototype.cst = {
    SHAPE_NAME: 'mxgraph.rc.mxRc_stateSwitch',
};

然后在 ShapesExpands.js 文件中，我们注册了 shape=mxgraph.rc.mxRc_stateSwitch的图元的渲染类就是 [mxRc_stateSwitch.js]类；

mxCellRenderer.registerShape(mxRc_stateSwitch.prototype.cst.SHAPE_NAME, mxRc_stateSwitch);

注意：ShapesExpands.js就是注册图元渲染类的地方，所有自定义图元都在这里注册；

2.3、图元渲染回调方法 在渲染类中后有一个属性方法 paintVertexShape

比如上面 mxRc_stateSwitch.js中的 mxRc_stateSwitch.prototype.paintVertexShape = function (c, x, y, w, h)

我们就可以在这个方法中执行自己的逻辑，详细请参考已有注册类；

如需了解更多关于万维组态，请添加微信：

标签：万维,fns,mxConstants,VERTICAL,示例,menu,mxRc,defaultImg,组态
From： https://blog.csdn.net/BY1317880437/article/details/140099315

相关文章

  • 使用PowerShell执行的命令和示例，用于增强Windows系统的安全性巡检项目：2024
    使用PowerShell执行的命令和示例，用于增强Windows系统的安全性巡检项目：检查系统服务和进程：powershellCopyCode#列出所有正在运行的服务Get-Service|Where-Object{$_.Status-eq'Running'}#列出所有正在运行的进程Get-Process检查本地安全策略和组策略：powersh......
  • QEMU专栏 - 使用 QEMU 调试 FreeRTOS示例
    写在最前这几天一直在研究QEMU中多核ARM加载不同镜像的问题,一直不得其解,这部分后续可以分几个不分拆解下,看看为什么会出现这种问题.今天先来看看如何使用QEMU来调试FreeRTOS的示例代码.编译并运行FreeRTOS示例代码(基础版本)首先是下载代码,这种只需要看最新代......
  • 一个使用Python和假设的天气API来获取和展示天气数据的简单脚本示例
    要使用Python编写一个天气预测的脚本，我们通常需要依赖于现有的天气API来获取实时或历史天气数据，并且结合机器学习或统计模型来进行预测。然而，由于天气预测是一个复杂的任务，通常需要大量的计算资源和专业的气象知识，这里我们将简化这个过程，只展示如何使用Python和一个假设的天......
  • 基于Spring Boot的MyBatis整合示例：构建简单的用户管理系统
    目录1.创建一个新的SpringBoot项目2.添加必要的依赖3.配置数据库连接4.创建实体类5.创建Mapper接口6.创建MapperXML文件7.创建Service类8.创建Controller类9.启动应用程序10.测试在当今的软件开发中，SpringBoot和MyBatis作为两个流行的Java框架，常常被......
  • 538个代码示例！麻省理工教授的Python程序设计+人工智能案例实践
    Python简单易学，且提供了丰富的第三方库，可以用较少的代码完成较多的工作，使开发者能够专注于如何解决问题而只花较少的时间去考虑如何编程。此外，Python还具有免费开源、跨平台、面向对象、胶水语言等优点，在系统编程、图形界面开发、科学计算、Web开发、数据分析、人工智能等方面......
  • 常微分方程算法之编程示例一（欧拉法）
    目录一、研究问题二、C++代码三、计算结果一、研究问题    前面几节内容介绍了常微分方程有限差分格式的推导。为加强对本专栏知识的理解，从本节开始，我们补充一些具体算例及相应的编程。    欧拉法的原理及推导请参考：常微分方程算法之欧拉法（Euler）_欧拉......
  • golang openai GPT4o 示例代码
    packagemainimport( "context" "errors" "fmt" "io" "log" "os" "github.com/joho/godotenv" openai"github.com/sashabaranov/go-openai")funcmain(){ err:=godoten......
  • 微信H5分享示例
    在H5页面（通常指使用HTML5技术开发的网页）分享内容到微信好友或朋友圈，需要使用微信的JS-SDK来实现。引入JS-SDK：在H5页面的<head>标签中引入微信JS-SDK的脚本文件。配置JS-SDK：在页面加载完成后，调用wx.config方法来配置JS-SDK。这一步通常需要提供一系列的配置参数，如appId、tim......
  • Python梯度提升决策树的方法示例
    梯度提升决策树（GradientBoostingDecisionTree，简称GBDT）是一种基于集成学习的算法，它通过构建多个决策树模型，并将它们组合在一起来实现更好的预测性能。GBDT的核心思想是在每轮迭代中，根据当前模型的残差（真实值与预测值之差）来训练一个新的决策树，然后将这个新树添加到模型中，以不断减......
  • 【Unity动画系统】Amimator Controller的概念及其使用示例
    Unity的AnimatorController是动画系统中的一个核心组件，它负责管理和控制动画状态机（AnimationStateMachine）的行为。AnimatorController包含了动画状态、转换规则、以及用于控制动画流程的参数。AnimatorController的概念：动画状态（AnimationStates）：代表单个动画剪辑（Animati......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99