We_Relese/App/Relese/Views/Exercise/_Run/Display.cshtml

@using Abp.Configuration
@using IwbZero.ToolCommon.StringModel
@using WeApp.Configuration
@using WeApp.TrainingCampGroup.Dto
@using WeApp.Views.Exercise
@using WeEngine.Enum
@model ScreenModel
@{
    Layout = "~/Views/Shared/Layout/_Layout.None.cshtml";
    ViewBag.Title = "演练展示";
    var dataCenterUrl = SettingManager.GetSettingValue(IwbSettingNames.WeDataCenterIp).Ew("/");
    CampGroupDto group = ViewBag.Group;
    var model = Model ?? new ScreenModel(1, group.Id, group.CampNo, true);
}
<style>
    body {
        width: 100%;
        height: 100vh;
    }

    .main-area {
        width: 100%;
        height: 100%;
        background: #f2f6fe;
        display: flex;
        --mc: #3168f5;
        justify-content: center;
        align-items: center;
    }

    .show-title {
        font-size: 35px;
        color: var(--mc);
        margin-top: -10%;
        letter-spacing: 5px;
        font-weight: bold;
    }

    .main-area {
        --padding: 5px;
        /*--mw: calc(100vw - var(--padding)*2);
            --mh: calc(100vh - var(--padding)*2); */
        --mw: calc(100% - var(--padding)*2);
        --mh: calc(100vh - var(--padding)*2);
        padding: var(--padding);
    }

    .area-h {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }

    .area-v {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .area {
        padding: 8px;
        width: 100%;
        height: 100%;
        /*border: 1px solid red;*/
    }

    .card-vber {
        --borderRadius: 0.75rem;
        margin: 0;
        width: 100% !important;
        height: 100% !important;
        background: transparent;
        border-radius: var(--borderRadius);
    }

        .card-vber.maximized-card {
            --p: 10px;
            border-radius: var(--borderRadius);
            left: var(--p);
            right: var(--p);
            top: var(--p);
            bottom: var(--p);
            width: calc(100% - var(--p)*2) !important;
            height: calc(100% - var(--p)*2) !important;
        }

        .card-vber > .card-header {
            background: #fff;
            padding: 1rem;
            border-radius: var(--borderRadius) var(--borderRadius) 0 0;
        }

        .card-vber.maximized-card > .card-header {
            border-radius: var(--borderRadius) var(--borderRadius) 0 0 !important;
        }

        .card-vber > .card-header:before {
            content: "";
            position: absolute;
            left: -1px;
            top: calc(50% - 15px);
            width: 5px;
            height: 30px;
            background: #235ef4;
            border-radius: 0 5px 5px 0;
        }

        .card-vber > .card-header .card-title {
            color: #14161d;
            font-weight: bold;
            position: relative;
        }

        .card-vber > .card-body {
            background: #fbfdff;
            background-image: radial-gradient(#f2f3fe,#f5f3fe,#f8f6fe,#faf6fe,#fff);
            padding: 10px 1px;
            border-radius: 0 0 var(--borderRadius) var(--borderRadius);
        }

            .card-vber > .card-body .scroll-box {
                width: 100%;
                height: 100%;
                padding: 0 10px;
            }

                .card-vber > .card-body .scroll-box .box-body {
                    width: 100%;
                    height: 100%;
                }
</style>

<div class="main-area">
    <div class="area-v" style="width: calc(var(--mw) * 0.4);">
        <div class="area-h" style="height: calc(var(--mh) * 0.65)">
            <div class="area">@Html.Partial("_Run/_SceneInfo", model)</div>
        </div>
        <div class="area-h" style="height: calc(var(--mh) * 0.35)">
            <div class="area">@Html.Partial("_Run/_ScenePlay", model)</div>
        </div>
    </div>
    <div class="area-v" style="width: calc(var(--mw) * 0.35);">
        <div class="area-h" style="height: calc(var(--mh) * 0.65)">
            <div class="area">@Html.Partial("_Run/_CmdLog", model)</div>
        </div>
        <div class="area-h" style="height: calc(var(--mh) * 0.35)">
            <div class="area">@Html.Partial("_Run/_ScenePath", model)</div>
        </div>
    </div>
    <div class="area-v" style="width: calc(var(--mw) * 0.25);">
        <div class="area-h" style="height: calc(var(--mh) * 0.4)">
            <div class="area">@Html.Partial("_Run/_CmdRole", model)</div>
        </div>
        <div class="area-h" style="height: calc(var(--mh) * 0.6)">
            <div class="area">@Html.Partial("_Run/_ScoreEval", model)</div>
        </div>
    </div>
</div>

<div id="media-box-common" style="display: none"></div>

@section scripts {

    @if (model.WithScript)
    {
        <script>
            $(function() {
                abp.signalr.connect(['@(model.CampNo)']);
            });

            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;
            }
            iwbHub.client.getReloadAll = function(msg) {
                console.log('getReloadAll: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data) {
                            if (data.no == '@(model.GroupNo)' || data.no == '@(model.CampNo)') {
                                window.location.reload();
                            }
                        }
                    } catch (e) {
                        console.log('getReloadAll: ', e);
                    }
                }
            };
        </script>
    }
    <script>
        var startFlag = true;
        $(function() {
            @*abp.signalr.connect(function() {
                    window.iwbHub.server.registerGroup('@(model.Play.InvitationCode)').done(function() {
                        abp.log.debug('@(model.Play.InvitationCode) Group Registered to the SignalR server!');
                    });
                    abp.signalr.connect(['@(model.GroupNo)']);
                    window.GetScenes('@(model.GroupNo)');
                    window.ScenePath();
                    window.GetScore();

                });*@
            window.PreLoad('@(model.GroupNo)');
            if (@(model.Type) == 1) {
                abp.signalr.connect(['@(model.GroupNo)'],
                    function () {
                        window.GetScenes('@(model.GroupNo)');
                        @*setTimeout(function() {
                                $.iwbAjax5({
                                        url: abp.appUrl + "/Eval/StartFeedback?no=@(model.GroupNo)",
                                        success: function(res) {
                                            if (res) {
                                                window.GetScenes('@(model.GroupNo)');
                                            }
                                        }
                                    },
                                    500);
                            });*@
                    });
            } else {
                window.GetScenes('@(model.GroupNo)');
            }
            GetLogs('@(model.GroupNo)');
            GetRoles('@(model.GroupNo)');
            GetScore('@(model.GroupNo)');
            GetScenePath('@(model.GroupNo)');
        });

        function Scroll2Bottom(that) {
            var instance = window.OverlayScrollbars($(that)[0]);
            if (!instance) {
                OverlayScrollbar($(that), { className: "os-theme-round-dark" });
                instance = window.OverlayScrollbars($(that)[0]);
            }
            if (instance) {
                try {
                    instance.scroll({ y: "100%" });
                } catch (e) {

                }
            }
        }
        function Scroll2Top(that) {
            var instance = window.OverlayScrollbars($(that)[0]);
            if (!instance) {
                OverlayScrollbar($(that), { className: "os-theme-round-dark" });
                instance = window.OverlayScrollbars($(that)[0]);
            }
            if (instance) {
                try {
                    instance.scroll({ y: "0%" });
                } catch (e) {

                }
            }
        }
    </script>

    <script>
        iwbHub.client.getUserExit = function (msg) {
            console.log('getUserExit: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {

                    }
                } catch (e) {
                    console.log('getUserExit: ', e);
                }
            }
        };

        iwbHub.client.getReloadPage = function (msg) {
            console.log('getReloadPage: ', msg);
            if (msg) {
                try {
                    //var data = JSON.parse(msg);
                    //window.location.reload();
                } catch (e) {
                    console.log('getReloadPage: ', e);
                }
            }
        };

        iwbHub.client.getGuide = function (msg) {
            console.log('getGuide: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (!data) {
                        return;
                    }

                } catch (e) {
                    console.log('getGuide: ', e);
                }
            }
        };
        iwbHub.client.getEnvironment = function (msg) {
            console.log('getEnvironment: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (!data) {
                        return;
                    }
                    Environment(data);
                } catch (e) {

                    console.log('getEnvironment: ', 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  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 {
                var 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 =
                    '<audio id="audio-hidden-{1}" style=""  controls  autoplay><source src="{0}" type="audio/mpeg">您的浏览器不支持 HTML5 audio 标签。</audio>'
                        .format(url, type);
                $('#media-box-common').append(audio);
                setTimeout(function() {$('#audio-hidden-' + type).remove();},15000);
            }
        }
    </script>
}