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

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

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

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

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

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