From 5f5b7bf2e3e6f4b4d4a3da48e590a0d31493d281 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Mon, 20 Jun 2022 15:35:03 +0800 Subject: [PATCH 01/19] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E5=AF=BC?= =?UTF-8?q?=E5=85=A5=E5=90=88=E5=B9=B6=E4=BB=A3=E7=A0=81=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EditTools/hooks/useFile.hooks.ts | 58 +--------------- src/views/chart/hooks/useSync.hook.ts | 66 +++++++++++++++++++ 2 files changed, 69 insertions(+), 55 deletions(-) create mode 100644 src/views/chart/hooks/useSync.hook.ts diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts index cf40180e..a79c2f61 100644 --- a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts @@ -1,64 +1,12 @@ import { ref, nextTick } from 'vue' import { UploadCustomRequestOptions } from 'naive-ui' import { FileTypeEnum } from '@/enums/fileTypeEnum' -import { fetchChartComponent, fetchConfigComponent } from '@/packages/index' -import { CreateComponentType } from '@/packages/index.d' -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d' -import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' -import { getUUID, readFile, goDialog } from '@/utils' -import { createComponent } from '@/packages' - -// 更新函数 -const updateComponent = async (fileData: any, isSplace = false) => { - const chartEditStore = useChartEditStore() - const chartHistoryStore = useChartHistoryStore() - if (isSplace) { - // 清除列表 - chartEditStore.componentList = [] - // 清除历史记录 - chartHistoryStore.clearBackStack() - chartHistoryStore.clearForwardStack() - } - // 列表组件注册 - fileData.componentList.forEach(async (e: CreateComponentType) => { - if (!window['$vue'].component(e.chartConfig.chartKey)) { - window['$vue'].component( - e.chartConfig.chartKey, - fetchChartComponent(e.chartConfig) - ) - window['$vue'].component( - e.chartConfig.conKey, - fetchConfigComponent(e.chartConfig) - ) - } - }) - // 数据赋值 - for (const key in fileData) { - // 组件 - if (key === ChartEditStoreEnum.COMPONENT_LIST) { - for (const comItem of fileData[key]) { - // 补充 class 上的方法 - let newComponent: CreateComponentType = await createComponent( - comItem.chartConfig - ) - // 不保存到记录 - chartEditStore.addComponentList( - Object.assign(newComponent, { ...comItem, id: getUUID() }), - false, - true - ) - } - } else { - // 非组件(顺便排除脏数据) - if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return - Object.assign((chartEditStore as any)[key], fileData[key]) - } - } -} +import { readFile, goDialog } from '@/utils' +import { useSync } from '@/views/chart/hooks/useSync.hook' export const useFile = () => { const importUploadFileListRef = ref() + const { updateComponent } = useSync() // 上传-前置 //@ts-ignore diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts new file mode 100644 index 00000000..fe58cb3a --- /dev/null +++ b/src/views/chart/hooks/useSync.hook.ts @@ -0,0 +1,66 @@ +import { getUUID } from '@/utils' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' +import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' +import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index' +import { CreateComponentType } from '@/packages/index.d' + +// 请求处理 +export const useSync = () => { + const chartEditStore = useChartEditStore() + const chartHistoryStore = useChartHistoryStore() + + /** + * * 组件动态注册 + * @param projectData 项目数据 + * @param isSplace 是否替换数据 + * @returns + */ + const updateComponent = async (projectData: ChartEditStorage, isSplace = false) => { + if (isSplace) { + // 清除列表 + chartEditStore.componentList = [] + // 清除历史记录 + chartHistoryStore.clearBackStack() + chartHistoryStore.clearForwardStack() + } + // 列表组件注册 + projectData.componentList.forEach(async (e: CreateComponentType) => { + if (!window['$vue'].component(e.chartConfig.chartKey)) { + window['$vue'].component( + e.chartConfig.chartKey, + fetchChartComponent(e.chartConfig) + ) + window['$vue'].component( + e.chartConfig.conKey, + fetchConfigComponent(e.chartConfig) + ) + } + }) + // 数据赋值 + for (const key in projectData) { + // 组件 + if (key === ChartEditStoreEnum.COMPONENT_LIST) { + for (const comItem of projectData[key]) { + // 补充 class 上的方法 + let newComponent: CreateComponentType = await createComponent( + comItem.chartConfig + ) + chartEditStore.addComponentList( + Object.assign(newComponent, {...comItem, id: getUUID()}), + false, + true + ) + } + } else { + // 非组件(顺便排除脏数据) + if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return + Object.assign((chartEditStore as any)[key], projectData[key]) + } + } + } + + return { + updateComponent + } +} \ No newline at end of file From 2b47817d2691862fc0197d293769ef13b65686c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Tue, 21 Jun 2022 10:54:05 +0800 Subject: [PATCH 02/19] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E5=8D=95=E8=AF=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modules/chartEditStore/chartEditStore.d.ts | 4 ++-- .../ContentConfigurations/components/CanvasPage/index.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 653fc467..e4513c8e 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -45,7 +45,7 @@ export enum EditCanvasConfigEnum { CHART_THEME_COLOR = 'chartThemeColor', CHART_THEME_SETTING = 'chartThemeSetting', BACKGROUND = 'background', - BACKGROUND_IAMGE = 'backgroundImage', + BACKGROUND_IMAGE = 'backgroundImage', SELECT_COLOR = 'selectColor', PREVIEW_SCALE_TYPE = 'previewScaleType', } @@ -73,7 +73,7 @@ export interface EditCanvasConfigType { [EditCanvasConfigEnum.HEIGHT]: number // 背景色 [EditCanvasConfigEnum.BACKGROUND]?: string - [EditCanvasConfigEnum.BACKGROUND_IAMGE]?: string | null + [EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null // 图表主题颜色 [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType // 图表全局配置 diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index db53971d..a3d32866 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -236,7 +236,7 @@ const beforeUploadHandle = async ({ file }) => { // 清除背景 const clearImage = () => { chartEditStore.setEditCanvasConfig( - EditCanvasConfigEnum.BACKGROUND_IAMGE, + EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined ) chartEditStore.setEditCanvasConfig( @@ -274,7 +274,7 @@ const customRequest = (options: UploadCustomRequestOptions) => { if (file.file) { const ImageUrl = fileToUrl(file.file) chartEditStore.setEditCanvasConfig( - EditCanvasConfigEnum.BACKGROUND_IAMGE, + EditCanvasConfigEnum.BACKGROUND_IMAGE, ImageUrl ) chartEditStore.setEditCanvasConfig( From 4355c766fd0d5826443dbbcce0624941f1093303 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Tue, 21 Jun 2022 11:01:01 +0800 Subject: [PATCH 03/19] =?UTF-8?q?style:=20=E5=8E=BB=E9=99=A4=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modules/chartEditStore/chartEditStore.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 843c942e..131d95cc 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -11,7 +11,6 @@ import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHis import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' import { MenuEnum } from '@/enums/editPageEnum' -import { PreviewScaleEnum } from '@/enums/styleEnum' import { ChartEditStoreEnum, ChartEditStorage, @@ -367,7 +366,6 @@ export const useChartEditStore = defineStore({ e = cloneDeep(e) // 生成新 id e.id = getUUID() - // 偏移位置 e.attr.x = this.getMousePosition.x + 30 e.attr.y = this.getMousePosition.y + 30 return e From d735bc93ce6db1213081ffdb7a11225b421ca7a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Tue, 21 Jun 2022 17:39:16 +0800 Subject: [PATCH 04/19] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A?= =?UTF-8?q?=E9=80=89=E4=B8=AD=E7=9A=84=E5=89=8D=E7=BD=AE=E5=A4=84=E7=90=86?= =?UTF-8?q?=EF=BC=8C=E9=80=89=E4=B8=AD=E5=AD=98=E5=82=A8=E5=AF=B9=E8=B1=A1?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=90=E6=95=B0=E7=BB=84=E5=BD=A2=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chartEditStore/chartEditStore.d.ts | 2 +- .../modules/chartEditStore/chartEditStore.ts | 45 +++++++++++-- .../chart/ContentConfigurations/index.vue | 3 +- .../components/EditAlignLine/index.vue | 67 ++++++------------- .../components/EditShapeBox/index.vue | 20 +++--- .../components/LayersListItem/index.vue | 3 +- 6 files changed, 73 insertions(+), 67 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index e4513c8e..f26c0461 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -107,7 +107,7 @@ export type MousePositionType = { // 操作目标 export type TargetChartType = { hoverId?: string - selectId?: string + selectId: string[] } // 数据记录 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 131d95cc..a0b63abe 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -1,5 +1,4 @@ import { defineStore } from 'pinia' -import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils' import { CreateComponentType } from '@/packages/index.d' import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' @@ -11,6 +10,14 @@ import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHis import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' import { MenuEnum } from '@/enums/editPageEnum' +import { + getUUID, + loadingStart, + loadingFinish, + loadingError, + isString, + isArray +} from '@/utils' import { ChartEditStoreEnum, ChartEditStorage, @@ -60,7 +67,7 @@ export const useChartEditStore = defineStore({ // 目标图表 targetChart: { hoverId: undefined, - selectId: undefined + selectId: [] }, // 记录临时数据（复制等） recordChart: undefined, @@ -159,8 +166,36 @@ export const useChartEditStore = defineStore({ this.targetChart.hoverId = hoverId }, // * 设置目标数据 select - setTargetSelectChart(selectId?:TargetChartType["selectId"]) { - this.targetChart.selectId = selectId + setTargetSelectChart(selectId?: string | string[], push: boolean = false) { + // 无 id 清空 + if(!selectId) { + this.targetChart.selectId = [] + return + } + // 新增 + if(push) { + // 字符串 + if(isString(selectId)) { + this.targetChart.selectId.push(selectId) + return + } + // 数组 + if(isArray(selectId)) { + this.targetChart.selectId.push(...selectId) + return + } + } else { + // 字符串 + if(isString(selectId)) { + this.targetChart.selectId = [selectId] + return + } + // 数组 + if(isArray(selectId)) { + this.targetChart.selectId = selectId + return + } + } }, // * 设置记录数据 setRecordChart(item: RecordChartType | undefined) { @@ -175,7 +210,7 @@ export const useChartEditStore = defineStore({ }, // * 找到目标 id 数据下标位置（无则返回-1） fetchTargetIndex(id?: string): number { - const targetId = id || this.getTargetChart.selectId + const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined if(!targetId) { loadingFinish() return -1 diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index 9117594a..92ba612d 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -123,7 +123,8 @@ const expandHindle = () => { const selectTarget = computed(() => { const selectId = chartEditStore.getTargetChart.selectId - if (!selectId) return undefined + // 排除多个 + if (selectId.length !== 1) return undefined return chartEditStore.componentList[chartEditStore.fetchTargetIndex()] }) diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue index 233c33db..dea92fe1 100644 --- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue +++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue @@ -4,12 +4,9 @@ class="line" v-for="item in line.lineArr" :key="item" - :class="[ - item.includes('row') ? 'row' : 'col', - line['select'].has(item) && 'visible' - ]" + :class="[item.includes('row') ? 'row' : 'col', line['select'].has(item) && 'visible']" :style="useComponentStyle(line['select'].get(item))" - > + > @@ -21,7 +18,7 @@ import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStor import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { CreateComponentType } from '@/packages/index.d' import throttle from 'lodash/throttle' -import cloneDeep from 'lodash/cloneDeep' +import cloneDeep from 'lodash/cloneDeep' // 全局颜色 const designStore = useDesignStore() const themeColor = ref(designStore.getAppTheme) @@ -53,7 +50,7 @@ const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => { } // * 吸附距离 -const minDistance = computed(()=>{ +const minDistance = computed(() => { return settingStore.getChartAlignRange }) @@ -72,9 +69,7 @@ const isSorption = (selectValue: number, componentValue: number) => { // * 当前目标 const selectId = computed(() => chartEditStore.getTargetChart.selectId) -const selectTarget = computed( - () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()] -) +const selectTarget = computed(() => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]) const selectAttr = computed(() => selectTarget.value?.attr || {}) // * 画布坐标 @@ -95,7 +90,7 @@ const canvasPositionList = computed(() => { watch( () => chartEditStore.getMousePosition, throttle(() => { - if (!isComputedLine.value) return + if (!isComputedLine.value || selectId.value.length !== 1) return // 获取目标组件数据 const selectW = selectAttr.value.w @@ -111,12 +106,12 @@ watch( const selectTopY = selectAttr.value.y const selectHalfY = selectTopY + selectH / 2 const selectBottomY = selectTopY + selectH - const seletY = [selectTopY, selectHalfY, selectBottomY] + const selectY = [selectTopY, selectHalfY, selectBottomY] line.select.clear() line.sorptioned.y = false // 循环查询所有组件数据 - const componentList = chartEditStore.getComponentList.map((e:CreateComponentType) => { + const componentList = chartEditStore.getComponentList.map((e: CreateComponentType) => { return { id: e.id, attr: e.attr @@ -127,7 +122,7 @@ watch( line.lineArr.forEach(lineItem => { componentList.forEach((component: typeof canvasPositionList.value) => { // 排除自身 - if (selectId.value === component.id) return + if (selectId.value[0] === component.id) return const componentW = component.attr.w const componentH = component.attr.h @@ -163,24 +158,15 @@ watch( // 顶部 if (isSorption(selectHalfY, componentTopY)) { line.select.set(lineItem, { y: componentTopY }) - selectTarget.value.setPosition( - selectLeftX, - componentTopY - selectH / 2 - ) + selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2) } if (isSorption(selectHalfY, componentHalfY)) { line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition( - selectLeftX, - componentHalfY - selectH / 2 - ) + selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2) } if (isSorption(selectHalfY, componentBottomY)) { line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition( - selectLeftX, - componentBottomY - selectH / 2 - ) + selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2) } } if (lineItem.includes('rowb')) { @@ -191,17 +177,11 @@ watch( } if (isSorption(selectBottomY, componentHalfY)) { line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition( - selectLeftX, - componentHalfY - selectH - ) + selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH) } if (isSorption(selectBottomY, componentBottomY)) { line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition( - selectLeftX, - componentBottomY - selectH - ) + selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH) } } @@ -223,24 +203,15 @@ watch( if (lineItem.includes('colc')) { if (isSorption(selectHalfX, componentLeftX)) { line.select.set(lineItem, { x: componentLeftX }) - selectTarget.value.setPosition( - componentLeftX - selectW / 2, - selectTopY - ) + selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY) } if (isSorption(selectHalfX, componentHalfX)) { line.select.set(lineItem, { x: componentHalfX }) - selectTarget.value.setPosition( - componentHalfX - selectW / 2, - selectTopY - ) + selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY) } if (isSorption(selectHalfX, componentRightX)) { line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition( - componentRightX - selectW / 2, - selectTopY - ) + selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY) } } if (lineItem.includes('colr')) { @@ -254,14 +225,14 @@ watch( } if (isSorption(selectRightX, componentRightX)) { line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition( componentRightX - selectW, selectTopY ) + selectTarget.value.setPosition(componentRightX - selectW, selectTopY) } } /* * 我也不知道为什么这个不行，还没时间调 if(lineItem.includes('row')) { - seletY.forEach(sY => { + selectY.forEach(sY => { componentY.forEach(cY => { if (isSorption(sY, cY)) { line.select.set(lineItem, { y: cY }) diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue index 9198aef3..59899b73 100644 --- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue +++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue @@ -4,19 +4,16 @@
+ >
-
+
@@ -52,8 +49,10 @@ const hover = computed(() => { return props.item.id === chartEditStore.getTargetChart.hoverId }) +// 兼容多值场景 const select = computed(() => { - return props.item.id === chartEditStore.getTargetChart.selectId + const id = props.item.id + return chartEditStore.getTargetChart.selectId.find((e: string) => e === id) }) @@ -79,7 +78,7 @@ const select = computed(() => { width: 30px; transform: translate(-50%, -30%); } - &.l, + &.l, &.r { height: 30px; } @@ -89,9 +88,8 @@ const select = computed(() => { &.l { transform: translate(-45%, -50%); } - &.rt, - &.rb - { + &.rt, + &.rb { transform: translate(-30%, -30%); } } diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue index 3444807e..97c09028 100644 --- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue +++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue @@ -43,7 +43,8 @@ const { image } = toRefs(props.componentData.chartConfig) // 计算当前选中目标 const select = computed(() => { - return props.componentData.id === chartEditStore.getTargetChart.selectId + const id = props.componentData.id + return chartEditStore.getTargetChart.selectId.find((e: string) => e === id) }) const hover = computed(() => { From f84c72dc7191706895063c8d78c1c3ae8ca141ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Wed, 22 Jun 2022 14:31:53 +0800 Subject: [PATCH 05/19] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=94=AE?= =?UTF-8?q?=E7=9B=98=E6=8C=89=E9=94=AE=E8=AE=B0=E5=BD=95=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/chart/hooks/useKeyboard.hook.ts | 23 ++++++++++++++++++++--- types/global.d.ts | 2 ++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts index 0d7d4ad2..58ab28c4 100644 --- a/src/views/chart/hooks/useKeyboard.hook.ts +++ b/src/views/chart/hooks/useKeyboard.hook.ts @@ -75,9 +75,21 @@ const macKeyList: Array = [ macKeyboardValue.forward, ] +// 处理键盘记录 +const keyRecordHandle = () => { + document.onkeydown = throttle((e: KeyboardEvent) => { + if(window.$KeyboardActive) window.$KeyboardActive.add(e.key.toLocaleLowerCase()) + else window.$KeyboardActive = new Set([e.key]) + }, 200) + + document.onkeyup = throttle((e: KeyboardEvent) => { + if(window.$KeyboardActive) window.$KeyboardActive.delete(e.key.toLocaleLowerCase()) + }, 200) +} + // 初始化监听事件 export const useAddKeyboard = () => { - const switchHande = (keyboardValue: typeof winKeyboardValue, e: string) => { + const switchHandle = (keyboardValue: typeof winKeyboardValue, e: string) => { switch (e) { // ct+↑ case keyboardValue.up: @@ -124,15 +136,20 @@ export const useAddKeyboard = () => { } } winKeyList.forEach((key: string) => { - switchHande(winKeyboardValue, key) + switchHandle(winKeyboardValue, key) }) macKeyList.forEach((key: string) => { - switchHande(macKeyboardValue, key) + switchHandle(macKeyboardValue, key) }) + + keyRecordHandle() } // 卸载监听事件 export const useRemoveKeyboard = () => { + document.onkeydown = () => {}; + document.onkeyup = () => {}; + winKeyList.forEach((key: string) => { keymaster.unbind(key) }) diff --git a/types/global.d.ts b/types/global.d.ts index 74863473..3636172e 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -5,6 +5,8 @@ interface Window { // 语言 $t: any $vue: any + // 键盘按键记录 + $KeyboardActive?: Set } declare type Recordable = Record \ No newline at end of file From ea8a2b59d991f5c730486bca562e0db65d84df8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 25 Jun 2022 11:18:04 +0800 Subject: [PATCH 06/19] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E5=A4=87=E6=B3=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useChartDataFetch.hook.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index ac522475..9f1e8865 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -58,7 +58,7 @@ export const useChartDataFetch = ( } }) } else { - // 若遵守规范使用 datase 作为数据 key，则省自动赋值数据 + // 若遵守规范使用 dataset 作为数据 key，则会自动赋值数据 targetComponent.option.dataset && (targetComponent.option.dataset = res.data) } if (updateCallback) { From 3eac0d159211f4020a035ac2ef4707e3623d616a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 25 Jun 2022 15:51:03 +0800 Subject: [PATCH 07/19] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Emock=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/mock/index.ts | 24 ++++++++++++++----- src/api/mock/test.mock.ts | 16 +++++++++++-- .../components/ChartDataAjax/index.vue | 10 ++++++-- 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/api/mock/index.ts b/src/api/mock/index.ts index a2474a61..83afc85a 100644 --- a/src/api/mock/index.ts +++ b/src/api/mock/index.ts @@ -4,26 +4,38 @@ import { RequestHttpEnum } from '@/enums/httpEnum' // 单个X数据 export const chartDataUrl = '/mock/chartData' -export const rankListUrl = '/mock/RankList' -export const numberUrl = '/mock/number' +export const rankListUrl = '/mock/rankList' +export const numberFloatUrl = '/mock/number/float' +export const numberIntUrl = '/mock/number/int' +export const textUrl = '/mock/text' const mockObject: MockMethod[] = [ { // 正则 // url: /\/mock\/mockData(|\?\S*)$/, - url: '/mock/chartData', + url: chartDataUrl, method: RequestHttpEnum.GET, response: () => test.fetchMockData, }, { - url: '/mock/rankList', + url: rankListUrl, method: RequestHttpEnum.GET, response: () => test.fetchRankList, }, { - url: '/mock/number', + url: numberFloatUrl, method: RequestHttpEnum.GET, - response: () => test.fetchNumber, + response: () => test.fetchNumberFloat, + }, + { + url: numberIntUrl, + method: RequestHttpEnum.GET, + response: () => test.fetchNumberInt, + }, + { + url: textUrl, + method: RequestHttpEnum.GET, + response: () => test.fetchText, }, ] diff --git a/src/api/mock/test.mock.ts b/src/api/mock/test.mock.ts index 4f0478a6..7f72930d 100644 --- a/src/api/mock/test.mock.ts +++ b/src/api/mock/test.mock.ts @@ -62,10 +62,22 @@ export default { ], }, // 获取数字 - fetchNumber: { + fetchNumberFloat: { code: 0, status: 200, msg: '请求成功', - data: '@float(0, 0.99)', + data: '@float(0, 0.99, 1, 2)', + }, + fetchNumberInt: { + code: 0, + status: 200, + msg: '请求成功', + data: '@integer(0, 100)', + }, + fetchText: { + code: 0, + status: 200, + msg: '请求成功', + data: '@paragraph(1, 10)', }, } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue index bd795936..86aa1456 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -62,7 +62,7 @@ import { ref, toRefs } from 'vue' import { icon } from '@/plugins' import { SettingItemBox } from '@/components/Pages/ChartItemSetting' import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum' -import { chartDataUrl, rankListUrl, numberUrl } from '@/api/mock' +import { chartDataUrl, rankListUrl, numberFloatUrl, numberIntUrl, textUrl } from '@/api/mock' import { http } from '@/api/http' import { SelectHttpType } from '../../index.d' import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow' @@ -85,7 +85,13 @@ const apiList = [ value: `【表格】${ rankListUrl }` }, { - value: `【0~1数字】${ numberUrl }` + value: `【文本】${ textUrl }` + }, + { + value: `【0~100 整数】${ numberIntUrl }` + }, + { + value: `【0~1小数】${ numberFloatUrl }` } ] From 012eed6f670ff21f5539e4290b712dd4e392e8c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 25 Jun 2022 15:51:38 +0800 Subject: [PATCH 08/19] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=BF=9B?= =?UTF-8?q?=E5=BA=A6=E6=9D=A1=E5=A4=9A=E4=B8=AA=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Charts/Mores/Process/config.ts | 18 +++++- .../Charts/Mores/Process/config.vue | 56 ++++++++++++------- .../components/Charts/Mores/Process/index.vue | 38 +++++++++++-- 3 files changed, 84 insertions(+), 28 deletions(-) diff --git a/src/packages/components/Charts/Mores/Process/config.ts b/src/packages/components/Charts/Mores/Process/config.ts index 34d86502..16b47327 100644 --- a/src/packages/components/Charts/Mores/Process/config.ts +++ b/src/packages/components/Charts/Mores/Process/config.ts @@ -33,15 +33,29 @@ export const indicatorPlacements = [ export const option = { dataset: 36, + // 默认类型 type: types[2].value, + // 进行时效果 + processing: true, + // 主颜色 color: '#4992FFFF', + // 轨道颜色 + railColor: '#3e3e3f', + // 指标 + unit: '%', + // 指标大小 + indicatorTextSize: 34, // 指标位置（线条时可用） - indicatorPlacement: "outside" + indicatorPlacement: 'outside', + // 指标颜色 + indicatorTextColor: '#FFFFFFFF', + // 偏移角度 + offsetDegree: 0 } export default class Config extends publicConfig implements CreateComponentType { public key = ProcessConfig.key - public attr = {...chartInitConfig, h: 500, zIndex: -1} + public attr = { ...chartInitConfig, h: 500, zIndex: -1 } public chartConfig = cloneDeep(ProcessConfig) public option = cloneDeep(option) } \ No newline at end of file diff --git a/src/packages/components/Charts/Mores/Process/config.vue b/src/packages/components/Charts/Mores/Process/config.vue index 74003105..2842d910 100644 --- a/src/packages/components/Charts/Mores/Process/config.vue +++ b/src/packages/components/Charts/Mores/Process/config.vue @@ -1,29 +1,49 @@ @@ -31,14 +51,10 @@ \ No newline at end of file + diff --git a/src/packages/components/Charts/Mores/Process/index.vue b/src/packages/components/Charts/Mores/Process/index.vue index 1bba3c80..f2ad2035 100644 --- a/src/packages/components/Charts/Mores/Process/index.vue +++ b/src/packages/components/Charts/Mores/Process/index.vue @@ -1,27 +1,53 @@ \ No newline at end of file + From 6c941ffed5dfac3423162d2f6ad8456d3d7cbc11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 25 Jun 2022 15:52:04 +0800 Subject: [PATCH 09/19] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E6=B8=90?= =?UTF-8?q?=E5=8F=98=E6=96=87=E6=9C=AC=E4=B8=8D=E8=83=BD=E6=8D=A2=E8=A1=8C?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Informations/Texts/TextGradient/index.vue | 3 +++ .../ContentConfigurations/components/ChartData/index.vue | 8 +------- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/packages/components/Informations/Texts/TextGradient/index.vue b/src/packages/components/Informations/Texts/TextGradient/index.vue index 87160cbf..90a10ddc 100644 --- a/src/packages/components/Informations/Texts/TextGradient/index.vue +++ b/src/packages/components/Informations/Texts/TextGradient/index.vue @@ -48,5 +48,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, callback) display: flex; align-items: center; justify-content: center; + .n-gradient-text { + white-space: initial; + } } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/index.vue index 0c4f46d7..c8c07a8e 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/index.vue @@ -40,10 +40,4 @@ const selectOptions: SelectCreateDataType[] = [ value: RequestDataTypeEnum.AJAX } ] - - - - + \ No newline at end of file From 34e0b6e610043167e6184907c62c880ac5bc1764 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 25 Jun 2022 17:03:03 +0800 Subject: [PATCH 10/19] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E6=95=B0=E6=8D=AE=20hooks=20=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useChartDataFetch.hook.ts | 96 ++++++++++--------- .../Informations/Texts/TextCommon/index.vue | 31 +++++- .../Informations/Texts/TextGradient/index.vue | 29 +++--- 3 files changed, 89 insertions(+), 67 deletions(-) diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 9f1e8865..03f64dae 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -1,7 +1,7 @@ -import { ref, toRefs, watchEffect, nextTick } from 'vue' +import { ref, toRefs } from 'vue' import type VChart from 'vue-echarts' import { http } from '@/api/http' -import { CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d' +import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview } from '@/utils' @@ -17,60 +17,64 @@ type ChartEditStoreType = typeof useChartEditStore */ export const useChartDataFetch = ( targetComponent: CreateComponentType, - useChartEditStore: ChartEditStoreType, + useChartEditStore: ChartEditStoreType, updateCallback?: (...args: any) => any ) => { const vChartRef = ref(null) let fetchInterval: any = 0 - isPreview() && - watchEffect(() => { - clearInterval(fetchInterval) + const requestInterval = () => { + const chartEditStore = useChartEditStore() + const { requestOriginUrl, requestInterval } = toRefs( + chartEditStore.getRequestGlobalConfig + ) + // 组件类型 + const { chartFrame } = targetComponent.chartConfig + // 请求配置 + const { requestDataType, requestHttpType, requestUrl } = toRefs( + targetComponent.data + ) + // 非请求类型 + if (requestDataType.value !== RequestDataTypeEnum.AJAX) return + // 处理地址 + if (requestUrl?.value && requestInterval.value > 0) { + // requestOriginUrl 允许为空 + const completePath = + requestOriginUrl && requestOriginUrl.value + requestUrl.value + if (!completePath) return - const chartEditStore = useChartEditStore() - const { requestOriginUrl, requestInterval } = toRefs( - chartEditStore.getRequestGlobalConfig - ) - const { requestDataType, requestHttpType, requestUrl } = toRefs( - targetComponent.data - ) - if (requestDataType.value !== RequestDataTypeEnum.AJAX) return - // 处理地址 - if (requestUrl?.value && requestInterval.value > 0) { - // requestOriginUrl 允许为空 - const completePath = - requestOriginUrl && requestOriginUrl.value + requestUrl.value - if (!completePath) return - - fetchInterval = setInterval(async () => { - const res:any = await http(requestHttpType.value)(completePath || '', {}) - if (res.data) { - // 是否是 Echarts 组件 - const isECharts = - targetComponent.chartConfig.package === - PackagesCategoryEnum.CHARTS - - try { - if (isECharts && vChartRef?.value?.setOption) { - nextTick(() => { - if (vChartRef.value) { - vChartRef.value.setOption({ dataset: res.data }) - } - }) - } else { - // 若遵守规范使用 dataset 作为数据 key，则会自动赋值数据 - targetComponent.option.dataset && (targetComponent.option.dataset = res.data) + const fetchFn = async () => { + const res: any = await http(requestHttpType.value)(completePath || '', {}) + if (res.data) { + try { + // echarts 组件更新方式 + if (chartFrame === ChartFrameEnum.ECHARTS) { + if (vChartRef.value) { + vChartRef.value.setOption({ dataset: res.data }) } - if (updateCallback) { - updateCallback(res.data) - } - } catch (error) { - console.error(error) + } else { + // 若遵守规范使用 dataset 作为数据 key，则会自动赋值数据 + targetComponent.option.dataset && (targetComponent.option.dataset = res.data) } + // 更新回调函数 + if (updateCallback) { + updateCallback(res.data) + } + } catch (error) { + console.error(error) } - }, requestInterval.value * 1000) + } } - }) + + // 立即调用 + fetchFn() + // 开启定时 + setInterval(fetchFn, requestInterval.value * 1000) + } + } + + isPreview() && requestInterval() + return { vChartRef } } diff --git a/src/packages/components/Informations/Texts/TextCommon/index.vue b/src/packages/components/Informations/Texts/TextCommon/index.vue index cc2f0a47..b5170486 100644 --- a/src/packages/components/Informations/Texts/TextCommon/index.vue +++ b/src/packages/components/Informations/Texts/TextCommon/index.vue @@ -15,19 +15,21 @@ background-color:${backgroundColor}`" > - {{ dataset }} + {{ option.dataset }} \ No newline at end of file +// 编辑更新 +watch( + () => props.chartConfig.option.dataset, + (newData: any) => { + option.dataset = newData + }, + { + immediate: true + } +) + +// 预览更新 +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { + option.dataset = newData +}) + From 2d05e8054c98a121d5f6442a9bb520e0b59b882d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Mon, 27 Jun 2022 20:26:24 +0800 Subject: [PATCH 18/19] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=95=B0=E6=8D=AE=E6=97=A0=E6=B3=95=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/mock/index.ts | 28 ++++++---- src/api/mock/test.mock.ts | 50 ++++++++++++------ .../components/Charts/Mores/Process/index.vue | 24 +++++++-- .../Charts/Mores/WaterPolo/index.vue | 51 ++++++++++--------- .../Charts/Pies/PieCircle/index.vue | 4 +- .../Decorates/Mores/Number/config.ts | 7 +-- .../Decorates/Mores/Number/config.vue | 19 +++---- .../Decorates/Mores/Number/index.vue | 13 ++--- .../Informations/Texts/TextCommon/index.vue | 5 +- .../Informations/Texts/TextGradient/index.vue | 5 +- .../Tables/Tables/TableScrollBoard/index.vue | 5 +- .../components/ChartDataAjax/index.vue | 14 +++-- 12 files changed, 133 insertions(+), 92 deletions(-) diff --git a/src/api/mock/index.ts b/src/api/mock/index.ts index ecfe7dbc..d6c6ee98 100644 --- a/src/api/mock/index.ts +++ b/src/api/mock/index.ts @@ -4,11 +4,12 @@ import { RequestHttpEnum } from '@/enums/httpEnum' // 单个X数据 export const chartDataUrl = '/mock/chartData' -export const rankListUrl = '/mock/rankList' export const numberFloatUrl = '/mock/number/float' export const numberIntUrl = '/mock/number/int' export const textUrl = '/mock/text' export const imageUrl = '/mock/image' +export const rankListUrl = '/mock/rankList' +export const scrollBoardUrl = '/mock/scrollBoard' const mockObject: MockMethod[] = [ { @@ -16,33 +17,38 @@ const mockObject: MockMethod[] = [ // url: /\/mock\/mockData(|\?\S*)$/, url: chartDataUrl, method: RequestHttpEnum.GET, - response: () => test.fetchMockData, - }, - { - url: rankListUrl, - method: RequestHttpEnum.GET, - response: () => test.fetchRankList, + response: () => test.fetchMockData }, { url: numberFloatUrl, method: RequestHttpEnum.GET, - response: () => test.fetchNumberFloat, + response: () => test.fetchNumberFloat }, { url: numberIntUrl, method: RequestHttpEnum.GET, - response: () => test.fetchNumberInt, + response: () => test.fetchNumberInt }, { url: textUrl, method: RequestHttpEnum.GET, - response: () => test.fetchText, + response: () => test.fetchText }, { url: imageUrl, method: RequestHttpEnum.GET, - response: () => test.fetchImage(Math.round(Math.random()*10)), + response: () => test.fetchImage(Math.round(Math.random() * 10)) }, + { + url: rankListUrl, + method: RequestHttpEnum.GET, + response: () => test.fetchRankList + }, + { + url: scrollBoardUrl, + method: RequestHttpEnum.GET, + response: () => test.fetchScrollBoard + } ] export default mockObject diff --git a/src/api/mock/test.mock.ts b/src/api/mock/test.mock.ts index 54688c58..404bbf90 100644 --- a/src/api/mock/test.mock.ts +++ b/src/api/mock/test.mock.ts @@ -10,35 +10,35 @@ export default { { product: '@name', 'dataOne|100-900': 3, - 'dataTwo|100-900': 3, + 'dataTwo|100-900': 3 }, { product: '@name', 'dataOne|100-900': 3, - 'dataTwo|100-900': 3, + 'dataTwo|100-900': 3 }, { product: '@name', 'dataOne|100-900': 3, - 'dataTwo|100-900': 3, + 'dataTwo|100-900': 3 }, { product: '@name', 'dataOne|100-900': 3, - 'dataTwo|100-900': 3, + 'dataTwo|100-900': 3 }, { product: '@name', 'dataOne|100-900': 3, - 'dataTwo|100-900': 3, + 'dataTwo|100-900': 3 }, { product: '@name', 'dataOne|100-900': 3, - 'dataTwo|100-900': 3, - }, - ], - }, + 'dataTwo|100-900': 3 + } + ] + } }, // 排名列表 fetchRankList: { @@ -58,32 +58,50 @@ export default { { name: '@name', 'value|100-900': 5 }, { name: '@name', 'value|100-900': 5 }, { name: '@name', 'value|100-900': 5 }, - { name: '@name', 'value|100-900': 5 }, - ], + { name: '@name', 'value|100-900': 5 } + ] + }, + // 轮播表格 + fetchScrollBoard: { + code: 0, + status: 200, + msg: '请求成功', + data: [ + ['行1列1', '行1列2', '1'], + ['行2列1', '行2列2', '2'], + ['行3列1', '行3列2', '3'], + ['行4列1', '行4列2', '4'], + ['行5列1', '行5列2', '5'], + ['行6列1', '行6列2', '6'], + ['行7列1', '行7列2', '行7列3'], + ['行8列1', '行8列2', '行8列3'], + ['行9列1', '行9列2', '行9列3'], + ['行10列1', '行10列2', '行10列3'] + ] }, // 获取数字 fetchNumberFloat: { code: 0, status: 200, msg: '请求成功', - data: '@float(0, 0.99, 1, 2)', + data: '@float(0, 0.99, 1, 4)' }, fetchNumberInt: { code: 0, status: 200, msg: '请求成功', - data: '@integer(0, 100)', + data: '@integer(0, 100)' }, fetchText: { code: 0, status: 200, msg: '请求成功', - data: '@paragraph(1, 10)', + data: '@paragraph(1, 10)' }, fetchImage: (num: number) => ({ code: 0, status: 200, msg: '请求成功', - data: `https://robohash.org/${num}`, - }), + data: `https://robohash.org/${num}` + }) } diff --git a/src/packages/components/Charts/Mores/Process/index.vue b/src/packages/components/Charts/Mores/Process/index.vue index f2ad2035..60818b1d 100644 --- a/src/packages/components/Charts/Mores/Process/index.vue +++ b/src/packages/components/Charts/Mores/Process/index.vue @@ -3,7 +3,7 @@ :type="type" :height="h" :processing="processing" - :percentage="dataset" + :percentage="option.dataset" :indicator-placement="indicatorPlacement" :color="color" :rail-color="railColor" @@ -15,16 +15,16 @@ fontSize: `${indicatorTextSize}px` }" > - {{dataset}} {{unit}} + {{option.dataset}} {{unit}} diff --git a/src/packages/components/Charts/Mores/WaterPolo/index.vue b/src/packages/components/Charts/Mores/WaterPolo/index.vue index f829f25f..36af753b 100644 --- a/src/packages/components/Charts/Mores/WaterPolo/index.vue +++ b/src/packages/components/Charts/Mores/WaterPolo/index.vue @@ -1,11 +1,5 @@ diff --git a/src/packages/components/Charts/Pies/PieCircle/index.vue b/src/packages/components/Charts/Pies/PieCircle/index.vue index 0a552d0c..4309e02b 100644 --- a/src/packages/components/Charts/Pies/PieCircle/index.vue +++ b/src/packages/components/Charts/Pies/PieCircle/index.vue @@ -48,9 +48,7 @@ const dataHandle = (newData: any) => { // 配置时 watch( () => props.chartConfig.option.dataset, - newData => { - dataHandle(newData) - }, + newData => dataHandle(newData), { immediate: true } diff --git a/src/packages/components/Decorates/Mores/Number/config.ts b/src/packages/components/Decorates/Mores/Number/config.ts index c3a8b940..7a7679d4 100644 --- a/src/packages/components/Decorates/Mores/Number/config.ts +++ b/src/packages/components/Decorates/Mores/Number/config.ts @@ -4,12 +4,13 @@ import { NumberConfig } from './index' import cloneDeep from 'lodash/cloneDeep' export const option = { - from: 50000, - to: 100000, + // 数据说明 + dataset: 100000, + from: 0, dur: 3, precision: 0, showSeparator: true, - numberSize: 24, + numberSize: 34, numberColor: '#4a9ef8', prefixText: '￥', prefixColor: '#4a9ef8', diff --git a/src/packages/components/Decorates/Mores/Number/config.vue b/src/packages/components/Decorates/Mores/Number/config.vue index c951ed5e..e7b2cadb 100644 --- a/src/packages/components/Decorates/Mores/Number/config.vue +++ b/src/packages/components/Decorates/Mores/Number/config.vue @@ -1,13 +1,6 @@ -