From 3e511069b5257ebcdeb60fbd3fc0433577bb5e49 Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Fri, 14 Jan 2022 22:07:02 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Echarts/index.ts | 2 + src/components/Echarts/index.vue | 13 ++ .../components/Chart/Pie/PieCommon/index.ts | 12 ++ .../components/Chart/Pie/PieCommon/index.vue | 13 ++ src/packages/components/Chart/Pie/index.ts | 3 + .../components/Chart/bar/barCommon/index.ts | 8 +- src/packages/components/Chart/bar/index.ts | 3 + src/packages/components/Chart/index.d.ts | 4 + src/packages/components/Chart/index.ts | 5 +- .../Decorate/border/borderCommon/index.ts | 11 +- .../Decorate/border/borderCommon/index.vue | 2 +- .../components/Decorate/border/index.ts | 3 + src/packages/components/Decorate/index.d.ts | 3 + src/packages/components/Decorate/index.ts | 4 +- src/packages/echarts/index.d.ts | 0 src/packages/echarts/index.ts | 0 src/packages/index.d.ts | 16 ++- src/packages/index.ts | 8 +- .../modules/packagesStore/packagesStore.d.ts | 1 + .../modules/packagesStore/packagesStore.ts | 9 +- .../ContentCharts/components/Charts/index.ts | 3 - .../ContentCharts/components/Charts/index.vue | 108 ---------------- .../components/Decorates/index.ts | 3 - .../components/Decorates/index.vue | 9 -- .../ContentCharts/components/ItemBox/index.ts | 3 + .../components/ItemBox/index.vue | 55 ++++++++ .../OptionContent/hooks/handleOptions.hook.ts | 29 +++++ .../components/OptionContent/index.ts | 3 + .../components/OptionContent/index.vue | 120 ++++++++++++++++++ .../ContentCharts/components/Tables/index.ts | 3 - .../ContentCharts/components/Tables/index.vue | 9 -- .../ContentCharts/components/Texts/index.ts | 3 - .../ContentCharts/components/Texts/index.vue | 9 -- .../ContentCharts/hooks/asideHook.ts | 98 +++++++------- .../chart/components/ContentCharts/index.vue | 16 ++- 35 files changed, 359 insertions(+), 232 deletions(-) create mode 100644 src/components/Echarts/index.ts create mode 100644 src/components/Echarts/index.vue create mode 100644 src/packages/components/Chart/Pie/PieCommon/index.ts create mode 100644 src/packages/components/Chart/Pie/PieCommon/index.vue create mode 100644 src/packages/components/Chart/Pie/index.ts create mode 100644 src/packages/components/Chart/bar/index.ts create mode 100644 src/packages/components/Chart/index.d.ts create mode 100644 src/packages/components/Decorate/border/index.ts create mode 100644 src/packages/components/Decorate/index.d.ts create mode 100644 src/packages/echarts/index.d.ts create mode 100644 src/packages/echarts/index.ts delete mode 100644 src/views/chart/components/ContentCharts/components/Charts/index.ts delete mode 100644 src/views/chart/components/ContentCharts/components/Charts/index.vue delete mode 100644 src/views/chart/components/ContentCharts/components/Decorates/index.ts delete mode 100644 src/views/chart/components/ContentCharts/components/Decorates/index.vue create mode 100644 src/views/chart/components/ContentCharts/components/ItemBox/index.ts create mode 100644 src/views/chart/components/ContentCharts/components/ItemBox/index.vue create mode 100644 src/views/chart/components/ContentCharts/components/OptionContent/hooks/handleOptions.hook.ts create mode 100644 src/views/chart/components/ContentCharts/components/OptionContent/index.ts create mode 100644 src/views/chart/components/ContentCharts/components/OptionContent/index.vue delete mode 100644 src/views/chart/components/ContentCharts/components/Tables/index.ts delete mode 100644 src/views/chart/components/ContentCharts/components/Tables/index.vue delete mode 100644 src/views/chart/components/ContentCharts/components/Texts/index.ts delete mode 100644 src/views/chart/components/ContentCharts/components/Texts/index.vue diff --git a/src/components/Echarts/index.ts b/src/components/Echarts/index.ts new file mode 100644 index 00000000..e25f7a08 --- /dev/null +++ b/src/components/Echarts/index.ts @@ -0,0 +1,2 @@ +import Echarts from './index.vue' +export { Echarts } diff --git a/src/components/Echarts/index.vue b/src/components/Echarts/index.vue new file mode 100644 index 00000000..992cfc10 --- /dev/null +++ b/src/components/Echarts/index.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/packages/components/Chart/Pie/PieCommon/index.ts b/src/packages/components/Chart/Pie/PieCommon/index.ts new file mode 100644 index 00000000..d90fe0f3 --- /dev/null +++ b/src/packages/components/Chart/Pie/PieCommon/index.ts @@ -0,0 +1,12 @@ +import node from './index.vue' +import image from '@/assets/images/chart/pie.png' +import { ConfigType } from '@/packages/index.d' +import { ChatCategoryEnum } from '../../index.d' + +export const pieCommonConfig: ConfigType = { + key: 'PieCommon', + title: '饼图', + category: ChatCategoryEnum.PIE, + node: node, + image: image +} diff --git a/src/packages/components/Chart/Pie/PieCommon/index.vue b/src/packages/components/Chart/Pie/PieCommon/index.vue new file mode 100644 index 00000000..e15fdb68 --- /dev/null +++ b/src/packages/components/Chart/Pie/PieCommon/index.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/packages/components/Chart/Pie/index.ts b/src/packages/components/Chart/Pie/index.ts new file mode 100644 index 00000000..beb6f3dd --- /dev/null +++ b/src/packages/components/Chart/Pie/index.ts @@ -0,0 +1,3 @@ +import { pieCommonConfig } from './PieCommon/index' + +export default [pieCommonConfig] \ No newline at end of file diff --git a/src/packages/components/Chart/bar/barCommon/index.ts b/src/packages/components/Chart/bar/barCommon/index.ts index d8cd9c49..71f35a4f 100644 --- a/src/packages/components/Chart/bar/barCommon/index.ts +++ b/src/packages/components/Chart/bar/barCommon/index.ts @@ -1,11 +1,13 @@ import barCommon from './index.vue' -import barImg from '@/assets/images/chart/bar_y.png' +import image from '@/assets/images/chart/bar_y.png' import { ConfigType } from '@/packages/index.d' +import { ChatCategoryEnum } from '../../index.d' // 柱状图 export const barCommonConfig: ConfigType = { - key: 'Bar', + key: 'BarCommon', title: '基础', + category: ChatCategoryEnum.BAR, node: barCommon, - image: barImg + image: image } diff --git a/src/packages/components/Chart/bar/index.ts b/src/packages/components/Chart/bar/index.ts new file mode 100644 index 00000000..56544510 --- /dev/null +++ b/src/packages/components/Chart/bar/index.ts @@ -0,0 +1,3 @@ +import { barCommonConfig } from './BarCommon/index' + +export default [barCommonConfig] diff --git a/src/packages/components/Chart/index.d.ts b/src/packages/components/Chart/index.d.ts new file mode 100644 index 00000000..ab81fa27 --- /dev/null +++ b/src/packages/components/Chart/index.d.ts @@ -0,0 +1,4 @@ +export enum ChatCategoryEnum { + BAR = '柱状图', + PIE = '饼图' +} \ No newline at end of file diff --git a/src/packages/components/Chart/index.ts b/src/packages/components/Chart/index.ts index e0ef5df2..69711cce 100644 --- a/src/packages/components/Chart/index.ts +++ b/src/packages/components/Chart/index.ts @@ -1,3 +1,4 @@ -import { barCommonConfig } from './bar/barCommon/index' +import Bar from './Bar' +import Pie from './Pie' -export const BarList = [barCommonConfig] +export const ChartList = [...Bar, ...Pie] diff --git a/src/packages/components/Decorate/border/borderCommon/index.ts b/src/packages/components/Decorate/border/borderCommon/index.ts index bfb03a8f..c4e2fa64 100644 --- a/src/packages/components/Decorate/border/borderCommon/index.ts +++ b/src/packages/components/Decorate/border/borderCommon/index.ts @@ -1,11 +1,12 @@ import BorderCommon from './index.vue' -import barImg from '@/assets/images/chart/bar_y.png' +import image from '@/assets/images/chart/static.png' import { ConfigType } from '@/packages/index.d' +import { ChatCategoryEnum } from '../../index.d' -// 柱状图 -export const barCommonConfig: ConfigType = { +export const borderCommonConfig: ConfigType = { key: 'Border', - title: '柱状图', + title: '边框', + category: ChatCategoryEnum.Border, node: BorderCommon, - coverGraph: barImg + image: image } diff --git a/src/packages/components/Decorate/border/borderCommon/index.vue b/src/packages/components/Decorate/border/borderCommon/index.vue index f3abbb36..2e34ca4b 100644 --- a/src/packages/components/Decorate/border/borderCommon/index.vue +++ b/src/packages/components/Decorate/border/borderCommon/index.vue @@ -1,6 +1,6 @@ diff --git a/src/packages/components/Decorate/border/index.ts b/src/packages/components/Decorate/border/index.ts new file mode 100644 index 00000000..1ca71c3f --- /dev/null +++ b/src/packages/components/Decorate/border/index.ts @@ -0,0 +1,3 @@ +import { borderCommonConfig } from './BorderCommon/index' + +export default [borderCommonConfig] diff --git a/src/packages/components/Decorate/index.d.ts b/src/packages/components/Decorate/index.d.ts new file mode 100644 index 00000000..cfddaa28 --- /dev/null +++ b/src/packages/components/Decorate/index.d.ts @@ -0,0 +1,3 @@ +export enum ChatCategoryEnum { + Border = '边框', +} \ No newline at end of file diff --git a/src/packages/components/Decorate/index.ts b/src/packages/components/Decorate/index.ts index 401a72ce..0b2cb3d4 100644 --- a/src/packages/components/Decorate/index.ts +++ b/src/packages/components/Decorate/index.ts @@ -1,3 +1,3 @@ -import { barCommonConfig } from './border/borderCommon/index' +import Border from './Border' -export const BarList = [barCommonConfig] +export const DecorateList = [...Border] diff --git a/src/packages/echarts/index.d.ts b/src/packages/echarts/index.d.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/packages/echarts/index.ts b/src/packages/echarts/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index dca310fd..023a8ca2 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -4,11 +4,23 @@ import { Component } from '@/router/types' export type ConfigType = { key: string title: string + category: string node: Component image: string [T: string]: unknown } -export type PackagesType = { - Charts: ConfigType[] + +export enum PackagesCategoryEnum { + CHARTS = 'CHARTS', + TABLES = 'TABLES', + TEXTS = 'TEXTS', + DECORATES = 'DECORATES' } + +export type PackagesType = { + [PackagesCategoryEnum.CHARTS]: ConfigType[] + [PackagesCategoryEnum.TEXTS]: ConfigType[] + [PackagesCategoryEnum.TABLES]: ConfigType[] + [PackagesCategoryEnum.DECORATES]: ConfigType[] +} \ No newline at end of file diff --git a/src/packages/index.ts b/src/packages/index.ts index a26ebf5f..a56b81c1 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -1,9 +1,11 @@ -import { PackagesType } from '@/packages/index.d' -import { BarList } from '@/packages/components/Chart/index' +import { PackagesCategoryEnum, PackagesType } from '@/packages/index.d' +import { ChartList } from '@/packages/components/Chart/index' +import { DecorateList } from '@/packages/components/Decorate/index' // 所有图表 let packagesList: PackagesType = { - Charts: BarList + [PackagesCategoryEnum.CHARTS]: ChartList, + [PackagesCategoryEnum.DECORATES]: DecorateList } export { packagesList } diff --git a/src/store/modules/packagesStore/packagesStore.d.ts b/src/store/modules/packagesStore/packagesStore.d.ts index b5100701..3dcbf547 100644 --- a/src/store/modules/packagesStore/packagesStore.d.ts +++ b/src/store/modules/packagesStore/packagesStore.d.ts @@ -2,6 +2,7 @@ import { PackagesType, ConfigType } from '@/packages/index.d' export { ConfigType } +export { PackagesType } export interface PackagesStoreType { packagesList: PackagesType } diff --git a/src/store/modules/packagesStore/packagesStore.ts b/src/store/modules/packagesStore/packagesStore.ts index 93fef87b..fccc2dda 100644 --- a/src/store/modules/packagesStore/packagesStore.ts +++ b/src/store/modules/packagesStore/packagesStore.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia' -import { PackagesStoreType, ConfigType } from './packagesStore.d' +import { PackagesStoreType, PackagesType } from './packagesStore.d' import { packagesList } from '@/packages/index' export const usePackagesStore = defineStore({ @@ -8,11 +8,8 @@ export const usePackagesStore = defineStore({ packagesList }), getters: { - getPackagesList(): ConfigType | {} { - if (this.packagesList && this.packagesList.charts) { - return this.packagesList.charts - } - return {} + getPackagesList(): PackagesType { + return this.packagesList } } }) diff --git a/src/views/chart/components/ContentCharts/components/Charts/index.ts b/src/views/chart/components/ContentCharts/components/Charts/index.ts deleted file mode 100644 index 9b34a4bc..00000000 --- a/src/views/chart/components/ContentCharts/components/Charts/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Charts from './index.vue' - -export { Charts } diff --git a/src/views/chart/components/ContentCharts/components/Charts/index.vue b/src/views/chart/components/ContentCharts/components/Charts/index.vue deleted file mode 100644 index a089c93e..00000000 --- a/src/views/chart/components/ContentCharts/components/Charts/index.vue +++ /dev/null @@ -1,108 +0,0 @@ - - - - - diff --git a/src/views/chart/components/ContentCharts/components/Decorates/index.ts b/src/views/chart/components/ContentCharts/components/Decorates/index.ts deleted file mode 100644 index 18e31ce5..00000000 --- a/src/views/chart/components/ContentCharts/components/Decorates/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Decorates from './index.vue' - -export { Decorates } diff --git a/src/views/chart/components/ContentCharts/components/Decorates/index.vue b/src/views/chart/components/ContentCharts/components/Decorates/index.vue deleted file mode 100644 index eb932013..00000000 --- a/src/views/chart/components/ContentCharts/components/Decorates/index.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/src/views/chart/components/ContentCharts/components/ItemBox/index.ts b/src/views/chart/components/ContentCharts/components/ItemBox/index.ts new file mode 100644 index 00000000..8ec7f82e --- /dev/null +++ b/src/views/chart/components/ContentCharts/components/ItemBox/index.ts @@ -0,0 +1,3 @@ +import ItemBox from './index.vue' + +export { ItemBox } diff --git a/src/views/chart/components/ContentCharts/components/ItemBox/index.vue b/src/views/chart/components/ContentCharts/components/ItemBox/index.vue new file mode 100644 index 00000000..c34ab546 --- /dev/null +++ b/src/views/chart/components/ContentCharts/components/ItemBox/index.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/views/chart/components/ContentCharts/components/OptionContent/hooks/handleOptions.hook.ts b/src/views/chart/components/ContentCharts/components/OptionContent/hooks/handleOptions.hook.ts new file mode 100644 index 00000000..d903aa43 --- /dev/null +++ b/src/views/chart/components/ContentCharts/components/OptionContent/hooks/handleOptions.hook.ts @@ -0,0 +1,29 @@ +import { reactive, ref, watch } from 'vue' +import { ConfigType } from '@/packages/index.d' + +export const useHandleOptions = (packages) => { + watch( + // @ts-ignore + () => props.selectOptions, + (newData: { list: ConfigType[] }) => { + if (!newData) return + newData.list.forEach((e: ConfigType) => { + const value: ConfigType[] = (packages.categorys as any)[e.category] + // @ts-ignore + packages.categorys[e.category] = + value && value.length ? [...value, e] : [e] + }) + for (const val in packages.categorys) { + packages.menuOptions.push({ + key: val, + label: val + }) + } + selectValue.value = packages.menuOptions[0]['key'] + }, + { + deep: true, + immediate: true + } + ) +} diff --git a/src/views/chart/components/ContentCharts/components/OptionContent/index.ts b/src/views/chart/components/ContentCharts/components/OptionContent/index.ts new file mode 100644 index 00000000..5bfd99ec --- /dev/null +++ b/src/views/chart/components/ContentCharts/components/OptionContent/index.ts @@ -0,0 +1,3 @@ +import OptionContent from './index.vue' + +export { OptionContent } diff --git a/src/views/chart/components/ContentCharts/components/OptionContent/index.vue b/src/views/chart/components/ContentCharts/components/OptionContent/index.vue new file mode 100644 index 00000000..22d30ccf --- /dev/null +++ b/src/views/chart/components/ContentCharts/components/OptionContent/index.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/views/chart/components/ContentCharts/components/Tables/index.ts b/src/views/chart/components/ContentCharts/components/Tables/index.ts deleted file mode 100644 index 315cfb7b..00000000 --- a/src/views/chart/components/ContentCharts/components/Tables/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Tables from './index.vue' - -export { Tables } diff --git a/src/views/chart/components/ContentCharts/components/Tables/index.vue b/src/views/chart/components/ContentCharts/components/Tables/index.vue deleted file mode 100644 index caa4a8c3..00000000 --- a/src/views/chart/components/ContentCharts/components/Tables/index.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/src/views/chart/components/ContentCharts/components/Texts/index.ts b/src/views/chart/components/ContentCharts/components/Texts/index.ts deleted file mode 100644 index 084b3202..00000000 --- a/src/views/chart/components/ContentCharts/components/Texts/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Texts from './index.vue' - -export { Texts } diff --git a/src/views/chart/components/ContentCharts/components/Texts/index.vue b/src/views/chart/components/ContentCharts/components/Texts/index.vue deleted file mode 100644 index 23687bd9..00000000 --- a/src/views/chart/components/ContentCharts/components/Texts/index.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/src/views/chart/components/ContentCharts/hooks/asideHook.ts b/src/views/chart/components/ContentCharts/hooks/asideHook.ts index 0f9e6877..43576cdd 100644 --- a/src/views/chart/components/ContentCharts/hooks/asideHook.ts +++ b/src/views/chart/components/ContentCharts/hooks/asideHook.ts @@ -1,11 +1,8 @@ import { reactive, ref } from 'vue' import { icon } from '@/plugins' -import { Charts } from '../components/Charts' -import { Tables } from '../components/Tables' -import { Texts } from '../components/Texts' -import { Decorates } from '../components/Decorates' import { renderLang, renderIcon } from '@/utils' import { themeColor, setItem, getCharts } from './layoutHook' +import { PackagesCategoryEnum } from '@/packages/index.d' // 图表 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore' // 图标 @@ -18,65 +15,56 @@ const { } = icon.carbon // 图表 -const { packagesList } = usePackagesStore() -const menuOptions: any[] = reactive([]) +const { getPackagesList } = usePackagesStore() +const menuOptions = reactive<{ + [T: string]: any +}>([]) -const infoObj = new Map([ - [ - 'Charts', - { - icon: renderIcon(RoadmapIcon), - label: renderLang('图表'), - node: Charts - } - ], - [ - 'Tables', - { - icon: renderIcon(TableSplitIcon), - label: renderLang('表格'), - node: Tables - } - ], - [ - 'Texts', - { - icon: renderIcon(SpellCheckIcon), - label: renderLang('信息'), - node: Tables - } - ], - [ - 'Decorates', - { - icon: renderIcon(GraphicalDataFlowIcon), - label: renderLang('表格'), - node: Decorates - } - ], -]) +const packagesListObj = { + [PackagesCategoryEnum.CHARTS]: { + icon: renderIcon(RoadmapIcon), + label: renderLang('图表') + }, + // [PackagesCategoryEnum.TEXTS]: { + // icon: renderIcon(SpellCheckIcon), + // label: renderLang('信息') + // }, + // [PackagesCategoryEnum.TABLES]: { + // icon: renderIcon(GraphicalDataFlowIcon), + // label: renderLang('表格') + // }, + [PackagesCategoryEnum.DECORATES]: { + icon: renderIcon(GraphicalDataFlowIcon), + label: renderLang('装饰') + } +} -Object.getOwnPropertyNames(packagesList).forEach(function (key) { - menuOptions.push({ - key: key, - icon: infoObj.get(key)?.icon, - label: infoObj.get(key)?.label, - node: infoObj.get(key)?.node, - // @ts-ignore string 赋值给 any 的问题 - packagesList: packagesList[key] - }) -}) +// 处理列表 +const handlePackagesList = () => { + for (const val in getPackagesList) { + menuOptions.push({ + key: val, + // @ts-ignore + icon: packagesListObj[val].icon, + // @ts-ignore + label: packagesListObj[val].label, + // @ts-ignore + list: getPackagesList[val] + }) + } +} +handlePackagesList() // 记录选中值 let beforeSelect: string = menuOptions[0]['key'] const selectValue = ref(menuOptions[0]['key']) + // 选中的对象值 -const selecOptions = ref(menuOptions[0]) +const selectOptions = ref(menuOptions[0]) // 点击 item -const clickItemHandle = (key: string, item: T) => { - // 处理渲染的 node - selecOptions.value = item +const clickItemHandle = (key: string, item: any) => { + selectOptions.value = item // 处理折叠 if (beforeSelect === key) { setItem('charts', !getCharts.value) @@ -90,7 +78,7 @@ export { getCharts, BarChartIcon, themeColor, - selecOptions, + selectOptions, selectValue, clickItemHandle, menuOptions diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue index c01f6c62..126ff813 100644 --- a/src/views/chart/components/ContentCharts/index.vue +++ b/src/views/chart/components/ContentCharts/index.vue @@ -23,11 +23,14 @@ @update:value="clickItemHandle" />
- - - - - + +
@@ -37,11 +40,12 @@