feat:新增图表
This commit is contained in:
parent
81881a8ed4
commit
5843388d0b
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
12
src/packages/components/Decorate/Mores/Number/index.ts
Normal file
12
src/packages/components/Decorate/Mores/Number/index.ts
Normal 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
|
||||||
|
}
|
13
src/packages/components/Decorate/Mores/Number/index.vue
Normal file
13
src/packages/components/Decorate/Mores/Number/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
天气
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
12
src/packages/components/Decorate/Mores/Time/index.ts
Normal file
12
src/packages/components/Decorate/Mores/Time/index.ts
Normal 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
|
||||||
|
}
|
13
src/packages/components/Decorate/Mores/Time/index.vue
Normal file
13
src/packages/components/Decorate/Mores/Time/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
天气
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
12
src/packages/components/Decorate/Mores/Weather/index.ts
Normal file
12
src/packages/components/Decorate/Mores/Weather/index.ts
Normal 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
|
||||||
|
}
|
13
src/packages/components/Decorate/Mores/Weather/index.vue
Normal file
13
src/packages/components/Decorate/Mores/Weather/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
天气
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
12
src/packages/components/Decorate/Mores/WeatherTime/index.ts
Normal file
12
src/packages/components/Decorate/Mores/WeatherTime/index.ts
Normal 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
|
||||||
|
}
|
13
src/packages/components/Decorate/Mores/WeatherTime/index.vue
Normal file
13
src/packages/components/Decorate/Mores/WeatherTime/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
天气
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
6
src/packages/components/Decorate/Mores/index.ts
Normal file
6
src/packages/components/Decorate/Mores/index.ts
Normal 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]
|
@ -6,7 +6,7 @@ import { ChatCategoryEnum } from '../../index.d'
|
|||||||
export const BorderCommonConfig: ConfigType = {
|
export const BorderCommonConfig: ConfigType = {
|
||||||
key: 'BorderCommon',
|
key: 'BorderCommon',
|
||||||
title: '边框',
|
title: '边框',
|
||||||
category: ChatCategoryEnum.Border,
|
category: ChatCategoryEnum.BORDER,
|
||||||
node: BorderCommon,
|
node: BorderCommon,
|
||||||
image
|
image
|
||||||
}
|
}
|
||||||
|
5
src/packages/components/Decorate/index.d.ts
vendored
5
src/packages/components/Decorate/index.d.ts
vendored
@ -1,5 +1,4 @@
|
|||||||
export enum ChatCategoryEnum {
|
export enum ChatCategoryEnum {
|
||||||
Border = '边框',
|
BORDER = '边框',
|
||||||
Title = '标题',
|
MORE = '更多'
|
||||||
Else = '其它'
|
|
||||||
}
|
}
|
@ -1,3 +1,4 @@
|
|||||||
import Borders from './Borders'
|
import Borders from './Borders'
|
||||||
|
import Mores from './Mores'
|
||||||
|
|
||||||
export const DecorateList = [...Borders]
|
export const DecorateList = [...Borders, ...Mores]
|
||||||
|
12
src/packages/components/Information/Mores/TextCloud/index.ts
Normal file
12
src/packages/components/Information/Mores/TextCloud/index.ts
Normal 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
|
||||||
|
}
|
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
词云
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
3
src/packages/components/Information/Mores/index.ts
Normal file
3
src/packages/components/Information/Mores/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { TextCloudConfig } from './TextCloud/index'
|
||||||
|
|
||||||
|
export default [TextCloudConfig]
|
@ -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
|
||||||
|
}
|
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
标题
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -5,7 +5,7 @@ import { ChatCategoryEnum } from '../../index.d'
|
|||||||
|
|
||||||
export const TitleCommonConfig: ConfigType = {
|
export const TitleCommonConfig: ConfigType = {
|
||||||
key: 'Text',
|
key: 'Text',
|
||||||
title: '标题',
|
title: '普通标题',
|
||||||
category: ChatCategoryEnum.TITLE,
|
category: ChatCategoryEnum.TITLE,
|
||||||
node: TitleCommon,
|
node: TitleCommon,
|
||||||
image
|
image
|
||||||
|
12
src/packages/components/Information/Titles/TitlePro/index.ts
Normal file
12
src/packages/components/Information/Titles/TitlePro/index.ts
Normal 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
|
||||||
|
}
|
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
标题
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -1,3 +1,5 @@
|
|||||||
import { TitleCommonConfig } from './TitleCommon/index'
|
import { TitleCommonConfig } from './TitleCommon/index'
|
||||||
|
import { TitleProConfig } from './TitlePro/index'
|
||||||
|
import { TitleBevelAngleConfig } from './TitleBevelAngle/index'
|
||||||
|
|
||||||
export default [TitleCommonConfig]
|
export default [TitleProConfig, TitleCommonConfig, TitleBevelAngleConfig]
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
export enum ChatCategoryEnum {
|
export enum ChatCategoryEnum {
|
||||||
TEXT = '文本',
|
TEXT = '文本',
|
||||||
TITLE = '标题'
|
TITLE = '标题',
|
||||||
|
MORE = '更多'
|
||||||
}
|
}
|
@ -1,4 +1,5 @@
|
|||||||
import Texts from './Texts'
|
import Texts from './Texts'
|
||||||
import Titles from './Titles'
|
import Titles from './Titles'
|
||||||
|
import Mores from './Mores'
|
||||||
|
|
||||||
export const InformationList = [...Texts, ...Titles]
|
export const InformationList = [...Texts, ...Titles, ...Mores]
|
||||||
|
12
src/packages/index.d.ts
vendored
12
src/packages/index.d.ts
vendored
@ -6,16 +6,22 @@ export type ConfigType = {
|
|||||||
title: string
|
title: string
|
||||||
category: string
|
category: string
|
||||||
node: Component
|
node: Component
|
||||||
image: string | (() => Promise<typeof import("*.png")>),
|
image: string | (() => Promise<typeof import('*.png')>)
|
||||||
[T: string]: unknown
|
[T: string]: unknown
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export enum PackagesCategoryEnum {
|
export enum PackagesCategoryEnum {
|
||||||
CHARTS = 'CHARTS',
|
CHARTS = 'CHARTS',
|
||||||
TABLES = 'TABLES',
|
TABLES = 'TABLES',
|
||||||
INFORMATION = 'INFORMATION',
|
INFORMATION = 'INFORMATION',
|
||||||
DECORATES = 'DECORATES'
|
DECORATES = 'DECORATES',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum PackagesCategoryName {
|
||||||
|
CHARTS = '图表',
|
||||||
|
TABLES = '表格',
|
||||||
|
INFORMATION = '信息',
|
||||||
|
DECORATES = '小组件',
|
||||||
}
|
}
|
||||||
|
|
||||||
export type PackagesType = {
|
export type PackagesType = {
|
||||||
|
@ -25,3 +25,11 @@ export interface ChartLayoutType {
|
|||||||
// 滤镜
|
// 滤镜
|
||||||
filter: ChartLayoutFilterType
|
filter: ChartLayoutFilterType
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export enum ChartLayoutStoreEnums {
|
||||||
|
LAYERS = 'layers',
|
||||||
|
CHARTS = 'charts',
|
||||||
|
DETAILS = 'details',
|
||||||
|
ALIGNLINE = 'alignLine',
|
||||||
|
FILTER = 'filter',
|
||||||
|
}
|
@ -2,16 +2,17 @@ import { reactive, ref } from 'vue'
|
|||||||
import { icon } from '@/plugins'
|
import { icon } from '@/plugins'
|
||||||
import { renderLang, renderIcon } from '@/utils'
|
import { renderLang, renderIcon } from '@/utils'
|
||||||
import { themeColor, setItem, getCharts } from './layoutHook'
|
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 { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||||
|
import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||||
// 图标
|
// 图标
|
||||||
const { BarChartIcon } = icon.ionicons5
|
const { BarChartIcon } = icon.ionicons5
|
||||||
const {
|
const {
|
||||||
TableSplitIcon,
|
TableSplitIcon,
|
||||||
RoadmapIcon,
|
RoadmapIcon,
|
||||||
SpellCheckIcon,
|
SpellCheckIcon,
|
||||||
GraphicalDataFlowIcon
|
GraphicalDataFlowIcon,
|
||||||
} = icon.carbon
|
} = icon.carbon
|
||||||
|
|
||||||
// 图表
|
// 图表
|
||||||
@ -23,20 +24,20 @@ const menuOptions = reactive<{
|
|||||||
const packagesListObj = {
|
const packagesListObj = {
|
||||||
[PackagesCategoryEnum.CHARTS]: {
|
[PackagesCategoryEnum.CHARTS]: {
|
||||||
icon: renderIcon(RoadmapIcon),
|
icon: renderIcon(RoadmapIcon),
|
||||||
label: renderLang('图表')
|
label: renderLang(PackagesCategoryName.CHARTS),
|
||||||
},
|
},
|
||||||
[PackagesCategoryEnum.INFORMATION]: {
|
[PackagesCategoryEnum.INFORMATION]: {
|
||||||
icon: renderIcon(SpellCheckIcon),
|
icon: renderIcon(SpellCheckIcon),
|
||||||
label: renderLang('信息')
|
label: renderLang(PackagesCategoryName.INFORMATION),
|
||||||
},
|
},
|
||||||
[PackagesCategoryEnum.TABLES]: {
|
[PackagesCategoryEnum.TABLES]: {
|
||||||
icon: renderIcon(TableSplitIcon),
|
icon: renderIcon(TableSplitIcon),
|
||||||
label: renderLang('表格')
|
label: renderLang(PackagesCategoryName.TABLES),
|
||||||
},
|
},
|
||||||
[PackagesCategoryEnum.DECORATES]: {
|
[PackagesCategoryEnum.DECORATES]: {
|
||||||
icon: renderIcon(GraphicalDataFlowIcon),
|
icon: renderIcon(GraphicalDataFlowIcon),
|
||||||
label: renderLang('装饰')
|
label: renderLang(PackagesCategoryName.DECORATES),
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理列表
|
// 处理列表
|
||||||
@ -49,7 +50,7 @@ const handlePackagesList = () => {
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
label: packagesListObj[val].label,
|
label: packagesListObj[val].label,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
list: getPackagesList[val]
|
list: getPackagesList[val],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -67,9 +68,9 @@ const clickItemHandle = (key: string, item: any) => {
|
|||||||
selectOptions.value = item
|
selectOptions.value = item
|
||||||
// 处理折叠
|
// 处理折叠
|
||||||
if (beforeSelect === key) {
|
if (beforeSelect === key) {
|
||||||
setItem('charts', !getCharts.value)
|
setItem(ChartLayoutStoreEnums.CHARTS, !getCharts.value)
|
||||||
} else {
|
} else {
|
||||||
setItem('charts', true)
|
setItem(ChartLayoutStoreEnums.CHARTS, true)
|
||||||
}
|
}
|
||||||
beforeSelect = key
|
beforeSelect = key
|
||||||
}
|
}
|
||||||
@ -81,5 +82,5 @@ export {
|
|||||||
selectOptions,
|
selectOptions,
|
||||||
selectValue,
|
selectValue,
|
||||||
clickItemHandle,
|
clickItemHandle,
|
||||||
menuOptions
|
menuOptions,
|
||||||
}
|
}
|
||||||
|
@ -17,12 +17,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ContentBox } from '../ContentBox/index'
|
import { ContentBox } from '../ContentBox/index'
|
||||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||||
|
import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||||
import { icon } from '@/plugins'
|
import { icon } from '@/plugins'
|
||||||
const { LayersIcon } = icon.ionicons5
|
const { LayersIcon } = icon.ionicons5
|
||||||
const chartLayoutStore = useChartLayoutStore()
|
const chartLayoutStore = useChartLayoutStore()
|
||||||
|
|
||||||
const backHandle = () => {
|
const backHandle = () => {
|
||||||
chartLayoutStore.setItem('layers', false)
|
chartLayoutStore.setItem(ChartLayoutStoreEnums.LAYERS, false)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -36,6 +36,7 @@ import { renderIcon, goDialog, goHome } from '@/utils'
|
|||||||
import { icon } from '@/plugins'
|
import { icon } from '@/plugins'
|
||||||
const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
|
const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
|
||||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||||
|
import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||||
|
|
||||||
const { setItem } = useChartLayoutStore()
|
const { setItem } = useChartLayoutStore()
|
||||||
const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
|
const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
|
||||||
@ -49,19 +50,19 @@ type ItemType = {
|
|||||||
|
|
||||||
const btnList = reactive<ItemType[]>([
|
const btnList = reactive<ItemType[]>([
|
||||||
{
|
{
|
||||||
key: 'charts',
|
key: ChartLayoutStoreEnums.CHARTS,
|
||||||
select: getCharts,
|
select: getCharts,
|
||||||
title: '图表组件',
|
title: '图表组件',
|
||||||
icon: renderIcon(BarChartIcon)
|
icon: renderIcon(BarChartIcon)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'layers',
|
key: ChartLayoutStoreEnums.LAYERS,
|
||||||
select: getLayers,
|
select: getLayers,
|
||||||
title: '图层控制',
|
title: '图层控制',
|
||||||
icon: renderIcon(LayersIcon)
|
icon: renderIcon(LayersIcon)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'details',
|
key: ChartLayoutStoreEnums.DETAILS,
|
||||||
select: getDetails,
|
select: getDetails,
|
||||||
title: '详情设置',
|
title: '详情设置',
|
||||||
icon: renderIcon(PrismIcon)
|
icon: renderIcon(PrismIcon)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user