From 5d5a334a61bd490031f4aa5e6ae047e961f2e096 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 4 Jul 2024 14:56:12 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E4=B8=8D=E5=90=8C=E7=9A=84?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=80=82=E5=BA=94=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/custom-component/component-list.ts | 1 + .../src/custom-component/picture/Attr.vue | 40 +++++++++- .../custom-component/picture/Component.vue | 8 +- core/core-frontend/src/utils/canvasUtils.ts | 73 ++++++++++++------- 4 files changed, 92 insertions(+), 30 deletions(-) diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index 4cd75b6173..1bc0c1488a 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -362,6 +362,7 @@ const list = [ } }, style: { + adaptation: 'adaptation', width: 300, height: 200 }, diff --git a/core/core-frontend/src/custom-component/picture/Attr.vue b/core/core-frontend/src/custom-component/picture/Attr.vue index aa4c0800b0..ab831e8b24 100644 --- a/core/core-frontend/src/custom-component/picture/Attr.vue +++ b/core/core-frontend/src/custom-component/picture/Attr.vue @@ -50,6 +50,10 @@ async function upload(file) { }) } +const onStyleChange = () => { + snapshotStore.recordSnapshotCache() +} + const goFile = () => { files.value.click() } @@ -135,7 +139,7 @@ onBeforeUnmount(() => { - + { 重新上传 + + + + 适应组件 + 原始尺寸 + 等比适应 + + + @@ -265,4 +290,17 @@ onBeforeUnmount(() => { line-height: 22px; font-weight: 400; } + +.pic-adaptor { + margin: 8px 0 16px 0; + :deep(.ed-form-item__content) { + margin-top: 8px !important; + } +} + +.form-item-dark { + .ed-radio { + margin-right: 4px !important; + } +} diff --git a/core/core-frontend/src/custom-component/picture/Component.vue b/core/core-frontend/src/custom-component/picture/Component.vue index 025e37216c..cb1a13f241 100644 --- a/core/core-frontend/src/custom-component/picture/Component.vue +++ b/core/core-frontend/src/custom-component/picture/Component.vue @@ -36,7 +36,7 @@ const props = defineProps({ } }) -const { propValue } = toRefs(props) +const { propValue, element } = toRefs(props) const imageAdapter = computed(() => { const style = { @@ -44,6 +44,12 @@ const imageAdapter = computed(() => { width: '100%', height: '100%' } + if (element.value.style.adaptation === 'original') { + style.width = 'auto' + style.height = 'auto' + } else if (element.value.style.adaptation === 'equiratio') { + style.height = 'auto' + } return style as CSSProperties }) diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index cbb43c196f..19f6f606c5 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -112,6 +112,50 @@ function matrixAdaptor(componentItem) { } } +export function historyAdaptor( + canvasStyleResult, + canvasDataResult, + canvasInfo, + attachInfo, + canvasVersion +) { + //历史字段适配 + canvasStyleResult.component['seniorStyleSetting'] = + canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT) + const reportFilterInfo = canvasInfo.reportFilterInfo + canvasDataResult.forEach(componentItem => { + componentItem['canvasActive'] = false + // 定时报告过滤组件适配 如果当前是定时报告默认切有设置对应的过滤组件默认值，则替换过滤组件 + if ( + componentItem.component === 'VQuery' && + attachInfo.source === 'report' && + !!reportFilterInfo + ) { + componentItem.propValue.forEach((filterItem, index) => { + if (reportFilterInfo[filterItem.id]) { + componentItem.propValue[index] = JSON.parse(reportFilterInfo[filterItem.id].filterInfo) + } + }) + } + if (componentItem.component === 'Group') { + componentItem.expand = componentItem.expand || false + } + + if (componentItem.component === 'Picture') { + componentItem.style['adaptation'] = componentItem.style['adaptation'] || 'adaptation' + } + componentItem['maintainRadio'] = componentItem['maintainRadio'] || false + componentItem['aspectRatio'] = componentItem['aspectRatio'] || 1 + if (componentItem.component === 'UserView') { + componentItem.actionSelection = componentItem.actionSelection || deepCopy(ACTION_SELECTION) + } + // 2 为基础版本 此处需要增加仪表板矩阵密度 + if ((!canvasVersion || canvasVersion === 2) && canvasInfo.type === 'dashboard') { + matrixAdaptor(componentItem) + } + }) +} + export function initCanvasDataPrepare(dvId, busiFlag, callBack) { const copyFlag = busiFlag != null && busiFlag.includes('-copy') const busiFlagCustom = copyFlag ? busiFlag.split('-')[0] : busiFlag @@ -147,37 +191,10 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) { const canvasDataResult = JSON.parse(canvasInfo.componentData) const canvasStyleResult = JSON.parse(canvasInfo.canvasStyleData) const canvasViewInfoPreview = canvasInfo.canvasViewInfo + historyAdaptor(canvasStyleResult, canvasDataResult, canvasInfo, attachInfo, canvasVersion) //历史字段适配 canvasStyleResult.component['seniorStyleSetting'] = canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT) - const reportFilterInfo = canvasInfo.reportFilterInfo - canvasDataResult.forEach(componentItem => { - componentItem['canvasActive'] = false - // 定时报告过滤组件适配 如果当前是定时报告默认切有设置对应的过滤组件默认值，则替换过滤组件 - if ( - componentItem.component === 'VQuery' && - attachInfo.source === 'report' && - !!reportFilterInfo - ) { - componentItem.propValue.forEach((filterItem, index) => { - if (reportFilterInfo[filterItem.id]) { - componentItem.propValue[index] = JSON.parse(reportFilterInfo[filterItem.id].filterInfo) - } - }) - } - if (componentItem.component === 'Group') { - componentItem.expand = componentItem.expand || false - } - componentItem['maintainRadio'] = componentItem['maintainRadio'] || false - componentItem['aspectRatio'] = componentItem['aspectRatio'] || 1 - if (componentItem.component === 'UserView') { - componentItem.actionSelection = componentItem.actionSelection || deepCopy(ACTION_SELECTION) - } - // 2 为基础版本 此处需要增加仪表板矩阵密度 - if ((!canvasVersion || canvasVersion === 2) && canvasInfo.type === 'dashboard') { - matrixAdaptor(componentItem) - } - }) const curPreviewGap = dvInfo.type === 'dashboard' && canvasStyleResult['dashboard'].gap === 'yes' ? canvasStyleResult['dashboard'].gapSize