《工業(yè)可視化》課件 任務(wù)2.2 設(shè)計生產(chǎn)車間信息頁面 -任務(wù)實施

項目二：生產(chǎn)制造的可視化設(shè)計任務(wù)2.2設(shè)計生產(chǎn)車間信息頁面>>※任務(wù)實施《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄1.任務(wù)分析2.創(chuàng)建項目3.設(shè)計訂單交付時間4.設(shè)計訂單完成進度5.設(shè)計作業(yè)率和能耗6.設(shè)計訂單生產(chǎn)信息7.設(shè)計產(chǎn)量趨勢對比8.設(shè)計安全素養(yǎng)情況9.設(shè)計設(shè)備詳情信息10.預(yù)覽驗證頁面效果1.任務(wù)分析本任務(wù)的主要目的是顯示生產(chǎn)車間的生產(chǎn)情況，包括訂單的交付時間、生產(chǎn)完成進度，以起到提示和警醒的作用；車間當(dāng)日的作業(yè)率、能耗和安全素養(yǎng)，明確車間當(dāng)日的輸入情況、輸出情況和安全素養(yǎng)情況；車間每個設(shè)備的名片，方便資產(chǎn)管理和設(shè)備管理。分析結(jié)果如下：展示模塊具體內(nèi)容使用組件數(shù)據(jù)源訂單交付時間訂單交付倒計時倒計時無訂單完成進度訂單完成進度的比例直線進度條物模型-生產(chǎn)進度車間能效指標(biāo)今日作業(yè)率立體儀表盤物模型-今日作業(yè)率今日耗電量立體儀表盤物模型-今日耗電量車間安全素養(yǎng)今日安全素養(yǎng)檢查卡片組件MYSQL數(shù)據(jù)庫-車間安全素養(yǎng)車間設(shè)備詳情焊接機器人詳情圖片彈窗無任務(wù)分析2.創(chuàng)建項目1）登錄云視界，在云視界首頁，通過空白模板方式創(chuàng)建新項目，項目名稱自定義，創(chuàng)建后進入編輯頁面，通過容器為頁面進行布局，所需的圖片素材在本書配套資源文件夾“任務(wù)2_2”中獲取，完成效果如圖所示。導(dǎo)入項目2.創(chuàng)建項目2）為項目頁面綁定物模型和設(shè)備為“生產(chǎn)車間”，如圖所示。綁定設(shè)計主標(biāo)題（3）設(shè)計頁面的主標(biāo)題。把文本組件拖拽到頁面標(biāo)題欄區(qū)域，并調(diào)整位置及設(shè)置其屬性，本書示例標(biāo)題名稱為“生產(chǎn)車間總覽”。2.創(chuàng)建項目3.設(shè)計訂單交付時間以倒計時的方式設(shè)計訂單截止交付時間還剩下多少天，讓生產(chǎn)車間所有人員都能在車間的展示大屏上看到任務(wù)時間要求，達(dá)成工作共識。

（1）使用拖拽的方式，把倒計時組件添加到指定位置。

