diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss index 8d4a8728c..c0a278426 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss +++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss @@ -46,6 +46,24 @@ margin-bottom: 10px; box-sizing: border-box; height: 32px; + .chart-title-content{ + flex: 1; + display: flex; + height: 100%; + .el-input--small { + padding: 3px; + line-height: 24px; + input{ + height: 26px; + line-height: 26px; + } + } + } + .hide-input { + input{ + border: none !important; + } + } .nz-icon{ cursor: pointer; } diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue index 61e4c7241..d021acc94 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue @@ -6,29 +6,51 @@ :rules="rules" label-position= "top" label-width="120px" + @submit.native.prevent >
- +
- - - - {{expressionName[index-1]}} - - + + + +
{{expressionsShow[index-1].error}}
 - + @@ -40,23 +62,26 @@
- - + + + + {{$t('dashboard.panel.chartForm.legend')}}  @@ -66,12 +91,13 @@ - + - + +
@@ -400,7 +426,7 @@ :key="index" >
- + @@ -528,7 +554,7 @@
- + @@ -593,12 +619,14 @@ import promqlInputMixin from '@/components/common/mixin/promqlInput' import publicConfig from '@/components/common/rightBox/chart/publicConfig' import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow' import VueTagsInput from '@johmun/vue-tags-input' +import draggable from 'vuedraggable' export default { name: 'chartConfig', components: { promqlInput, nezhaColor, - VueTagsInput + VueTagsInput, + draggable }, props: { type: { @@ -674,12 +702,9 @@ export default { init () { this.chartConfig = JSON.parse(JSON.stringify(this.params)) // 重置相关属性 - this.promqlCount = 0 - this.promqlKeys = [] - this.elementIds = [] this.expressions = [] this.expressionsShow = [] - this.legends = [] + this.expressionName = [] if (!this.chartConfig.elements.length) { this.addExpression() } else { @@ -765,6 +790,25 @@ export default { } this.chartConfig.param.thresholds.splice(index, 1) this.change() + }, + move () { + + }, + end (event) { + this.expressions = [] + this.expressionsShow = [] + this.expressionName = [] + if (!this.chartConfig.elements.length) { + this.addExpression() + } else { + this.chartConfig.elements.forEach(item => { + this.addExpression(item) + }) + } + this.change() + }, + start () { + } }, created () { diff --git a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue deleted file mode 100644 index 4e01efdee..000000000 --- a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue +++ /dev/null @@ -1,516 +0,0 @@ - - - - - diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js index 3de620231..023cda341 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js +++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js @@ -15,14 +15,10 @@ export default { return { language: localStorage.getItem('nz-language'), chartConfig: {}, - promqlCount: 0, - promqlKeys: [], - elementIds: [], expressions: [], expressionName: [], expressionsShow: [], spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], - legends: [], unitOptions: chartDataFormat.unitOptions(), nullTypeList: [{ label: 'connected', @@ -155,13 +151,36 @@ export default { 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] }) + this.chartConfig.elements.push({ id: this.expressionsShow[i].elementId, expression: expr, type: 'expert', legend: this.expressionsShow[i].legend, name: this.expressionName[i] }) }) } else { this.chartConfig.elements = [] } this.change() }, + expressionNameChange (index) { + if (this.expressionsShow[index].error) { + this.expressionName[index] = this.expressionsShow[index].oldName + this.expressionsShow[index].error = '' + } else { + this.expressionsShow[index].oldName = this.expressionName[index] + } + this.expressionsShow[index].hideInput = true + this.$refs.chartForm.clearValidate('elements.' + (index - 1) + '.expression') + this.expressionChange() + }, + expressionNameInput (val, index) { + const findIndex = this.expressionName.indexOf(val) + const lastIndex = this.expressionName.lastIndexOf(val) + if (findIndex !== -1 && lastIndex != -1 && lastIndex !== findIndex) { + this.expressionsShow[index].error = 'The name duplicate' + } else { + this.expressionsShow[index].error = '' + } + }, + showInput (index) { + this.expressionsShow[index].hideInput = false + }, transformNumToLetter (num) { // 相当于26进制 获取id const self = this let letter = '' @@ -177,20 +196,28 @@ export default { 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.expressionsShow.push({ + show: true, + hideInput: true, + oldName: expressionName, + error: '', + legend: '', + elementId: '' + }) 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++ + this.expressionsShow.push( + { + show: true, + hideInput: true, + oldName: item.name, + error: '', + elementId: item.id, + legend: item.legend + } + ) } }, getExpressionName () { @@ -204,14 +231,10 @@ export default { return name }, removeExpression (index) { - if (this.promqlCount > 1) { + if (this.expressionsShow.length > 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) { @@ -224,13 +247,17 @@ export default { }, copyExpression (index) { this.expressions.push(this.expressions[index]) - this.legends.push(this.legends[index]) - this.promqlKeys.push(getUUID()) const expressionName = this.getExpressionName() this.expressionName.push(expressionName) - this.elementIds.push('') - this.expressionsShow.push(true) - this.promqlCount++ + this.expressionsShow.push( + { + ...this.expressionsShow[index], + show: true, + hideInput: true, + oldName: this.expressionName[index], + error: '' + } + ) this.$nextTick(() => { this.expressions.forEach((ex, index) => { if (ex) { @@ -241,7 +268,9 @@ export default { this.expressionChange() }, showExpression (index) { - this.$set(this.expressionsShow, index - 1, !this.expressionsShow[index - 1]) + this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show + this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1]) + this.$refs.chartForm.clearValidate('elements.' + (index - 1) + '.expression') }, unitSelected: function (value) { // this.chartConfig.unit=value[value.length-1]; @@ -300,12 +329,10 @@ export default { this.change() }, colorChange (val, key, index) { - console.log(val, key, index) if (key === 'thresholds') { this.chartConfig.param.thresholds[index].color = val } if (key === 'bac') { - console.log(this.chartConfig.param.valueMapping.mapping, this.chartConfig.param.valueMapping.mapping[0], this.chartConfig.param.valueMapping.mapping[index]) this.chartConfig.param.valueMapping.mapping[index].color.bac = val this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index]) } diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue index 62c498809..b206feff3 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue @@ -340,7 +340,6 @@ export default { cb(result) }, metricChange: function (value) { - if (!value) return this.expressionList[this.index] = value this.dropDownVisible = false this.$emit('change', value)