= import.meta.glob('../assets/images/chart/**', {
+ eager: true
+})
+
+// * 所有图表
+export let packagesList: PackagesType = {
+ [PackagesCategoryEnum.CHARTS]: ChartList,
+ [PackagesCategoryEnum.INFORMATIONS]: InformationList,
+ [PackagesCategoryEnum.TABLES]: TableList,
+ [PackagesCategoryEnum.PHOTOS]: PhotoList,
+ [PackagesCategoryEnum.ICONS]: IconList,
+ [PackagesCategoryEnum.DECORATES]: DecorateList
+}
+
+/**
+ * * 获取目标组件配置信息
+ * @param targetData
+ */
+export const createComponent = async (targetData: ConfigType) => {
+ const { virtualComponent, category, key } = targetData
+ const componentPath = virtualComponent
+ ? `${virtualComponent}/config.ts`
+ : `./components/${targetData.package}/${category}/${key}/config.ts`
+ const chart = await import(/* @vite-ignore */ componentPath)
+ return new chart.default()
+}
+
+/**
+ * * 获取组件
+ * @param {string} chartName 名称
+ * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
+ */
+const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
+ const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
+ for (const key in module) {
+ const urlSplit = key.split('/')
+ if (urlSplit[urlSplit.length - 2] === chartName) {
+ return module[key]
+ }
+ }
+}
+
+/**
+ * * 获取展示组件
+ * @param {ConfigType} dropData 配置项
+ */
+export const fetchChartComponent = (dropData: ConfigType) => {
+ const { key } = dropData
+ return fetchComponent(key, FetchComFlagType.VIEW)?.default
+}
+
+/**
+ * * 获取配置组件
+ * @param {ConfigType} dropData 配置项
+ */
+export const fetchConfigComponent = (dropData: ConfigType) => {
+ const { key } = dropData
+ return fetchComponent(key, FetchComFlagType.CONFIG)?.default
+}
+
+/**
+ * * 获取图片内容
+ * @param {ConfigType} targetData 配置项
+ */
+export const fetchImages = async (targetData?: ConfigType) => {
+ if (!targetData) return ''
+ // 判断图片是否为 url，是则直接返回该 url
+ if (/^(?:https?):\/\/[^\s/.?#].[^\s]*/.test(targetData.image)) return targetData.image
+ // 新数据动态处理
+ const { image, package: targetDataPackage } = targetData
+ // 兼容旧数据
+ if (image.includes('@') || image.includes('base64')) return image
+
+ const imageName = image.substring(image.lastIndexOf('/') + 1)
+ for (const key in imagesModules) {
+ const urlSplit = key.split('/')
+ if (urlSplit[urlSplit.length - 1] === imageName) {
+ return imagesModules[key]?.default
+ }
+ }
+ return ''
+}
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index e8979e07..6685ecd9 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -67,7 +67,8 @@ import {
EyeOutline as EyeOutlineIcon,
EyeOffOutline as EyeOffOutlineIcon,
Albums as AlbumsIcon,
- Analytics as AnalyticsIcon
+ Analytics as AnalyticsIcon,
+ Airplane as AirPlaneIcon
} from '@vicons/ionicons5'
import {
@@ -238,10 +239,12 @@ const ionicons5 = {
// 眼睛
EyeOutlineIcon,
EyeOffOutlineIcon,
- // 图表列表
+ // 图表列表
AlbumsIcon,
// 分析
- AnalyticsIcon
+ AnalyticsIcon,
+ // 飞机
+ AirPlaneIcon
}
const carbon = {
diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
index 7ca3b1b0..76e3d714 100644
--- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
@@ -11,9 +11,10 @@
v-for="(item, index) in menuOptions"
:key="index"
draggable
- @dragstart="dragStartHandle($event, item)"
- @dragend="dragendHandle"
+ @dragstart="!item.disabled && dragStartHandle($event, item)"
+ @dragend="!item.disabled && dragendHandle"
@dblclick="dblclickHandle(item)"
+ @click="clickHandle(item)"
>
-
+
+
@@ -47,6 +49,7 @@ import { DragKeyEnum } from '@/enums/editPageEnum'
import { createComponent } from '@/packages'
import { ConfigType, CreateComponentType } from '@/packages/index.d'
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
+import { Icon } from '@iconify/vue'
import omit from 'lodash/omit'
@@ -69,6 +72,7 @@ const chartMode: Ref = computed(() => {
// 拖拽处理
const dragStartHandle = (e: DragEvent, item: ConfigType) => {
+ if (item.disabled) return
// 动态注册图表组件
componentInstall(item.chartKey, fetchChartComponent(item))
componentInstall(item.conKey, fetchConfigComponent(item))
@@ -85,6 +89,7 @@ const dragendHandle = () => {
// 双击添加
const dblclickHandle = async (item: ConfigType) => {
+ if (item.disabled) return
try {
loadingStart()
// 动态注册图表组件
@@ -92,6 +97,10 @@ const dblclickHandle = async (item: ConfigType) => {
componentInstall(item.conKey, fetchConfigComponent(item))
// 创建新图表组件
let newComponent: CreateComponentType = await createComponent(item)
+ if (item.virtualComponent) {
+ item.dataset && (newComponent.option.dataset = item.dataset)
+ newComponent.chartConfig.title = item.title
+ }
// 添加
chartEditStore.addComponentList(newComponent, false, true)
// 选中
@@ -103,6 +112,9 @@ const dblclickHandle = async (item: ConfigType) => {
}
}
+// 单击事件
+const clickHandle = (item: ConfigType) => item.clickHandle && item.clickHandle(item)
+
watch(
() => chartMode.value,
(newValue: ChartModeEnum) => {
diff --git a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
index f1a25ddd..dd8466d3 100644
--- a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
@@ -129,7 +129,9 @@ const searchHandle = (key: string | null) => {
}
loading.value = true
showPopover.value = true
- searchRes.value = List.filter((e: ConfigType) => !key || e.title.toLowerCase().includes(key.toLowerCase()))
+ searchRes.value = List.filter(
+ (e: ConfigType) => !e.disabled && (!key || e.title.toLowerCase().includes(key.toLowerCase()))
+ )
setTimeout(() => {
loading.value = undefined
}, 500)
@@ -146,6 +148,7 @@ const listenerCloseHandle = (e: Event) => {
// 选择处理
const selectChartHandle = async (item: ConfigType) => {
+ if (item.disabled) return
try {
loadingStart()
// 动态注册图表组件
@@ -153,6 +156,10 @@ const selectChartHandle = async (item: ConfigType) => {
componentInstall(item.conKey, fetchConfigComponent(item))
// 创建新图表组件
let newComponent: CreateComponentType = await createComponent(item)
+ if (item.virtualComponent) {
+ item.dataset && (newComponent.option.dataset = item.dataset)
+ newComponent.chartConfig.title = item.title
+ }
// 添加
chartEditStore.addComponentList(newComponent, false, true)
// 选中
diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
index 45c7c609..e2aa66e5 100644
--- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts
+++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts
@@ -1,92 +1,86 @@
-import { shallowReactive, ref } from 'vue'
-import { icon } from '@/plugins'
-import { renderLang, renderIcon } from '@/utils'
-import { themeColor, setItem, getCharts } from './useLayout.hook'
-import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
-// 图表
-import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-// 图标
-const { BarChartIcon } = icon.ionicons5
-const {
- TableSplitIcon,
- RoadmapIcon,
- SpellCheckIcon,
- GraphicalDataFlowIcon,
-} = icon.carbon
-
-
-// 图表
-export type MenuOptionsType = {
- key: string
- icon: ReturnType
- label: ReturnType
- list: PackagesType
-}
-
-const { getPackagesList } = usePackagesStore()
-const menuOptions: MenuOptionsType[] = []
-
-const packagesListObj = {
- [PackagesCategoryEnum.CHARTS]: {
- icon: renderIcon(RoadmapIcon),
- label: PackagesCategoryName.CHARTS,
- },
- [PackagesCategoryEnum.INFORMATIONS]: {
- icon: renderIcon(SpellCheckIcon),
- label: PackagesCategoryName.INFORMATIONS,
- },
- [PackagesCategoryEnum.TABLES]: {
- icon: renderIcon(TableSplitIcon),
- label: PackagesCategoryName.TABLES,
- },
- [PackagesCategoryEnum.DECORATES]: {
- icon: renderIcon(GraphicalDataFlowIcon),
- label: PackagesCategoryName.DECORATES,
- },
-}
-
-// 处理列表
-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 selectOptions = ref(menuOptions[0])
-
-// 点击 item
-const clickItemHandle = (key: string, item: any) => {
- selectOptions.value = item
- // 处理折叠
- if (beforeSelect === key) {
- setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
- } else {
- setItem(ChartLayoutStoreEnum.CHARTS, true, false)
- }
- beforeSelect = key
-}
-
-export {
- getCharts,
- BarChartIcon,
- themeColor,
- selectOptions,
- selectValue,
- clickItemHandle,
- menuOptions,
-}
+import { shallowReactive, ref } from 'vue'
+import { icon } from '@/plugins'
+import { renderLang, renderIcon } from '@/utils'
+import { themeColor, setItem, getCharts } from './useLayout.hook'
+import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
+// 图表
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+// 图标
+const { AirPlaneIcon, ImageIcon, BarChartIcon } = icon.ionicons5
+const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
+
+// 图表
+export type MenuOptionsType = {
+ key: string
+ icon: ReturnType
+ label: ReturnType
+ list: PackagesType
+}
+
+const { getPackagesList } = usePackagesStore()
+const menuOptions: MenuOptionsType[] = []
+
+const packagesListObj = {
+ [PackagesCategoryEnum.CHARTS]: {
+ icon: renderIcon(RoadmapIcon),
+ label: PackagesCategoryName.CHARTS
+ },
+ [PackagesCategoryEnum.INFORMATIONS]: {
+ icon: renderIcon(SpellCheckIcon),
+ label: PackagesCategoryName.INFORMATIONS
+ },
+ [PackagesCategoryEnum.TABLES]: {
+ icon: renderIcon(TableSplitIcon),
+ label: PackagesCategoryName.TABLES
+ },
+ [PackagesCategoryEnum.PHOTOS]: {
+ icon: renderIcon(ImageIcon),
+ label: PackagesCategoryName.PHOTOS
+ },
+ [PackagesCategoryEnum.ICONS]: {
+ icon: renderIcon(AirPlaneIcon),
+ label: PackagesCategoryName.ICONS
+ },
+ [PackagesCategoryEnum.DECORATES]: {
+ icon: renderIcon(GraphicalDataFlowIcon),
+ label: PackagesCategoryName.DECORATES
+ }
+}
+
+// 处理列表
+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 selectOptions = ref(menuOptions[0])
+
+// 点击 item
+const clickItemHandle = (key: string, item: any) => {
+ selectOptions.value = item
+ // 处理折叠
+ if (beforeSelect === key) {
+ setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
+ } else {
+ setItem(ChartLayoutStoreEnum.CHARTS, true, false)
+ }
+ beforeSelect = key
+}
+
+export { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions }
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 3aae5547..f8d90293 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -29,9 +29,14 @@ export const dragHandle = async (e: DragEvent) => {
// 修改状态
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
const dropData: Exclude = JSONParse(drayDataString)
+ if (dropData.disabled) return
// 创建新图表组件
let newComponent: CreateComponentType = await createComponent(dropData)
+ if (dropData.virtualComponent) {
+ dropData.dataset && (newComponent.option.dataset = dropData.dataset)
+ newComponent.chartConfig.title = dropData.title
+ }
setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
chartEditStore.addComponentList(newComponent, false, true)
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index 97221f19..f551c287 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -132,6 +132,10 @@ export const useSync = () => {
) => {
// 补充 class 上的方法
let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+ if (_componentInstance.chartConfig.virtualComponent) {
+ _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
+ newComponent.chartConfig.title = _componentInstance.chartConfig.title
+ }
if (callBack) {
if (changeId) {
callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
@@ -156,7 +160,7 @@ export const useSync = () => {
// 组件
if (key === ChartEditStoreEnum.COMPONENT_LIST) {
let loadIndex = 0
- const listLength = projectData[key].length;
+ const listLength = projectData[key].length
for (const comItem of projectData[key]) {
// 设置加载数量
let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())