Prechádzať zdrojové kódy

feat:新增图表

mtruning 3 rokov pred
rodič
commit
5843388d0b
30 zmenil súbory, kde vykonal 234 pridanie a 29 odobranie
  1. 0 0
      src/assets/images/chart/informations/title_diamond2.png
  2. 0 0
      src/assets/images/chart/informations/title_main.png
  3. 12 0
      src/packages/components/Decorate/Mores/Number/index.ts
  4. 13 0
      src/packages/components/Decorate/Mores/Number/index.vue
  5. 12 0
      src/packages/components/Decorate/Mores/Time/index.ts
  6. 13 0
      src/packages/components/Decorate/Mores/Time/index.vue
  7. 12 0
      src/packages/components/Decorate/Mores/Weather/index.ts
  8. 13 0
      src/packages/components/Decorate/Mores/Weather/index.vue
  9. 12 0
      src/packages/components/Decorate/Mores/WeatherTime/index.ts
  10. 13 0
      src/packages/components/Decorate/Mores/WeatherTime/index.vue
  11. 6 0
      src/packages/components/Decorate/Mores/index.ts
  12. 1 1
      src/packages/components/Decorate/borders/borderCommon/index.ts
  13. 2 3
      src/packages/components/Decorate/index.d.ts
  14. 2 1
      src/packages/components/Decorate/index.ts
  15. 12 0
      src/packages/components/Information/Mores/TextCloud/index.ts
  16. 13 0
      src/packages/components/Information/Mores/TextCloud/index.vue
  17. 3 0
      src/packages/components/Information/Mores/index.ts
  18. 12 0
      src/packages/components/Information/Titles/TitleBevelAngle/index.ts
  19. 13 0
      src/packages/components/Information/Titles/TitleBevelAngle/index.vue
  20. 2 2
      src/packages/components/Information/Titles/TitleCommon/index.ts
  21. 12 0
      src/packages/components/Information/Titles/TitlePro/index.ts
  22. 13 0
      src/packages/components/Information/Titles/TitlePro/index.vue
  23. 3 1
      src/packages/components/Information/Titles/index.ts
  24. 2 1
      src/packages/components/Information/index.d.ts
  25. 2 1
      src/packages/components/Information/index.ts
  26. 10 4
      src/packages/index.d.ts
  27. 8 0
      src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
  28. 12 11
      src/views/chart/components/ContentCharts/hooks/asideHook.ts
  29. 2 1
      src/views/chart/components/ContentLayers/index.vue
  30. 4 3
      src/views/chart/components/HeaderLeftBtn/index.vue

+ 0 - 0
src/assets/images/chart/decorates/title_diamond2.png → src/assets/images/chart/informations/title_diamond2.png


+ 0 - 0
src/assets/images/chart/decorates/title_main.png → src/assets/images/chart/informations/title_main.png


+ 12 - 0
src/packages/components/Decorate/Mores/Number/index.ts

@@ -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 - 0
src/packages/components/Decorate/Mores/Number/index.vue

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

+ 12 - 0
src/packages/components/Decorate/Mores/Time/index.ts

@@ -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 - 0
src/packages/components/Decorate/Mores/Time/index.vue

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

+ 12 - 0
src/packages/components/Decorate/Mores/Weather/index.ts

@@ -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 - 0
src/packages/components/Decorate/Mores/Weather/index.vue

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

+ 12 - 0
src/packages/components/Decorate/Mores/WeatherTime/index.ts

@@ -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 - 0
src/packages/components/Decorate/Mores/WeatherTime/index.vue

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

+ 6 - 0
src/packages/components/Decorate/Mores/index.ts

@@ -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]

+ 1 - 1
src/packages/components/Decorate/borders/borderCommon/index.ts

@@ -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
 }

+ 2 - 3
src/packages/components/Decorate/index.d.ts

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

+ 2 - 1
src/packages/components/Decorate/index.ts

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

+ 12 - 0
src/packages/components/Information/Mores/TextCloud/index.ts

@@ -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
+}

+ 13 - 0
src/packages/components/Information/Mores/TextCloud/index.vue

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

+ 3 - 0
src/packages/components/Information/Mores/index.ts

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

+ 12 - 0
src/packages/components/Information/Titles/TitleBevelAngle/index.ts

@@ -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
+}

+ 13 - 0
src/packages/components/Information/Titles/TitleBevelAngle/index.vue

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

+ 2 - 2
src/packages/components/Information/Titles/TitleCommon/index.ts

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

+ 12 - 0
src/packages/components/Information/Titles/TitlePro/index.ts

@@ -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
+}

+ 13 - 0
src/packages/components/Information/Titles/TitlePro/index.vue

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

+ 3 - 1
src/packages/components/Information/Titles/index.ts

@@ -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]

+ 2 - 1
src/packages/components/Information/index.d.ts

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

+ 2 - 1
src/packages/components/Information/index.ts

@@ -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]

+ 10 - 4
src/packages/index.d.ts

@@ -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[]
-}
+}

+ 8 - 0
src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

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

+ 12 - 11
src/views/chart/components/ContentCharts/hooks/asideHook.ts

@@ -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,
 }

+ 2 - 1
src/views/chart/components/ContentLayers/index.vue

@@ -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>
 

+ 4 - 3
src/views/chart/components/HeaderLeftBtn/index.vue

@@ -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)