gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat： legend 以及 valueMapping的配置

Browse Source
This commit is contained in:
zhangyu
2021-12-01 16:34:50 +08:00
parent c6a6dab65a
commit cc6bfbbdc2
9 changed files with 516 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/assets/css/common/rightBoxCommon.scss
View File

@@ -136,6 +136,7 @@
.form__sub-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
margin-bottom: 20px;
line-height: 32px;

4
nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
View File

@@ -483,11 +483,11 @@
.color-tab {
position: absolute;
top: 43px;
top: -28px;
width: 100%;
left: 0;
height: 28px;
border-radius: 5px 5px 0 0;
width: 312px;
border: 1px solid #EBEEF5;
border-bottom: none;
background-color: $--background-color-empty;

42
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -1,5 +1,10 @@
.chart-right-box{
overflow-y: auto;
}
.right-box__container{
.chart-config{
color: $--color-text-regular;
font-size: 14px;
.el-form {
padding-top: 0px;
}
@@ -7,9 +12,10 @@
border: 1px solid $--border-color-light;
border-radius: 2px;
display: flex;
padding: 8px 10px;
padding: 3px 10px 3px 5px;
justify-content: space-between;
margin-bottom: 10px;
box-sizing: border-box;
.nz-icon-copy {
padding: 0 4px;
color: $--color-primary;
@@ -27,5 +33,39 @@
-90deg
);
}
.thresholds-item {
border-radius: 2px;
display: flex;
margin-bottom: 10px;
align-items: center;
justify-items: center;
.el-input-number--small{
display: inline-block;
flex: 1;
align-items: center;
width: auto;
}
.del-thresholds-icon{
display: inline-block;
margin-left: 5px;
}
.mapping-display{
width: 124px;
font-size: 14px;
border: 1px solid $--border-color-light;
border-radius: 2px 0 0 2px;
height: 32px;
line-height: 32px;
padding-left: 10px;
box-sizing: border-box;
}
}
.thresholds-add{
border: 1px solid $--border-color-light;
border-radius: 2px;
text-align: center;
margin-bottom: 10px;
padding: 3px 10px;
}
}
}

32
nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
View File