（2）按照下圖所示的線框內(nèi)的參數(shù)，修改組件寬度屬性，倒計時的主題、字號和時間格式，其他采用默認(rèn)設(shè)置。3.設(shè)計訂單交付時間說明：本書的示例參數(shù)僅供參考，實際可以根據(jù)用戶的審美偏向進行調(diào)整。設(shè)置倒計時屬性（3）設(shè)置完成之后，切換到數(shù)據(jù)源編輯區(qū)，選擇“手動獲取”；計算邏輯選擇“倒序”；目標(biāo)日期根據(jù)情況選擇日期，單擊“確定”；倒計時組件就會顯示相應(yīng)的天數(shù)。3.設(shè)計訂單交付時間設(shè)置倒計時數(shù)據(jù)源4.設(shè)計訂單完成進度設(shè)計訂單的完成進度，讓車間所有人員可以看到目前其工作已經(jīng)完成的進度，以便了解其目前進度在預(yù)期內(nèi)還是滯后，從而達(dá)成一起完成目標(biāo)的共識。設(shè)置直線進度條（1）拖拽直線進度條組件到頁面合適位置；尺寸：可以輸入數(shù)值也可以通過拖拽的方式調(diào)整；顯示：選擇“居中”，如圖所示。4.設(shè)計訂單完成進度其他屬性可參考下圖進行設(shè)置，也可以根據(jù)用戶的審美偏好進行設(shè)置。（2）設(shè)置完成直線進度條的屬性后，切換到數(shù)據(jù)源。把“數(shù)據(jù)源”的“物模型”開關(guān)打開，“物模型”選擇“生產(chǎn)車間”，數(shù)據(jù)源選擇“采集點數(shù)據(jù)”，度量點擊“+”圖標(biāo)，選擇“生產(chǎn)進度”，數(shù)據(jù)源設(shè)置完成，見圖所示。設(shè)置數(shù)據(jù)源4.設(shè)計訂單完成進度5.設(shè)計作業(yè)率和能耗本區(qū)域主要展示整個車間的今日作業(yè)率和今日耗電量，便于車間管理人員及時掌握車間設(shè)備的使用效率和能耗情況。添加立體儀表盤（1）添加兩個立體儀表盤組件在頁面標(biāo)題下方區(qū)域的合適位置；尺寸大小可以輸入數(shù)值也可以通過拖拽的方式調(diào)整；值域改為0-10000，如下圖所示，其他屬性默認(rèn)值不需要調(diào)整，也可以根據(jù)用戶的審美進行設(shè)置。（2）單位屬性的設(shè)置，今日作業(yè)率的單位輸入填寫“%”，今日耗電量的單位輸入填寫“KW.H”，其他屬性默認(rèn)值不需要調(diào)整。設(shè)置單位屬性5.設(shè)計作業(yè)率和能耗（3）配置完成屬性之后，切換到數(shù)據(jù)源編輯區(qū)，把“數(shù)據(jù)源”的“物模型”開關(guān)打開，物模型選擇“生產(chǎn)車間”，數(shù)據(jù)源選擇“采集點數(shù)據(jù)”，度量點擊“+”圖標(biāo)，兩個立體儀表盤分別選擇“今日作業(yè)率”和“今日耗電量”。設(shè)置數(shù)據(jù)源5.設(shè)計作業(yè)率和能耗（4）在立體儀表盤下方，分別添加文本組件，以便了解儀表盤的數(shù)值內(nèi)容。文本屬性配置根據(jù)審美偏好設(shè)置。設(shè)置文本5.設(shè)計作業(yè)率和能耗6.設(shè)計訂單生產(chǎn)信息本區(qū)域設(shè)計訂單生產(chǎn)信息，包括生產(chǎn)負(fù)責(zé)人、訂單編號、今日產(chǎn)量、生產(chǎn)合格率等。設(shè)計生產(chǎn)信息文本（1）拖拽文本組件到訂單生產(chǎn)信息區(qū)域，設(shè)置其屬性如下圖所示，也可以根據(jù)用戶審美進行設(shè)置。（2）通過使用“Ctrl+C”進行復(fù)制，“Ctrl+V”的快捷方式，復(fù)制另外三個文本組件，并通過按住“Shift”并單擊組件的方式，全部選中這四個文本組件，把這四個組件進行對齊。設(shè)計文本6.設(shè)計訂單生產(chǎn)信息（3）設(shè)置“訂單編號”后的文本組件的數(shù)據(jù)源，使其分別顯示對應(yīng)的數(shù)據(jù)信息,如下圖1所示。設(shè)計文本數(shù)據(jù)源6.設(shè)計訂單生產(chǎn)信息圖1設(shè)計文本數(shù)據(jù)源6.設(shè)計訂單生產(chǎn)信息圖2圖3（4）接上述操作，設(shè)置“今日產(chǎn)量”“合格率”后的文本組件的數(shù)據(jù)源，使其分別顯示對應(yīng)的數(shù)據(jù)信息,分別如下圖2、圖3所示。7.設(shè)計產(chǎn)量趨勢對比本區(qū)域設(shè)計每日產(chǎn)量趨勢，可以對比一周、一個月每天的產(chǎn)量趨勢，便于車間管理人員了解生產(chǎn)產(chǎn)量的變化趨勢。設(shè)置折線圖（1）從圖表組件區(qū)中，把折線圖組件拖拽到產(chǎn)量趨勢對比區(qū)域的合適位置，并調(diào)整其尺寸，設(shè)置時間格式為“日”。設(shè)置折線圖數(shù)據(jù)源（2）選中折線圖的狀態(tài)下，切換到數(shù)據(jù)源配置頁，配置其數(shù)據(jù)源為“每日產(chǎn)量”，維度為“日期”，度量為“產(chǎn)量”，其他無需設(shè)置。7.設(shè)計產(chǎn)量趨勢對比本區(qū)域主要顯示生產(chǎn)車間的安全素養(yǎng)的幾個檢查情況，便于車間管理人員整體了解從而更好管理。設(shè)置卡片組件（1）從網(wǎng)頁組件去拖拽“卡片組件”到今日安全素養(yǎng)檢查區(qū)域合適的位置，并通過輸入數(shù)值或者拖拉方式調(diào)整其尺寸大小。8.設(shè)計安全素養(yǎng)情況設(shè)置屬性（2）設(shè)置“標(biāo)題”和“數(shù)值”的屬性。標(biāo)題屬性：標(biāo)題字體設(shè)置為“15”，其他參數(shù)均設(shè)置為默認(rèn)值；數(shù)值屬性：標(biāo)題字體大小設(shè)置為“35”，樣式設(shè)置為“20”，其他參數(shù)均設(shè)置為默認(rèn)值；數(shù)值1-6的參數(shù)均為默認(rèn)，也可以根據(jù)自己的審美進行設(shè)置。8.設(shè)計安全素養(yǎng)情況設(shè)置數(shù)據(jù)源（3）屬性設(shè)置完成之后，切換到數(shù)據(jù)源，把“數(shù)據(jù)源”的“物模型”開關(guān)關(guān)閉，數(shù)據(jù)源選擇“安全素養(yǎng)”，選擇字段如圖所示設(shè)置，數(shù)據(jù)源過濾和判斷條件選擇默認(rèn)，數(shù)據(jù)源設(shè)置完成。8.設(shè)計安全素養(yǎng)情況說明：數(shù)據(jù)源中字段的“名稱”是在云視界顯示的文字，“Key”是數(shù)據(jù)源中的表列名稱。9.設(shè)計設(shè)備詳情信息由于生產(chǎn)車間的設(shè)備較多，因此不能全部呈現(xiàn)每臺設(shè)備的信息，為了方便從車間總覽頁面快速點擊查看設(shè)備信息，在生產(chǎn)車間總覽頁面中，為設(shè)備圖片設(shè)置詳情信息的彈框，當(dāng)鼠標(biāo)單擊設(shè)備圖片時，可以顯示該設(shè)備的詳情。

