reghao
/
devops


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/xterm.css}"/>
</head>

<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row timo-card-screen put-row">
            <div class="pull-left layui-form-pane">
                <div class="layui-inline">
                    <label class="layui-form-label">环境</label>
                    <div class="layui-input-block timo-search-status">
                        <select id="getPageByEnv" class="timo-search-select" name="env" onchange="getPageByEnv()"
                                mo:dict="ENVIRONMENT" mo-selected="${env}"></select>
                    </div>
                </div>
            </div>
        </div>
        <div id="terminal">
        </div>
    </div>
</div>
</body>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/websocket.js}"></script>
<script type="text/javascript" th:src="@{/js/xterm.js}"></script>
<script type="text/javascript" th:inline="javascript">
    function getPageByEnv() {
        console.log('切换机器')
        layer.msg('切换机器', {offset: '15px', time: 5000, icon: 1});
    }

    openTerminal();
    function openTerminal(){
        var client = new WebSocketClient();
        var term = new Terminal({
            cols: 80,
            rows: 30,
            cursorBlink: true, // 光标闪烁
            cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
            scrollback: 50, //回滚
            tabStopWidth: 8, //制表宽度
            screenKeys: true
        });

        term.open(document.getElementById('terminal'));
        // 键盘输入时的回调函数
        /*term.on('data', function (data) {
            client.sendClientData(data);
        });*/
        //在页面上显示连接中...
        term.write('Connecting...');
        //执行连接操作
        client.connect({
            onError: function (error) {
                // 连接失败回调
                console.log('WebSocket 连接错误...')
                term.write('Error: ' + error + '\r\n');
            },
            onConnect: function () {
                // 连接成功回调
                console.log('WebSocket 连接成功...')
            },
            onClose: function () {
                // 连接关闭回调
                console.log('WebSocket 连接关闭...')
                term.write("\rconnection closed");
            },
            onData: function (data) {
                // 收到数据时回调
                console.log('接收到 WebSocket 的数据...')
                term.write(data);
            }
        });
    }
</script>
</html>