工業(yè)可視化應(yīng)用課件：生產(chǎn)制造的可視化設(shè)計(jì)

《工業(yè)可視化》/生產(chǎn)制造的可視化設(shè)計(jì)1設(shè)計(jì)生產(chǎn)設(shè)備監(jiān)控頁面>>※任務(wù)實(shí)施《工業(yè)可視化》/目錄1.任務(wù)分析2.創(chuàng)建項(xiàng)目3.設(shè)計(jì)標(biāo)題及設(shè)備圖4.設(shè)計(jì)設(shè)備運(yùn)行狀態(tài)5.設(shè)計(jì)耗材統(tǒng)計(jì)信息6.設(shè)計(jì)設(shè)備能效信息7.設(shè)計(jì)設(shè)備狀態(tài)演化8.設(shè)計(jì)設(shè)備工況趨勢9.預(yù)覽驗(yàn)證頁面效果1.任務(wù)分析（1）

任務(wù)分析本任務(wù)的主要目的是顯示單設(shè)備的運(yùn)行工況，以焊接機(jī)器人為例，需要包括設(shè)備的基本信息，設(shè)備能效數(shù)據(jù)，設(shè)備狀態(tài)信息，設(shè)備的生產(chǎn)耗材統(tǒng)計(jì)信息，設(shè)備狀態(tài)演化趨勢，設(shè)備的工況趨勢等。具體展示數(shù)據(jù)和顯示組件分析結(jié)果如下：展示模塊具體內(nèi)容使用組件數(shù)據(jù)源設(shè)備基本信息設(shè)備編號、所屬廠房、設(shè)備位置、負(fù)責(zé)人文本組件無設(shè)備運(yùn)行狀態(tài)運(yùn)行狀態(tài)圖片組件物模型-設(shè)備狀態(tài)正常/報(bào)警圖片組件物模型-報(bào)警信號耗材統(tǒng)計(jì)信息焊絲總量文本組件物模型-焊絲總量焊絲用量文本組件物模型-焊絲用量送絲速度文本組件物模型-送絲速度公司實(shí)力總利用率文本組件物模型-總利用率今日開機(jī)率文本組件物模型-今日開機(jī)率今日作業(yè)率文本組件物模型-今日作業(yè)率設(shè)備狀態(tài)演化設(shè)備狀態(tài)演化圖狀態(tài)演化圖組件數(shù)據(jù)庫-焊接機(jī)器人狀態(tài)演化設(shè)備工況趨勢焊接電流折線圖組件數(shù)據(jù)庫-焊接機(jī)器人電流電壓任務(wù)分析2.創(chuàng)建項(xiàng)目（1）在云視界首頁，單擊“創(chuàng)建項(xiàng)目”，在彈出來的對話框中，單擊“導(dǎo)入項(xiàng)ID”。創(chuàng)建項(xiàng)目2.創(chuàng)建項(xiàng)目導(dǎo)入項(xiàng)目說明：如果導(dǎo)入的項(xiàng)目需要使用物模型的數(shù)據(jù)源時需要配置“物模型類型”“物模型”“設(shè)備id”，否則可無需填寫。（2）在“導(dǎo)入項(xiàng)目”彈窗中，輸入需要導(dǎo)入的項(xiàng)目ID，當(dāng)導(dǎo)入其他用戶的項(xiàng)目時需要輸入授權(quán)碼，導(dǎo)入自己創(chuàng)建的項(xiàng)目時無需輸入授權(quán)碼；輸入自定義的項(xiàng)目名稱，本書示例為“焊接機(jī)器人運(yùn)行工況”；模型類型選擇“物模型”；本示例的物模型選擇“焊接機(jī)器人”；在設(shè)備ID的下拉框中選擇對應(yīng)需要顯示工況的設(shè)備；最后單擊“導(dǎo)入”即可完成導(dǎo)入項(xiàng)目。2.創(chuàng)建項(xiàng)目（2）創(chuàng)建項(xiàng)目完成后，自動彈出來可視化頁面的編輯界面，如圖所示。導(dǎo)入項(xiàng)目2.創(chuàng)建項(xiàng)目說明：如果需要使用物模型作為數(shù)據(jù)源，但是在創(chuàng)建項(xiàng)目時沒有配置物模型信息，則也可以在編輯狀態(tài)下進(jìn)行整個頁面的物模型數(shù)據(jù)源配置。操作步驟如下：①切換到圖層，②選中“焊接機(jī)器人工況”頁面，③選中“數(shù)據(jù)源”欄，打開物模型開關(guān)，④在“模型”下拉框中選擇“焊接機(jī)器人”，在“設(shè)備”下拉框中選擇對應(yīng)的設(shè)備“焊接機(jī)器人02”，⑤最后單擊“保存”按鈕。設(shè)計(jì)標(biāo)題3.設(shè)計(jì)標(biāo)題及設(shè)備圖（1）通過把文本組件設(shè)計(jì)本頁面的主標(biāo)題?？梢暬撁娴臉?biāo)題和設(shè)備圖片，可以讓觀看者對本頁面展示的主要內(nèi)容和具體設(shè)備一目了然。設(shè)計(jì)設(shè)備圖3.設(shè)計(jì)標(biāo)題及設(shè)備圖（2）切換到“素材庫”，在“任務(wù)2_1”文件夾的圖片素材中選擇“焊接機(jī)器人”圖片拖拽至頁面中間空白處合適的位置說明：本步驟所示的素材默認(rèn)已經(jīng)提前上傳，如果還未上傳，也可按照任務(wù)1.1的操作步驟，自行導(dǎo)入本書配套資源中的“2.1任務(wù)圖片素材”文件夾中的圖片。4.設(shè)計(jì)設(shè)備運(yùn)行狀態(tài)本任務(wù)設(shè)計(jì)的設(shè)備狀態(tài)信息，主要是使用圖片組件來根據(jù)設(shè)備實(shí)時的運(yùn)行狀態(tài)進(jìn)行變化展示，例如當(dāng)設(shè)備在待機(jī)狀態(tài)，會顯示待機(jī)圖片，當(dāng)設(shè)備處于報(bào)警狀態(tài)，會顯示報(bào)警圖片；使設(shè)備操作人員、維修人員、車間管理者看到的信息更直觀。

（1）在素材庫的“我的素材庫→工業(yè)可視化課程→任務(wù)2_1”文件夾中，找到“狀態(tài)作業(yè)”的圖片，拖拽到頁面畫布區(qū)的“設(shè)備狀態(tài)”區(qū)域，并通過手動或輸入數(shù)值調(diào)整其尺寸大小。

設(shè)置數(shù)據(jù)源（2）單擊切換到圖片組件的數(shù)據(jù)源，打開“物模型”開關(guān)，注意此時圖片組件的圖片無法顯示，待數(shù)據(jù)源設(shè)置完畢保存，刷新后會正常顯示圖標(biāo)；數(shù)據(jù)源選擇“采集點(diǎn)數(shù)據(jù)”，單擊取值后的“+”圖標(biāo)，在下拉框中選擇“N設(shè)備狀態(tài)”。4.設(shè)計(jì)設(shè)備運(yùn)行狀態(tài)設(shè)置數(shù)據(jù)源（3）單擊判斷條件的“+”，生成3個條件判斷，并把我的素材庫中對應(yīng)的圖片拖拽到條件圖片框中；當(dāng)設(shè)備狀態(tài)采集到的值為1時，顯示作業(yè)圖片；當(dāng)設(shè)備狀態(tài)采集到的值為2時，顯示待機(jī)圖片；當(dāng)設(shè)備狀態(tài)采集到的值為3時，顯示停機(jī)圖片。4.設(shè)計(jì)設(shè)備運(yùn)行狀態(tài)設(shè)置數(shù)據(jù)源（4）數(shù)據(jù)源設(shè)置完成后，單擊“保存當(dāng)前頁”標(biāo)簽，接著單擊“刷新”標(biāo)簽，即可看到圖片組件的圖片會重新顯示。4.設(shè)計(jì)設(shè)備運(yùn)行狀態(tài)設(shè)置數(shù)據(jù)源（4）數(shù)據(jù)源設(shè)置完成后，單擊“保存當(dāng)前頁”標(biāo)簽，接著單擊“刷新”標(biāo)簽，即可看到圖片組件的圖片會重新顯示。4.設(shè)計(jì)設(shè)備運(yùn)行狀態(tài)設(shè)置數(shù)據(jù)源（5）重復(fù)前面的操作步驟，設(shè)計(jì)生產(chǎn)設(shè)備是否正常狀態(tài)還是報(bào)警狀態(tài)。4.設(shè)計(jì)設(shè)備運(yùn)行狀態(tài)4.設(shè)計(jì)設(shè)備運(yùn)行狀態(tài)其數(shù)據(jù)源配置如圖所示：5.設(shè)計(jì)耗材統(tǒng)計(jì)信息耗材統(tǒng)計(jì)顯示區(qū)域中，文本組件的屬性已經(jīng)配置完成。現(xiàn)在需要配置其數(shù)據(jù)源，使頁面上顯示焊絲總量、焊絲用量、送絲速度的數(shù)值，以便設(shè)備操作技術(shù)員和車間管理者能實(shí)時查看到設(shè)備的耗材信息。（1）選中焊材統(tǒng)計(jì)區(qū)域中，焊絲總量后的文本組件，切換到數(shù)據(jù)源。打開數(shù)據(jù)源后的物模型開關(guān)按鈕；選擇采集點(diǎn)數(shù)據(jù)；取值選擇“焊絲總量”，即焊接機(jī)器人物模型的“焊絲總量”屬性；鼠標(biāo)移動到焊絲總量處，會浮現(xiàn)“編輯、配置、刪除”的圖標(biāo)；單擊中間的配置圖標(biāo)，在彈框中配置數(shù)據(jù)的格式，最后單擊確定按鈕完成配置。完成文本組件的數(shù)據(jù)源配置好，記得及時保存。設(shè)置焊絲總量數(shù)據(jù)源設(shè)置焊絲總量數(shù)據(jù)源5.設(shè)計(jì)耗材統(tǒng)計(jì)信息說明：取值配置可根據(jù)實(shí)際需求進(jìn)行配置數(shù)值格式、小數(shù)位數(shù)、單位后綴、是否顯示千分符等，本示例僅做參考。設(shè)置焊絲用量數(shù)據(jù)源（2）按照焊絲總量的文本組件數(shù)據(jù)源配置操作，同樣配置焊絲用量的文本組件數(shù)據(jù)源5.設(shè)計(jì)耗材統(tǒng)計(jì)信息設(shè)置送絲速度數(shù)據(jù)源（3）按照焊絲總量的文本組件數(shù)據(jù)源配置操作，同樣配置送絲速度的文本組件數(shù)據(jù)源。5.設(shè)計(jì)耗材統(tǒng)計(jì)信息6.設(shè)計(jì)設(shè)備能效信息設(shè)備能效顯示區(qū)域中，文本組件的屬性已經(jīng)配置完成?，F(xiàn)在需要配置其數(shù)據(jù)源，使頁面上顯示總利用率、今日開機(jī)率、今日作業(yè)率的數(shù)值，以便設(shè)備操作技術(shù)員和車間管理者能實(shí)時查看到設(shè)備效率信息。

（1）切換到選中設(shè)備能效區(qū)域，選中總利用率后的文本組件，配置其數(shù)據(jù)源如圖所示。設(shè)置數(shù)據(jù)源（2）按照總利用率的文本組件數(shù)據(jù)源配置操作，同樣配置今日開機(jī)率、今日作業(yè)率的文本組件數(shù)據(jù)源。6.設(shè)計(jì)設(shè)備能效信息用狀態(tài)演化圖來設(shè)計(jì)表現(xiàn)設(shè)備的狀態(tài)在某一時間段的變化趨勢，可以了解該生產(chǎn)設(shè)備在這個時間段內(nèi)，其狀態(tài)是否合理。

（1）在左側(cè)導(dǎo)航欄中單擊“圖表組件”，鼠標(biāo)滾輪下滑找到關(guān)系圖中的“狀態(tài)演化圖”組件；把狀態(tài)演化圖拖拽至“設(shè)備狀態(tài)演化圖”區(qū)域合適的位置；通過設(shè)置尺寸數(shù)值或者拖動調(diào)整組件的大小。7.設(shè)計(jì)設(shè)備狀態(tài)演化設(shè)置數(shù)據(jù)源（2）“狀態(tài)演化圖”組件在選中狀態(tài)下，切換到“數(shù)據(jù)源”；在數(shù)據(jù)源下拉框中選擇“焊接機(jī)器人狀態(tài)演化”；單擊“維度”選項(xiàng)中的“+”圖標(biāo)，在下拉框中選擇“日期”；單擊“度量”選項(xiàng)中的“+”圖標(biāo)，在下拉框中選擇“狀態(tài)”。7.設(shè)計(jì)設(shè)備狀態(tài)演化設(shè)置狀態(tài)（3）單擊“狀態(tài)設(shè)置”選項(xiàng)中的“+”，生成狀態(tài)三個狀態(tài)，分別為“作業(yè)、待機(jī)、停機(jī)”。7.設(shè)計(jì)設(shè)備狀態(tài)演化7.設(shè)計(jì)設(shè)備狀態(tài)演化狀態(tài)1狀態(tài)名稱作業(yè)對應(yīng)名稱1狀態(tài)顏色#42CA8301（僅供參考）狀態(tài)2狀態(tài)名稱待機(jī)對應(yīng)名稱2狀態(tài)顏色#FFF36301（僅供參考）狀態(tài)3狀態(tài)名稱停機(jī)對應(yīng)名稱3狀態(tài)顏色#C6C4C4（僅供參考）說明：本表中的狀態(tài)名稱和對應(yīng)名稱，作為示例參考，實(shí)際項(xiàng)目需要按照工業(yè)大數(shù)據(jù)工程師給出的定義來填寫。比如也有些工程師把停機(jī)狀態(tài)賦值為0，作業(yè)狀態(tài)賦值為1，待機(jī)狀態(tài)賦值為2，故障狀態(tài)賦值為3。設(shè)置折線圖（1）在左側(cè)導(dǎo)航欄中的圖表組件找到折線圖組件；把折線圖組件拖拽至“焊接工況”區(qū)域合適的位置；通過設(shè)置尺寸值或者拖動設(shè)置該組件的大小。8.設(shè)計(jì)設(shè)備工況趨勢①數(shù)據(jù)源：本示例選擇“焊接機(jī)器人電流電壓”，此數(shù)據(jù)為保存在數(shù)據(jù)庫中的焊接機(jī)器人工況的數(shù)據(jù)，記錄了時間、焊接電流、焊接電壓的數(shù)據(jù)；②維度：單擊“維度”選項(xiàng)中的“+”圖標(biāo)，在下拉框中選擇“日期”，維度即為折線圖的x軸；③度量：單擊“度量”選項(xiàng)中的“+”圖標(biāo)，在下拉框中選擇“N電流”和“N電壓”，度量即為折線圖的y軸；設(shè)置折線圖數(shù)據(jù)源（2）在選中折線圖組件狀態(tài)下，切換到數(shù)據(jù)源配置頁面。8.設(shè)計(jì)設(shè)備工況趨勢數(shù)據(jù)源：本示例選擇“焊接機(jī)器人電流電壓”，此數(shù)據(jù)為保存在數(shù)據(jù)庫中的焊接機(jī)器人工況的數(shù)據(jù)，記錄了時間、焊接電流、焊接電壓的數(shù)據(jù)；維度：單擊“維度”選項(xiàng)中的“+”圖標(biāo)，在下拉框中選擇“日期”，維度即為折線圖的x軸；度量：單擊“度量”選項(xiàng)中的“+”圖標(biāo)，在下拉框中選擇“N電流”和“N電壓”，度量即為折線圖的y軸；最后單擊“保存當(dāng)前頁”標(biāo)簽，然后單擊“刷新”按鈕完成設(shè)置。設(shè)置折線圖數(shù)據(jù)源8.設(shè)計(jì)設(shè)備工況趨勢屬性配置（3）配置完成數(shù)據(jù)源之后，選中折線圖的情況下切換為屬性配置，在時間格式下拉框中，選擇“小時”（一般情況下需要查看的設(shè)備工況都是在較短時間段的變化趨勢，如小時內(nèi)查找異常問題，因此設(shè)置顯示為小時，而不是日或月或年）；為了頁面的不顯得內(nèi)容擁擠，可以把圖表選項(xiàng)的部分內(nèi)容不勾選，數(shù)值的顏色可以根據(jù)審美偏好進(jìn)行修改。8.設(shè)計(jì)設(shè)備工況趨勢預(yù)覽效果（1）配置完成之后，先保存然后單擊“預(yù)覽”標(biāo)簽。9.預(yù)覽驗(yàn)證頁面效果預(yù)覽效果（2）使用全屏預(yù)覽的模式，查看設(shè)計(jì)的內(nèi)容是否符合設(shè)計(jì)預(yù)期，如果不符合，則檢查本任務(wù)的操作步驟，是否遺漏設(shè)置內(nèi)容。9.預(yù)覽驗(yàn)證頁面效果33THANKYOU

《工業(yè)可視化》/生產(chǎn)制造的可視化設(shè)計(jì)1設(shè)計(jì)生產(chǎn)設(shè)備監(jiān)控頁面>>※知識準(zhǔn)備《工業(yè)可視化》/目錄狀態(tài)演化圖組件01折線圖組件02維度與度量031.狀態(tài)演化圖組件狀態(tài)演化圖主要用于展現(xiàn)不同狀態(tài)的時長，狀態(tài)演化圖的x軸顯示的是總時長，分段顯示每種狀態(tài)的時長。例如：展示設(shè)備的作業(yè)、待機(jī)、停機(jī)等狀態(tài)的不同時長，可以獲知該設(shè)備在一定的時間段內(nèi)，工作狀態(tài)是否合理。在云視界使用狀態(tài)演化圖組件時，在基礎(chǔ)組件下的圖表組件找到直接拖拽到頁面即可。1.狀態(tài)演化圖組件——屬性配置位置尺寸：設(shè)置組件的長寬尺寸和位置?？芍苯虞斎胂袼刂嫡{(diào)整大小，也可通過鼠標(biāo)拖動組件大小調(diào)整。外觀設(shè)置：可自定義設(shè)置組件名稱，顯示方式有“居中”、“填滿”、“自定義”；其中前兩種方式有相應(yīng)的尺寸大小，“自定義”方式可以任意調(diào)整尺寸大小。設(shè)置內(nèi)容可以設(shè)置狀態(tài)演化圖的圖例文字的“位置”“字體”“字號”“字重”“字色”。圖例1.狀態(tài)演化圖組件——屬性配置勾選此設(shè)置，在狀態(tài)演化圖中的橫坐標(biāo)刻度上顯示數(shù)字，可以通過設(shè)置“字體”“字號”“字重”“字色”“軸顏色”對刻度數(shù)字進(jìn)行設(shè)計(jì)?？潭葦?shù)值1.狀態(tài)演化圖組件——數(shù)據(jù)源配置狀態(tài)演化圖主要用于展示有時間趨勢的數(shù)據(jù)，也就是有時間序列做趨勢對比的數(shù)據(jù)，因此其數(shù)據(jù)源一般自帶時間戳，如物模型的歷史數(shù)據(jù)；狀態(tài)演化圖無法展示單點(diǎn)數(shù)據(jù)，如采集點(diǎn)的直連屬性值。狀態(tài)演化圖的數(shù)據(jù)源配置內(nèi)容如下：數(shù)據(jù)源：可選擇歷史數(shù)據(jù)，或者用戶創(chuàng)建的數(shù)據(jù)源；維度：選擇數(shù)據(jù)表的時間度量：選擇展示設(shè)備的工作狀態(tài)數(shù)據(jù)源過濾：單擊“+”圖標(biāo)可彈出“添加過濾”彈窗，可設(shè)置“條件過濾”“日期過濾”“排序”

設(shè)置內(nèi)容1.狀態(tài)演化圖組件——數(shù)據(jù)源配置狀態(tài)設(shè)置可單擊“+”添加狀態(tài)數(shù)量，在每個狀態(tài)設(shè)置中，“狀態(tài)名稱”為狀態(tài)演化圖中顯示的名稱，“對應(yīng)名稱”為數(shù)據(jù)源中值對應(yīng)的值，當(dāng)數(shù)據(jù)源中數(shù)據(jù)的值為“對應(yīng)名稱”時，即顯示該“狀態(tài)顏色”。如右圖，如果某時段的狀態(tài)值為1時，則顯示的狀態(tài)名稱為作業(yè)，且對應(yīng)的時段的顏色為綠色。2.折線圖組件折線圖主要用于在連續(xù)間隔或時間跨度上展示數(shù)值，它的特點(diǎn)是反映事物隨時間或有序類別而變化的趨勢，常用來顯示趨勢和對比關(guān)系（多個折線之間的對比）。在折線圖中，數(shù)據(jù)是遞增還是遞減、增減的速率、增減的規(guī)律（周期性、螺旋性等）、峰值等特征都可以清晰地反映出來。所以，折線圖常用來分析數(shù)據(jù)隨時間的變化趨勢，也可用來分析多組數(shù)據(jù)隨時間變化的相互作用和相互影響。例如可用來分析某臺設(shè)備或是某幾臺設(shè)備的電流或運(yùn)行速度隨時間變化的情況，從而判斷其是否有異常。2.折線圖組件在折線圖中，一般水平軸（X軸）用來表示時間的推移，并且間隔相同；而垂直軸（Y軸）代表不同時刻的數(shù)據(jù)的大小。使用時，在基礎(chǔ)組件下的圖表組件找到折線圖直接拖拽到頁面即可，如圖：2.折線圖組件——屬性配置位置尺寸：XY是設(shè)置組件的高度和寬度，單位為像素；WH是組件的寬度和高度折線圖類型：有四種類型可選，包含折線圖、折線面積圖、曲線圖、曲線面積圖設(shè)置內(nèi)容2.折線圖組件——屬性配置屬性顯示：有“居中”“填滿”“自定義”三種方式。其中前兩種方式有相應(yīng)的尺寸大小，“自定義”方式可以任意調(diào)整尺寸大小；時間格式：有多種格式可設(shè)置，包括“小時”“年-月-日”等。圖表選項(xiàng)：勾選上對應(yīng)的選項(xiàng)在折線圖中可顯示2.折線圖組件——屬性配置圖標(biāo)主題：預(yù)設(shè)的圖表主題有6種；圖標(biāo)字體：可對折線圖中的“圖表字體”“字重”“顏色”“字號”進(jìn)行顯示設(shè)置；Y軸極值：可設(shè)置折線圖Y軸的最大值，超過該最大值部分將不顯示在圖中。設(shè)置內(nèi)容2.折線圖組件——屬性配置屬性圖表參考線：打開開關(guān)后，會顯示需要配置的參考線信息，可以添加多條參考線。Y軸數(shù)值：設(shè)置參考線的Y軸數(shù)值線樣式：可以設(shè)置solid（實(shí)線）、dot（點(diǎn)）、短線（dash）。粗細(xì)：設(shè)置參考線的顯示粗細(xì)。區(qū)間數(shù)值：可選擇“無限制”即顯示所有數(shù)據(jù)，“小于顯示”即只顯示小于參考線的數(shù)據(jù)，“大于顯示”即只顯示大于參考線的數(shù)據(jù)。2.折線圖組件——屬性配置X軸自定義：打開后會出現(xiàn)需要配置的標(biāo)簽角度和標(biāo)簽數(shù)量，標(biāo)簽角度即是X軸標(biāo)簽的顯示角度，標(biāo)簽數(shù)量即是X軸標(biāo)簽的顯示數(shù)量。Y軸定義：打開后會出現(xiàn)需要配置標(biāo)簽角度，即Y軸標(biāo)簽的顯示角度。設(shè)置內(nèi)容2.折線圖組件——屬性配置顏色指定方式：完成數(shù)據(jù)源設(shè)置后，對應(yīng)的度量可以設(shè)置不同的顏色，進(jìn)而在折線圖中加以區(qū)分。非實(shí)時數(shù)據(jù)處理：折線圖不做設(shè)置設(shè)置內(nèi)容2.折線圖組件——數(shù)據(jù)源配置物模型：打開“物模型”選項(xiàng)，使用本頁面綁定的物模型作為數(shù)據(jù)源，此時可選的數(shù)據(jù)源有“歷史數(shù)據(jù)”“采集點(diǎn)數(shù)據(jù)”“報(bào)警數(shù)據(jù)”。數(shù)據(jù)源：在“物模型”選項(xiàng)關(guān)閉時，可通過此選框進(jìn)行選擇數(shù)據(jù)庫中的數(shù)據(jù)作為數(shù)據(jù)源。維度：折線圖的X軸，可選時間和字符格式的數(shù)據(jù)；度量：折線圖的Y軸，可選多個度量值，只能選擇數(shù)字類型的數(shù)據(jù)。

設(shè)置內(nèi)容折線圖的數(shù)據(jù)源配置內(nèi)容如下所示。2.折線圖組件——數(shù)據(jù)源配置屬性設(shè)置數(shù)據(jù)源過濾：單擊“+”圖標(biāo)彈出“添加過濾”彈窗，可設(shè)置“條件過濾”“日期過濾”“排序”參與組件過濾：勾選時，本組件的數(shù)據(jù)源將參與本頁面的其它篩選器的篩選。例如本頁面中有“日期篩選器”對某一數(shù)據(jù)源進(jìn)行日期篩選，則本組件用到同一個數(shù)據(jù)源時將只能讀取到經(jīng)“日期篩選器”篩選后的數(shù)據(jù)；支持?jǐn)?shù)據(jù)下載：默認(rèn)關(guān)閉，開啟時支持?jǐn)?shù)據(jù)下載。數(shù)據(jù)響應(yīng)：在設(shè)置好數(shù)據(jù)源及數(shù)據(jù)過濾后，保存再刷新后會在此框中顯示出數(shù)據(jù)。3.維度與度量維度是用來描述事實(shí)的角度，主要用來描述與“誰、何時、何地、如何”等有關(guān)的事件。比如描述某設(shè)備的異常電流值在何時出現(xiàn)，那么就是時間維度；比如描述設(shè)備所在的地理位置，就是地理維度；比如描述生產(chǎn)設(shè)備是歸屬于哪位操作人員負(fù)責(zé)，那就是人員維度。維度字段一般使用的數(shù)據(jù)類型是字符串（string）或者日期（date）類型。度量是業(yè)務(wù)流程節(jié)點(diǎn)上的一個數(shù)值，比如耗電量、產(chǎn)量、銷量，價(jià)格，成本等的數(shù)值，度量需要從維度的基礎(chǔ)上去衡算這個結(jié)果數(shù)值，比如耗電量，可以從時間維度去衡量，在不同時間里對應(yīng)的結(jié)果值是多少。度量字段一般使用的數(shù)據(jù)類型是數(shù)值（number）。52THANKYOU

