We_Relese/App/Relese/Views/Exercise/Leader.cshtml

@using WeApp.Configuration
@using WeApp.TrainingCampGroup.Dto
@{
    Layout = "~/Views/Shared/Layout/_Layout.Stu.cshtml";
    CampGroupDto group = ViewBag.Group;
    ViewBag.Title = "指挥长屏(" + group.Name + ")";
    string id = group.Id,
        groupName = group.Name,
        campNo = group.CampNo;
}
@section css{
    <link href="~/Content/Css/Exercise/stu-leader.min.css" rel="stylesheet" />
    <style>
    </style>
}
<div class="body">
    <div class="title-box box">
        <div class="left-box">
            <div class="line"></div>
            <div class="title">@(groupName)指挥部 —— 指挥长</div>
        </div>
        <div class="right-box">
            <div class="btn btn-submit" onclick="SubmitNextScene()">进入下一阶段情景</div>
        </div>
    </div>
    <div class="leader-box box">
        <table class="table">
            <thead>
                <tr>
                    <th style="width: 200px">角色</th>
                    <th>指令内容</th>
                    <th style="width: 80px">下达状态</th>
                    <th style="width: 120px">操作</th>
                </tr>
            </thead>
            <tbody id="log-box">
                <tr class="empty">
                    <td colspan="5">暂无指令，等待组员发送指令</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="question" title="点击处理来电" onclick="ShowQuestion()">
    <button type="button" class="btn btn-danger" style="--w: 80px;">
        <i class="fa fa-phone-volume"></i>
    </button>
</div>
<div class="modal fade" id="modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="cursor: move;">
                <h4 class="modal-title">
                    <span>处置电话提问</span>
                </h4>
                <button type="button" class="close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal " id="form">
                    <input id="id" name="id" type="hidden" value="">
                    <input id="campNo" name="campNo" type="hidden" value="">
                    <input id="groupNo" name="groupNo" type="hidden" value="">
                    <div class="question-text">
                    </div>
                    <div class="form-group row">
                        <div class="" style="width: 100%">
                            <div class="input-group input-group-sm ">
                                <textarea rows="5" class="form-control required" id="handleContent" name="handleContent" placeholder="请输入处理内容..." value="" style="" aria-required="true"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <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>
                <button type="button" class="btn btn-iwb btn-sm save-btn waves-effect" style="min-width:100px;">保存</button>
            </div>
        </div>
    </div>
</div>
<audio id="voiceAudio" style="display: none">
    <source type="audio/wav" />
