326 lines
8.7 KiB
JavaScript
326 lines
8.7 KiB
JavaScript
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>`
|
|
}) |