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

@using WeOnlineApp.Configuration
@using WeOnlineApp.Helpers
@model WeOnlineApp.Models.Play.CampPlayModel
@{
    string id = "cmd-send";
    string roles = "";
    var roleArr = Model.Play.PlayRoleNames.Split(',');
    foreach (var role in roleArr)
    {
        roles += "<span class=\" role label label-info\" onclick=\"ChangeRole('" + role + "')\">" + role + "</span>";
    }
    Model.Play.PlayModel = CampPlayModelDefinition.Team;
}
<style>
    .cmd-box {
        height: 100%;
    }

        .cmd-box .tool-box {
            margin: 10px 0 15px;
            position: relative;
        }

            .cmd-box .tool-box .role {
                cursor: pointer;
                min-width: 100px;
                border-radius: 20px;
            }

            .cmd-box .tool-box .role-change-box {
                display: none;
                min-height: 100px;
                border: 1px solid var(--mc);
                background: #f2f6fe;
                position: absolute;
                padding: 5px 10px;
                bottom: calc(100% + 10px);
                left: -45%;
                right: 45%;
                z-index: 2;
                border-radius: 5px;
            }

                .cmd-box .tool-box .role-change-box .role {
                    margin: 3px;
                    padding: 5px 10px;
                    font-size: 13px;
                    color: #fff;
                    background: var(--mc);
                    cursor: pointer;
                }

        .cmd-box .msg-box {
            position: relative;
            height: calc(100% - 60px);
        }

            .cmd-box .msg-box span {
                position: absolute;
                bottom: 10px;
                right: 15px;
            }

            .cmd-box .msg-box textarea {
                border: 1px solid var(--mc);
                background: #f2f6fe;
                color: #3c3c3c;
                height: 100%;
            }

                .cmd-box .msg-box textarea:focus, .cmd-box .msg-box textarea:active {
                    background: #f2f6fe;
                    color: #000;
                }

        .cmd-box .tool-footer {
            display: flex;
        }

            .cmd-box .tool-footer span {
                width: 50%;
                margin: 5px 10px;
            }

    #chat-modal-btn.flash {
        animation: fade 1s infinite;
    }

    @@keyframes fade {
        from {
            opacity: 1.0;
            transform: scale(1);
        }

        50% {
            opacity: 0.9;
            transform: scale(0.9);
        }

        to {
            opacity: 1.0;
            transform: scale(1);
        }
    }
</style>

@Html.Partial("_Run/_AreaBox", $"指令下达区#{id}")

<div style="display: none" id="@id-pre">
    <div class="cmd-box">
        <div class="tool-box">
            @if (Model.PlayUser != null)
            {
                <div class="role-change-box">
                    @Html.Raw(roles)
                </div>
                <span id="self-role" class="btn btn-iwb btn-sm role" style="margin-left: 15px; cursor: pointer;" title="点击切换角色" onclick="ChangeRole('@(Model.PlayUser.Role)', 1)">@(Model.PlayUser.Role)</span>
            }

            @if (Model.Play.PlayModel == CampPlayModelDefinition.Team)
            {
                <span id="chat-modal-btn" class="btn btn-success btn-sm" style="float: right; width: 100px; margin-right: 15px; cursor: pointer;" onclick="ChatModal()"><i class="fas fa-comments"></i>&nbsp;&nbsp;讨论区</span>
                <div class="card  direct-chat direct-chat-primary" style="position: absolute; width: calc(100% - 25px); top: -400px; z-index: 1000; color: #111; background: #f2f6fe; display: none">
                    <div class="card-header">
                        <h3 class="card-title" style="font-weight: 600"><i class="fas fa-comments"></i>&nbsp;&nbsp;讨论区</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="remove" onclick="chatFlag = true">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body " style="height: 250px;">
                        <div class="scroll-box" style="width: 100%; height: 100%;">
                            <div class="direct-chat-messages" id="chat-box" style="height: 100%; overflow: unset;">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="input-group">
                            <input type="text" id="message" name="message" placeholder="请输入..." class="form-control">
                            <span class="input-group-append">
                                <button type="button" onclick="SendChat()" class="btn btn-primary">发送</button>
                            </span>
                        </div>
                    </div>
                </div>
            }

            @if (Model.PlayUser != null && (Model.PlayUser.PlayerType == CampPlayerTypeDefinition.Creator || Model.Play.PlayModel != CampPlayModelDefinition.Team))
            {
                <span class="btn btn-danger btn-sm" style="float: right; margin-right: 25px; transform: scale(0.9); cursor: pointer;" onclick="NextNode()"><i class="fas fa-paper-plane"></i>&nbsp;&nbsp;下一阶段情景</span>
            }
        </div>
        @if (Model.PlayUser != null)
        {
            <div class="msg-box">
                <textarea id="cmd-text" class="form-control" rows="3" placeholder="请输入指令"></textarea>
                <span class="btn btn-iwb btn-sm" onclick="Submit(@(Model.PlayUser.PlayerType))"><i class="fas fa-display-arrow-right"></i>&nbsp;&nbsp;提交指令</span>
            </div>
        }
    </div>
</div>

