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

fix: 修改 topology 編輯時 metrics 无法点击语句中间的问题

Browse Source
This commit is contained in:
zhangyu
2022-09-08 10:16:19 +08:00
parent 889ddca357
commit a3cf8e1f90
2 changed files with 48 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -1,8 +1,7 @@
<template> <template>
<div class="props-box" :loading="loading"> <div class="props-box" :loading="loading">
<!--所有属性--> <!--所有属性-->
<keep-alive> <el-tabs v-model="tab" type="card" v-if="selection.pen" @tab-click="tabClick">
<el-tabs v-model="tab" type="card" v-if="selection.pen" @tab-click="tabClick">
<el-tab-pane :label="$t('project.topology.data')" name="1"> <el-tab-pane :label="$t('project.topology.data')" name="1">
<el-form v-model="selection.pen.data" class="pens-data" label-position="top"> <el-form v-model="selection.pen.data" class="pens-data" label-position="top">
<!--module--> <!--module-->
@@ -24,11 +23,11 @@
<el-row class="form-row-title"> <el-row class="form-row-title">
{{ $t('dashboard.panel.chartForm.thresholds') }} {{ $t('dashboard.panel.chartForm.thresholds') }}
<span v-if="selection.pen.data.valueMappingSort !=='desc'" class="title__label" <span v-if="selection.pen.data.valueMappingSort !=='desc'" class="title__label"
>（0:Ok > … >{{ >（0:Ok > … >{{
selection.pen.data.valueMapping.length selection.pen.data.valueMapping.length
}}:Critical）</span> }}:Critical）</span>
<span v-if="selection.pen.data.valueMappingSort ==='desc'" class="title__label" <span v-if="selection.pen.data.valueMappingSort ==='desc'" class="title__label"
>（{{ >（{{
selection.pen.data.valueMapping.length selection.pen.data.valueMapping.length
}}:Critical > … >0:Ok）</span> }}:Critical > … >0:Ok）</span>
<el-form-item class="float-right" prop="type" style="height: 100%;"> <el-form-item class="float-right" prop="type" style="height: 100%;">
@@ -45,6 +44,7 @@
<el-row v-for="(item,index) in selection.pen.data.expressArr" :key="index" class="element-item form-row-item" <el-row v-for="(item,index) in selection.pen.data.expressArr" :key="index" class="element-item form-row-item"
style=""> style="">
<promql-input <promql-input
v-if="selection.pen"
:from-father-data="true" :from-father-data="true"
:isTopo="true" :isTopo="true"
:metricOptionsParent="metricOptions" :metricOptionsParent="metricOptions"
@@ -109,9 +109,9 @@
<span v-if="item.level!==0"> <span v-if="item.level!==0">
<div style="display: inline-block"> <div style="display: inline-block">
<nezhaColor :isTopo="true" <nezhaColor :isTopo="true"
:color-val="item.color" :color-val="item.color"
:presetColors="predefineColors" :single="false" :presetColors="predefineColors" :single="false"
:value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}"/> :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}"/>
</div> </div>
</span> </span>
<span v-else>base</span> <span v-else>base</span>
@@ -223,6 +223,7 @@
class="element-item form-row-item form-row-item-border" class="element-item form-row-item form-row-item-border"
style="width: 100%; border-radius: 2px; padding-right: 60px;"> style="width: 100%; border-radius: 2px; padding-right: 60px;">
<promql-input <promql-input
v-if="selection.pen"
:from-father-data="true" :from-father-data="true"
:isTopo="true" :isTopo="true"
:metricOptionsParent="metricOptions" :metricOptionsParent="metricOptions"
@@ -716,53 +717,52 @@
</div> </div>
</div> </div>
<!-- <div class="props-pen-item">--> <!-- <div class="props-pen-item">-->
<!-- <div>{{ $t('project.topology.textOffsetX') }}</div>--> <!-- <div>{{ $t('project.topology.textOffsetX') }}</div>-->
<!-- <div class="p10 pl0">--> <!-- <div class="p10 pl0">-->
<!-- <el-input-number--> <!-- <el-input-number-->
<!-- @focus="inputFocus"--> <!-- @focus="inputFocus"-->
<!-- @blur="inputBlur"--> <!-- @blur="inputBlur"-->
<!-- :precision="0"--> <!-- :precision="0"-->
<!-- controls-position="right"--> <!-- controls-position="right"-->
<!-- size="small" name="x"--> <!-- size="small" name="x"-->
<!-- class="input"--> <!-- class="input"-->
<!-- v-model.number="selection.pen.textLeft"--> <!-- v-model.number="selection.pen.textLeft"-->
<!-- :readonly="readonly"--> <!-- :readonly="readonly"-->
<!-- required--> <!-- required-->
<!-- @change="onChange()"></el-input-number>--> <!-- @change="onChange()"></el-input-number>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="props-pen-item">--> <!-- <div class="props-pen-item">-->
<!-- <div>{{ $t('project.topology.textOffsetY') }}</div>--> <!-- <div>{{ $t('project.topology.textOffsetY') }}</div>-->
<!-- <div class="p10 pl0">--> <!-- <div class="p10 pl0">-->
<!-- <el-input-number--> <!-- <el-input-number-->
<!-- @focus="inputFocus"--> <!-- @focus="inputFocus"-->
<!-- @blur="inputBlur"--> <!-- @blur="inputBlur"-->
<!-- :precision="0"--> <!-- :precision="0"-->
<!-- controls-position="right"--> <!-- controls-position="right"-->
<!-- size="small" name="x"--> <!-- size="small" name="x"-->
<!-- class="input"--> <!-- class="input"-->
<!-- v-model.number="selection.pen.textTop"--> <!-- v-model.number="selection.pen.textTop"-->
<!-- :readonly="readonly"--> <!-- :readonly="readonly"-->
<!-- required--> <!-- required-->
<!-- @change="onChange()"></el-input-number>--> <!-- @change="onChange()"></el-input-number>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</keep-alive>
<!--选中多个--> <!--选中多个-->
<keep-alive> <keep-alive>
<div v-if="selection.pens" class=""> <div v-if="selection.pens" class="">
<el-collapse v-model="activeNames"> <el-collapse v-model="activeNames">
<!--对齐方式--> <!--对齐方式-->
<el-collapse-item :title="$t('project.topology.align')" name="1" v-if="selection.pens"> <el-collapse-item :title="$t('project.topology.align')" name="1" v-if="selection.pens">
<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc"> <label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc" :key="item.value">
<i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]" <i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"
@click="onNodesAlign(item.value)"></i> @click="onNodesAlign(item.value)"></i>
</label> </label>

9
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -514,7 +514,8 @@ export default {
projectOption: [], projectOption: [],
filterSilence: '', filterSilence: '',
tempBoxId: {}, tempBoxId: {},
loading: false loading: false,
firstInit: true
} }
}, },
computed: { computed: {
@@ -697,6 +698,9 @@ export default {
} }
}, },
newChange (val) { newChange (val) {
if (this.firstInit && this.isTopo) {
return
}
if (val) { if (val) {
this.oldcCodeLength = val.length this.oldcCodeLength = val.length
this.codeMirrorValue[this.index] = val this.codeMirrorValue[this.index] = val
@@ -1154,7 +1158,7 @@ export default {
immediate: true, immediate: true,
handler (n, o) { handler (n, o) {
this.codeMirrorValue[this.index] = n[this.index] this.codeMirrorValue[this.index] = n[this.index]
if (this.isTopo) { if (this.isTopo && this.firstInit) {
setTimeout(() => { setTimeout(() => {
const text = this.newView.state.doc.toString() const text = this.newView.state.doc.toString()
this.newView.dispatch( this.newView.dispatch(
@@ -1162,6 +1166,7 @@ export default {
changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] } changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
}) })
) )
this.firstInit = false
}, 200) }, 200)
} }
} }