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

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

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