一、需求分析

1、来自大屏的需求

2、项目上只是需要简单的大屏效果功能

3、基于未来的发展，我们前端组需要构建可视化大屏的底座

4、不能够直接按照可视化大屏的方式去做工作台等

5、为长远打算我们需要把底层能力制作完成，支持服务场景迁移

6、要确保该注重前端能力，核心部分减少后端依赖过多依赖，后端负责资源与存储

7、前端项目的可视化搭建

二、功能设计

1、组件

注册配置，注册交互，注册行为函数

2、数据

3、交互

4、可视化界面(半段)

三、可视化大屏

• 全局数据

  • Url 数据
  • 模板数据
  • 临时数据
  • 全局变量
    • 当前页面的固有数据变量

• 设计器

image.png

• 渲染

  • 布局组件
    • 容器组件<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]
• 针对数字过长，数据不好看等情况，使用插件编写预警逻辑，进行收集