hmi_vue3_tauri_lib_v2

v1.0.20

Published

2 months ago

Tauri 工业HMI前端指令与工具集

0High
0Medium
0Low

a1178722162

HMI Modbus Vue Tauri 工业

🏭 Tauri 工业 HMI 前后端指令与工具集

Vue 3 + Tauri 的工业 HMI 前后端组合包，封装 Modbus TCP/RTU、Snap7（西门子）、三菱 MC/TCP 任务队列、事件桥接与工业化指令。内置长连接复用、自动重连与页面任务守卫，配套 TypeScript 类型和示例，开箱即可做工业监控界面。

演示视图仅保留占位说明，实际接入时替换设备配置并按需引入指令或 API 即可。

✨ 组件与能力

Vue 指令：v-工业按钮、v-工业输入框、v-原始字节按钮，涵盖切换/置位/复归/读写/报文字节发送等场景。
任务管理 API：添加/批量添加 Modbus 任务，清理指定来源或当前页面任务，便捷封装读写寄存器/线圈函数。
事件桥接：后端线圈、寄存器、设备状态、原始字节结果实时推送到前端，支持 DOM 事件监听与程序化订阅。
页面任务守卫：路由守卫自动清理页面任务并同步标题，可自定义后缀、默认标题与日志开关。
长连接池：Snap7 与三菱 MC/TCP 按 IP/端口（Snap7 含机架/插槽）复用连接，失败自动剔除并重建。

🧭 快速上手（前端 Vue 3）

安装依赖

npm install hmi_vue3_tauri_lib_v2

在入口启用插件、路由与事件桥接（自动初始化可按需关闭）

// main.ts（参考 使用示例/跨项目前端示例/外部项目入口示例.ts）
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import 工业HMI插件, {
  初始化事件桥接,
  注册页面任务守卫,
  设置全局路由引用,
} from "hmi_vue3_tauri_lib_v2";
import "hmi_vue3_tauri_lib_v2/style.css";

const 路由器 = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "首页",
      component: () => import("./视图/首页.vue"),
      meta: { 标题: "车间概览" },
    },
  ],
});

const 应用 = createApp(App);
应用.use(工业HMI插件); // 若要手动初始化事件桥接，可传 { 自动初始化事件桥接: false }
应用.use(路由器);

注册页面任务守卫(路由器, {
  默认标题: "工业监控系统",
  标题后缀: " - 中控",
  输出日志: true,
});
设置全局路由引用(路由器);

// 仅在关闭自动初始化时需要手动调用
// await 初始化事件桥接();

应用.mount("#app");

在组件中使用指令与 API（摘自 使用示例/跨项目前端示例/示范工业面板.vue）

<template>
  <section class="示范工业面板">
    <button class="工业按钮" v-工业按钮="主轴按钮配置">主轴启停</button>
    <input v-工业输入框="主轴输入配置" type="text" />
    <button class="工业按钮" v-原始字节按钮="原始报文配置">发送报文</button>
    <p>设备状态：{{ 设备状态 }}，当前温度：{{ 当前温度.toFixed(1) }}°C</p>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import {
  执行寄存器读写操作,
  执行线圈读写操作,
  监听特定设备状态,
  清除当前页面任务,
  寄存器数据类型常量,
} from "hmi_vue3_tauri_lib_v2";

const 设备名称 = "车床PLC-tcp";
const 设备状态 = ref("连接中");
const 当前温度 = ref(0);

const 主轴按钮配置 = { 设备名称型号: 设备名称, 类型: "切换", 读取地址: 0, 写入地址: 0 };
const 主轴输入配置 = {
  设备名称型号: 设备名称,
  读取地址: 120,
  写入地址: 120,
  数据类型: 寄存器数据类型常量.无符号16位,
  比例系数: 10,
};
const 原始报文配置 = {
  设备名称型号: 设备名称,
  数据: [0x01, 0x03, 0x00, 0x00, 0x00, 0x06],
  期望接收字节数: 17,
};

let 取消温度监听: (() => void) | undefined;
let 取消线圈监听: (() => void) | undefined;
let 取消设备状态监听: (() => void) | undefined;

onMounted(async () => {
  const 温度结果 = await 执行寄存器读写操作({
    设备名称型号: 设备名称,
    地址: 200,
    读写类型: "读取",
    数据类型: 寄存器数据类型常量.浮点数32位,
    比例系数: 10,
    是否读写一次: false,
    读取回调: (_数值, 详情) => {
      if (typeof 详情.显示值 === "number") 当前温度.value = 详情.显示值;
    },
  });
  取消温度监听 = 温度结果.取消监听;

  const 线圈结果 = await 执行线圈读写操作({
    设备名称型号: 设备名称,
    地址: 0,
    读写类型: "读取",
    数量: 6,
    是否读写一次: false,
  });
  取消线圈监听 = 线圈结果.取消监听;

  取消设备状态监听 = 监听特定设备状态(设备名称, (状态) => {
    设备状态.value = 状态;
  });
});

