Merge pull request #972 from dataease/pr@dev@refactor_panel-view

refactor:仪表板视图详情背景优化，跟随仪表板背景

frontend/src/components/canvas/components/TextAttr.vue

@@ -17,7 +17,6 @@
         </el-radio-group>
       </div>
       <el-tooltip :content="$t('panel.fontSize')">
-
         <i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
       </el-tooltip>
 
@@ -123,6 +122,17 @@ export default {
           tooltip: this.$t('panel.text_align_right'),
           label: 'right'
         }
+      ],
+      'v-text': [
+        'textAlign',
+        'fontSize',
+        'fontWeight',
+        'letterSpacing',
+        'opacity',
+        'borderRadius',
+        'color',
+        'backgroundColor',
+        'hyperlinks'
       ] }
   },
   watch: {
@@ -140,6 +150,9 @@ export default {
     // console.log('mainWidthOffset:' + this.mainWidthOffset)
   },
   computed: {
+    attrShow(attr) {
+      return style
+    },
     letterDivColor() {
       const style = {
         height: '2px',

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

@@ -1,6 +1,6 @@
 <template>
   <de-container>
-    <de-aside-container v-if="!chart.type.includes('table')">
+    <de-aside-container v-if="!chart.type.includes('table')" :style="customStyle">
       <chart-component v-if="!chart.type.includes('text')" class="chart-class" :chart="chart" />
       <label-normal v-if="chart.type.includes('text')" :chart="chart" class="table-class" />
     </de-aside-container>
@@ -19,6 +19,7 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import { export_json_to_excel } from '@/plugins/Export2Excel'
+import { mapState } from 'vuex'
 
 export default {
   name: 'UserView',
@@ -38,6 +39,32 @@ export default {
       refId: null
     }
   },
+  computed: {
+    customStyle() {
+      let style = {
+      }
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+          style = {
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            ...style
+          }
+        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+          style = {
+            background: this.canvasStyleData.panel.color,
+            ...style
+          }
+        }
+      }
+      return style
+    },
+    ...mapState([
+      'isClickComponent',
+      'curComponent',
+      'componentData',
+      'canvasStyleData'
+    ])
+  },
   methods: {
     exportExcel() {
       const excelHeader = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.name)