生產(chǎn)制造的可視化設(shè)計(jì)1設(shè)計(jì)生產(chǎn)設(shè)備監(jiān)控頁面>>※任務(wù)說明《工業(yè)可視化》/《工業(yè)可視化》/任務(wù)描述01學(xué)習(xí)目標(biāo)02目錄01任務(wù)描述在本任務(wù)中，馮工需要把H集團(tuán)的生產(chǎn)設(shè)備進(jìn)行可視化展示設(shè)計(jì)。首先他設(shè)計(jì)的是焊接機(jī)器人的運(yùn)行工況可視化，以便讓設(shè)備管理員和生產(chǎn)組長、主管等可實(shí)時查看設(shè)備的運(yùn)行工況信息，如：送絲速度、焊絲用量、焊接電流等；同時需要把焊接機(jī)器人的運(yùn)行狀態(tài)以演化圖的形式展示，便于查看其在不同時間段內(nèi)的運(yùn)行狀態(tài)變化，以評估設(shè)備的使用情況。02學(xué)習(xí)目標(biāo)知識目標(biāo)技能目標(biāo)了解狀態(tài)演化圖的作用和對企業(yè)優(yōu)化生產(chǎn)的意義。熟悉狀態(tài)演化圖組件的屬性及數(shù)據(jù)源設(shè)置內(nèi)容。熟悉折線圖組件的屬性及數(shù)據(jù)源設(shè)置內(nèi)容。熟悉數(shù)據(jù)中維度與度量的含義及區(qū)別。能配置文本組件數(shù)據(jù)源使文本組件根據(jù)不同判斷條件顯示不同文字；能配置圖片組件數(shù)據(jù)源使圖片組件根據(jù)不同判斷條件顯示不同圖片；能配置設(shè)備的狀態(tài)演化圖顯示設(shè)備在某個時間段內(nèi)的運(yùn)行情況；能配置折線圖顯示有時間趨勢的數(shù)據(jù)；項(xiàng)目二：生產(chǎn)制造的可視化設(shè)計(jì)2設(shè)計(jì)生產(chǎn)車間信息頁面>>※任務(wù)實(shí)施《工業(yè)可視化》/《工業(yè)可視化》/目錄1.任務(wù)分析2.創(chuàng)建項(xiàng)目3.設(shè)計(jì)訂單交付時間4.設(shè)計(jì)訂單完成進(jìn)度5.設(shè)計(jì)作業(yè)率和能耗6.設(shè)計(jì)訂單生產(chǎn)信息7.設(shè)計(jì)產(chǎn)量趨勢對比8.設(shè)計(jì)安全素養(yǎng)情況9.設(shè)計(jì)設(shè)備詳情信息10.預(yù)覽驗(yàn)證頁面效果1.任務(wù)分析本任務(wù)的主要目的是顯示生產(chǎn)車間的生產(chǎn)情況，包括訂單的交付時間、生產(chǎn)完成進(jìn)度，以起到提示和警醒的作用；車間當(dāng)日的作業(yè)率、能耗和安全素養(yǎng)，明確車間當(dāng)日的輸入情況、輸出情況和安全素養(yǎng)情況；車間每個設(shè)備的名片，方便資產(chǎn)管理和設(shè)備管理。分析結(jié)果如下：展示模塊具體內(nèi)容使用組件數(shù)據(jù)源訂單交付時間訂單交付倒計(jì)時倒計(jì)時無訂單完成進(jìn)度訂單完成進(jìn)度的比例直線進(jìn)度條物模型-生產(chǎn)進(jìn)度車間能效指標(biāo)今日作業(yè)率立體儀表盤物模型-今日作業(yè)率今日耗電量立體儀表盤物模型-今日耗電量車間安全素養(yǎng)今日安全素養(yǎng)檢查卡片組件MYSQL數(shù)據(jù)庫-車間安全素養(yǎng)車間設(shè)備詳情焊接機(jī)器人詳情圖片彈窗無任務(wù)分析2.創(chuàng)建項(xiàng)目1）登錄云視界，在云視界首頁，通過空白模板方式創(chuàng)建新項(xiàng)目，項(xiàng)目名稱自定義，創(chuàng)建后進(jìn)入編輯頁面，通過容器為頁面進(jìn)行布局，所需的圖片素材在本書配套資源文件夾“任務(wù)2_2”中獲取，完成效果如圖所示。導(dǎo)入項(xiàng)目2.創(chuàng)建項(xiàng)目2）為項(xiàng)目頁面綁定物模型和設(shè)備為“生產(chǎn)車間”，如圖所示。綁定設(shè)計(jì)主標(biāo)題（3）設(shè)計(jì)頁面的主標(biāo)題。把文本組件拖拽到頁面標(biāo)題欄區(qū)域，并調(diào)整位置及設(shè)置其屬性，本書示例標(biāo)題名稱為“生產(chǎn)車間總覽”。2.創(chuàng)建項(xiàng)目3.設(shè)計(jì)訂單交付時間以倒計(jì)時的方式設(shè)計(jì)訂單截止交付時間還剩下多少天，讓生產(chǎn)車間所有人員都能在車間的展示大屏上看到任務(wù)時間要求，達(dá)成工作共識。

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

（2）按照下圖所示的線框內(nèi)的參數(shù)，修改組件寬度屬性，倒計(jì)時的主題、字號和時間格式，其他采用默認(rèn)設(shè)置。3.設(shè)計(jì)訂單交付時間說明：本書的示例參數(shù)僅供參考，實(shí)際可以根據(jù)用戶的審美偏向進(jìn)行調(diào)整。設(shè)置倒計(jì)時屬性（3）設(shè)置完成之后，切換到數(shù)據(jù)源編輯區(qū)，選擇“手動獲取”；計(jì)算邏輯選擇“倒序”；目標(biāo)日期根據(jù)情況選擇日期，單擊“確定”；倒計(jì)時組件就會顯示相應(yīng)的天數(shù)。3.設(shè)計(jì)訂單交付時間設(shè)置倒計(jì)時數(shù)據(jù)源4.設(shè)計(jì)訂單完成進(jìn)度設(shè)計(jì)訂單的完成進(jìn)度，讓車間所有人員可以看到目前其工作已經(jīng)完成的進(jìn)度，以便了解其目前進(jìn)度在預(yù)期內(nèi)還是滯后，從而達(dá)成一起完成目標(biāo)的共識。設(shè)置直線進(jìn)度條（1）拖拽直線進(jìn)度條組件到頁面合適位置；尺寸：可以輸入數(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ū)域主要展示整個車間的今日作業(yè)率和今日耗電量，便于車間管理人員及時掌握車間設(shè)備的使用效率和能耗情況。添加立體儀表盤（1）添加兩個立體儀表盤組件在頁面標(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)，兩個立體儀表盤分別選擇“今日作業(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é)人、訂單編號、今日產(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ù)制另外三個文本組件，并通過按住“Shift”并單擊組件的方式，全部選中這四個文本組件，把這四個組件進(jìn)行對齊。設(shè)計(jì)文本6.設(shè)計(jì)訂單生產(chǎn)信息（3）設(shè)置“訂單編號”后的文本組件的數(shù)據(jù)源，使其分別顯示對應(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ù)源，使其分別顯示對應(yīng)的數(shù)據(jù)信息,分別如下圖2、圖3所示。7.設(shè)計(jì)產(chǎn)量趨勢對比本區(qū)域設(shè)計(jì)每日產(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è)計(jì)產(chǎn)量趨勢對比本區(qū)域主要顯示生產(chǎn)車間的安全素養(yǎng)的幾個檢查情況，便于車間管理人員整體了解從而更好管理。設(shè)置卡片組件（1）從網(wǎng)頁組件去拖拽“卡片組件”到今日安全素養(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)每臺設(shè)備的信息，為了方便從車間總覽頁面快速點(diǎn)擊查看設(shè)備信息，在生產(chǎn)車間總覽頁面中，為設(shè)備圖片設(shè)置詳情信息的彈框，當(dāng)鼠標(biāo)單擊設(shè)備圖片時，可以顯示該設(shè)備的詳情。

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

添加車間布局素材（2）切換到“素材庫—我的—任務(wù)2_2”的文件夾，把車間布局圖拖拽到容器的背景圖片中，如下圖所示。請注意是在選中車間布局容器的情況下操作。9.設(shè)計(jì)設(shè)備詳情信息添加圖片（3）把“任務(wù)2_2”文件夾中的焊接機(jī)器人圖片拖拽到車間布局圖如圖所示的位置，并通過拖拉或者輸入數(shù)字的方式調(diào)整其大小。9.設(shè)計(jì)設(shè)備詳情信息添加圖片（4）通過快捷鍵復(fù)制粘貼3個焊接機(jī)器人圖片到分別擺放在車間布局圖如圖所示的位置。9.設(shè)計(jì)設(shè)備詳情信息完成加工中心布局（5）按照前四個步驟的操作，添加完成臥式加工中心的布局，如圖2-2-35所示。9.設(shè)計(jì)設(shè)備詳情信息設(shè)計(jì)圖片彈框（6）利用圖片彈框功能完成單臺設(shè)備詳情設(shè)置。點(diǎn)擊設(shè)備圖片，勾選圖片彈框，彈出圖③所示的窗口；對圖片彈框?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)題字號設(shè)置為“32”；彈框內(nèi)容需要呈現(xiàn)設(shè)備編號、所屬廠房、設(shè)備位置、負(fù)責(zé)人和設(shè)備總利用率五個信息，用文本組件實(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)下圖對話框，對話框種的物模型選擇“焊接機(jī)器人-模擬數(shù)據(jù)”，設(shè)備ID選擇“焊接機(jī)器人001”；接著單擊取值旁邊的“+”圖標(biāo)，選擇參數(shù)“總利用率”，數(shù)據(jù)源設(shè)置完畢。9.設(shè)計(jì)設(shè)備詳情信息預(yù)覽效果（1）設(shè)計(jì)完成之后，單擊“保存當(dāng)前頁面”標(biāo)簽，并進(jìn)行預(yù)覽，如圖所示。單擊設(shè)置了彈框的焊接機(jī)器人，檢查是否出現(xiàn)彈框，如果沒有則返回編輯狀態(tài)，從圖層找到彈框，檢查其設(shè)置是否無誤。10.預(yù)覽驗(yàn)證頁面效果92THANKYOU

《工業(yè)可視化》/項(xiàng)目二：生產(chǎn)制造的可視化設(shè)計(jì)2設(shè)計(jì)生產(chǎn)車間信息頁面>>※任務(wù)說明《工業(yè)可視化》/任務(wù)描述01學(xué)習(xí)目標(biāo)02目錄01任務(wù)描述車間的生產(chǎn)設(shè)備布局；展示訂單距離交付倒計(jì)時的天數(shù)；用進(jìn)度條呈現(xiàn)訂單完成得進(jìn)度；用工控組件-儀表盤-立體儀表盤展示今日作業(yè)率和今日耗電量；用網(wǎng)頁-卡片-卡片組件展示今日安全素養(yǎng)檢查情況，分別包括沒穿工衣、沒戴安全帽、沒戴口罩、無故離崗、工位臟亂、物料占道六個項(xiàng)目；使用圖片彈窗功能，在機(jī)器人圖片的彈窗中顯示設(shè)備編號、所屬廠房、設(shè)備位置、負(fù)責(zé)人和總利用率五方面的信息。在本任務(wù)中需要使用可視化設(shè)計(jì)平臺設(shè)計(jì)出“車間生產(chǎn)概覽”的可視化展示大屏，大屏模板已給出，大屏上需要展示的內(nèi)容包含如下：01任務(wù)描述本任務(wù)成品如下：02學(xué)習(xí)目標(biāo)了解生產(chǎn)車間關(guān)注的信息，如訂單交付時間、作業(yè)率、耗電量、合格率、安全素養(yǎng)等的概念；了解工控組件、網(wǎng)頁組件、圖片彈窗的作用和特點(diǎn)；熟悉倒計(jì)時組件的作用及其配置方法；熟悉直線進(jìn)度條組件的作用、屬性及數(shù)據(jù)源配置方法；熟悉立體儀表盤組件的作業(yè)、屬性及數(shù)據(jù)源配置方法；熟悉卡片組件的作用、屬性及數(shù)據(jù)源配置方法；熟悉圖片彈窗的功能及其配置方法。會配置倒計(jì)時組件，使其顯示倒計(jì)時的時間；會配置直線進(jìn)度條組件的屬性及其數(shù)據(jù)源，使其顯示進(jìn)度數(shù)據(jù)；會配置立體儀表盤組件的屬性及其數(shù)據(jù)源，使其顯示作業(yè)率和能耗數(shù)據(jù)；會配置卡片組件的屬性及其數(shù)據(jù)源，使其顯示安全素養(yǎng)檢查情況；會配置圖片的彈窗信息，使鼠標(biāo)滑過圖片會彈窗顯示設(shè)備詳情；知識目標(biāo)技能目標(biāo)《工業(yè)可視化》/項(xiàng)目二：生產(chǎn)制造的可視化設(shè)計(jì)2設(shè)計(jì)生產(chǎn)車間信息頁面>>※知識準(zhǔn)備《工業(yè)可視化》/目錄控件組件-倒計(jì)時01控件組件-直線進(jìn)度條02控件組件-立體儀表盤03網(wǎng)頁組件-卡片04組件彈窗051.控件組件-倒計(jì)時倒計(jì)時組件屬于指示器，可以顯示倒計(jì)的天數(shù)、時分秒、天數(shù)+時分秒。倒計(jì)時組件配置數(shù)據(jù)源時，度量展示為倒計(jì)時的讀數(shù)。數(shù)據(jù)源有自動獲取和手動獲取兩種形式，自動獲取需要和相關(guān)數(shù)據(jù)源連接，如物模型或數(shù)據(jù)庫。手動獲取的計(jì)算邏輯有正序和倒序，正序的目標(biāo)日期要小于當(dāng)前時間，例如已經(jīng)設(shè)備已上線100天；倒序的目標(biāo)日期大于當(dāng)前時間，例如距離高考還剩100天。

倒計(jì)時組件數(shù)據(jù)源使用倒計(jì)時組件時，可以通過在“控件組件-指示器-倒計(jì)時”路徑找到，將倒計(jì)時拖拽到畫布即可。1.控件組件-倒計(jì)時位置尺寸：設(shè)置組件的長寬尺寸和位置。XY是設(shè)置組件的高度和寬度，單位為像素。WH是組件的寬度和高度。屬性設(shè)置1.控件組件-倒計(jì)時屬性設(shè)置主題：可以設(shè)置組件的主題顏色，當(dāng)前有六種主題色可以選擇。字體：可選擇字體樣式。字號：文字的大小。字體顏色：文字的顏色。在顏色調(diào)色板中選擇顏色和透明度。手動輸入RGB、HSL、Hex數(shù)值，改變顏色。背景顏色：組件的背景顏色。在顏色調(diào)色板中選擇顏色和透明度。手動輸入RGB、HSL、Hex數(shù)值，改變顏色翻牌效果：包括向下翻、向上翻、無三種翻牌效果可以選擇。時間格式：包括天、時分秒、全顯示三種時間格式可以選擇。1.控件組件-倒計(jì)時過期效果，用于提示如果超過了倒計(jì)時時間顯示的提示和效果。過期提示：在輸入框輸入提示文字。顯示內(nèi)容：有天數(shù)和時間兩種選項(xiàng)，可以通過勾選，選擇顯示或隱藏；字號：設(shè)置文字的大小；字體顏色：設(shè)置文字的顏色；背景顏色：設(shè)置過期提示下組件的背景顏色。屬性設(shè)置1.控件組件-倒計(jì)時數(shù)據(jù)源：可設(shè)置自動獲取或者手動獲取計(jì)算邏輯：可設(shè)置正序或者倒序。目標(biāo)日期：根據(jù)日歷選擇截止日期。正序的目標(biāo)日期要小于當(dāng)前時間。倒序的目標(biāo)日期大于當(dāng)前時間。數(shù)據(jù)源設(shè)置2.控件組件-直線進(jìn)度條直線進(jìn)度條可以顯示數(shù)值所占比例，多用于完成進(jìn)度、指標(biāo)及趨勢等場景，重點(diǎn)突出企業(yè)/業(yè)務(wù)，可通過指標(biāo)的變化快速判斷是否有經(jīng)營異常。使用直線進(jìn)度條組件時，可以通過在“控件組件-進(jìn)度條-直線進(jìn)度條”路徑找到，將組件拖拽到畫布即可。2.控件組件-直線進(jìn)度條位置尺寸：XY是設(shè)置組件的高度和寬度，單位為像素；WH是組件的寬度和高度，單位為像素；可以輸入數(shù)值自定義大小，也可以通過拖拽的方式改變組件的寬高；屬性設(shè)置2.控件組件-直線進(jìn)度條顯示：包括居中、填滿兩種顯示方式可以選擇；圖表選項(xiàng)：當(dāng)前有標(biāo)題一種選項(xiàng)，可以通過勾選，選擇顯示或隱藏；圖標(biāo)主題：顯示組件的主題顏色；背景顏色：可設(shè)置組件的背景色；屬性2.控件組件-直線進(jìn)度條標(biāo)題：在此處輸入自定義標(biāo)題名稱；字體：可選擇字體樣式；字重：設(shè)置文字粗細(xì)；顏色：文字的顏色，可以在顏色調(diào)色板中選擇顏色和透明度;也可以手動輸入RGB、HSL、Hex數(shù)值，改變顏色；字號：文字的大?。婚g距：進(jìn)度條色塊之間的距離；圖表字體圖表樣式粗細(xì)：進(jìn)度條的粗細(xì)。拉拽或輸入數(shù)值或點(diǎn)擊粗細(xì)進(jìn)度條可改變環(huán)寬度。方向：組件方向，包括橫向和縱向。顏色：進(jìn)度條色塊的顏色。數(shù)值顯示：設(shè)置數(shù)值的顯示樣式，包括百分比和數(shù)值兩種。值域：輸入顯示數(shù)值的范圍，可以設(shè)置起始參數(shù)和最大參數(shù)；2.控件組件-直線進(jìn)度條2.控件組件-直線進(jìn)度條程度標(biāo)記，通過單擊圖標(biāo)添加程度標(biāo)記，單擊可以刪除標(biāo)記。選擇條件：設(shè)定程度篩選條件，選擇“＜”，輸入篩選數(shù)值。顏色：程度顯示顏色；左圖中的設(shè)置表示，當(dāng)進(jìn)度小于50%時，顯示進(jìn)度條顏色為綠色。2.控件組件-直線進(jìn)度條直線進(jìn)度條組件配置數(shù)據(jù)源時，度量展示為進(jìn)度條的讀數(shù)；數(shù)據(jù)源有物模型和用戶創(chuàng)建的數(shù)據(jù)源兩種；直線進(jìn)度條的數(shù)據(jù)源配置內(nèi)容如下：數(shù)據(jù)源為物模型：打開物模型物模型：選擇需要連接的物模型；數(shù)據(jù)源：有歷史數(shù)據(jù)、采集數(shù)據(jù)和報(bào)警數(shù)據(jù)當(dāng)選擇了數(shù)據(jù)源之后，會出現(xiàn)度量，通過單擊“+”圖標(biāo)來選擇進(jìn)度條需要顯示的度量內(nèi)容；

設(shè)置內(nèi)容2.控件組件-直線進(jìn)度條數(shù)據(jù)源為其他數(shù)據(jù)源：關(guān)閉物模型數(shù)據(jù)源：選擇用戶創(chuàng)建的數(shù)據(jù)源數(shù)據(jù)源設(shè)置3.控件組件-立體儀表盤立體儀表盤可以直觀的表現(xiàn)出某個指標(biāo)的進(jìn)度或?qū)嶋H情況，比如反映設(shè)備的運(yùn)行速度、生產(chǎn)溫度、電量使用情況等，儀表盤的好處在于它能跟人們的常識結(jié)合，使大家馬上能理解看什么、怎么看，比單純的文字展示更直觀易于理解。該組件在編輯器中的位置和添加方式如下所示。3.控件組件-立體儀表盤位置尺寸：設(shè)置組件的長寬尺寸和位置，XY是設(shè)置組件的高度和寬度，單位為像素；WH是組件的寬度和高度。屬性設(shè)置3.控件組件-立體儀表盤圖表主題：可以設(shè)置組件的主題顏色，當(dāng)前有6種主題色可以選擇；數(shù)值顯示：設(shè)置數(shù)值的顯示樣式，包括百分比和數(shù)值兩種；值域：輸入儀表盤顯示數(shù)值的范圍；字號：文字的大??；字體樣式：可選擇字體樣式；字重：設(shè)置文字粗細(xì)；字體顏色：文字的顏色；字體位置：設(shè)置文字的位置；字體屬性3.控件組件-立體儀表盤單位輸入：自定義輸入數(shù)值單位；單位大?。簡挝坏奈淖执笮。粏挝粯邮剑嚎蛇x擇單位的字體樣式；單位字重：設(shè)置文字粗細(xì)；單位顏色：設(shè)置單位的文字顏色；單位位置：設(shè)置單位顯示的位置；單位屬性立體儀表盤組件配置數(shù)據(jù)源時，度量展示為儀表的指針數(shù)值。數(shù)據(jù)源有物模型和其他數(shù)據(jù)源兩種。數(shù)據(jù)源連接方法與進(jìn)度條相似，只是選擇的度量參數(shù)不同。4.網(wǎng)頁組件-卡片卡片組件可以用來展示具有多個參數(shù)的某個主題，比如一個設(shè)備部件的多個關(guān)鍵參數(shù)同時實(shí)時展示，卡片組件的參數(shù)個數(shù)可以自己設(shè)定，該組件在編輯器中的位置和添加方式見圖。4.網(wǎng)頁組件-卡片組件尺寸：包括組件的寬度和高度，單位為像素。組件樣式選擇：有五個樣式可選擇，每個樣式的參數(shù)個數(shù)和展示形式不同。屬性設(shè)置組件名稱：在此處輸入組件名稱。主題：可以設(shè)置組件的主題顏色，當(dāng)前有5種主題色可以選擇。設(shè)置：設(shè)置參數(shù)的行數(shù)、列數(shù)及行列之間的間距值。標(biāo)題排列：從下拉框中選擇所需的樣式；背景填充方式：有居中、拉伸、覆蓋、填充四種方式；背景位置：從下拉框中選擇所需的樣式；文本對齊：設(shè)置文本對齊方式；基礎(chǔ)設(shè)置4.網(wǎng)頁組件-卡片標(biāo)題字體：可選擇標(biāo)題字體樣式。顏色：可設(shè)置標(biāo)題字體的顏色；樣式：設(shè)置標(biāo)題字體的樣式。方向：設(shè)置標(biāo)題字體的方向。水平位置：設(shè)置標(biāo)題字體的水平位置，可以滑動移動條也可以直接輸入數(shù)據(jù)。垂直位置：設(shè)置標(biāo)題字體的垂直位置，可滑動移動條也可直接輸入數(shù)值標(biāo)題字體設(shè)置4.網(wǎng)頁組件-卡片數(shù)值的字體設(shè)置方法與標(biāo)題相同，不展開闡述。4.網(wǎng)頁組件-卡片顏色：設(shè)置數(shù)值1/數(shù)值2/數(shù)值3/數(shù)值4/數(shù)值5/數(shù)值6的字體顏色單位：勾選為單位關(guān)閉即不顯示。背景圖片：數(shù)值的背景圖片設(shè)置。數(shù)值字體單個設(shè)置4.網(wǎng)頁組件-卡片數(shù)據(jù)源設(shè)置卡片組件配置數(shù)據(jù)源時，選擇了數(shù)據(jù)源后，會出現(xiàn)選擇字段，根據(jù)卡片組件的參數(shù)選擇字段，點(diǎn)擊“+”圖標(biāo)即可添加。名稱：在卡片組件上顯示的內(nèi)容；Key：數(shù)據(jù)源的數(shù)據(jù)項(xiàng)名稱；4.網(wǎng)頁組件-卡片控制單元：表示該條件對卡片組件中哪個序號的卡片進(jìn)行判斷；篩選條件：設(shè)置比較符號和對應(yīng)的內(nèi)容來進(jìn)行條件篩選；文本：滿足篩選條件，顯示的文本內(nèi)容；字體顏色：滿足篩選條件，顯示的字體顏色；背景：滿足篩選條件，顯示的背景內(nèi)容。

設(shè)置內(nèi)容判斷條件也可為卡片組件增加判斷條件，實(shí)現(xiàn)不同判斷結(jié)果時展示不同內(nèi)容；5.組件彈框圖片組件、文本組件等是可以設(shè)置彈框，組件彈框主要用來顯示在頁面中未詳盡展示的內(nèi)容，比如在某個設(shè)備名稱或者設(shè)備圖片設(shè)置彈框，當(dāng)鼠標(biāo)滑過或者單擊的時候，可以顯示該設(shè)備的名稱、負(fù)責(zé)人、運(yùn)行狀態(tài)等詳細(xì)信息；比如在車間整體布局中，無法全部展示所有工藝段的工況，則在每個工段可設(shè)置彈框顯示工段更詳細(xì)的信息。本任務(wù)以設(shè)置圖片組件的彈框進(jìn)行示例說明，當(dāng)需要設(shè)置圖片的彈框時，如右圖所示：選中待添加圖片彈框功能的圖片；打開圖片屬性中的圖片彈框功能，此時會出現(xiàn)彈框；選中彈框，即可設(shè)置彈框顯示內(nèi)容的屬性。5.組件彈框蒙層背景：勾選后的效果是，顯示彈框時頁面會被蒙層遮住，以突出彈框內(nèi)容；內(nèi)容來源：有兩種來源，一種是頁面連接，一種是在彈框上設(shè)置；彈框類型：有“panel中顯示”和“panel外顯示”兩種類型可選；位置設(shè)置：有拖動、跟隨組件、頁面居中的方式，分別表示可以拖動彈框、或者跟隨組件位置、或者在頁面居中顯示；觸發(fā)方式：有點(diǎn)擊和劃過兩種觸發(fā)方式，點(diǎn)擊表示需要單擊組件才會出現(xiàn)彈框，劃過是只要鼠標(biāo)劃過組件即可出現(xiàn)彈框關(guān)閉方式：有點(diǎn)擊和劃過兩種關(guān)閉方式；播放方式：有繼續(xù)播放和從頭播放兩種方式。彈窗設(shè)置5.組件彈框?qū)傩栽O(shè)置位置尺寸：設(shè)置彈框的長寬尺寸和位置，XY是設(shè)置組件的高度和寬度，單位為像素；WH是組件的寬度和高度。壁紙：有6種壁紙可以選擇；標(biāo)題：輸入彈框的標(biāo)題名稱；邊框主題：有6種邊框主題；背景圖片：選擇合適背景圖片；背景色：設(shè)置背景的顏色；5.組件彈框?qū)傩栽O(shè)置字體：設(shè)置字體形式；字重：設(shè)置文字粗細(xì)、顏色、大小和行間距；邊框：設(shè)置彈框邊框的線型和線型粗細(xì)；邊框顏色：設(shè)置彈框邊框的顏色；對齊：設(shè)置標(biāo)題的對齊格式；128THANKYOU

項(xiàng)目二：生產(chǎn)制造的可視化設(shè)計(jì)3設(shè)計(jì)設(shè)備駕駛艙頁面>>※任務(wù)實(shí)施《工業(yè)可視化》/《工業(yè)可視化》/目錄1.任務(wù)分析2.創(chuàng)建數(shù)據(jù)源3.創(chuàng)建項(xiàng)目4.設(shè)置設(shè)備狀態(tài)數(shù)5.設(shè)置折線圖數(shù)據(jù)6.設(shè)置日歷篩選器7.設(shè)置分段篩選器8.預(yù)覽驗(yàn)證頁面效果1.任務(wù)分析根據(jù)任務(wù)描述，在已有項(xiàng)目模板的基礎(chǔ)上，要完成“車間設(shè)備駕駛艙”可視化展示大屏設(shè)計(jì)，還需要完成的工作分析如下：創(chuàng)建數(shù)據(jù)源，需要創(chuàng)建“生產(chǎn)設(shè)備駕駛艙”所有展示數(shù)據(jù)的數(shù)據(jù)源；設(shè)備效率指標(biāo)已經(jīng)由由工業(yè)大數(shù)據(jù)工程師計(jì)算處理完成并落盤到到數(shù)據(jù)庫，數(shù)據(jù)庫信息已給出，源數(shù)據(jù)庫中的表包含：生產(chǎn)設(shè)備駕駛艙、鏜床設(shè)備指標(biāo)、銑床設(shè)備指標(biāo)、焊接機(jī)器人設(shè)備指標(biāo)、生產(chǎn)耗電費(fèi)用、生產(chǎn)耗電量、總產(chǎn)量等；創(chuàng)建項(xiàng)目，通過導(dǎo)入生產(chǎn)設(shè)備駕駛艙模板的項(xiàng)目ID創(chuàng)建項(xiàng)目，將模板畫面中的組件關(guān)聯(lián)對應(yīng)的數(shù)據(jù)源，完成車間設(shè)備工作狀態(tài)數(shù)據(jù)的展示。添加日歷篩選器組件，并進(jìn)行屬性設(shè)置、關(guān)聯(lián)對應(yīng)的數(shù)據(jù)源，利用日歷篩選器組件實(shí)現(xiàn)生產(chǎn)設(shè)備數(shù)據(jù)能按某個選中的日期進(jìn)行篩選展示。添加分段篩選器組件，并進(jìn)行屬性設(shè)置、關(guān)聯(lián)對應(yīng)的數(shù)據(jù)源，利用分段篩選器組件實(shí)現(xiàn)生產(chǎn)設(shè)備效率指標(biāo)和生產(chǎn)能耗數(shù)據(jù)能按時間段進(jìn)行趨勢展示。操作步驟2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析連接數(shù)據(jù)庫步驟1：登錄云視界平臺后，選擇左側(cè)“數(shù)據(jù)源”進(jìn)入數(shù)據(jù)源管理頁面，并單擊“+創(chuàng)建數(shù)據(jù)源”標(biāo)簽，如圖所示。2.創(chuàng)建數(shù)據(jù)源連接數(shù)據(jù)庫步驟2：進(jìn)入“創(chuàng)建數(shù)據(jù)源”頁面后，本任務(wù)使用“連接MySQL數(shù)據(jù)庫”創(chuàng)建數(shù)據(jù)源，在“數(shù)據(jù)庫”中單擊“連接MySQL數(shù)據(jù)庫”標(biāo)簽；2.創(chuàng)建數(shù)據(jù)源連接數(shù)據(jù)庫步驟3：在出現(xiàn)的“連接數(shù)據(jù)庫”彈窗中，輸入需要創(chuàng)建的數(shù)據(jù)源名稱及連接的數(shù)據(jù)庫信息如下：2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析連接數(shù)據(jù)庫名稱：可自定義名稱，但不能與“已連接數(shù)據(jù)庫”中的名稱相同，本書示例使用“設(shè)備駕駛艙”的名稱，但是建議在規(guī)模教學(xué)時，不同學(xué)員或讀者在可在該名稱后加自己的名字或其他編號做后綴，避免命名沖突；服務(wù)器：輸入需要連接的數(shù)據(jù)庫所在服務(wù)器的地址；端口：輸入服務(wù)器對應(yīng)的端口號，MySQL數(shù)據(jù)庫默認(rèn)的端口號為3306；數(shù)據(jù)庫：輸入要連接的數(shù)據(jù)庫名，按實(shí)際情況填寫，本書示例使用的“Production_Department”僅供參考；用戶：輸入該數(shù)據(jù)庫的用戶名；密碼：輸入用戶對應(yīng)的密碼。2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析連接數(shù)據(jù)庫步驟4：單擊“測試”標(biāo)簽，如果測試成功會有成功的提示，如圖所示，最后單擊“連接數(shù)據(jù)庫”完成數(shù)據(jù)源的創(chuàng)建。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟1：成功創(chuàng)建“連接數(shù)據(jù)庫”后，在下方“已連接數(shù)據(jù)庫”中會顯示前面步驟創(chuàng)建的“設(shè)備駕駛艙”數(shù)據(jù)庫，單擊打開“設(shè)備駕駛艙”數(shù)據(jù)庫。2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析創(chuàng)建數(shù)據(jù)表步驟2：在“測試數(shù)據(jù)庫”彈窗中，可以看到連接的數(shù)據(jù)庫中的表；單擊左側(cè)某個表，在中間的預(yù)覽區(qū)可以看到該數(shù)據(jù)表的名稱及表中的數(shù)據(jù)，可以對“數(shù)據(jù)表名稱”進(jìn)行修改。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟3：本任務(wù)選擇創(chuàng)建“總產(chǎn)量”“生產(chǎn)耗電費(fèi)用”“銑床設(shè)備指標(biāo)”“焊接機(jī)器人設(shè)備指標(biāo)”“設(shè)備駕駛艙”“鏜床設(shè)備指標(biāo)”“生產(chǎn)耗電量”的數(shù)據(jù)表表；并分別對應(yīng)一一修改其數(shù)據(jù)表名稱，建議以讀者或?qū)W員姓名或編號做后綴，避免名稱沖突。2.創(chuàng)建數(shù)據(jù)源（1）