onBeforeUnmount(async () => {
  取消温度监听?.();
  取消线圈监听?.();
  取消设备状态监听?.();
  await 清除当前页面任务();
});
</script>

🗂️ 设备配置（TCP / RTU / Snap7 / 三菱 MC）

文件需放在运行目录根部，命名保持 设备配置-TCP.json / 设备配置-RTU.json：

// Modbus TCP
[
  { "设备名称型号": "车床PLC-tcp", "服务器地址": "192.168.1.100", "端口": 502, "从站地址": 1 }
]

// Modbus RTU
[
  { "设备名称型号": "车床PLC-rtu", "串口": "COM3", "波特率": 9600, "从站地址": 1, "数据位": 8, "停止位": 1, "校验": "None" }
]

// 西门子 Snap7（协议: "snap7"）
[
  {
    "设备名称型号": "西门子PLC",
    "服务器地址": "192.168.1.10",
    "协议": "snap7",
    "tcp端口": 102,
    "机架": 0,
    "插槽": 1,
    "超时毫秒": 2000,
    "区域": "DB",
    "db号": 1,
    "起始偏移": 0,
    "字节序": "CDAB"
  }
]

// 三菱 MC/TCP（协议: "mc"，单条配置线圈区域仅能选 X/Y/M 之一）
[
  {
    "设备名称型号": "三菱PLC",
    "服务器地址": "192.168.1.20",
    "协议": "mc",
    "端口": 6000,
    "帧格式": "E4Tcp",
    "寄存器区域": "D",
    "线圈区域": "X",
    "字节序": "CDAB"
  }
]

长连接池会按 IP/端口（Snap7 含机架/插槽）复用并自动重连，与设备名称无关。

🔌 Tauri 后端集成（Rust）

添加依赖与可选特性（Snap7/MC 默认启用，可通过 default-features = false 精简）

[dependencies]
hmi_vue3_tauri_lib_v2 = { version = "1.0.20", features = ["snap7", "mc"] }
tauri = { version = "2", features = [] }

在 src/main.rs 注册插件与命令（新版不再提供 run() / 创建应用构建器() / 附加工业能力()）

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
    tauri::Builder::default()
        .plugin(hmi_vue3_tauri_lib_v2::init())
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(hmi_vue3_tauri_lib_v2::命令处理器())
        .run(tauri::generate_context!())
        .expect("运行Tauri应用时发生错误");
}

设备配置文件需与可执行文件同级；缺失会阻止应用启动。
若你已有 invoke_handler，将 添加Modbus任务 与 清除指定来源任务 合并到同一个 generate_handler! 即可。

🧰 常用前端 API 速览

import {
  添加读取保持寄存器任务,
  添加写入单个寄存器任务,
  添加原始字节任务,
  添加Modbus任务,
  清除当前页面任务,
  Modbus操作类型,
} from "hmi_vue3_tauri_lib_v2";

await 添加读取保持寄存器任务({ 设备名称型号: "车床PLC", 起始地址: 300, 数量: 4 });
await 添加写入单个寄存器任务({ 设备名称型号: "车床PLC", 寄存器地址: 310, 数值: 1200 });
await 添加原始字节任务({ 设备名称型号: "车床PLC", 数据: [0x01, 0x03, 0x00, 0x2C, 0x00, 0x02] });
await 添加Modbus任务({
  设备名称型号: "车床PLC",
  操作: { 操作类型: Modbus操作类型.读取线圈, 起始地址: 100, 数量: 4 },
});
await 清除当前页面任务();

事件桥接导出 线圈状态事件名称、保持寄存器事件名称、设备状态事件名称，可直接用 window.addEventListener 订阅。

🏃 本仓库运行与构建

安装依赖：npm install
前端开发：npm run dev
Tauri 调试（启用 Snap7 + MC 特性）：npm run tauri
仅构建前端站点：npm run build
打包 npm 库（类型 + 产物）：npm run build:lib
Rust 检查/发布：cargo check，cargo publish（如需）

🚀 发布流程（前后端）

前置：仓库根目录已 npm install，Rust 工具链已可用，且已登录 npm / crates.io。

发布前端 npm 包

# 生成类型与产物
npm run build:lib

# 发布到 npm（需已登录）
npm publish

发布 Rust crate（后端插件）

cd src-tauri
cargo publish

如需产出桌面应用（可选）

npm run tauri build

📁 示例与目录索引

使用示例/跨项目前端示例/：独立 Vue 入口与完整面板示例，可拷贝复用。
使用示例/跨项目Tauri集成示例/：最小 Tauri 工程，演示如何在外部项目中依赖本 crate。
src/视图/：示范页面骨架；src/工具函数/：指令、事件桥接、任务守卫与 API 实现。
src-tauri/src/：Rust 插件、命令接口、事件派发与循环队列。

📄 许可证

MIT License，详见 LICENSE。

👥 作者

工业自动化团队

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme