Merge pull request #3802 from dataease/pr@dev@feat_component-position-adjuest

feat(仪表板): 悬浮组件支持精确位置调整
2022-11-21 10:20:18 +08:00 · 2022-11-21 10:20:18 +08:00 · b560f04976
commit b560f04976
parent f29a905fbe 541c9dba1f
8 changed files with 223 additions and 64 deletions
--- 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')
--- 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',
--- 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: '樣式設置',
--- 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: '样式设置',
--- 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
      }
    },
--- 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;
--- a/frontend/src/views/chart/view/PositionAdjust.vue
+++ 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>
--- 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,