ThingsKit开发指南-前端大屏开发指南（二次开发指南）

云腾小编

2024年9月10日2024年9月10日

大屏界面介绍

💡提示

大屏开发的内容包括下面界面中的组件库开发、画布中的组件开发以及组件的数据绑定面板开发。

组件库面板

画布

组件数据绑定面板

开发步骤

新增一个组件

举例，我现在需要在小组件下的小标题下在新增一个小标题10，操作如下

先找到所属位置，新增Subtitle10目录,里面的内容如下

然后需要设置名称和缩略图显示，举例，代码配置如下

缩略图大小为宽901，高645

import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' //这里有时候需要注意，复制粘贴后路径丢失，加上即可
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { useWidgetKey } from '@/packages/external/useWidgetKey'

const { key, chartKey, conKey } = useWidgetKey('Subtitle10',true) //这里是您新增的一个目录名称，需要一致

export const Subtitle10Config: ConfigType = { //这里也需要修改Subtitle10Config
    key,
    chartKey,
    conKey,
    title: '小标题10', //这里配置名称显示
    category: ChatCategoryEnum.SUBTITLE,
    categoryName: ChatCategoryEnumName.SUBTITLE,
    package: PackagesCategoryEnum.DECORATES,
    chartFrame: ChartFrameEnum.COMMON,
    image: 'title10.png', //这里配置缩略图显示，找到所属模块下的，比如小标题属于小组件下E:\enterpriseproject\thingskit-view\src\assets\images\chart\decorates\title10.png
}

然后预览，拖入刚刚新加的小标题10即可