跳到主要内容

· 阅读需 1 分钟
Daniel

可视化大屏的开发文档。

这里会分享本人开发文档。
会持续更新。

· 阅读需 2 分钟
Daniel

为了能二次开发，筛选一些功能或者一些限制。
在最外层入口文件提供了一个统一配置的方法，免去了自己在文件中一一寻找的麻烦。

配置文件​

入口文件未/src/app.tsx

方法为：

  GlobalConfig.enableConfig({});

以下是当前可以进行配置的功能。

  • CONDITION_COUNTER
    组件、组的可设置条件的最大个数。
    默认为4。

  • DEFAULT_CHART_SERIES_COUNTER
    图表组件的最大系列个数。
    默认为8。
    可以对特定组件做特定设置。

  • CHART_SERIES_COUNTER
    特定图表组件的最大系列个数。

  • ENABLE_MOCK_DATA_CONFIG
    是否开启mock数据配置。

  • DEFAULT_SCREEN_COVER
    大屏的默认封面图片地址。

  • DEFAULT_SCREEN_SAVE_TYPE
    大屏保存模式的类型。
    auto 自动保存。
    manual 手动保存。
    auto-all 全量保存（2022-08-12&1.8）。

  • SERVICE_SIDE_REQUEST_URL
    服务端请求地址（2022-08-12&1.8）。

  • MOCK_REQUEST_URL
    mock数据的请求地址（2022-08-12&1.8）。

· 阅读需 3 分钟
Daniel

本地二次开发自定义定制化组件。

改动位置包括：

  • 组件类型定义
  • 组件列表定义
  • 组件引入添加
  • 组件开发文件夹

组件类型定义​

目录：/src/component.d.ts 


  declare namespace ComponentData {
    export type TComponentSelfType = "CUSTOM_COMPONENT_TYPE" // 自定义组件的类型
  }

组件列表定义​

目录：/src/utils/constants/components.tsx 


  type COMPONENT_TYPE_LIST = {
    type: string  // 组件的类型
    icon: string  // 组件的显示图标
    title: string // 组件的名称
  }

组件引入添加​

目录：/src/components/ChartComponents/index.ts 

  import CustomComponent from '/path/to/component'

  COMPONENT_MAP.set(CustomComponent.label, CustomComponent)

组件开发文件夹​

目录：/src/components/ChartComponents/CustomComponent
CustomComponent为自定义的文件夹名称

类型定义文件​

/src/components/ChartComponents/CustomComponent/type.ts
组件特殊化配置的类型文件。

组件配置文件​

/src/components/ChartComponents/CustomComponent/config
配置文件的文件夹，包含组件的所有配置。

  • 只需要包含组件的特殊化配置。

props为： 

  export type IProps<T extends object = {}> = {
    value: TComponentData<T>;
    onChange: (value: SuperPartial<TComponentData<T>>) => void;
  };

格式为：

  import { Component } from 'react';
  import { Tabs } from 'antd';
  import ComponentOptionConfig, {
    Tab,
  } from '@/components/ChartComponents/Common/ComponentOptionConfig';
  import ConfigList from '@/components/ChartComponents/Common/Structure/ConfigList';
  import { TBarBasicConfig } from '../type';

  const { TabPane } = Tabs;

  const TemplateComponent = (props: IProps) => {

    const { value, onChange } = props 

    return (
      <ComponentOptionConfig>
        <TabPane key={'1'} tab={<Tab>配置类型1</Tab>}>
          <ConfigList level={1}>
            配置内容
          </ConfigList>
        </TabPane>
      </ComponentOptionConfig>
    )

  }

默认配置文件​

/src/components/ChartComponents/CustomComponent/defaultConfig.ts
组件的默认样式属性配置。

  • 通过设置默认配置可以关闭相关不需要开启的通用功能。 
  export default {
    interactive: {
      base: [], // 没有交互事件
    },
    data: {
      disabled: true // 没有数据获取配置
    }
  }

渲染组件文件​

/src/components/ChartComponents/CustomComponent/component
实际渲染在画布中的样式。 

  import {
    useComponent, // 提供了组件的实用方法的hook
    useChartComponentResize, // 屏幕发生变化的hook
    useChartValueMapField, // 字段映射的hook
    useComponentResize, // 组件大小发生变化的hook 
    useAnimationChange, // echarts的animation发生变化的hook
    useCondition, // 组件条件处理的hook
    useChartComponentTooltip, // echart的tooltip轮播hook
    useChartPerConfig, // echart的config预处理hook 
  } from '@/components/ChartComponents/Common/Component/hook';

  import FetchFragment, {
    TFetchFragmentRef,
  } from '@/components/ChartComponents/Common/FetchFragment'; // 数据交互的wrapper 

  export type IProps<T> = {
    className?: string;
    style?: CSSProperties;
    value: ComponentData.TComponentData<T>;
    global: ComponentProps['global'];
  }
提示

关于以上的细节请自行查看对应的已内置的组件的代码。

导出文件​

/src/components/ChartComponents/CustomComponent/index.ts 

  import defaultConfig from './defaultConfig';
  import Component from './component';
  import Config from './config';

  // 需要导出以下几个属性
  export default {
    defaultConfig,
    configComponent: Config,
    render: Component,
    type: Component.id,
  };

· 阅读需 1 分钟
Daniel

设计器的整体色调为可自定义。

配置文件​

自定义文件存放位置为/src/theme

文件内容可根据echarts，来进行配置。
将配置文件下载后放在上述文件夹下。

定义色调​

配置注入
/src/utils/Assit/Theme/index.ts
代码步骤：

  // 新增的色调配置文件
  import CustomeTheme from '../../../theme/custom-theme.json';

  class ThemeUtil {

    themeDataSource = {
      // 色调配置列表
      [CustomeTheme.themeName]: CustomeTheme.theme,
    }

    // 初始化色调
    // 设置默认的大屏色调
    init() {
      this.initCurrentThemeData(WonderlandTheme.themeName);
    }

  }