1.4.5.2
This commit is contained in:
unknown
@@ -0,0 +1,326 @@
|
||||
Vue.component("node-schedule-conds-box", {
|
||||
props: ["value", "v-params", "v-operators"],
|
||||
mounted: function () {
|
||||
this.formatConds(this.condsConfig.conds)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
data: function () {
|
||||
let condsConfig = this.value
|
||||
if (condsConfig == null) {
|
||||
condsConfig = {
|
||||
conds: [],
|
||||
connector: "and"
|
||||
}
|
||||
}
|
||||
if (condsConfig.conds == null) {
|
||||
condsConfig.conds = []
|
||||
}
|
||||
|
||||
let paramMap = {}
|
||||
this.vParams.forEach(function (param) {
|
||||
paramMap[param.code] = param
|
||||
})
|
||||
|
||||
let operatorMap = {}
|
||||
this.vOperators.forEach(function (operator) {
|
||||
operatorMap[operator.code] = operator.name
|
||||
})
|
||||
|
||||
return {
|
||||
condsConfig: condsConfig,
|
||||
params: this.vParams,
|
||||
paramMap: paramMap,
|
||||
operatorMap: operatorMap,
|
||||
operator: "",
|
||||
|
||||
isAdding: false,
|
||||
|
||||
paramCode: "",
|
||||
param: null,
|
||||
|
||||
valueBandwidth: {
|
||||
count: 100,
|
||||
unit: "mb"
|
||||
},
|
||||
valueTraffic: {
|
||||
count: 1,
|
||||
unit: "gb"
|
||||
},
|
||||
valueCPU: 80,
|
||||
valueMemory: 90,
|
||||
valueLoad: 20,
|
||||
valueRate: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
paramCode: function (code) {
|
||||
if (code.length == 0) {
|
||||
this.param = null
|
||||
} else {
|
||||
this.param = this.params.$find(function (k, v) {
|
||||
return v.code == code
|
||||
})
|
||||
}
|
||||
this.$emit("changeparam", this.param)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function () {
|
||||
this.isAdding = true
|
||||
},
|
||||
confirm: function () {
|
||||
if (this.param == null) {
|
||||
teaweb.warn("请选择参数")
|
||||
return
|
||||
}
|
||||
if (this.param.operators != null && this.param.operators.length > 0 && this.operator.length == 0) {
|
||||
teaweb.warn("请选择操作符")
|
||||
return
|
||||
}
|
||||
if (this.param.operators == null || this.param.operators.length == 0) {
|
||||
this.operator = ""
|
||||
}
|
||||
|
||||
let value = null
|
||||
switch (this.param.valueType) {
|
||||
case "bandwidth": {
|
||||
if (this.valueBandwidth.unit.length == 0) {
|
||||
teaweb.warn("请选择带宽单位")
|
||||
return
|
||||
}
|
||||
let count = parseInt(this.valueBandwidth.count.toString())
|
||||
if (isNaN(count)) {
|
||||
count = 0
|
||||
}
|
||||
if (count < 0) {
|
||||
count = 0
|
||||
}
|
||||
value = {
|
||||
count: count,
|
||||
unit: this.valueBandwidth.unit
|
||||
}
|
||||
}
|
||||
break
|
||||
case "traffic": {
|
||||
if (this.valueTraffic.unit.length == 0) {
|
||||
teaweb.warn("请选择带宽单位")
|
||||
return
|
||||
}
|
||||
let count = parseInt(this.valueTraffic.count.toString())
|
||||
if (isNaN(count)) {
|
||||
count = 0
|
||||
}
|
||||
if (count < 0) {
|
||||
count = 0
|
||||
}
|
||||
value = {
|
||||
count: count,
|
||||
unit: this.valueTraffic.unit
|
||||
}
|
||||
}
|
||||
break
|
||||
case "cpu":
|
||||
let cpu = parseInt(this.valueCPU.toString())
|
||||
if (isNaN(cpu)) {
|
||||
cpu = 0
|
||||
}
|
||||
if (cpu < 0) {
|
||||
cpu = 0
|
||||
}
|
||||
if (cpu > 100) {
|
||||
cpu = 100
|
||||
}
|
||||
value = cpu
|
||||
break
|
||||
case "memory":
|
||||
let memory = parseInt(this.valueMemory.toString())
|
||||
if (isNaN(memory)) {
|
||||
memory = 0
|
||||
}
|
||||
if (memory < 0) {
|
||||
memory = 0
|
||||
}
|
||||
if (memory > 100) {
|
||||
memory = 100
|
||||
}
|
||||
value = memory
|
||||
break
|
||||
case "load":
|
||||
let load = parseInt(this.valueLoad.toString())
|
||||
if (isNaN(load)) {
|
||||
load = 0
|
||||
}
|
||||
if (load < 0) {
|
||||
load = 0
|
||||
}
|
||||
value = load
|
||||
break
|
||||
case "rate":
|
||||
let rate = parseInt(this.valueRate.toString())
|
||||
if (isNaN(rate)) {
|
||||
rate = 0
|
||||
}
|
||||
if (rate < 0) {
|
||||
rate = 0
|
||||
}
|
||||
value = rate
|
||||
break
|
||||
}
|
||||
|
||||
this.condsConfig.conds.push({
|
||||
param: this.param.code,
|
||||
operator: this.operator,
|
||||
value: value
|
||||
})
|
||||
this.formatConds(this.condsConfig.conds)
|
||||
|
||||
this.cancel()
|
||||
},
|
||||
cancel: function () {
|
||||
this.isAdding = false
|
||||
this.paramCode = ""
|
||||
this.param = null
|
||||
},
|
||||
remove: function (index) {
|
||||
this.condsConfig.conds.$remove(index)
|
||||
},
|
||||
formatConds: function (conds) {
|
||||
let that = this
|
||||
conds.forEach(function (cond) {
|
||||
switch (that.paramMap[cond.param].valueType) {
|
||||
case "bandwidth":
|
||||
cond.valueFormat = cond.value.count + cond.value.unit[0].toUpperCase() + cond.value.unit.substring(1) + "ps"
|
||||
return
|
||||
case "traffic":
|
||||
cond.valueFormat = cond.value.count + cond.value.unit.toUpperCase()
|
||||
return
|
||||
case "cpu":
|
||||
cond.valueFormat = cond.value + "%"
|
||||
return
|
||||
case "memory":
|
||||
cond.valueFormat = cond.value + "%"
|
||||
return
|
||||
case "load":
|
||||
cond.valueFormat = cond.value
|
||||
return
|
||||
case "rate":
|
||||
cond.valueFormat = cond.value + "/秒"
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" name="condsJSON" :value="JSON.stringify(this.condsConfig)"/>
|
||||
|
||||
<!-- 已有条件 -->
|
||||
<div v-if="condsConfig.conds.length > 0" style="margin-bottom: 1em">
|
||||
<span v-for="(cond, index) in condsConfig.conds">
|
||||
<span class="ui label basic small">
|
||||
<span>{{paramMap[cond.param].name}}
|
||||
<span v-if="paramMap[cond.param].operators != null && paramMap[cond.param].operators.length > 0"><span class="grey">{{operatorMap[cond.operator]}}</span> {{cond.valueFormat}}</span>
|
||||
<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="index < condsConfig.conds.length - 1"> <span v-if="condsConfig.connector == 'and'">且</span><span v-else>或</span> </span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="isAdding">
|
||||
<table class="ui table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title">参数</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" v-model="paramCode">
|
||||
<option value="">[选择参数]</option>
|
||||
<option v-for="paramOption in params" :value="paramOption.code">{{paramOption.name}}</option>
|
||||
</select>
|
||||
<p class="comment" v-if="param != null">{{param.description}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="param != null && param.operators != null && param.operators.length > 0">
|
||||
<td>操作符</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" v-if="param != null" v-model="operator">
|
||||
<option value="">[选择操作符]</option>
|
||||
<option v-for="operator in param.operators" :value="operator">{{operatorMap[operator]}}</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="param != null && param.operators != null && param.operators.length > 0">
|
||||
<td>{{param.valueName}}</td>
|
||||
<td>
|
||||
<!-- 带宽 -->
|
||||
<div v-if="param.valueType == 'bandwidth'">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" maxlength="10" size="6" v-model="valueBandwidth.count" @keyup.enter="confirm" @keypress.enter.prevent="1"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown auto-width" v-model="valueBandwidth.unit">
|
||||
<option value="gb">Gbps</option>
|
||||
<option value="mb">Mbps</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流量 -->
|
||||
<div v-if="param.valueType == 'traffic'">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" maxlength="10" size="6" v-model="valueTraffic.count" @keyup.enter="confirm" @keypress.enter.prevent="1"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown auto-width" v-model="valueTraffic.unit">
|
||||
<option value="mb">MiB</option>
|
||||
<option value="gb">GiB</option>
|
||||
<option value="tb">TiB</option>
|
||||
<option value="pb">PiB</option>
|
||||
<option value="eb">EiB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- cpu -->
|
||||
<div v-if="param.valueType == 'cpu'">
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" v-model="valueCPU" maxlength="3" size="3" style="width: 4em" @keyup.enter="confirm" @keypress.enter.prevent="1"/>
|
||||
<span class="ui label">%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- memory -->
|
||||
<div v-if="param.valueType == 'memory'">
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" v-model="valueMemory" maxlength="3" size="3" style="width: 4em" @keyup.enter="confirm" @keypress.enter.prevent="1"/>
|
||||
<span class="ui label">%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- load -->
|
||||
<div v-if="param.valueType == 'load'">
|
||||
<input type="text" v-model="valueLoad" maxlength="3" size="3" style="width: 4em" @keyup.enter="confirm" @keypress.enter.prevent="1"/>
|
||||
</div>
|
||||
|
||||
<!-- rate -->
|
||||
<div v-if="param.valueType == 'rate'">
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" v-model="valueRate" maxlength="8" size="8" style="width: 8em" @keyup.enter="confirm" @keypress.enter.prevent="1"/>
|
||||
<span class="ui label">/秒</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="ui button small" type="button" @click.prevent="confirm">确定</button> <a href="" @click.prevent="cancel">取消</a>
|
||||
</div>
|
||||
|
||||
<div v-if="!isAdding">
|
||||
<button class="ui button small" type="button" @click.prevent="add">+</button>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
Reference in New Issue
Block a user