center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #3136 from dataease/pr@dev@feat_threshold_between

Browse Source 
feat(视图): 阈值支持介于
This commit is contained in:
fit2cloud-chenyw 2022-09-21 14:35:25 +08:00 committed by GitHub
commit e568ef88ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 147 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/views/chart/chart/table/table-info.js
View File

@ -536,6 +536,13 @@ function mappingColor(value, defaultColor, field, type) {
color = t[type]
flag = true
}
} else if (t.term === 'between') {
const min = parseFloat(t.min)
const max = parseFloat(t.max)
if (min <= value && value <= max) {
color = t[type]
flag = true
}
}
if (flag) {
break

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

@ -243,6 +243,13 @@ export default {
this.label_content_class.color = t.color
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
flag = true
}
}
if (flag) {
break

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

@ -32,18 +32,22 @@
/>
<el-col style="padding: 0 18px;">
<el-row v-for="(item,index) in thresholdForm.labelThreshold" :key="index" class="line-style">
<el-col :span="8">
<el-col :span="6">
<span v-if="item.term === 'eq'" :title="$t('chart.filter_eq')">{{ $t('chart.filter_eq') }}</span>
<span v-else-if="item.term === 'not_eq'" :title="$t('chart.filter_not_eq')">{{ $t('chart.filter_not_eq') }}</span>
<span v-else-if="item.term === 'lt'" :title="$t('chart.filter_lt')">{{ $t('chart.filter_lt') }}</span>
<span v-else-if="item.term === 'gt'" :title="$t('chart.filter_gt')">{{ $t('chart.filter_gt') }}</span>
<span v-else-if="item.term === 'le'" :title="$t('chart.filter_le')">{{ $t('chart.filter_le') }}</span>
<span v-else-if="item.term === 'ge'" :title="$t('chart.filter_ge')">{{ $t('chart.filter_ge') }}</span>
<span v-else-if="item.term === 'between'" :title="$t('chart.filter_between')">{{ $t('chart.filter_between') }}</span>
</el-col>
<el-col :span="8">
<span :title="item.value">{{ item.value }}</span>
<el-col :span="12">
<span v-if="item.term !== 'between'" :title="item.value">{{ item.value }}</span>
<span v-if="item.term === 'between'">
{{ item.min }}&nbsp;≤{{ $t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
</span>
</el-col>
<el-col :span="8">
<el-col :span="6">
<span :style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}" />
</el-col>
</el-row>
@ -81,6 +85,7 @@
<span v-else-if="item.term === 'gt'" :title="$t('chart.filter_gt')">{{ $t('chart.filter_gt') }}</span>
<span v-else-if="item.term === 'le'" :title="$t('chart.filter_le')">{{ $t('chart.filter_le') }}</span>
<span v-else-if="item.term === 'ge'" :title="$t('chart.filter_ge')">{{ $t('chart.filter_ge') }}</span>
<span v-else-if="item.term === 'between'" :title="$t('chart.filter_between')">{{ $t('chart.filter_between') }}</span>
<span v-else-if="item.term === 'like'" :title="$t('chart.filter_like')">{{ $t('chart.filter_like') }}</span>
<span v-else-if="item.term === 'not like'" :title="$t('chart.filter_not_like')">{{ $t('chart.filter_not_like') }}</span>
<span v-else-if="item.term === 'null'" :title="$t('chart.filter_null')">{{ $t('chart.filter_null') }}</span>
@ -88,14 +93,17 @@
<span v-else-if="item.term === 'empty'" :title="$t('chart.filter_empty')">{{ $t('chart.filter_empty') }}</span>
<span v-else-if="item.term === 'not_empty'" :title="$t('chart.filter_not_empty')">{{ $t('chart.filter_not_empty') }}</span>
</el-col>
<el-col :span="6">
<span v-if="!item.term.includes('null') && !item.term.includes('empty')" :title="item.value">{{ item.value }}</span>
<el-col :span="10">
<span v-if="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'" :title="item.value">{{ item.value }}</span>
<span v-else-if="!item.term.includes('null') && !item.term.includes('empty') && item.term === 'between'">
{{ item.min }}&nbsp;≤{{ $t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
</span>
<span v-else>&nbsp;</span>
</el-col>
<el-col :span="6">
<el-col :span="4">
<span :title="$t('chart.textColor')" :style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}" />
</el-col>
<el-col :span="6">
<el-col :span="4">
<span :title="$t('chart.backgroundColor')" :style="{width:'14px', height:'14px', backgroundColor: item.backgroundColor, border: 'solid 1px #e1e4e8'}" />
</el-col>
</el-row>
@ -250,21 +258,40 @@ export default {
})
return
}
if (!ele.value) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if (parseFloat(ele.value).toString() === 'NaN') {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',
showClose: true
})
return
if (ele.term === 'between') {
if (!ele.min || !ele.max) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if (parseFloat(ele.min).toString() === 'NaN' || parseFloat(ele.max).toString() === 'NaN') {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',
showClose: true
})
return
}
} else {
if (!ele.value) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if (parseFloat(ele.value).toString() === 'NaN') {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',
showClose: true
})
return
}
}
}
this.thresholdForm.labelThreshold = JSON.parse(JSON.stringify(this.thresholdArr))
@ -314,21 +341,40 @@ export default {
})
return
}
if (!ele.term.includes('null') && !ele.term.includes('empty') && !ele.value) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if ((field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && parseFloat(ele.value).toString() === 'NaN') {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',
showClose: true
})
return
if (ele.term === 'between') {
if (!ele.term.includes('null') && !ele.term.includes('empty') && (!ele.min || !ele.max)) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if ((field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && (parseFloat(ele.min).toString() === 'NaN' || parseFloat(ele.max).toString() === 'NaN')) {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',
showClose: true
})
return
}
} else {
if (!ele.term.includes('null') && !ele.term.includes('empty') && !ele.value) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if ((field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && parseFloat(ele.value).toString() === 'NaN') {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',
showClose: true
})
return
}
}
}
}

