data visual

fastbeeAbout 8 min

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

一、產(chǎn)品特點(diǎn)

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

二、技術(shù)特點(diǎn)

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

1. 項(xiàng)目運(yùn)行和部署

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

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

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

# 安裝 pnpm 
npm install -g pnpm

# 安裝項(xiàng)目依賴

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

# npm
npm install

# yarn
yarn install

啟動項(xiàng)目

# 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 ，切記不要用重復(fù)的匹配關(guān)鍵詞，編譯的文件上傳到 /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. 接口說明

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

3. 菜單添加

Tips

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

固定大屏展示菜單

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

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

可視化平臺菜單

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

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

4. 注意事項(xiàng)

保證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 應(yīng)用對應(yīng)鏡像
nrm use taobao

Tips

常見問題

運(yùn)行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)存可以設(shè)置為更高的值：export NODE_OPTIONS="--max-old-space-size=8192" , 值可選：[2048, 4096, 8192, 16384]

三、快速入門

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

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

2. 制作可視化大屏

新建大屏

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

添加組件

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

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

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

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

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

b. 動態(tài)請求

選擇 數(shù)據(jù) > 請求方式，選擇動態(tài)請求，點(diǎn)擊編輯配置，根據(jù)提示填寫前置URL（URL為全局，后面再次使用動態(tài)請求或者公共接口時無需在配置，若有Header則可以一并配置），然后添加請求方式和請求地址，如果有請求參數(shù)可以填寫對應(yīng)請求參數(shù)，還可以用SQL自己編輯請求數(shù)據(jù)。配置完成點(diǎn)擊保存&發(fā)送請求，這時候我們F12打開調(diào)試工具，可以看到已經(jīng)正常請求數(shù)據(jù) 測試請求接口可以拿到數(shù)據(jù)之后，我們開始編輯filter，點(diǎn)擊新增過濾器，根據(jù)提示編寫過濾函數(shù)，數(shù)據(jù)格式需要根據(jù)數(shù)據(jù)內(nèi)容，組合成組件要求的數(shù)據(jù)格式類型

c. 公共接口

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

點(diǎn)擊新建，點(diǎn)擊新項(xiàng)目，創(chuàng)建空白大屏

2. 工具欄

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

3. 操作欄

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

五、編輯器管理

1. 工具欄

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

點(diǎn)擊屏幕空白處，可以設(shè)置圖層寬高、背景、顏色等

點(diǎn)擊對應(yīng)組件，可以設(shè)置組件樣式、動畫、數(shù)據(jù)和點(diǎn)擊事件

日本一区二区三区影视-人操视频精品97视频-日本熟妇bbwxx视频-亚洲精品免费一期二期