diff --git a/frontend/src/components/canvas/components/Editor/Grid.vue b/frontend/src/components/canvas/components/Editor/Grid.vue index 89640eb4c5..9670a8d774 100644 --- a/frontend/src/components/canvas/components/Editor/Grid.vue +++ b/frontend/src/components/canvas/components/Editor/Grid.vue @@ -5,16 +5,25 @@ + + + + - + @@ -44,6 +53,9 @@ export default { pathD: function() { return 'M ' + this.gridW + ' 0 L 0 0 0 ' + this.gridH }, + middleGridPathD: function() { + return 'M ' + this.middleGridW + ' 0 L 0 0 0 ' + this.middleGridH + }, smallGridPathD: function() { return 'M ' + this.smallGridW + ' 0 L 0 0 0 ' + this.smallGridH }, @@ -53,6 +65,12 @@ export default { gridH: function() { return this.matrixStyle.height * 2 * this.matrixBase }, + middleGridW: function() { + return this.matrixStyle.width * this.matrixBase + }, + middleGridH: function() { + return this.matrixStyle.height * this.matrixBase + }, smallGridW: function() { return this.matrixStyle.width }, diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index c58fcfa466..d2e05831b5 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -1011,12 +1011,12 @@ export default { } }, watch: { - 'canvasStyleData.aidedDesign.matrixBase': { - handler(newVal, oldVal) { - this.changeComponentSizePoint(newVal / oldVal) - }, - deep: true - }, + // 'canvasStyleData.aidedDesign.matrixBase': { + // handler(newVal, oldVal) { + // this.changeComponentSizePoint(newVal / oldVal) + // }, + // deep: true + // }, customStyle: { handler(newVal) { // 获取当前宽高（宽高改变后重新渲染画布） diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index b674eaba5f..3cacf68e48 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -317,7 +317,7 @@ const list = [ }, x: 1, y: 36, - sizex: 10, + sizex: 12, sizey: 6, auxiliaryMatrix: true, miniSizex: 1, @@ -347,7 +347,7 @@ const list = [ }, x: 1, y: 1, - sizex: 10, + sizex: 12, sizey: 10, miniSizex: 1, miniSizey: 1 diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 4db1994c95..79db9f94e7 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -67,6 +67,15 @@ export function mobile2MainCanvas(mainSource, mobileSource) { } export function panelInit(componentData, componentStyle) { + // style初始化 + componentStyle.refreshTime = (componentStyle.refreshTime || 5) + componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false) + componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute') + componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN)) + // // // 初始化密度为最高密度 + // const matrixChange = 2 / componentStyle.aidedDesign.matrixBase + // componentStyle.aidedDesign.matrixBase = 2 + componentData.forEach((item, index) => { if (item.component && item.component === 'de-date') { if (item.options.attrs && @@ -96,12 +105,6 @@ export function panelInit(componentData, componentStyle) { } item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE) }) - // style初始化 - componentStyle.refreshTime = (componentStyle.refreshTime || 5) - componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false) - componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute') - componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN)) - // 将data 和 style 数据设置到全局store中 store.commit('setComponentData', resetID(componentData)) store.commit('setCanvasStyle', componentStyle) @@ -115,3 +118,15 @@ export function resetID(data) { } return data } + +export function matrixBaseChange(component) { + const matrixBase = store.state.canvasStyleData.aidedDesign.matrixBase + if (component) { + component.x = (component.x - 1) * matrixBase + component.y = (component.y - 1) * matrixBase + component.sizex = component.sizex * matrixBase + component.sizey = component.sizey * matrixBase + } + return component +} + diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue index 7b6d5001d4..5ee238bd1e 100644 --- a/frontend/src/components/widget/DeWidget/DeTabs.vue +++ b/frontend/src/components/widget/DeWidget/DeTabs.vue @@ -39,6 +39,10 @@ {{ $t('detabs.selectview') }} + + 添加其他组件 + + {{ $t('table.delete') }} diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue index 3fa0ea40b2..acb20d2a09 100644 --- a/frontend/src/views/panel/AssistComponent/index.vue +++ b/frontend/src/views/panel/AssistComponent/index.vue @@ -83,7 +83,7 @@ import componentList, { assistList, pictureList, otherList } from '@/components/ import toast from '@/components/canvas/utils/toast' import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list' import generateID from '@/components/canvas/utils/generateID' -import { deepCopy } from '@/components/canvas/utils/utils' +import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils' import eventBus from '@/components/canvas/utils/eventBus' import { mapState } from 'vuex' @@ -163,7 +163,7 @@ export default { let component componentList.forEach(componentTemp => { if (id === componentTemp.id) { - component = deepCopy(componentTemp) + component = matrixBaseChange(deepCopy(componentTemp)) } }) // 图片移入是 不支持矩阵 暂时无法监听窗口取消事件 diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue index 680f73bd8d..ec16854649 100644 --- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue +++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue @@ -11,13 +11,13 @@ - - - 普通 - 适中 - 密集 - - + + + + + + + 辅助设计 { if (componentTemp.type === 'view') { - component = deepCopy(componentTemp) + component = matrixBaseChange(deepCopy(componentTemp)) } }) component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index dfd94ef7ab..54f7df8c71 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -338,7 +338,7 @@ import ViewSelect from '../ViewSelect' import SubjectSetting from '../SubjectSetting' import bus from '@/utils/bus' import Editor from '@/components/canvas/components/Editor/index' -import { deepCopy, panelInit } from '@/components/canvas/utils/utils' +import { deepCopy, matrixBaseChange, panelInit } from '@/components/canvas/utils/utils' import componentList, { BASE_MOBILE_STYLE, COMMON_BACKGROUND, @@ -992,7 +992,7 @@ export default { // 用户视图设置 复制一个模板 componentList.forEach(componentTemp => { if (componentTemp.type === 'view') { - component = deepCopy(componentTemp) + component = matrixBaseChange(deepCopy(componentTemp)) const propValue = { id: newComponentId, viewId: newViewInfo.id diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue index 6e722e55f6..14892914cc 100644 --- a/frontend/src/views/panel/filter/index.vue +++ b/frontend/src/views/panel/filter/index.vue @@ -30,7 +30,7 @@