任務(wù)分析創(chuàng)建數(shù)據(jù)表步驟4：把“自動更新”后的切換按鈕切換到“啟動”標(biāo)簽狀態(tài)；單擊配置更新標(biāo)簽，在“更新配置”彈窗中編輯數(shù)據(jù)表的更新方式和更新時間，如圖所示，本書示例使用“增量更新”方式，固定20:00更新。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟5：完成配置后，單擊關(guān)閉“更新配置”彈窗的“X”符號，并單擊“新建”按鈕完成數(shù)據(jù)源的創(chuàng)建。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟6：新建數(shù)據(jù)源完成后，會自動跳轉(zhuǎn)出來數(shù)據(jù)源詳情，用戶可以在該頁中單擊右上角的“”標(biāo)簽，維護(hù)該數(shù)據(jù)源的信息。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表說明：如果數(shù)據(jù)源的表頭的數(shù)據(jù)類型導(dǎo)入錯誤，可以手動進(jìn)行調(diào)整修改，如上圖所示，包含數(shù)字、字符、日期這三種數(shù)據(jù)類型。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟7：單擊數(shù)據(jù)源詳情頁上的“數(shù)據(jù)源”標(biāo)簽，返回到數(shù)據(jù)源列表。2.創(chuàng)建數(shù)據(jù)源創(chuàng)建數(shù)據(jù)表步驟8：回到數(shù)據(jù)源列表，可以查看所有用戶已經(jīng)創(chuàng)建或別人授權(quán)的數(shù)據(jù)源，如圖所示，可以在操作列單擊“”，會彈出操作內(nèi)容框，可以對數(shù)據(jù)源進(jìn)行刪除、重命名、權(quán)限設(shè)置、查看數(shù)據(jù)源引用，其中查看數(shù)據(jù)源引用可以查看到該數(shù)據(jù)源被哪些頁面引用。3.創(chuàng)建項(xiàng)目創(chuàng)建項(xiàng)目（1）切換返回到云視界概覽頁面，單擊“創(chuàng)建項(xiàng)目”，在彈框中單擊“導(dǎo)入項(xiàng)ID”。3.創(chuàng)建項(xiàng)目（1）

任務(wù)分析導(dǎo)入項(xiàng)目（2）在“導(dǎo)入項(xiàng)目”彈窗中，輸入“項(xiàng)目ID”“授權(quán)碼”“項(xiàng)目名稱”等信息，如圖所示。建議在規(guī)模教學(xué)時，不同學(xué)員在可在“項(xiàng)目名稱”后加自己的名字或其他編號做后綴，避免命名沖突。3.創(chuàng)建項(xiàng)目導(dǎo)入項(xiàng)目（3）導(dǎo)入項(xiàng)目后會直接跳轉(zhuǎn)到編輯界面。4.設(shè)置設(shè)備狀態(tài)數(shù)設(shè)置狀態(tài)數(shù)（1）頁面切換到圖層，找到“各狀態(tài)設(shè)備數(shù)→在線數(shù)”的文本，切換到數(shù)據(jù)源，類型選擇數(shù)據(jù)源，數(shù)據(jù)源選擇“設(shè)備駕駛艙_示例”，取值選擇“在線數(shù)”完成數(shù)據(jù)源的配置，如圖所示。用同樣的操作方法，設(shè)置“開機(jī)數(shù)”“作業(yè)數(shù)”“停機(jī)數(shù)”等不同設(shè)備狀態(tài)下的數(shù)量。注意：如果在創(chuàng)建數(shù)據(jù)源時，沒有把對應(yīng)的取值數(shù)據(jù)改為“N數(shù)字”類型，則無法在取值框中呈現(xiàn)。4.設(shè)置設(shè)備狀態(tài)數(shù)（1）

任務(wù)分析設(shè)置儀表盤數(shù)據(jù)源（2）從圖層中選中“總開機(jī)率儀表盤”，切換到數(shù)據(jù)源，數(shù)據(jù)源選擇“設(shè)備駕駛艙_示例”，度量選擇“開機(jī)率”，如圖所示。并按照同樣的操作方法，設(shè)置“總作業(yè)率”“總利用率”等其他儀表盤的數(shù)據(jù)源。4.設(shè)置設(shè)備狀態(tài)數(shù)（1）

任務(wù)分析設(shè)置數(shù)據(jù)源（3）按照同樣的操作步驟，對應(yīng)設(shè)置銑床、鏜床、焊接機(jī)器人區(qū)域的指標(biāo)的數(shù)據(jù)源。5.設(shè)置折線圖數(shù)據(jù)（1）

任務(wù)分析設(shè)置折線圖數(shù)據(jù)源（1）設(shè)置頁面中右上角折線圖的數(shù)據(jù)源，數(shù)據(jù)源選擇“生產(chǎn)耗電量_示例”，維度選擇日期，度量選擇鏜床耗電量、銑床耗電量、機(jī)器人耗電量。5.設(shè)置折線圖數(shù)據(jù)（1）

任務(wù)分析設(shè)置折線圖數(shù)據(jù)源（2）用同樣的操作方法，設(shè)置另外2個折線圖的數(shù)據(jù)源，分別選擇展示“生產(chǎn)耗電費(fèi)用_示例”“總產(chǎn)量_示例”的數(shù)據(jù)，如下圖所示。設(shè)置完成后，記得保存，刷新數(shù)據(jù)可看到顯示效果。６.

設(shè)置日歷篩選圖為展示頁面添加日歷“篩選器”組件，可以實(shí)現(xiàn)通過日歷篩選器選擇查看某日的車間設(shè)備駕駛艙情況。設(shè)計(jì)日歷篩選器（1）切換到“網(wǎng)頁組件”；找到“篩選器”中的“日歷”，單擊拖拽到大屏的合適位置設(shè)置屬性（2）設(shè)置日歷篩選器的屬性如圖所示，注意設(shè)置背景色時，需要把透明度調(diào)為100%才會顯示。６.

設(shè)置日歷篩選圖設(shè)置數(shù)據(jù)源（3）選中日歷篩選器的狀態(tài)下，切換到數(shù)據(jù)源進(jìn)行數(shù)據(jù)源設(shè)置，如圖所示，“影響范圍”選擇“當(dāng)前頁面”；通過單擊“+”圖標(biāo)來增加數(shù)據(jù)源。６.

設(shè)置日歷篩選圖設(shè)置數(shù)據(jù)源本步驟使用的數(shù)據(jù)源是“設(shè)備駕駛艙_示例、銑床設(shè)備指標(biāo)_示例、鏜床設(shè)備指標(biāo)_示例、焊接機(jī)器人設(shè)備指標(biāo)_示例”，4個數(shù)據(jù)源的度量全部選擇“日期”如下圖所示，設(shè)置完成記得保存。６.

設(shè)置日歷篩選圖設(shè)計(jì)分段篩選器（1）切換到“網(wǎng)頁組件”；找到“篩選器”中的“分段篩選器”，單擊拖拽到大屏的合適位置，根據(jù)審美偏好進(jìn)行屬性設(shè)置。7.設(shè)置分段篩選圖設(shè)計(jì)分段篩選器（2）選中分段篩選器的狀態(tài)下，切換到數(shù)據(jù)源進(jìn)行數(shù)據(jù)源設(shè)置，“影響范圍”選擇“當(dāng)前頁面”，如圖所示；通過單擊“+”圖標(biāo)來增加數(shù)據(jù)源。7.設(shè)置分段篩選圖設(shè)計(jì)分段篩選器本步驟使用的數(shù)據(jù)源是“生產(chǎn)耗電量_示例、生產(chǎn)耗電費(fèi)用_示例、總產(chǎn)量_示例”，3個數(shù)據(jù)源的度量全部選擇“日期”如圖所示，設(shè)置完成記得保存。7.設(shè)置分段篩選圖預(yù)覽效果（1）保存頁面之后，單擊“預(yù)覽”標(biāo)簽，出現(xiàn)預(yù)覽頁面后可看到由于尺寸不符合，頁面會出現(xiàn)變形狀態(tài)，因此單擊選擇全屏模式。8.預(yù)覽驗(yàn)證頁面效果預(yù)覽效果（2）全屏顯示“生產(chǎn)設(shè)備駕駛艙”畫面后，單擊“查詢?nèi)掌凇焙蟮娜諝v標(biāo)簽選擇某一日期，如2022年7月15日，屏幕左側(cè)呈現(xiàn)即為2022年7月15日車間當(dāng)日的設(shè)備工作狀態(tài)數(shù)據(jù)；單擊“日期篩選”后的日期，選擇某一時段，如2022年7月01日-2022年7月15日，即為當(dāng)前選擇時段的曲線趨勢。8.預(yù)覽驗(yàn)證頁面效果163THANKYOU

