108 lines
3.9 KiB
JavaScript
108 lines
3.9 KiB
JavaScript
Vue.component("plan-price-bandwidth-config-box", {
|
||
props: ["v-plan-price-bandwidth-config"],
|
||
data: function () {
|
||
let config = this.vPlanPriceBandwidthConfig
|
||
if (config == null) {
|
||
config = {
|
||
percentile: 95,
|
||
base: 0,
|
||
ranges: [],
|
||
supportRegions: false
|
||
}
|
||
}
|
||
|
||
if (config.ranges == null) {
|
||
config.ranges = []
|
||
}
|
||
|
||
return {
|
||
config: config,
|
||
bandwidthPercentile: config.percentile,
|
||
priceBase: config.base,
|
||
isEditing: false
|
||
}
|
||
},
|
||
watch: {
|
||
priceBase: function (v) {
|
||
let f = parseFloat(v)
|
||
if (isNaN(f) || f < 0) {
|
||
this.config.base = 0
|
||
} else {
|
||
this.config.base = f
|
||
}
|
||
},
|
||
bandwidthPercentile: function (v) {
|
||
let i = parseInt(v)
|
||
if (isNaN(i) || i < 0) {
|
||
this.config.percentile = 0
|
||
} else {
|
||
this.config.percentile = i
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
edit: function () {
|
||
this.isEditing = !this.isEditing
|
||
}
|
||
},
|
||
template: `<div>
|
||
<input type="hidden" name="bandwidthPriceJSON" :value="JSON.stringify(config)"/>
|
||
<div>
|
||
带宽百分位：<span v-if="config.percentile > 0">{{config.percentile}}th</span><span v-else class="disabled">没有设置</span> |
|
||
基础带宽价格：<span v-if="config.base > 0">{{config.base}}元/Mbps</span><span v-else class="disabled">没有设置</span> |
|
||
阶梯价格：<span v-if="config.ranges.length > 0">{{config.ranges.length}}段</span><span v-else class="disabled">没有设置</span> <span v-if="config.supportRegions">| 支持区域带宽计费</span>
|
||
<span v-if="config.bandwidthAlgo == 'avg'"> | 使用平均带宽算法</span>
|
||
<div style="margin-top: 0.5em">
|
||
<a href="" @click.prevent="edit">修改 <i class="icon angle" :class="{up: isEditing, down: !isEditing}"></i></a>
|
||
</div>
|
||
</div>
|
||
<div v-show="isEditing" style="margin-top: 0.5em">
|
||
<table class="ui table definition selectable" style="margin-top: 0">
|
||
<tr>
|
||
<td class="title">带宽百分位 *</td>
|
||
<td>
|
||
<div class="ui input right labeled">
|
||
<input type="text" style="width: 4em" maxlength="3" v-model="bandwidthPercentile"/>
|
||
<span class="ui label">th</span>
|
||
</div>
|
||
<p class="comment">带宽计费位置，在1-100之间。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="title">基础带宽费用</td>
|
||
<td>
|
||
<div class="ui input right labeled">
|
||
<input type="text" v-model="priceBase" maxlength="10" style="width: 7em"/>
|
||
<span class="ui label">元/Mbps</span>
|
||
</div>
|
||
<p class="comment">没有定义带宽阶梯价格时，使用此价格。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>带宽阶梯价格</td>
|
||
<td>
|
||
<plan-bandwidth-ranges v-model="config.ranges"></plan-bandwidth-ranges>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>支持按区域带宽计费</td>
|
||
<td>
|
||
<checkbox v-model="config.supportRegions"></checkbox>
|
||
<p class="comment">选中后，表示可以根据节点所在区域设置不同的带宽价格。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>带宽算法</td>
|
||
<td>
|
||
<select class="ui dropdown auto-width" v-model="config.bandwidthAlgo">
|
||
<option value="secondly">峰值带宽</option>
|
||
<option value="avg">平均带宽</option>
|
||
</select>
|
||
<p class="comment" v-if="config.bandwidthAlgo == 'secondly'">按在计时时间段内（5分钟）最高带宽峰值计算，比如5分钟内最高的某个时间点带宽为100Mbps，那么就认为此时间段内的峰值带宽为100Mbps。修改此选项会同时影响到用量统计图表。</p>
|
||
<p class="comment" v-if="config.bandwidthAlgo == 'avg'">按在计时时间段内（5分钟）平均带宽计算，即此时间段内的总流量除以时间段的秒数，比如5分钟（300秒）内总流量600MiB，那么带宽即为<code-label>600MiB * 8bit/300s = 16Mbps</code-label>；通常平均带宽算法要比峰值带宽要少很多。修改此选项会同时影响到用量统计图表。</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>`
|
||
}) |