WEP_V2.1.3/SourceCode/We.App/WeApp.Web/Views/Exercise/_Screen.cshtml

@using Abp.Configuration
@using IwbZero.ToolCommon.StringModel
@using WeEngine.Enum
@using WeApp.Configuration
@using WeApp.Helpers
@model WeApp.Views.Exercise.ScreenModel
@{
    string groupNo = Model.GroupNo, campNo = Model.CampNo;
    bool show = Model.WithScript;
    int type = Model.Type;
    var dataCenterUrl = SettingManager.GetSettingValue(IwbSettingNames.WeDataCenterIp).Ew("/");

}

@if (show)
{
    <link href="~/Content/Css/Exercise/public.min.css" rel="stylesheet" />
}

<div class="box" style="width: 45%; height: 100%;" id="scene_@(groupNo)" data-isRefresh="true">
    <div class="box-title">
        <span>情景区</span>
    </div>
    <div class="box-body" style="height:  calc(100% - 370px)"><div class="body-content"></div></div>
    <div class="media-box" style="height:300px;">
        <div class="body-content">
            <span>播放区</span>
        </div>
    </div>
</div>
<div class="box" style="width: 38%; height: 100%" id="log_@(groupNo)">
    <div class="box-title" style="position: relative">
        <span>决策指挥中心</span>
        <a id="warning-btn" href="javascript:void(0)" onclick="ShowWaring()" class="btn-danger btn" style="position: absolute; top: 6px; left: 30px; margin-bottom: 0; z-index: 2; padding: 8px 20px;display:none">查看告警</a>
    </div>
    <div class="box-body" style=""><div class="body-content"></div></div>
</div>
<div class="box" style="width: 17%; height: 100%; float: left;">
    <div class="box" style="width: 100%; height: 70%" id="role_@(groupNo)">
        <div class="box-title">
            <span>指挥部</span>
            <a href="javascript:void(0)" onclick="ShowGroupRole('@(groupNo)')" class="btn-info btn" style="right: 30px;">角色方案</a>
        </div>
        <div class="box-body" style=""><div class="body-content" style=""></div></div>
    </div>
    <div class="box" style="width: 100%; height: 30%; border-top: 0" id="score_@(groupNo)">
        <div class="box-title" style="border-top: 3px solid #eee;">
            <span>评估信息</span>
        </div>
        <div class="box-body" style="">
            <div class="body-content">

                @*<div class="score-box">
                        <span class="name">系统评分</span><span style="padding: 0 5px;">:</span><span class="score">800</span><span style="padding-left: 5px;">分</span>
                    </div>*@
            </div>
        </div>
    </div>
</div>

@if (show)
{
    using (Html.BeginScripts())
    {
        <script>
            var overlayScrollbar;
            $(function() {
                abp.signalr.connect(['@(campNo)']);
            });

            function Scroll2Bottom(that) {
                var instance = window.OverlayScrollbars($(that)[0]);
                instance.scroll({ y: "100%" });
            }

            function ShowGroupRole(no) {
                $.iwbAjax4({
                    url: abp.appUrl + 'Query/GetGroupRolePlans?no=' + no,
                    success: function(res) {
                        if (res && res.plans && res.plans.length > 0) {
                            var str = '';
                            res.plans.forEach(function(v) {
                                str += FormatterRolePlan(v);
                            });
                            if (str) {
                                $(document).iwbModal('create',
                                    {
                                        modal: 'modal-role-plan',
                                        modaltitle: '角色预案详情',
                                        modalBody: str,
                                        save: function() {
                                            $('#modal-role-plan').modal('hide');
                                        }
                                    });
                            }
                        } else {
                            abp.message.warn("还未创建指挥部！");
                        }
                    }
                });
            }

            function FormatterRolePlan(data) {
                var str = '';
                if (data) {
                    str += '<div class="plan-box box">';
                    str += '<div class="plan-name">{0}</div>'.format(data.name);
                    str += '<div class="plan-role">';
                    if (data.roleName) {
                        data.roleName.forEach(function(v) {
                            str += '<div class="role-box"><div class="name">{0}</div><div class="image"><img src="../../Content/Image/Stu/zhb/user.png" /></div></div>'
                                .format(v);
                        });
                    }
                    str += '</div>';
                    str += '</div>';
                }
                return str;
            }
        </script>

        <script id="scene-s">

            var _loadCount = 0, _loadTimeout;
            function PreLoad(no) {
                _loadCount++;
                console.log("加载数据中... " + _loadCount);
                if (!$('.load-box').length) {
                    $('body').append(`<div class="load-box"> <span class="loading">正在加载演练数据</span></div>`);
                }
                if (_loadCount > 3) {
                    $('.load-box').fadeOut();
                    return;
                }
                $.iwbAjax5({
                    url: abp.appUrl + "Query/LoadCampPre?no=" + no + "&type=0",
                    timeout: 1000 * 60 * 5,
                    success: () => {
                        clearTimeout(_loadTimeout);
                        $('.load-box').fadeOut().remove();
                        $.iwbAjax5({
                            url: abp.appUrl + "Query/LoadCampPre?no=" + no + "&type=1",
                            timeout: 1000 * 60 * 5,
                            complete: () => {
                                console.log("加载中... " + _loadCount);
                            }
                        });
                    }
                    , complete: () => {
                        console.log("加载中... " + _loadCount);
                    }
                });
                clearTimeout(_loadTimeout);
                _loadTimeout = setTimeout(PreLoad, 1000 * 60 * 2);
            }

            function GetScenes(no) {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetGroupScenes?no=' + no,
                    success: function (res) {
                        if (res) {
                            FormatterScenes(res, no);
                        }
                    }
                });
            }

            function FormatterScenes(data, no) {
                var str = "";
                if (data && data.length > 0) {
                    data.forEach(function (v) {
                        str += FormatterSceneInfo(v, false);
                    });
                }
                if (str) {
                    $('#scene_' + no + ' .box-body .body-content').html(str);
                    Scroll2Bottom($('#scene_' + no + ' .box-body'));
                }
            }

            function GetSceneInfo(groupNo, sceneNo) {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetGroupSceneInfo?no=' + groupNo + '&scenePath=' + sceneNo,
                    success: function (res) {
                        if (res) {
                            var str = FormatterSceneInfo(res, true);
                            if (str) {
                                DisabledScene2(groupNo);
                                var $box = $('#scene_' + groupNo + ' .box-body .body-content');
                                $box.append(str);
                                AutoPlay($box);
                                var t = $('#scene_' + groupNo).data('t');
                                //clearTimeout(t);
                                //t =
                                //setTimeout(function () {
                                //    $("#scene_" + groupNo + ' .box-body .body-content').find(".flash-scene").removeClass("flash-scene");
                                //}, 1000 * 20);
                                $('#scene_' + groupNo).data('t', t);
                                Scroll2Bottom($('#scene_' + groupNo + ' .box-body'));
                            }
                        } else {
                            setTimeout(function () { GetSceneInfo(groupNo, sceneNo); }, 5000);
                        }
                    }
                });
            }

            function FormatterSceneInfo(data, isNew) {
                var str = "";
                if (data) {
                    var c = "", str3 = '', descShow = '', attachStr = '';
                    if (isNew) {
                        c = "flash-scene new-scene new-scene2";
                        //str2 = '<span class="label label-danger no-scene">未处理</span>';
                        str3 =
                            '<div class="tool open" onclick="ToggleDesc(this)"><i class="iconfont icon-minus"></i></div>';
                        descShow = 'block';
                    } else {
                        //str2 = '<span class="label label-info">已处理</span>';
                        str3 =
                            '<div class="tool close" onclick="ToggleDesc(this)"><i class="iconfont icon-plus"></i></div>';
                        descShow = 'none';
                    }
                    if (data.attaches && data.attaches.length > 0) {
                        var template = '<span class="attach attach-{0} attach1" data-attach-type="{0}" data-path="{1}"  onclick="EventAttach(this)"><i class="iconfont {2}" title="{3}"></i></span>';
                        for (var i = 0; i < data.attaches.length; i++) {
                            var item = data.attaches[i];
                            if (item.fileType) {
                                if (item.fileType === "image") {
                                    attachStr += template.format(item.fileType, item.filePath, 'icon-picture', '图片');
                                } else if (item.fileType === "video") {
                                    attachStr += template.format(item.fileType, item.filePath, 'icon-training', '视频');
                                }
                            }
                        }
                    }
                    str +=
                        '<div class="scene-box {3}" data-id="{0}"  data-path="{5}"><div class="title"><span class="text">{1}</span><div class="attach-box">{4}</div>{6}</div><div class="desc"  style="display:{7};">{2}</div></div>'
                            .format(data.id, data.name, data.description, c, attachStr, data.path, str3, descShow);
                }
                return str;
            }

            function ToggleGuide(that) {
                var $that = $(that);
                if ($that.hasClass('open')) {
                    $that.removeClass('open');
                    $that.closest('.scene-box').find('.guide-box').fadeOut(400);
                } else {
                    $that.addClass('open');
                    $that.closest('.scene-box').find('.guide-box').fadeIn(600);
                    var $tool = $that.closest('.scene-box').find('.tool');
                    if (!$tool.hasClass('open')) {
                        $tool.addClass('open').html('<i class="iconfont icon-minus"></i>');
                        $tool.closest('.scene-box').find('.desc').fadeIn(600);
                    }
                }
                Scroll2Bottom($that.closest('.box-body'));
            }

            function ToggleDesc(that) {
                var $that = $(that);
                if ($that.hasClass('open')) {
                    $that.removeClass('open').html('<i class="iconfont icon-plus"></i>');
                    $that.closest('.scene-box').find('.desc').fadeOut(400);
                } else {
                    $that.addClass('open').html('<i class="iconfont icon-minus"></i>');
                    $that.closest('.scene-box').find('.desc').fadeIn(600);
                }
                Scroll2Bottom($that.closest('.box-body'));
            }

            function DisabledScene1(groupNo) {
                var $that = $('#scene_' + groupNo).find('.scene-box.new-scene2');
                $that.attr('onclick', '');
                $that.removeClass('new-scene2').addClass("old-scene");
            }

            function DisabledScene2(groupNo) {
                var $that = $('#scene_' + groupNo).find('.scene-box.old-scene');
                $that.removeClass('old-scene');
                $that.find('.tool.open').trigger('click');
                //if ($that.hasClass('old-scene')) {
                //    $that.attr('onclick', '');
                //    $that.removeClass('old-scene');
                //    $that.find('.tool.open').trigger('click');
                //    //$that.find('.no-scene').text('已处理').removeClass('label-danger').removeClass('no-scene')
                //    //    .addClass('label-info');
                //}
                //$('#scene-info-box .active').removeClass('active');
                //$('#current-scene-box #scene-path').val('');
                //$('#current-scene-box .scene-name').text('无');
            }

            var imageTemplate = '<img src="{0}" style="" />',
                videoTemplate = '<video id="video" style=""  controls  autoplay><source src="{0}" type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video>',
                audioTemplate = '<audio id="audio" style=""  controls  autoplay><source src="{0}" type="audio/mp3">您的浏览器不支持 HTML5 audio 标签。</audio>';
            var at;
            function EventAttach(that, event) {
                var type = $(that).data('attach-type');
                var path = $(that).data('path');
                if (type) {
                    var str = type === "image" ? imageTemplate.format(path) : type === "video" ? videoTemplate.format(path) : type === "audio" ? audioTemplate.format(path) : '';
                    $(that).closest(".box").find(".media-box .body-content").html(str);
                    $(that).closest(".box").find(".current-scene").removeClass("current-scene");
                    $(that).closest(".scene-box").addClass("current-scene");
                    event = event || function () { InitMedia($(that)) };
                    var video = document.getElementById("video");
                    if (video) {
                        video.loop = false;
                        video.addEventListener('ended', function () { setTimeout(function () { event.call(that); }, 1000 * 3) }, false);
                    } else {
                        clearTimeout(at);
                        at = setTimeout(function () { event.call(that); }, 1000 * 10);
                    }
                }
            }

            function AutoPlay($box, $that, isForce) {
                if (!isForce && $box.data("auto-play")) {
                    return;
                }
                $box.data("auto-play", true);
                $that = $that === undefined ? $box.find('.new-scene').eq(0).removeClass('new-scene') : $that;
                var $attach = $that.find('.attach');
                if ($attach.length <= 0) {
                    var $next = $box.find('.new-scene').eq(0).removeClass('new-scene');
                    if ($next.length > 0) {
                        AutoPlay($box, $next, true);
                    } else {
                        $box.data("auto-play", false);
                        InitMedia($box.find('.current-scene'));
                    }
                } else {
                    if (!$that) { return; }
                    $attach = $that.find('.attach').first();
                    EventAttach($attach, function () { AutoPlay($box, $that, true); });
                    $attach.removeClass('attach');
                }
            }

            function InitMedia(that) {
                var $that = (that).closest(".box");
                $that.find(".current-scene").removeClass("current-scene");
                $that.find(".media-box .body-content").html('<span>播放区</span>');
            }
        </script>

        <script id="log-s">
            function GetLogs(no) {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetGroupLogs?no=' + no,
                    success: function(res) {
                        if (res) {
                            FormatterLog(res, no);
                        }
                    }
                });
            }

            function FormatterLog(data, no) {
                var str = "";
                if (data && data.length > 0) {
                    data.forEach(function(v) {
                        str += FormatLog(v);
                    });
                }
                if (str) {
                    $('#log_' + no + ' .box-body .body-content').html(str);
                }
            }

            function FormatLog(data) {
                var c = '';
                if (data.logState == '@(LogStateDefinition.Submit)' || data.logState == '@(LogStateDefinition.Send)'|| data.logState == '@(LogStateDefinition.HasMatch)'|| data.logState == '@(LogStateDefinition.HasSendMatch)') {
                    c = "send";
                }
                var str =
                    '<div class="log-box {3} log_{0}" id="log-box_{0}" data-id="{0}" ><span class="role">{1}</span><span class="word">{2}</span></div>'.format(data.id, data.role, data.word, c);
                return str;
            }
        </script>

        <script id="role-s">
            function GetRoles(no) {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetGroupRoleInfos?no=' + no,
                    success: function (res) {
                        if (res) {
                            FormatterRole(res, no);
                        }
                    }

                });
            }

            function FormatterRole(data, no) {
                var str = "";
                if (data && data.length > 0) {
                    data.forEach(function (v) {
                        str +=
                            '<div class="role-box"><div class="name">{0}</div><div class="image"><img src="../../Content/Image/Stu/zhb/user.png" /></div></div>'
                                .format(v);
                    });
                }
                if (str) {
                    $('#role_' + no + ' .box-body .body-content').html(str);
                }
            }
        </script>

        <script id="score-s">
            function GetScore(no) {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetGroupScoreInfo?no=' + no,
                    success: function (res) {
                        if (res) {
                            res.systemScore = undefined;
                            FormatterScore(res, no);
                        }
                    }

                });
            }
            // '  '
            function FormatterScore(data, no) {
                var str = "",
                    template =
                        '<div class="score-box {2}"><span class="name">{0}</span><span class="score">{1}<span>分</span></span></div>';
                if (data.systemScore) {
                    str += template.format("系统评分", data.systemScore, "system-score");
                }
                var tags = data.behaviorTagScoreInfo ? JSON.parse(data.behaviorTagScoreInfo) : data.tagScores;
                if (tags && tags.length > 0) {
                    tags.forEach(function (v) {
                        var score = v.correctionScore ? v.correctionScore : v.systemScore;
                        if (score > 0) {
                            str += template.format(v.tagNo, score, "tag-score");
                        }
                    });
                }
                if (str) {
                    $('#score_' + no + ' .box-body .body-content').prepend(str);
                }
            }
        </script>

        <script id="hub-s">
            iwbHub.client.getReloadAll = function(msg) {
                console.log('getReloadAll: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data) {
                            if (data.no == '@(groupNo)' || data.no == '@(campNo)') {
                                window.location.reload();
                            }
                        }
                    } catch (e) {
                        console.log('getReloadAll: ', e);
                    }
                }
            };
            iwbHub.client.getOperationLog = function(msg) {
                console.log('getOperationLog: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (@(type) == 2 || data.no=='@(groupNo)') {
                            var str = FormatLog(data);
                            $('#log_' + data.no + ' .box-body .body-content').prepend(str);
                        }
                    } catch (e) {
                        console.log('getOperationLog: ', e);
                    }
                }
            };
            iwbHub.client.getOperationLogSubmit = function(msg) {
                console.log('getOperationLogSubmit: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (@(type) == 2 || data.no=='@(groupNo)') {
                            $('#log_' + data.no + ' .box-body .body-content').find('.log_' + data.logId).addClass('send');
                        }
                    } catch (e) {
                        console.log('getOperationLogSubmit: ', e);
                    }
                }
            };
            iwbHub.client.getNewScene = function(msg) {
                console.log('getNewScene: ', msg);
                if (msg) {
                    try {
                        var data = typeof msg == 'string' ? JSON.parse(msg) : msg;
                        if (data) {
                            if (@(type) == 2 || data.no == '@(groupNo)') {
                                if ($('#scene_' + data.no).find('.scene-box[data-path="' + data.path + '"]').length <= 0) {
                                    GetSceneInfo(data.no, data.sceneNo);
                                }
                            }
                        }
                    } catch (e) {
                        console.log('getNewScene: ', e);
                    }
                }
            };
            iwbHub.client.getRoundScore = function(msg) {
                console.log('getRoundScore: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (@(type) == 2 || data.no=='@(groupNo)') {
                            data.systemScore = undefined;
                            FormatterScore(data, data.no);
                        };
                    } catch (e) {

                        console.log('getRoundScore: ', e);
                    }
                }
            };
            iwbHub.client.getSendScore = function(msg) {
                console.log('getSendScore: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (@(type) == 2 || data.no=='@(groupNo)') {
                            FormatterScore(data, data.no);
                        };
                    } catch (e) {

                        console.log('getSendScore: ', e);
                    }
                }
            };

            iwbHub.client.getDisabledScene = function(msg) {
                console.log('getDisabledScene: ', msg);
                if (msg) {
                    try {
                        //var data = JSON.parse(msg);
                        if (@(type) == 2 || msg == '@(groupNo)') {
                            DisabledScene1(msg);
                        }
                    } catch (e) {
                        console.log('getDisabledScene: ', e);
                    }
                }
            }

            iwbHub.client.getMatchSuccess = function(msg) {
                console.log('getMatchSuccess: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (!data) {
                            return;
                        }
                        var url = "", style = "";
                        if (data.scoreType == @((int) BehaviorScoreType.Normal)) {
                            style = "text-success";
                            url = "/Content/Media/S4.mp3";
                        } else if (data.scoreType == @((int) BehaviorScoreType.Negative)) {
                            style = "text-danger";
                            url = "/Content/Media/E2.mp3";
                        } else if (data.scoreType == @((int) BehaviorScoreType.ImportantNegative)) {
                            style = "text-danger text-bold";
                            url = "/Content/Media/E6.mp3";
                        }
                        //ChangeLog(data.word, style);
                        PlayAudio(url, data.scoreType);
                    } catch (e) {
                        console.log('getMatchSuccess: ', e);
                    }
                }
            };
        </script>
        <script>

            var et, evList = [];

            function Environment(data) {
                evList.push(data);
                ShowEnvironment();
            }

            function ShowEnvironment() {
                var data = evList[0] ? $.extend({}, evList[0]) : undefined;
                console.log(data);
                if (!data) {
                    return;
                }
                if ($('.environment').length > 0 && $('#ev-' + data.nodePath).length <= 0) {
                    return;
                }
                evList.splice(0, 1);
                var str = '', str1 = '';
                var path = data.resourcePath.indexOf('http') > -1
                    ? data.resourcePath
                    : '@(dataCenterUrl)' + data.resourcePath;
                switch (data.resourceType) {
                case @((int) ResourceType.Image):
                    str1 = '<img src="{0}" style="" />'.format(path);
                    break;
                case @((int) ResourceType.Audio):
                    str1 =
                        '<audio id="audio" style="display:none"  controls  autoplay><source src="{0}" type="audio/mp3">您的浏览器不支持 HTML5 audio 标签。</audio>'
                        .format(path);
                    break;
                case @((int) ResourceType.Video):
                    str1 =
                        '<video id="video" style=""  controls  autoplay><source src="{0}" type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video>'
                        .format(path);
                    break;
                default:
                    str1 = '';
                }
                clearTimeout(et);
                if ($('#ev-' + data.nodePath).length > 0) {
                    $('#ev-' + data.nodePath).find('.play-box').append('<div style="width:100% ;height:15px"></div>');
                    $('#ev-' + data.nodePath).find('.play-box').append(str1);
                    Scroll2Bottom($('#environment-score'));
                } else {
                    str =
                        '<div class="environment" id="ev-{0}" style="display:none;"><div class="close" onclick="CloseEnvironment(false)">关闭</div><div id="environment-score"><div class="play-box">{1}</div></div></div>'
                        .format(data.nodePath, str1);
                    $('body').append(str);
                    OverlayScrollbar($('#environment-score'), { className: "os-theme-thin-light" });
                    $(".environment").fadeIn(600);
                }
                et = setTimeout(CloseEnvironment, 1000 * 15);

            }

            function CloseEnvironment(isAuto) {
                isAuto = isAuto == undefined ? true : isAuto;
                clearTimeout(et);
                $(".environment").fadeOut(300).remove();
                if (isAuto) {
                    ShowEnvironment();
                }
            }

            function PlayAudio(url, type) {
                if (!$('#audio-hidden-' + type).length) {
                    var audio =
                        '<div id="audio-hidden-{1}" style="display:none"><audio  style=""  controls  autoplay><source src="{0}" type="audio/mpeg">您的浏览器不支持 HTML5 audio 标签。</audio></div>'
                            .format(url, type);
                    $('body').append(audio);
                    setTimeout(function() {$('#audio-hidden-' + type).remove();},20000);
                }
            }

            function ChangeLog(word, style) {
                var arr = word.split('|');
                var $log = $('#log-box_' + arr[0] + ' .word');
                if ($log.length) {
                    var text = $log.html(), text2 = text;
                    if (arr[2]) {
                        var arr2 = arr[2].split(',');
                        arr2.forEach(function(v) {
                            var reg = new RegExp(v, "g");
                            var str = '<span class="{1} ml-1 mr-1">{0}</span>'.format(v, style);
                            if (text2.indexOf(str) < 0) {
                                text2 = text2.replace(reg, str);
                            }
                        });
                        $log.html(text2);
                        if (text != text2) {
                            $.iwbAjax5({
                                url: abp.appUrl + 'Eval/UpdateLog',
                                data: { id: arr[0], Text: text2 }
                            });
                        }
                    }
                }
            }
        </script>

    }
}

@using (Html.BeginScripts())
{
    <script>
        $(function () {
            if (@(type) == 1) {
                abp.signalr.connect(['@(groupNo)'],
                    function() {
                        setTimeout(function() {
                            $.iwbAjax5({
                                    url: abp.appUrl + "/Eval/StartFeedback?no=@(groupNo)",
                                    success: function(res) {
                                        if (res) {
                                            window.GetScenes('@(groupNo)');
                                        }
                                    }
                                },
                                500);
                        });
                    });
            }
            OverlayScrollbar($('.box-body'));
            GetLogs('@(groupNo)');
            GetRoles('@(groupNo)');
            GetScore('@(groupNo)');
            PreLoad('@(groupNo)');
            if (@(type)!= 1) {

                GetScenes('@(groupNo)');
            }

        });
    </script>
}