28
frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
View File

@ -58,9 +58,9 @@
</el-option-group>
</el-select>
</el-col>
<el-col :span="8" style="text-align: center;">
<el-col :span="10" style="text-align: center;">
<el-input
v-show="!item.term.includes('null') && !item.term.includes('empty')"
v-show="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
v-model="item.value"
class="value-item"
:placeholder="$t('chart.drag_block_label_value')"
@ -68,6 +68,11 @@
clearable
@change="changeThreshold"
/>
<span v-if="item.term === 'between'">
<el-input v-model="item.min" class="between-item" :placeholder="$t('chart.axis_value_min')" size="mini" clearable @change="changeThreshold" />
<span style="margin: 0 4px;">≤{{ $t('chart.drag_block_label_value') }}≤</span>
<el-input v-model="item.max" class="between-item" :placeholder="$t('chart.axis_value_max')" size="mini" clearable @change="changeThreshold" />
</span>
</el-col>
<el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
<span class="color-title">{{ $t('chart.textColor') }}</span>
@ -89,7 +94,7 @@
@change="changeThreshold"
/>
</el-col>
<el-col :span="4">
<el-col :span="2">
<el-button
type="text"
icon="el-icon-delete"
@ -134,7 +139,9 @@ export default {
field: '0',
value: '',
color: '#ff0000ff',
backgroundColor: '#ffffffff'
backgroundColor: '#ffffffff',
min: '0',
max: '1'
},
textOptions: [
{
@ -230,6 +237,13 @@ export default {
value: 'ge',
label: this.$t('chart.filter_ge')
}]
},
{
label: '',
options: [{
value: 'between',
label: this.$t('chart.filter_between')
}]
}
],
predefineColors: COLOR_PANEL
@ -352,6 +366,12 @@ span {
display: inline-block;
}
.between-item {
position: relative;
display: inline-block;
width: 80px !important;
}
.select-item {
position: relative;
display: inline-block;

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

@ -19,13 +19,18 @@
</el-option-group>
</el-select>
</el-col>
<el-col :span="10" style="text-align: center;">
<el-input v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeThreshold" />
<el-col :span="14" style="text-align: center;">
<el-input v-if="item.term !== 'between'" v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeThreshold" />
<span v-if="item.term === 'between'">
<el-input v-model="item.min" class="between-item" :placeholder="$t('chart.axis_value_min')" size="mini" clearable @change="changeThreshold" />
<span style="margin: 0 4px;">≤{{ $t('chart.drag_block_label_value') }}≤</span>
<el-input v-model="item.max" class="between-item" :placeholder="$t('chart.axis_value_max')" size="mini" clearable @change="changeThreshold" />
</span>
</el-col>
<el-col :span="4" style="text-align: center;">
<el-col :span="2" style="text-align: center;">
<el-color-picker v-model="item.color" show-alpha class="color-picker-style" :predefine="predefineColors" @change="changeThreshold" />
</el-col>
<el-col :span="4">
<el-col :span="2">
<el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeThreshold(index)" />
</el-col>
</el-row>
@ -51,7 +56,9 @@ export default {
term: 'eq',
field: '0',
value: '0',
color: '#ff0000ff'
color: '#ff0000ff',
min: '0',
max: '1'
},
valueOptions: [
{
@ -83,6 +90,13 @@ export default {
value: 'ge',
label: this.$t('chart.filter_ge')
}]
},
{
label: '',
options: [{
value: 'between',
label: this.$t('chart.filter_between')
}]
}
],
predefineColors: COLOR_PANEL
@ -137,6 +151,12 @@ span {
width: 200px !important;
}
.between-item {
position: relative;
display: inline-block;
width: 100px !important;
}
.select-item {
position: relative;
display: inline-block;