后端前端物聯(lián)網(wǎng)工業(yè)制造數(shù)據(jù)可視化時序數(shù)據(jù)庫【免費下載鏈接】FUXAWeb-based Process Visualization (SCADA/HMI/Dashboard) software項目地址https://gitcode.com/gh_mirrors/fu/FUXA點擊查看免費下載FUXA 的 HMI 界面視圖、導航、頂欄布局由編輯器中的Layout settings布局設置統(tǒng)一管理。本文以官方文檔 HowTo-UI-Layout.md 為骨架結合倉庫中布局數(shù)據(jù)模型與運行時源碼完整講解如何為最終用戶配置啟動視圖、縮放、輸入彈窗、導航側邊菜單與頂部導航欄并揭示這些設置從保存到生效的底層實現(xiàn)鏈路。讀完本文你將能夠獨立完成一套面向終端用戶的 HMI 界面框架定制。布局設置的入口編輯器中的 Layout Settings在 FUXA 編輯器中進入Setup設置頁面即可找到Layout settings入口它是整個 HMI 外觀與交互框架的唯一配置中心配置結果最終保存到項目的hmi.layout對象中。從源碼結構看布局設置對話框由 layout-property.component.ts 及其模板 layout-property.component.html 實現(xiàn)它使用 Angular Material 的 Tab 組件把配置項組織為四個標簽頁General常規(guī)—— 全局行為如啟動視圖、縮放、輸入彈窗、導航顯示等Navigation Side Menu導航側邊菜單—— 左側菜單項及其樣式Header Navigation Bar頂部導航欄—— 頂欄內容與通知按鈕樣式Custom Styles自定義樣式—— 注入自定義 CSS對應LayoutSettings.customStyles對話框內嵌 CodeMirror 編輯器見 layout-property.component.html。配置完成后點擊 OK數(shù)據(jù)通過ProjectService.setLayout()寫入項目并同步到服務器存儲見 project.service.ts。布局數(shù)據(jù)模型LayoutSettings 與運行時組件在深入各標簽頁之前先理解布局在代碼中的數(shù)據(jù)結構。FUXA 的 HMI 對象包含一個layout字段類型為LayoutSettings定義于 hmi.tsexport class LayoutSettings { autoresize?: boolean false; // 視圖自動縮放 start ; // 啟動視圖首頁id navigation: NavigationSettings new NavigationSettings(); // 左側導航 header: HeaderSettings new HeaderSettings(); // 頂部導航欄 showdev true; // 顯示開發(fā)按鈕Edit/Home/Lab 切換 zoom: ZoomModeType; // 縮放模式 inputdialog false; // 輸入控件彈窗模式 hidenavigation false; // 隱藏導航Header 與側邊菜單 theme ; // GUI 主題 loginonstart?: boolean false; // 啟動時是否要求登錄 loginoverlaycolor?: LoginOverlayColorType; // 登錄彈窗遮罩顏色 show_connection_error? true; // 是否顯示連接錯誤提示 customStyles ; // 自定義 CSS }NavigationSettings與HeaderSettings分別承載側邊菜單與頂欄的配置export class NavigationSettings { mode: NaviModeType; // 側邊菜單模式void / push / over / fix type: NaviItemType; // 菜單項展示類型icon / text / block / inline bkcolor #F4F5F7; // 菜單背景色 fgcolor #1D1D1D; // 菜單文字/圖標色 items: NaviItem[]; // 菜單項 logo?: boolean false; // 自定義 Logo 資源 } export class HeaderSettings { static readonly DefaultHeight 46; static readonly DefaultButtonHeight 36; title: string; // 頂欄標題 alarms: NotificationModeType; // 告警通知按鈕模式 infos: NotificationModeType; // 信息通知按鈕模式 bkcolor #ffffff; fgcolor #000000; height HeaderSettings.DefaultHeight; // 頂欄高度默認 46px buttonHeight HeaderSettings.DefaultButtonHeight; // 按鈕高度默認 36px fontFamily: string; // 字體 fontSize 13; // 字號 items: HeaderItem[]; // 頂欄自定義按鈕/標簽/圖片 itemsAnchor: AnchorType left; // 頂欄項對齊方式 loginInfo: LoginInfoType; // 登錄信息顯示 dateTimeDisplay: string; // 日期時間格式 language: LanguageShowModeType; // 語言切換顯示模式 }這兩個模型的字段幾乎與配置對話框中的控件一一對應是下文各標簽頁配置項的代碼注釋。General 標簽頁全局交互行為配置General 標簽頁集中定義 HMI 的全局行為對應 layout-property.component.html 中的表單項包括Start View啟動視圖即首頁視圖用戶在瀏覽器訪問http://localhost:1881時首先看到的面。下拉列表列出項目內所有視圖按視圖 id 存儲于layout.start。若未設置編輯器會默認取第一個視圖見 editor.component.ts 關聯(lián)的 editor.component.ts。運行時加載邏輯位于 home.component.ts優(yōu)先匹配layout.start指定的視圖其次回退到第一個視圖同時支持通過 URL 查詢參數(shù)?viewNamexxx指定啟動視圖。Zoom縮放啟用后可用鼠標滾輪縮放視圖、按住鼠標左鍵拖動畫布。取值來自ZoomModeType枚舉hmi.ts取值語義disabled禁用縮放enabled啟用縮放滾輪縮放 左鍵拖動autoresize視圖自適應窗口自動縮放enabled模式在運行時通過panzoom庫綁定到#home容器見 home.component.tsautoresize模式則在 fuxa-view.component.ts 中處理。Dialog Mode of input field輸入控件彈窗模式啟用后點擊 Input 值控件時會彈出對話框輸入數(shù)值而不是直接在畫布上編輯。取值來自InputModeType枚舉hmi.ts取值語義false禁用彈窗直接在控件上輸入true啟用彈窗輸入keyboard啟用彈窗并附帶虛擬鍵盤keyboardFullScreen啟用全屏虛擬鍵盤彈窗運行時邏輯見 fuxa-view.component.ts 與 fuxa-view.component.ts當配置為keyboardFullScreen時觸發(fā)全屏鍵盤當配置以keyboard開頭且控件為HtmlInputComponent類型時調用 FUXA 自帶的觸摸鍵盤組件位于 framework/ngx-touch-keyboard。Show Navigation顯示導航通過layout.hidenavigation控制是否隱藏頂部 Header 與側邊菜單。運行時在 home.component.ts 中通過Utils.Boolify(this.hmi.layout.hidenavigation)決定是否渲染導航。Hide development button隱藏開發(fā)按鈕對應layout.showdev關閉后隱藏 Edit/Home/Lab 切換等開發(fā)按鈕避免最終用戶進入編輯模式。全局生效邏輯見 app.component.ts。此外General 標簽還提供以下在文檔基礎上的擴展配置Login on start啟動時登錄layout.loginonstart啟用后未登錄用戶打開頁面即彈出登錄框配合Login overlay colorloginoverlaycolor取值none/black/white可設置遮罩顏色運行時通過backdropClass應用見 home.component.tsConnection message連接錯誤提示layout.show_connection_error控制是否展示連接失敗 toastGUI Themelayout.theme通過ThemeService.setTheme()應用見 header.component.ts 與 project.service.ts。下圖展示了配置后的典型最終界面效果頂欄 側邊菜單 視圖區(qū)Navigation Side Menu 標簽頁構建左側導航菜單Navigation Side Menu 標簽頁用于定義左側菜單項及樣式左側是所見即所得的菜單預覽區(qū)支持拖拽、上下移動、刪除菜單項右側是屬性配置區(qū)見 layout-property.component.html。核心配置項如下Mode側邊菜單模式來自NaviModeType枚舉hmi.ts取值語義void不顯示側邊菜單push菜單展開時把視圖內容向右推over菜單浮在視圖之上覆蓋模式fix菜單固定?？渴冀K展開運行時在 home.component.ts 中據(jù)此決定 Material Sidenav 的over/push/side模式其中fix模式會在加載后自動打開側邊欄。Type菜單項展示類型來自NaviItemType枚舉hmi.ts取值語義icon僅顯示圖標text僅顯示文字block圖標與文字縱向塊狀排列inline圖標與文字橫向內聯(lián)排列Menu Background / Foreground color背景色/前景色通過顏色選擇器設置navigation.bkcolor與navigation.fgcolor默認分別為#F4F5F7與#1D1D1D支持 Alpha 透明度。Logo自定義 Logo從項目資源images 資源組中選擇圖片作為菜單頭部 Logo對應navigation.logo字段。Menu items菜單項點擊預覽區(qū)的按鈕添加菜單項彈出 layout-menu-item-property 對話框每個菜單項NaviItem定義見 hmi.ts可配置text菜單顯示文本view點擊后跳轉的目標視圖link跳轉的 URL 鏈接與 view 二選一icon/imageMaterial 圖標或自定義圖片資源permission/permissionRoles菜單項的角色權限show/enabled兩個角色數(shù)組用于按用戶角色控制可見性與可用性支持為text與inline類型的菜單項配置子菜單children在預覽區(qū)點擊展開/收起運行時的子菜單渲染見 layout-property.component.ts。菜單在運行時由 sidenav.component.ts 渲染通過setLayout()接收布局配置。Header Navigation Bar 標簽頁定制頂部導航欄Header Navigation Bar 標簽頁配置頂欄的顯示內容與樣式左側為實時預覽含告警/信息通知按鈕、日期時間、語言切換等右側為配置項見 layout-property.component.html。文檔指出該標簽頁用于定義是否以及如何顯示 Alarms 通知項以及不同的樣式屬性實際可配置項包括Alarms / Infos告警與信息通知模式來自NotificationModeType枚舉hmi.ts取值語義hide隱藏通知按鈕fix固定展開通知面板float懸浮式通知面板運行時在 home.component.ts 中把這兩個模式賦值給告警/信息面板。Title頂欄標題header.title顯示在頂欄的文本。Login info登錄信息顯示header.loginInfo取值nothing/username/fullname/both控制頂欄顯示當前登錄用戶的哪些信息。Show language語言切換顯示header.language取值nothing/simple/key/fullname控制語言切換按鈕與當前語言標識的展示形式。Date / Time日期時間header.dateTimeDisplay填入 Angular 日期格式串如yyyy/MM/dd HH:mm:ss頂欄即實時顯示當前時間預覽區(qū)通過 1 秒間隔定時刷新見 layout-property.component.ts實際路徑 layout-property.component.ts。Font / Font size字體與字號header.fontFamily與header.fontSize默認 13范圍 10–20。Anchor對齊方式header.itemsAnchor取值left/center/right控制頂欄項的水平對齊。Button height / Header height按鈕高度/頂欄高度header.buttonHeight默認 36范圍 20–100與header.height默認 46范圍 32–120。Background / Foreground color背景色/前景色頂欄bkcolor默認#ffffff與fgcolor默認#000000。Header items頂欄自定義項通過添加彈出 layout-header-item-property 對話框。HeaderItemhmi.ts支持三種類型HeaderItemTypebutton按鈕可配置圖標/圖片、文本property.text、顏色、左右邊距marginLeft/marginRight與高度label文本標簽同樣可綁定變量與事件image純圖片按鈕。每個頂欄項還可通過Gauge property按鈕對應 layout-property.component.ts綁定變量值顯示、事件與動作例如顯示某個 Tag 的實時值——運行時由 home.component.ts 的processValueInHeaderItem()處理變量值刷新。布局設置如何從保存到生效運行時鏈路理解了各標簽頁的配置項后再看這些設置如何在實際運行中生效。整個鏈路如下保存點擊 OK 后LayoutPropertyComponent.onOkClick()會先規(guī)范化 Header 高度字段空值自動刪除再把完整LayoutSettings通過ProjectService.setLayout()持久化見 layout-property.component.ts 與 project.service.ts。加載 HMI運行時首頁組件HomeComponent.loadHmi()讀取hmi.layout依次執(zhí)行解析啟動視圖layout.start→ 根據(jù)hidenavigation決定是否隱藏導航 → 根據(jù)navigation.mode初始化側邊菜單over/push/fix→ 將header配置克隆給頂欄并加載頂欄項 → 根據(jù)zoom初始化縮放 → 根據(jù)loginonstart決定是否強制登錄見 home.component.ts。全局注入layout.customStyles作為style標簽注入頁面layout.showdev false時隱藏開發(fā)入口見 app.component.ts。由此可以看出布局設置并非靜態(tài)外觀描述而是貫穿 HMI 啟動、導航、輸入交互與權限控制的運行時開關且所有字段都有明確的默認值與類型約束見 hmi.ts即使項目文件中缺少某字段也能被安全合并補齊——編輯器打開布局對話框時使用Utils.mergeDeep(new LayoutSettings(), data.layout)保證數(shù)據(jù)完整性layout-property.component.ts。小結通過編輯器 Setup 中的 Layout settings可以一站式完成 FUXA HMI 的界面框架定制General 標簽決定啟動視圖、縮放與輸入彈窗等全局行為Navigation Side Menu 標簽構建帶權限控制與子菜單的左側導航Header Navigation Bar 標簽定制頂欄標題、通知按鈕、日期時間、語言切換與自定義頂欄項Custom Styles 標簽則允許注入任意 CSS 深度微調。這些配置最終統(tǒng)一寫入hmi.layouthmi.ts由 Home、Sidenav、Header、FuxaView 等運行時組件協(xié)同解析生效從而為不同角色與場景交付差異化的操作界面。贊分享后端前端物聯(lián)網(wǎng)工業(yè)制造數(shù)據(jù)可視化時序數(shù)據(jù)庫【免費下載鏈接】FUXAWeb-based Process Visualization (SCADA/HMI/Dashboard) software項目地址https://gitcode.com/gh_mirrors/fu/FUXA點擊查看免費下載相關推薦ng-zorro-antd 實戰(zhàn)用 Layout 組件搭建「頂部導航 側邊欄」的 Header-Sider 頁面布局ng zorro antd 實戰(zhàn)用 Layout 組件搭建「頂部導航 側邊欄」的 Header Sider 頁面布局 本文以 ng zorro antdUI組件前端Simple-Salesforce Bulk 2.0新特性解析為什么它比V1快10倍Simple Salesforce Bulk 2.0新特性解析為什么它比V1快10倍 Simple Salesforce是一款專為Python開發(fā)者設計的Sa后端開發(fā)工具Ant Design 頂部導航 側邊欄布局實戰(zhàn)用 Layout 組件搭建展示類網(wǎng)站骨架Ant Design 頂部導航 側邊欄布局實戰(zhàn)用 Layout 組件搭建展示類網(wǎng)站骨架 本指南圍繞 Ant Design Layout 組件中最具代表性的前端UI組件設計系統(tǒng)上一篇如何3分鐘完成foobar2000美化終極DUI主題定制指南下一篇Betaflight 2025.12 硬件測試終極指南溫度與電壓應力測試完整解析創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考