We_Relese/OnlineApp/Relese/Views/Play/_Run/_SceneInfo.cshtml

@using WeOnlineApp.Configuration
@using WeOnlineApp.Helpers
@model WeOnlineApp.Models.Play.CampPlayModel
@{
    string id = "scene-info";
}
<style>
    #@id .card-header{
        display: flex;
        justify-content: space-between
    }
        #scene-info .card-header:after {
            display: none;
        }

        .current-scene-box {
            background: var(--mc);
            color: #fff;
            padding: 0 15px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 0.25rem;
            font-size: 14px;
        }

    .current-scene-box span {
        font-weight: bold;
    }

    .card-scene {
        width: 100%;
        margin: 10px 0;
        border-radius: 0.5rem;
        --bg: var(--mc);
    }

    .card-scene.round {
        --bg: #ffdd20;
    }

    .card-scene.end {
        --bg: #ff7c63;
    }

    .card-scene.active {
        border: 1px solid var(--bg);
    }

    .card-scene > .card-header {
        color: var(--bg);
        padding: 0.4rem 0.8rem;
        border-radius: 0.5rem 0.5rem 0 0;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
        transition: 0.3s all ease-in;
    }

    .card-scene.active .card-header {
        color: #fff;
        background: var(--bg)
    }

    .card-scene.collapsed-card > .card-header {
        border-radius: 0.5rem;
    }

    .card-scene > .card-header .card-title {
        font-weight: bold;
        font-size: 15px
    }

    .card-scene > .card-header .btn-tool {
        background: #ddd;
        color: var(--bg);
        padding: 0;
        margin-right: 0.25rem;
        width: 28px;
    }

    .card-scene > .card-header .attach.btn-tool.playing {
        color: #fff;
        background: var(--bg);
    }

    .card-scene > .card-header .btn-tool:hover {
        color: #fff;
        background: var(--bg);
    }

    .card-scene.active > .card-header .attach.btn-tool.playing {
        color: var(--bg);
        background: #fff;
    }

    .card-scene.active > .card-header .btn-tool:hover {
        color: var(--bg);
        background: #eee;
    }

    .card-scene > .card-header:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 100%;
        background: var(--bg);
        border-radius: 8px 0 0 0;
        transition: 0.3s all ease-in;
    }

    .card-scene.collapsed-card > .card-header:before {
        border-radius: 8px 0 0 8px;
    }

    .card-scene > .card-body {
        color: #8c91a8;
        padding: 5px 10px 5px 15px;
        font-size: 12px;
        border-radius: 0 0 0.5rem 0.5rem;
        position: relative;
    }

    .card-scene > .card-body:before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        width: 7px;
        height: calc(100% + 1px);
        background: var(--bg);
        border-radius: 0 0 0 8px;
    }

    .card-scene > .card-body .description {
        text-indent: 2em;
    }

    .guide-box {
        font-size: 12px;
        color: #666;
        padding: 0 8px 5px;
        margin: 5px 10px;
        border: 1px dashed darkgray;
        border-radius: 5px;
    }

    .guide-title {
        font-weight: bold;
        margin: 5px 0;
    }

    .guide-info {
        margin: 0 0 5px 0;
        text-indent: 2em;
    }

    .flash-scene .card-title {
        animation: flash 1s infinite;
    }
    .load-box {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        font-weight: 600;
        color: #007bff;
        z-index: 1000;
        background: rgba(255,255,255,0.6);
    }
    .loading {
        margin-top:-10%;
    }
    .loading:after {
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        animation: ellipsis 2s infinite;
        content: "\2026";
    }
    @@keyframes ellipsis {
        from {
            width: 2px;
            margin-right:33px;
        }
        to {
            width: 35px;
            margin-right: 0;
        }
    }

    @@keyframes flash {
        0% {
            opacity: 1.0;
            color: inherit;
            transform: scale(1);
        }

        50% {
            opacity: 0.5;
            color: red;
            transform: scale(0.95);
        }

        100% {
            opacity: 1.0;
            color: inherit;
            transform: scale(1);
        }
    }
</style>
<script>
    var roundPath = "P_R", round = 1, isPlaying = false, waitToPlayAttachList = [];
