mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 16:22:57 +08:00
perf: 优化切换图表导致画布缩放的交互
This commit is contained in:
奔跑的面条
parent
23625ec334
commit
7b000f86c7
@ -1,77 +1,83 @@
|
|||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d'
|
import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d'
|
||||||
import { setLocalStorage, getLocalStorage } from '@/utils'
|
import { setLocalStorage, getLocalStorage } from '@/utils'
|
||||||
import { StorageEnum } from '@/enums/storageEnum'
|
import { StorageEnum } from '@/enums/storageEnum'
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore()
|
||||||
|
|
||||||
const { GO_CHART_LAYOUT_STORE } = StorageEnum
|
const { GO_CHART_LAYOUT_STORE } = StorageEnum
|
||||||
|
|
||||||
const storageChartLayout: Partial<ChartLayoutType> = getLocalStorage(GO_CHART_LAYOUT_STORE)
|
const storageChartLayout: Partial<ChartLayoutType> = getLocalStorage(GO_CHART_LAYOUT_STORE)
|
||||||
|
|
||||||
// 编辑区域布局和静态设置
|
// 编辑区域布局和静态设置
|
||||||
export const useChartLayoutStore = defineStore({
|
export const useChartLayoutStore = defineStore({
|
||||||
id: 'useChartLayoutStore',
|
id: 'useChartLayoutStore',
|
||||||
state: (): ChartLayoutType => ({
|
state: (): ChartLayoutType => ({
|
||||||
// 图层控制
|
// 图层控制
|
||||||
layers: true,
|
layers: true,
|
||||||
// 图表组件
|
// 图表组件
|
||||||
charts: true,
|
charts: true,
|
||||||
// 详情设置（收缩为true）
|
// 详情设置（收缩为true）
|
||||||
details: false,
|
details: false,
|
||||||
// 组件列表展示类型（默认单列）
|
// 组件列表展示类型（默认单列）
|
||||||
chartType: ChartModeEnum.SINGLE,
|
chartType: ChartModeEnum.SINGLE,
|
||||||
// 图层类型（默认图片）
|
// 图层类型（默认图片）
|
||||||
layerType: LayerModeEnum.THUMBNAIL,
|
layerType: LayerModeEnum.THUMBNAIL,
|
||||||
// 当前加载数量
|
// 当前加载数量
|
||||||
percentage: 0,
|
percentage: 0,
|
||||||
// 是否重置当前画布位置
|
// 是否重置当前画布位置
|
||||||
rePositionCanvas: false,
|
rePositionCanvas: false,
|
||||||
// 防止值不存在
|
// 防止值不存在
|
||||||
...storageChartLayout
|
...storageChartLayout
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
getLayers(): boolean {
|
getLayers(): boolean {
|
||||||
return this.layers
|
return this.layers
|
||||||
},
|
},
|
||||||
getCharts(): boolean {
|
getCharts(): boolean {
|
||||||
return this.charts
|
return this.charts
|
||||||
},
|
},
|
||||||
getDetails(): boolean {
|
getDetails(): boolean {
|
||||||
return this.details
|
return this.details
|
||||||
},
|
},
|
||||||
getChartType(): ChartModeEnum {
|
getChartType(): ChartModeEnum {
|
||||||
return this.chartType
|
return this.chartType
|
||||||
},
|
},
|
||||||
getLayerType(): LayerModeEnum {
|
getLayerType(): LayerModeEnum {
|
||||||
return this.layerType
|
return this.layerType
|
||||||
},
|
},
|
||||||
getPercentage(): number {
|
getPercentage(): number {
|
||||||
return this.percentage
|
return this.percentage
|
||||||
},
|
},
|
||||||
getRePositionCanvas(): boolean {
|
getRePositionCanvas(): boolean {
|
||||||
return this.rePositionCanvas
|
return this.rePositionCanvas
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
|
setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(
|
||||||
this.$patch(state => {
|
key: T,
|
||||||
state[key] = value
|
value: K,
|
||||||
})
|
computedScale = true
|
||||||
// 存储本地
|
): void {
|
||||||
setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
|
this.$patch(state => {
|
||||||
// 这里需要标记重置画布位置
|
state[key] = value
|
||||||
this.rePositionCanvas = true;
|
})
|
||||||
// 重新计算拖拽区域缩放比例
|
// 存储本地
|
||||||
setTimeout(() => {
|
setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
|
||||||
chartEditStore.computedScale()
|
// 这里需要标记重置画布位置
|
||||||
}, 500)
|
this.rePositionCanvas = true;
|
||||||
},
|
// 重新计算拖拽区域缩放比例
|
||||||
setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
|
if (computedScale) {
|
||||||
this.$patch(state => {
|
setTimeout(() => {
|
||||||
state[key] = value
|
chartEditStore.computedScale()
|
||||||
})
|
}, 500)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
|
||||||
|
this.$patch(state => {
|
||||||
|
state[key] = value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|||||||
@ -1,92 +1,92 @@
|
|||||||
import { shallowReactive, ref } from 'vue'
|
import { shallowReactive, 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 './useLayout.hook'
|
import { themeColor, setItem, getCharts } from './useLayout.hook'
|
||||||
import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
|
import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
|
||||||
// 图表
|
// 图表
|
||||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
import { ChartLayoutStoreEnum } 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
|
||||||
|
|
||||||
|
|
||||||
// 图表
|
// 图表
|
||||||
export type MenuOptionsType = {
|
export type MenuOptionsType = {
|
||||||
key: string
|
key: string
|
||||||
icon: ReturnType<typeof renderIcon>
|
icon: ReturnType<typeof renderIcon>
|
||||||
label: ReturnType<typeof renderLang>
|
label: ReturnType<typeof renderLang>
|
||||||
list: PackagesType
|
list: PackagesType
|
||||||
}
|
}
|
||||||
|
|
||||||
const { getPackagesList } = usePackagesStore()
|
const { getPackagesList } = usePackagesStore()
|
||||||
const menuOptions: MenuOptionsType[] = []
|
const menuOptions: MenuOptionsType[] = []
|
||||||
|
|
||||||
const packagesListObj = {
|
const packagesListObj = {
|
||||||
[PackagesCategoryEnum.CHARTS]: {
|
[PackagesCategoryEnum.CHARTS]: {
|
||||||
icon: renderIcon(RoadmapIcon),
|
icon: renderIcon(RoadmapIcon),
|
||||||
label: PackagesCategoryName.CHARTS,
|
label: PackagesCategoryName.CHARTS,
|
||||||
},
|
},
|
||||||
[PackagesCategoryEnum.INFORMATIONS]: {
|
[PackagesCategoryEnum.INFORMATIONS]: {
|
||||||
icon: renderIcon(SpellCheckIcon),
|
icon: renderIcon(SpellCheckIcon),
|
||||||
label: PackagesCategoryName.INFORMATIONS,
|
label: PackagesCategoryName.INFORMATIONS,
|
||||||
},
|
},
|
||||||
[PackagesCategoryEnum.TABLES]: {
|
[PackagesCategoryEnum.TABLES]: {
|
||||||
icon: renderIcon(TableSplitIcon),
|
icon: renderIcon(TableSplitIcon),
|
||||||
label: PackagesCategoryName.TABLES,
|
label: PackagesCategoryName.TABLES,
|
||||||
},
|
},
|
||||||
[PackagesCategoryEnum.DECORATES]: {
|
[PackagesCategoryEnum.DECORATES]: {
|
||||||
icon: renderIcon(GraphicalDataFlowIcon),
|
icon: renderIcon(GraphicalDataFlowIcon),
|
||||||
label: PackagesCategoryName.DECORATES,
|
label: PackagesCategoryName.DECORATES,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理列表
|
// 处理列表
|
||||||
const handlePackagesList = () => {
|
const handlePackagesList = () => {
|
||||||
for (const val in getPackagesList) {
|
for (const val in getPackagesList) {
|
||||||
menuOptions.push({
|
menuOptions.push({
|
||||||
key: val,
|
key: val,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
icon: packagesListObj[val].icon,
|
icon: packagesListObj[val].icon,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
label: packagesListObj[val].label,
|
label: packagesListObj[val].label,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
list: getPackagesList[val],
|
list: getPackagesList[val],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
handlePackagesList()
|
handlePackagesList()
|
||||||
|
|
||||||
// 记录选中值
|
// 记录选中值
|
||||||
let beforeSelect: string = menuOptions[0]['key']
|
let beforeSelect: string = menuOptions[0]['key']
|
||||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||||
|
|
||||||
// 选中的对象值
|
// 选中的对象值
|
||||||
const selectOptions = ref(menuOptions[0])
|
const selectOptions = ref(menuOptions[0])
|
||||||
|
|
||||||
// 点击 item
|
// 点击 item
|
||||||
const clickItemHandle = (key: string, item: any) => {
|
const clickItemHandle = (key: string, item: any) => {
|
||||||
selectOptions.value = item
|
selectOptions.value = item
|
||||||
// 处理折叠
|
// 处理折叠
|
||||||
if (beforeSelect === key) {
|
if (beforeSelect === key) {
|
||||||
setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value)
|
setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
|
||||||
} else {
|
} else {
|
||||||
setItem(ChartLayoutStoreEnum.CHARTS, true)
|
setItem(ChartLayoutStoreEnum.CHARTS, true, false)
|
||||||
}
|
}
|
||||||
beforeSelect = key
|
beforeSelect = key
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
getCharts,
|
getCharts,
|
||||||
BarChartIcon,
|
BarChartIcon,
|
||||||
themeColor,
|
themeColor,
|
||||||
selectOptions,
|
selectOptions,
|
||||||
selectValue,
|
selectValue,
|
||||||
clickItemHandle,
|
clickItemHandle,
|
||||||
menuOptions,
|
menuOptions,
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user