Merge pull request #10796 from dataease/pr@dev-v2@feat_picture-adaptor

feat(仪表板、数据大屏): 图片组件支持不同的组件适应方式

core/core-frontend/src/custom-component/component-list.ts

@@ -362,6 +362,7 @@ const list = [
       }
     },
     style: {
+      adaptation: 'adaptation',
       width: 300,
       height: 200
     },

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(() => {
             <img-view-dialog v-model="dialogVisible" :image-url="dialogImageUrl"></img-view-dialog>
           </el-col>
         </el-row>
-        <el-row style="margin-bottom: 16px">
+        <el-row>
           <span
             style="margin-top: 2px"
             v-if="!curComponent.propValue.url"
@@ -155,6 +159,27 @@ onBeforeUnmount(() => {
             重新上传
           </el-button>
         </el-row>
+        <el-row class="pic-adaptor">
+          <el-form-item
+            v-if="curComponent.style.adaptation"
+            class="form-item"
+            label="图片适应方式"
+            size="small"
+            :effect="themes"
+            :class="'form-item-' + themes"
+          >
+            <el-radio-group
+              size="small"
+              v-model="curComponent.style.adaptation"
+              @change="onStyleChange"
+              :effect="themes"
+            >
+              <el-radio label="adaptation" :effect="themes">适应组件</el-radio>
+              <el-radio label="original" :effect="themes">原始尺寸</el-radio>
+              <el-radio label="equiratio" :effect="themes">等比适应</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-row>
       </el-collapse-item>
     </CommonAttr>
   </div>
@@ -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;
+  }
+}
 </style>

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
 })
 

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