vue 实现组态 现代化 管道流动效果

公司有个项目 类似于组态 但是网上的框架 样式不符合我们的需求 要么就是收费 不开源

本文章介绍了一个使用 Vue 实现的管道框架，用于管理管道、阀门和流动。该框架可以用于管道系统的模拟、管理和控制。

(视频忘记静音 注意视频音量 🥁)

演示1

那么以上管道是怎么绘制出来的呢?(^_)👇

自己实现的低平台

可视演示地址

成品地址

一、框架结构
该框架包含以下主要组件：

• 阀门（Valve）： 用于控制管道流动的开关。
• 管道（Pipe）： 用于连接不同的阀门，构成管道系统。
• 流动（Flow）： 代表流体在管道中的运动。

二. 数据结构

这段json中包含了一些阀门 key（例如 el1, el2, el3 等） 后面的数字则是标签的id 阀门包含一些阀门与阀门关联关系和绑定的管道信息。

// 阀门和管道的配置信息
export default {
   
   
    "el2": {
   
   
        // 阀门状态，true表示打开，false表示关闭
        "checked": false,
        // 下一个管道ID的数组
        "nextPipe": [],
        // 下一个阀门ID的数组
        "nextValve": ['el1'],
        // 上一个阀门ID的数组
        "lastValve": []
    },
    // 其他阀门和管道的配置信息...
}

再比如:

   "el49": {
   
   
        "checked": false,
        "nextPipe": ['p131', 'p116','p127', 'p114','p115'],
        "nextValve": ["el50"],
        "lastValve": []
    },
    "el50": {
   
   
        "checked": false,
        "nextPipe": [ 'p92','p91','p90','p89','p88','p87','p150','p86','p84','p85','p83','p82'],
        "nextValve": [],
        "lastValve": ["el49"]
    }
}

图式：

每个阀门都有一些属性，例如 checked 属性表示当前阀门是否被打开，这样的设计很好地描述了阀门的状态，是否允许液体流动。

在管道系统中，阀门的打开与关闭决定了流量是否可以流经该阀门。因此，通过控制 checked 属性，你可以有效地控制流量在管道系统中的流动。，nextPipe 表示下一个管道的名称，nextValve 表示下一个阀门的名称，lastValve 表示上一个阀门的名称，previousFlow 表示先前的流程信息。

这样的数据结构很好的描述了一个复杂的管道系统，其中不同的元素通过管道相互连接

三、模块功能

• 管道配置初始化（init）： 初始化阀门状态和管道配置信息。
• 更新UI（updateUI）： 根据阀门状态和管道配置更新用户界面。
• 获取上游阀门状态（getLastIsFlow）： 递归获取上游阀门的状态，判断是否可以流动。

---

四、核心方法说明
initx()： 初始化阀门状态和管道配置信息。
updateUI()： 更新阀门和管道的UI显示。
getLastIsFlow()： 获取上游阀门的状态，判断是否可以流动。
isClose() : 处理多个阀门共同绑定相同的管道时 导致的后者阀门才生效的问题

核心代码结构:

// 示例代码 (核心代码放后面 这里粗略过一眼)
export default {
   
   
  data() {
   
   
    return {
   
   
      // 阀门工厂配置信息
      valveFactory: {
   
   
        "el2": {
   
   
          "checked": false,
          "nextPipe": [],
          "nextValve": ['el1'],
          "lastValve": []
        },
        // 其他阀门配置信息...
      }
    }
  },
  methods: {
   
   
    // 阀门管道初始化
    initx() {
   
   
      // 初始化代码...
    },
    // 更新UI
    updateUI() {
   
   
      // 更新UI代码...
    },
    // 获取上游阀门状态
    getLastIsFlow(item, valveFactory, res) {
   
   
      // 获取上游阀门状态代码...
    },
    isClose(...) {
   
   

    }
  }
}

---

hongGeng.vue

渲染层

// 画布的一些初始化配置信息
export default {
   
   
      Width: 5000,
      Height: 5000