开源工业组态 FUXA 实战：嵌入第三方系统 + 缩放拖动 + 隐藏菜单后找回编辑页

前言

FUXA 是一款轻量、开源、基于 Web 的现代化工业组态 / HMI/SCADA 软件，支持 MQTT、Modbus、OPC UA 等多种工业协议，可快速搭建设备监控、数据可视化、大屏组态页面。

在实际项目集成中，我们经常需要将 FUXA 页面嵌入到自有平台或第三方系统，并隐藏原生菜单、实现更友好的交互操作。本文基于真实开发场景，把最常用的配置、代码和问题解决方案整理成文，方便大家直接复用。

一、FUXA 嵌入第三方系统，隐藏菜单与导航栏

FUXA 默认会显示顶部导航、侧边栏和底部切换按钮，嵌入 iframe 时会显得杂乱。我们可以通过两种方式实现纯净画布模式。

1.1 URL 参数方式（推荐，一行生效）

在访问视图的 URL 后增加参数：

复制代码

embedded=true

完整示例：

复制代码

http://192.168.1.100:1881/home?view=你的视图ID&embedded=true

embedded=true：自动隐藏所有菜单、导航、切换按钮
view=视图ID：直接打开指定组态画面
适合 iframe 嵌入，无多余元素

1.2 iframe 嵌入代码示例

复制代码

<iframe 
    src="http://192.168.1.100:1881/home?view=xxx&embedded=true"
    width="100%"
    height="850px"
    frameborder="0"
></iframe>

1.3 全局配置永久隐藏菜单

进入 FUXA 编辑页面
打开 Settings → Layout
关闭以下选项：
- Show Navigation
- Show Button
保存并重启 FUXA

二、嵌入后实现画布：鼠标缩放 + 按住拖动

隐藏菜单后，FUXA 自带的缩放平移控件不可用。通过外层容器 + JavaScript 可实现流畅的缩放与拖动，不影响内部按钮点击。

完整可直接使用代码

复制代码

<div id="dragContainer" style="
    width: 100%;
    height: 900px;
    overflow: hidden;
    position: relative;
    background: #0b1220;">
    <iframe id="fuxaFrame"
        src="http://192.168.1.100:1881/home?view=xxx&embedded=true"
        width="100%" height="100%" frameborder="0"
        style="position:absolute; left:0; top:0; transform-origin:center center; cursor:grab;">
    </iframe>
</div>

<script>
let scale = 1;
let scaleStep = 0.1;
let posX = 0, posY = 0;
let isDragging = false;
let startX, startY;

const container = document.getElementById('dragContainer');
const iframe = document.getElementById('fuxaFrame');

// 滚轮缩放
container.addEventListener('wheel', (e) => {
    e.preventDefault();
    scale += e.deltaY > 0 ? -scaleStep : scaleStep;
    scale = Math.max(0.5, Math.min(scale, 3));
    updateTransform();
});

// 鼠标拖动
container.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX - posX;
    startY = e.clientY - posY;
    iframe.style.cursor = 'grabbing';
});

window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    posX = e.clientX - startX;
    posY = e.clientY - startY;
    updateTransform();
});

window.addEventListener('mouseup', () => {
    isDragging = false;
    iframe.style.cursor = 'grab';
});

function updateTransform() {
    iframe.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
}
</script>

实现效果

鼠标滚轮：画布放大 / 缩小（0.5~3 倍限制）
鼠标按住拖动：画布自由平移
兼容第三方系统、大屏展示、组态面板

三、隐藏菜单后，如何找回 FUXA 编辑页面？

隐藏菜单后，界面上没有任何可进入编辑模式的入口，很多人会误以为配置丢失。

3.1 最快捷方法：直接访问编辑器路径

FUXA 编辑页面有固定路由，直接在浏览器访问：

复制代码

http://你的FUXA_IP:1881/editor

无需任何菜单按钮，一键进入编辑界面。

3.2 恢复菜单按钮（永久解决）

通过 /editor 进入编辑页
进入 Settings → Layout
重新开启：
- Show Button
- Show Navigation
保存设置，底部快捷切换按钮即可恢复

3.3 从视图页手动跳转

打开任意视图页面，将地址栏中的 /home 改为 /editor 即可进入编辑模式。

四、项目实用小技巧

视图 ID 获取 打开视图后，浏览器地址栏 view= 后面的字符串即为视图 ID。
跨域问题处理若 iframe 被拦截，需在 FUXA 服务端开启 CORS 跨域配置。
权限设置视图可配置匿名访问、只读权限，适合大屏展示、客户演示。
MQTT 无缝接入FUXA 内置 MQTT 客户端，可直接连接 EMQX、Mosquitto 等 Broker，接入物联网设备极其方便。
部署方式支持 Node 直接运行、Docker 部署，轻量高效，低配服务器也能流畅运行。

五、总结

FUXA 作为开源轻量组态软件，在工业监控、物联网大屏、嵌入式可视化场景中优势非常明显：

嵌入第三方系统使用 embedded=true 即可实现无菜单纯净展示
通过简单 JS 即可实现画布缩放、拖动，提升大屏交互体验
隐藏菜单后通过 /editor 路径可快速找回编辑页面
协议丰富、配置简单，非常适合二次开发与系统集成