refator: 批量样式设置显示优化

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -82,6 +82,7 @@ import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
 import bus from '@/utils/bus'
 import { buildFilterMap } from '@/utils/conditionUtil'
+import { hasDataPermission } from '@/utils/permission'
 export default {
   components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar },
   model: {
@@ -176,7 +177,7 @@ export default {
     showUnpublishedArea() {
       // return this.panelInfo.status === 'unpublished'
       if (this.mainActiveName === 'PanelMain' && this.activeTab === 'PanelList') {
-        return this.panelInfo.status === 'unpublished' && this.panelInfo.privileges.indexOf('manage') === -1
+        return this.panelInfo.status === 'unpublished' && !hasDataPermission('manage', this.panelInfo.privileges)
       } else {
         return this.panelInfo.status === 'unpublished'
       }
@@ -270,12 +271,15 @@ export default {
     this._isMobile()
     const _this = this
     const erd = elementResizeDetectorMaker()
+    const canvasMain = document.getElementById('canvasInfoMain')
     // 监听主div变动事件
-    erd.listenTo(document.getElementById('canvasInfoMain'), element => {
-      _this.$nextTick(() => {
-        _this.restore()
+    if (canvasMain) {
+      erd.listenTo(canvasMain, element => {
+        _this.$nextTick(() => {
+          _this.restore()
+        })
       })
-    })
+    }
     // 监听画布div变动事件
     const tempCanvas = document.getElementById('canvasInfoTemp')
     if (tempCanvas) {

frontend/src/views/chart/chart/util.js

@@ -468,7 +468,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position'
+        'position-v'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -540,7 +540,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position'
+        'position-v'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -605,7 +605,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position'
+        'position-v'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -670,7 +670,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position'
+        'position-h'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -743,7 +743,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position'
+        'position-h'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -815,7 +815,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position'
+        'position-pie'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -866,7 +866,8 @@ export const TYPE_CONFIGS = [
       'label-selector-ant-v': [
         'show',
         'fontSize',
-        'color'
+        'color',
+        'position-pie'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -919,7 +920,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position'
+        'position-v'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -1113,7 +1114,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position'
+        'position-h'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -1308,7 +1309,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-v',
         'formatter',
         'gaugeFormatter'
       ],
@@ -1512,7 +1513,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-v',
         'formatter'
       ],
       'tooltip-selector': [
@@ -1594,7 +1595,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-v',
         'formatter'
       ],
       'tooltip-selector': [
@@ -1668,7 +1669,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-v',
         'formatter'
       ],
       'tooltip-selector': [
@@ -1742,7 +1743,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-h',
         'formatter'
       ],
       'tooltip-selector': [
@@ -1817,7 +1818,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-h',
         'formatter'
       ],
       'tooltip-selector': [
@@ -1892,7 +1893,7 @@ export const TYPE_CONFIGS = [
         'labelLine',
         'fontSize',
         'color',
-        'position',
+        'position-v',
         'formatter'
       ],
       'tooltip-selector': [
@@ -1951,7 +1952,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-pie',
         'formatter'
       ],
       'tooltip-selector': [
@@ -2009,7 +2010,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-v',
         'formatter'
       ],
       'tooltip-selector': [
@@ -2123,7 +2124,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-v',
         'formatter'
       ],
       'tooltip-selector': [
@@ -2193,7 +2194,7 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
+        'position-h',
         'formatter'
       ],
       'tooltip-selector': [
@@ -2249,7 +2250,6 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position',
         'formatter'
       ],
       'tooltip-selector': [

frontend/src/views/chart/components/shape-attr/LabelSelector.vue

@@ -17,9 +17,19 @@
           <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
             <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
           </el-form-item>
-          <el-form-item v-show="showProperty('position') && chart.type !== 'map'" :label="$t('chart.label_position')" class="form-item">
+          <el-form-item v-show="showProperty('position-pie') " :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
-              <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
+              <el-option v-for="option in labelPositionPie" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('position-h') " :label="$t('chart.label_position')" class="form-item">
+            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
+              <el-option v-for="option in labelPositionH" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('position-v') " :label="$t('chart.label_position')" class="form-item">
+            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
+              <el-option v-for="option in labelPositionV" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
           <el-form-item v-show="showProperty('formatter')" class="form-item">

frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue

@@ -14,9 +14,19 @@
           <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
             <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
           </el-form-item>
-          <el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
+          <el-form-item v-show="showProperty('position-v')" :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
-              <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
+              <el-option v-for="option in labelPositionV" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('position-pie')" :label="$t('chart.label_position')" class="form-item">
+            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
+              <el-option v-for="option in labelPositionPie" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('position-h')" :label="$t('chart.label_position')" class="form-item">
+            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
+              <el-option v-for="option in labelPositionH" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
         </div>

frontend/src/views/chart/view/ChartStyleBatchSet.vue

@@ -82,10 +82,10 @@ export default {
       this.batchOptChange('customStyle', 'xAxis', val)
     },
     onChangeYAxisForm(val) {
-      this.batchOptChange('customStyle', 'xAxis', val)
+      this.batchOptChange('customStyle', 'yAxis', val)
     },
     onChangeYAxisExtForm(val) {
-      this.batchOptChange('customStyle', 'yAxis', val)
+      this.batchOptChange('customStyle', 'yAxisExt', val)
     },
     onChangeSplitForm(val) {
       this.batchOptChange('customStyle', 'split', val)