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

@using WeEngine.Enum
@using WeOnlineApp.Configuration
@using WeOnlineApp.Helpers
@model WeOnlineApp.Models.Play.CampPlayModel
@{
    string id = "cmd-log";
    string body = "<div class=\"log-box-body\"></div>";
}
<style>

    .log-box-body {
        padding-left: 3px;
    }

    .card-log {
        width: 100%;
        margin: 10px 0;
        border-radius: 0.5rem;
        --bg: var(--mc);
    }

        .card-log > .card-header {
            padding: 0 20px 0 0;
            position: relative;
            height: 32px;
        }

            .card-log > .card-header .card-title {
                position: absolute;
                top: 0;
                left: -3px;
                font-weight: bold;
                color: #fff;
                background: var(--bg);
                padding: 5px 10px;
                border-radius: .75rem 0 .75rem 0;
                max-width: 50%;
                display: flex;
            }

                .card-log > .card-header .card-title:before {
                    position: absolute;
                    content: "";
                    width: 0;
                    height: 0;
                    border-right: 5px solid var(--bg);
                    border-bottom: 5px solid transparent;
                    bottom: -5px;
                    left: 0;
                }

                .card-log > .card-header .card-title span {
                    white-space: nowrap;
                    line-height: 21px;
                    font-size: 15px;
                }

                    .card-log > .card-header .card-title span.scene-name {
                        margin-left: 10px;
                        padding-right: 5px;
                        font-size: 12px;
                        font-style: italic;
                        font-weight: normal;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

            .card-log > .card-header > .card-tools {
                margin-top: 3px;
            }

                .card-log > .card-header > .card-tools > .btn {
                    padding: 0 5px !important;
                    font-size: 13px !important;
                    line-height: 22px;
                }

        .card-log > .card-body {
            color: #8c91a8;
            text-align: center;
            padding: 10px;
            font-size: 13px;
            border-radius: 0 0 0.5rem 0.5rem;
            position: relative;
            text-indent: 2em;
        }

    .log-box-body .split-line {
        height: 0;
        border-bottom: 2px dashed var(--mc);
        margin: 10px 0;
    }
</style>
@Html.Partial("_Run/_AreaBox", $"决策指令区#{id}#{body}")

@using (Html.BeginScripts())
{
    <script id="log-script">

        var $cmdLogBody = $('#@id .log-box-body');
        function GetLogs() {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetPlayLogs?no=@(Model.Play.Id)',
                success: res => {
                    if (res && res.length) {
                        res.forEach(v => { FormatterLog(v); });
                    }
                }
            });
        }

        function FormatterLog(data,isNew) {
            if (data) {
                var btnStr , sceneName = GetSceneNameByPath(data.scenePath);//, imagePath = data.imagePath ? data.imagePath : '/Content/Image/user.png';
                if (data.logState == '@(LogStateDefinition.New)') {
                    @{
                        var disabled = Model.PlayUser!=null &&  Model.PlayUser.PlayerType == CampPlayerTypeDefinition.Creator ? "" : "disabled";
                    }
                    btnStr = `<button type="button"  id="log_${data.id}" class="btn btn-sm btn-iwb log-state log-wait" onclick="SubmitCmd('${data.id}')" @(disabled)>等待下达</button>`;
                } else if (data.logState == '@(LogStateDefinition.Submit)' ||
                    data.logState == '@(LogStateDefinition.Send)' ||
                    data.logState == '@(LogStateDefinition.HasMatch)') {
                    btnStr =
                        `<button type="button"  id="log_${data.id}" class="btn btn-sm btn-success log-state" disabled>已下达</button>`;
                } else {
                    btnStr =
                        `<button type="button"  id="log_${data.id}" class="btn btn-sm btn-danger log-state" disabled>未下达</button>'`;
                }
                var str = `<div class="card card-log shadow-sm " id="log_${data.id}">
                            <div class="card-header">
                                <div class="card-title"><span>${data.role}</span><span class="scene-name">${sceneName}</span></div>
                                <div class="card-tools">${btnStr}</div>
                            </div>
                            <div class="card-body">${data.word}</div>
                        </div>`;
                if (str) {
                    isNew ? $cmdLogBody.prepend(str) : $cmdLogBody.append(str);
                    window.Scroll2Top($cmdLogBody.closest('.scroll-box'));
                }
            }
        }

        function GetSceneNameByPath(path) {
            var sceneName = '', $sceneBox = $('.card-scene[data-path="' + path + '"]');
            if ($sceneBox.length > 0) {
                sceneName = $sceneBox.data("name");
            }
            return sceneName;
        }

        function SubmitCmd(id) {
            var path = $('#@id #current-scene-path').val();
            if (path) {
                $.iwbAjax4({
                    url: abp.appUrl + "/CampPlay/SubmitCmd?id=" + id + "&scenePath=" + path,
                    success: function() {}
                });
            } else {
                abp.message.warn("请选择一个情景！");
            }
        }

        function DisabledLog() {
            $('.log-wait').prop('disabled', true).text('未下达').removeClass('log-wait');
        }

    function ChangeLog(word, style) {
        var arr = word.split('|');
        var $log = $('#log_' + arr[0] + ' .card-body');
        if ($log.length) {
            var text = $log.html(), text2 = text;
            if (arr[2]) {
                var arr2 = arr[2].split(',');
                arr2.forEach(function(v) {
                    var reg = new RegExp(v, "g");
                    var str = '<span class="{1} ml-1 mr-1">{0}</span>'.format(v, style);
                    if (text2.indexOf(str) < 0) {
                        text2 = text2.replace(reg, str);
                    }
                });
                $log.html(text2);
                if (text != text2) {
                    $.iwbAjax5({
                        url: abp.appUrl + 'CampPlay/UpdateLog',
                        data: { id: arr[0], Text: text2 }
                    });
                }
            }
        }
    }

    iwbHub.client.getCmdLog = function(msg) {
        console.log('getCmdLog: ', msg);
        if (msg) {
            try {
                var data = JSON.parse(msg);
                if (data.no == '@Model.Play.Id') {
                    FormatterLog(data,true);
                }
            } catch (e) {
                console.log('getCmdLog: ', e);
            }
        }
    };
    iwbHub.client.getCmdLogSubmit = function(msg) {
        console.log('getCmdLogSubmit: ', msg);
        if (msg) {
            try {
                var data = JSON.parse(msg);
                if (data.no == '@Model.Play.Id') {
                    $cmdLogBody.find('#log_' + data.logId).html('已下达').removeClass('btn-iwb')
                        .removeClass('log-wait').addClass('btn-success').prop('disabled', true)
                        .closest('.card-log')
                        .find('.scene-name').html(GetSceneNameByPath(data.scenePath));
                }
            } catch (e) {
                console.log('getCmdLogSubmit: ', e);
            }
        }
    };

    iwbHub.client.getMatchSuccess = function(msg) {
        console.log('getMatchSuccess: ', msg);
        if (msg) {
            try {
                var data = JSON.parse(msg);
                if (!data) {
                    return;
                }
                var url = "", style = "";
                if (data.scoreType == @((int) BehaviorScoreType.Normal)) {
                    style = "text-success";
                    url = "/Content/Media/S4.mp3";
                } else if (data.scoreType == @((int) BehaviorScoreType.Negative)) {
                    style = "text-danger";
                    url = "/Content/Media/E2.mp3";
                } else if (data.scoreType == @((int) BehaviorScoreType.ImportantNegative)) {
                    style = "text-danger text-bold";
                    url = "/Content/Media/E6.mp3";
                }
                ChangeLog(data.word, style);
                window.PlayAudio(url, data.scoreType);
            } catch (e) {
                console.log('getMatchSuccess: ', e);
            }
        }
    };

    iwbHub.client.getDisabledLog = function(msg) {
        console.log('getDisabledLog: ', msg);
        if (msg) {
            try {
                var data = JSON.parse(msg);
                if (data.no == '@Model.Play.Id') {
                    $cmdLogBody.prepend('<div class="split-line"></div>');
                    DisabledLog();
                    window.DisabledScene1();
                }
            } catch (e) {
                console.log('getDisabledLog: ', e);
            }
        }
    }
    </script>
}