From 98b76189c5f5a63d537e7e0af37218588924d74e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 15 Apr 2022 19:44:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=AF=E9=80=89=E6=8B=A9=E8=B0=83?=
=?UTF-8?q?=E8=8A=82=E7=9F=A9=E9=98=B5=E5=AF=86=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../canvas/components/Editor/index.vue | 35 ++++++++++++++++---
frontend/src/components/canvas/utils/utils.js | 3 +-
.../PanelStyle/PanelAidedDesign.vue | 9 ++++-
frontend/src/views/panel/edit/index.vue | 12 ++++++-
frontend/src/views/panel/panel.js | 2 +-
5 files changed, 52 insertions(+), 9 deletions(-)
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index b39c6355d0..860f710ab9 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -219,6 +219,12 @@ import { buildFilterMap } from '@/utils/conditionUtil'
import _ from 'lodash'
import $ from 'jquery'
import Background from '@/views/background/index'
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import {
+ BASE_MOBILE_STYLE,
+ COMMON_BACKGROUND_NONE,
+ HYPERLINKS
+} from '@/components/canvas/custom-component/component-list'
let positionBox = []
let coordinates = [] // 坐标点集合
@@ -943,7 +949,11 @@ export default {
},
computed: {
showGrid() {
- return this.canvasStyleData.aidedDesign.showGrid
+ if (this.canvasStyleData && this.canvasStyleData.aidedDesign) {
+ return this.canvasStyleData.aidedDesign.showGrid
+ } else {
+ return false
+ }
},
editStyle() {
return {
@@ -1002,6 +1012,12 @@ export default {
}
},
watch: {
+ matrixCount: {
+ handler(newVal, oldVal) {
+ const pointScale = newVal.x / oldVal.x
+ this.changeScale(pointScale)
+ }
+ },
customStyle: {
handler(newVal) {
// 获取当前宽高（宽高改变后重新渲染画布）
@@ -1223,10 +1239,19 @@ export default {
// 自适应画布区域 返回原值
return value * scale / 100
},
- changeScale() {
- if (this.canvasStyleData.matrixCount) {
- this.matrixCount = this.canvasStyleData.matrixCount
- }
+ // 修改矩阵点
+ changeComponentSizePoint(pointScale) {
+ this.componentData.forEach((item, index) => {
+ item.x = (item.x - 1) * pointScale + 1
+ item.y = (item.y - 1) * pointScale + 1
+ item.sizex = item.sizex * pointScale
+ item.sizey = item.sizey * pointScale
+ // this.componentData[index] = item
+ })
+ },
+
+ changeScale(pointScale) {
+ this.changeComponentSizePoint(pointScale)
// 1.3 版本重新设计仪表板定位方式，基准画布宽高为 1600*900 宽度自适应当前画布获取缩放比例scaleWidth
// 高度缩放比例scaleHeight = scaleWidth 基础矩阵为128*72 矩阵原始宽度12.5*12.5 矩阵高度可以调整
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index 40f602e301..2bd642b7be 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -67,7 +67,7 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
}
export function panelInit(componentData, componentStyle) {
- componentData.forEach(item => {
+ componentData.forEach((item, index) => {
if (item.component && item.component === 'de-date') {
if (item.options.attrs &&
(!item.options.attrs.default || (item.serviceName === 'timeYearWidget' && item.options.attrs.default.dynamicInfill !== 'year') || (item.serviceName === 'timeMonthWidget' && item.options.attrs.default.dynamicInfill !== 'month'))) {
@@ -95,6 +95,7 @@ export function panelInit(componentData, componentStyle) {
item.hyperlinks = (item.hyperlinks || HYPERLINKS)
}
item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE)
+ componentData[index] = item
})
// style初始化
componentStyle.refreshTime = (componentStyle.refreshTime || 5)
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
index 1792e896a9..ce8adfa350 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
@@ -8,9 +8,16 @@
>
-
+
+
+
+ 普通
+ 适中
+ 密集
+
+
辅助设计
-
+
@@ -547,6 +547,16 @@ export default {
panelInfo() {
return this.$store.state.panel.panelInfo
},
+ pcMatrixCountBase() {
+ if (this.canvasStyleData.aidedDesign) {
+ return {
+ x: this.pcMatrixCount.x * this.canvasStyleData.aidedDesign.matrixBase,
+ y: this.pcMatrixCount.y * this.canvasStyleData.aidedDesign.matrixBase
+ }
+ } else {
+ return this.pcMatrixCount
+ }
+ },
...mapState([
'curComponent',
'curCanvasScale',
diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js
index 760c0d8bda..d1a3ff1baa 100644
--- a/frontend/src/views/panel/panel.js
+++ b/frontend/src/views/panel/panel.js
@@ -1,5 +1,5 @@
// eslint-disable-next-line no-unused-vars
-import { BASE_CHART, BASE_CHART_STRING } from '@/views/chart/chart/chart'
+import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
import { deepCopy } from '@/components/canvas/utils/utils'
export const DEFAULT_PANEL_STYLE = {