dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6599 from ulleo/dev

Browse Source 
feat: 指标卡通过阈值的方式设置背景色
This commit is contained in:
ulleo 2023-11-08 16:44:24 +08:00 committed by GitHub
commit c110087e72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
core/frontend/src/views/chart/components/normal/LabelNormal.vue
View File

@ -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) {
this.label_content_class.color = t.color
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) {
this.label_content_class.color = t.color
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) {
this.label_content_class.color = t.color
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) {
this.label_content_class.color = t.color
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) {
this.label_content_class.color = t.color
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) {
this.label_content_class.color = t.color
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) {
this.label_content_class.color = t.color
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) {
this.label_content_class.color = valueColor
if (!setBg) {
this.label_content_class.color = valueColor
} else {
this.bg_class.background = valueColor
}
}
}
} else {
this.label_content_class.color = valueColor
if (!setBg) {
this.label_content_class.color = valueColor
} else {
this.bg_class.background = valueColor
}
}
}
},

11
core/frontend/src/views/chart/components/senior/Threshold.vue
View File

@ -196,9 +196,18 @@
{{ item.min }}&nbsp;≤{{ $t('chart.drag_block_label_value') }}≤&nbsp;{{ 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>

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

@ -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"