Davinci-二次开发：新增辅助图形-装饰图形

Davinci 介绍

Davinci 是宜信出品的DVaaS（数据可视化及服务）的一款BI产品
Davinci 是一个 DVaaS（Data Visualization as a Service）平台解决方案，面向业务人员/数据工程师/数据分析师/数据科学家，致力于提供一站式数据可视化解决方案。既可作为公有云/私有云独立部署使用，也可作为可视化插件集成到三方系统。用户只需在可视化 UI 上简单配置即可服务多种数据可视化应用，并支持高级交互/行业分析/模式探索/社交智能等可视化功能。

概述：

Davinci 的 display功能目前只提供了四种辅助图形，矩形、标签、视频、时间器，边框和标签可以自己上传背景图片。对于没有设计帮助的我，嘿嘿嘿，下面我来说具体思路，本次新增的图形组件均来自dataV:http://datav-react.jiaminghi.com/
安装命令npm install @jiaminghi/data-view-react或cnpm install @jiaminghi/data-view-react或yarn add @jiaminghi/data-view-react 根据自己本身环境选择命令

效果:

前端目录结构

└── webapp
  └── app
    └── assets (资源文件)
      └──  json（存放了配置项）
       ├──  slideSettings（辅助图形配置项）
    └── containers
      └── Display
         ├── components
               ├──Layer
               | ├── LayerCore.tsx  辅助图形
                   ├── Conetent
                   | ├── SecondaryGraph  //单个辅助图形组件

      └── Widget                  //widget功能所在文件夹
        ├── component                 //组件
        | ├── Chart（图表驱动）
        | ├── Config
        | ├── Pivot（透视驱动）
        | ├── Widget
        | └── Workbench                   //工作台显示区（图表、数据、样式、配置）
        | | ├── ConfigSections                //各个图表样式（图例、颜色、标签、xy轴等）配置
        | | | ├── SpecSection
        | | | └── TableSection
        | | └── Dropbox
        ├── config                    //初始化配置信息（数据、样式、配置）
        | ├── chart（图表驱动）
        | └── pivot（透视驱动）
        ├── render                    //根据信息最后处理（拼装echarts需要的配置）
        | ├── chart（图表驱动）
        | └── pivot（透视驱动）
        ...

辅助图形的配置项存放在/app/assets/json/slideSettings 下

辅助图形扩展 步骤

1.添加辅助图形id

在webapp\app\containers\Display\components\Setting\Form
目录下的constants.ts 添加相关配置
constants.ts 的 SecondaryGraphTypes 添加图形id slideSettings 将图形id和json文件对应

import slide from 'assets/json/slideSettings/slide.json'
import chart from 'assets/json/slideSettings/chart.json'
import rectangle from 'assets/json/slideSettings/rectangle.json'
import label from 'assets/json/slideSettings/label.json'
import video from 'assets/json/slideSettings/video.json'
import timer from 'assets/json/slideSettings/timer.json'
import decoration3 from 'assets/json/slideSettings/decoration3.json'

export enum SecondaryGraphTypes {
  Rectangle = 20,
  Label = 21,
  Video = 22,
  Timer = 23,
  Decoration = 24
}

export enum GraphTypes {
  Slide,
  Chart,
  Secondary
}

export const slideSettings = {
  [GraphTypes.Slide]: slide,
  [GraphTypes.Chart]: chart,
  [SecondaryGraphTypes.Rectangle]: rectangle,
  [SecondaryGraphTypes.Label]: label,
  [SecondaryGraphTypes.Video]: video,
  [SecondaryGraphTypes.Timer]: timer,
  [SecondaryGraphTypes.Decoration]: decoration3,
}

2.创建辅助图形组件

在webapp/app/containers/Display/components/Layer/Content/SecondaryGraph/ 下创建对应组件 注意文件格式为tsx

import { LayerContext } from '../../util'
import React, { useContext, useState, useEffect } from 'react'
import moment from 'moment'
import { useLabelStyle } from './hooks'
import * as datav from '@jiaminghi/data-view-react'

 const DevDecoration: React.FC = () =>