《工業(yè)可視化》/項(xiàng)目二：生產(chǎn)制造的可視化設(shè)計(jì)3設(shè)計(jì)設(shè)備駕駛艙頁面>>※任務(wù)說明《工業(yè)可視化》/任務(wù)描述01學(xué)習(xí)目標(biāo)02目錄01任務(wù)描述馮工之前做過類似項(xiàng)目，因此已經(jīng)有了生產(chǎn)設(shè)備駕駛艙的頁面模板，但是模板中的數(shù)據(jù)源需要替換為H集團(tuán)的生產(chǎn)設(shè)備的數(shù)據(jù)。因此在本任務(wù)中，馮工需要使用生產(chǎn)設(shè)備駕駛艙的模板，根據(jù)項(xiàng)目的工業(yè)數(shù)據(jù)工程師提供的H集團(tuán)的數(shù)據(jù)庫連接信息，重新創(chuàng)建數(shù)據(jù)源，配置頁面中各組件的數(shù)據(jù)源。此外需要本任務(wù)中添加篩選器，便于使用人員查看不同日期下的設(shè)備效率指標(biāo)、查看不同時間段的設(shè)備效率指標(biāo)和能耗指標(biāo)趨勢。生產(chǎn)設(shè)備駕駛艙的模板展示的如下圖所示：02學(xué)習(xí)目標(biāo)了解設(shè)備效率指標(biāo)開機(jī)率、作業(yè)率、利用率、故障率、瓶頸率、冗余率的概念、計(jì)算公式及作用。熟悉數(shù)據(jù)源及其權(quán)限，并熟悉其數(shù)據(jù)源的創(chuàng)建方法。熟悉連接MySQL數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)源的方法。熟悉通過MySQL數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)表的方法。熟悉日歷、分段篩選器兩種組件的功能。熟悉日歷組件的添加方式、屬性設(shè)置和數(shù)據(jù)源的關(guān)聯(lián)方法。熟悉分段篩選器組件的添加方式、屬性設(shè)置和數(shù)據(jù)源的關(guān)聯(lián)方法。能創(chuàng)建MySQL數(shù)據(jù)庫作為可視化設(shè)計(jì)平臺的數(shù)據(jù)源并創(chuàng)建數(shù)據(jù)表。能添加日歷、分段篩選器兩種組件，并進(jìn)行屬性設(shè)置。能設(shè)置日歷組件實(shí)現(xiàn)數(shù)據(jù)可按日期篩選顯示。能設(shè)置分段篩選器組件實(shí)現(xiàn)數(shù)據(jù)按時間段篩選顯示。知識目標(biāo)技能目標(biāo)《工業(yè)可視化》/項(xiàng)目二：生產(chǎn)制造的可視化設(shè)計(jì)3設(shè)計(jì)設(shè)備駕駛艙頁面>>※知識準(zhǔn)備《工業(yè)可視化》/目錄設(shè)備效率指標(biāo)01數(shù)據(jù)源及其權(quán)限02網(wǎng)頁組件-日歷篩選器03網(wǎng)頁組件-分段篩選器041.設(shè)備效率指標(biāo)利用率反映設(shè)備工作狀態(tài)及生產(chǎn)效率的技術(shù)經(jīng)濟(jì)指標(biāo)。在一般的工業(yè)生產(chǎn)企業(yè)當(dāng)中，設(shè)備投資通常在總投資中占較大的比例。因此，設(shè)備能否充分利用，直接關(guān)系到投資效益，提高設(shè)備的利用率，等于相對降低了產(chǎn)品成本。企業(yè)的管理者在進(jìn)行生產(chǎn)決策的時候，是要充分認(rèn)識到這一點(diǎn)的。本任務(wù)設(shè)計(jì)的設(shè)備駕駛艙頁面需要展示生產(chǎn)設(shè)備的設(shè)備效率指標(biāo)，是因?yàn)楣I(yè)生產(chǎn)企業(yè)對于生產(chǎn)設(shè)備的監(jiān)控和考核，一般是通過設(shè)備的效率指標(biāo)進(jìn)行客觀評價(jià)，當(dāng)然不同的企業(yè)因行業(yè)及企業(yè)發(fā)展規(guī)模不同，對這些效率指標(biāo)的認(rèn)可度和計(jì)算公式也不同，本書僅提出一個普遍參考。（1）利用率1.設(shè)備效率指標(biāo)利用率可以理解為設(shè)備的使用效率，其計(jì)算公式為：日歷利用率=實(shí)際作業(yè)時長/日歷時長×100%計(jì)劃利用率=實(shí)際作業(yè)時長/計(jì)劃作業(yè)時長×100%日歷利用率反映了設(shè)備的完全利用狀況，也就是說即使是單班運(yùn)行的設(shè)備，我們也按照24小時計(jì)算日歷時間，因?yàn)闊o論工廠是否使用這臺設(shè)備，都以折舊形式消耗著企業(yè)的資產(chǎn)。注：不同企業(yè)會根據(jù)企業(yè)的生產(chǎn)計(jì)劃特點(diǎn)來選擇日歷利用率還是計(jì)劃利用率進(jìn)行衡量設(shè)備的使用效率。以下的開機(jī)率、作業(yè)率等情況類似，本書統(tǒng)一以日歷時長來計(jì)算，下文的指標(biāo)不再特別標(biāo)注計(jì)劃時長。計(jì)劃利用率反映了設(shè)備的計(jì)劃利用狀況。例如企業(yè)是單班運(yùn)行，其計(jì)劃生產(chǎn)作業(yè)時間是8小時，實(shí)際作業(yè)運(yùn)行時長為7小時，則其計(jì)劃利用率為87.5%，日歷利用率為29.17%。1.設(shè)備效率指標(biāo)設(shè)備開機(jī)率代表設(shè)備實(shí)際開機(jī)的時長與日歷時長的比率。如果從不同子公司或不同車間進(jìn)行開機(jī)率分析，可以識別企業(yè)經(jīng)營情況，各產(chǎn)品市場情況，哪些部門的產(chǎn)品線充足，哪些產(chǎn)品線不景氣。而如果從對各工藝段開機(jī)率做出分析，識別生產(chǎn)現(xiàn)場節(jié)拍平衡情況，了解開機(jī)率相對異常工藝段，并找出原因。開機(jī)率的計(jì)算公式如下：開機(jī)率=實(shí)際開機(jī)時長/日歷開機(jī)時長×100%（2）開機(jī)率開機(jī)率的高低因季節(jié)、一天中的時段、地理區(qū)域、目標(biāo)市場及實(shí)際工況需要的不同而不同。開機(jī)率能夠可以反映設(shè)備的工作情況。例如，某設(shè)備實(shí)際開機(jī)時間為15小時，應(yīng)工作時間為24小時，則該設(shè)備的開機(jī)率為62.5%。設(shè)備開機(jī)率為62.5%1.設(shè)備效率指標(biāo)作業(yè)率可以理解為單位時間內(nèi)的設(shè)備工作效率。作業(yè)率可用于制定工程保障和工程作業(yè)計(jì)劃時，計(jì)算所需人力、工程機(jī)械設(shè)備和時間的多少等。對各部門，各個技術(shù)員工的作業(yè)率進(jìn)行分析，識別員工在工業(yè)現(xiàn)場無價(jià)值的活動，比如等待、找工具等活動。對相同工藝段作業(yè)率進(jìn)行對比，可以識別效率低的工藝段。（3）作業(yè)率例如，某生產(chǎn)設(shè)備的實(shí)際作業(yè)時長為6小時，實(shí)際開機(jī)時長為12小時，則該設(shè)備的作業(yè)率為50%。作業(yè)率的計(jì)算公式如下：作業(yè)率=實(shí)際作業(yè)時長/實(shí)際開機(jī)時長×100%1.設(shè)備效率指標(biāo)本教材的故障率是指故障停機(jī)率，表示設(shè)備實(shí)際處于故障停機(jī)時長與日歷時長之間的比率。其計(jì)算公式如下：故障率=故障時長/日歷時長×100%（4）故障率故障率的高低能夠一定程度上反映該設(shè)備的設(shè)計(jì)工藝、生產(chǎn)流程、人員操作、工作環(huán)境等方面是否存在問題，對于故障率高的設(shè)備可以針對存在的問題進(jìn)行改進(jìn)。冗余率是設(shè)備處于冗余狀態(tài)的時間占日歷時長的比率。冗余率體現(xiàn)了設(shè)備的空閑程度，為用戶合理規(guī)劃和使用該設(shè)備臺套數(shù)提供參考，如冗余率低時可適當(dāng)減少設(shè)備的臺套數(shù)。而設(shè)備的冗余狀態(tài)一般由用戶自己定義，比如設(shè)備開機(jī)率小于某個指定的值（通常取10%）則認(rèn)為該設(shè)備處于冗余狀態(tài)。1.設(shè)備效率指標(biāo)瓶頸率主要是針對整個公司、生產(chǎn)車間或某產(chǎn)線中，設(shè)備處于瓶頸狀態(tài)的時長與日歷時長的比率。瓶頸率體現(xiàn)了設(shè)備的繁忙程度，對于瓶頸率太高的設(shè)備用戶可以考慮增加設(shè)備臺套數(shù)、改進(jìn)工藝等解除瓶頸。而設(shè)備的瓶頸狀態(tài)一般由工業(yè)生產(chǎn)企業(yè)自己定義，比如有些企業(yè)設(shè)置其生產(chǎn)設(shè)備的利用率大于某個指定的值（比如