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

@using Abp.Configuration
@using IwbZero.ToolCommon.StringModel
@using WeEngine.Enum
@using WeOnlineApp.Configuration
@model WeOnlineApp.Models.Play.CampPlayModel
@{
    Layout = "~/Views/Shared/Layout/_Layout.None.cshtml";
    ViewBag.Title = "演练中";
    //CampPlayDto play = Model.Play;
    //CampPlayUserDto playUser = Model.PlayUser;
    //CampDto camp = Model.Camp;
    //string[] roleArr = new string[0];
    Model.PlayUser = null;
}
@section meta{
    @*<meta http-equiv="X-Frame-Options" content="allow-from *">*@
}
<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;
    }
</style>
@if (Model.Play.PlayState == CampPlayStateDefinition.New)
{
    <style>
    </style>

    <div class="main-area"> <div class="show-title">演练未开始</div></div>
}
else if (Model.Play.PlayState != CampPlayStateDefinition.Run)
{
    <style>

        .report a {
            font-size: 30px;
            letter-spacing: 5px;
            padding: 35px 20px 3px;
            border-bottom: 2px solid var(--mc);
            color: var(--mc);
        }

            .report a:hover {
                padding-bottom: 1px;
                border-bottom: 5px solid var(--mc);
            }
    </style>
    <div class="main-area flex-column">
        <div class="show-title">演练结束</div>
        @*<div class="report">
                <a href="@Url.Action("Report","Play")/@(Model.Play.Id)">点击查看演练报告</a>
            </div>*@
    </div>
}
else
{

    <style>
        .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.73);">
            <div class="area-h" style="height: calc(var(--mh) * 0.40)">
                <div class="area" style="width: 50%">@Html.Partial("_Run/_SceneInfo", Model)</div>
                <div class="area" style="width: 50%">@Html.Partial("_Run/_ScenePlay")</div>
            </div>
            <div class="area-h" style="height: calc(var(--mh) * 0.35)">
                <div class="area" style="width: 50%">@Html.Partial("_Run/_CmdLog", Model)</div>
                @*<div class="area" style="width: 50%">@Html.Partial("_Run/_CmdSend")</div>*@
                <div class="area" style="width: 50%">@Html.Partial("_Run/_ScenePath")</div>
            </div>
            <div class="area-h" style="height: calc(var(--mh) * 0.25)">
                <div class="area">@Html.Partial("_Run/_CmdRole")</div>
            </div>
        </div>
        <div class="area-v" style="width: calc(var(--mw) * 0.27);">
            <div class="area-h" style="height: calc(var(--mh) * 0.3)">
                <div class="area">@Html.Partial("_Run/_RunBaseInfo")</div>
            </div>
            @*<div class="area-h" style="height: calc(var(--mh) * 0.45)">
                    <div class="area">@Html.Partial("_Run/_ScenePath")</div>
                </div>*@
            <div class="area-h" style="height: calc(var(--mh) * 0.7)">
                <div class="area">@Html.Partial("_Run/_ScoreEval")</div>
            </div>
        </div>
    </div>

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

    @section scripts {

        <script>
            var startFlag = true;
            $(function() {
                window.PreLoad();
                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!');
                    });
                    @*setTimeout(function() {
                            $.iwbAjax5({
                                url: abp.appUrl + "/CampPlay/StartFeedback?no=@(Model.Play.Id)",
                                success: function(res) {
                                    startFlag = res;
                                    if (startFlag) {
                                        window.GetScenes();
                                    }
                                }
                            });
                        },
                        100);*@
                    window.GetScenes();
                    window.ScenePath();
                    @if(Model.Play.PlayModel== CampPlayModelDefinition.Team)
                    {
                        <text>
                            window.GetChat();
                        </text>
                    }
                    window.GetScore();

                });
            });

            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();
        }
        @{
            var dataCenterUrl = SettingManager.GetSettingValue(IwbSettingNames.WeDataCenterIp).Ew("/");
        }
        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>
    }

}