概述

本章節(jié)主要介紹VISION界面的構(gòu)成以及各個(gè)板塊的功能，如果你已經(jīng)對(duì)此有一定了解，可以跳過(guò)此章節(jié)。

VISION/FUXA主要由3個(gè)視圖組成：首頁(yè)（啟動(dòng)視圖）、實(shí)驗(yàn)室（測(cè)試視圖）、編輯器（編輯視圖）。點(diǎn)擊左下角的功能按鈕，可以切換不同的視圖界面，如圖所示：

首頁(yè)

首頁(yè)是啟動(dòng)視圖，也是VISION/FUXA主頁(yè)面，用于顯示設(shè)計(jì)好的組態(tài)畫(huà)面。

實(shí)驗(yàn)室

實(shí)驗(yàn)室是測(cè)試視圖，支持手動(dòng)修改數(shù)據(jù)點(diǎn)的值，來(lái)測(cè)試組態(tài)界面是否正常運(yùn)行。從而實(shí)現(xiàn)組態(tài)畫(huà)面調(diào)試無(wú)需連接真實(shí)設(shè)備，前后端完全分離。

編輯器

編輯器是編輯視圖，即組態(tài)編輯頁(yè)面，接下來(lái)重點(diǎn)介紹編輯器的使用方法。請(qǐng)根據(jù)右側(cè)的大綱目錄查看。

菜單

1. 項(xiàng)目

1.1. 新建項(xiàng)目

點(diǎn)擊即可新建項(xiàng)目，但是當(dāng)前項(xiàng)目會(huì)丟失，請(qǐng)謹(jǐn)慎操作。

1.2. 保存項(xiàng)目

點(diǎn)擊即可保存當(dāng)前項(xiàng)目。

1.3. 下載項(xiàng)目

點(diǎn)擊即可下載當(dāng)前項(xiàng)目，以Json文件存儲(chǔ)，在需要時(shí)可以重新導(dǎo)入。

1.4. 打開(kāi)項(xiàng)目

點(diǎn)擊即可選取之前下載的項(xiàng)目導(dǎo)入。

1.5. 重命名項(xiàng)目

重新修改項(xiàng)目名稱(chēng)。

2. 設(shè)置

2.1. 視圖

無(wú)論當(dāng)前在哪個(gè)頁(yè)面，點(diǎn)擊即可跳轉(zhuǎn)到編輯器主視圖。

2.2. 線(xiàn)形圖

此處設(shè)置線(xiàn)形圖的數(shù)據(jù)源，以供控件線(xiàn)形圖調(diào)用。詳情參考：

2.3. 布局設(shè)置

2.3.1. 啟動(dòng)視圖

一個(gè)項(xiàng)目可以創(chuàng)建多個(gè)視圖，此處可指定啟動(dòng)視圖。

2.3.2. 啟動(dòng)時(shí)顯示登陸彈窗

當(dāng)使用權(quán)限管理時(shí)，請(qǐng)打開(kāi)此選項(xiàng)。登錄窗口如圖所示：

2.3.3. 縮放

禁用：當(dāng)使用EV8010自帶觸摸屏?xí)r，請(qǐng)禁用縮放，且將畫(huà)布設(shè)置為：1280*798以消除滾動(dòng)條。

手動(dòng)：當(dāng)使用EG8200Pro外接HDMI顯示屏?xí)r，請(qǐng)選擇手動(dòng)縮放，以消除滾動(dòng)條。

自動(dòng)：自動(dòng)模式下無(wú)法消除滾動(dòng)條。

2.3.4. 輸入彈窗

當(dāng)需要輸入信息時(shí)，一般選擇虛擬鍵盤(pán)。

2.3.5. 顯示導(dǎo)航

設(shè)置是否顯示導(dǎo)航欄（包括側(cè)邊菜單和頁(yè)眉導(dǎo)航）。

2.3.6. 顯示連接錯(cuò)誤

設(shè)置是否在右下角以彈窗的形式顯示連接錯(cuò)誤信息。

2.3.7. 側(cè)邊菜單

設(shè)置側(cè)邊菜單的顯示樣式。

2.3.8. 頁(yè)眉導(dǎo)航

設(shè)置頁(yè)眉導(dǎo)航的顯示樣式。

2.4. 條形圖

此處設(shè)置條形圖的數(shù)據(jù)源，以供控件條形圖調(diào)用。詳情參考：https://iotrouter.yuque.com/zn3vdn/ev/dyen7nbh5fmmuicz

2.5. 連接

此處設(shè)置VISION數(shù)據(jù)通信的協(xié)議，詳情請(qǐng)參考：

此處為語(yǔ)雀內(nèi)容卡片，點(diǎn)擊鏈接查看：見(jiàn)文末

2.6. 用戶(hù)

可以創(chuàng)建新的用戶(hù)，并可以為用戶(hù)分配角色，按照角色分類(lèi)對(duì)其進(jìn)行權(quán)限劃分。詳情請(qǐng)參考：見(jiàn)文末

2.7. 設(shè)置

2.7.1. 語(yǔ)言

支持多種語(yǔ)言。

2.7.2. 端口

請(qǐng)勿修改。

2.7.3. 令牌

是否使用令牌進(jìn)行認(rèn)證，當(dāng)使用權(quán)限時(shí)請(qǐng)啟用。

2.7.4. 廣播

是否向所有組態(tài)客戶(hù)端廣播標(biāo)簽值。

2.7.5. 日志

是否使用日志完整模式。

2.7.6. DAQ存儲(chǔ)

數(shù)據(jù)庫(kù)設(shè)置，支持SQlite、influxDB、TDengine。詳情請(qǐng)參考：

此處為語(yǔ)雀內(nèi)容卡片，點(diǎn)擊鏈接查看：見(jiàn)文末

2.7.7. 報(bào)警

報(bào)警記錄保存時(shí)間。

2.8. 日志

日志信息。

2.9. 警報(bào)

用戶(hù)可以指定某些數(shù)據(jù)標(biāo)簽在指定范圍時(shí)產(chǎn)生警報(bào)信息。詳情請(qǐng)參考：見(jiàn)文末

2.10. 腳本

用戶(hù)可以自定義Javascript腳本，已實(shí)現(xiàn)一些個(gè)性化的需求。詳情請(qǐng)參考：

此處為語(yǔ)雀內(nèi)容卡片，點(diǎn)擊鏈接查看：見(jiàn)文末

素材庫(kù)

素材庫(kù)第一欄為視圖，用戶(hù)可以自由的新建、復(fù)制、刪除、導(dǎo)入、導(dǎo)出視圖。

其余欄為素材庫(kù)，所有資源都可以選中后在畫(huà)布中使用。

調(diào)色區(qū)

選中控件后，可以快速選擇調(diào)色區(qū)的顏色修改控件的顏色。

畫(huà)布

畫(huà)布用于擺放控件來(lái)實(shí)現(xiàn)組態(tài)。

工具

預(yù)覽：顯示當(dāng)前視圖。

縮放：選中后，單擊畫(huà)布可以放大。

網(wǎng)格：開(kāi)啟/關(guān)閉網(wǎng)格。

撤銷(xiāo)：撤銷(xiāo)。

取消撤銷(xiāo)：取消撤銷(xiāo)。

復(fù)制：復(fù)制選擇的控件。

刪除：刪除選擇的控件。

最下層：置于最下層。

最上層：置于最上層。

超鏈接：設(shè)置超鏈接。

項(xiàng)目列表選擇器：顯示當(dāng)前所有的控件，方便管理。

詳細(xì)教程：https://iotrouter.yuque.com/zn3vdn/ev