diff --git a/src/packages/components/Charts/Lines/LineGradients/config.vue b/src/packages/components/Charts/Lines/LineGradients/config.vue index 5b83091a..3b332664 100644 --- a/src/packages/components/Charts/Lines/LineGradients/config.vue +++ b/src/packages/components/Charts/Lines/LineGradients/config.vue @@ -12,7 +12,6 @@ diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 1f95d50f..5e800fe9 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -115,7 +115,6 @@ export interface PublicConfigType { } filter?: string status: StatusType - setPosition: Function } export interface CreateComponentType extends PublicConfigType, requestConfig { diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 7bf4ae75..3924834a 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -81,12 +81,6 @@ export class PublicConfigClass implements PublicConfigType { public request = cloneDeep(requestConfig) // 数据过滤 public filter = undefined - - // 设置坐标 - public setPosition(x: number, y: number): void { - this.attr.x = x - this.attr.y = y - } } // 多选成组类 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 505c56f3..ea1759a7 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -493,34 +493,31 @@ export const useChartEditStore = defineStore({ } const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => { e = cloneDeep(e) - // 生成新 id - e.id = getUUID() e.attr.x = this.getMousePosition.x + 30 e.attr.y = this.getMousePosition.y + 30 + // 外层生成新 id + e.id = getUUID() + // 分组列表生成新 id + if (e.isGroup) { + (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => { + item.id = getUUID() + }) + } + return e } const isCut = recordCharts.type === HistoryActionTypeEnum.CUT + const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ] // 多项 - if (Array.isArray(recordCharts.charts)) { - recordCharts.charts.forEach((e: CreateComponentType) => { - this.addComponentList(parseHandle(e), undefined, true) - // 剪切需删除原数据 - if (isCut) { - this.setTargetSelectChart(e.id) - this.removeComponentList(undefined, true) - } - }) - if (isCut) this.setRecordChart(undefined) - loadingFinish() - return - } - // 单项 - this.addComponentList(parseHandle(recordCharts.charts), undefined, true) - if (isCut) { - this.setTargetSelectChart(recordCharts.charts.id) - this.removeComponentList() - this.setRecordChart(undefined) - } + targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => { + this.addComponentList(parseHandle(e), undefined, true) + // 剪切需删除原数据 + if (isCut) { + this.setTargetSelectChart(e.id) + this.removeComponentList(undefined, true) + } + }) + if (isCut) this.setRecordChart(undefined) loadingFinish() } catch (value) { loadingError() diff --git a/src/utils/componets.ts b/src/utils/components.ts similarity index 100% rename from src/utils/componets.ts rename to src/utils/components.ts diff --git a/src/utils/index.ts b/src/utils/index.ts index fa9fa055..8d2478e6 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -4,6 +4,6 @@ export * from '@/utils/router' export * from '@/utils/storage' export * from '@/utils/style' export * from '@/utils/plugin' -export * from '@/utils/componets' +export * from '@/utils/components' export * from '@/utils/type' export * from '@/utils/file' diff --git a/src/utils/utils.ts b/src/utils/utils.ts index ed607783..6d56e05c 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -7,7 +7,9 @@ import html2canvas from 'html2canvas' import { downloadByA } from './file' import { toString } from './type' import cloneDeep from 'lodash/cloneDeep' +import { WinKeyboard } from '@/enums/editPageEnum' import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' /** * * 判断是否是开发环境 @@ -72,6 +74,21 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => { window['$message'].warning('您的浏览器不支持全屏功能！') } +/** + * 修改元素位置 + * @param target 对象 + * @param x X轴 + * @param y Y轴 + */ +export const setComponentPosition = ( + target: CreateComponentType | CreateComponentGroupType, + x?: number, + y?: number +) => { + x && (target.attr.x = x) + y && (target.attr.y = y) +} + /** * * 设置元素属性 * @param HTMLElement 元素 @@ -249,3 +266,22 @@ export const objToCookie = (obj: RequestParamsObjType) => { } return str.substring(0, str.length - 1) } + +/** + * * 设置按下键盘按键的底部展示 + * @param keyCode + * @returns + */ +export const setKeyboardDressShow = (keyCode?: number) => { + const code = new Map([[17, WinKeyboard.CTRL]]) + + const dom = document.getElementById('keyboard-dress-show') + if (!dom) return + if (!keyCode) { + dom.innerText = '' + return + } + if (keyCode && code.has(keyCode)) { + dom.innerText = `按下了「${code.get(keyCode)}」键` + } +} 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 9960d311..9d3654ae 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -128,6 +128,7 @@ const sendHandle = async () => { const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig)) loading.value = false if (res) { + if(!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！') targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter) showMatching.value = true return diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue index 8c36f1d8..7f5534dd 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue @@ -27,7 +27,7 @@ - 过滤器将处理接口返回值的「data」字段 + 过滤器默认处理接口返回值的「data」字段 diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue index 879b00d5..cea1e1c8 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -58,20 +58,20 @@
- 目标数据(data)： - + 默认过滤数据(data)： +
- 目标数据(res)： - + 接口返回数据(res)： +
过滤器结果： - +
@@ -87,7 +87,7 @@ 规则 - 过滤器将处理接口返回值的「data」字段 + 过滤器默认处理接口返回值的「data」字段 diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue index e65f5c6d..bfa30006 100644 --- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue +++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue @@ -17,6 +17,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' +import { setComponentPosition } from '@/utils' import throttle from 'lodash/throttle' import cloneDeep from 'lodash/cloneDeep' // 全局颜色 @@ -96,146 +97,150 @@ const canvasPositionList = computed(() => { watch( () => chartEditStore.getMousePosition, throttle(() => { - if (!isComputedLine.value || selectId.value.length !== 1) return - // 获取目标组件数据 + try { + if (!isComputedLine.value || selectId.value.length !== 1) return + // 获取目标组件数据 - const selectW = selectAttr.value.w - const selectH = selectAttr.value.h + const selectW = selectAttr.value.w + const selectH = selectAttr.value.h - // 距离左侧 - const selectLeftX = selectAttr.value.x - const selectHalfX = selectLeftX + selectW / 2 - const selectRightX = selectLeftX + selectW - const seletX = [selectLeftX, selectHalfX, selectRightX] + // 距离左侧 + const selectLeftX = selectAttr.value.x + const selectHalfX = selectLeftX + selectW / 2 + const selectRightX = selectLeftX + selectW + const seletX = [selectLeftX, selectHalfX, selectRightX] - // 距离顶部 - const selectTopY = selectAttr.value.y - const selectHalfY = selectTopY + selectH / 2 - const selectBottomY = selectTopY + selectH - const selectY = [selectTopY, selectHalfY, selectBottomY] + // 距离顶部 + const selectTopY = selectAttr.value.y + const selectHalfY = selectTopY + selectH / 2 + const selectBottomY = selectTopY + selectH + const selectY = [selectTopY, selectHalfY, selectBottomY] - line.select.clear() - line.sorptioned.y = false - // 循环查询所有组件数据 - const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => { - return { - id: e.id, - attr: e.attr - } - }) - componentList.push(canvasPositionList.value) - // 传入画布数据 - line.lineArr.forEach(lineItem => { - componentList.forEach((component: typeof canvasPositionList.value) => { - // 排除自身 - if (selectId.value[0] === component.id) return - const componentW = component.attr.w - const componentH = component.attr.h - - // 距离左侧 - const componentLeftX = component.attr.x - const componentHalfX = componentLeftX + componentW / 2 - const componentRightX = componentLeftX + componentW - const componentX = [componentLeftX, componentHalfX, componentRightX] - - // 距离顶部 - const componentTopY = component.attr.y - const componentHalfY = componentTopY + componentH / 2 - const componentBottomY = componentTopY + componentH - const componentY = [componentTopY, componentHalfY, componentBottomY] - - // 横线对比的是 Y - if (lineItem.includes('rowt')) { - // 顶部 - if (isSorption(selectTopY, componentTopY)) { - line.select.set(lineItem, { y: componentTopY }) - selectTarget.value.setPosition(selectLeftX, componentTopY) - } - if (isSorption(selectTopY, componentHalfY)) { - line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition(selectLeftX, componentHalfY) - } - if (isSorption(selectTopY, componentBottomY)) { - line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition(selectLeftX, componentBottomY) - } - } - if (lineItem.includes('rowc')) { - // 顶部 - if (isSorption(selectHalfY, componentTopY)) { - line.select.set(lineItem, { y: componentTopY }) - selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2) - } - if (isSorption(selectHalfY, componentHalfY)) { - line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2) - } - if (isSorption(selectHalfY, componentBottomY)) { - line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2) - } - } - if (lineItem.includes('rowb')) { - // 顶部 - if (isSorption(selectBottomY, componentTopY)) { - line.select.set(lineItem, { y: componentTopY }) - selectTarget.value.setPosition(selectLeftX, componentTopY - selectH) - } - if (isSorption(selectBottomY, componentHalfY)) { - line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH) - } - if (isSorption(selectBottomY, componentBottomY)) { - line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH) - } - } - - // 纵线对比的是 X - if (lineItem.includes('coll')) { - if (isSorption(selectLeftX, componentLeftX)) { - line.select.set(lineItem, { x: componentLeftX }) - selectTarget.value.setPosition(componentLeftX, selectTopY) - } - if (isSorption(selectLeftX, componentHalfX)) { - line.select.set(lineItem, { x: componentHalfX }) - selectTarget.value.setPosition(componentHalfX, selectTopY) - } - if (isSorption(selectLeftX, componentRightX)) { - line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition(componentRightX, selectTopY) - } - } - if (lineItem.includes('colc')) { - if (isSorption(selectHalfX, componentLeftX)) { - line.select.set(lineItem, { x: componentLeftX }) - selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY) - } - if (isSorption(selectHalfX, componentHalfX)) { - line.select.set(lineItem, { x: componentHalfX }) - selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY) - } - if (isSorption(selectHalfX, componentRightX)) { - line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY) - } - } - if (lineItem.includes('colr')) { - if (isSorption(selectRightX, componentLeftX)) { - line.select.set(lineItem, { x: componentLeftX }) - selectTarget.value.setPosition(componentLeftX - selectW, selectTopY) - } - if (isSorption(selectRightX, componentHalfX)) { - line.select.set(lineItem, { x: componentHalfX }) - selectTarget.value.setPosition(componentHalfX - selectW, selectTopY) - } - if (isSorption(selectRightX, componentRightX)) { - line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition(componentRightX - selectW, selectTopY) - } + line.select.clear() + line.sorptioned.y = false + // 循环查询所有组件数据 + const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => { + return { + id: e.id, + attr: e.attr } }) - }) + componentList.push(canvasPositionList.value) + // 传入画布数据 + line.lineArr.forEach(lineItem => { + componentList.forEach((component: typeof canvasPositionList.value) => { + // 排除自身 + if (selectId.value[0] === component.id) return + const componentW = component.attr.w + const componentH = component.attr.h + + // 距离左侧 + const componentLeftX = component.attr.x + const componentHalfX = componentLeftX + componentW / 2 + const componentRightX = componentLeftX + componentW + const componentX = [componentLeftX, componentHalfX, componentRightX] + + // 距离顶部 + const componentTopY = component.attr.y + const componentHalfY = componentTopY + componentH / 2 + const componentBottomY = componentTopY + componentH + const componentY = [componentTopY, componentHalfY, componentBottomY] + + // 横线对比的是 Y + if (lineItem.includes('rowt')) { + // 顶部 + if (isSorption(selectTopY, componentTopY)) { + line.select.set(lineItem, { y: componentTopY }) + setComponentPosition(selectTarget.value, selectLeftX, componentTopY) + } + if (isSorption(selectTopY, componentHalfY)) { + line.select.set(lineItem, { y: componentHalfY }) + setComponentPosition(selectTarget.value, selectLeftX, componentHalfY) + } + if (isSorption(selectTopY, componentBottomY)) { + line.select.set(lineItem, { y: componentBottomY }) + setComponentPosition(selectTarget.value, selectLeftX, componentBottomY) + } + } + if (lineItem.includes('rowc')) { + // 顶部 + if (isSorption(selectHalfY, componentTopY)) { + line.select.set(lineItem, { y: componentTopY }) + setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH / 2) + } + if (isSorption(selectHalfY, componentHalfY)) { + line.select.set(lineItem, { y: componentHalfY }) + setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH / 2) + } + if (isSorption(selectHalfY, componentBottomY)) { + line.select.set(lineItem, { y: componentBottomY }) + setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH / 2) + } + } + if (lineItem.includes('rowb')) { + // 顶部 + if (isSorption(selectBottomY, componentTopY)) { + line.select.set(lineItem, { y: componentTopY }) + setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH) + } + if (isSorption(selectBottomY, componentHalfY)) { + line.select.set(lineItem, { y: componentHalfY }) + setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH) + } + if (isSorption(selectBottomY, componentBottomY)) { + line.select.set(lineItem, { y: componentBottomY }) + setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH) + } + } + + // 纵线对比的是 X + if (lineItem.includes('coll')) { + if (isSorption(selectLeftX, componentLeftX)) { + line.select.set(lineItem, { x: componentLeftX }) + setComponentPosition(selectTarget.value, componentLeftX, selectTopY) + } + if (isSorption(selectLeftX, componentHalfX)) { + line.select.set(lineItem, { x: componentHalfX }) + setComponentPosition(selectTarget.value, componentHalfX, selectTopY) + } + if (isSorption(selectLeftX, componentRightX)) { + line.select.set(lineItem, { x: componentRightX }) + setComponentPosition(selectTarget.value, componentRightX, selectTopY) + } + } + if (lineItem.includes('colc')) { + if (isSorption(selectHalfX, componentLeftX)) { + line.select.set(lineItem, { x: componentLeftX }) + setComponentPosition(selectTarget.value, componentLeftX - selectW / 2, selectTopY) + } + if (isSorption(selectHalfX, componentHalfX)) { + line.select.set(lineItem, { x: componentHalfX }) + setComponentPosition(selectTarget.value, componentHalfX - selectW / 2, selectTopY) + } + if (isSorption(selectHalfX, componentRightX)) { + line.select.set(lineItem, { x: componentRightX }) + setComponentPosition(selectTarget.value, componentRightX - selectW / 2, selectTopY) + } + } + if (lineItem.includes('colr')) { + if (isSorption(selectRightX, componentLeftX)) { + line.select.set(lineItem, { x: componentLeftX }) + setComponentPosition(selectTarget.value, componentLeftX - selectW, selectTopY) + } + if (isSorption(selectRightX, componentHalfX)) { + line.select.set(lineItem, { x: componentHalfX }) + setComponentPosition(selectTarget.value, componentHalfX - selectW, selectTopY) + } + if (isSorption(selectRightX, componentRightX)) { + line.select.set(lineItem, { x: componentRightX }) + setComponentPosition(selectTarget.value, componentRightX - selectW, selectTopY) + } + } + }) + }) + } catch (err) { + console.log(err) + } }, 200), { deep: true diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue index 85aad898..193f4b70 100644 --- a/src/views/chart/ContentEdit/components/EditBottom/index.vue +++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue @@ -1,11 +1,16 @@