diff --git a/src/assets/images/chart/customponents/theme3.png b/src/assets/images/chart/customponents/theme3.png deleted file mode 100644 index e7436cf3..00000000 Binary files a/src/assets/images/chart/customponents/theme3.png and /dev/null differ diff --git a/src/assets/images/chart/decorates/FullScreenBtn.png b/src/assets/images/chart/decorates/FullScreenBtn.png new file mode 100644 index 00000000..a58b1808 Binary files /dev/null and b/src/assets/images/chart/decorates/FullScreenBtn.png differ diff --git a/src/assets/images/chart/decorates/TopBar1.png b/src/assets/images/chart/decorates/TopBar1.png new file mode 100644 index 00000000..3e94ceaa Binary files /dev/null and b/src/assets/images/chart/decorates/TopBar1.png differ diff --git a/src/assets/images/chart/decorates/TopBar2.png b/src/assets/images/chart/decorates/TopBar2.png new file mode 100644 index 00000000..2160b028 Binary files /dev/null and b/src/assets/images/chart/decorates/TopBar2.png differ diff --git a/src/assets/images/chart/decorates/TopBar3.png b/src/assets/images/chart/decorates/TopBar3.png new file mode 100644 index 00000000..1cc9ee05 Binary files /dev/null and b/src/assets/images/chart/decorates/TopBar3.png differ diff --git a/src/assets/images/chart/decorates/TopBar4.png b/src/assets/images/chart/decorates/TopBar4.png new file mode 100644 index 00000000..87ea643d Binary files /dev/null and b/src/assets/images/chart/decorates/TopBar4.png differ diff --git a/src/assets/images/chart/decorates/TopBar5.png b/src/assets/images/chart/decorates/TopBar5.png new file mode 100644 index 00000000..560ecfab Binary files /dev/null and b/src/assets/images/chart/decorates/TopBar5.png differ diff --git a/src/assets/images/chart/decorates/TopBar6.png b/src/assets/images/chart/decorates/TopBar6.png new file mode 100644 index 00000000..03328ced Binary files /dev/null and b/src/assets/images/chart/decorates/TopBar6.png differ diff --git a/src/assets/images/chart/decorates/TopBar7.png b/src/assets/images/chart/decorates/TopBar7.png new file mode 100644 index 00000000..52fd865a Binary files /dev/null and b/src/assets/images/chart/decorates/TopBar7.png differ diff --git a/src/assets/images/chart/decorates/TopBar8.png b/src/assets/images/chart/decorates/TopBar8.png new file mode 100644 index 00000000..300af8fc Binary files /dev/null and b/src/assets/images/chart/decorates/TopBar8.png differ diff --git a/src/hooks/useChartCommonData.hook.ts b/src/hooks/useChartCommonData.hook.ts index 9d04af7d..c358e0fb 100644 --- a/src/hooks/useChartCommonData.hook.ts +++ b/src/hooks/useChartCommonData.hook.ts @@ -49,10 +49,9 @@ export const useChartCommonData = ( else { series = [seriesItem] } - Object.assign(targetComponent.option, { - series, - dataset, - }) + if (vChartRef.value) { + setOption(vChartRef.value, { series, dataset }) + } } } } diff --git a/src/packages/components/Decorates/Mores/FullScreenBtn/config.ts b/src/packages/components/Decorates/Mores/FullScreenBtn/config.ts new file mode 100644 index 00000000..3822f205 --- /dev/null +++ b/src/packages/components/Decorates/Mores/FullScreenBtn/config.ts @@ -0,0 +1,30 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { chartInitConfig } from '@/settings/designSetting' +import { FullScreenBtnConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' + +export enum FontWeightEnum { + NORMAL = '常规', + BOLD = '加粗', +} + +export const FontWeightObject = { + [FontWeightEnum.NORMAL]: 'normal', + [FontWeightEnum.BOLD]: 'bold', +} + +export const option = { + color: '#4396fd', + fontSize: 14, + fontWeight: 'normal', + border: 1, + borderColor: '#4396fd' +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = FullScreenBtnConfig.key + public attr = { ...chartInitConfig, w: 100, h: 40, zIndex: -1 } + public chartConfig = cloneDeep(FullScreenBtnConfig) + public option = cloneDeep(option) +} diff --git a/src/packages/components/Decorates/Mores/FullScreenBtn/config.vue b/src/packages/components/Decorates/Mores/FullScreenBtn/config.vue new file mode 100644 index 00000000..0742ff6f --- /dev/null +++ b/src/packages/components/Decorates/Mores/FullScreenBtn/config.vue @@ -0,0 +1,45 @@ + + + diff --git a/src/packages/components/Decorates/Mores/FullScreenBtn/index.ts b/src/packages/components/Decorates/Mores/FullScreenBtn/index.ts new file mode 100644 index 00000000..83878c38 --- /dev/null +++ b/src/packages/components/Decorates/Mores/FullScreenBtn/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' + +export const FullScreenBtnConfig: ConfigType = { + key: 'FullScreenBtn', + chartKey: 'VFullScreenBtn', + conKey: 'VCFullScreenBtn', + title: '全屏按钮', + category: ChatCategoryEnum.MORE, + categoryName: ChatCategoryEnumName.MORE, + package: PackagesCategoryEnum.DECORATES, + chartFrame: ChartFrameEnum.STATIC, + image: 'FullScreenBtn.png' +} diff --git a/src/packages/components/Decorates/Mores/FullScreenBtn/index.vue b/src/packages/components/Decorates/Mores/FullScreenBtn/index.vue new file mode 100644 index 00000000..f98e64dd --- /dev/null +++ b/src/packages/components/Decorates/Mores/FullScreenBtn/index.vue @@ -0,0 +1,56 @@ + + + + + \ No newline at end of file diff --git a/src/packages/components/Decorates/Mores/TimeCommon1/config.ts b/src/packages/components/Decorates/Mores/TimeCommon1/config.ts new file mode 100644 index 00000000..03aaec15 --- /dev/null +++ b/src/packages/components/Decorates/Mores/TimeCommon1/config.ts @@ -0,0 +1,13 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { TimeCommon1Config } from './index' +import cloneDeep from 'lodash/cloneDeep' +import { chartInitConfig } from '@/settings/designSetting' + + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = TimeCommon1Config.key + public attr = { ...chartInitConfig, w: 200, h: 50, zIndex: -1 } + public chartConfig = cloneDeep(TimeCommon1Config) + public option = cloneDeep({}) +} diff --git a/src/packages/components/Decorates/Mores/TimeCommon1/config.vue b/src/packages/components/Decorates/Mores/TimeCommon1/config.vue new file mode 100644 index 00000000..ae2cf42d --- /dev/null +++ b/src/packages/components/Decorates/Mores/TimeCommon1/config.vue @@ -0,0 +1,7 @@ + + + diff --git a/src/packages/components/Decorates/Mores/TimeCommon1/index.ts b/src/packages/components/Decorates/Mores/TimeCommon1/index.ts new file mode 100644 index 00000000..c352b8d7 --- /dev/null +++ b/src/packages/components/Decorates/Mores/TimeCommon1/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + +export const TimeCommon1Config: ConfigType = { + key: 'TimeCommon1', + chartKey: 'VTimeCommon1', + conKey: 'VCTimeCommon1', + title: '通用时间1', + category: ChatCategoryEnum.MORE, + categoryName: ChatCategoryEnumName.MORE, + package: PackagesCategoryEnum.DECORATES, + chartFrame: ChartFrameEnum.STATIC, + image: 'TimeCommon1.png' +} diff --git a/src/packages/components/Decorates/Mores/TimeCommon1/index.vue b/src/packages/components/Decorates/Mores/TimeCommon1/index.vue new file mode 100644 index 00000000..fe42b362 --- /dev/null +++ b/src/packages/components/Decorates/Mores/TimeCommon1/index.vue @@ -0,0 +1,76 @@ + + + + + \ No newline at end of file diff --git a/src/packages/components/Decorates/Mores/index.ts b/src/packages/components/Decorates/Mores/index.ts index b8f7237c..43e15a3f 100644 --- a/src/packages/components/Decorates/Mores/index.ts +++ b/src/packages/components/Decorates/Mores/index.ts @@ -1,7 +1,9 @@ import { NumberConfig } from './Number/index' import { TimeCommonConfig } from './TimeCommon/index' +import { TimeCommon1Config } from './TimeCommon1/index' import { ClockConfig } from './Clock/index' -import { FullScreenConfig } from './FullScreen/index' +import { FullScreenBtnConfig } from './FullScreenBtn/index' +// import { FullScreenConfig } from './FullScreen/index' import { CountDownConfig } from './CountDown/index' import { FlipperNumberConfig } from './FlipperNumber' import { PipelineHConfig } from './PipelineH/index' @@ -11,6 +13,8 @@ export default [ // NumberConfig, // FlipperNumberConfig, TimeCommonConfig, + TimeCommon1Config, + FullScreenBtnConfig, // CountDownConfig, ClockConfig, // FullScreenConfig, diff --git a/src/packages/components/Decorates/TopBars/TopBars/config.ts b/src/packages/components/Decorates/TopBars/TopBars/config.ts new file mode 100644 index 00000000..efd2f1f0 --- /dev/null +++ b/src/packages/components/Decorates/TopBars/TopBars/config.ts @@ -0,0 +1,28 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { TopBarsConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' + +export const option = { + // 图片 + dataset: '', + // 适应方式 + fit: 'fill', + // 圆角 + borderRadius: 0 +} + +export default class Config extends PublicConfigClass implements CreateComponentType +{ + constructor() { + super(); + this.attr = { + ...this.attr, + w: 1920, + h: 80, + } + } + public key = TopBarsConfig.key + public chartConfig = cloneDeep(TopBarsConfig) + public option = cloneDeep(option) +} diff --git a/src/packages/components/Decorates/TopBars/TopBars/config.vue b/src/packages/components/Decorates/TopBars/TopBars/config.vue new file mode 100644 index 00000000..13ff3bae --- /dev/null +++ b/src/packages/components/Decorates/TopBars/TopBars/config.vue @@ -0,0 +1,62 @@ + + + diff --git a/src/packages/components/Decorates/TopBars/TopBars/index.ts b/src/packages/components/Decorates/TopBars/TopBars/index.ts new file mode 100644 index 00000000..6654b198 --- /dev/null +++ b/src/packages/components/Decorates/TopBars/TopBars/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/Decorates/index.d' + +export const TopBarsConfig: ConfigType = { + key: 'TopBars', + chartKey: 'VTopBars', + conKey: 'VCTopBars', + title: '顶栏', + category: ChatCategoryEnum.TOPBARS, + categoryName: ChatCategoryEnumName.TOPBARS, + package: PackagesCategoryEnum.DECORATES, + chartFrame: ChartFrameEnum.STATIC, + image: '' +} diff --git a/src/packages/components/Decorates/TopBars/TopBars/index.vue b/src/packages/components/Decorates/TopBars/TopBars/index.vue new file mode 100644 index 00000000..bea841c9 --- /dev/null +++ b/src/packages/components/Decorates/TopBars/TopBars/index.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/packages/components/Decorates/TopBars/index.ts b/src/packages/components/Decorates/TopBars/index.ts new file mode 100644 index 00000000..98a9225c --- /dev/null +++ b/src/packages/components/Decorates/TopBars/index.ts @@ -0,0 +1,27 @@ +import { TopBarsConfig } from './TopBars/index' +import { PackagesCategoryEnum } from '@/packages/index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d' + +const topbarNames = [ + 'TopBar1.png', + 'TopBar2.png', + 'TopBar3.png', + 'TopBar4.png', + 'TopBar5.png', + 'TopBar6.png', + 'TopBar7.png', + 'TopBar8.png', +] +const topbars = topbarNames.map((name, i) => ({ + ...TopBarsConfig, + category: ChatCategoryEnum.TOPBARS, + categoryName: ChatCategoryEnumName.TOPBARS, + package: PackagesCategoryEnum.DECORATES, + dataset: name, + // 既是缩略图 又是背景图 + image: name, + title: `顶栏${i + 1}`, + redirectComponent: `${TopBarsConfig.package}/${TopBarsConfig.category}/${TopBarsConfig.key}` // 跳转组件路径规则:packageName/categoryName/componentKey +})) + +export default topbars diff --git a/src/packages/components/Decorates/index.d.ts b/src/packages/components/Decorates/index.d.ts index d20047eb..5808516d 100644 --- a/src/packages/components/Decorates/index.d.ts +++ b/src/packages/components/Decorates/index.d.ts @@ -2,12 +2,14 @@ export enum ChatCategoryEnum { BORDER = 'Borders', DECORATE = 'Decorates', THREE = 'Three', - MORE = 'Mores' + MORE = 'Mores', + TOPBARS = 'TopBars' } export enum ChatCategoryEnumName { BORDER = '边框', DECORATE = '装饰', THREE = '三维', - MORE = '更多' + MORE = '更多', + TOPBARS = '顶栏' } \ No newline at end of file diff --git a/src/packages/components/Decorates/index.ts b/src/packages/components/Decorates/index.ts index 393be971..9511171b 100644 --- a/src/packages/components/Decorates/index.ts +++ b/src/packages/components/Decorates/index.ts @@ -1,7 +1,8 @@ import Borders from './Borders' +import TopBars from './TopBars' import Decorates from './Decorates' // import Three from './Three' import Mores from './Mores' // export const DecorateList = [...Borders, ...Decorates, ...Three, ...Mores] -export const DecorateList = [...Borders, ...Decorates, ...Mores] +export const DecorateList = [...Borders, ...TopBars, ...Decorates, ...Mores] diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 46937f01..145293d0 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -118,6 +118,7 @@ import { AssignmentTurnedInRound as AssignmentTurnedInRoundIcon, CheckCircleOutlined as CheckCircleOutlinedIcon, InsertPhotoSharp as InsertPhotoSharpIcon, + AccessTimeFilled as AccessTimeFilledIcon, } from '@vicons/material' const ionicons5 = { @@ -338,6 +339,8 @@ const material = { CheckCircleOutlinedIcon, // 背景图 InsertPhotoSharpIcon, + // 时间 + AccessTimeFilledIcon, } // https://www.xicons.org/#/ 还有很多 diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index e8149c95..6fff00fa 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue @@ -124,6 +124,7 @@ const dblclickHandle = async (item: ConfigType) => { let newComponent: CreateComponentType = await createComponent(item) if (item.redirectComponent) { item.dataset && (newComponent.option.dataset = item.dataset) + if(!newComponent.chartConfig.image && item.dataset) newComponent.chartConfig.image = item.dataset newComponent.chartConfig.title = item.title newComponent.chartConfig.chartFrame = item.chartFrame } diff --git a/src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue b/src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue index d5f4f03e..ffb522ec 100644 --- a/src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue @@ -55,7 +55,7 @@ import { SettingItemBox } from '@/components/Pages/ChartItemSetting' import { useTargetData } from '../hooks/useTargetData.hook' import { sourceOptions, selectTimeOptions } from './index.d' import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d' -import { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' +import { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d' // const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue')) @@ -70,9 +70,6 @@ const { targetData } = useTargetData() as { targetData: Ref { - let arr = [ - PackagesCategoryEnum.BACKGROUNDS - ] - return arr.some(_ => _ === targetData.value.chartConfig.category) + return targetData.value.chartConfig.chartFrame === ChartFrameEnum.STATIC } diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 2796f471..266e85fd 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -35,6 +35,7 @@ export const dragHandle = async (e: DragEvent) => { let newComponent: CreateComponentType = await createComponent(dropData) if (dropData.redirectComponent) { dropData.dataset && (newComponent.option.dataset = dropData.dataset) + if(!newComponent.chartConfig.image && dropData.dataset) newComponent.chartConfig.image = dropData.dataset newComponent.chartConfig.title = dropData.title newComponent.chartConfig.chartFrame = dropData.chartFrame } diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue index 0901e26f..409dedc0 100644 --- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue +++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue @@ -7,6 +7,7 @@ preview-disabled :src="imageInfo" :fallback-src="requireErrorImg()" + width="58.8" >