WEP_V2.1.3/SourceCode/We.App/WeApp.Web/Views/Train/Eval.cshtml

@using WeApp.Configuration
@using WeApp.Authorization
@using WeApp.TrainingCampGroup.Dto
@using WeApp.Views.Shared.Modals

@{
    ViewBag.Title = "演练培训营评估";
    string activeMenu = PermissionNames.PagesTrainMgEvalMg;
    ViewBag.ActiveMenu = activeMenu;
    string campNo = ViewBag.CampNo, campState = ViewBag.CampState, groupState = ViewBag.GroupState;
    List<CampGroupDto> groups = ViewBag.Groups;
    List<string> groupNos = groups?.Select(a => a.Id).ToList() ?? new List<string>();
}
@section css{
    <style>
        .cmd-box .btn {
            min-width: 100px;
        }

        .group-round-info {
            margin-bottom: 7px;
        }

        .block-box {
            color: #3cb371;
            padding: 5px 0;
            cursor: none;
        }

            .block-box .iconfont {
                padding-right: 5px;
                font-size: 13px;
            }

            .block-box:nth-of-type(2n+1) {
                border-right: 1px solid #3cb371;
            }

            .block-box .block-title {
                text-align: center;
                font-size: 0.9rem;
                font-weight: 600;
                color: inherit;
                padding-bottom: 5px;
                border-bottom: 1px solid;
            }

        .flow-box {
            color: #00ced1;
            border: 1px solid;
            border-radius: 4px;
            width: calc(33% - 10px);
            padding: 5px 0;
            margin: 5px;
            padding: 3px 0;
            float: left;
        }

            .flow-box .flow-title {
                text-align: center;
                padding-bottom: 3px;
                border-bottom: 1px solid;
                font-weight: 600;
                font-size: 0.7rem;
                font-weight: 600;
            }

            .flow-box .flow-info {
                float: left;
                width: 100%;
            }

            .flow-box .scene-info {
                width: 100%;
                display: flex;
                flex: auto;
                padding: 0 5px;
            }

                .flow-box .scene-info .scene-name {
                    width: 70%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .flow-box .scene-info .scene-score {
                    width: 30%;
                    text-align: right;
                    white-space: nowrap;
                }

            .flow-box .scene-arrow {
                color: #aaa;
                text-align: center;
                line-height: 8px;
            }

                .flow-box .scene-arrow .iconfont {
                    font-size: .5rem;
                }

        .round-box.end .block-box,
        .block-box.end {
            color: #ff4500
        }

            .round-box.end .flow-box,
            .block-box.end .flow-box,
            .flow-box.end,
            .round-box.end .flow-info,
            .block-box.end .flow-info,
            .flow-box.end .flow-info,
            .flow-info.end {
                color: #aaa;
                font-weight: 600;
            }
    </style>

    <style>
        .cmd-input-box {
            display: none;
        }
    </style>

    <style>
        #group-path-box {
            height: calc(100vh - 165px);
        }
    </style>
    @*<link href="~/Content/Css/path.min.css" rel="stylesheet" />*@
}

<div class="row">
    <div class="col-md-7">
        <div>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="pill" href="#tab-content-info" role="tab">演练信息</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" id="tab-path" href="#tab-content-path" role="tab">演练路径</a>
                </li>
            </ul>
        </div>
        <div class="tab-content" style="padding-top: 3px;">
            <div class="tab-pane fade show active" id="tab-content-info">
                <div id="group-info-box"></div>
            </div>
            <div class="tab-pane fade" id="tab-content-path">
                <div id="group-path-box"></div>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="row cmd-box">
            <div class="col-md-12" style="margin-bottom: 5px">
                <span style="float: left;">
                    <a href="javascript:Cmd()" class="btn btn-danger btn-sm">
                        <span>
                            <i class="iconfont icon-display-code"></i>
                            <span>指令</span>
                        </span>
                    </a>
                    <a href="javascript:Refresh()" class="btn btn-default btn-sm">
                        <span>
                            <i class="iconfont icon-sync-alt"></i>
                            <span>刷新</span>
                        </span>
                    </a>
                </span>
                <span style="float: right;">
                    <a href="javascript:SaveScore()" class="btn btn-success btn-sm">
                        <span>
                            <i class="iconfont icon-save"></i>
                            <span>保存</span>
                        </span>
                    </a>
                    <a href="javascript:SendScore()" class="btn btn-danger  btn-sm">
                        <span>
                            <i class="iconfont icon-release"></i>
                            <span>发送</span>
                        </span>
                    </a>
                </span>
            </div>
        </div>
        <div id="group-score-box"></div>
    </div>
</div>

