添加 addnode其他相关参数
This commit is contained in:
zhangyu
@@ -20,7 +20,7 @@
|
||||
<el-scrollbar class="right-box-form-box">
|
||||
<el-form class="right-box-form right-box-form-left" ref="form" :model="form" label-width="160px" :rules="rules">
|
||||
<el-form-item label="Module Name" prop="moduleId">
|
||||
<el-select v-model="form.moduleId" placeholder="" popper-class="asset-dropdown">
|
||||
<el-select v-model="form.moduleId" placeholder="" popper-class="asset-dropdown" size="small">
|
||||
<el-option
|
||||
v-for="item in moduleDataS.module"
|
||||
:key="item.id"
|
||||
@@ -31,7 +31,7 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Label" prop="iconId">
|
||||
<el-select v-model="form.iconId" placeholder="" popper-class="asset-dropdown">
|
||||
<el-select v-model="form.iconId" placeholder="" popper-class="asset-dropdown" size="small">
|
||||
<el-option
|
||||
v-for="item in iconArray"
|
||||
:key="item.id"
|
||||
@@ -44,39 +44,63 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</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">-->
|
||||
<!--<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"-->
|
||||
<!--></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>-->
|
||||
<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>
|
||||
|
||||
<!-- end--表单-->
|
||||
|
||||
<!--底部按钮-->
|
||||
@@ -93,6 +117,7 @@
|
||||
|
||||
<script>
|
||||
import promqlInput from "@/components/page/dashboard/explore/promqlInput";
|
||||
import chartDataFormat from "@/components/charts/chartDataFormat";
|
||||
import {getUUID,resetZIndex} from "@/components/common/js/common";
|
||||
import a from './a.png'
|
||||
import b from './b.png'
|
||||
@@ -116,6 +141,7 @@
|
||||
nodeData:{},
|
||||
moduleDataS:{}
|
||||
},
|
||||
mixins: [rz],
|
||||
watch:{
|
||||
nodeData:{
|
||||
handler(n){
|
||||
@@ -141,11 +167,14 @@
|
||||
moduleId:'',
|
||||
iconId:'',
|
||||
},
|
||||
unitOptions: chartDataFormat.unitOptions(),
|
||||
promqlKeys:[],
|
||||
expressions: [],
|
||||
promqlCount:0,
|
||||
elementIds:[],
|
||||
legends:[],
|
||||
name:[],
|
||||
unit:[],
|
||||
rules:{
|
||||
moduleId:[
|
||||
{ required: true, message: '请选择module', trigger: 'blur' },
|
||||
@@ -154,26 +183,6 @@
|
||||
{ required: true, message: '请选择icon', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
nodesArray:[
|
||||
{ id: 1, label: "model1",
|
||||
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
|
||||
shape:'image',shapeProperties:{useImageSize:false},
|
||||
x:1,y:-63,
|
||||
},
|
||||
{id: 2, label: "model2", },
|
||||
{id: 3, label: "model3",},
|
||||
{id: 4, label: "model4", },
|
||||
{id: 5, label: "model5",},
|
||||
{id: 6, label: "model6",},
|
||||
{id: 7, label: "model7",},
|
||||
|
||||
{id: 9, label: "model9", },
|
||||
{id: 10, label: "model10", },
|
||||
{id: 11, label: "model11",},
|
||||
{id: 12, label: "model12",},
|
||||
{id: 13, label: "model13",},
|
||||
{id: 14, label: "model14",},
|
||||
],
|
||||
iconArray:[
|
||||
{id:1,image:a,imageName:"module1"},
|
||||
{id:2,image:b,imageName:"module1"},
|
||||
@@ -185,6 +194,9 @@
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.addExpression()
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
this.$refs['form'].validate((valid) => {
|
||||
@@ -192,8 +204,18 @@
|
||||
let module=this.moduleDataS.module.find(item=>item.id===this.form.moduleId);
|
||||
let img=this.iconArray.find(item=>item.id===this.form.iconId);
|
||||
let model=Object.assign({...this.form},{...module},{...img},{id:this.form.moduleId,shape:'image',shapeProperties:{useImageSize:false}},);
|
||||
model.label=model.name
|
||||
this.$emit('addModel',model)
|
||||
model.label=model.name;
|
||||
console.log(this.promqlKeys,this.expressions,this.promqlCount,this.legends,this.name,this.unit);
|
||||
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('addModel',model);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -204,6 +226,8 @@
|
||||
addExpression() {
|
||||
this.expressions.push('');
|
||||
this.legends.push('');
|
||||
this.name.push('');
|
||||
this.unit.push('');
|
||||
this.promqlKeys.push(getUUID());
|
||||
this.elementIds.push("");
|
||||
this.promqlCount++;
|
||||
@@ -212,6 +236,8 @@
|
||||
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--;
|
||||
@@ -241,6 +267,10 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-icon-minus{
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.nz-btn-edit-ok{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div style="background: #F9F9F9;height: 100%">
|
||||
<div class="top-tools">
|
||||
<!--时间选择-->
|
||||
<template>
|
||||
<div class="top-tool-main-right">
|
||||
<div class="top-tool-search relative-position margin-r-20">
|
||||
@@ -14,75 +15,15 @@
|
||||
</template>
|
||||
</div>
|
||||
<div class="project-facade">
|
||||
<div class="facade-top">
|
||||
<div class="facade-top-left" v-loading="projectInfo.loading">
|
||||
<div class="facade-top-title">
|
||||
{{projectInfo.title}}
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Id :</span>{{projectInfo.id}}</span>
|
||||
<span><span class="label special">Name :</span>{{projectInfo.name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span class="label">Alert state :</span>
|
||||
<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}
|
||||
<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}
|
||||
<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="facade-top-right" v-loading="alertData.loading">
|
||||
<div class="facade-top-title">
|
||||
<span class="label">{{alertData.title}}</span>
|
||||
{{alertData.sssObj.total}}
|
||||
</div>
|
||||
<div class="facade-top-right-content">
|
||||
<div>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
|
||||
:show-text="false"
|
||||
:width="40"
|
||||
color="#F5A390"
|
||||
></el-progress>
|
||||
<div class="align--center">{{alertData.sssObj.pending}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
|
||||
:show-text="false"
|
||||
:width="40"
|
||||
color="#F6B977"
|
||||
></el-progress>
|
||||
<div class="align--center">{{alertData.sssObj.stop}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
|
||||
:show-text="false"
|
||||
:width="40"
|
||||
color="#EBD066"
|
||||
></el-progress>
|
||||
<div class="align--center">{{alertData.sssObj.other}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="facade-content">
|
||||
<!--拓扑图盒子-->
|
||||
<vis-network
|
||||
:panel-id="item.id"
|
||||
:chart-data="item"
|
||||
:chart-index="0"
|
||||
:allModuleInfo="allModuleInfo"
|
||||
:projectInfo="projectInfo"
|
||||
:alertData="alertData"
|
||||
>
|
||||
</vis-network>
|
||||
</div>
|
||||
@@ -240,56 +181,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.facade-top{
|
||||
min-height: 138px;
|
||||
display: flex;
|
||||
margin: 12px 0;
|
||||
height: calc(16% - 40px);
|
||||
font-size: 12px;
|
||||
}
|
||||
.facade-top > div{
|
||||
height: calc(100% - 40px);
|
||||
width: 18%;
|
||||
min-width: 280px;
|
||||
background: #FFFFFF;
|
||||
margin-right: 9px;
|
||||
padding: 20px;
|
||||
}
|
||||
.facade-top-title{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.facade-top-left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
}
|
||||
.facade-content{
|
||||
flex: 1;
|
||||
min-height: 800px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
.label{
|
||||
padding: 0 15px;
|
||||
}
|
||||
.special.label{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.facade-top .facade-top-right{
|
||||
width: 12%;
|
||||
min-width: 280px;
|
||||
}
|
||||
.facade-top-right-content{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-items: center;
|
||||
height: calc(100% - 30px);
|
||||
align-items:center;
|
||||
}
|
||||
.align--center{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<span class="edit-topology-remove" @click="lineDel">Remove</span>
|
||||
</span>
|
||||
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
|
||||
<el-button @click="saveTopology">save</el-button>
|
||||
<el-button @click="saveTopology" class="saveTopology">save</el-button>
|
||||
</span>
|
||||
<span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork">Please select two nodes <span class="edit-topologyCancel" @click="closeAddLine">Cancel</span></span>
|
||||
</div>
|
||||
@@ -287,7 +287,7 @@
|
||||
|
||||
interaction:{
|
||||
dragNodes: true, //是否能拖动节点
|
||||
dragView: true, //是否能拖动画布
|
||||
dragView: false, //是否能拖动画布
|
||||
hover: true, //鼠标移过后加粗该节点和连接线
|
||||
multiselect: false, //按 ctrl 多选
|
||||
selectable: true, //是否可以点击选择
|
||||
@@ -826,4 +826,11 @@
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.saveTopology{
|
||||
background: #FA901C;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
padding: 4px 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span></span>
|
||||
<span>
|
||||
<span class="chart-title-text">{{chartData.title}}</span>
|
||||
<!--<span class="chart-title-text">{{chartData.title}}</span>-->
|
||||
<!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
|
||||
</span>
|
||||
<span>
|
||||
@@ -31,6 +31,71 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="vis-network-content">
|
||||
<!--project主要信息-->
|
||||
<div class="facade-top" v-if="!editVisNetwork&&nodesArray.length">
|
||||
<div class="facade-top-left" v-loading="projectInfo.loading">
|
||||
<div class="facade-top-title">
|
||||
{{projectInfo.title}}
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Id :</span>{{projectInfo.id}}</span>
|
||||
<span><span class="label special">Name :</span>{{projectInfo.name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span class="label">Alert state :</span>
|
||||
<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}
|
||||
<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}
|
||||
<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="facade-top-right" v-loading="alertData.loading">
|
||||
<div class="facade-top-title">
|
||||
<span class="label">{{alertData.title}}</span>
|
||||
{{alertData.sssObj.total}}
|
||||
</div>
|
||||
<div class="facade-top-right-content">
|
||||
<div>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
|
||||
:show-text="false"
|
||||
:width="40"
|
||||
color="#F5A390"
|
||||
></el-progress>
|
||||
<div class="align--center">{{alertData.sssObj.pending}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
|
||||
:show-text="false"
|
||||
:width="40"
|
||||
color="#F6B977"
|
||||
></el-progress>
|
||||
<div class="align--center">{{alertData.sssObj.stop}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
|
||||
:show-text="false"
|
||||
:width="40"
|
||||
color="#EBD066"
|
||||
></el-progress>
|
||||
<div class="align--center">{{alertData.sssObj.other}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--拓扑图-->
|
||||
<topology
|
||||
:editVisNetwork="editVisNetwork"
|
||||
:nodesArray="nodesArray"
|
||||
@@ -42,7 +107,6 @@
|
||||
v-loading="topologyLoading"
|
||||
@editVisNetworkChange="editVisNetworkChange"
|
||||
>
|
||||
|
||||
</topology>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,7 +134,9 @@
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
allModuleInfo:{}
|
||||
allModuleInfo:{},
|
||||
projectInfo:{},
|
||||
alertData:{}
|
||||
},
|
||||
watch:{
|
||||
allModuleInfo:{
|
||||
@@ -79,7 +145,21 @@
|
||||
handler(n){
|
||||
this.getNetworkData(n);
|
||||
},
|
||||
}
|
||||
},
|
||||
projectInfo:{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(n){
|
||||
this.getNetworkData(n);
|
||||
},
|
||||
},
|
||||
alertData:{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(n){
|
||||
this.getNetworkData(n);
|
||||
},
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -144,4 +224,57 @@
|
||||
.vis-network-content{
|
||||
height: 100%;
|
||||
}
|
||||
.facade-top{
|
||||
min-height: 138px;
|
||||
display: flex;
|
||||
margin: 12px 0;
|
||||
height: calc(16% - 40px);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
z-index: 10;
|
||||
}
|
||||
.facade-top > div{
|
||||
height: calc(100% - 40px);
|
||||
width: 18%;
|
||||
min-width: 315px;
|
||||
background: #FFFFFF;
|
||||
margin-right: 9px;
|
||||
padding: 20px;
|
||||
border: 1px solid #FFFFFF;
|
||||
box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.facade-top-title{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.facade-top-left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.special.label{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.facade-top .facade-top-right{
|
||||
width: 12%;
|
||||
min-width: 280px;
|
||||
}
|
||||
.facade-top-right-content{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-items: center;
|
||||
height: calc(100% - 30px);
|
||||
align-items:center;
|
||||
}
|
||||
.align--center{
|
||||
text-align: center;
|
||||
}
|
||||
.label{
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="styleType == 2">
|
||||
<div v-if="styleType == 2&&showRemove">
|
||||
<div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="el-icon-plus"></i></div>
|
||||
<div class="option" style="margin-left: 5px; line-height: 32px;" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
|
||||
</div>
|
||||
@@ -65,7 +65,8 @@
|
||||
expressionList:{},
|
||||
plugins: {type: Array},
|
||||
styleType: Number,
|
||||
historyParam:{type:Object}
|
||||
historyParam:{type:Object},
|
||||
showRemove:{type:Boolean,default:true}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user