可視化大屏構建平臺 一、需求分析 二、功能設計 三、可視化大屏 四、意見需求收集

一、需求分析

1、來自大屏的需求

2、項目上只是需要簡單的大屏效果功能

3、基於未來的發展，我們前端組需要構建可視化大屏的底座

4、不能夠直接按照可視化大屏的方式去做工作臺等

5、爲長遠打算我們需要把底層能力製作完成，支持服務場景遷移

6、要確保該注重前端能力，核心部分減少後端依賴過多依賴，後端負責資源與存儲

7、前端項目的可視化搭建

二、功能設計

1、組件

註冊配置，註冊交互，註冊行爲函數

2、數據

3、交互

4、可視化界面(半段)

三、可視化大屏

• 全局數據

  • Url 數據
  • 模板數據
  • 臨時數據
  • 全局變量
    • 當前頁面的固有數據變量

• 設計器

• 渲染

  • 佈局組件
    • 容器組件<div>
    • 文字組件<span>
    • 圖片組件 <img>
    • group組件
      • 外層控制樣式展示，內層遞歸尋找數據，實現列組件遞歸渲染。變體：輪播圖模式
  • 表單屬性組件
  • 組件模式
    • 設計
    • 編輯
    • 預覽

• 模板語法

https://baidu.github.io/amis/zh-CN/docs/concepts/data-mapping

• 模板（待開發）

  • 場景
    • 數據流向
    • 結構
    • 菜單
  • 模板設計器

• 資源

  • 組件

自定義組件 + 系統的基礎組件

• 表單功能

• 組件配置

  • 渲染方式相關
  • 接收數據限定與數據顯示相關
    • 字典類
    • 時間
    • 頭像
    • 進度條
  • 數據處理方式
    • Cover 外部數據直接覆蓋默認值
    • 並集
    • 差集
    • 合集
  • 事件與行爲註冊 (可視化交互)
    • 能夠對外發布事件
    • 接收外部傳入的行爲
  • 切換
  • 交互拼裝（待開發）

• 數據源

通過插件注入的方式，集成不同類型的數據源

• 系統自帶httpRequest 接口請求

• BI數據源 表查詢與過濾條件(下週開發)

• 腳本 (底座)（待開發）

• 樣式

樣式作爲大屏非常重要的部分，樣式的設計更貼合真實開發，除了配置的方式外，還可以添加css 文本腳本

• 樣式解析器

• Option To Style

• Css To Option

• 主題變量 (未)

• 圖片

  • 接收url 方便做動態圖片

• 字典

  • 字典類的數據多關聯其他的動態狀態
    • 動態樣式
      • 組件的字典不同使用不一樣的動態樣式
    • 動態腳本
      • 根據組件字典值的不同執行腳本

• 動畫 (半成品)

  • 組件的入場、出場動畫以及特殊觸發條件
  • 不同類型組件的動效
    • 數字翻牌
    • Group list 組件的載入
    • 多模塊入場動畫

• Timeline

  • animation
    • Action itme

• 位置

• 縮放

• 旋轉

• Layer

• 狀態 （待開發）

  • 樣式狀態管理
  • 組件狀態

• 3D編輯器 https://tengge1.gitee.io/shadoweditor-examples/ （待開發）

  • 資源
    • 幾何體
    • 模型庫
      • 場景
      • 模型
      • 貼圖
      • 材質
      • 音頻
      • 動畫
      • 粒子
      • 預設體
      • 截圖
      • 視頻
      • 日誌
    • 資源導入方式
    • 組件
  • 樹形圖
    • 場景
      • 燈光
      • 環境光
      • 平行光
      • 點光源
      • 聚光燈
      • 半球光
      • 矩形光
    • 相機

• 插件

  • 資源注入
  • 資源生命週期
    • 接口日誌攔截，數據查看
    • 資源使用情況面板
    • 腳本執行單元測試

[交互]

配合組件註冊的時間行爲，搭建交互邏輯

• Node

  • 組件
  • 邏輯單元

• Edge

  • 關聯

• 多場景

  • 獨立項目大屏開發

  • 業務項目中進行頁面開發

  • BI可視化大屏集成

  • IDE遠程連接BI自定義組件

• 多端

  • H5應用
  • 自適應佈局方式，基於styleOption

• 多模式

  • 可視化設計模式

  • 預覽模式

  • 函數式開發

  • Option To Code

  • Static Page To Option

• API

  • 預留 接口配置
  • Core

    • Component

      • addChild
      • setConfig
      • setStyle

    • Interact

      • fromEvent
      • addNode

• 智能化

  • tag標籤
  • 數據格式

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、未完成

• 地圖
• 動畫合集製作
• echarts 圖與數據
• 模板功能
• 多個原子組件形成穩定的組件獨立體
• 容器化部署
• 權限，業務，數據流程管理
• 主題

四、意見需求收集

• 大屏優化預警功能 [http://www.woshipm.com/pd/5127132.html]
• 針對數字過長，數據不好看等情況，使用插件編寫預警邏輯，進行收集