219 lines
12 KiB
HTML
219 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>交易数据互算测试</title>
|
|
<link href="../../Statics/bundles/bundleV2.css" rel="stylesheet" />
|
|
<script src="../../statics/bundles/bundleV2.js"></script>
|
|
<script src="../base/otcformat.js"></script>
|
|
<script src="../app/tradeHelper.js"></script>
|
|
<style>
|
|
.valid-tooltip { right: 50px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<div class="card">
|
|
<div class="card-body" id="cardCalc1">
|
|
<h4>小数位显示精度配置</h4>
|
|
<div class="row">
|
|
<div class="form-group col">
|
|
<label>标的价格</label>
|
|
<input type="number" min="0" class="form-control" v-model="otcformat.umprice.precision" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>数量份额</label>
|
|
<input type="number" min="0" class="form-control" v-model="otcformat.notional.precision" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>名义本金</label>
|
|
<input type="number" min="0" class="form-control" v-model="otcformat.stockEqvNotional.precision" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>交易单价</label>
|
|
<input type="number" min="0" class="form-control" v-model="otcformat.tradeSinglePrice.precision" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>期权费率</label>
|
|
<input type="number" min="0" class="form-control" v-model="otcformat.premiumRate.precision" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>交易总价</label>
|
|
<input type="number" min="0" class="form-control" v-model="otcformat.tradePrice.precision" />
|
|
</div>
|
|
</div>
|
|
<h4>基础参数配置</h4>
|
|
<div class="row">
|
|
<div class="form-group col">
|
|
<label>年化系数(%)</label>
|
|
<input type="number" min="0" class="form-control" v-model="calcUsedPara.AnnualizeFactor" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>参与率(%)</label>
|
|
<input type="number" min="0" class="form-control" v-model="calcUsedPara.ParticipationRate" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>保底收益率(%)</label>
|
|
<input type="number" min="0" class="form-control" v-model="calcUsedPara.PrincipalRate" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>数量份额因子</label>
|
|
<input type="number" min="1" class="form-control" v-model="calcUsedPara.CountRatio" />
|
|
</div>
|
|
<div class="form-group col">
|
|
<label>成交方式</label>
|
|
<select class="form-control" v-model="calcUsedPara.IsUsePremiumRate">
|
|
<option :value="true">名义本金</option>
|
|
<option :value="false">数量方式</option>
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<label>变更计算</label>
|
|
<div class="input-group">
|
|
<div class="input-group-append">
|
|
<!--变更参与率/年化系数/保底收益率相当于变更名义本金方式-->
|
|
<button class="btn btn-link" type="button" v-on:click="calc(4)" title="变更参与率/年化系数/保底收益率后计算"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4>互算验证测试</h4>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="form-group">
|
|
<label>期初标的价格</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.1" class="form-control" v-model="calcData.SpotPrice" v-bind:class="changeShow.SpotPrice" />
|
|
<div class="valid-tooltip">old:{{calcOld.SpotPrice}}</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-link" type="button" v-on:click="calc(1)"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>交易份额</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.1" class="form-control" v-model="calcData.Notional" v-bind:class="changeShow.Notional" />
|
|
<div class="valid-tooltip">old:{{calcOld.Notional}}</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-link" type="button" v-on:click="calc(2)"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>有效名义本金</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.1" class="form-control" v-model="calcData.StockEqvNotionalReal" v-bind:class="changeShow.StockEqvNotionalReal" />
|
|
<div class="valid-tooltip">old:{{calcOld.StockEqvNotionalReal}}</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-link" type="button" v-on:click="calc(5)"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="form-group">
|
|
<label class="text-white">----</label>
|
|
<input type="text" class="form-control bg-white border-0" disabled />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>交易数量</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.1" class="form-control" v-model="calcData.TradeAmount" v-bind:class="changeShow.TradeAmount" />
|
|
<div class="valid-tooltip">old:{{calcOld.TradeAmount}}</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-link" type="button" v-on:click="calc(3)"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>名义本金</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.1" class="form-control" v-model="calcData.StockEqvNotional" v-bind:class="changeShow.StockEqvNotional" />
|
|
<div class="valid-tooltip">old:{{calcOld.StockEqvNotional}}</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-link" type="button" v-on:click="calc(4)"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="form-group">
|
|
<label>权利金费率</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.1" class="form-control" v-model="calcData.PremiumRate" v-bind:class="changeShow.PremiumRate" />
|
|
<div class="valid-tooltip">old:{{calcOld.PremiumRate}}</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-link" type="button" v-on:click="calc(7)"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>权利金单价</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.1" class="form-control" v-model="calcData.TradeSinglePrice" v-bind:class="changeShow.TradeSinglePrice" />
|
|
<div class="valid-tooltip">old:{{calcOld.TradeSinglePrice}}</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-link" type="button" v-on:click="calc(8)"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>权利金总价</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.1" class="form-control" v-model="calcData.TradePrice" v-bind:class="changeShow.TradePrice" />
|
|
<div class="valid-tooltip">old:{{calcOld.TradePrice}}</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-link" type="button" v-on:click="calc(6)"><i class="fa fa-exchange"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const consBase = {
|
|
SpotPrice: 3000, Notional: 100, TradeAmount: 50,
|
|
StockEqvNotional: 3000 * 100, StockEqvNotionalReal: 3000 * 100,
|
|
TradePrice: 300 * 100, PremiumRate: 300 / 3000, TradeSinglePrice: 300
|
|
};
|
|
var vue1 = new Vue({
|
|
el: '#cardCalc1',
|
|
data: {
|
|
otcformat: (new function () {
|
|
for ([k, v] of Object.entries(window.otcformat.trading)) {
|
|
this[k] = { precision: v.precision };
|
|
}
|
|
}),
|
|
calcUsedPara: {
|
|
CountRatio: 2, IsUsePremiumRate: false, AnnualizeFactor: null, PrincipalRate: null, ParticipationRate: null
|
|
},
|
|
calcOld: Object.assign({}, consBase),
|
|
calcData: Object.assign({}, consBase),
|
|
changeShow: (new function () {
|
|
for ([k, v] of Object.entries(consBase)) {
|
|
this[k] = { "is-valid": false };
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
calc(reason) {
|
|
let self = this;
|
|
Object.assign(this.calcOld, this.calcData);
|
|
Object.assign(this.calcData, this.calcUsedPara);
|
|
_.each(['AnnualizeFactor', 'PrincipalRate', 'ParticipationRate'], x => {
|
|
self.calcData[x] && (self.calcData[x] /= 100);
|
|
});
|
|
tradePricing.tradeCalc.setPrecision(this.otcformat);
|
|
tradePricing.tradeCalc(this.calcData, reason, this.calcUsedPara.CountRatio);
|
|
for ([k, v] of Object.entries(consBase)) {
|
|
this.changeShow[k]["is-valid"] = (this.calcData[k] + "") !== (this.calcOld[k] + "");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |