217 lines
12 KiB
Plaintext
217 lines
12 KiB
Plaintext
@using YLErp.QdpModule.Constants
|
|
@model VolsurfaceEditModel
|
|
@{
|
|
ViewBag.Title = "波动率曲面";
|
|
Layout = "~/Views/Shared/_MainLayout.cshtml";
|
|
}
|
|
@section CSS{
|
|
<link href="~/Style/Css/today_volsurface_edit.css?v=1" rel="stylesheet" />
|
|
}
|
|
@section JS
|
|
{
|
|
<script type="text/javascript">
|
|
var pageVue = @Json.Serialize(Model);
|
|
</script>
|
|
|
|
<script src="~/Statics/libs/export/excellentexport.js?v=@(HtmlUtil.JsVersion)"></script>
|
|
<script src="~/Statics/libs/echarts/echarts.min.js?v=@(HtmlUtil.JsVersion)"></script>
|
|
<script src="~/Statics/libs/echarts/echarts-gl.min.js?v=@(HtmlUtil.JsVersion)"></script>
|
|
<script src="@HtmlUtil.BasicDataJs("品种")"></script>
|
|
<script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
|
|
<script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
|
|
<script src="~/Scripts/app/volatility/volsurfaceeditV2.js?v=@HtmlUtil.JsVersion"></script>
|
|
}
|
|
|
|
<div id="listdiv" class="yc-panel">
|
|
<div class="d-flex form-colored mb-3">
|
|
<div style="display:none">
|
|
<label class="ml-2">标的类型</label>
|
|
<select v-model="Underlying.InstrumentType" v-on:change="changeInstrumentType">
|
|
<option v-for="item in tradeHelper.InstrumentTypes" :value="item.value">{{item.text}}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="ml-2">标的品种</label>
|
|
<input id="VarietyId" name="VarietyId" class="text-box" type="text">
|
|
</div>
|
|
<div>
|
|
<label class="ml-2">标的代码</label>
|
|
<input id="UnderlyingCode" name="UnderlyingCode" class="text-box" type="text">
|
|
</div>
|
|
<div>
|
|
<label class="ml-2">波动率类型</label>
|
|
<select class="chosen-select" style="width: 75px;" v-model="Model.VolType" v-on:change="changeVolType">
|
|
@foreach (var item in ConsVolInfos.VolTypesWithOutAB)
|
|
{
|
|
<option value="@(item)">@(item)</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="ml-2">维护日期</label>
|
|
<input id="maintainDate" type="text" value="@(Model.ValueDate)" />
|
|
</div>
|
|
<div style="padding: 0.25rem" v-show="Underlying.MaturityDate">
|
|
<label class="ml-2">标的到期日</label>
|
|
<label>{{Underlying.MaturityDate}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
@if (PS.Config.Is宏源)
|
|
{
|
|
<div style="float: left;margin-right: 6px;">
|
|
<label class="ml-2">ASK不低于</label>
|
|
<input type="number" step="1" class="numberType" onchange="vue.changeReviewDownLimitMethod()" v-bind:disabled="!pageVue.VolCheckRight" v-model="Model.ReviewDownLimit" id="ReviewDownLimit" />
|
|
<span class="suffix">%</span>
|
|
</div>
|
|
<div>
|
|
<label class="ml-2">BID不高于</label>
|
|
<input type="number" step="1" class="numberType" onchange="vue.changeReviewUpLimitMethod()" v-bind:disabled="!pageVue.VolCheckRight" v-model="Model.ReviewUpLimit" id="ReviewUpLimit" />
|
|
<span class="suffix">%</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="mb-3 ml-2">
|
|
<input type="button" v-bind:disabled="!SetSaveVol" class="btn btn-primary" title="导入波动率数据" value="导入" v-on:click="upLoadVolsurface" />
|
|
<input type="button" class="btn btn-primary" value="导出" v-on:click="excelOutput('tableExcel')" style="margin:0px 5px;" />
|
|
<input type="button" class="btn btn-primary" value="批量导出" v-on:click="downLoadVolsurface()" />
|
|
</div>
|
|
|
|
<div class="mb-3 ml-2">
|
|
<input type="button" v-bind:disabled="!SetSaveVol" v-show="Model.VolType!='报价Bid' && Model.VolType!='报价Ask'" class="btn btn-primary" value="增加行权价" v-on:click="addStrike" />
|
|
<input type="button" v-bind:disabled="!SetSaveVol" v-show="Model.VolType!='报价Bid' && Model.VolType!='报价Ask'" class="btn btn-primary" title="增加期限" value="增加期限" v-on:click="addExpire" style="margin-left:5px;" />
|
|
<label class="" style="margin-left:30px;">插值方法</label>
|
|
<select class="chosen-select" v-bind:disabled="Model.VolType=='报价Bid' || Model.VolType=='报价Ask'" v-model="Model.InterpolationMethod" style="margin-right:30px;" chosenwidth="250px !important">
|
|
@Html.Raw(GlobalData.GetOptions(YLErp.QdpModule.Constants.ConsVolInfos.InterpolationMethods))
|
|
</select>
|
|
<input type="button" class="btn btn-primary" v-bind:disabled="!SetSaveVol" value="清除修改" v-on:click="updateVolTable" />
|
|
<input type="button" class="btn btn-primary" v-bind:disabled="!SetSaveVol" value="保存" title="保存波动率" v-on:click="submitSurface" style="margin:0px 5px;" />
|
|
<div class="dropdown d-inline-block">
|
|
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">刷新图形</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="javascript:;" v-on:click="refresh3DChart()">3D曲面</a>
|
|
<a class="dropdown-item" href="javascript:;" v-on:click="refreshVolSmileChart()">微笑曲线</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex">
|
|
<!--期限-->
|
|
<div style="width:250px;min-width:250px;">
|
|
<table class="table table-bordered table-expire" id="volsurfaceFixed">
|
|
<tr>
|
|
<td colspan="2" class="due-date text-center">期限\{{StrikeDesc}}</td>
|
|
</tr>
|
|
<template v-for="(expire,index) in expireList">
|
|
<tr v-if="expire.ValidState!='InValid'" v-for="(voltype,vindex) in VolTypes">
|
|
<template v-if="vindex==0">
|
|
<td v-bind:rowspan="VolTypes.length" style="width:120px;">
|
|
<template v-if="expire.IsNewExpire==true">
|
|
<input type="text" style="width:50px" class="" v-on:blur="checkAddExpire(event)" id="newAddExpire" />
|
|
<input type="hidden" v-model="expire.Expire" />
|
|
</template>
|
|
<template v-else>
|
|
<input type="checkbox" class="expireCheckBox" />
|
|
<span style="font-size:larger">{{expire.Expire}}</span>
|
|
</template>
|
|
<a href="javascript:void(0)" v-on:click="deleteExpire(expire)"><span class="glyphicon glyphicon-remove" title="点击删除行" style="color:#fff;"></span></a>
|
|
<a href="javascript:void(0)" v-on:click="upExpire(expire)"><span class="glyphicon glyphicon-arrow-up" title="增加" style="color:#fff;"></span></a>
|
|
<a href="javascript:void(0)" v-on:click="downExpire(expire)"><span class="glyphicon glyphicon-arrow-down" title="减少" style="color:#fff;"></span></a>
|
|
</td>
|
|
</template>
|
|
<td style="background:#4b545c;color:#fff;width:100px;">
|
|
{{voltype.VolModelName| SetVolTypeName}}
|
|
<span style="display:none">{{expire.Expire}}</span>
|
|
<a href="javascript:void(0)" v-on:click="upExpireSubLine(expire,voltype)"><span class="glyphicon glyphicon-arrow-up" title="增加" style="color:#fff;"></span></a>
|
|
<a href="javascript:void(0)" v-on:click="downExpireSubLine(expire,voltype)"><span class="glyphicon glyphicon-arrow-down" title="减少" style="color:#fff;"></span></a>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
<!--波动率值-->
|
|
<div id="table-wrap-scroll" style="position:relative">
|
|
<table class="table table-bordered table-volinput" id="volsurface">
|
|
<tr>
|
|
<td v-for="(strike,index) in orderStrikes" v-if="strike.ValidState!='InValid'" style="width:100px;" class="text-center">
|
|
<template v-if="strike.IsNewStrike==true">
|
|
<input type="number" style="width:90px" step="0.01" class="btn-sm" v-on:blur="checkAddStrike()" id="newAddStrike" />
|
|
<input type="hidden" v-model="strike.Strike" />
|
|
</template>
|
|
<template v-else>
|
|
<span v-if="Model.VolSurfaceMode=='MoneynessVol'">{{strike.Strike | toPercent}}</span>
|
|
<span v-else>{{strike.Strike | FixNumber}}</span>
|
|
</template>
|
|
<a href="javascript:void(0)" v-show="Model.VolType!='报价Bid' && Model.VolType!='报价Ask'" v-on:click="deleteStrike(strike)"><span class="glyphicon glyphicon-remove" title="点击删除列"></span></a>
|
|
</td>
|
|
</tr>
|
|
<template v-for="(expire,index) in expireList">
|
|
<tr v-if="expire.ValidState!='InValid'" v-for="(voltype,vindex) in VolTypes">
|
|
<template v-for="(strike,strikeIndex) in orderStrikes">
|
|
<template v-if="strike.ValidState!='InValid'">
|
|
<td><input class="volInput" type="number" max="100" step="0.1" :voltype="voltype.VolModelName" :Expire="expire.Expire" :Strike="strike.Strike" v-on:blur="checkvols(event)" v-model="getVol(expire,strike,voltype).PercentVol">%</td>
|
|
</template>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!---历史波动率-->
|
|
<div class="mb-3">
|
|
<div>
|
|
<label class="ml-2">历史波动率天数</label>
|
|
<select class="chosen-select" id="lookbackDays">
|
|
<option value="30" selected>30天</option>
|
|
<option value="60">60天</option>
|
|
<option value="90">90天</option>
|
|
</select>
|
|
<input type="button" class="btn btn-primary" value="刷新历史波动率" title="刷新历史波动率" v-on:click="historicalVolCurve()" style="margin:0px 5px;" />
|
|
</div>
|
|
<div id="historicalVolCurveChart" style="height:400px;width:700px;"></div>
|
|
</div>
|
|
|
|
<div class="form-group form-group-lg">
|
|
<div style="display:none;float:left;margin-right:80px;">
|
|
<label class="col-sm-2 control-label formGroupInputLarge">欧式期权行权日</label>
|
|
<div class="col-sm-4">
|
|
<input type="text" class="text datepicker" id="TempExerciseDate" v-model="Underlying.ExerciseDate" />
|
|
</div>
|
|
</div>
|
|
<div style="display:none;float:left;margin-right:80px;">
|
|
<label class="col-sm-2 control-label">标的价格</label>
|
|
<div class="col-sm-4" style="min-width:210px;">
|
|
<input type="number" class="number" v-model="Underlying.Price" />
|
|
<a href="javascript:void(0)" v-on:click="getUnderlyingPrice"><span title="刷新价格" class="glyphicon glyphicon-refresh"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--导出用-->
|
|
<a onfocus="this.blur();" style="display:none;" download="code.xls" id="exceloutput" class="ipt-todo hide">code</a>
|
|
<div class="sr-only" :update="updateKey.volstate">
|
|
<div :id="'table'+v.VolModelName" v-for="(v,i) in VolTypes">
|
|
<table>
|
|
<tr>
|
|
<th>{{Underlying.Code}}</th>
|
|
<th v-if="!s.IsNewStrike" v-for="(s,index) in orderStrikes">
|
|
<template v-if="Model.VolSurfaceMode=='MoneynessVol'">
|
|
{{s.Strike | toPercent}}
|
|
</template>
|
|
<template v-else>
|
|
{{s.Strike | FixNumber}}
|
|
</template>
|
|
</th>
|
|
</tr>
|
|
<tr v-if="!e.IsNewExpire" v-for="(e ,i) in expireList">
|
|
<th>{{e.Expire}}</th>
|
|
<th v-if="!s.IsNewStrike" v-for="(s,ii) in orderStrikes">{{getVol(e, s, v).Vol}}</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="exceloutputWrap" v-once></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="volSurfaceChart" style="width: 500px; height: 500px;padding:50px; display: none;"></div> |