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