diff --git a/src/components/SystemSet/index.d.ts b/src/components/SystemSet/index.d.ts
index c8d41989..97ac0b64 100644
--- a/src/components/SystemSet/index.d.ts
+++ b/src/components/SystemSet/index.d.ts
@@ -1,8 +1,11 @@
export type ListType = {
- key: string
+ key: any
type: string
name: string
desc: string
value: any
+ suffix?: string
+ step?: number
+ min?: number
tip?: string
}
diff --git a/src/components/SystemSet/index.vue b/src/components/SystemSet/index.vue
index 8f8b412a..8994fa52 100644
--- a/src/components/SystemSet/index.vue
+++ b/src/components/SystemSet/index.vue
@@ -21,6 +21,17 @@
@update:value="handleChange($event, item)"
/>
+
+
+
{{ item.desc }}
@@ -58,6 +69,16 @@ defineProps({
const settingStore = useSettingStore()
const list = reactive([
+ {
+ key: SettingStoreEnums.CHART_ALIGN_RANGE,
+ value: settingStore.getChartAlignRange,
+ type: 'number',
+ name: '吸附距离',
+ min: 10,
+ suffix: 'px',
+ step: 2,
+ desc: '移动图表时的吸附距离'
+ },
{
key: SettingStoreEnums.ASIDE_ALL_COLLAPSED,
value: settingStore.getAsideAllCollapsed,
@@ -86,18 +107,21 @@ const closeHandle = () => {
emit('update:modelShow', false)
}
-const handleChange = (e: Event, item: ListType) => {
+const handleChange = (e: MouseEvent, item: ListType) => {
settingStore.setItem(item.key, item.value)
}
diff --git a/src/settings/systemSetting.ts b/src/settings/systemSetting.ts
index 1f0e2d32..4b235107 100644
--- a/src/settings/systemSetting.ts
+++ b/src/settings/systemSetting.ts
@@ -8,3 +8,6 @@ export const hidePackageOneCategory = true
// 切换语言是否进行路由刷新
export const changeLangReload = false
+
+// 图表拖拽时的吸附距离（px）
+export const chartAlignRange = '10'
\ No newline at end of file
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
index de32435f..f8057698 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@@ -39,8 +39,10 @@ export const useChartLayoutStore = defineStore({
}
},
actions: {
- setItem(key: string, value: boolean): void {
- ;(this as any)[key] = value
+ setItem(key: T, value: K): void {
+ this.$patch(state => {
+ state[key]= value
+ });
setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
// 重新计算拖拽区域缩放比例
setTimeout(() => {
diff --git a/src/store/modules/settingStore/settingStore.d.ts b/src/store/modules/settingStore/settingStore.d.ts
index 1b47a98d..17ae5dd0 100644
--- a/src/store/modules/settingStore/settingStore.d.ts
+++ b/src/store/modules/settingStore/settingStore.d.ts
@@ -2,10 +2,12 @@ export enum SettingStoreEnums {
HIDE_PACKAGE_ONE_CATEGORY = 'hidePackageOneCategory',
CHANGE_LANG_RELOAD = 'changeLangReload',
ASIDE_ALL_COLLAPSED = 'asideAllCollapsed',
+ CHART_ALIGN_RANGE = 'chartAlignRange',
}
export interface SettingStoreType {
[SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY]: boolean
[SettingStoreEnums.CHANGE_LANG_RELOAD]: boolean
[SettingStoreEnums.ASIDE_ALL_COLLAPSED]: boolean
+ [SettingStoreEnums.CHART_ALIGN_RANGE]: number
}
diff --git a/src/store/modules/settingStore/settingStore.ts b/src/store/modules/settingStore/settingStore.ts
index dfd36584..0e7186a2 100644
--- a/src/store/modules/settingStore/settingStore.ts
+++ b/src/store/modules/settingStore/settingStore.ts
@@ -2,7 +2,8 @@ import { defineStore } from 'pinia'
import {
hidePackageOneCategory,
changeLangReload,
- asideAllCollapsed
+ asideAllCollapsed,
+ chartAlignRange
} from '@/settings/systemSetting'
import { asideCollapsedWidth } from '@/settings/designSetting'
import { SettingStoreType } from './settingStore.d'
@@ -19,7 +20,8 @@ export const useSettingStore = defineStore({
storageSetting || {
hidePackageOneCategory,
changeLangReload,
- asideAllCollapsed
+ asideAllCollapsed,
+ chartAlignRange
},
getters: {
getHidePackageOneCategory(): boolean {
@@ -33,11 +35,16 @@ export const useSettingStore = defineStore({
},
getAsideCollapsedWidth(): number {
return this.asideAllCollapsed ? 0 : asideCollapsedWidth
+ },
+ getChartAlignRange(): number {
+ return this.chartAlignRange
}
},
actions: {
- setItem(key: string, value: boolean): void {
- ; (this as any)[key] = value
+ setItem(key: T, value: K): void {
+ this.$patch(state => {
+ state[key]= value
+ });
setLocalStorage(GO_SYSTEM_SETTING_STORE, this.$state)
},
},
diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
index 0bfad9f0..54f2b9e0 100644
--- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
+++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
@@ -18,6 +18,7 @@ import { ref, reactive, computed, watch } from 'vue'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useSettingStore } from '@/store/modules/settingStore/settingStore'
import { CreateComponentType } from '@/packages/index.d'
import throttle from 'lodash/throttle'
import cloneDeep from 'lodash/cloneDeep'
@@ -26,11 +27,10 @@ const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
const chartEditStore = useChartEditStore()
+const settingStore = useSettingStore()
-// 线条集合
+// * 线条集合
const line = reactive({
- // 吸附距离（px）
- minDistance: 10,
// 行横向row（上中下），列竖线col（左中右）
lineArr: ['rowt', 'rowc', 'rowb', 'coll', 'colc', 'colr'],
// 展示线
@@ -42,7 +42,7 @@ const line = reactive({
}
})
-// 位置计算
+// * 位置计算
const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
if (!attr) return {}
const componentStyle = {
@@ -52,26 +52,32 @@ const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
return componentStyle
}
-// 是否开始计算
+// * 吸附距离
+const minDistance = computed(()=>{
+ return settingStore.getChartAlignRange
+})
+
+// * 是否开始计算
const isComputedLine = computed(() => {
const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
return isDrag
})
-// 吸附判定
+// * 吸附判定
const isSorption = (selectValue: number, componentValue: number) => {
- const isSorption = Math.abs(selectValue - componentValue) <= line.minDistance
+ console.log(minDistance.value);
+ const isSorption = Math.abs(selectValue - componentValue) <= minDistance.value
return isSorption
}
-// 当前目标
+// * 当前目标
const selectId = computed(() => chartEditStore.getTargetChart.selectId)
const selectTatget = computed(
() => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
)
const selectAttr = computed(() => selectTatget.value.attr)
-// 画布坐标
+// * 画布坐标
const canvasPositionList = computed(() => {
return {
id: '0',
@@ -85,7 +91,7 @@ const canvasPositionList = computed(() => {
}
})
-// 监听鼠标移动
+// * 监听鼠标移动
watch(
() => chartEditStore.getMousePosition,
throttle(e => {
@@ -282,7 +288,8 @@ watch(
deep: true
}
)
-// 取消对齐线
+
+// * 取消对齐线
watch(
() => isComputedLine.value,
(val: boolean) => {