We_Relese/App/Relese/Views/ExerciseV2/Specialist.cshtml

@using WeApp.TrainingCamp.Dto
@using WeApp.TrainingCampGroup.Dto
@using WeApp.Views.ExerciseV2
@{
    Layout = "~/Views/Shared/Layout/_Layout.Spec.cshtml";
    CampDto camp = ViewBag.Camp;
    ViewBag.Title = "专家屏(" + camp.Name + ")";
    List<CampGroupDto> groups = ViewBag.Groups;
    string id = camp.Id;
    string groupSelects = "<option value=\"\">请选择培训营分组...</option>";
    string groupNos = "['" + id + "'";
    if (groups != null && groups.Any())
    {
        foreach (var g in groups)
        {
            groupSelects += "<option value=\"" + g.Id + "\">" + g.Name + "</option>";
            groupNos += ",'" + g.Id + "'";
        }
    }

    groupNos += "]";
}
<style>
   
    body {
        height: 100vh;
    }
    .main-box {
        margin: 0 !important;
    }
    .btn-box {
        position: absolute;
        top: 15px;
        left: 50px;
    }
    .btn-box .vb-btn {
        padding: 8px 20px;
        font-size: 16px;
    }
    .carousel {
        display: flex;
        flex-direction: column;
    }

    .carousel-indicators {
        margin: 0;
        z-index: 10;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        align-items: flex-end;
    }

        .carousel-indicators li {
            color: #fff;
            height: 100%;
            width: auto;
            text-indent: 0;
            background: none;
            border-radius: 0;
            margin: 0;
            padding: 0;
            border: none;
            position: relative;
            display: none;
            cursor: default;
        }

        .carousel-indicators li.active {
            display: flex;
            font-size: 100%;
            display: flex;
            margin: 0;
            padding: 0;
            border: none;
        }

            .carousel-indicators li img {
                cursor: pointer;
                position: absolute;
                width: 40px;
                right: -50px;
                top: 50%;
                transform: translateY(-50%);
            }

    .groups {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 100%;
        width: 300px;
        padding: 5px 0;
        display: none;
        flex-direction: column;
        background: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        z-index: 10;
    }
        .groups .group {
            font-size: 16px;
            padding: 10px;
            color: #36536D;
            font-weight: 400;
            cursor: pointer;
        }
            .groups .group.active {
                background: rgba(9, 75, 136, 0.1);
            }
            .groups .group:hover {
                font-weight: 600;
            }
            .carousel-inner {
                width: 100%;
            }

    .carousel, .carousel-inner, .carousel-item {
        position: unset;
        padding: 0 10px;
    }

 
</style>
@Html.Partial("Layout/V2/_Bg", false)
<div class="main-box box">
    <div class="btn-box">
        <span onclick="Carousel(this)" class="vb-btn active" style="margin-right: 15px;">停止轮播</span>
        <span onclick="ScenePath()" class="vb-btn" style="margin-right: 15px;">情景路径</span>
        <span onclick="Reviews()" class="vb-btn" style="margin-right: 15px;">我要点评</span>
    </div>
    @if (groups != null)
    {
        <div id="Carousel" class="carousel slide" data-ride="carousel" data-pause="false" data-interval="30000" style="width: 100%; height: 100%;">
            <div id="bg_title">
                <ol class="carousel-indicators">
                    @{
                        int i = 0;
                        string active;
                        foreach (var group in groups)
                        {
                            active = i == 0 ? "active" : "";
                            <li data-target="#Carousel" data-slide-to="@(i)" class="@(active)" data-id="@(group.Id)">
                                @(group.Name)
                                <img src="/Content/Image/ExerciseV2/toggle.svg" alt=""  onclick="$('.groups .group').removeClass('active'); $('.groups').css('display','flex').find('#ci_group_@(group.Id)').addClass('active')"/>
                            </li>
                            i++;
                        }
                    }
                    <div class="groups">
                        @{
                            i = 0;
                            foreach (var group in groups)
                            {
                                active = i == 0 ? "active" : "";
                                <div id="ci_group_@(group.Id)" data-target="#Carousel" data-slide-to="@(i)" class="group @(active)" data-id="@(group.Id)" onclick="$('.groups').css('display', 'none')">
                                    @(group.Name)
                                </div>
                                i++;
                            }
                        }
                    </div>
                </ol>
           
            </div>
            <div class="carousel-inner">
                @{
                    i = 0;
                    foreach (var g in groups)
                    {
                        active = i == 0 ? "active" : "";
                        <div class="carousel-item @(active)" style="height: 100%; width: 100%;" data-id="@(g.Id)">
                            @{
                                var model = new ScreenModel(2, g.Id, id, i == 0);
                                 <div style="display: flex; width: 100%; height: 100%;"> 
                                     @Html.Partial("_Screen", model) 
                                 </div> 
                            }
                        </div>
                        i++;
                    }
                }
            </div>
        </div>
    }
