feat: 组件背景统一到仪表板层面设置

Co-authored-by: wangjiahao <1522128093@qq.com>

frontend/src/components/DeDrag/index.vue

@@ -20,19 +20,20 @@
     @mouseenter="enter"
     @mouseleave="leave"
   >
+    <edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" @boardSet="boardSet" />
+    <mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
+    <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
     <div
       :class="[
         {
           ['de-drag-active-inner']:enabled,
           [classNameMouseOn]: mouseOn || active
         },
-        className
+        className,
+        'main-background'
       ]"
       :style="mainSlotStyle"
     >
-      <edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" @boardSet="boardSet" />
-      <mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
-      <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
       <div
         v-for="(handlei, indexi) in actualHandles"
         :key="indexi"
@@ -59,6 +60,7 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
 
 export default {
   replace: true,
@@ -531,13 +533,18 @@ export default {
         width: this.computedMainSlotWidth,
         height: this.computedMainSlotHeight
       }
-      if (this.element.commonBackground && this.element.commonBackground.enable) {
+      if (this.element.commonBackground) {
-        if (this.element.commonBackground.backgroundType === 'innerImage') {
+        style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px'
-          style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
+        style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
-        } else if (this.element.commonBackground.backgroundType === 'outerImage') {
+        if (this.element.commonBackground.enable) {
-          style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
+          if (this.element.commonBackground.backgroundType === 'innerImage') {
+            style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
+          } else if (this.element.commonBackground.backgroundType === 'outerImage') {
+            style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
+          } else if (this.element.commonBackground.backgroundType === 'color') {
+            style['background-color'] = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
+          }
         }
-        style['background-size'] = `100% 100%`
       }
       return style
     },
@@ -1857,4 +1864,7 @@ export default {
 .de-drag-active-inner{
   outline: 1px solid #70c0ff;
 }
+  .main-background{
+    background-size: 100% 100% !important;
+  }
 </style>

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

@@ -49,6 +49,7 @@ import DeOutWidget from '@/components/dataease/DeOutWidget'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
 import CloseBar from '@/components/canvas/components/Editor/CloseBar'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
 
 export default {
   components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
@@ -94,13 +95,20 @@ export default {
         width: '100%',
         height: '100%'
       }
-      if (this.config.commonBackground && this.config.commonBackground.enable) {
+      if (this.config.commonBackground) {
-        if (this.config.commonBackground.backgroundType === 'innerImage') {
+        style['padding'] = (this.config.commonBackground.innerPadding || 0) + 'px'
-          style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat`
+        style['border-radius'] = (this.config.commonBackground.borderRadius || 0) + 'px'
-        } else if (this.config.commonBackground.backgroundType === 'outerImage') {
+        if (this.config.commonBackground.enable) {
-          style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat`
+          if (this.config.commonBackground.backgroundType === 'innerImage') {
+            style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat`
+          } else if (this.config.commonBackground.backgroundType === 'outerImage') {
+            style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat`
+          } else if (this.config.commonBackground.backgroundType === 'color') {
+            style['background-color'] = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha)
+          }
         }
         style['background-size'] = `100% 100%`
+        style['overflow'] = 'hidden'
       }
       return style
     },

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

@@ -14,7 +14,7 @@
           <el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
           <el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-link" @click.native="addTab">{{ $t('panel.add_tab') }}</el-dropdown-item>
           <el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-connection" @click.native="linkJumpSet">{{ $t('panel.setting_jump') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-full-screen" @click.native="boardSet">{{ $t('panel.setting_background') }}</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-magic-stick" @click.native="boardSet">{{ $t('panel.component_style') }}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>

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

@@ -1033,6 +1033,7 @@ export default {
   },
   methods: {
     boardSet(item) {
+      this.$emit('boardSet', item)
       this.boardSetVisible = true
     },
     changeStyleWithScale,

frontend/src/components/canvas/custom-component/DeFrame.vue

@@ -57,16 +57,8 @@ export default {
   created() {
   },
   mounted() {
-    this.init()
   },
   methods: {
-    init() {
-      const iframe = document.getElementById('iframe')
-      NProgress.start()
-      iframe.onload = function() {
-        NProgress.done()
-      }
-    }
 
   }
 }

frontend/src/components/canvas/custom-component/UserView.vue

@@ -263,6 +263,9 @@ export default {
     resultCount() {
       return this.canvasStyleData.panel.resultCount
     },
+    innerPadding() {
+      return this.element.commonBackground.innerPadding || 0
+    },
     ...mapState([
       'canvasStyleData',
       'nowPanelTrackInfo',
@@ -276,7 +279,12 @@ export default {
   },
 
   watch: {
-
+    'innerPadding': {
+      handler: function(val1, val2) {
+        this.resizeChart()
+      },
+      deep: true
+    },
     'cfilters': {
       handler: function(val1, val2) {
         if (isChange(val1, val2) && !this.isFirstLoad) {
@@ -303,9 +311,7 @@ export default {
         }
         // 如果gap有变化刷新
         if (this.preCanvasPanel && this.preCanvasPanel.gap !== newVal.panel.gap) {
-          this.chart.isPlugin
+          this.resizeChart()
-            ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
-            : this.$refs[this.element.propValue.id].chartResize()
         }
         this.preCanvasPanel = deepCopy(newVal.panel)
       },
@@ -315,15 +321,7 @@ export default {
     'hw': {
       handler(newVal, oldVla) {
         if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
-          if (this.chart.type === 'map') {
+          this.resizeChart()
-            this.destroyTimeMachine()
-            this.changeIndex++
-            this.chartResize(this.changeIndex)
-          } else {
-            this.chart.isPlugin
-              ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
-              : this.$refs[this.element.propValue.id].chartResize()
-          }
         }
       },
       deep: true
@@ -369,6 +367,17 @@ export default {
     }
   },
   methods: {
+    resizeChart() {
+      if (this.chart.type === 'map') {
+        this.destroyTimeMachine()
+        this.changeIndex++
+        this.chartResize(this.changeIndex)
+      } else {
+        this.chart.isPlugin
+          ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
+          : this.$refs[this.element.propValue.id].chartResize()
+      }
+    },
     bindPluginEvent() {
       bus.$on('plugin-chart-click', param => {
         param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)

frontend/src/components/canvas/custom-component/component-list.js

@@ -16,7 +16,7 @@ export const BASE_MOBILE_STYLE = {
   auxiliaryMatrix: true
 }
 
-// 公共背景
+// 组件仪表板样式
 export const COMMON_BACKGROUND = {
   enable: false,
   backgroundType: 'innerImage',
@@ -24,7 +24,8 @@ export const COMMON_BACKGROUND = {
   innerImage: null,
   outerImage: null,
   alpha: 100,
-  borderRadius: 5
+  borderRadius: 5,
+  innerPadding: 0
 }
 
 // 公共样式

frontend/src/lang/en.js

@@ -1390,6 +1390,10 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    inner_padding: 'Inner Padding',
+    board_radio: 'Board Radio',
+    background: 'Background',
+    component_style: 'component Style',
     web_set_tips: 'Some Websites Cannot Be Displayed Because Of Cross Domain Problems  ',
     repeat_params: 'Repeat Params Exist',
     enable_outer_param_set: 'Enable Outer Param Set',

frontend/src/lang/tw.js

@@ -1391,6 +1391,10 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    inner_padding: '内边距',
+    board_radio: '边框半径',
+    background: '背景',
+    component_style: '组件样式',
     web_set_tips: '部分网站可能存在跨域问题无法显示',
     repeat_params: '存在名称重复的参数',
     enable_outer_param_set: '启用外部参数设置',

frontend/src/lang/zh.js

@@ -1399,6 +1399,10 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    inner_padding: '内边距',
+    board_radio: '边框半径',
+    background: '背景',
+    component_style: '组件样式',
     web_set_tips: '部分网站可能存在跨域问题无法显示',
     repeat_params: '存在名称重复的参数',
     enable_outer_param_set: '启用外部参数设置',

frontend/src/views/background/index.vue

@@ -2,71 +2,98 @@
   <el-row>
     <el-row>
       <el-col :span="24">
-        <span style="font-weight:600;margin-right: 20px;font-size: 14px">{{ $t('panel.choose_background') }}</span>
+        <span style="font-weight:600;margin-right: 20px;font-size: 14px">{{ $t('panel.component_style') }}</span>
-        <el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('commons.enable') }}</el-checkbox>
-        <span style="color: #909399; font-size: 8px;margin-left: 3px">
-          Tips:{{ $t('panel.choose_background_tips') }}
-        </span>
       </el-col>
     </el-row>
     <el-row class="main-content" disabled="!curComponent.commonBackground.enable">
-      <!--      <el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">-->
+
-      <!--        <el-col :span="3" style="padding-left: 10px">-->
+      <el-row style="height: 50px;overflow: hidden">
-      <!--          <el-radio v-model="curComponent.commonBackground.backgroundType" label="color" @change="onChangeType">颜色</el-radio>-->
+        <el-col :span="3">
-      <!--        </el-col>-->
+          <span class="params-title">{{ $t('panel.inner_padding') }}</span>
-      <!--        <el-col :span="3">-->
-      <!--          <el-color-picker v-model="curComponent.commonBackground.color" class="color-picker-style" :predefine="predefineColors" />-->
-      <!--        </el-col>-->
-      <!--        <el-col :span="3" style="text-align: right;margin-top: 8px">-->
-      <!--          <span>不透明度：</span>-->
-      <!--        </el-col>-->
-      <!--        <el-col :span="9">-->
-      <!--          <el-slider v-model="curComponent.commonBackground.alpha" show-input :show-input-controls="false" input-size="mini" />-->
-      <!--        </el-col>-->
-      <!--      </el-row>-->
-      <el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">
-        <el-col :span="3" style="padding-left: 10px">
-          <el-radio v-model="curComponent.commonBackground.backgroundType" label="outerImage" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
         </el-col>
-        <el-col style="width: 130px!important;">
+        <el-col :span="15">
-          <el-upload
+          <el-slider v-model="curComponent.commonBackground.innerPadding" show-input :show-input-controls="false" input-size="mini" />
-            action=""
-            accept=".jpeg,.jpg,.png,.gif,.svg"
-            class="avatar-uploader"
-            list-type="picture-card"
-            :class="{disabled:uploadDisabled}"
-            :on-preview="handlePictureCardPreview"
-            :on-remove="handleRemove"
-            :http-request="upload"
-            :file-list="fileList"
-            :on-change="onChange"
-          >
-            <i class="el-icon-plus" />
-          </el-upload>
-          <el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="">
-          </el-dialog>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row style="height: 50px;overflow: hidden">
-        <el-col :span="3" style="padding-left: 10px">
+        <el-col :span="3">
-          <el-radio v-model="curComponent.commonBackground.backgroundType" label="innerImage" @change="onChangeType">边框</el-radio>
+          <span class="params-title">{{ $t('panel.board_radio') }}</span>
         </el-col>
-        <el-col :span="21" class="main-row">
+        <el-col :span="15">
-          <el-row v-for="(value, key) in BackgroundShowMap" :key="key">
+          <el-slider v-model="curComponent.commonBackground.borderRadius" show-input :show-input-controls="false" input-size="mini" />
-            <el-col :span="24"><span>{{ key }}</span> </el-col>
+        </el-col>
-            <el-col
+      </el-row>
-              v-for="item in value"
+
-              :key="item.id"
+      <el-row style="height: 50px">
-              :span="6"
+        <el-col :span="3" style="padding-left: 10px;padding-top: 5px">
+          <el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('panel.background') }}</el-checkbox>
+        </el-col>
+        <el-col :span="21">
+          <span style="color: #909399; font-size: 8px;margin-left: 3px;line-height: 30px">
+            Tips:{{ $t('panel.choose_background_tips') }}
+          </span>
+        </el-col>
+      </el-row>
+      <el-row v-if="curComponent.commonBackground.enable">
+        <el-row style="height: 40px;overflow: hidden">
+          <el-col :span="3" style="padding-left: 10px;padding-top: 5px">
+            <el-radio v-model="curComponent.commonBackground.backgroundType" label="color" @change="onChangeType">颜色</el-radio>
+          </el-col>
+          <el-col :span="1" style="padding-top: 5px">
+            <el-color-picker v-model="curComponent.commonBackground.color" size="mini" class="color-picker-style" :predefine="predefineColors" />
+          </el-col>
+          <el-col :span="3">
+            <span class="params-title-small">不透明度：</span>
+          </el-col>
+          <el-col :span="11">
+            <el-slider v-model="curComponent.commonBackground.alpha" show-input :show-input-controls="false" input-size="mini" />
+          </el-col>
+        </el-row>
+        <el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">
+          <el-col :span="3" style="padding-left: 10px">
+            <el-radio v-model="curComponent.commonBackground.backgroundType" label="outerImage" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
+          </el-col>
+          <el-col style="width: 130px!important;">
+            <el-upload
+              action=""
+              accept=".jpeg,.jpg,.png,.gif,.svg"
+              class="avatar-uploader"
+              list-type="picture-card"
+              :class="{disabled:uploadDisabled}"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :http-request="upload"
+              :file-list="fileList"
+              :on-change="onChange"
             >
-              <background-item
+              <i class="el-icon-plus" />
-                :template="item"
+            </el-upload>
-              />
+            <el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
-            </el-col>
+              <img width="100%" :src="dialogImageUrl" alt="">
-          </el-row>
+            </el-dialog>
-        </el-col>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="3" style="padding-left: 10px">
+            <el-radio v-model="curComponent.commonBackground.backgroundType" label="innerImage" @change="onChangeType">边框</el-radio>
+          </el-col>
+          <el-col :span="21" class="main-row">
+            <el-row v-for="(value, key) in BackgroundShowMap" :key="key">
+              <el-col :span="24"><span>{{ key }}</span> </el-col>
+              <el-col
+                v-for="item in value"
+                :key="item.id"
+                :span="6"
+              >
+                <background-item
+                  :template="item"
+                />
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
       </el-row>
+
     </el-row>
     <el-row class="root-class">
       <el-col :span="24">
@@ -178,7 +205,7 @@ export default {
   }
 
   .main-row{
-    height: 40vh;
+    height: 140px;
     overflow-y: auto;
   }
 
@@ -226,4 +253,17 @@ export default {
     border:1px solid #E6E6E6;
   }
 
+  .params-title{
+    font-weight: bold;
+    line-height: 40px;
+    margin-left: 10px;
+    font-size: 14px;
+  }
+
+  .params-title-small{
+    font-weight: bold;
+    line-height: 40px;
+    margin-left: 10px;
+    font-size: 12px;
+  }
 </style>

frontend/src/views/panel/edit/index.vue

@@ -393,6 +393,7 @@ export default {
   },
   data() {
     return {
+      asideToolType: 'none',
       outerParamsSetVisible: false,
       autoMoveOffSet: 15,
       mobileEditorShow: true,
@@ -460,14 +461,21 @@ export default {
     showAside() {
       return !this.linkageSettingStatus && !this.mobileLayoutStatus
     },
-    // 显示仪表板工具栏
-    showPanelToolsAside() {
-      return !this.curComponent
-    },
     // 显示视图工具栏
     showViewToolsAside() {
       return this.curComponent && this.curComponent.type === 'view'
     },
+    showViewToolAsideType() {
+      if (this.curComponent) {
+        if (this.curComponent.type === 'view') {
+          return 'view'
+        } else {
+          return 'publicSet'
+        }
+      } else {
+        return 'none'
+      }
+    },
     showAttr() {
       if (this.mobileLayoutStatus) {
         return false