數(shù)據(jù)可視化

數(shù)據(jù)可視化服務是一種數(shù)據(jù)分析工具，提供可二次開發(fā)的工具和豐富的可視化組件，助力開發(fā)者通過圖形化界面和交互式操作，快速將復雜的數(shù)據(jù)轉(zhuǎn)化為可視化圖表，幫助用戶更直觀地理解和分析數(shù)據(jù)，從而滿足諸如智慧城市、智慧園區(qū)、智慧安防等一系列可視化大屏場景需求。

一、產(chǎn)品特點

提供豐富的可視化和行業(yè)組件，支持組件自定義接入，內(nèi)置有案例可以參考快速實現(xiàn)搭建，支持多個數(shù)據(jù)源，零代碼拖拽等。

二、技術特點

• fastbee-view 是一個高效低代碼的可拖拽式可視化平臺，圖表或頁面元素已封裝為基礎組件，無需編寫代碼即可快速完成會議展覽、業(yè)務監(jiān)控、風險預警等多業(yè)務需求。
• 技術棧為：Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS
• 使用流程：新建項目-->可以點擊上方編輯名稱-->盡情發(fā)揮拖拉拽編輯頁面-->保存(60s自動保存/手動保存)-->預覽-->發(fā)布（生成地址）

1. 項目運行和部署

• 修改根目錄的 .env.development 文件，配置后端接口地址

# 后端接口地址
VITE_DEV_PATH = 'http://localhost:8080'

• 安裝依賴，建議使用 pnpm，避免不必要的依賴安裝報錯（node 版本推薦 16.14 左右）

# 安裝 pnpm 
npm install -g pnpm

# 安裝項目依賴

# pnpm（建議使用nrm切換到淘寶源 https://registry.npmmirror.com/）
pnpm install

# npm
npm install

# yarn
yarn install

• 啟動項目

# pnpm
pnpm dev

# npm
npm run dev

# yarn
yarn dev

# makefile
make dev

• 編譯

# pnpm
pnpm run build

# npm
npm run build

# yarn
yarn run build

# makefile
make dist

• 部署： Nginx配置文件中添加location ，切記不要用重復的匹配關鍵詞，編譯的文件上傳到 /var/data/nginx/view/ 目錄下

location ^~/view/ {
   alias /var/data/nginx/view/;
   index  index.html;
   try_files $uri $uri/ /index.html last;
}

部署完訪問地址： https://[域名]/view/ ，也可以通過在系統(tǒng)中添加外鏈菜單

# 參考外鏈地址：
https://iot.m.btsdy.com/view/#/project/items

2. 接口說明

項目列表 GET  /goview/project/list
新增項目 POST  /goview/project
保存項目內(nèi)容 POST /goview/project/save/data
修改項目基礎信息/修改發(fā)布狀態(tài)  PUT  /goview/project/
刪除項目 DELETE /goview/project/{ids} 
上傳文件接口  /goview/project/upload
獲取項目 GET /goview/project/getData 此接口涉及到預覽，所以前后端白名單放行

3. 菜單添加

提示

FastBee商業(yè)版本，有系統(tǒng)內(nèi)置大屏和可視化平臺，通過添加菜單方式訪問

• 固定大屏展示菜單

系統(tǒng)管理 -> 菜單管理 -> 新增

上級菜單：數(shù)據(jù)可視化
菜單類型：菜單
菜單圖標：monitor
菜單名稱：大屏展示
是否外鏈：是
顯示排序：1
路由地址：https://iot.m.btsdy.com/bigScreen   # iot.m.btsdy.com 改為自己服務器的地址
是否緩存：緩存
顯示狀態(tài)：顯示
菜單狀態(tài)：正常

• 可視化平臺菜單

系統(tǒng)管理 -> 菜單管理 -> 新增

上級菜單：數(shù)據(jù)可視化
菜單類型：菜單
菜單圖標：monitor
菜單名稱：大屏展示
是否外鏈：是
顯示排序：2
路由地址：https://iot.m.btsdy.com/view   # iot.m.btsdy.com 改為自己服務器的地址
是否緩存：緩存
顯示狀態(tài)：顯示
菜單狀態(tài)：正常

4. 注意事項

• 保證nodejs版本在v16.14.x以上，推薦使用v16.14.2。

• 如果使用npm install安裝依賴仍然無法跑起來的話，請使用pnpm，推薦使用pnpm。

• pnpm安裝

1. 安裝 pnpm 
npm install -g pnpm
2. 安裝 nrm 
npm install -g nrm
3. 使用 nrm 添加阿里鏡像
nrm add taobao  https://registry.npmmirror.com/
4. nrm 查看鏡像列表
nrm ls
5. nrm 應用對應鏡像
nrm use taobao

提示

常見問題