</div>
@section scripts
{
    <script src="~/Content/Js/scene-path.js"></script>
    <script>

        $(function () {
            resizeHeight_Screen();
            window.addEventListener('resize', resizeHeight_Screen);

            @if (groups != null && groups.Any())
            {
                <text>
                    $("#Carousel").on("slide.bs.carousel",
                        function(e) {
                            //console.log(e)
                            var no = $(e.relatedTarget).data('id');
                            console.log(no, $("#ci_group_" + no));
                            //window.Scroll2Bottom($('#scene_' + no + ' .box-body'));
                            $(".media-box .body-content").each(function() {
                                $(this).html('<span>播放区</span>');
                            });
                            $('#scene_' + no + ' .box-body .body-content').find('.flash-scene')
                                .removeClass('flash-scene');
                            $('#scene_' + no + ' .box-body .body-content').find('.current-scene')
                                .removeClass('current-scene');
                            
                        });
                </text>
            }
        });
      
        function resizeHeight_Screen() {
            resizeHeight((h, wh) => {
                $(".main-box .carousel-inner").height(wh - h - 30).css("marginTop", "-20px");
            })
        }
        function Carousel(that) {
            var $that = $(that);
            if ($that.hasClass("active")) {
                console.log('pause');
                $("#Carousel").carousel('pause');
                $that.removeClass("active").text('开始轮播');
            } else {
                console.log('cycle');
                $("#Carousel").carousel('cycle');
                $("#Carousel").carousel('next');
                $that.addClass("active").text('停止轮播');
                
            }
        }

        function ScenePath() {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/GetCampRunningInfos?no=@(id)',
                success: function(res) {
                    if (res) {
                        var str = FormatterScenePath(res);
                        if (str) {
                            str = '<div class="modal-body" style="height:800px;padding:0;">{0}</div>'.format(str);
                            $(document).iwbModal('create',
                                {
                                    modal: 'modal-scene-path',
                                    modaltitle: '情景路径详情',
                                    modalFooter: '<div class="modal-footer" style="text-align: center;"><button type="button" class="btn btn-sm btn-outline-iwb waves-effect" data-dismiss="modal" style="min-width:100px;">取消</button></div>',
                                    width: 1000,
                                    modalBody: str,
                                    topHeight:10,
                                    save: function() {
                                        $('#modal-scene-path').modal('hide');
                                    }
                                });
                        } else {
                            abp.message.warn("未查询到情景信息！");
                        }
                    } else {
                        abp.message.warn("未查询到情景信息！");
                    }

                }
            });
        }

        function Reviews() {
            var str = '<div class="modal-body" style="padding:20;"><div class="form-group"><select id="group" class="form-control" style="width: 100%">@Html.Raw(groupSelects)</select></div><div class="form-group"><textarea id="txt" class="form-control" style="width: 100%; height: 150px;border: 1px solid #aaa;" placeholder="请输入点评内容..."></textarea></div></div>';

            $(document).iwbModal('create',
                {
                    modal: 'modal-reviews',
                    modaltitle: '专家点评',
                    modalSize: 'modal-lg',
                    modalBody: str,
                    data: null,
                    shownAfter: function () {
                        var $modal = $("#modal-reviews");
                        $modal.css('display', 'block');
                        var topHeight = $(window).height() - $modal.find('.modal-dialog').height() - 150;
                        if (topHeight < 50) {
                            topHeight = 50;
                        }
                        $modal.find('.modal-dialog').animate({ 'marginTop': topHeight / 2 + "px" });
                    },
                    save: function () {
                        var no = $("#modal-reviews #group").val();
                        if (!no) {
                            abp.message.warn("请选择一个培训营分组！");
                            return;
                        }
                        var txt = $("#modal-reviews #txt").val();
                        if (!txt) {
                            abp.message.warn("请输入内容！");
                            return;
                        }
                        $.iwbAjax1({
                            url: abp.appUrl + "Eval/ZhuanJiaLog",
                            data: { no: no, msg: txt },
                            success: function () {
                                $("#txt").val("");
                            }
                        });
                        //$('#modal-reviews').modal('hide');
                    }
                });
        }
        iwbHub.client.getReloadAll = function (msg) {
            console.log('getReloadAll: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadAll: ', e);
                }
            }
        };

        iwbHub.client.getReloadSpec = function(msg) {
            console.log('getReloadSpec: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        //if (data.no == '@(id)'||@(groupNos).indexOf(data.no)>=0) {
                        if (data.no == '@(id)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadSpec: ', e);
                }
            }
        };

        iwbHub.client.getGroupRole = function(msg) {
            console.log('getGroupRole: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (@(Html.Raw(groupNos)).indexOf(data.no) >= 0) {
                            window.GetRoles(data.no);
                        }
                    }
                } catch (e) {
                    console.log('getGroupRole: ', e);
                }
            }
        };
    </script>
    }