We_Relese/App/Relese/Views/Play/__/_SceneInfo.cshtml

@using IwbZero.ToolCommon.StringModel
@using WeApp.Helpers
@model string
@{
    string[] arr = Model.Split('#');
    string groupNo = arr[0];
    string id = "scene-info";
    bool withScript = (arr.Length > 1 ? arr[1] : "").ValB();
}

@Html.Partial("__/_AreaBox", $"情景信息#{id}_{groupNo}")

@if (withScript)
{
    using (Html.BeginScripts())
    {
        <script id="scene-info-script">
        var rounds = [], roundPath= "P_R";

        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);
        }

        var isPlaying = false, waitToPlayAttachList = [];
        function GetScenes(no) {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetGroupScenes?no=' + no,
                success: (res) => {
                    if (res && res.length) {
                        res.forEach((v) => {
                            FormatterScene(v,no);
                        });
                        window.Scroll2Bottom($(`#@(id)_${no} .box-body`).closest('.scroll-box'));
                    } else {
                        setTimeout(function () {
                            if (!$(`#@(id)_${no} .box-body .scene-list-box`).length) {
                                GetScenes(no);
                            }
                        }, 5000);

                    }
                }
            });
        }

        function GetSceneInfo(groupNo,sceneNo) {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/GetGroupSceneInfo?no=' + groupNo+'&scenePath=' + sceneNo,
                success: function(res) {
                    if (res) {
                        FormatterScene(res,groupNo);
                        window.Scroll2Bottom($(`#@(id)_${groupNo} .box-body`).closest('.scroll-box'));
                    } else {
                        setTimeout(function () { GetSceneInfo(groupNo,sceneNo); }, 5000);
                    }
                }
            });
        }

        function FormatterScene(data,groupNo) {
            var str = "";
            if (data) {
                if ($(`#@(id)_${groupNo} .box-body .scene-list-box[data-path="${data.path}"]`).length > 0) {
                    return ;
                }
                str += `<div class="scene-list-box" data-name="${data.name}" data-path="${data.path}" id="scene_${data.id}">
                          <span class="t">
                            <i class="fa fa-play-circle"></i>
                            <span>${data.name}</span>
                          </span>
                          <span class="b">
                            ${data.description}
                          </span>
                        </div>`;
                if (data.attaches && data.attaches.length) {
                    data.attaches.forEach(v => {
                        waitToPlayAttachList.push(v);
                    });
                }
            }
            if (str) {
                $(`#@(id)_${groupNo} .box-body`).append(str);
                window.PlayNext(groupNo);
            }
        }

        function FormatterScene_bk(data,groupNo) {
            var str = "";
            if (data) {
                if ($('.card-scene[data-path="' + data.path + '"]').length > 0) {
                    return ;
                }
                var round = rounds.find(v => v.groupNo == groupNo);
                if (data.path.toUpperCase().indexOf(roundPath + "" + round.index) == 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.index}&nbsp;轮</span></div>
                                </div>
                            </div>`;
                    round.index++;
                }
                var attachStr = "", str1 = "", guideIcon = '', guideStr = '';
                //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,'${groupNo}')"><i class="fas ${icon}"></i></button>`;
                //    });
                //}

                //str1 =  data.hasEnd ?  'title = "情景已处理"':'';

                //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) {
                $(`#@(id)_${groupNo} .box-body`).append(str);
                window.PlayNext(groupNo);
                setTimeout(() =>  {
                    $(`#@(id)_${groupNo} .box-body`).find(".flash-scene").removeClass("flash-scene");
                }, 1000 * 30);

            }

        }

        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,groupNo) {
            waitToPlayAttachList = [];
            var $that = $($this);
            var no = $that.data('id');
            var type = $that.data('type');
            var path = $that.data('path');
            window.Play(path, type, no,groupNo);
        }

        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').addClass('end');
                $(this).CardWidget("collapse");
            });
            $('.card-scene.active').removeClass('active');
            $('#current-scene-path').val('');
            $('.current-scene-box span').text('无');
        }

        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 ($(`#@(id)_${data.no} .box-body`).find('.card-scene[data-path="' + data.path + '"]').length <= 0) {
                            DisabledScene2();
                            GetSceneInfo(data.no,data.sceneNo);
                            window.Scroll2Bottom($(`#@(id)_${data.no} .box-body`).closest('.scroll-box'));
                        }
                    }
                } catch (e) {
                    console.log('getNewScene: ', e);
                }
            }
        };
        </script>

    }

}
@using (Html.BeginScripts())
{
    <script id="scene-info-script">
        @*var $baseInfoBody = $('#@id .box-body');
        $baseInfoBody.html($('#@id-pre').html());
        $(function() {
            OverlayScrollbar($baseInfoBody.closest('.scroll-box'));
        });*@
        abp.signalr.connect(['@(groupNo)']);
        rounds.push({
            groupNo: '@(groupNo)',
            index: 1
        });
        GetScenes('@(groupNo)');
    </script>
}