From 5275947fe9d0d8684165f7bab3104fd78768745b Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 8 Aug 2024 17:26:43 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?= =?UTF-8?q?=20=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E4=B8=8D=E5=90=8C=E4=BC=B8=E7=BC=A9=E6=96=B9=E5=BC=8F=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/CanvasAttr.vue | 45 ++++++++++++++++++- core/core-frontend/src/utils/canvasUtils.ts | 1 + .../editor/util/dataVisualization.ts | 1 + 3 files changed, 46 insertions(+), 1 deletion(-) diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue index 90c23a19aa..67a37243fb 100644 --- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue +++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue @@ -3,7 +3,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' import { storeToRefs } from 'pinia' import { nextTick, onMounted, ref } from 'vue' -import { ElFormItem } from 'element-plus-secondary' +import { ElFormItem, ElIcon } from 'element-plus-secondary' import { merge, cloneDeep } from 'lodash-es' import { useEmitt } from '@/hooks/web/useEmitt' @@ -11,12 +11,20 @@ import ComponentColorSelector from '@/components/dashboard/subject-setting/dashb import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue' import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue' import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue' +import Icon from '../icon-custom/src/Icon.vue' const dvMainStore = dvMainStoreWithOut() const snapshotStore = snapshotStoreWithOut() const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore) let canvasAttrInit = false const canvasAttrActiveNames = ref(['size', 'background', 'color']) + +const screenAdaptorList = [ + { label: '宽度优先', value: 'widthFirst' }, + { label: '高度优先', value: 'heightFirst' }, + { label: '铺满全屏', value: 'full' }, + { label: '不缩放', value: 'keepSize' } +] const init = () => { nextTick(() => { canvasAttrInit = true @@ -105,6 +113,33 @@ onMounted(() => { + + + 缩放方式 + + + + + + + + + + + @@ -129,6 +164,10 @@ onMounted(() => { diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 9f65374438..385ecbf3be 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -130,6 +130,7 @@ export function historyAdaptor( //历史字段适配 canvasStyleResult.component['seniorStyleSetting'] = canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT) + canvasStyleResult['screenAdaptor'] = canvasStyleResult['screenAdaptor'] || 'widthFirst' canvasStyleResult['popupAvailable'] = canvasStyleResult['popupAvailable'] === undefined ? true : canvasStyleResult['popupAvailable'] //兼容弹框区域开关 const reportFilterInfo = canvasInfo.reportFilterInfo diff --git a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts index 10fb24790e..ea8f05674e 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts @@ -85,6 +85,7 @@ export const DEFAULT_CANVAS_STYLE_DATA_BASE = { refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟 refreshTime: 5, // 仪表板刷新时间 默认5分钟 popupAvailable: true, // 弹窗区域是否可用 默认为true + screenAdaptor: 'widthFirst', // 屏幕适配方式 widthFirst=宽度优先 heightFirst=高度优先 full=铺满全屏 keepSize=不缩放 scale: 60, scaleWidth: 100, scaleHeight: 100, From 684c61536f6d1d76881e43d51ab773d7120893ae Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 8 Aug 2024 19:05:02 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?= =?UTF-8?q?=20=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E4=B8=8D=E5=90=8C=E4=BC=B8=E7=BC=A9=E6=96=B9=E5=BC=8F=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../utils/changeComponentsSizeWithScale.ts | 36 +++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts index 950d8916ca..1bd6efdd84 100644 --- a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts +++ b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts @@ -8,16 +8,24 @@ const dvMainStore = dvMainStoreWithOut() const { componentData, curComponentIndex, canvasStyleData } = storeToRefs(dvMainStore) const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize', 'letterSpacing'] +const needToChangeDirectionAttrs = { + width: ['left', 'width', 'fontSize', 'letterSpacing'], + height: ['top', 'height'] +} export function changeSizeWithScale(scale) { return changeComponentsSizeWithScale(scale) } -export function changeComponentsSizeWithScale(scale) { +export function changeSizeWithDirectionScale(scale, direction) { + return changeComponentsSizeWithScale(scale, needToChangeDirectionAttrs[direction]) +} + +export function changeComponentsSizeWithScale(scale, changeAttrs = needToChangeAttrs) { const componentDataCopy = deepCopy(componentData.value) componentDataCopy.forEach(component => { Object.keys(component.style).forEach(key => { - if (needToChangeAttrs.includes(key)) { + if (changeAttrs.includes(key)) { if (key === 'fontSize' && component.style[key] === '') return // 根据原来的比例获取样式原来的尺寸 // 再用原来的尺寸 * 现在的比例得出新的尺寸 @@ -52,21 +60,35 @@ export function changeComponentsSizeWithScale(scale) { }) } -export function changeRefComponentsSizeWithScale(componentDataRef, canvasStyleDataRef, scale) { +export function changeRefComponentsSizeWithScale( + componentDataRef, + canvasStyleDataRef, + scaleWidth, + scaleHeight +) { componentDataRef.forEach(component => { Object.keys(component.style).forEach(key => { - if (needToChangeAttrs.includes(key)) { - if (key === 'fontSize' && component.style[key] === '') return + if (key === 'fontSize' && component.style[key] === '') return + if (needToChangeDirectionAttrs.width.includes(key)) { // 根据原来的比例获取样式原来的尺寸 // 再用原来的尺寸 * 现在的比例得出新的尺寸 component.style[key] = format( getOriginStyle(component.style[key], canvasStyleDataRef.scale), - scale + scaleWidth + ) + } else if (needToChangeDirectionAttrs.height.includes(key)) { + // 根据原来的比例获取样式原来的尺寸 + // 再用原来的尺寸 * 现在的比例得出新的尺寸 + component.style[key] = format( + getOriginStyle(component.style[key], canvasStyleDataRef.scale), + scaleHeight ) } }) }) - canvasStyleDataRef.scale = scale + canvasStyleDataRef.scale = scaleWidth + canvasStyleDataRef.scaleWidth = scaleWidth + canvasStyleDataRef.scaleHeight = scaleHeight } const needToChangeAttrs2 = ['width', 'height', 'fontSize']