fix:promql 表达式输入框 宽度调整
This commit is contained in:
@@ -60,7 +60,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
.query-row .metric-selector-input-box {
|
||||
width: calc(100% - 120px);
|
||||
width: calc(100% - 120px) !important;
|
||||
}
|
||||
|
||||
.el-input-number--small {
|
||||
|
||||
@@ -137,9 +137,14 @@
|
||||
z-index: 10;
|
||||
}
|
||||
/* metric input */
|
||||
.metric-selector-input-box {
|
||||
width: calc(100% - 160px) !important;
|
||||
.input-box {
|
||||
margin: 0 !important;
|
||||
.right-box {
|
||||
.el-form{
|
||||
.metric-selector-input-box {
|
||||
width: calc(100% - 120px);
|
||||
.input-box {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -33,7 +33,6 @@ export default {
|
||||
assetAdd.addEventListener('click', this.saveNext)
|
||||
},
|
||||
saveNext () {
|
||||
console.log(this.assetId)
|
||||
this.$router.push({
|
||||
path: this.messageParams.route,
|
||||
query: this.messageParams.params
|
||||
|
||||
@@ -75,9 +75,23 @@ export default {
|
||||
showText: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isTopo: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
valueArr: {
|
||||
handler (n) {
|
||||
if (this.isTopo) {
|
||||
this.keyName = this.valueArr[0].name
|
||||
this.colors = this.valueArr[0].value || randomcolor() + 'FF'
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
data () {
|
||||
return {
|
||||
colors: '#ffffff',
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
<el-col :span="4" class="thresholds-cell">
|
||||
<span v-if="item.level!==0">
|
||||
<div style="display: inline-block">
|
||||
<nezhaColor
|
||||
<nezhaColor :isTopo="true"
|
||||
:color-val="item.color"
|
||||
: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)}"/>
|
||||
@@ -224,6 +224,7 @@
|
||||
:from-father-data="true"
|
||||
:metricOptionsParent="metricOptions"
|
||||
:id="index"
|
||||
:pqid="'vm'"
|
||||
:key="index"
|
||||
:ref="'promql-'+index"
|
||||
:expression-list="selection.pen.data.expressAllArr"
|
||||
@@ -401,7 +402,7 @@
|
||||
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily">
|
||||
<div>{{ $t('project.topology.bac') }}</div>
|
||||
<div class="p10 pl0">
|
||||
<nezhaColor :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]"
|
||||
<nezhaColor :isTopo="true" :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -409,7 +410,7 @@
|
||||
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&selection.pen.iconFamily">
|
||||
<div>{{ $t('project.topology.iconColor') }}</div>
|
||||
<div class="p10 pl0">
|
||||
<nezhaColor :value-arr="[{name:'iconColor',value:selection.pen.iconColor}]"
|
||||
<nezhaColor :isTopo="true" :value-arr="[{name:'iconColor',value:selection.pen.iconColor}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -430,7 +431,7 @@
|
||||
<!--el-input__inner-->
|
||||
</el-select>
|
||||
<div class="gradient-to-color">
|
||||
<nezhaColor :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]"
|
||||
<nezhaColor :isTopo="true" :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -636,14 +637,14 @@
|
||||
<div class="props-pen-item">
|
||||
<div>{{ $t('project.topology.lineColor') }}</div>
|
||||
<div class="p10 pl0">
|
||||
<nezhaColor :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]"
|
||||
<nezhaColor :isTopo="true" :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="props-pen-item" v-if="selection.pen&&selection.pen.type">
|
||||
<div>{{ $t('project.topology.arrowColor') }}</div>
|
||||
<div class="p10 pl0">
|
||||
<nezhaColor :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]"
|
||||
<nezhaColor :isTopo="true" :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -678,7 +679,7 @@
|
||||
<div class="props-pen-item">
|
||||
<div>{{ $t('project.topology.fontColor') }}</div>
|
||||
<div class="p10 pl0">
|
||||
<nezhaColor :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]"
|
||||
<nezhaColor :isTopo="true" :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -862,7 +863,7 @@
|
||||
<!-- <div class="project-content-item half">-->
|
||||
<!-- <label>{{$t('project.topology.fontColor')}}</label>-->
|
||||
<!-- <div class="full pr10 h32">-->
|
||||
<!-- <nezhaColor :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{-->
|
||||
<!-- <nezhaColor :isTopo=true :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{-->
|
||||
<!-- changeTopologyOpt(val,key,true)-->
|
||||
<!-- }"/>-->
|
||||
<!-- </div>-->
|
||||
@@ -909,7 +910,7 @@
|
||||
<div class="project-content-item half">
|
||||
<label>{{ $t('project.topology.bac') }}</label>
|
||||
<div class="full pr10 h32">
|
||||
<nezhaColor :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{
|
||||
<nezhaColor :isTopo="true" :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{
|
||||
changeTopologyOpt(val,key,true)
|
||||
}"/>
|
||||
</div>
|
||||
@@ -1423,7 +1424,7 @@ export default {
|
||||
// immediate:false,
|
||||
// },
|
||||
selection: {
|
||||
handler () {
|
||||
handler (n) {
|
||||
// this.loading = false
|
||||
if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length === 0)) {
|
||||
this.selection.pen.data.expressAllArr = ['']
|
||||
@@ -1433,6 +1434,14 @@ export default {
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
'selection.pen.data': {
|
||||
handler (n) {
|
||||
// this.loading = false
|
||||
if (this.selection.pen && JSON.stringify(this.selection.pen.type)) {
|
||||
this.$emit('change', this.selection.pen)
|
||||
}
|
||||
}
|
||||
},
|
||||
fromDiagram: {
|
||||
handler () {
|
||||
if (this.selection.pen && this.selection.pen.data) {
|
||||
|
||||
@@ -1201,6 +1201,9 @@ export default {
|
||||
}
|
||||
if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
|
||||
if (data.type === 0 && !data.data.moduleId) {
|
||||
if (!data.fillStyle) {
|
||||
data.fillStyle = '#FFFFFF00'
|
||||
}
|
||||
data.data = {
|
||||
...data.data,
|
||||
moduleId: '',
|
||||
@@ -1208,8 +1211,8 @@ export default {
|
||||
show: false,
|
||||
error: false,
|
||||
animatePlay: false,
|
||||
fillStyle: data.fillStyle,
|
||||
strokeStyle: data.strokeStyle,
|
||||
fillStyle: data.fillStyle || '#ffffff',
|
||||
strokeStyle: data.strokeStyle || '#ffffff',
|
||||
gradientColor: '#bae7ff',
|
||||
gradientType: 0,
|
||||
lineWidth: this.nodeDefaultWidth(data.name),
|
||||
|
||||
@@ -930,7 +930,6 @@ export default {
|
||||
} else if (val.type === 'project') {
|
||||
objectInfo.projectIds = val.valnum
|
||||
} else if (val.label === 'assetState') {
|
||||
console.log(val)
|
||||
objectInfo.state = val.valnum
|
||||
} else if (val.label === 'assetType') {
|
||||
objectInfo.typeIds = val.valnum
|
||||
|
||||
@@ -235,7 +235,7 @@
|
||||
v-if="plugins.indexOf('metric-input') > -1"
|
||||
>
|
||||
<div
|
||||
:id="'editor'+index"
|
||||
:id="pqid + 'editor'+index"
|
||||
v-if="type !== 'log'"
|
||||
class="not-fixed-height no-resize no-close"
|
||||
>
|
||||
@@ -435,6 +435,9 @@ export default {
|
||||
},
|
||||
props: {
|
||||
index: { type: Number },
|
||||
pqid: {
|
||||
type: String, default: ''
|
||||
},
|
||||
expressionList: {},
|
||||
plugins: { type: Array },
|
||||
styleType: Number,
|
||||
@@ -654,7 +657,7 @@ export default {
|
||||
const view = new EditorView({
|
||||
state: EditorViewstate,
|
||||
// parent: document.getElementById('editor')
|
||||
parent: document.getElementById('editor' + self.index)
|
||||
parent: document.getElementById(this.pqid + 'editor' + self.index)
|
||||
})
|
||||
self.newView = view
|
||||
} else {
|
||||
@@ -663,7 +666,6 @@ export default {
|
||||
// const to = self.codeMirrorValue.length
|
||||
const to = self.oldcCodeLength
|
||||
const from = self.oldcCodeLength
|
||||
// console.log(from, to)
|
||||
self.newView.dispatch(
|
||||
self.newView.state.update({
|
||||
effects: dynamicConfigCompartment.reconfigure(dynamicConfig),
|
||||
@@ -1096,6 +1098,14 @@ export default {
|
||||
handler (n, o) {
|
||||
// console.log(n, n[this.index])
|
||||
this.codeMirrorValue[this.index] = n[this.index]
|
||||
setTimeout(() => {
|
||||
const text = this.newView.state.doc.toString()
|
||||
this.newView.dispatch(
|
||||
this.newView.state.update({
|
||||
changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
|
||||
})
|
||||
)
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -106,10 +106,13 @@
|
||||
<template v-slot:before>
|
||||
<div>
|
||||
<el-dropdown-item>
|
||||
<delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
|
||||
<div id="batch-add" v-has="'monitor_endpoint_add'" @click="batchAdd"><i class="nz-icon nz-icon-batchadd"></i>{{$t('overall.batchAdd')}}</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<div id="batch-add" v-has="'monitor_endpoint_add'" @click="batchAdd"><i class="nz-icon nz-icon-batchadd"></i>{{$t('overall.batchAdd')}}</div>
|
||||
<div id="asset-batch-asset" v-has="'asset_edit'" @click="batchEdit"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchEdit')}}</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
|
||||
</el-dropdown-item>
|
||||
</div>
|
||||
</template>
|
||||
@@ -365,7 +368,8 @@ export default {
|
||||
editShow: false,
|
||||
show: false,
|
||||
batchModify: false,
|
||||
batchAdd: false
|
||||
batchAdd: false,
|
||||
batchShow: false
|
||||
},
|
||||
titleSearch: {},
|
||||
titleSearchList: {
|
||||
@@ -795,6 +799,9 @@ export default {
|
||||
batchAdd () {
|
||||
this.rightBox.batchAdd = true
|
||||
},
|
||||
batchEdit () {
|
||||
this.rightBox.batchShow = true
|
||||
},
|
||||
rollbackImport () {
|
||||
this.$delete('monitor/endpoint/cancelImport' + '?seq=' + this.importResult.seq).then(response => {
|
||||
if (response.code == 200) {
|
||||
|
||||
Reference in New Issue
Block a user