</script>
@Html.Partial("_Run/_AreaBox", $"情景区#{id}")

@using (Html.BeginScripts())
{
    <script id="scene-script">

        $('#@id .card-header .card-title').after('<div class=\"current-scene-box\">当前情景：<span>无</span><input type=\"hidden\" id=\"current-scene-path\" /></div>');

        var $sceneBoxBody = $('#@id .box-body');

        var _loadCount = 0, _loadTimeout;
        function PreLoad() {
            _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=@Model.Camp.Id&type=0",
                timeout: 1000 * 60 * 5,
                success:() => {
                    clearTimeout(_loadTimeout);
                    $('.load-box').fadeOut().remove();
                    $.iwbAjax5({
                        url: abp.appUrl + "Query/LoadCampPre?no=@Model.Camp.Id&type=1",
                        timeout: 1000 * 60 * 5,
                        complete: () => {
                            console.log("加载中... " + _loadCount);
                        }
                    });
                },
                complete: () => {
                    console.log("加载中... " + _loadCount);
                }
            });
            clearTimeout(_loadTimeout);
            _loadTimeout = setTimeout(PreLoad, 1000 * 60 * 2);
        }
        function GetScenes() {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetPlayScenes?no=@(Model.Play.Id)',
                success: (res) =>  {
                    if (res && res.length) {
                        res.forEach((v) =>  {
                            FormatterScene(v);
                        });
                        window.Scroll2Bottom($sceneBoxBody.closest('.scroll-box'));
                        window.GetLogs();
                    }
                }
            });
        }

        function GetSceneInfo(sceneNo) {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/GetPlaySceneInfo?no=@(Model.Play.Id)&scenePath=' + sceneNo,
                success: function(res) {
                    if (res) {
                        FormatterScene(res);
                        window.Scroll2Bottom($sceneBoxBody.closest('.scroll-box'));
                        if (!window.startFlag) {
                            window.startFlag = true;
                            window.GetLogs();
                        }
                    } else {
                        setTimeout(function() { GetSceneInfo(sceneNo); }, 5000);
                    }
                }
            });
        }

        function FormatterScene(data) {
            var str = "";
            if (data) {
                if ($('.card-scene[data-path="' + data.path + '"]').length > 0) {
                    return ;
                }
                if (data.path.toUpperCase().indexOf(roundPath + "" + round) == 0) {
                    str += `<div class="card card-scene round shadow-sm collapsed-card">
                                <div class="card-header">
                                    <div class="card-title text-center w-100"><span>第&nbsp;${round}&nbsp;轮</span></div>
                                </div>
                            </div>`;
                    round++;
                }
                var attachStr = "";
                if (data.attaches && data.attaches.length) {
                    data.attaches.forEach((v) =>  {
                        v.attachNo = data.id + "_" + v.attachNo;
                        waitToPlayAttachList.push(v);
                        var icon = v.fileType === "image" ? "fa-image" : v.fileType === "video" ? "fa-video" : "";
                        attachStr += `<button id="${v.attachNo}" class="attach btn btn-tool" id="${v.attachNo}" data-type="${v.fileType}" data-path="${v.filePath}" title="点击查看附件：${v.fileTitle}" type="button"  onclick="PlayAttach(this)"><i class="fas ${icon}"></i></button>`;
                    });
                }
                var str1;
                @if (Model.PlayUser!=null&&( Model.PlayUser.PlayerType == CampPlayerTypeDefinition.Creator || Model.Play.PlayModel != CampPlayModelDefinition.Team))
            {
                <text>
                    str1 = data.hasEnd
                        ? ''
                        : 'title="点击处理此情景"  onclick="ActiveScene($(this).closest(\'.card-scene\'))"';
                </text>
            }
                str1 = str1 ? str1 : 'title = "情景已处理"';
                var guideIcon = '', guideStr = '';
                if (data.guideInfos && data.guideInfos.length) {
                    guideIcon =
                        '<button class="btn btn-tool" title="点击查看提示引导信息" onclick="ToggleGuide(this)"><i class="fas fa-question"></i></button>';
                    guideStr += '<div class="guide-box" style="display:none"><p class="guide-title">提示：</p>';
                    var i = 0;
                    data.guideInfos.forEach((v) =>  {
                        i++;
                        guideStr += '<p class="guide-info">{0}、{1}</p>'.format(i, v.description);
                    });
                    guideStr += '</div>';
                }

                str += `<div class="card card-scene shadow-sm ${data.hasEnd ? "collapsed-card end " : "flash-scene "}" data-name="${data.name}" data-path="${data.path}" id="scene_${data.id}">
                            <div class="card-header" ${str1}>
                                <div class="card-title"><span>${data.name}</span></div>
                                <div class="card-tools">
                                   ${attachStr} ${guideIcon}
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas ${data.hasEnd ? "fa-plus" : "fa-minus"}"></i></button>
                                </div>
                            </div>
                            <div class="card-body">
                                ${guideStr}
                                <div class="description">${data.description}</div>
                            </div>
                        </div>`;
            }
            if (str) {
                $sceneBoxBody.append(str);
                window.PlayNext();
                setTimeout(() =>  {
                    $sceneBoxBody.find(".flash-scene").removeClass("flash-scene");
                }, 1000 * 30);
                if (!$('#current-scene-path').val()) {
                    ActiveScene();
                }
            }

        }

        function ToggleGuide($this) {
            var $that = $($this);
            if ($that.hasClass('open')) {
                $that.removeClass('open').attr("title", "点击查看提示引导信息").find("i").removeClass("fa-question-circle").addClass("fa-question");
                $that.closest('.card-scene').find('.guide-box').slideUp(400);
            } else {
                $that.addClass('open').attr("title", "点击收起提示引导信息").find("i").removeClass("fa-question").addClass("fa-question-circle");
                $that.closest('.card-scene').find('.guide-box').slideDown(600);
            }
        }

        function PlayAttach($this) {
            waitToPlayAttachList = [];
            var $that = $($this);
            var no = $that.data('id');
            var type = $that.data('type');
            var path = $that.data('path');
            window.Play(path, type, no);
        }

        function ActiveScene($this) {
            var $that = $this ? $($this) : $('.card-scene:not(.end):not(.round)').eq(0);
            $(".card-scene").removeClass("active");
            $that.addClass("active");
            var name = $that.data('name'), path = $that.data("path");
            $('.current-scene-box span').html(name);
            $('#current-scene-path').val(path);
            window.iwbHub.server.sendCurrentScenePath('@Model.Play.InvitationCode', path, name);
        }

        function DisabledScene1() {
            $('.card-scene:not(.round):not(.end)').each(function ()  {
                $(this).addClass('old-scene');
                $(this).find('.card-header').removeAttr("onclick");
            });
        }

        function DisabledScene2() {
            $('.card-scene.old-scene').each(function() {
                $(this).removeClass('old-scene').removeClass('flash-scene').addClass('end');
                $(this).CardWidget("collapse");
            });
            $('.card-scene.active').removeClass('active');
            $('#current-scene-path').val('');
            $('.current-scene-box span').text('无');
            ActiveScene();
        }

        iwbHub.client.getNewScene = function(msg) {
            console.log('getNewScene: ', msg);
            abp.ui.clearBusy($('body'));
            if (msg) {
                try {
                    var data = typeof msg == 'string' ? JSON.parse(msg) : msg;
                    if (data) {
                        if (data.no == '@(Model.Play.Id)') {
                            if ($sceneBoxBody.find('.card-scene[data-path="' + data.path + '"]').length <= 0) {
                                setTimeout(DisabledScene2, 1000*2);
                                GetSceneInfo(data.sceneNo);
                                window.Scroll2Bottom($sceneBoxBody.closest('.scroll-box'));
                            }
                        }
                    }
                } catch (e) {
                    console.log('getNewScene: ', e);
                }
            }
        };

        @if (Model.PlayUser==null || Model.PlayUser.PlayerType != CampPlayerTypeDefinition.Creator)
            {
                <text>
        iwbHub.client.getCurrentScenePath = function(msg) {
            console.log('getCurrentScenePath: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        $('#current-scene-path').val(data.path);
                        $('.current-scene-box span').text(data.name);
                    }
                } catch (e) {
                    console.log('getCurrentScenePath: ', e);
                }
            }
        }
                </text>
            }
    </script>
}