feat:新增图表

This commit is contained in:
mtruning 2022-01-15 21:54:04 +08:00
parent 81881a8ed4
commit 5843388d0b
30 changed files with 234 additions and 29 deletions

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -0,0 +1,12 @@
import Number from './index.vue'
import image from '@/assets/images/chart/decorates/number.png'
import { ConfigType } from '@/packages/index.d'
import { ChatCategoryEnum } from '../../index.d'
export const NumberConfig: ConfigType = {
key: 'Number',
title: '数字翻牌',
category: ChatCategoryEnum.MORE,
node: Number,
image
}

View File

@ -0,0 +1,13 @@
<template>
<div>
天气
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,12 @@
import Time from './index.vue'
import image from '@/assets/images/chart/decorates/time.png'
import { ConfigType } from '@/packages/index.d'
import { ChatCategoryEnum } from '../../index.d'
export const TimeConfig: ConfigType = {
key: 'Time',
title: '时间',
category: ChatCategoryEnum.MORE,
node: Time,
image
}

View File

@ -0,0 +1,13 @@
<template>
<div>
天气
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,12 @@
import Weather from './index.vue'
import image from '@/assets/images/chart/decorates/weather.png'
import { ConfigType } from '@/packages/index.d'
import { ChatCategoryEnum } from '../../index.d'
export const WeatherConfig: ConfigType = {
key: 'Weather',
title: '天气',
category: ChatCategoryEnum.MORE,
node: Weather,
image
}

View File

@ -0,0 +1,13 @@
<template>
<div>
天气
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,12 @@
import WeatherTime from './index.vue'
import image from '@/assets/images/chart/decorates/weather_time.png'
import { ConfigType } from '@/packages/index.d'
import { ChatCategoryEnum } from '../../index.d'
export const WeatherTimeConfig: ConfigType = {
key: 'WeatherTime',
title: '天气和时间',
category: ChatCategoryEnum.MORE,
node: WeatherTime,
image
}

View File

@ -0,0 +1,13 @@
<template>
<div>
天气
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,6 @@
import { WeatherConfig } from './Weather/index'
import { TimeConfig } from './Time/index'
import { WeatherTimeConfig } from './WeatherTime/index'
import { NumberConfig } from './Number/index'
export default [WeatherConfig, TimeConfig, WeatherTimeConfig, NumberConfig]

View File

@ -6,7 +6,7 @@ import { ChatCategoryEnum } from '../../index.d'
export const BorderCommonConfig: ConfigType = {
key: 'BorderCommon',
title: '边框',
category: ChatCategoryEnum.Border,
category: ChatCategoryEnum.BORDER,
node: BorderCommon,
image
}

View File

@ -1,5 +1,4 @@
export enum ChatCategoryEnum {
Border = '边框',
Title = '标题',
Else = '其它'
BORDER = '边框',
MORE = '更多'
}

View File

@ -1,3 +1,4 @@
import Borders from './Borders'
import Mores from './Mores'
export const DecorateList = [...Borders]
export const DecorateList = [...Borders, ...Mores]

View File

@ -0,0 +1,12 @@
import TextCloud from './index.vue'
import image from '@/assets/images/chart/informations/words_cloud.png'
import { ConfigType } from '@/packages/index.d'
import { ChatCategoryEnum } from '../../index.d'
export const TextCloudConfig: ConfigType = {
key: 'TextCloud',
title: '词云',
category: ChatCategoryEnum.MORE,
node: TextCloud,
image
}

View File

@ -0,0 +1,13 @@
<template>
<div>
词云
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,3 @@
import { TextCloudConfig } from './TextCloud/index'
export default [TextCloudConfig]

View File

@ -0,0 +1,12 @@
import TitleBevelAngle from './index.vue'
import image from '@/assets/images/chart/informations/title_diamond2.png'
import { ConfigType } from '@/packages/index.d'
import { ChatCategoryEnum } from '../../index.d'
export const TitleBevelAngleConfig: ConfigType = {
key: 'TitleBevelAngle',
title: '斜角标题',
category: ChatCategoryEnum.TITLE,
node: TitleBevelAngle,
image
}

View File

@ -0,0 +1,13 @@
<template>
<div>
标题
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>

View File

@ -5,8 +5,8 @@ import { ChatCategoryEnum } from '../../index.d'
export const TitleCommonConfig: ConfigType = {
key: 'Text',
title: '标题',
title: '普通标题',
category: ChatCategoryEnum.TITLE,
node: TitleCommon,
image
}
}

View File

@ -0,0 +1,12 @@
import TitlePro from './index.vue'
import image from '@/assets/images/chart/informations/title_main.png'
import { ConfigType } from '@/packages/index.d'
import { ChatCategoryEnum } from '../../index.d'
export const TitleProConfig: ConfigType = {
key: 'TitlePro',
title: '中心标题',
category: ChatCategoryEnum.TITLE,
node: TitlePro,
image
}

View File

@ -0,0 +1,13 @@
<template>
<div>
标题
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>

View File

@ -1,3 +1,5 @@
import { TitleCommonConfig } from './TitleCommon/index'
import { TitleProConfig } from './TitlePro/index'
import { TitleBevelAngleConfig } from './TitleBevelAngle/index'
export default [TitleCommonConfig]
export default [TitleProConfig, TitleCommonConfig, TitleBevelAngleConfig]