（1）選中車間布局的區(qū)域容器，如圖所示。

添加車間布局素材（2）切換到“素材庫—我的—任務(wù)2_2”的文件夾，把車間布局圖拖拽到容器的背景圖片中，如下圖所示。請注意是在選中車間布局容器的情況下操作。9.設(shè)計設(shè)備詳情信息添加圖片（3）把“任務(wù)2_2”文件夾中的焊接機器人圖片拖拽到車間布局圖如圖所示的位置，并通過拖拉或者輸入數(shù)字的方式調(diào)整其大小。9.設(shè)計設(shè)備詳情信息添加圖片（4）通過快捷鍵復(fù)制粘貼3個焊接機器人圖片到分別擺放在車間布局圖如圖所示的位置。9.設(shè)計設(shè)備詳情信息完成加工中心布局（5）按照前四個步驟的操作，添加完成臥式加工中心的布局，如圖2-2-35所示。9.設(shè)計設(shè)備詳情信息設(shè)計圖片彈框（6）利用圖片彈框功能完成單臺設(shè)備詳情設(shè)置。點擊設(shè)備圖片，勾選圖片彈框，彈出圖③所示的窗口；對圖片彈框?qū)傩赃M行設(shè)置，觸發(fā)方式和關(guān)閉方式都選擇“點擊”。9.設(shè)計設(shè)備詳情信息設(shè)計圖片彈框（7）彈框?qū)挾瓤梢酝ㄟ^自定義和拖拽的方式設(shè)置；壁紙有六種樣式選擇，示例中選擇第二種，用戶可以根據(jù)自己審美進行設(shè)置；標(biāo)題設(shè)置為“設(shè)備信息”，其他參數(shù)選擇默認(rèn)。9.設(shè)計設(shè)備詳情信息設(shè)置彈框?qū)傩裕?）彈框?qū)傩栽O(shè)置，標(biāo)題顏色設(shè)置為“黃色”，也可以是其他顏色；標(biāo)題字號設(shè)置為“32”；彈框內(nèi)容需要呈現(xiàn)設(shè)備編號、所屬廠房、設(shè)備位置、負(fù)責(zé)人和設(shè)備總利用率五個信息，用文本組件實現(xiàn)；其他參數(shù)設(shè)置為默認(rèn)。9.設(shè)計設(shè)備詳情信息設(shè)置彈框?qū)傩裕?）總利用率數(shù)據(jù)源設(shè)置。如圖2-2-39所示，類型選擇“數(shù)據(jù)源”，數(shù)據(jù)源選擇“采集點數(shù)據(jù)”，并點擊圖標(biāo)，出現(xiàn)下圖對話框，對話框種的物模型選擇“焊接機器人-模擬數(shù)據(jù)”，設(shè)備ID選擇“焊接機器人001”；接著單擊取值旁邊的“+”圖標(biāo)，選擇參數(shù)“總利用率”，數(shù)據(jù)源設(shè)置完畢。9.設(shè)計設(shè)備詳