1.4.5.2

EdgeAdmin/web/public/js/components/plans/plan-price-bandwidth-config-box-plus.js

@@ -0,0 +1,108 @@
+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> &nbsp; | &nbsp;
+	基础带宽价格：<span v-if="config.base > 0">{{config.base}}元/Mbps</span><span v-else class="disabled">没有设置</span> &nbsp; | &nbsp; 
+	阶梯价格：<span v-if="config.ranges.length > 0">{{config.ranges.length}}段</span><span v-else class="disabled">没有设置</span>  &nbsp; <span v-if="config.supportRegions">| &nbsp;支持区域带宽计费</span>
+	<span v-if="config.bandwidthAlgo == 'avg'"> &nbsp;| &nbsp;使用平均带宽算法</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>`
+})