Merge pull request #7997 from dataease/pr@dev-v2@feat_component-radio

feat(数据大屏): 组件的宽高增加宽高比例锁定功能，可以等比放大缩小

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -608,6 +608,7 @@ const handleMouseDownOnPoint = (point, e) => {
   let isFirst = true
 
   const needLockProportion = isNeedLockProportion()
+  const originRadio = curComponent.value.style.width / curComponent.value.style.height
   const move = moveEvent => {
     // 第一次点击时也会触发 move，所以会有“刚点击组件但未移动，组件的大小却改变了”的情况发生
     // 因此第一次点击时不触发 move 事件
@@ -628,6 +629,25 @@ const handleMouseDownOnPoint = (point, e) => {
     })
     //Temp dataV坐标偏移
     offsetDataVAdaptor(style, point)
+    // 保持宽搞比例调整
+    if (curComponent.value.maintainRadio) {
+      // 高度偏移量
+      const heightOffset = style.height - defaultStyle.value.height
+      // 宽度偏移量
+      const widthOffset = style.width - defaultStyle.value.width
+      // 保持宽高比例是相对宽度偏移量
+      const adaptorWidthOffset = heightOffset * originRadio
+      // 保持宽高比例是相对高度偏移量
+      const adaptorHeightOffset = widthOffset / originRadio
+      if (Math.abs(widthOffset) > Math.abs(adaptorWidthOffset)) {
+        // 调整高度
+        style.height = defaultStyle.value.height + adaptorHeightOffset
+      } else {
+        // 调整宽度
+        style.width = defaultStyle.value.width + adaptorWidthOffset
+      }
+    }
+
     dvMainStore.setShapeStyle(style)
     // 矩阵逻辑 如果当前是仪表板（矩阵模式）则要进行矩阵重排
     dashboardActive.value && emit('onResizing', moveEvent)

core/core-frontend/src/components/visualization/common/ComponentPosition.vue

@@ -17,6 +17,17 @@
         </el-form-item>
       </el-col>
     </el-row>
+    <el-form-item class="form-item" :class="'form-item-' + themes">
+      <el-checkbox
+        v-if="curComponent"
+        size="small"
+        :effect="themes"
+        v-model="curComponent['maintainRadio']"
+        @change="maintainRadioChange"
+      >
+        保持宽高比
+      </el-checkbox>
+    </el-form-item>
   </el-form>
 </template>
 
@@ -84,6 +95,10 @@ const onPositionChange = key => {
   snapshotStore.recordSnapshotCache()
 }
 
+const maintainRadioChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
 const positionInit = () => {
   if (curComponent.value) {
     Object.keys(positionMounted.value).forEach(key => {

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

@@ -58,6 +58,7 @@ export const commonAttr = {
   events: {},
   groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
   isLock: false, // 是否锁定组件
+  maintainRadio: false, // 布局时保持宽高比例
   isShow: true, // 是否显示组件
   collapseName: ['position', 'background', 'style', 'picture'], // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
   linkage: {

core/core-frontend/src/utils/canvasUtils.ts

@@ -115,6 +115,7 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
       if (componentItem.component === 'Group') {
         componentItem.expand = componentItem.expand || false
       }
+      componentItem['maintainRadio'] = componentItem['maintainRadio'] || false
     })
     const curPreviewGap =
       dvInfo.type === 'dashboard' && canvasStyleResult['dashboard'].gap === 'yes'