20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal

lumin1020發表於2021-04-02
框架AI

導讀：攻城獅們現在基於平臺開發時， 已不需要寫很多原生程式碼了，取而代之的是在專案中使用各類平臺框架，如：智慧園區應用框架MainPortal，基於它 能夠快速的將園區中各個子應用 /子系統進行選單整合，並在統一入口進行設定和展示，如智慧設施、資產管理…


文末福利：新使用者專享園區開發者帳號免費試用
場景概述
在智慧園區的業務場景中有多個模組，例如智慧設施等。各個模組都有對應的管理頁面和大屏頁面，統一門戶可以根據業務需要，在多個大屏介面或管理頁面中進行切換，以提升操作體驗。在智慧園區的業務場景中，也需要一個統一的門戶來呈現智慧園區各模組的業務功能。
統一門戶可用於整合現有業務系統的訪問控制，透過統一入口登入實現對各業務的集中訪問，登入使用者可以透過統一的門戶在桌面上進行各項業務的處理，減少系統的使用複雜度。
統一門戶實現的功能包括統一入口登入、個性化導航配置、系統導航、使用者資訊管理等功能，從而降低使用者進入系統和獲取各模組資訊的難度，使用和獲取資訊更直接、方便。MainPortal即為實現統一門戶功能的應用框架。
功能解讀
統一門戶的功能非常豐富 ，以 “ 顯示使用者選單”為例，部分功能如下：

#
功能點
功能項
詳細描述
1
主介面
系統選單導航設定
使用者在統一門戶中點選子應用/系統功能項後跳轉到子應用/系統
2
全屏化內容區
使用者可以隱藏選單、工具欄，以全屏的方式展示正在操作的內容區介面。主要用於在大屏中顯示
3
主介面LOGO可配置
提供給運營人員修改主介面LOGO圖片的配置能力
4
顯示使用者選單
右側顯示使用者頭像、使用者名稱。並提供下拉選單
5
配置視窗標題
提供給運營人員修改系統頁面的視窗標題和圖示的能力，能顯示專案或客戶要求的標題名稱和圖示
6
使用者修改密碼
支援使用者自行修改登入密碼，密碼規則要符合安全規範
7
使用者個人語言切換
支援使用者切換當前的工作語言，目前僅支援中文一種語言
8
切換當前空間
使用者切換當前工作區域
支援使用者切換當前工作的空間區域，例如切換某個園區；切換後所有業務介面的展現和操作都針對該園區
9
顯示預設工作區域
當操作員使用者登入後，應預設顯示操作員所歸屬組織上所關聯的空間區域列表
10
配置選單
選單管理
使用者登入後，根據鑑權結果統一展示選單/功能項

除了選單配置等功能外，統一門戶還提供了個人桌面設定的能力，在這裡可以設定導航欄的展示風格，個人主頁面等資訊，下面幾張圖為統一門戶的實際效果圖：

20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal
個人桌面設定預覽
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal
導航欄展示風格設定
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal
個人首頁設定

元件解讀
MainPortal基於AppCube的高階頁面開發， 由smartcampus_mainframe_widget元件構成，元件支援線上編輯，也可以下載後，在本地離線編輯。元件構成如下：
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal


其中：
audio：音訊檔案的存放目錄
image：元件內圖示的存放目錄
messages-en.json：當語言切換為英文時，元件英文展示資訊
messages-zh.json：當語言切換為中文時，元件中文展示資訊
packageinfo.json：該元件的名稱，描述，依賴等基本資訊
smartcampus_mainframe_widget.css：元件的樣式程式碼
smartcampus_mainframe_widget.editor.js：元件的配置資訊檔案
smartcampus_mainframe_widget.ftl ：元件的 DOM檔案
smartcampus_mainframe_widget.js ：元件的 JavaScript檔案



smartcampus_mainframe_widget.png：元件的展示圖示

程式碼解讀
（一）讓我們從顯示使用者選單的邏輯流程圖開始

20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal
（二）選單展示的 DOM結構程式碼解讀
透過檢視Smartcampus_mainframe_widget.ftl檔案，可以看到選單的展示繫結在Menulist上，其中DOM是透過VUE-ELEMENT實現的：
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal
（三）選單的查詢邏輯程式碼解讀：
透過檢視Smartcampus_mainframe_widget.js檔案 ，首先可以看到元件的 js程式碼結構樹：
l Init：元件初始化
l Render：元件例項化渲染
其中， 可以在render函式中，new一個Vue例項，掛載在DOM元素上: unified-portal 。 Vue例項的整個生命週期函式，可以在此實現。
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal
然後，從 created函式，找到選單初始化的入口函式start()：
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal


Start函式的邏輯：
l 先校驗當前使用者是否已登入
l 如果已登入，判斷是否跳轉到第三方應用中
l  透過getParams函式獲取統一門戶展示需要的引數資訊和使用者選單
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal

GetParams函式的邏輯：

20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal

l 查詢統一門戶展示需要的系統引數，例如：運營臺圖示等資訊
l  再呼叫 renderPage函式查詢當前使用者的個人桌面選單資訊，例如：選單資訊，快捷方式，資訊欄展示等
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal


RenderPage函式的邏輯：
l 判斷當前的頁面是否為預覽模式
l  透過 queryPortalProfile查詢使用者的個人桌面資訊
l  再呼叫 getPortalProfile函式，將個人桌面資訊展示在統一門戶上
l  非同步呼叫getCurrentOperatorMenuList查詢使用者能查詢最新選單資訊
l 比對2,4 的選單資訊，如果不一致則呼叫 compareMenu函式，重新整理個人桌面
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal
getPortalProfile函式的邏輯：
l  將個人桌面的dockProfile賦值給MenuList，用於門戶選單導航的展示
l 展示個人主頁面，如果找不到則查詢選單樹的第一個選單

20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal

CompareMenu函式的邏輯：
l 查詢當前使用者對應角色能檢視的選單列表：this.sysMenuList
l 查詢使用者當前能檢視的選單列表的：this.portalProfile.originDockProfile
l 比對1和2的選單列表資訊，如果不一致，則呼叫函式，更新個人桌面設定資訊：setPortalProfile
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal

20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal

       20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal


此，我們已經瞭解了“顯示使用者選單”的基本程式碼結構。
在實際的園區智慧化專案中，只需要搭載此份應用框架 MainPortal就可完成各個子應用/子系統的選單整合，大幅提升開發效率。怎麼樣？快來試試吧。
新使用者專享園區開發者帳號免費試用 ，請戳 ：

作為華為 ICT基礎設施業務面向全球開發者的年度盛會， 將於 在深圳舉行。本屆大會以 #每一個開發者都了不起#為主題，將匯聚業界大咖、華為科學家、頂級技術專家、天才少年和眾多開發者，共同探討和分享雲、計算、人工智慧等最新ICT技術在行業的深度創新和應用。智慧時代，每一個開發者都在創造一往無前的奔騰時代。世界有你，了不起！
瞭解更多華為智慧園區開發者資訊，歡迎訪問：
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69965512/viewspace-2766327/，如需轉載，請註明出處，否則將追究法律責任。

相關文章