Merge pull request #3755 from dataease/pr@dev@refactor_component-board

refactor(仪表板): 优化组件边框设置，设置时加上当前仪表板背景和和组件颜色

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

@@ -348,7 +348,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  width: 100% !important;
-  height: 100%;
+  height: 100% !important;
 }
 </style>

frontend/src/components/deDrag/index.vue

@@ -2120,8 +2120,8 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  width: 100% !important;
-  height: 100%;
+  height: 100% !important;
 }
 
 .drag-on-tab-collision {

frontend/src/views/background/BackgroundItem.vue

@@ -7,6 +7,7 @@
         },
         'template-img'
       ]"
+      :style="itemStyle"
       @click.stop="setBoard"
     >
       <svg-icon
@@ -22,6 +23,7 @@
 <script>
 import { mapState } from 'vuex'
 import { imgUrlTrans } from '@/components/canvas/utils/utils'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
 
 export default {
   name: 'BackgroundItem',
@@ -34,6 +36,15 @@ export default {
     }
   },
   computed: {
+    itemStyle() {
+      if (this.curComponent.commonBackground.backgroundColorSelect) {
+        return {
+          'background-color': hexColorToRGBA(this.curComponent.commonBackground.color, this.curComponent.commonBackground.alpha)
+        }
+      } else {
+        return {}
+      }
+    },
     mainIconClass() {
       return this.template.url.replace('board/', '').replace('.svg', '')
     },
@@ -64,72 +75,73 @@ export default {
 
 <style scoped>
 
-  .testcase-template {
+.testcase-template {
-    display: inline-block;
+  display: inline-block;
-    margin: 10px 0px;
+  margin: 10px 0px;
-    width: 90px;
+  width: 90px;
-  }
+}
 
-  .demonstration {
+.demonstration {
-    display: block;
+  display: block;
-    font-size: 8px;
+  font-size: 8px;
-    color: gray;
+  color: gray;
-    text-align: center;
+  text-align: center;
-    margin: 10px auto;
+  margin: 10px auto;
-    width: 130px;
+  width: 130px;
-    white-space:nowrap;
+  white-space: nowrap;
-    overflow:hidden;
+  overflow: hidden;
-    text-overflow:ellipsis;
+  text-overflow: ellipsis;
-  }
+}
 
-  .template-img {
+.template-img {
-    position: relative;
+  position: relative;
-    height: 80px;
+  height: 80px;
-    width: 130px;
+  width: 130px;
-    margin: 0 auto;
+  margin: 0 auto;
-    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+  /*box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);*/
-    border: solid 2px #fff;
+  /*border: solid px #fff;*/
-    box-sizing: border-box;
+  box-sizing: border-box;
-    border-radius: 3px;
+  border-radius: 3px;
-  }
+}
 
-  .template-img:hover {
+.template-img:hover {
-    border: solid 1px #4b8fdf;
+  border: solid 1px #4b8fdf;
-    border-radius: 3px;
+  border-radius: 3px;
-    color: deepskyblue;
+  color: deepskyblue;
-    cursor: pointer;
+  cursor: pointer;
-  }
+}
 
-  .template-img > i{
+.template-img > i {
-    display:none;
+  display: none;
-    float: right;
+  float: right;
-    color: gray;
+  color: gray;
-    margin: 2px;
+  margin: 2px;
-  }
+}
 
-  .template-img > i:hover {
+.template-img > i:hover {
-    color: red;
+  color: red;
-  }
+}
 
-  .template-img:hover > .el-icon-error {
+.template-img:hover > .el-icon-error {
-    display: inline;
+  display: inline;
-  }
+}
 
-  .template-img:hover > .el-icon-edit {
+.template-img:hover > .el-icon-edit {
-    display: inline;
+  display: inline;
-  }
+}
 
-  .template-img-active {
+.template-img-active {
-    border: solid 1px red;
+  border: solid 1px red;
-    border-radius: 3px;
+  border-radius: 3px;
-    color: deepskyblue;
+  color: deepskyblue;
-  }
+}
-  .svg-background {
+
-    position: absolute;
+.svg-background {
-    top: 0;
+  position: absolute;
-    left: 0;
+  top: 0;
-    width: 100%;
+  left: 0;
-    height: 100%;
+  width: 100% !important;
-  }
+  height: 100% !important;
+}
 
 </style>

frontend/src/views/background/index.vue

@@ -150,6 +150,7 @@
           </el-col>
           <el-col
             :span="20"
+            :style="customStyle"
             class="main-row"
           >
             <el-row
@@ -163,6 +164,7 @@
                 :span="6"
               >
                 <background-item
+                  :style="itemStyle"
                   :template="item"
                 />
               </el-col>
@@ -278,8 +280,29 @@ export default {
     }
   },
   computed: {
+    customStyle() {
+      let style = {}
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+          style = {
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
+            ...style
+          }
+        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+          style = {
+            background: this.canvasStyleData.panel.color,
+            ...style
+          }
+        }
+      }
+      if (!style.background) {
+        style.background = '#FFFFFF'
+      }
+      return style
+    },
     ...mapState([
       'curComponent',
+      'canvasStyleData',
       'componentData'
     ]),
     isFilterComponent() {
@@ -353,6 +376,7 @@ export default {
 }
 
 .main-row {
+  padding-left: 10px;
   height: 140px;
   overflow-y: auto;
 }

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

@@ -163,7 +163,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  width: 100% !important;
-  height: 100%;
+  height: 100% !important;
 }
 </style>