@@ -105,38 +105,6 @@
top: -280px;
left: 280px;
}
.color-tab{
position: absolute;
top: -268px;
left: 144px;
height: 28px;
border-radius: 5px 5px 0 0;
width: 312px;
border: 1px solid $--border-color-light;
border-bottom: none;
background-color: $--background-color-empty;
display: flex;
justify-content: space-between;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.color-tab div{
text-align: center;
flex: 1;
color: $--color-text-secondary;
transition: all .3s cubic-bezier(.645,.045,.355,1);
background: #E4E7ED;
cursor: pointer;
}
.color-tab div:first-child{
border-right-color: $--border-color-base;
}
.color-tab div:hover{
color: #409EFF;
}
.color-tab .color-active{
color: #409EFF;
background-color: $--background-color-empty;
}
.color{
position: relative;
}

8
nezha-fronted/src/components/common/nezhaColor.vue
View File

@@ -2,8 +2,8 @@
<span v-clickoutside="()=>{exitColor(false)}" class="nz-color">
<div class="color-show" v-if="single" ref="colorShow" @click.stop="changeColor">
<div class="color-show-left" :style="{background:colors}"></div>
<span class="color-text"> {{colors}}</span>
<span class="color-arrows">
<span class="color-text" v-show="showText"> {{colors}}</span>
<span class="color-arrows" v-show="showText">
<i class="nz-icon nz-icon-arrow-down" v-if="!showColorPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="showColorPicker"></i>
</span>
@@ -71,6 +71,10 @@ export default {
disableAlpha: {
type: Boolean,
default: false
},
showText: {
type: Boolean,
default: true
}
},
watch: {},

8
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -13,7 +13,7 @@
</div>
<!-- begin--表单-->
<div class="right-box-form-box right-box__container" style="overflow: hidden">
<div class="right-box-form-box right-box__container chart-right-box">
<el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
<el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="title">
<el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
@@ -59,7 +59,7 @@
</div>
<el-tabs v-model="editChart.datasource" @tab-click="datasourceChange">
<el-tab-pane label="Metrics" name="1">
<metrics-chart-config v-if="editChart.datasource == 1" :params.sync="editChart"/>
<metrics-chart-config v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane label="Logs" name="2">
<logs-chart-config v-if="editChart.datasource == 2" :params.sync="editChart"/>
@@ -237,6 +237,10 @@ export default {
},
datasourceChange (val, e) {
console.log(val, e, this.editChart.datasource)
},
editChartChange (newEditChart) {
console.log(newEditChart)
this.editChart = JSON.parse(JSON.stringify(newEditChart))
}
},
created () {

263
nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
View File

@@ -8,6 +8,10 @@
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1]?'':'is-active'" @click="showExpression(index)"></i>
<span>
{{expressionName[index-1]}}
<!-- 名称修改 暂未实现-->
</span>
</span>
<span>
<span @click="addExpression('')">
@@ -56,7 +60,7 @@
</el-row>
</div>
<!--title-->
<!--title-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
</div>
@@ -92,7 +96,7 @@
<!--width-->
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
<el-select id="chart-box-span" v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan">
<el-select id="chart-box-span" v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
@@ -102,12 +106,130 @@
<!--height-->
<el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width" prop="height">
<!-- 由px改为span -->
<el-select id="chart-box-height" v-model="chartConfig.height" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan">
<el-select id="chart-box-height" v-model="chartConfig.height" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
<!--stack-->
<el-form-item :label="$t('dashboard.panel.chartForm.stack')" class="form-item--half-width" prop="height" v-if="isStackShow(chartConfig.type)">
<el-select id="chart-box-height" v-model="chartConfig.param.stack" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
<el-option :value="1" label="true">
</el-option>
<el-option :value="0" label="false">
</el-option>
</el-select>
</el-form-item>
<!--statistics-->
<el-form-item v-if="isStatisticsShow(chartConfig.type)" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
<el-select id="chart-box-statistics" v-model="chartConfig.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
<el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
<span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
</el-option>
</el-select>
</el-form-item>
<!-- nullType -->
<el-form-item :label='"Null value"' class="form-item--half-width" prop="nullType">
<el-select id="chart-box-nullType" v-model="chartConfig.param.nullType" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()" >
<el-option v-for="item in nullTypeList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select>
</el-form-item>
</div>
<div v-if="isShowLegend(chartConfig.type)">
<!--legendConfig-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.legendConfig')}}</span>
<el-switch v-model="chartConfig.param.legend.show" size="small" @change="change"></el-switch>
</div>
<transition name="el-zoom-in-top">
<div v-if="chartConfig.param.legend.show" class="form-items--half-width-group">
<el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width" prop="nullType">
<el-select id="chart-box-legend-show" v-model="chartConfig.param.legend.placement" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
<el-option v-for="item in legendPositionList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width" prop="nullType">
<el-select id="chart-box-legend-value" v-model="chartConfig.param.legend.values" multiple collapse-tags placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
<el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
</transition>
<!--thresholdConfig-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.threshold')}}</span>
<el-switch v-model="chartConfig.param.thresholdShow" size="small" @change="thresholdShowChange"></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.thresholdShow">
<div v-for="(item,index) in chartConfig.param.thresholds" :key="index" class="thresholds-item">
<nezhaColor :value-arr="[{name:'thresholds',value:item.color}]" :show-text="false" :color-val="item.color"
@colorChange="(color,key)=>{colorChange(color,key,index)}"/>
<el-input-number size="small" placeholder="" v-model="item.value" :controls="false" @blur="sortThresholds"/>
<span @click="delThresholds(index)" class="del-thresholds-icon">
<i class="nz-icon nz-icon-delete" />
</span>
</div>
<div @click="addThresholds" class="thresholds-add">
Add thresholds
</div>
</el-row>
</transition>
</div>
<div v-if="isShowValueMapping(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
<el-switch v-model="chartConfig.param.valueMapping.show" size="small" @change="change"></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.valueMapping.show">
<div v-for="(item,index) in chartConfig.param.valueMapping.mapping" :key="index">
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
123
</span>
<span>
<span @click="addMapping('')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
</span>
<span class="nz-icon-minus-medium">
<i @click="removeMapping(index)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row v-show="item.show" :key="1" class="thresholds-item">
<el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
<el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
</el-select>
<el-input-number :controls="false" v-if="item.type === 'value'" size="small" v-model="item.value" placeholder="value"></el-input-number>
<el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
<el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
<el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
</el-row>
<el-row v-show="item.show" :key="2" class="thresholds-item" style="position: relative">
<div class='mapping-display'>Display</div>
<el-input v-model="item.display" style="margin-right: 10px" size="small"/>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(index,key,val)}"/>
</el-row>
</transition-group>
</div>
<div @click="addMapping" class="thresholds-add">
Add valueMapping
</div>
</el-row>
</transition>
</div>
</el-form>
</div>
@@ -115,25 +237,19 @@
<script>
import promqlInput from '@/components/page/dashboard/explore/promqlInput'
import nezhaColor from '@/components/common/nezhaColor'
import promqlInputMixin from '@/components/common/mixin/promqlInput'
import { getUUID, resetZIndex } from '@/components/common/js/common'
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
const rz = {
methods: {
rz (e) {
resetZIndex(e)
}
}
}
export default {
name: 'metricsChartConfig',
props: {
params: {}
},
components: {
promqlInput
promqlInput,
nezhaColor
},
mixins: [rz, promqlInputMixin, publicConfig],
mixins: [promqlInputMixin, publicConfig],
computed: {},
data () {
return {
@@ -149,13 +265,25 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
},
{
id: 'bar',
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
id: 'point',
name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
},
{
id: 'singleStat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
},
{
id: 'bar',
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
},
{
id: 'guage',
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
},
{
id: 'treemap',
name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
},
{
id: 'pie',
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
@@ -163,30 +291,6 @@ export default {
{
id: 'table',
name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
},
{
id: 'alertList',
name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
},
{
id: 'logs',
name: this.$t('dashboard.panel.chartForm.typeVal.logs.label')
},
{
id: 'text',
name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
},
{
id: 'url',
name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
},
{
id: 'diagram',
name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
},
{
id: 'group',
name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
}
]
@@ -210,84 +314,15 @@ export default {
})
}
},
expressionChange: function () {
if (this.expressions.length) {
this.chartConfig.elements = []
this.expressions.forEach((expr, i) => {
this.chartConfig.elements.push({ id: this.elementIds[i], expression: expr, type: 'expert', legend: this.legends[i] })
sortThresholds () {
if (this.param.thresholds.length > 1) {
this.param.thresholds = this.chartConfig.param.thresholds.sort((a, b) => {
const value1 = a.value
const value2 = b.value
return value1 - value2
})
} else {
this.chartConfig.elements = []
}
this.change()
},
addExpression (item) {
console.log(item, 213213123)
if (!item) {
this.expressions.push('')
this.legends.push('')
this.promqlKeys.push(getUUID())
this.elementIds.push('')
this.expressionsShow.push(true)
this.promqlCount++
this.expressionChange()
} else {
this.expressions.push(item.expression)
this.legends.push(item.legend)
this.promqlKeys.push(getUUID())
this.elementIds.push(item.id)
this.expressionsShow.push(true)
this.promqlCount++
}
},
removeExpression (index) {
if (this.promqlCount > 1) {
this.expressions.splice(index, 1)
this.legends.splice(index, 1)
this.promqlKeys.splice(index, 1)
this.expressionsShow.splice(index, 1)
this.elementIds.splice(index, 1)
this.promqlCount--
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex)
}
})
})
this.expressionChange()
}
},
copyExpression (index) {
this.expressions.push(this.expressions[index])
this.legends.push(this.legends[index])
this.promqlKeys.push(getUUID())
this.elementIds.push('')
this.expressionsShow.push(true)
this.promqlCount++
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex)
}
})
})
this.expressionChange()
},
showExpression (index) {
console.log(index, this.expressionsShow[index - 1])
this.$set(this.expressionsShow, index - 1, !this.expressionsShow[index - 1])
},
chartTypeChange () {
},
unitSelected: function (value) {
// this.chartConfig.unit=value[value.length-1];
},
change () {
this.$nextTick(() => {
this.$emit('change', this.chartConfig)
})
}
},
created () {

299
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -1,5 +1,12 @@
import chartDataFormat from '@/components/charts/chartDataFormat'
import { getUUID, resetZIndex } from '@/components/common/js/common'
const rz = {
methods: {
rz (e) {
resetZIndex(e)
}
}
}
export default {
data () {
return {
@@ -9,10 +16,298 @@ export default {
promqlKeys: [],
elementIds: [],
expressions: [],
expressionName: [],
expressionsShow: [],
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
legends: [],
unitOptions: chartDataFormat.unitOptions()
unitOptions: chartDataFormat.unitOptions(),
nullTypeList: [{
label: 'connected',
value: 'connected'
}, {
label: 'null',
value: 'null'
}, {
label: 'zero',
value: 'zero'
}],
statisticsList: this.$CONSTANTS.statisticsList,
legendPositionList: [
{
label: 'bottom',
value: 'bottom'
}, {
label: 'left',
value: 'left'
}, {
label: 'right',
value: 'right'
}
],
mappingTypeList: [
{
label: 'Value',
value: 'value'
}, {
label: 'Range',
value: 'range'
}, {
label: 'Regx',
value: 'regx'
}
],
letter: [
'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N',
'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z'
]
}
},
mixins: [rz],
methods: {
isStackShow (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return true
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isStatisticsShow (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return false
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return true
default: return false
}
},
isShowLegend (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
return true
case 'table':
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return false
default: return false
}
},
isShowValueMapping (type) {
switch (type) {
case 'line':
case 'stackArea':
case 'point':
case 'table':
return false
case 'singleStat':
case 'bar':
case 'treemap':
case 'pie':
return true
default: return false
}
},
expressionChange: function () {
if (this.expressions.length) {
this.chartConfig.elements = []
this.expressions.forEach((expr, i) => {
this.chartConfig.elements.push({ id: this.elementIds[i], expression: expr, type: 'expert', legend: this.legends[i], name: this.expressionName[i] })
})
} else {
this.chartConfig.elements = []
}
this.change()
},
transformNumToLetter (num) { // 相当于26进制 获取id
const self = this
let letter = ''
const loopNum = parseInt(num / 26)
if (loopNum > 0) {
letter += this.transformNumToLetter(loopNum - 1)
}
letter += self.letter[num % 26]
return letter
},
addExpression (item) {
console.log(item, 213213123)
if (!item) {
this.expressions.push('')
const expressionName = this.getExpressionName()
this.expressionName.push(expressionName)
this.legends.push('')
this.promqlKeys.push(getUUID())
this.elementIds.push('')
this.expressionsShow.push(true)
this.promqlCount++
this.expressionChange()
} else {
this.expressions.push(item.expression)
this.legends.push(item.legend)
this.promqlKeys.push(getUUID())
this.expressionName.push(item.name)
this.elementIds.push(item.id)
this.expressionsShow.push(true)
this.promqlCount++
}
},
getExpressionName () {
let name = ''
for (let i = 0; i <= this.expressionName.length; i++) {
name = this.transformNumToLetter(i)
if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
break
}
}
return name
},
removeExpression (index) {
if (this.promqlCount > 1) {
this.expressions.splice(index, 1)
this.legends.splice(index, 1)
this.promqlKeys.splice(index, 1)
this.expressionName.splice(index, 1)
this.expressionsShow.splice(index, 1)
this.elementIds.splice(index, 1)
this.promqlCount--
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex)
}
})
})
this.expressionChange()
}
},
copyExpression (index) {
this.expressions.push(this.expressions[index])
this.legends.push(this.legends[index])
this.promqlKeys.push(getUUID())
this.expressionName(this.transformNumToLetter(0))
this.elementIds.push('')
this.expressionsShow.push(true)
this.promqlCount++
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex)
}
})
})
this.expressionChange()
},
showExpression (index) {
console.log(index, this.expressionsShow[index - 1])
this.$set(this.expressionsShow, index - 1, !this.expressionsShow[index - 1])
},
chartTypeChange () {
this.change()
},
unitSelected: function (value) {
// this.chartConfig.unit=value[value.length-1];
this.change()
},
thresholdShowChange () {
// if (this.chartConfig.param.thresholdShow) {
//
// } else {
//
// }
this.change()
},
addThresholds () {
this.chartConfig.param.thresholds.push({
value: '',
color: '#eeeeeeff'
})
this.change()
},
delThresholds (index) {
if (this.chartConfig.param.thresholds.length === 1) {
return
}
this.chartConfig.param.thresholds.splice(index, 1)
this.change()
},
addMapping () {
this.chartConfig.param.valueMapping.mapping.push({
type: 'value',
show: true,
value: '',
display: '',
color: {
bac: '#FFFFFFFF',
text: '#000000FF'
}
})
this.change()
},
copyMapping (index) {
this.chartConfig.param.valueMapping.mapping.push({ ...this.chartConfig.param.valueMapping.mapping[index] })
this.change()
},
removeMapping (index) {
this.chartConfig.param.valueMapping.mapping.splice(index, 1)
this.change()
},
showMapping (index) {
this.chartConfig.param.valueMapping.mapping[index].show = !this.chartConfig.param.valueMapping.mapping[index].show
},
mappingItemChange (index, type) {
console.log(index, type)
const mapping = this.chartConfig.param.valueMapping.mapping[index]
if (mapping.type === 'value') {
this.chartConfig.param.valueMapping.mapping[index] = {
...mapping,
value: ''
}
}
if (mapping.type === 'range') {
this.chartConfig.param.valueMapping.mapping[index] = {
...mapping,
from: '',
to: ''
}
}
if (mapping.type === 'regx') {
this.chartConfig.param.valueMapping.mapping[index] = {
...mapping,
regx: ''
}
}
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
this.change()
},
colorChange (val, key, index) {
console.log(val, key, index)
if (key === 'thresholds') {
this.chartConfig.param.thresholds[index].color = val
}
this.change()
},
change () {
this.$nextTick(() => {
this.$emit('change', this.chartConfig)
})
}
}
}

16
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -195,8 +195,20 @@ export default {
datasource: '1',
height: 4,
unit: 2,
param: { url: '', threshold: '' },
elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
param: {
url: '',
threshold: '',
stack: 0,
nullType: 'null',
legend: { placement: 'bottom', values: [], show: true },
thresholdShow: true,
thresholds: [{ value: '', color: '#eeeeeeff' }],
valueMapping: {
show: true,
mapping: []
}
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
panel: '',
sync: 0,
remark: '',