@section modal{
    <!--Main Modal-->
    @{
        var modal = new ModalViewModel("分组", new ModalBodyViewModel(new List<Input>()
{
            new InputHide("id"),
            new InputHide("campNo"),
            new Input("name", "分组名称"),
        }));
    }
    @Html.Partial("Modals/_Modal", modal)
    <!--CMD Modal-->
    <section>
        <div class="modal fade" id="modal-cmd" tabindex="-1" aria-modal="true">
            <div class="modal-dialog modal-lg" style="">
                <div class="modal-content">
                    @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("发送指令"))
                    <div class="modal-body" style="padding: 0">

                        <form class="form-horizontal " id="form" novalidate="novalidate" style="">
                            <div class="form-group row">
                                <label class=" iwb-label iwb-label-sm iwb-label-required" for="no">培训营</label>
                                <div class="">
                                    <div class="input-group input-group-sm">
                                        <select class="form-control required" id="no" name="no" placeholder="请选择培训营..." style="width: 100%">
                                            <option value="@(campNo)" selected="" data-type="0">全部分组</option>
                                            @if (groups != null && groups.Any())
                                            {
                                                foreach (var g in groups)
                                                {
                                                    <option value="@(g.Id)" data-type="1">@(g.Name)</option>
                                                }
                                            }
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class=" iwb-label iwb-label-sm iwb-label-required" for="cmd-type">指令类型</label>
                                <div class="">
                                    <div class="input-group input-group-sm">
                                        <select class="form-control required" id="cmd-type" name="cmd-type" placeholder="请选择操作指令..." style="width: 100%">
                                            <option value="" selected="">请选择指令类型...</option>
                                            <option value="o">操作指令</option>
                                            <option value="p">页面指令</option>
                                            <option value="e">特效指令</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="cmd-o cmd-input-box">
                                <div class="form-group row">
                                    <label class=" iwb-label iwb-label-sm iwb-label-required" for="cmd-o">操作指令</label>
                                    <div class="">
                                        <div class="input-group input-group-sm">
                                            <select class="form-control required" id="cmd-o" name="cmd-o" placeholder="请选择操作指令..." style="width: 100%">
                                                <option value="" selected="">请选择操作指令...</option>
                                                <option value="@(CampGroupStateDefinition.Ready)" data-url="ChangeState">准备就绪</option>
                                                <option value="@(CampGroupStateDefinition.HeadQuarterBuilding)" data-url="ChangeState">组建指挥部</option>
                                                <option value="1" data-url="StartCamp">开始演练</option>
                                                <option value="2" data-url="NextFlowNode">下一情景节点</option>
                                                <option value="3" data-url="NextRound">下一轮次</option>
                                                <option value="4" data-url="WaitReport">等待报告</option>
                                                <option value="5" data-url="StopCamp">推送报告</option>
                                                <option value="6" data-url="EndCamp">结束演练</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cmd-p cmd-input-box">
                                <div class="form-group row">
                                    <label class=" iwb-label iwb-label-sm iwb-label-required" for="cmd-p">页面指令</label>
                                    <div class="">
                                        <div class="input-group input-group-sm">
                                            <select class="form-control required" id="cmd-p" name="cmd-p" placeholder="请选择操作指令..." style="width: 100%">
                                                <option value="" selected="">请选择页面指令...</option>
                                                <option value="1">刷新所有页面</option>
                                                <option value="2">刷新学员页面</option>
                                                <option value="3">刷新指挥长页面</option>
                                                <option value="4">刷新公共屏页面</option>
                                                <option value="5">刷新专家页面</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cmd-e cmd-input-box">
                                <div class="form-group row">
                                    <label class=" iwb-label iwb-label-sm iwb-label-required" for="cmd-e">特效指令</label>
                                    <div class="">
                                        <div class="input-group input-group-sm">
                                            <select class="form-control required" id="cmd-e" name="cmd-e" placeholder="请选择操作指令..." style="width: 100%">
                                                <option value="" selected="">请选择特效指令...</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    @Html.Partial("Modals/_ModalFooter", "0")
                </div>
            </div>
        </div>
    </section>
}
@section js{
    <script>
        abp.signalr = abp.signalr || {};
        abp.signalr.autoConnect = false;
    </script>
}
@section scripts
{
    <script src="~/Content/Js/scene-path.js"></script>
    <script type="text/javascript">
        abp.signalr.hubs = abp.signalr.hubs || {};
        abp.signalr.hubs.iwbHub = $.connection.iwbHub;
        var iwbHub = abp.signalr.hubs.iwbHub;
        //Connect to the server
        abp.signalr.connect = function() {
            $.connection.hub.start().done(function() {
                abp.log.debug('Connected to SignalR server!'); //TODO: Remove log
                abp.event.trigger('abp.signalr.connected');
                abp.signalr.hubs.common.server.register().done(function() {
                    abp.log.debug('Registered to the SignalR server!'); //TODO: Remove log
                });
                if (iwbHub) {
                    iwbHub.server.register('@(campNo)').done(function() {
                        abp.log.debug('@(campNo)' + ' Registered to the SignalR server!');
                    });
                    @if (groupNos.Any())
                    {
                        foreach (var groupNo in groupNos)
                        {
                            <text>
                                iwbHub.server.register('@(groupNo)').done(function() {
                                    abp.log.debug('@(groupNo)' + ' Registered to the SignalR server!');
                                });
                            </text>
                        }
                    }
                }
            });
        };
        var campNo = '@(campNo)', roundIndex = 1;
        $(function() {
            abp.signalr.connect();
            PreLoad();
            $('#modal-cmd #cmd-type').on('change.cmd',
                function() {
                    var v = $(this).val();
                    $('#modal-cmd .cmd-input-box').hide();
                    if (v) {
                        $('#modal-cmd .cmd-' + v).fadeIn();
                    }
                });

            CampGroupInfo();

            $('#tab-path').on('shown.bs.tab', ScenePath);
        });

        function Refresh() {
            CampGroupInfo();
        }

        function ScenePath() {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetCampRunningInfos?no=@(campNo)',
                success: function(res) {
                    var str = FormatterScenePath(res);
                    $('#group-path-box').html(str);
                }
            });
        }

        var _loadCount = 0, _loadTimeout;
        function PreLoad() {
            _loadCount++;
            console.log("加载数据中... " + _loadCount);
            if (!$('#modal-cmd .modal-title .load-box').length) {
                $('#modal-cmd .modal-title ').append(`<span class="load-box" > <span style="padding-left:20px;color:red;">正在加载演练数据</span></span>`);
            }
            if (_loadCount > 3) {
                return;
            }
            $.iwbAjax5({
                url: abp.appUrl + "Query/LoadCampPre?no=@campNo&type=1",
                timeout: 1000 * 60 * 5,
                success:() => {
                    clearTimeout(_loadTimeout);
                    $('#modal-cmd .modal-title .load-box').html(`(演练数据已加载)`);
                    $('.cmd-box .btn').eq(2).before(`<span style="color:red;margin:0 10px;">演练数据已加载</span>`);
                },
                complete: () => {
                    console.log("加载中... " + _loadCount);
                }
            });
            clearTimeout(_loadTimeout);
            _loadTimeout = setTimeout(PreLoad, 1000 * 60 * 2);
        }
    </script>

    <script id="group-info">

        function CampGroupInfo() {
            $.iwbAjax4({
                url: abp.appUrl + "Eval/GetCampDetail?no=" + campNo,
                success: function(res) {
                    CampGroupFormatter(res);
                }
            });
        }

        function CampGroupFormatter(data) {
            $('#group-info-box').empty();
            $('#group-score-box').empty();
            if (data && data.groups && data.groups.length > 0) {
                ParseScoreRule(data);
                data.groups.forEach(function(g) {
                    //test(g);
                    GroupInfoFormatter(g);
                    GroupScoreFormatter(g, data);
                    OverlayScrollbar($('.group-info-box >  .card-body,.group-score-box .card-body>div>div:first'));
                    //$('.group-info-box >  .card-body,.group-score-box .card-body>div>div:first').overlayScrollbars({
                    //    className: "os-theme-thin-dark",
                    //    resize: "n", //[ "none", "both", "horizontal", "vertical" ]shorthand: [ "n", "b", "h", "v" ]
                    //    normalizeRTL: true, //是否应规范化RTL滚动。
                    //    sizeAutoCapable: true,
                    //    clipAlways: true,
                    //    paddingAbsolute: false,
                    //    overflowBehavior: {
                    //        x: "v-h", //[ "hidden", "scroll", "visible-hidden", "visible-scroll" ]shorthand: [ "h", "s", "v-h", "v-s" ]
                    //        y: "s"
                    //    },
                    //    scrollbars: {
                    //        dragScrolling: true,
                    //        clickScrolling: true,
                    //        visibility: "a", //[ "visible", "hidden", "auto" ]shorthand: [ "v", "h", "a" ]
                    //        autoHide: "n", //[ "never", "scroll", "leave", "move" ]shorthand: [ "n", "s", "l", "m" ]
                    //        autoHideDelay: 800
                    //    }
                    //});
                });
            }
        }

        //解析评分规则
        function ParseScoreRule(data) {
            var rule = data.scoreRule;
            var score = {};
            var arr = rule.split('@@');
            var xArr = arr[0].split('|');
            var zArr = arr[1].split('|');
            var dArr = arr[2].split('|');
            var xp = Number(xArr[0]),
                xs = Number(xArr[1]),
                zp = Number(zArr[0]),
                zs = Number(zArr[1]),
                dp = Number(dArr[0]),
                ds = Number(dArr[1]);
            var tp = xp + zp + dp;
            score.xtScore = xs;
            score.zjScore = zs;
            score.dzScore = ds;
            score.xtTotal = data.roundScore * xp / tp;
            score.zjTotal = data.roundScore * zp / tp;
            score.dzTotal = data.roundScore * dp / tp;
            data.score = score;
            return data;
        }

        //格式化分组情景信息
        function GroupInfoFormatter(group) {
            var round = group.runningInfo
                ? group.runningInfo.currentRoundIndex
                : group.roundIndex
                ? group.roundIndex
                : 1;
            var $tool = $('<div>', { 'class': 'card-tools ' })
                .append(
                    '<button type="button" class="btn btn-tool btn-primary" data-card-widget="collapse"><i class="fas fa-minus"></i></button>');
            var stateText = group.campGroupState == @CampGroupStateDefinition.Ready
                ? "演练已就绪"
                : group.campGroupState == @CampGroupStateDefinition.HeadQuarterBuilding
                ? "正在组建指挥部"
                : group.campGroupState == @CampGroupStateDefinition.HeadQuarterBuilded
                ? "指挥部已组建"
                : "";
            var $head = $('<div>', { 'class': 'card-header ' })
                .append(
                    '<h3 class="card-title"><i class="iconfont icon-resource" style="padding-right:5px;"></i>{0}</h3>'
                    .format(group.name))
                .append('<div class="header-ex" style="float: left; margin-left:20px">{0}</div>'.format(stateText))
                .append($tool);
            var $bodyRow = $('<div>', { 'class': 'row rounds-box' });
            RoundsFormatter(group.runningInfo, $bodyRow);
            //if (group.runningInfo && group.runningInfo.roundInfo && group.runningInfo.roundInfo.length > 0) {
            //    group.runningInfo.roundInfo.forEach(function (r) {
            //        if (r.isStart) {
            //            RoundFormatter(r,  $bodyRow);
            //        }
            //    });
            //}

            var $body = $('<div>',
                {
                    'class': 'card-body ',
                    'id': 'group_info_' + group.id,
                    'css': { 'padding': '5px 15px', 'height': '200px' }
                }).append($bodyRow);
            var $box = $('<div>',
                    {
                        'class': 'card card-primary group-info-box',
                        'id': 'group_info_box_' + group.id,
                        'data': { id: group.id, round: round }
                    }).append($head)
                .append($body);

            $('#group-info-box').append($box);
        }

        //格式化分组评分
        function GroupScoreFormatter(group, camp) {
            var round = group.runningInfo
                ? group.runningInfo.currentRoundIndex
                : group.roundIndex
                ? group.roundIndex
                : 1;
            var tagScore, xtScore = 0, zjScore = 0, dzScore = 0, ckScore = 0, fScore = 0;
            if (group.groupScore) {
                var groupScore = group.groupScore.find(function(v) {
                    return v.roundIndex === round;
                });
                if (groupScore) {
                    xtScore = groupScore.systemScore || 0;
                    zjScore = groupScore.specialistScore || 0;
                    dzScore = groupScore.audienceScore || 0;
                    ckScore = groupScore.referenceScore || 0;
                    fScore = groupScore.finalTotalScore || 0;
                    if (groupScore.behaviorTagScoreInfo) {
                        try {
                            tagScore = JSON.parse(groupScore.behaviorTagScoreInfo);
                        } catch (e) {
                            console.log(e);
                        }
                    }
                }
            }
            var $tool = $('<div>', { 'class': 'card-tools ', style: 'display:inline-flex' });
            $tool.append('<label class="mr-2 mb-0"><input  class="mr-1" type="radio" name="vr_{0}" value="" checked />VR未执行</label>'.format(group.id));
            $tool.append('<label class="mr-2 mb-0 text-danger"><input class="mr-1" type="radio" name="vr_{0}" value="1" />失败</label>'.format(group.id));
            $tool.append('<label class="mr-3 mb-0 text-success"><input class="mr-1" type="radio" name="vr_{0}" value="2" />成功</label>'.format(group.id));
            $tool.append('<button type="button" class="btn btn-tool btn-primary" data-card-widget="collapse"><i class="fas fa-minus"></i></button>');
            var $head = $('<div>', { 'class': 'card-header ' })
                .append(
                    '<h3 class="card-title"><i class="iconfont icon-resource" style="padding-right:5px;"></i>{0}</h3>'
                    .format(group.name))
                .append(
                    '<div class="header-ex" style="display:{1};float: left; margin-left:20px">当前第<span class="round-index" style="color:red;font-weight:600; padding:0 5px;">{0}</span>轮</div>'
                    .format(round, group.campGroupState == @(CampGroupStateDefinition.Run) ? "block" : "none"))
                .append($tool);
            var $tagBox = $('<div>', { 'class': 'row tag-box', 'css': { 'maxHeight': '180px' } });
            var tagArr = camp.evalBehaviorTags ? camp.evalBehaviorTags.split(',') : [];
            var tagInput =
                '<div class="tag-info col-md-4" data-tag="{0}"><div class="form-group" style="margin-bottom: 5px;"><div class="input-group  input-group-sm"><div class="input-group-prepend"><span class="input-group-text" style="min-width: 68px;">{0}</span></div><input type="text" class="form-control form-control-sm system-score number" value="{1}" placeholder="系统分" readonly="" data-tag-no="{0}" data-score-type="ts" autocomplete="off"><input type="text" class="form-control form-control-sm correct-score number" value="{2}" placeholder="校对分" data-score-type="tc" autocomplete="off" style="color:red"><input type="hidden" class="number" value="{3}" data-score-type="tt" autocomplete="off"></div></div></div>';
            tagArr.forEach(function(v) {
                var ts = 0, tc = 0,tt=0;
                if (tagScore) {
                    var tag = tagScore.find(function(val) {
                        return val.tagNo === v;
                    });
                    if (tag) {
                        ts = tag.systemScore;
                        tc = tag.correctionScore;
                        tt = tag.totalScore;
                    }
                }
                $tagBox.append(tagInput.format(v, ts, tc,tt));
            });
            var $left = $('<div>', { 'class': '', 'css': { 'width': 'calc(100% - 150px)', 'padding': '0 5px' } });
            $left.append($tagBox);
            var sysScoreInput =
                    '<div class="input-group  input-group-sm" style="margin-bottom: 5px;"><div class="input-group-prepend"><span class="input-group-text">{0}</span></div><input type="text" class="form-control form-control-sm number" data-score-type="{1}" value="{2}" readonly="readonly" autocomplete="off" style="color:red"></div>',
                scoreInput =
                    '<div class="input-group  input-group-sm" style="margin-bottom: 5px;"><div class="input-group-prepend"><span class="input-group-text">{0}</span></div><input type="text" class="form-control form-control-sm number" data-score-type="{1}" value="{2}" autocomplete="off" style="color:red" onchange="{3}"></div>',
                scoreChange = 'CalcScore(this)';
            var $right = $('<div>',
                    { 'class': 'score-box', 'css': { 'width': '150px', 'padding': '0 5px' }, 'data': camp.score })
                .append(sysScoreInput.format('系统评分', 'x', xtScore))
                .append(scoreInput.format('专家评分', 'z', zjScore, scoreChange))
                .append(scoreInput.format('大众评分', 'd', dzScore, scoreChange))
                .append(sysScoreInput.format('参考评分', 'c', ckScore))
                .append(scoreInput.format('评分矫正', 'f', fScore, ''));

            var $body = $('<div>',
                    {
                        'class': 'card-body ',
                        'id': 'group_score_' + group.id,
                        'css': { 'padding': '12.5px 10px 7.5px', 'height': '200px' }

                    })
                .append($('<div>', { 'class': 'row' }).append($left).append($right));
            var $box = $('<div>',
                    {
                        'class': 'card card-primary group-score-box',
                        'data': { id: group.id, round: round }
                    }).append($head)
                .append($body);

            $('#group-score-box').append($box);
        }
    </script>

    <script id="cmd-script">
        function Cmd() {
            $('#modal-cmd .cmd-input-box').hide();
            OpenModal({
                modal: 'modal-cmd',
                data: { 'cmd-type': '', no: '@(campNo)' },
                save: SendCmd
            });
        }

        function SendCmd() {
            var cmdType = $('#modal-cmd #cmd-type').val();
            var no = $('#modal-cmd #no').val();
            switch (cmdType) {
            case 'o':
                OperationCmd(no);
                break;
            case 'p':
                PageCmd(no);
                break;
            case 'e':
                EffectCmd(no);
                break;
            default:
                break;
            }
        }

        function OperationCmd(no) {
            var cmd = $('#modal-cmd #cmd-o').val();
            var url = $('#modal-cmd #cmd-o option:selected').data('url');
            if (cmd && url) {
                var type = $('#modal-cmd #no option:selected').data('type');
                var campNo = "none", groupNo = "none";
                if (type == 0) {
                    campNo = no;
                } else {
                    groupNo = no;
                }
                url = abp.appUrl + 'Eval/{0}?campNo={1}&groupNo={2}'.format(url, campNo, groupNo);
                if (cmd >= 10) {
                    url += '&groupState={0}'.format(cmd);
                }
                $.iwbAjax1({
                    url: url,
                    data: {},
                    modal: $('#modal-cmd'),
                    success: function() {
                        if ($('#modal-cmd #cmd-o').val()==3) {
                            $(".tag-box input").val('0');
                        }
                    }

            });
            }
        }

        function PageCmd(no) {
            var cmd = $('#modal-cmd #cmd-p').val();
            if (cmd) {
                iwbHub.server.sendReload(no, cmd).done(function() {
                    abp.log.debug('PageReload:', no, cmd);
                });
                abp.message.warn('指令已发送！');
            }
        }

        function EffectCmd(no) {
            var cmd = $('#modal-cmd #cmd-e').val();
            if (cmd) {

            }
        }
    </script>

    <script id="round">
        function RoundsFormatter(data, $appendTo) {
            //if (data && data.children && data.children.length > 0) {
            //    data.children.forEach(function (r) {
            //        if (r.isStart) {
            //            RoundFormatter(r, $appendTo);
            //        }
            //    });
            //}
            if (data && data.ch && data.ch.length > 0) {
                data.ch.forEach(function (r) {
                    if (r.r) {
                        RoundFormatter(r, $appendTo);
                    }
                });
            }
        }

        function RoundFormatter(data, $appendTo) {
            var $box = $('<div>');
            //if (data) {
            //    var score = data.correctionScore ? data.correctionScore : data.systemScore || 0;
            //    var $tool = $('<div>', { 'class': 'card-tools ' })
            //        .append(
            //            '<button type="button" class="btn btn-tool btn-info" data-card-widget="collapse"><i class="fa fa-minus"></i></button>');
            //    var $head = $('<div>', { 'class': 'card-header ' })
            //        .append(
            //            '<h3 class="card-title"><i class="iconfont icon-diagnose" style="padding-right:5px;"></i>{0}</h3>'
            //                .format(data.name))
            //        .append(
            //            '<div class="header-ex" style="float: left; margin-left:15px">轮次得分:<span class="round-index" style="color:red;font-weight:600; padding:0 5px;">{0}</span>分</div>'
            //                .format(score))
            //        .append($tool);
            //    var endClass = data.isEnd ? "end" : "";
            //    var $bodyRow = $('<div>', { 'class': 'row round-box ' + endClass });

            //    if (data.children && data.children.length > 0) {
            //        data.children.forEach(function (v) {
            //            if (v.isStart) {
            //                BlockFormatter(v, $bodyRow);
            //            }
            //        });
            //    }

            //    var $body = $('<div>',
            //        {
            //            'class': 'card-body',
            //            'id': 'group_round_' + data.id + '_' + data.roundIndex,
            //            'css': { 'padding': '0 10px', 'min-height': '100px' }
            //        }).append($bodyRow);
            //    $box = $('<div>',
            //        {
            //            'class': 'card card-info card-sm group-round-info ',
            //            'css': { 'width': '100%' }
            //        }).append($head)
            //        .append($body);
            //    if (data.isEnd) {
            //        setTimeout(function () { $tool.find('button[data-card-widget="collapse"]').trigger('click'); }, 200);
            //    }
            //}
            if (data) {
                var score = data.cs ? data.cs : data.ss || 0;
                var $tool = $('<div>', { 'class': 'card-tools ' })
                    .append(
                        '<button type="button" class="btn btn-tool btn-info" data-card-widget="collapse"><i class="fa fa-minus"></i></button>');
                var $head = $('<div>', { 'class': 'card-header ' })
                    .append(
                        '<h3 class="card-title"><i class="iconfont icon-diagnose" style="padding-right:5px;"></i>{0}</h3>'
                            .format(data.nm))
                    .append(
                        '<div class="header-ex" style="float: left; margin-left:15px">轮次得分:<span class="round-index" style="color:red;font-weight:600; padding:0 5px;">{0}</span>分</div>'
                            .format(score))
                    .append($tool);
                var endClass = data.re ? "end" : "";
                var $bodyRow = $('<div>', { 'class': 'row round-box ' + endClass });

                if (data.ch && data.ch.length > 0) {
                    data.ch.forEach(function (v) {
                        if (v.r) {
                            BlockFormatter(v, $bodyRow);
                        }
                    });
                }

                var $body = $('<div>',
                    {
                        'class': 'card-body',
                        'id': 'group_round_' + data.i + '_' + data.roundIndex,
                        'css': { 'padding': '0 10px', 'min-height': '100px' }
                    }).append($bodyRow);
                $box = $('<div>',
                    {
                        'class': 'card card-info card-sm group-round-info ',
                        'css': { 'width': '100%' }
                    }).append($head)
                    .append($body);
                if (data.re) {
                    setTimeout(function () { $tool.find('button[data-card-widget="collapse"]').trigger('click'); }, 200);
                }
            }
            if ($appendTo) {
                $appendTo.append($box);
            }
            return $box;
        }

        function BlockFormatter(data, $appendTo) {
            //var endClass = data.isEnd ? " end " : "";
            //var $blockBox = $('<div>', { 'class': 'col-sm-6 block-box ' + endClass });
            //var $flows = $('<div>', { 'class': '' });
            //if (data.children && data.children.length > 0) {
            //    data.children.forEach(function (v) {
            //        if (v.isStart) {
            //            FlowFormatter(v, $flows);
            //        }
            //    });
            //}

            //$blockBox.append(
            //    '<div class="block-title"><i class="iconfont icon-integral"></i>{0}</div>'.format(data.name +
            //        "(" +
            //        data.path +
            //        ")"))
            //    .append($flows);
            var endClass = data.re ? " end " : "";
            var $blockBox = $('<div>', { 'class': 'col-sm-6 block-box ' + endClass });
            var $flows = $('<div>', { 'class': '' });
            if (data.ch && data.ch.length > 0) {
                data.ch.forEach(function (v) {
                    if (v.r) {
                        FlowFormatter(v, $flows);
                    }
                });
            }

            $blockBox.append(
                '<div class="block-title"><i class="iconfont icon-integral"></i>{0}</div>'.format(data.nm +
                    "(" +
                    data.p +
                    ")"))
                .append($flows);
            if ($appendTo) {
                $appendTo.append($blockBox);
            }
            return $blockBox;
        }

        function FlowFormatter(data, $appendTo) {
            //var endClass = data.isEnd ? " end " : "";
            //var $flowBox = $('<div>', { 'class': 'flow-box ' + endClass });
            //var $flows = $('<div>', { 'class': endClass, 'css': { 'display': 'flex', 'flex-direction': 'column' } });
            //if (data.children && data.children.length > 0) {
            //    data.children.forEach(function (v) {
            //        if (v.isStart) {
            //            FlowNodeFormatter(v, $flows);
            //        }
            //    });
            //}
            //$flowBox.append(
            //    '<div class="flow-title"><i class="iconfont icon-early-warning"></i>{0}</div>'.format(data.name))
            //    .append($flows);
            var endClass = data.re ? " end " : "";
            var $flowBox = $('<div>', { 'class': 'flow-box ' + endClass });
            var $flows = $('<div>', { 'class': endClass, 'css': { 'display': 'flex', 'flex-direction': 'column' } });
            if (data.ch && data.ch.length > 0) {
                data.ch.forEach(function (v) {
                    if (v.r) {
                        FlowNodeFormatter(v, $flows);
                    }
                });
            }
            $flowBox.append(
                '<div class="flow-title"><i class="iconfont icon-early-warning"></i>{0}</div>'.format(data.nm))
                .append($flows);
            if ($appendTo) {
                $appendTo.append($flowBox);
            }
            return $flowBox;
        }

        function FlowNodeFormatter(data, $appendTo) {
            //var endClass = data.isEnd ? " end " : "";
            //var $flowInfo = $('<div>', { 'class': ' flow-info ' + endClass });
            //if (data.sceneNodes && data.sceneNodes.length > 0) {
            //    data.sceneNodes.forEach(function (v) {
            //        if (v.isStart) {
            //            var score = v.correctionScore ? v.correctionScore : v.systemScore || 0;
            //            var $scene = $('<div>', { 'class': 'scene-info' })
            //                .append(
            //                    '<div class="scene-name">{0}</div><div class="scene-score"><span style="padding:0 5px">{1}</span>分</div>'
            //                        .format(v.name, score));
            //            $flowInfo.append($scene);
            //        }
            //    });
            //}
            //if ($appendTo) {
            //    $appendTo.append($flowInfo);
            //}
            //if (data.children && data.children.length > 0) {
            //    data.children.forEach(function (v) {
            //        if (v.isStart) {
            //            $appendTo.append(
            //                '<div class="scene-arrow {"><i class="iconfont icon-angle-double-down"></i></div>');
            //            FlowNodeFormatter(v, $appendTo);
            //        }
            //    });
            //}
            var endClass = data.re ? " end " : "";
            var $flowInfo = $('<div>', { 'class': ' flow-info ' + endClass });
            if (data.sn && data.sn.length > 0) {
                data.sn.forEach(function (v) {
                    if (v.r) {
                        var score = v.cs ? v.cs : v.ss || 0;
                        var $scene = $('<div>', { 'class': 'scene-info' })
                            .append(
                                '<div class="scene-name">{0}</div><div class="scene-score"><span style="padding:0 5px">{1}</span>分</div>'
                                    .format(v.nm, score));
                        $flowInfo.append($scene);
                    }
                });
            }
            if ($appendTo) {
                $appendTo.append($flowInfo);
            }
            if (data.ch && data.ch.length > 0) {
                data.ch.forEach(function (v) {
                    if (v.r) {
                        $appendTo.append(
                            '<div class="scene-arrow {"><i class="iconfont icon-angle-double-down"></i></div>');
                        FlowNodeFormatter(v, $appendTo);
                    }
                });
            }

            return $flowInfo;
        }

        function RoundChange(data) {
            if (data) {
                var $that = $('#group_info_' + data.i).find('div.rounds-box').empty();
                RoundsFormatter(data, $that);
            }

        }
    </script>

    <script id="score">
        function CalcScore(that) {
            var $that = $(that).closest('.score-box'),
                xtScore = $that.data('xt-score'),
                zjScore = $that.data('zj-score'),
                dzScore = $that.data('dz-score'),
                xtTotal = $that.data('xt-total'),
                zjTotal = $that.data('zj-total'),
                dzTotal = $that.data('dz-total');
            var xScore = Number($that.find('input[data-score-type="x"]').val()),
                zScore = Number($that.find('input[data-score-type="z"]').val()),
                dScore = Number($that.find('input[data-score-type="d"]').val());
            var cScore = 0;
            if (xScore != NaN && zScore != NaN && dScore != NaN) {
                xScore = xScore > xtScore ? xtScore : xScore < 0 ? 0 : xScore;
                var xs = xtTotal * xScore / xtScore;
                zScore = zScore > zjScore ? zjScore : zScore < 0 ? 0 : zScore;
                var zj = zjTotal * zScore / zjScore;
                dScore = dScore > dzScore ? dzScore : dScore < 0 ? 0 : dScore;
                var dz = dzTotal * dScore / dzScore;
                cScore = xs + zj + dz;
            }

            $that.find('input[data-score-type="c"]').val(cScore.toFixed(2));
        }

        function SendScore() {
            SaveScore(true);
        }
        function SaveScore(send) {
            send = send || false;
            var data = [];
            $('#group-score-box .group-score-box').each(function () {
                var $that = $(this), behaviorTagScore = [];
                $that.find('.tag-info').each(function () {
                    var $that = $(this);
                    var totalScore = Number($that.find('input[data-score-type="tt"]').val()),
                        systemScore = Number($that.find('input[data-score-type="ts"]').val()),
                        correctionScore = Number($that.find('input[data-score-type="tc"]').val());
                    systemScore = systemScore > totalScore ? totalScore : systemScore;
                    correctionScore = correctionScore > totalScore && totalScore > 0 ? totalScore : correctionScore;
                    behaviorTagScore.push({
                        tagNo: $that.data('tag'),
                        systemScore: systemScore,
                        correctionScore: correctionScore,
                        totalScore: totalScore
                    });
                });
                var group = {
                    isSend: send,
                    campNo: campNo,
                    groupNo: $that.data('id'),
                    roundIndex: $that.data('round'),
                    systemScore: Number($that.find('input[data-score-type="x"]').val()),
                    specialistScore: Number($that.find('input[data-score-type="z"]').val()),
                    audienceScore: Number($that.find('input[data-score-type="d"]').val()),
                    referenceScore: Number($that.find('input[data-score-type="c"]').val()),
                    finalTotalScore: Number($that.find('input[data-score-type="f"]').val()),
                    behaviorTagScoreInfo: JSON.stringify(behaviorTagScore)
                };
                data.push(group);
            });
            $.iwbAjax1({
                url: abp.appUrl + "Eval/SaveGroupScore",
                data: data,
                success: function () {
                    abp.message.warn("保存成功！");
                }
            });
        }

        function ScoreChange(data) {
            if (data) {
                var no = data.no, round = data.round;
                var $that = $('#group_score_' + no);
                $that.closest('.card').data('round', round).find('.header-ex .round-index').html(round);
                $that.find('input[data-score-type="x"]').val(data.systemScore ? data.systemScore : 0);
                if (data.tagScores && data.tagScores.length > 0) {
                    data.tagScores.forEach(function (v) {
                        var $tag = $that.find('.tag-info[data-tag="' + v.tagNo + '"]');
                        var sScore = Number($tag.find('input[data-score-type="ts"]').val()),
                            cScore = Number($tag.find('input[data-score-type="tc"]').val());
                        var ssScore = (v.systemScore ? v.systemScore : 0) + sScore,
                            ccScore = cScore ? cScore + (v.systemScore ? v.systemScore : 0) : 0;
                        $tag.find('input[data-score-type="ts"]').val(ssScore);
                        $tag.find('input[data-score-type="tc"]').val(ccScore);
                        $tag.find('input[data-score-type="tt"]').val(v.totalScore);
                    });
                }
            };
        }
    </script>

    <script id="hub-s">
        iwbHub.client.getRunningChange = function (msg) {
            console.log('getRunningChange: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        var $rBox = $('#group_info_' + data.no).find('.rounds-box');
                        if ($rBox.length > 0) {
                            $.iwbAjax5({
                                url: abp.appUrl + 'Eval/GetGroupRunningInfo?no=' + data.no,
                                success: function (res) {
                                    if (res) {
                                        //var round = res.currentRoundIndex ? res.currentRoundIndex : 1;
                                        var round = res.cri ? res.cri : 1;
                                        $('#group-score-box').find('.header-ex').css("display", "block").find('.round-index').html(round);
                                        $('#group_score_' + data.no).closest('.group-score-box').data("round", round);
                                        $rBox.empty();
                                        RoundsFormatter(res, $rBox);
                                    }
                                }
                            });
                        }
                    }
                } catch (e) {
                    console.log('getRunningChange: ', e);
                }
            }
        };
        iwbHub.client.getRoundScore = function (msg) {
            console.log('getRoundScore: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    ScoreChange(data);
                } catch (e) {
                    console.log('getRoundScore: ', e);
                }
            }
        };
        iwbHub.client.getHeadquarter = function (msg) {
            console.log('getHeadquarter: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        var no = data.no, text = data.text;
                        var $that = $('#group_info_box_' + no).find('.card-header .header-ex');
                        if ($that.length > 0) {
                            $that.html(text);
                        }
                    };
                } catch (e) {
                    console.log('getHeadquarter: ', e);
                }
            }
        }
    </script>

    <!--格式化-->
    <script id="formatter-script" type="text/javascript">
        function TypeFormatter(v) {
            var name = $('#hid-type option[value="' + v + '"]').text();
            switch (v) {
            case 0:
                return '<span class="label label-danger">' + name + '</span>';
            default:
                return '<span class="label label-info">' + name + '</span>';
            }
        }

        function StateFormatter(v) {
            var name = $('#hid-state option[value="' + v + '"]').text();
            switch (v) {
            case '@(CampGroupStateDefinition.New)':
                return '<span class="label label-info">' + name + '</span>';
            case '@(CampGroupStateDefinition.Run)':
                return '<span class="label label-iwb">' + name + '</span>';
            case '@(CampGroupStateDefinition.Error)':
            case '@(CampGroupStateDefinition.End)':
                return '<span class="label label-danger">' + name + '</span>';
            default:
                return '<span class="label label-info">' + name + '</span>';
            }
        }
    </script>

}

<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>
    <select id="hid-camp-state">
        @(Html.Raw(campState))
    </select>
    <select id="hid-group-state">
        @(Html.Raw(groupState))
    </select>
    @*@Html.DropDownList("hid-type", type)*@
</section>