From 541c9dba1f7557bdb9c379dbdbe20e1ffaaabac9 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 18 Nov 2022 18:58:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E7=B2=BE=E7=A1=AE?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/SettingMenu.vue  |  10 ++
 frontend/src/lang/en.js                       |   5 +
 frontend/src/lang/tw.js                       |   5 +
 frontend/src/lang/zh.js                       |   5 +
 frontend/src/store/index.js                   |  14 +-
 frontend/src/views/chart/view/ChartEdit.vue   | 149 +++++++++++-------
 .../src/views/chart/view/PositionAdjust.vue   |  92 +++++++++++
 frontend/src/views/panel/edit/index.vue       |   7 +-
 8 files changed, 223 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/views/chart/view/PositionAdjust.vue

diff --git a/frontend/src/components/canvas/components/editor/SettingMenu.vue b/frontend/src/components/canvas/components/editor/SettingMenu.vue
index 56d30a4e9c..c1c1ac35bd 100644
--- a/frontend/src/components/canvas/components/editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/editor/SettingMenu.vue
@@ -90,6 +90,13 @@
             <i class="icon iconfont icon-font icon-chaolianjie1" />
             {{ $t('panel.hyperlinks') }}
           </el-dropdown-item>
+          <el-dropdown-item
+            v-if="curComponent.type !== 'user-view' && !curComponent.auxiliaryMatrix"
+            @click.native="positionAdjust"
+          >
+            <i class="el-icon-map-location" />
+            {{ $t('panel.position_adjust') }}
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -213,6 +220,9 @@ export default {
         this.showCustomSort = false
       })
     },
