zszq-trs/YLErpWeb/Views/riskmonitor/_GuoXinRisk.cshtml

@{
    Layout = null;
}
<style>
    .col-event-gruop {
        width: 100px;
    }

    .col-event-type {
    }

    .col-event-warning-y {
        width: 90px;
        margin: auto;
        font-size: 8px;
    }

    .col-event-warning-yn {
        width: 30px;
        margin: auto;
    }
    .col-event-type-detail {
        width: 30px;
        margin: auto;
        font-size:12px;
        color:#739cf2;
    }
    .col-event-warning-r {
        width: 90px;
        margin: auto;
        font-size: 8px;
    }

    .col-event-warning-rn {
        width: 30px;
        margin-right: 50px;
        margin: auto;
        padding-right: 50px;
    }

    .row-main {
        height: 35px;
        background-color: #F2F2F2;
        width: 550px;
        border: 1px solid #D7D7D7
    }

    .col-event-type {
        margin: auto;
    }
    .row-Summary {
        height: 35px;
        background-color: white;
        width: 550px;
        font-weight: 600;
    }

    .row-details {
        height: 35px;
        background-color: white;
        width: 550px;
        border-bottom: 0.5px solid #F2F2F2
    }

    .row-head {
    }
</style>
<div class="p-4" id="guoxinRiskMain" v-on:click.stop.prevent="return false;">
    <div class="row row-head">
        <div class="col-auto col-event-gruop">
            <span class="badge badge-secondary"></span>
        </div>
        <div class="row row-Summary">
            <div class="col col-event-type">
                风险情况总览
            </div>

            <div class="col-auto col-event-warning-y">
                黄色预警
            </div>
            <div class="col-auto col-event-warning-yn">

                <span class="badge badge-pill badge-dark">{{msg.summary.YellowWarning}}</span>
            </div>
            <div class="col-auto col-event-warning-r">红色预警</div>
            <div class="col-auto col-event-warning-rn">
                <span class="badge badge-pill badge-dark">{{msg.summary.RedWarning}}</span>
            </div>
        </div>
    </div>
    <!--限额监控-->
    <div class="">
        <div class="row collapse-title" v-on:click="toggle">
            <div class="col-auto col-event-gruop">
                <span class=""></span>
            </div>
            <div class="row row-main">
                <div class="col col-event-type">整体业务维度 </div>
                <div class="col col-event-type-detail">
                    <a v-on:click="overallBusinessDetail">详情</a>
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警

                </div>

                <div class="col-auto col-event-warning-yn">
                    <span class="" style="font-weight:700;">{{msg.OverallBusiness_summary.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span class=""  style="font-weight:700;">{{msg.OverallBusiness_summary.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    名义本金规模
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.OverallBusiness_StockEqvNotional.YellowWarning==0">{{msg.OverallBusiness_StockEqvNotional.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.OverallBusiness_StockEqvNotional.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.OverallBusiness_StockEqvNotional.RedWarning==0">{{msg.OverallBusiness_StockEqvNotional.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.OverallBusiness_StockEqvNotional.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    Delta金额
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.OverallBusiness_Delta.YellowWarning==0">{{msg.OverallBusiness_Delta.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.OverallBusiness_Delta.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.OverallBusiness_Delta.RedWarning==0">{{msg.OverallBusiness_Delta.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.OverallBusiness_Delta.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    Gamma金额
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.OverallBusiness_Gamma.YellowWarning==0">{{msg.OverallBusiness_Gamma.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.OverallBusiness_Gamma.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.OverallBusiness_Gamma.RedWarning==0">{{msg.OverallBusiness_Gamma.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.OverallBusiness_Gamma.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    Vega金额
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.OverallBusiness_Vega.YellowWarning==0">{{msg.OverallBusiness_Vega.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.OverallBusiness_Vega.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.OverallBusiness_Vega.RedWarning==0">{{msg.OverallBusiness_Vega.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.OverallBusiness_Vega.RedWarning}}</span>
                </div>
            </div>
        </div>
      
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    Theta
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.OverallBusiness_Theta.YellowWarning==0">{{msg.OverallBusiness_Theta.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.OverallBusiness_Theta.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.OverallBusiness_Theta.RedWarning==0">{{msg.OverallBusiness_Theta.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.OverallBusiness_Theta.RedWarning}}</span>
                </div>
            </div>
        </div>
          <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    浮动盈亏
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.OverallBusiness_PositionPnl.YellowWarning==0">{{msg.OverallBusiness_PositionPnl.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.OverallBusiness_PositionPnl.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.OverallBusiness_PositionPnl.RedWarning==0">{{msg.OverallBusiness_PositionPnl.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.OverallBusiness_PositionPnl.RedWarning}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="">
        <div class="row collapse-title" v-on:click="toggle">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-main">
                <div class="col col-event-type">品种维度</div>
                <div class="col col-event-type-detail"> <a v-on:click="VarietyDetail">详情</a></div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span class="" style="font-weight:700;">{{msg.Variety_summary.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span class="" style="font-weight:700;">{{msg.Variety_summary.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    名义本金规模
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.Variety_StockEqvNotional.YellowWarning==0">{{msg.Variety_StockEqvNotional.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.Variety_StockEqvNotional.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.Variety_StockEqvNotional.RedWarning==0">{{msg.Variety_StockEqvNotional.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.Variety_StockEqvNotional.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    Delta金额
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.Variety_Delta.YellowWarning==0">{{msg.Variety_Delta.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.Variety_Delta.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.Variety_Delta.RedWarning==0">{{msg.Variety_Delta.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.Variety_Delta.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    Gamma金额
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.Variety_Gamma.YellowWarning==0">{{msg.Variety_Gamma.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.Variety_Gamma.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.Variety_Gamma.RedWarning==0">{{msg.Variety_Gamma.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.Variety_Gamma.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    Vega金额
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.Variety_Vega.YellowWarning==0">{{msg.Variety_Vega.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.Variety_Vega.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.Variety_Vega.RedWarning==0">{{msg.Variety_Vega.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.Variety_Vega.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    Theta
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.Variety_Theta.YellowWarning==0">{{msg.Variety_Theta.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.Variety_Theta.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.Variety_Theta.RedWarning==0">{{msg.Variety_Theta.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.Variety_Theta.RedWarning}}</span>
                </div>
            </div>
        </div>
        <div class="row collapse" style="font-size: 12px;">
            <div class="col-auto col-event-gruop">
            </div>
            <div class="row row-details">
                <div class="col col-event-type">
                    浮动盈亏
                </div>
                <div class="col-auto col-event-warning-y">
                    黄色预警
                </div>
                <div class="col-auto col-event-warning-yn">
                    <span v-if="msg.Variety_PositionPnl.YellowWarning==0">{{msg.Variety_PositionPnl.YellowWarning}}</span>
                    <span v-else class="badge badge-pill badge-warning">{{msg.Variety_PositionPnl.YellowWarning}}</span>
                </div>
                <div class="col-auto col-event-warning-r">红色预警</div>
                <div class="col-auto col-event-warning-rn">
                    <span v-if="msg.Variety_PositionPnl.RedWarning==0">{{msg.Variety_PositionPnl.RedWarning}}</span>
                    <span v-else class="badge badge-pill badge-danger">{{msg.Variety_PositionPnl.RedWarning}}</span>
                </div>
            </div>
        </div>
    </div>

    <span style="font-size:12px;">更新时间：{{time}}</span>
</div>

<script>
    let fn = window.onload;
    window.onload = function () {
        fn && fn();

        window.guoxinVue = new Vue({
            el: "#guoxinRiskMain",
            data: {
                msg: {
                    summary: {}, OverallBusiness_summary: {}, OverallBusiness_Delta: {}, OverallBusiness_StockEqvNotional: {}, OverallBusiness_Gamma: {},
                    OverallBusiness_Vega: {}, OverallBusiness_PositionPnl: {}, OverallBusiness_Theta: {},
                    Variety_summary: {}, Variety_Delta: {}, Variety_StockEqvNotional: {}, Variety_Gamma: {}, Variety_Vega: {}, Variety_PositionPnl: {}, Variety_Theta: {}

                },
                time: {}
            },
            mounted() {
                let self = this;
                setInterval(function () {
                    $.ajax({
                        type: "Post",
                        url: "/risk/QuotaMonitorMsgQuery",
                        data: {},
                        success: function (data) {
                            self.msg = data;

                        },
                        error: function (msg) {
                        }
                    });
                    $.ajax({
                        type: "Post",
                        url: "/risk/QuotaMonitorMsgUpdateTime",
                        data: {},
                        success: function (data) {
                            self.time = data;

                        },
                        error: function (msg) {
                        }
                    });
                }, 1000);

            },
            methods: {
                toggle: function () {
                    $("#guoxinRiskMain").find(".row-main").css("color", "black");
                    let $e = $(event.target);
                    $e.is('.collapse-title') || ($e = $e.closest('.collapse-title'));
                    $e.nextAll('.collapse').collapse('toggle');
                    $e.find(".row-main").css("color", "#027DB4")

                },
                overallBusinessDetail: function ()
                {
                    $(location).attr('href', '/risk/quotaMonitor?SummaryType=整体业务汇总');
                },
                VarietyDetail: function () {
                    $(location).attr('href', '/risk/quotaMonitor?SummaryType=品种汇总');
                }
            },

        });
    };

</script>