|
|
@@ -0,0 +1,81 @@
|
|
|
+<!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" class="timo-table-wrap">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+
|
|
|
+<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('切换机器')
|
|
|
+ }
|
|
|
+
|
|
|
+ openTerminal();
|
|
|
+ function openTerminal(){
|
|
|
+ var client = new WebSocketClient();
|
|
|
+ var term = new Terminal({
|
|
|
+ cols: 80,
|
|
|
+ rows: 30,
|
|
|
+ cursorBlink: true, // 光标闪烁
|
|
|
+ cursorStyle: "block", // 光标样式 null | 'block' | 'underline' | 'bar'
|
|
|
+ scrollback: 100, //回滚
|
|
|
+ tabStopWidth: 8, //制表宽度
|
|
|
+ screenKeys: true
|
|
|
+ });
|
|
|
+
|
|
|
+ term.on('data', function (data) {
|
|
|
+ // 键盘输入时的回调函数
|
|
|
+ client.sendClientData(data);
|
|
|
+ });
|
|
|
+ term.open(document.getElementById('terminal'));
|
|
|
+ //在页面上显示连接中...
|
|
|
+ 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>
|