</audio>
@section scripts
{
    <script>
        $(function() {
            GetLog();
            GetQuestionLogs();
            OverlayScrollbar($('.leader-box'));
            $('#handleContent').keydown(function(e) {
                var theEvent = window.event || e;
                var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
                if (code == 13) {
                    $('#modal .save-btn').click();
                }
            });
        });

        function RoleHandle(that) {
            MsgConfirm("您确认下达这条指令吗？",
                "下达指令",
                function() {
                    var $that = $(that).closest('tr');
                    var id = $that.data('id');
                    $.iwbAjax4({
                        url: abp.appUrl + "Eval/OperationScene?id=" + id,
                        success: function() {
                            $that.removeClass('wait').addClass('send');
                            $that.find('.state').html('已下达');
                            $that.find('.action').html('');

                        }
                    });
                });
        }

        function SubmitNextScene() {
            var log = $("#log-box tr.send");
            if (!log || log.length <= 0) {
                abp.message.warn("请至少下达一条指令后再操作！");
                return;
            }
            MsgConfirm("您确认进入到下一情景吗？",
                "情景流转",
                function() {

                    $.iwbAjax4({
                        url: abp.appUrl + "Eval/NextFlowNode?groupNo=@(id)&campNo=none",
                        success: function(res) {
                            $("#log-box").html('<tr class="empty"><td colspan="5">暂无指令，等待组员发送指令</td></tr>');
                        }
                    });
                });
        }

        function GetLog() {
            $.iwbAjax5({
                url: abp.appUrl + "Query/GetCurrentSceneLog?no=@(id)",
                success: function(res) {
                    if (res) {
                        $("#box-body").empty();
                        var str = '';
                        for (var i = 0; i < res.length; i++) {
                            var item = res[i];
                            str += FormatLog(item);
                        }
                        if (str) {
                            $("#log-box").html(str);
                        }
                    }
                }
            });
        }

        function FormatLog(data) {
            var str = "";
            if (data) {
                var msg = data.word ? data.word : "",
                    btn = data.logState == '@(LogStateDefinition.New)'
                        ? '<button type="button" class="btn btn-submit" style="" onclick="RoleHandle(this)">下达指令</button>'
                        : '',
                    state = data.logState == '@(LogStateDefinition.New)' ? '待下达' : '已下达',
                    style = data.logState == '@(LogStateDefinition.New)' ? 'wait' : 'send';
                str = '<tr class="{5}" data-id="{0}"><td>{1}</td><td>{2}</td><td class="state">{3}</td><td class="action">{4}</td></tr>'.format(
                    data.id,
                    data.role,
                    msg,
                    state,
                    btn,
                    style);
                //str =
                //    '<div class="handle-box leader {4}" data-id="{0}"> <div class="handle-content"><span class="role-text">{1}</span><span class="text">:</span><span class="content-text">{2}</span></div><div class="handle-button">{3}</div></div>'
                //    .format(data.id, data.role, msg, btn, style);
            }
            return str;
        }

        function GetQuestionLogs() {
            $.iwbAjax4({
                url: abp.appUrl + "query/GetQuestionLogs?no=@(id)",
                success: function(res) {
                    if (res && res.length) {
                        res.forEach(v => {
                            if (_phoneLogIds.indexOf(v) < 0) {
                                _phoneLogIds.push(v);
                            }
                        });
                        PhoneQuestion();
                    }
                }
            });
        }

        var _phoneLogIds = [], _currentPhoneLogId, _currentPhoneQuestionText, _voiceText, isPhoning = false;

        function PhoneQuestion() {
            if (isPhoning) {
                return;
            }
            _currentPhoneLogId = _phoneLogIds.shift();
            if (_currentPhoneLogId) {
                isPhoning = true;
                $('.question').fadeIn();
            }
        }

        function ShowQuestion() {
            if (_currentPhoneLogId) {
                if (!_currentPhoneQuestionText) {
                    $.iwbAjax4({
                        url: abp.appUrl + "query/GetQuestionByLog?no=" + _currentPhoneLogId,
                        success: function(res) {
                            _voiceText = _currentPhoneQuestionText = res.content;
                            $('#modal .question-text').html(_currentPhoneQuestionText);
                            Show();
                        }
                    });
                } else {
                    Show();
                }
            }

            function Show() {
                if (_voiceText) {
                    //voice(_voiceText);
                    playVoice(_voiceText);
                    _voiceText = undefined;
                }
                OpenModal({
                    url: abp.appUrl + 'eval/OperationPhone',
                    data: { id: _currentPhoneLogId, campNo: '@(campNo)', groupNo: '@(group.Id)' },
                    success: function() {
                        $('.question').fadeOut();
                        _currentPhoneLogId = undefined;
                        _currentPhoneQuestionText = undefined;
                        isPhoning = false;
                        if (_phoneLogIds.length) {
                            setTimeout(PhoneQuestion, 1500);
                        }
                    }
                });
            }
        }

        function voice(text) {
            if (!text) {
                return;
            }
            try {
                // 语音播报
                var utterThis = new window.SpeechSynthesisUtterance();
                utterThis.text = text; //播放内容按
                window.speechSynthesis.speak(utterThis);
            } catch (e) {
                console.error("语音播报出错：", e);
            }

        }

        function playVoice(callText) {
            //$.iwbAjax5({
            //    url: abp.appUrl+`Query/voice?txt=${callText}&rate=0`,
            //    success: function(res) {
            //        var audioPlay = document.getElementById("voiceAudio");
            //        audioPlay.src = res;
            //        audioPlay.play();
            //    }
            //});
            if (!callText) {
                return;
            }
            var audioPlay = document.getElementById("voiceAudio");
            audioPlay.src = "/Exercise/voice?txt=" + callText;
            audioPlay.play();
        }
    </script>

    <script>
        abp.signalr.connect(['@(id)', '@(campNo)']);
        iwbHub.client.getReloadAll = function(msg) {
            console.log('getReloadAll: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)' || data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadAll: ', e);
                }
            }
        };
        iwbHub.client.getReloadLeader = function(msg) {
            console.log('getReloadLeader: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)' || data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadLeader: ', e);
                }
            }
        };
        iwbHub.client.getOperationLog = function(msg) {
            console.log('getOperationLog: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)') {
                            $('tr.empty').remove();
                            var str = FormatLog(data);
                            $('#log-box').prepend(str);
                        }
                    }
                } catch (e) {
                    console.log('getOperationLog: ', e);
                }
            }
        };
        iwbHub.client.getPhoneQuestion = function(msg) {
            console.log('getPhoneQuestion: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (!data) {
                        return;
                    }
                    if (data.no == '@(id)') {
                        if (_phoneLogIds.indexOf(v) < 0) {
                            _phoneLogIds.push(data.id);
                        }
                        PhoneQuestion();
                    };
                } catch (e) {
                    console.log('getPhoneQuestion: ', e);
                }
            }
        };
    </script>
}