-
+
+
+
@@ -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..5c833602 100644
--- a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
@@ -37,7 +37,8 @@
:title="item.title"
@click="selectChartHandle(item)"
>
-
+
+
{{ item.title }}
@@ -78,6 +79,7 @@ import { isString, addEventListener, removeEventListener } from '@/utils'
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
+import { Icon } from '@iconify/vue'
const props = defineProps({
menuOptions: {
@@ -129,7 +131,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 +150,7 @@ const listenerCloseHandle = (e: Event) => {
// 选择处理
const selectChartHandle = async (item: ConfigType) => {
+ if (item.disabled) return
try {
loadingStart()
// 动态注册图表组件
@@ -153,6 +158,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)
// 选中
@@ -221,10 +230,16 @@ $searchWidth: 176px;
font-size: 12px;
}
&-img {
- height: 28px;
+ height: 20px;
+ max-width: 30px;
margin-right: 5px;
border-radius: 5px;
}
+ & > svg {
+ min-width: 20px;
+ min-height: 20px;
+ margin-right: 5px;
+ }
&:hover {
&::before {
content: '';
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())