《工業(yè)可視化》課件 任務(wù)3.2 設(shè)計售后服務(wù)信息頁面 -知識準(zhǔn)備

《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程湖南三一工業(yè)職業(yè)技術(shù)學(xué)院項目三：后市場服務(wù)的可視化設(shè)計任務(wù)3.2設(shè)計售后服務(wù)信息頁面>>※知識準(zhǔn)備《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄控件組件-力矩百分比01圖表組件-餅圖02網(wǎng)頁組件-標(biāo)簽頁031.控件組件-力矩百分比力矩百分比可以顯示數(shù)值所占比例，或者某個信息的數(shù)值，如速度、溫度等；其在控件組件下，使用時直接拖拽到頁面即可，如下圖所示，力矩百分比的屬性設(shè)置內(nèi)容如所示，數(shù)據(jù)源設(shè)置同直線進度條。1.控件組件-力矩百分比位置尺寸：XY是設(shè)置組件的高度和寬度，單位為像素；WH是組件的寬度和高度；

設(shè)置內(nèi)容屬性顯示：可選居中或填滿標(biāo)題、百分比：可勾選顯示，不勾選隱藏選擇主題：可選擇組件的主題顏色標(biāo)題：標(biāo)題顯示的內(nèi)容，可自定義修改字體：選擇字體方向：字體的排列方向字重：字體粗細顏色：字體顏色1.控件組件-力矩百分比屬性設(shè)置數(shù)值顯示：可選擇百分比或者數(shù)值，如果選擇百分比，則數(shù)據(jù)后會有“%”符號；顯示：可設(shè)置組件數(shù)據(jù)的最小值和最大值顏色：可設(shè)置組件顯示的顏色，可設(shè)置漸變色邊框：設(shè)置組件的邊框，可以選擇無、虛線、實線程度標(biāo)記：可設(shè)置條件，當(dāng)數(shù)值在大于某個閾值時，顯示提示顏色2.圖表組件-餅圖餅圖屬于圖表組件，餅圖用于分析數(shù)據(jù)的簡單占比，用戶可以通過餅圖很直觀的看到每一個部分在整體中所占的比例，幫助用戶快速了解數(shù)據(jù)的占比分配。使用時，從圖表組件中拖拽餅圖到頁面的位置即可，如圖所示。餅圖不適用于多分類的數(shù)據(jù)，因為隨著分類的增多，每個切片就會變小，最后導(dǎo)致大小區(qū)分不明顯，每個切片看上去都差不多大小，這樣對于數(shù)據(jù)的對比是沒有什么意義的。所以餅圖不適合用于數(shù)據(jù)量大且分類很多的場景。2.圖表組件-餅圖位置尺寸：XY是設(shè)置組件的高度和寬度，單位為像素；WH是組件的寬度和高度可選擇實心餅圖或者環(huán)狀圖樣式設(shè)置內(nèi)容2.圖表組件-餅圖顯示：可選居中或填滿圖例、數(shù)值標(biāo)簽：可勾選顯示，不勾選隱藏選擇主題：可選擇組件的主題顏色數(shù)值樣式：可選擇顯示百分比或者數(shù)值。圖表字體：選擇字體。字號：設(shè)置字體大小。字重：設(shè)置字體粗細。顏色：設(shè)置字體顏色。屬性2.圖表組件-餅圖半徑：可調(diào)節(jié)餅圖的半徑背景色：可為餅圖設(shè)置背景色如果想要重置屬性的參數(shù)，可單擊“重置主題樣式”恢復(fù)初始值。圖表樣式2.圖表組件-餅圖數(shù)據(jù)源設(shè)置數(shù)據(jù)源：選擇需要關(guān)聯(lián)的數(shù)據(jù)表；度量：展示餅圖的組成數(shù)據(jù)源過濾：單擊“+”圖標(biāo)可彈出“添加過濾”彈窗，可設(shè)置“條件過濾”“日期過濾”“排序”參與組件過濾：勾選時，本組件的數(shù)據(jù)源將參與本頁面的其它篩選器的篩選。3.網(wǎng)頁組件-標(biāo)簽頁標(biāo)簽頁組件是比較常用的網(wǎng)頁組件之一，方便用戶在一個頁面中對多個報表頁面進行集中查看。標(biāo)簽頁組件通過配置選項卡切換，滿足企業(yè)人員對業(yè)務(wù)平級內(nèi)容切換展示。標(biāo)簽組件可以在“基礎(chǔ)組件→網(wǎng)頁→標(biāo)簽頁”中找到，使用時直接拖拽到頁面位置即可。3.網(wǎng)頁組件-標(biāo)簽頁位置尺寸：XY是設(shè)置組件的高度和寬度，單位為像素；WH是組件的寬度和高度；主題：可以設(shè)置組件的主題顏色；當(dāng)前有5種主題色供選擇；屬性設(shè)置3.網(wǎng)頁組件-標(biāo)簽頁標(biāo)簽文本樣式，即設(shè)置標(biāo)簽未選中時的顯示效果。屬性設(shè)置字體：設(shè)置字體樣式；方向：設(shè)置文本方向，包括橫向和縱向；字重：設(shè)置文字粗細；字體顏色：設(shè)置文字的顏色字號：設(shè)置文字的大小；背景色：設(shè)置組件的背景顏色；邊框：可以設(shè)置組件的邊框顏色，還可設(shè)置組件的邊框類型，包括實線、虛線、無邊框，手動輸入數(shù)值或單擊改變邊框粗細；3.網(wǎng)頁組件-標(biāo)簽頁標(biāo)簽高度樣式，即設(shè)置標(biāo)簽選中時的顯示效果z標(biāo)簽高度樣式，即設(shè)置標(biāo)簽選中時的顯示效果。字體：可選擇字體樣式；字重：設(shè)置文字粗細；字體顏色：設(shè)置文字的顏色；字號：設(shè)置文字的大小背景色：設(shè)置高亮標(biāo)簽的背景顏色；邊框：設(shè)置標(biāo)簽的邊框顏色，可設(shè)置組件的邊框類型，包括實線、虛線、無邊框。手動輸入數(shù)值或單擊改變邊框粗細；屬性設(shè)置3.網(wǎng)頁組件-標(biāo)簽頁標(biāo)簽：可選擇顯示或隱藏標(biāo)簽；滾動時間：點擊下拉框可設(shè)置標(biāo)簽頁滾動的時間，也就是多個標(biāo)簽之間的滾動呈現(xiàn)；標(biāo)簽屬性3.網(wǎng)頁組件-標(biāo)簽頁添加標(biāo)簽，可單擊“+”圖標(biāo)添加標(biāo)簽頁，單擊刪除，可選中標(biāo)簽進行編輯；文本：可選中標(biāo)簽進行編輯；順序：輸入數(shù)字可以更改標(biāo)簽頁順序；3.網(wǎng)頁組件-標(biāo)簽頁標(biāo)簽頁組件的“關(guān)聯(lián)組件”設(shè)置，可從屬性中選中單個標(biāo)簽分別進行對其進行組件關(guān)聯(lián)，通過標(biāo)簽和其他組件的關(guān)聯(lián)，可以通過切換顯示其關(guān)聯(lián)的組件內(nèi)容。標(biāo)簽數(shù)據(jù)源可以設(shè)置為：無、物模型、數(shù)據(jù)源；如果選擇為無，則只能顯示默認的文字內(nèi)容；如果關(guān)聯(lián)物模型，則顯示直連物模型的實時采集數(shù)據(jù)；如果選擇為數(shù)據(jù)源則顯示用戶創(chuàng)建的數(shù)據(jù)源。通過“啟動”鈕，此時，頁面內(nèi)的組件會出現(xiàn)可單擊選中的圓圈，選中頁面已存在的組件的圓圈，即可與標(biāo)簽關(guān)聯(lián)。選中關(guān)聯(lián)3.網(wǎng)頁組件-標(biāo)簽頁關(guān)聯(lián)組件設(shè)置數(shù)據(jù)源：標(biāo)簽組件也可以關(guān)聯(lián)數(shù)據(jù)源，對數(shù)據(jù)源中的取值進行判斷，從而根據(jù)判斷條件顯示不同的標(biāo)簽，數(shù)據(jù)源設(shè)置與文本組件設(shè)置同；數(shù)據(jù)源過濾：設(shè)置數(shù)據(jù)過濾的條件，進行過濾操作；添加條件：單擊“+”圖標(biāo)添加條件，單擊圖標(biāo)刪除；篩選條件：設(shè)置具體的條件進行選擇；標(biāo)簽：設(shè)置滿足條件時，顯示標(biāo)簽；未滿足