addline添加的其他参数
This commit is contained in:
zhangyu
@@ -70,6 +70,61 @@
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="right-box-sub-title">
|
||||
<span>{{$t('alert.config.expr')}}</span>
|
||||
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
|
||||
</div>
|
||||
<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
|
||||
<el-row>
|
||||
<template>
|
||||
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
|
||||
Name
|
||||
</el-col>
|
||||
<el-col style="width: calc(100% - 140px);">
|
||||
<el-input v-model="name[index-1]" type="text" size="small"></el-input>
|
||||
</el-col>
|
||||
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
|
||||
Unit
|
||||
</el-col>
|
||||
<el-col style="width: calc(100% - 120px);">
|
||||
<el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
|
||||
:options="unitOptions"
|
||||
:props="{ expandTrigger: 'click',emitPath:false }"
|
||||
:show-all-levels="false"
|
||||
v-model="unit[index-1]"
|
||||
></el-cascader>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<promql-input
|
||||
:ref="'promql-'+(index-1)"
|
||||
:id="promqlKeys[index-1]"
|
||||
:key="promqlKeys[index-1]"
|
||||
:expression-list="expressions"
|
||||
:index="index-1"
|
||||
:styleType="2"
|
||||
:plugins="['metric-selector', 'metric-input', 'remove']"
|
||||
@change="expressionChange"
|
||||
@removeExpression="removeExpression"
|
||||
:showRemove="false"
|
||||
></promql-input>
|
||||
<el-row>
|
||||
<template>
|
||||
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
|
||||
{{$t('dashboard.panel.chartForm.legend')}}
|
||||
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
|
||||
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
<el-col style="width: calc(100% - 120px);">
|
||||
<el-input v-model="legends[index-1]" type="text" size="small"></el-input>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
@@ -89,11 +144,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import promqlInput from "@/components/page/dashboard/explore/promqlInput";
|
||||
import chartDataFormat from "@/components/charts/chartDataFormat";
|
||||
import {getUUID,resetZIndex} from "@/components/common/js/common";
|
||||
var rz = {
|
||||
methods: {
|
||||
rz(e) {
|
||||
resetZIndex(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
export default {
|
||||
name:"addLine",
|
||||
props:{
|
||||
lineData:{},
|
||||
},
|
||||
components:{
|
||||
'promql-input': promqlInput,
|
||||
},
|
||||
mixins: [rz],
|
||||
watch:{
|
||||
lineData:{
|
||||
handler(n){
|
||||
@@ -128,6 +197,14 @@
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
],
|
||||
unitOptions: chartDataFormat.unitOptions(),
|
||||
promqlKeys:[],
|
||||
expressions: [],
|
||||
promqlCount:0,
|
||||
elementIds:[],
|
||||
legends:[],
|
||||
name:[],
|
||||
unit:[],
|
||||
rules:{
|
||||
arrows: [
|
||||
{ required: true, message: '', trigger: 'change' },
|
||||
@@ -138,9 +215,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.addExpression();
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
|
||||
@@ -149,10 +228,49 @@
|
||||
roundness:model.roundness,
|
||||
type:model.type ,
|
||||
};
|
||||
model.expressions=[];
|
||||
this.promqlKeys.forEach((item,index)=>{
|
||||
model.expressions.push({
|
||||
"name": this.name[index],
|
||||
"unit": this.unit[index],
|
||||
"metric": this.expressions[index],
|
||||
"legend": this.legends[index],
|
||||
})
|
||||
});
|
||||
this.$emit('addLine',model);
|
||||
}
|
||||
});
|
||||
},
|
||||
expressionChange: function () {
|
||||
|
||||
},
|
||||
addExpression() {
|
||||
this.expressions.push('');
|
||||
this.legends.push('');
|
||||
this.name.push('');
|
||||
this.unit.push('');
|
||||
this.promqlKeys.push(getUUID());
|
||||
this.elementIds.push("");
|
||||
this.promqlCount++;
|
||||
},
|
||||
removeExpression(index) {
|
||||
if (this.promqlCount > 1) {
|
||||
this.expressions.splice(index, 1);
|
||||
this.legends.splice(index, 1);
|
||||
this.name.splice(index, 1);
|
||||
this.unit.splice(index, 1);
|
||||
this.promqlKeys.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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
/*关闭弹框*/
|
||||
esc(refresh) {
|
||||
this.$emit("close", refresh);
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Label" prop="iconId">
|
||||
<el-form-item label="Icon" prop="iconId">
|
||||
<el-select v-model="form.iconId" placeholder="" popper-class="asset-dropdown" size="small">
|
||||
<el-option
|
||||
v-for="item in iconArray"
|
||||
|
||||
@@ -231,7 +231,7 @@
|
||||
let nodes=[...this.nodesArray];
|
||||
let edges=[...this.edgesArray];
|
||||
console.log(nodes,edges);
|
||||
this.editVisNetwork=false;
|
||||
this.$emit('editVisNetworkChange',false);
|
||||
},
|
||||
//拓扑图方法
|
||||
init(type){
|
||||
@@ -288,7 +288,7 @@
|
||||
|
||||
interaction:{
|
||||
dragNodes: true, //是否能拖动节点
|
||||
dragView: false, //是否能拖动画布
|
||||
dragView: true, //是否能拖动画布
|
||||
hover: true, //鼠标移过后加粗该节点和连接线
|
||||
multiselect: false, //按 ctrl 多选
|
||||
selectable: true, //是否可以点击选择
|
||||
@@ -305,12 +305,11 @@
|
||||
this_.network = new Vis.Network(this_.container, this_.data, this_.options);
|
||||
this_.network.moveTo({
|
||||
position: this_.viewsCenter,
|
||||
scale: this_.isFullScreen?1.5:1,
|
||||
scale: this_.zoom,
|
||||
offset: {x:0, y:0},
|
||||
});
|
||||
this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
|
||||
this_.modelTopUpdate();
|
||||
this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
|
||||
},
|
||||
resetAllNodes() {
|
||||
this.setNetworkData(this.nodesArray,this.edgesArray);
|
||||
@@ -330,7 +329,7 @@
|
||||
});
|
||||
this_.network.moveTo({
|
||||
position: this_.viewsCenter,
|
||||
scale: this_.isFullScreen?1.5:1,
|
||||
scale: this_.zoom,
|
||||
offset: {x:0, y:0},
|
||||
});
|
||||
this.$nextTick(()=>{
|
||||
@@ -421,7 +420,6 @@
|
||||
},
|
||||
//工具栏
|
||||
nodeDel(){
|
||||
console.log(this.selNodeId);
|
||||
let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
|
||||
let edgesArray=this.edgesArray.filter((item)=>item.from!==this.selNodeId || this.to!==this.selNodeId);
|
||||
this.$emit('setTopologyData',nodesArray, edgesArray);
|
||||
@@ -464,7 +462,6 @@
|
||||
})
|
||||
},
|
||||
modelTopMouseDown(e){
|
||||
console.log(e);
|
||||
if(!this.index&&this.index!==0){return};
|
||||
this.relativeModelTop={
|
||||
x:e.clientX-(parseFloat(this.$refs['modelTopId'+this.index][0].style.left)),
|
||||
@@ -527,7 +524,6 @@
|
||||
if(key){
|
||||
this.popDataShow[key]=true;
|
||||
}
|
||||
console.log(this.popDataShow);
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
@@ -625,7 +621,6 @@
|
||||
return false
|
||||
});
|
||||
this.network.on("resize", function (params) {//检测resize
|
||||
console.log(1111);
|
||||
setTimeout(()=>{
|
||||
this_.modelTopUpdate();
|
||||
this_.selNodeArrUpdate();
|
||||
|
||||
@@ -185,10 +185,10 @@
|
||||
this.topologyLoading=true;
|
||||
// this.$get('/project/topo',{projectId:n.id}).then(res=>{
|
||||
// console.log(res);
|
||||
// setTimeout(()=>{
|
||||
// this.topologyLoading=false;
|
||||
// this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
|
||||
// })
|
||||
setTimeout(()=>{
|
||||
this.topologyLoading=false;
|
||||
this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
|
||||
},500)
|
||||
// })
|
||||
},
|
||||
editVisNetworkChange(flag){
|
||||
|
||||
Reference in New Issue
Block a user