@using (Html.BeginScripts())
{
    if (Model.PlayUser != null)
    {
        <text>

            <script id="cmd-send-script">
                var $cmdSendBody = $('#@id .box-body');
                $cmdSendBody.html($('#@id-pre').html());
                $('#@id-pre').remove();

                $(function() {
                    $('#message').on('keypress',
                        function(event) {
                            if (event.keyCode == "13") {
                                SendChat();
                                return false;
                            }
                            return true;
                        });

                    $('#cmd-text').on('keypress',
                        function(event) {
                            if (event.keyCode == "13") {
                                Submit(@(Model.PlayUser.PlayerType));
                                return false;
                            }
                            return true;
                        });

                });

                function Submit(type) {
                    var text = $('#cmd-text').val().trim(),
                        role = $('#self-role').text(),
                        path = $('#current-scene-path').val();
                    if (!text) {
                        abp.message.warn("指令不能为空！");
                        return;
                    }
                    var url = abp.appUrl + "/CampPlay/WriteCmdLog";
                    if (type == @(CampPlayerTypeDefinition.Creator)) {
                        if (!path) {
                            abp.message.warn("请选择一个情景！");
                            return;
                        }
                        if (@(roleArr.Length) > 0 && role == "@(Model.PlayUser.Role)") {
                            abp.message.warn("请选择一个角色！");
                            return;
                        }
                        url = abp.appUrl + "/CampPlay/WriteSubmitCmdLog";
                    }
                    $.iwbAjax4({
                        url: url,
                        data: { GroupNo: '@(Model.Play.Id)', BehaviorWord: text, BehaviorRole: role, scenePath: path },
                        success: function() {
                            $('#cmd-text').val('').focus();
                        }
                    });
                }

                function NextNode() {
                    MsgConfirm("确认本阶段情景已处理完，进入下一阶段的情景吗？",
                        "下一阶段情景",
                        function() {
                            $.iwbAjax4({
                                url: abp.appUrl + "/CampPlay/NextFlowNode",
                                data: { Id: '@(Model.Play.Id)' },
                                success: function() {
                                    abp.ui.setBusy($('body'));
                                    setTimeout(function() {
                                            abp.ui.clearBusy($('body'));
                                        },
                                        10000);
                                }
                            });
                        });
                }

                function NextRound() {
                    MsgConfirm("确认本阶段情景已处理完，进入下一阶段的情景吗？",
                        "下一阶段情景",
                        function() {
                            $.iwbAjax1({
                                url: abp.appUrl + "/CampPlay/NextRound",
                                data: { Id: '@(Model.Play.Id)' },
                                success: function() {

                                }
                            });
                        });
                }

                function ChangeRole(role, type) {
                    if (type) {
                        if ($('.role-change-box').css("display")=="none") {
                            $('.role-change-box').fadeIn(600);
                        } else {
                            $('.role-change-box').fadeOut(300);
                        }
                        //$('#self-role').html(role).removeClass('btn-danger').addClass('btn-iwb');
                    } else {
                        $('#self-role').html(role).removeClass('btn-iwb').addClass('btn-danger');
                        $('.role-change-box').fadeOut(300);
                    }
                }
            </script>
        </text>
    }

    if (Model.Play.PlayModel == CampPlayModelDefinition.Team)
    {
        <script id="chat-script">

            function ChatModal() {
                if ($('#chat-box').closest('.card').css("display") == "none") {
                    $('#chat-box').closest('.card').fadeIn(600);
                    $('#chat-modal-btn').removeClass('flash');
                    window.Scroll2Bottom($('#chat-box').closest('.scroll-box'));
                    $('#message').focus();
                } else {
                    $('#chat-box').closest('.card').slideUp();
                }
            }

            function SendChat() {
                var text = $('#message').val();
                if (!text) {
                    return;
                }
                $.iwbAjax4({
                    url: abp.appUrl + "/CampPlay/Chat",
                    data: { Id: '@(Model.Play.Id)', Msg: text },
                    success: function() {
                        $('#message').val('').focus();
                    }
                });
            }

            function GetChat() {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetPlayChats?no=@(Model.Play.Id)',
                    success: function(res) {
                        if (res && res.length) {
                            res.forEach((v)=> {
                                FormatChat(v);
                            });
                        }
                    }
                });
            }

            function FormatChat(data) {
                if (data) {
                    var str = '';
                    var imagePath = data.imagePath ? data.imagePath : '/Content/Image/user.png';
                    var isSelf = '', left = 'left', right = 'right';
                    if (data.userName === '@(AbpSession.UserName)') {
                        isSelf = "right";
                        left = 'right';
                        right = 'left';
                    }
                    str += '<div class="direct-chat-msg {0}">'.format(isSelf);
                    str += '<div class="direct-chat-infos clearfix">';
                    str += '<span class="direct-chat-name float-{0}">{1}</span>'
                        .format(left, data.name); //+"("+data.userName+")");
                    str += '<span class="direct-chat-timestamp float-{0}">{1}</span>'.format(right,
                        new Date(data.logDate).format('hh:mm:ss'));
                    str += '</div>';
                    str += '<img class="direct-chat-img" src="{0}" alt="{1}">'.format(imagePath, data.name);;
                    str += '<div class="direct-chat-text">{0}</div>'.format(data.word);
                    str += '</div>';
                    $('#chat-box').append(str);
                    window.Scroll2Bottom($('#chat-box').closest('.scroll-box'));
                }
            }

            iwbHub.client.getChat = function(msg) {
                console.log('getChat: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data.no == '@(Model.Play.Id)') {
                            var str = FormatChat(data);
                            if (str) {
                                $('#chat-box').append(str);
                                window.Scroll2Bottom($('#chat-box').closest('.scroll-box'));
                                if ($('#chat-box').closest('.card').css("display") == "none"){
                                    $('#chat-modal-btn').addClass('flash');
                                }
                            }
                        }
                    } catch (e) {
                        console.log('getChat: ', e);
                    }
                }
            };
        </script>
    }

}