• 運行nrm ls時出現(xiàn)錯誤：const open = require('open')

再下載一個open包：npm i nrm -g open@8.4.2 --save 再次執(zhí)行：nrm ls

• 如果node內(nèi)存泄露 可以用node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))' 查詢內(nèi)存可以設置為更高的值：export NODE_OPTIONS="--max-old-space-size=8192" , 值可選：[2048, 4096, 8192, 16384]

三、快速入門

1. 使用數(shù)據(jù)可視化

• 登錄FastBee管理平臺，選擇 數(shù)據(jù)可視化 > 大屏應用管理

2. 制作可視化大屏

新建大屏

點擊新建，選擇新項目，創(chuàng)建后跳轉(zhuǎn)到大屏編輯頁面。

添加組件

在編輯器左邊組件欄，選擇要添加的組件拖拽到編輯面板中，可以是圖表或者裝飾圖，在圖層列表中可以調(diào)整組件的名稱、大小、位置、及特性樣式

配置數(shù)據(jù)源

點擊單個組件中，添加組件所需的數(shù)據(jù)源，可以是靜態(tài)數(shù)據(jù)、動態(tài)請求、公共接口等，然后根據(jù)組件特性進行調(diào)整

a. 靜態(tài)數(shù)據(jù)

選擇 數(shù)據(jù) > 請求方式，選擇靜態(tài)數(shù)據(jù)，根據(jù)數(shù)據(jù)映射，更改數(shù)據(jù)內(nèi)容里面的值（下載數(shù)據(jù)內(nèi)容并更改值后導入進來）

b. 動態(tài)請求

選擇 數(shù)據(jù) > 請求方式，選擇動態(tài)請求，點擊編輯配置，根據(jù)提示填寫前置URL（URL為全局，后面再次使用動態(tài)請求或者公共接口時無需在配置，若有Header則可以一并配置），然后添加請求方式和請求地址，如果有請求參數(shù)可以填寫對應請求參數(shù)，還可以用SQL自己編輯請求數(shù)據(jù)。

配置完成點擊保存&發(fā)送請求，這時候我們F12打開調(diào)試工具，可以看到已經(jīng)正常請求數(shù)據(jù)

測試請求接口可以拿到數(shù)據(jù)之后，我們開始編輯filter，點擊新增過濾器，根據(jù)提示編寫過濾函數(shù)，數(shù)據(jù)格式需要根據(jù)數(shù)據(jù)內(nèi)容，組合成組件要求的數(shù)據(jù)格式類型

c. 公共接口

選擇 數(shù)據(jù) > 請求方式，選擇公共接口，點擊創(chuàng)建，創(chuàng)建方式和動態(tài)請求一樣，只是創(chuàng)建完成后，如果在遇到其他組件需要用的這個接口的話，無需在次創(chuàng)建，直接使用公共接口里面創(chuàng)建好的接口就行

發(fā)布

完成大屏編輯后可以直接在右上角預覽或者發(fā)布，也可以保存后返回大屏列表頁，選擇編輯好的大屏并單擊發(fā)布，系統(tǒng)會生成大屏的URL，用戶可以通過URL訪問大屏

四、大屏應用管理

1. 創(chuàng)建大屏

• 點擊新建，點擊新項目，創(chuàng)建空白大屏

2. 工具欄

• 支持中英文切換
• 支持界面字體選擇
• 支持開發(fā)模式切換（深色/淺色）

3. 操作欄

• 編輯 - 點擊編輯圖標進去編輯器
• 預覽 - 打開新窗口生成預覽界面
• 發(fā)布 - 未發(fā)布的圖層可以選擇發(fā)布
• 取消發(fā)布 - 已經(jīng)發(fā)布的圖層可以取消發(fā)布
• 刪除 - 超級管理員才有刪除權(quán)限

五、編輯器管理

1. 工具欄

• 首頁 - 保存并返回首頁
• 圖表組件 - 顯示/隱藏組件工具欄
• 圖層控制 - 顯示/隱藏圖層工具欄
• 詳情設置 - 顯示/隱藏組件或頁面詳情配置工具欄
• 后退 - 撤回更改
• 前進 - 回復更改
• 保存 - 保存圖層修改
• 工作空間 - 可自定義大屏名稱
• 預覽 - 預覽當前大屏
• 發(fā)布/已發(fā)布 - 點擊可查看發(fā)布url

2. 圖表組件

通過分類標識可以查看不同的組件，同時支持組件排列方式切換

3. 圖層控制

查看編輯器使用的組件圖層，按住control鍵同時鼠標點擊對應圖層，可以對圖層進行分組管理

4. 詳情設置

• 點擊屏幕空白處，可以設置圖層寬高、背景、顏色等

• 點擊對應組件，可以設置組件樣式、動畫、數(shù)據(jù)和點擊事件