+    positionAdjust() {
+      bus.$emit('change_panel_right_draw', true)
+    },
     edit() {
       if (this.curComponent.type === 'custom') {
         bus.$emit('component-dialog-edit', 'update')
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 4cc96873e4..1979ce85d2 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1875,6 +1875,11 @@ export default {
     back_parent: 'Back to previous'
   },
   panel: {
+    position_adjust: 'Position',
+    space_top: 'Top',
+    space_left: 'Left',
+    space_width: 'Widht',
+    space_height: 'Height',
     to_top: 'To Top',
     down: 'Down',
     mobile_style_setting: 'Style setting',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 1f265b98d2..4914de9835 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1875,6 +1875,11 @@ export default {
     back_parent: '返回上一級'
   },
   panel: {
+    position_adjust: '位置',
+    space_top: '上',
+    space_left: '左',
+    space_width: '寬',
+    space_height: '高',
     to_top: '置頂',
     down: '下載',
     mobile_style_setting: '樣式設置',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index f9c00523d5..88749cf7c9 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1875,6 +1875,11 @@ export default {
     back_parent: '返回上一级'
   },
   panel: {
+    position_adjust: '位置',
+    space_top: '上',
+    space_left: '左',
+    space_width: '宽',
+    space_height: '高',
     to_top: '置顶',
     down: '下载',
     mobile_style_setting: '样式设置',
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index f03e066752..64cbee8318 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -22,12 +22,10 @@ import layer from '@/components/canvas/store/layer'
 import snapshot from '@/components/canvas/store/snapshot'
 import lock from '@/components/canvas/store/lock'
 import task from './modules/task'
-import { valueValid, formatCondition } from '@/utils/conditionUtil'
+import { formatCondition, valueValid } from '@/utils/conditionUtil'
 import { Condition } from '@/components/widget/bean/Condition'
 
-import {
-  DEFAULT_COMMON_CANVAS_STYLE_STRING
-} from '@/views/panel/panel'
+import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import bus from '@/utils/bus'
 import { BASE_MOBILE_STYLE } from '@/components/canvas/customComponent/component-list'
 import { TYPE_CONFIGS } from '@/views/chart/chart/util'
@@ -236,10 +234,10 @@ const data = {
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) {
       const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
       if (curComponent) {
-        if (top || top === 0) curComponent.style.top = (top / curCanvasScaleSelf.scalePointHeight) + 0.0000001
-        if (left || left === 0) curComponent.style.left = (left / curCanvasScaleSelf.scalePointWidth) + 0.0000001
-        if (width || width === 0) curComponent.style.width = (width / curCanvasScaleSelf.scalePointWidth + 0.0000001)
-        if (height || height === 0) curComponent.style.height = (height / curCanvasScaleSelf.scalePointHeight) + 0.0000001
+        if (top || top === 0) curComponent.style.top = Math.round((top / curCanvasScaleSelf.scalePointHeight))
+        if (left || left === 0) curComponent.style.left = Math.round((left / curCanvasScaleSelf.scalePointWidth))
+        if (width || width === 0) curComponent.style.width = Math.round((width / curCanvasScaleSelf.scalePointWidth))
+        if (height || height === 0) curComponent.style.height = Math.round((height / curCanvasScaleSelf.scalePointHeight))
         if (rotate || rotate === 0) curComponent.style.rotate = rotate
       }
     },
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index bd78ac4b01..30ac660e0c 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -74,7 +74,9 @@
                 round
                 @click="changeDs"
               >
-                <span style="font-weight: bold">{{ $t('panel.template_view_tips') }}<i class="el-icon-refresh el-icon--right" /></span>
+                <span style="font-weight: bold">{{ $t('panel.template_view_tips') }}<i
+                  class="el-icon-refresh el-icon--right"
+                /></span>
               </el-button>
             </span>
           </div>
@@ -1107,6 +1109,16 @@
             </div>
           </el-row>
         </el-tab-pane>
+        <el-tab-pane
+          v-if="!curComponent.auxiliaryMatrix"
+          name="position"
+          :label="$t('panel.position_adjust')"
+          class="padding-tab"
+          style="width: 350px;"
+        >
+          <position-adjust />
+        </el-tab-pane>
+
       </el-tabs>
 
       <el-col
@@ -1235,12 +1247,14 @@
         <el-button
           size="mini"
           @click="closeRename()"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="saveRename"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -1262,12 +1276,14 @@
         <el-button
           size="mini"
           @click="closeQuotaFilter"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="saveQuotaFilter"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
     <el-dialog
@@ -1287,12 +1303,14 @@
         <el-button
           size="mini"
           @click="closeDimensionFilter"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="saveDimensionFilter"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
     <el-dialog
@@ -1315,12 +1333,14 @@
         <el-button
           size="mini"
           @click="closeResultFilter"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="saveResultFilter"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -1346,7 +1366,8 @@
         <el-button
           size="mini"
           @click="closeChangeChart"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
@@ -1382,7 +1403,8 @@
           size="mini"
           style="float: right;"
           @click="closeEditDsField"
-        >{{ $t('chart.close') }}</el-button>
+        >{{ $t('chart.close') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -1411,7 +1433,8 @@
           size="mini"
           style="float: right;"
           @click="closeEditChartField"
-        >{{ $t('chart.close') }}</el-button>
+        >{{ $t('chart.close') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -1436,12 +1459,14 @@
         <el-button
           size="mini"
           @click="closeQuotaEditCompare"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="saveQuotaEditCompare"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -1466,12 +1491,14 @@
         <el-button
           size="mini"
           @click="closeValueFormatter"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="saveValueFormatter"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -1498,12 +1525,14 @@
         <el-button
           size="mini"
           @click="closeCustomSort"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="saveCustomSort"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -1530,12 +1559,14 @@
         <el-button
           size="mini"
           @click="closeStackCustomSort"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="saveStackCustomSort"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -1562,10 +1593,11 @@
 <script>
 import {
   ajaxGetDataOnly,
-  post,
   getChartDetails,
-  viewEditSave,
-  resetViewCacheCallBack
+  pluginTypes,
+  post,
+  resetViewCacheCallBack,
+  viewEditSave
 } from '@/api/chart/chart'
 import DimensionItem from '../components/dragItem/DimensionItem'
 import QuotaItem from '../components/dragItem/QuotaItem'
@@ -1616,7 +1648,6 @@ import MapMapping from '@/views/chart/components/senior/MapMapping'
 import AssistLine from '@/views/chart/components/senior/AssistLine'
 import Threshold from '@/views/chart/components/senior/Threshold'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
-import { pluginTypes } from '@/api/chart/chart'
 import ValueFormatterEdit from '@/views/chart/components/valueFormatter/ValueFormatterEdit'
 import ChartStyle from '@/views/chart/view/ChartStyle'
 import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
@@ -1624,10 +1655,14 @@ import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
 import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
 import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
 import { equalsAny } from '@/utils/StringUtils'
+import MarginSelector from '@/views/chart/components/componentStyle/MarginSelector'
+import PositionAdjust from '@/views/chart/view/PositionAdjust'
 
 export default {
   name: 'ChartEdit',
   components: {
+    PositionAdjust,
+    MarginSelector,
     ScrollCfg,
     CalcChartFieldEdit,
     ChartFieldEdit,
@@ -1817,15 +1852,13 @@ export default {
       'allViewRender'
 
     ])
-    /* pluginRenderOptions() {
-      const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
-      const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
-        return { name: plugin.render, value: plugin.render }
-      })
-      return [...this.renderOptions, ...pluginOptions]
-    } */
   },
   watch: {
+    'curComponent.auxiliaryMatrix': function(val) {
+      if (val && this.tabActive === 'position') {
+        this.tabActive = 'data'
+      }
+    },
     'editStatus': function(val) {
       if (val && this.param.id !== this.preChartId) {
         this.preChartId = this.param.id
@@ -2237,7 +2270,8 @@ export default {
       if (!view) return
       viewEditSave(this.panelInfo.id, view).then(() => {
         // this.getData(this.param.id)
-        bus.$emit('view-in-cache', { type: 'propChange',
+        bus.$emit('view-in-cache', {
+          type: 'propChange',
           viewId: this.param.id,
           view: view
         })
@@ -2270,7 +2304,12 @@ export default {
       viewEditSave(this.panelInfo.id, viewSave)
 
       if (modifyName === 'color') {
-        bus.$emit('view-in-cache', { type: 'styleChange', viewId: this.view.id, viewInfo: view, refreshProp: 'customAttr' })
+        bus.$emit('view-in-cache', {
+          type: 'styleChange',
+          viewId: this.view.id,
+          viewInfo: view,
+          refreshProp: 'customAttr'
+        })
       } else {
         bus.$emit('view-in-cache', { type: 'styleChange', viewId: this.view.id, viewInfo: view })
       }
@@ -2993,7 +3032,10 @@ export default {
         const current = this.$refs.dynamicChart
         this.setDetailMapCode(null)
         if (this.view.isPlugin) {
-          current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
+          current && current.callPluginInner && current.callPluginInner({
+            methodName: 'registerDynamicMap',
+            methodParam: null
+          })
         } else {
           current && current.registerDynamicMap && current.registerDynamicMap(null)
         }
@@ -3299,7 +3341,7 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .padding-lr {
   padding: 0 6px;
 }
@@ -3333,13 +3375,13 @@ export default {
 .view-panel-Mask {
   display: flex;
   height: calc(100vh - 80px);
-  background-color: rgba(92,94,97, 0.7);
-  position:absolute;
-  top:0px;
+  background-color: rgba(92, 94, 97, 0.7);
+  position: absolute;
+  top: 0px;
   left: 0px;
   width: 350px;
   z-index: 2;
-  cursor:not-allowed;
+  cursor: not-allowed;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3676,8 +3718,8 @@ span {
   width: 100px !important;
 }
 
-::v-deep .el-slider__runway.show-input{
-  width: 80px!important;
+::v-deep .el-slider__runway.show-input {
+  width: 80px !important;
 }
 
 .no-senior {
@@ -3690,15 +3732,16 @@ span {
   height: 100%;
 }
 
-.form-item-slider::v-deep.el-form-item__label{
+.form-item-slider::v-deep.el-form-item__label {
   font-size: 12px;
   line-height: 38px;
 }
-.form-item::v-deep.el-form-item__label{
+
+.form-item::v-deep.el-form-item__label {
   font-size: 12px;
 }
 
-.field-name{
+.field-name {
   display: inline-block;
   width: 90px;
   word-break: break-all;
@@ -3709,7 +3752,7 @@ span {
   top: 2px;
 }
 
-.field-setting{
+.field-setting {
   position: absolute;
   right: 8px;
 }
@@ -3722,19 +3765,19 @@ span {
   visibility: visible;
 }
 
-.field-split{
+.field-split {
   height: calc(100% - 40px);
 }
 
-.field-split ::v-deep .fu-split-pane__left{
-  padding-right: 0!important;
+.field-split ::v-deep .fu-split-pane__left {
+  padding-right: 0 !important;
 }
 
-.field-split ::v-deep .fu-split-pane__right{
-  padding-left: 0!important;
+.field-split ::v-deep .fu-split-pane__right {
+  padding-left: 0 !important;
 }
 
-.view-panel-row ::v-deep .el-collapse-item__header{
+.view-panel-row ::v-deep .el-collapse-item__header {
   height: 34px !important;
   line-height: 34px !important;
   padding: 0 0 0 6px !important;
@@ -3742,14 +3785,14 @@ span {
   font-weight: 400 !important;
 }
 
-.data-area-label{
+.data-area-label {
   text-align: left;
   position: relative;
   width: 100%;
   display: inline-block;
 }
 
-.data-area-clear{
+.data-area-clear {
   position: absolute;
   top: 4px;
   right: 6px;
diff --git a/frontend/src/views/chart/view/PositionAdjust.vue b/frontend/src/views/chart/view/PositionAdjust.vue
new file mode 100644
index 0000000000..6452daaabc
--- /dev/null
+++ b/frontend/src/views/chart/view/PositionAdjust.vue
@@ -0,0 +1,92 @@
+<template>
+  <div style="width: 100%;padding: 10px;">
+    <el-col>
+      <el-form
+        label-width="40px"
+        size="mini"
+      >
+        <el-form-item
+          :label="$t('panel.space_top')"
+          class="form-item"
+          prop="marginTop"
+        >
+          <el-input
+            v-model="styleInfo.top"
+            type="number"
+            :min="0"
+            class="hide-icon-number"
+          >
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('panel.space_left')"
+          :min="0"
+          class="form-item"
+          prop="marginTop"
+        >
+          <el-input
+            v-model="styleInfo.left"
+            type="number"
+            :min="0"
+            class="hide-icon-number"
+          >
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('panel.space_width')"
+          :min="0"
+          class="form-item"
+          prop="marginTop"
+        >
+          <el-input
+            v-model="styleInfo.width"
+            type="number"
+            class="hide-icon-number"
+          >
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('panel.space_height')"
+          :min="0"
+          class="form-item"
+          prop="marginTop"
+        >
+          <el-input
+            v-model="styleInfo.height"
+            type="number"
+            class="hide-icon-number"
+          >
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PositionAdjust',
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {
+    styleInfo() {
+      return this.$store.state.curComponent.style
+    }
+  },
+  watch: {},
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 5d4f1914a5..1634189267 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -283,11 +283,10 @@
                 @click="changeRightDrawOpen(false)"
               />
             </el-tooltip>
+            <span style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px">{{ $t('panel.position_adjust') }}</span>
           </el-row>
           <el-row>
-            <div class="view-selected-message-class">
-              <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.select_view') }}</span>
-            </div>
+            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix" />
           </el-row>
         </div>
       </div>
@@ -526,10 +525,12 @@ import DeCanvas from '@/components/canvas/DeCanvas'
 import TextAttr from '@/components/canvas/components/TextAttr'
 import { userLoginInfo } from '@/api/systemInfo/userLogin'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
+import PositionAdjust from '@/views/chart/view/PositionAdjust'
 
 export default {
   name: 'PanelEdit',
   components: {
+    PositionAdjust,
     TextAttr,
     DeCanvas,
     Multiplexing,