View File

@ -1,4 +1,5 @@
export enum ChatCategoryEnum {
TEXT = '文本',
TITLE = '标题'
TITLE = '标题',
MORE = '更多'
}

View File

@ -1,4 +1,5 @@
import Texts from './Texts'
import Titles from './Titles'
import Mores from './Mores'
export const InformationList = [...Texts, ...Titles]
export const InformationList = [...Texts, ...Titles, ...Mores]

View File

@ -6,16 +6,22 @@ export type ConfigType = {
title: string
category: string
node: Component
image: string | (() => Promise<typeof import("*.png")>),
image: string | (() => Promise<typeof import('*.png')>)
[T: string]: unknown
}
export enum PackagesCategoryEnum {
CHARTS = 'CHARTS',
TABLES = 'TABLES',
INFORMATION = 'INFORMATION',
DECORATES = 'DECORATES'
DECORATES = 'DECORATES',
}
export enum PackagesCategoryName {
CHARTS = '图表',
TABLES = '表格',
INFORMATION = '信息',
DECORATES = '小组件',
}
export type PackagesType = {
@ -23,4 +29,4 @@ export type PackagesType = {
[PackagesCategoryEnum.INFORMATION]: ConfigType[]
[PackagesCategoryEnum.TABLES]: ConfigType[]
[PackagesCategoryEnum.DECORATES]: ConfigType[]
}
}

View File

@ -25,3 +25,11 @@ export interface ChartLayoutType {
// 滤镜
filter: ChartLayoutFilterType
}
export enum ChartLayoutStoreEnums {
LAYERS = 'layers',
CHARTS = 'charts',
DETAILS = 'details',
ALIGNLINE = 'alignLine',
FILTER = 'filter',
}

View File

@ -2,16 +2,17 @@ import { reactive, ref } from 'vue'
import { icon } from '@/plugins'
import { renderLang, renderIcon } from '@/utils'
import { themeColor, setItem, getCharts } from './layoutHook'
import { PackagesCategoryEnum } from '@/packages/index.d'
import { PackagesCategoryEnum, PackagesCategoryName } from '@/packages/index.d'
// 图表
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
// 图标
const { BarChartIcon } = icon.ionicons5
const {
TableSplitIcon,
RoadmapIcon,
SpellCheckIcon,
GraphicalDataFlowIcon
GraphicalDataFlowIcon,
} = icon.carbon
// 图表
@ -23,20 +24,20 @@ const menuOptions = reactive<{
const packagesListObj = {
[PackagesCategoryEnum.CHARTS]: {
icon: renderIcon(RoadmapIcon),
label: renderLang('图表')
label: renderLang(PackagesCategoryName.CHARTS),
},
[PackagesCategoryEnum.INFORMATION]: {
icon: renderIcon(SpellCheckIcon),
label: renderLang('信息')
label: renderLang(PackagesCategoryName.INFORMATION),
},
[PackagesCategoryEnum.TABLES]: {
icon: renderIcon(TableSplitIcon),
label: renderLang('表格')
label: renderLang(PackagesCategoryName.TABLES),
},
[PackagesCategoryEnum.DECORATES]: {
icon: renderIcon(GraphicalDataFlowIcon),
label: renderLang('装饰')
}
label: renderLang(PackagesCategoryName.DECORATES),
},
}
// 处理列表
@ -49,7 +50,7 @@ const handlePackagesList = () => {
// @ts-ignore
label: packagesListObj[val].label,
// @ts-ignore
list: getPackagesList[val]
list: getPackagesList[val],
})
}
}
@ -67,9 +68,9 @@ const clickItemHandle = (key: string, item: any) => {
selectOptions.value = item
// 处理折叠
if (beforeSelect === key) {
setItem('charts', !getCharts.value)
setItem(ChartLayoutStoreEnums.CHARTS, !getCharts.value)
} else {
setItem('charts', true)
setItem(ChartLayoutStoreEnums.CHARTS, true)
}
beforeSelect = key
}
@ -81,5 +82,5 @@ export {
selectOptions,
selectValue,
clickItemHandle,
menuOptions
menuOptions,
}

View File

@ -17,12 +17,13 @@
<script setup lang="ts">
import { ContentBox } from '../ContentBox/index'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { icon } from '@/plugins'
const { LayersIcon } = icon.ionicons5
const chartLayoutStore = useChartLayoutStore()
const backHandle = () => {
chartLayoutStore.setItem('layers', false)
chartLayoutStore.setItem(ChartLayoutStoreEnums.LAYERS, false)
}
</script>

View File

@ -36,6 +36,7 @@ import { renderIcon, goDialog, goHome } from '@/utils'
import { icon } from '@/plugins'
const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
const { setItem } = useChartLayoutStore()
const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
@ -49,19 +50,19 @@ type ItemType = {
const btnList = reactive<ItemType[]>([
{
key: 'charts',
key: ChartLayoutStoreEnums.CHARTS,
select: getCharts,
title: '图表组件',
icon: renderIcon(BarChartIcon)
},
{
key: 'layers',
key: ChartLayoutStoreEnums.LAYERS,
select: getLayers,
title: '图层控制',
icon: renderIcon(LayersIcon)
},
{
key: 'details',
key: ChartLayoutStoreEnums.DETAILS,
select: getDetails,
title: '详情设置',
icon: renderIcon(PrismIcon)