feat: 仪表板 添加 min max
This commit is contained in:
@@ -93,8 +93,8 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
gauge.value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
|
gauge.value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
|
||||||
gauge.max = getMetricTypeValue(data.values, 'max')
|
gauge.max = chartInfo.param.max || 100
|
||||||
gauge.min = getMetricTypeValue(data.values, 'min')
|
gauge.min = chartInfo.param.min || 0
|
||||||
if (gauge.min === gauge.max) {
|
if (gauge.min === gauge.max) {
|
||||||
gauge.min = gauge.max / 2
|
gauge.min = gauge.max / 2
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -328,6 +328,26 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-items--half-width-group" v-if="isGauge(chartConfig.type)">
|
||||||
|
<!--min-->
|
||||||
|
<el-form-item :label="$t('dashboard.panel.chartForm.min')" class="form-item--half-width">
|
||||||
|
<el-input-number
|
||||||
|
size="small"
|
||||||
|
style="margin-top: 2px"
|
||||||
|
:controls="false"
|
||||||
|
@change="change"
|
||||||
|
show-word-limit v-model="chartConfig.param.min"/>
|
||||||
|
</el-form-item>
|
||||||
|
<!--max-->
|
||||||
|
<el-form-item :label="$t('dashboard.panel.chartForm.max')" class="form-item--half-width">
|
||||||
|
<el-input-number
|
||||||
|
size="small"
|
||||||
|
style="margin-top: 2px"
|
||||||
|
:controls="false"
|
||||||
|
@change="change"
|
||||||
|
show-word-limit v-model="chartConfig.param.max"/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="isShowLegend(chartConfig.type)">
|
<div v-if="isShowLegend(chartConfig.type)">
|
||||||
<!--legendConfig-->
|
<!--legendConfig-->
|
||||||
@@ -657,6 +677,7 @@ import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
|
|||||||
import VueTagsInput from '@johmun/vue-tags-input'
|
import VueTagsInput from '@johmun/vue-tags-input'
|
||||||
import draggable from 'vuedraggable'
|
import draggable from 'vuedraggable'
|
||||||
import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
|
import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
|
||||||
|
import { isGauge } from '@/components/chart/chart/tools'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'chartConfig',
|
name: 'chartConfig',
|
||||||
@@ -735,6 +756,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
isGauge,
|
||||||
beforeInit () {
|
beforeInit () {
|
||||||
this.promqlType = this.type
|
this.promqlType = this.type
|
||||||
this.chartTypeList = this[this.type + 'ChartTypeList']
|
this.chartTypeList = this[this.type + 'ChartTypeList']
|
||||||
@@ -772,7 +794,7 @@ export default {
|
|||||||
legend: true,
|
legend: true,
|
||||||
valueMapping: false,
|
valueMapping: false,
|
||||||
thresholds: false
|
thresholds: false
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() })
|
this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() })
|
||||||
@@ -791,6 +813,8 @@ export default {
|
|||||||
statistics: 'last',
|
statistics: 'last',
|
||||||
text: 'value',
|
text: 'value',
|
||||||
valueMapping: [],
|
valueMapping: [],
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
enable: {
|
enable: {
|
||||||
legend: true,
|
legend: true,
|
||||||
valueMapping: false,
|
valueMapping: false,
|
||||||
|
|||||||
@@ -201,6 +201,10 @@ export default {
|
|||||||
if (!params.groupId) {
|
if (!params.groupId) {
|
||||||
params.groupId = 0
|
params.groupId = 0
|
||||||
}
|
}
|
||||||
|
if (params.type !== 'guage') {
|
||||||
|
delete params.param.min
|
||||||
|
delete params.param.max
|
||||||
|
}
|
||||||
if (!params.x && !params.y) {
|
if (!params.x && !params.y) {
|
||||||
params.x = this.chartLastPosition.x + params.span > 12 ? 0 : this.chartLastPosition.x
|
params.x = this.chartLastPosition.x + params.span > 12 ? 0 : this.chartLastPosition.x
|
||||||
params.y = this.chartLastPosition.y + 12
|
params.y = this.chartLastPosition.y + 12
|
||||||
@@ -284,6 +288,8 @@ export default {
|
|||||||
height: 4,
|
height: 4,
|
||||||
unit: 2,
|
unit: 2,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
|
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
|
||||||
param: {
|
param: {
|
||||||
stack: 0,
|
stack: 0,
|
||||||
@@ -328,6 +334,8 @@ export default {
|
|||||||
nullType: 'null',
|
nullType: 'null',
|
||||||
statistics: 'last',
|
statistics: 'last',
|
||||||
text: 'value',
|
text: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
enable: {
|
enable: {
|
||||||
thresholds: false,
|
thresholds: false,
|
||||||
legend: true,
|
legend: true,
|
||||||
@@ -413,6 +421,12 @@ export default {
|
|||||||
if (this.editChart.groupId === -1) {
|
if (this.editChart.groupId === -1) {
|
||||||
this.editChart.groupId = ''
|
this.editChart.groupId = ''
|
||||||
}
|
}
|
||||||
|
if (!this.editChart.param.min) {
|
||||||
|
this.editChart.param.min = 0
|
||||||
|
}
|
||||||
|
if (!this.editChart.param.max) {
|
||||||
|
this.editChart.param.max = 100
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'editChart.type': {
|
'editChart.type': {
|
||||||
|
|||||||
@@ -233,6 +233,26 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-items--half-width-group" v-if="isGauge(chartConfig.type)">
|
||||||
|
<!--min-->
|
||||||
|
<el-form-item :label="$t('dashboard.panel.chartForm.min')" class="form-item--half-width">
|
||||||
|
<el-input-number
|
||||||
|
size="small"
|
||||||
|
style="margin-top: 2px"
|
||||||
|
:controls="false"
|
||||||
|
@change="change"
|
||||||
|
show-word-limit v-model="chartConfig.param.min"/>
|
||||||
|
</el-form-item>
|
||||||
|
<!--max-->
|
||||||
|
<el-form-item :label="$t('dashboard.panel.chartForm.max')" class="form-item--half-width">
|
||||||
|
<el-input-number
|
||||||
|
size="small"
|
||||||
|
style="margin-top: 2px"
|
||||||
|
:controls="false"
|
||||||
|
@change="change"
|
||||||
|
show-word-limit v-model="chartConfig.param.max"/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
<div class="form-items--half-width-group">
|
<div class="form-items--half-width-group">
|
||||||
<!-- text -->
|
<!-- text -->
|
||||||
<el-form-item
|
<el-form-item
|
||||||
@@ -477,6 +497,8 @@ import publicConfig from '@/components/common/rightBox/chart/publicConfig'
|
|||||||
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
|
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
|
||||||
import nezhaColor from '@/components/common/nezhaColor'
|
import nezhaColor from '@/components/common/nezhaColor'
|
||||||
import VueTagsInput from '@johmun/vue-tags-input'
|
import VueTagsInput from '@johmun/vue-tags-input'
|
||||||
|
import { isGauge } from '@/components/chart/chart/tools'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'systemChartConfig',
|
name: 'systemChartConfig',
|
||||||
mixins: [publicConfig, chartTypeShow],
|
mixins: [publicConfig, chartTypeShow],
|
||||||
@@ -536,6 +558,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
isGauge,
|
||||||
init () {
|
init () {
|
||||||
this.chartConfig = JSON.parse(JSON.stringify(this.params))
|
this.chartConfig = JSON.parse(JSON.stringify(this.params))
|
||||||
this.oldType = this.chartConfig.type
|
this.oldType = this.chartConfig.type
|
||||||
@@ -580,6 +603,8 @@ export default {
|
|||||||
statistics: 'last',
|
statistics: 'last',
|
||||||
valueMapping: [],
|
valueMapping: [],
|
||||||
text: 'value',
|
text: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
enable: {
|
enable: {
|
||||||
legend: true,
|
legend: true,
|
||||||
valueMapping: false,
|
valueMapping: false,
|
||||||
|
|||||||
Reference in New Issue
Block a user