一、需求分析
1、來自大屏的需求
2迫皱、項(xiàng)目上只是需要簡單的大屏效果功能
3、基于未來的發(fā)展辖众，我們前端組需要構(gòu)建可視化大屏的底座
4卓起、不能夠直接按照可視化大屏的方式去做工作臺(tái)等
5、為長遠(yuǎn)打算我們需要把底層能力制作完成凹炸，支持服務(wù)場景遷移
6戏阅、要確保該注重前端能力，核心部分減少后端依賴過多依賴啤它，后端負(fù)責(zé)資源與存儲(chǔ)
7奕筐、前端項(xiàng)目的可視化搭建
二、功能設(shè)計(jì)
1变骡、組件
注冊配置离赫，注冊交互，注冊行為函數(shù)
2塌碌、數(shù)據(jù)
3渊胸、交互
4、可視化界面(半段)
三台妆、可視化大屏
-
全局?jǐn)?shù)據(jù)
- Url 數(shù)據(jù)
- 模板數(shù)據(jù)
- 臨時(shí)數(shù)據(jù)
- 全局變量
- 當(dāng)前頁面的固有數(shù)據(jù)變量
-
設(shè)計(jì)器
image.png
-
渲染
- 布局組件
- 容器組件<div>
- 文字組件<span>
- 圖片組件 <img>
- group組件
- 外層控制樣式展示翎猛，內(nèi)層遞歸尋找數(shù)據(jù)，實(shí)現(xiàn)列組件遞歸渲染接剩。變體：輪播圖模式
- 表單屬性組件
- 組件模式
- 設(shè)計(jì)
- 編輯
- 預(yù)覽
- 布局組件
-
模板語法
https://baidu.github.io/amis/zh-CN/docs/concepts/data-mapping
-
模板（待開發(fā)）
- 場景
- 數(shù)據(jù)流向
- 結(jié)構(gòu)
- 菜單
- 模板設(shè)計(jì)器
- 場景
-
資源
-
組件
-
自定義組件 + 系統(tǒng)的基礎(chǔ)組件
表單功能
-
組件配置
- 渲染方式相關(guān)
- 接收數(shù)據(jù)限定與數(shù)據(jù)顯示相關(guān)
- 字典類
- 時(shí)間
- 頭像
- 進(jìn)度條
- 數(shù)據(jù)處理方式
- Cover 外部數(shù)據(jù)直接覆蓋默認(rèn)值
- 并集
- 差集
- 合集
- 事件與行為注冊 (可視化交互)
- 能夠?qū)ν獍l(fā)布事件
- 接收外部傳入的行為
- 切換
- 交互拼裝（待開發(fā)）
-
數(shù)據(jù)源
通過插件注入的方式办成，集成不同類型的數(shù)據(jù)源
系統(tǒng)自帶httpRequest 接口請求
BI數(shù)據(jù)源 表查詢與過濾條件(下周開發(fā))
-
腳本 (底座)（待開發(fā)）
-
樣式
樣式作為大屏非常重要的部分，樣式的設(shè)計(jì)更貼合真實(shí)開發(fā)搂漠，除了配置的方式外迂卢，還可以添加css 文本腳本
樣式解析器
Option To Style
Css To Option
主題變量 (未)
-
圖片
- 接收url 方便做動(dòng)態(tài)圖片
-
字典
- 字典類的數(shù)據(jù)多關(guān)聯(lián)其他的動(dòng)態(tài)狀態(tài)
- 動(dòng)態(tài)樣式
- 組件的字典不同使用不一樣的動(dòng)態(tài)樣式
- 動(dòng)態(tài)腳本
- 根據(jù)組件字典值的不同執(zhí)行腳本
- 動(dòng)態(tài)樣式
- 字典類的數(shù)據(jù)多關(guān)聯(lián)其他的動(dòng)態(tài)狀態(tài)
-
動(dòng)畫 (半成品)
- 組件的入場、出場動(dòng)畫以及特殊觸發(fā)條件
- 不同類型組件的動(dòng)效
- 數(shù)字翻牌
- Group list 組件的載入
- 多模塊入場動(dòng)畫
-
Timeline
- animation
- Action itme
- animation
位置
縮放
旋轉(zhuǎn)
Layer
-
狀態(tài) （待開發(fā)）
- 樣式狀態(tài)管理
- 組件狀態(tài)
-
3D編輯器 https://tengge1.gitee.io/shadoweditor-examples/ （待開發(fā)）
- 資源
- 幾何體
- 模型庫
- 場景
- 模型
- 貼圖
- 材質(zhì)
- 音頻
- 動(dòng)畫
- 粒子
- 預(yù)設(shè)體
- 截圖
- 視頻
- 日志
- 資源導(dǎo)入方式
- 組件
- 樹形圖
- 場景
- 燈光
- 環(huán)境光
- 平行光
- 點(diǎn)光源
- 聚光燈
- 半球光
- 矩形光
- 相機(jī)
- 場景
- 資源
-
插件
- 資源注入
- 資源生命周期
- 接口日志攔截桐汤，數(shù)據(jù)查看
- 資源使用情況面板
- 腳本執(zhí)行單元測試
[交互]
配合組件注冊的時(shí)間行為而克，搭建交互邏輯
-
Node
- 組件
- 邏輯單元
-
Edge
- 關(guān)聯(lián)
-
多場景
-
獨(dú)立項(xiàng)目大屏開發(fā)
-
業(yè)務(wù)項(xiàng)目中進(jìn)行頁面開發(fā)
-
BI可視化大屏集成
-
IDE遠(yuǎn)程連接BI自定義組件
-
-
多端
- H5應(yīng)用
- 自適應(yīng)布局方式，基于styleOption
-
多模式
-
可視化設(shè)計(jì)模式
-
預(yù)覽模式
-
函數(shù)式開發(fā)
-
Option To Code
-
Static Page To Option
-
-
API
- 預(yù)留 接口配置
- Core
-
Component
- addChild
- setConfig
- setStyle
-
Interact
- fromEvent
- addNode
-
-
智能化
- tag標(biāo)簽
- 數(shù)據(jù)格式
2怔毛、配置
Component
componentName: 'text-box',
option: {
initialValue: '',
valueType: '',
valueHandler: 'cover',
fieldName: '',
fieldType: 'String',
config: {
},
attrs: {
alt: ''
},
dataSever: {
created: '',
},
animation: {
on: false
}
},
Style / imge
style: {
options: {
default: {
color: 'white',
__image: {
id: 'viewRank',
},
height: '35px',
marginTop: '16px',
width: '100%',
position: 'relative',
},
}
}
Data
[
{
type: 'interface-option',
triggerModes: ['created'],
option: {
method: 'get',
params: {
pageSize: 10,
pageNum: 1
},
url: '/everdc-stand-model/model/page?t=1630923934229',
response: {
key: 'list'
},
mode: 'remote',
isRemoteErrorMockOn: true,
mockData: [
{
name: '張三1',
type: 1,
},
{
name: '張四2',
type: 0,
},
]
}
}
]
Dict
dict: {
id: 'modelType',
option: {
dynamicStyleId: {
'unactive': 0,
'active': 1
},
},
}
交互配置
{
nodes: [
{
id: '',
inputs: [],
output: [],
}
],
edges: [
]
}
3员萍、未完成
- 地圖
- 動(dòng)畫合集制作
- echarts 圖與數(shù)據(jù)
- 模板功能
- 多個(gè)原子組件形成穩(wěn)定的組件獨(dú)立體
- 容器化部署
- 權(quán)限，業(yè)務(wù)拣度，數(shù)據(jù)流程管理
- 主題
四碎绎、意見需求收集
- 大屏優(yōu)化預(yù)警功能 [http://www.woshipm.com/pd/5127132.html]
- 針對數(shù)字過長螃壤，數(shù)據(jù)不好看等情況，使用插件編寫預(yù)警邏輯筋帖，進(jìn)行收集
