Merge pull request #6599 from ulleo/dev

feat: 指标卡通过阈值的方式设置背景色

core/frontend/src/views/chart/components/normal/LabelNormal.vue

@@ -171,6 +171,8 @@ export default {
           // color threshold
           this.colorThreshold(customAttr.color.quotaColor)
         }
+        // 设置背景
+        this.colorThreshold(null, true)
         if (customAttr.size) {
           this.dimensionShow = customAttr.size.dimensionShow
           this.quotaShow = customAttr.size.quotaShow
@@ -201,6 +203,7 @@ export default {
       }
       if (this.chart.customStyle) {
         const customStyle = JSON.parse(this.chart.customStyle)
+        console.log(customStyle)
         if (customStyle.text) {
           this.title_show = customStyle.text.show
           this.title_class.fontSize = customStyle.text.fontSize + 'px'
@@ -214,7 +217,9 @@ export default {
           this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
-          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          // 没有这个设置，不用管
+          this.colorThreshold(hexColorToRGBA(customStyle.background.color, customStyle.background.alpha), true)
+          // this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
         }
       }
     },
@@ -223,7 +228,8 @@ export default {
       this.calcHeight()
     },
 
-    colorThreshold(valueColor) {
+    colorThreshold(valueColor, setBg) {
+      console.log(valueColor, setBg)
       if (this.chart.senior) {
         const senior = JSON.parse(this.chart.senior)
         if (senior.threshold && senior.threshold.labelThreshold && senior.threshold.labelThreshold.length > 0) {
@@ -232,52 +238,89 @@ export default {
             let flag = false
             const t = senior.threshold.labelThreshold[i]
             const tv = parseFloat(t.value)
+            console.log(t)
             if (t.term === 'eq') {
               if (value === tv) {
+                if (!setBg) {
                   this.label_content_class.color = t.color
+                } else {
+                  this.bg_class.background = t.backgroundColor ? t.backgroundColor : valueColor
+                }
                 flag = true
               }
             } else if (t.term === 'not_eq') {
               if (value !== tv) {
+                if (!setBg) {
                   this.label_content_class.color = t.color
+                } else {
+                  this.bg_class.background = t.backgroundColor ? t.backgroundColor : valueColor
+                }
                 flag = true
               }
             } else if (t.term === 'lt') {
               if (value < tv) {
+                if (!setBg) {
                   this.label_content_class.color = t.color
+                } else {
+                  this.bg_class.background = t.backgroundColor ? t.backgroundColor : valueColor
+                }
                 flag = true
               }
             } else if (t.term === 'gt') {
               if (value > tv) {
+                if (!setBg) {
                   this.label_content_class.color = t.color
+                } else {
+                  this.bg_class.background = t.backgroundColor ? t.backgroundColor : valueColor
+                }
                 flag = true
               }
             } else if (t.term === 'le') {
               if (value <= tv) {
+                if (!setBg) {
                   this.label_content_class.color = t.color
+                } else {
+                  this.bg_class.background = t.backgroundColor ? t.backgroundColor : valueColor
+                }
                 flag = true
               }
             } else if (t.term === 'ge') {
               if (value >= tv) {
+                if (!setBg) {
                   this.label_content_class.color = t.color
+                } else {
+                  this.bg_class.background = t.backgroundColor ? t.backgroundColor : valueColor
+                }
                 flag = true
               }
             } else if (t.term === 'between') {
               const min = parseFloat(t.min)
               const max = parseFloat(t.max)
               if (min <= value && value <= max) {
+                if (!setBg) {
                   this.label_content_class.color = t.color
+                } else {
+                  this.bg_class.background = t.backgroundColor ? t.backgroundColor : valueColor
+                }
                 flag = true
               }
             }
             if (flag) {
               break
             } else if (i === senior.threshold.labelThreshold.length - 1) {
+              if (!setBg) {
                 this.label_content_class.color = valueColor
+              } else {
+                this.bg_class.background = valueColor
+              }
             }
           }
         } else {
+          if (!setBg) {
             this.label_content_class.color = valueColor
+          } else {
+            this.bg_class.background = valueColor
+          }
         }
       }
     },

core/frontend/src/views/chart/components/senior/Threshold.vue

@@ -196,9 +196,18 @@
                 {{ item.min }} ≤{{ $t('chart.drag_block_label_value') }}≤ {{ item.max }}
               </span>
             </el-col>
-            <el-col :span="6">
+            <el-col
+              :span="3"
+              :title="$t('chart.textColor')"
+            >
               <span :style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}" />
             </el-col>
+            <el-col
+              :span="3"
+              :title="$t('chart.backgroundColor')"
+            >
+              <span :style="{width:'14px', height:'14px', backgroundColor: item.backgroundColor, border: 'solid 1px #e1e4e8'}" />
+            </el-col>
           </el-row>
         </el-col>
       </el-col>

core/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue

@@ -34,7 +34,7 @@
           </el-select>
         </el-col>
         <el-col
-          :span="14"
+          :span="12"
           style="text-align: center;"
         >
           <el-input
@@ -72,6 +72,20 @@
         >
           <el-color-picker
             v-model="item.color"
+            :title="$t('chart.textColor')"
+            show-alpha
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeThreshold"
+          />
+        </el-col>
+        <el-col
+          :span="2"
+          style="text-align: center;"
+        >
+          <el-color-picker
+            v-model="item.backgroundColor"
+            :title="$t('chart.backgroundColor')"
             show-alpha
             class="color-picker-style"
             :predefine="predefineColors"