feat:新增功能
webshell模块 1.拖拽调整高度功能 2.全屏功能 3.最小化功能 4.调整样式为固定到界面底部（参考阿里云实现）
This commit is contained in:
hanyuxia
@@ -1,11 +1,11 @@
|
||||
<style scoped>
|
||||
.console{
|
||||
height:405px;
|
||||
height:305px;
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="console" >
|
||||
<div class="console" :id="'ternimalContainer'+idIndex">
|
||||
<div :id="'terminal'+idIndex"></div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -23,16 +23,21 @@ export default {
|
||||
accountId:0,
|
||||
uuid:'aaadwdwd',*/
|
||||
},
|
||||
|
||||
idIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isFullScreen:{
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
term: null,
|
||||
terminalSocket: null,
|
||||
termimalRows:15,
|
||||
termimalHeight:300,
|
||||
obj:{
|
||||
id:2
|
||||
},
|
||||
@@ -51,42 +56,224 @@ export default {
|
||||
*/
|
||||
},
|
||||
methods: {
|
||||
prompt(term) {
|
||||
term.write('\r\n ');//term.write('\r\n~$ ');
|
||||
},
|
||||
resizeConsole(consoleHeigt){
|
||||
//调整终端容器高度
|
||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||
consoleBox.style.height = `${consoleHeigt}px`;
|
||||
//调整终端高度
|
||||
let rows = (consoleHeigt-30)/18;
|
||||
rows = parseInt(rows);
|
||||
this.term.resize(this.term.cols,rows);
|
||||
},
|
||||
resizeServiceConsole(consoleHeigt){
|
||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||
const winStyl={
|
||||
width:consoleBox.style.width,
|
||||
height:consoleBox.style.height,
|
||||
cols:this.term.cols,
|
||||
rows:this.term.rows,
|
||||
};
|
||||
this.$post('/terminal/resize?',winStyl).then(response => {
|
||||
if (response.code === 200) {
|
||||
//this.term.fit();
|
||||
//this.term.scrollToBottom();
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
fullScreenConsole(isFullScreen){
|
||||
this.isFullScreen = isFullScreen;
|
||||
//this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
|
||||
let height = document.body.clientHeight;//可视高度
|
||||
let width = document.body.clientWidth;//可视宽度
|
||||
let rows = height/18;
|
||||
rows = parseInt(rows);
|
||||
if(isFullScreen){
|
||||
//容器高度设置100%
|
||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||
consoleBox.style.height = `${100}%`;
|
||||
}else {
|
||||
rows = this.termimalRows;
|
||||
height = this.termimalHeight;
|
||||
//容器高度设置
|
||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||
consoleBox.style.height = `${this.termimalHeight}px`;
|
||||
}
|
||||
this.term.resize(this.term.cols,rows);//this.term.setOption('rows', rows);
|
||||
const winStyl={
|
||||
width:width,
|
||||
height:height,
|
||||
cols:this.term.cols,
|
||||
rows:parseInt(rows),
|
||||
};
|
||||
//alert(JSON.stringify(winStyl));
|
||||
this.$post('/terminal/resize?',winStyl).then(response => {
|
||||
//alert(JSON.stringify(response));
|
||||
if (response.code === 200) {
|
||||
//this.term.fit();
|
||||
//this.term.scrollToBottom();
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
/*
|
||||
import 'xterm/dist/addons/fullscreen/fullscreen.css'//如果不成功，请检查路径
|
||||
|
||||
import * as fullscreen from 'xterm/lib/addons/fullscreen/fullscreen';
|
||||
Terminal.applyAddon(fullscreen); // Apply the `fullscreen` addon
|
||||
|
||||
//调用
|
||||
term.toggleFullScreen();//全屏
|
||||
term.toggleFullScreen();//正常
|
||||
term.toggleFullScreen();//全屏
|
||||
*/
|
||||
|
||||
//----------2
|
||||
/*
|
||||
window.addEventListener('resize',this.windowChange)
|
||||
|
||||
windowChange(){
|
||||
this.term.fit();
|
||||
this.term.scrollToBottom();
|
||||
}
|
||||
|
||||
// 关闭时,取消监听
|
||||
websocket.onclose = function(evt) {
|
||||
console.log("close", evt);
|
||||
window.removeEventListener('resize',this.windowChange)
|
||||
}; */
|
||||
},
|
||||
create(){
|
||||
let that = this;
|
||||
let rows = this.termimalRows;
|
||||
if(this.isFullScreen){
|
||||
//容器高度设置100%
|
||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||
consoleBox.style.height = `${100}%`;
|
||||
let height = document.body.clientHeight;//可视高度
|
||||
rows = height/18;
|
||||
rows = parseInt(rows);
|
||||
}
|
||||
let terminalContainer = document.getElementById('terminal'+this.idIndex);
|
||||
//alert('id='+'terminal'+this.idIndex);
|
||||
//alert('==='+JSON.stringify(terminalContainer));
|
||||
this.term = new Terminal(
|
||||
/*{
|
||||
width:500,
|
||||
height:400,
|
||||
cols:225,
|
||||
rows:200
|
||||
}*/);
|
||||
this.term = new Terminal({
|
||||
rows:rows,//15行大概300px高，无法设置heigh，只能设置rows
|
||||
//cursorBlink:true,//光标闪烁
|
||||
cursorStyle:'block', // 光标样式 null | 'block' | 'underline' | 'bar'
|
||||
//bellStyle:'sound',
|
||||
disableStdin:false,//是否应禁用输入
|
||||
//scrollback: 800, //回滚
|
||||
//tabStopWidth: 8, //制表宽度
|
||||
//screenKeys: true//
|
||||
/*
|
||||
theme:{
|
||||
foreground:'yellow',//字体
|
||||
background:'#060101',//背景色
|
||||
cursor:'help',//鼠标
|
||||
}*/
|
||||
});
|
||||
this.term.open(terminalContainer);
|
||||
//this.term.write("**************"+this.terminal.assetId);
|
||||
//this.term.focus();
|
||||
this.term.focus();
|
||||
let token = sessionStorage.getItem('nz-token');
|
||||
let url = "ws://192.168.40.247:8080/nz-admin/terminal.ws?width="+this.terminal.width+"&height="+this.terminal.height+"&cols="+this.terminal.cols+"&rows="+this.terminal.rows+"&token="+token+"&assetId="+this.terminal.assetId+"&accountId="+this.terminal.accountId+"&uuid="+this.terminal.uuid;
|
||||
let baseUrl = this.$axios.defaults.baseURL.replace('http','ws');
|
||||
let url = baseUrl+"/terminal.ws?width="+this.terminal.width+"&height="+this.terminal.height+"&cols="+this.terminal.cols+"&rows="+this.terminal.rows+"&token="+token+"&assetId="+this.terminal.assetId+"&accountId="+this.terminal.accountId+"&uuid="+this.terminal.uuid;
|
||||
//alert(url);
|
||||
this.terminalSocket = new WebSocket(url);
|
||||
// this.terminalSocket = new WebSocket("ws://192.168.41.101:8088/nz-admin/terminal.ws?width=1600&height=1005&cols=225&rows=58&token="+this.token);
|
||||
|
||||
//连接成功
|
||||
this.terminalSocket.onopen = () =>{
|
||||
//alert('open');
|
||||
//this.term.write("22222*444555*************"+this.terminal.assetId);
|
||||
};
|
||||
//返回
|
||||
this.terminalSocket.onmessage = function(evt) {
|
||||
//alert('socketmessage='+evt.data);
|
||||
//alert('back='+evt.data);
|
||||
//let str = new TextDecoder().decode(evt.data);
|
||||
|
||||
//let str = new TextDecoder().decode(evt.data);
|
||||
//this.term.write(evt.data);
|
||||
//that.term.write("666622222*444555*************"+evt.data);
|
||||
};
|
||||
//关闭
|
||||
this.terminalSocket.onclose = () =>{
|
||||
//alert('closeSocket');
|
||||
//this.$emit.closeSocket();
|
||||
//????????????报错sorry的，还没来得及看信息就给关闭了？？？？？？？？？？？？？？？？？？？？？？？
|
||||
//this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
|
||||
};
|
||||
this.terminalSocket.ondata = (data) =>{
|
||||
//alert('data:'+data);
|
||||
};
|
||||
|
||||
|
||||
//错误
|
||||
this.terminalSocket.onerror = (e) =>{
|
||||
//alert('error'+e);
|
||||
};
|
||||
//选中 复制
|
||||
this.term.on("selection", function() {
|
||||
if (this.term.hasSelection()) {
|
||||
//this.copy = this.term.getSelection();
|
||||
}
|
||||
});
|
||||
this.term.attachCustomKeyEventHandler(function(ev) {
|
||||
//粘贴 ctrl+v
|
||||
//if (ev.keyCode == 86 && ev.ctrlKey) {
|
||||
//this.terminalSocket.send(new TextEncoder().encode("\x00" + this.copy));
|
||||
//}
|
||||
});
|
||||
|
||||
this.term.attach(this.terminalSocket);
|
||||
this.term._initialized = true;
|
||||
this.term.fit();
|
||||
this.term.fit();//自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
|
||||
|
||||
|
||||
//输入
|
||||
/*
|
||||
this.term.onData = (data) =>{
|
||||
//alert('data:'+data);
|
||||
};*/
|
||||
//登录后，你输入的内容从后台服务返回容
|
||||
this.term.on("data", function(data) {
|
||||
//alert("data"+ data.charCodeAt(0)+"==");
|
||||
let code = data.charCodeAt(0);
|
||||
if(code==13){
|
||||
//that.prompt(that.term);
|
||||
}else {
|
||||
//that.term.write(data);
|
||||
}
|
||||
|
||||
//this.terminalSocket.send(new TextEncoder().encode("\x00" + data));
|
||||
|
||||
});
|
||||
//this.term.on('key', function(key, ev) {
|
||||
//alert("key=========="+key);
|
||||
//this.term.write(key)//输入
|
||||
//this.term.write("**************"+this.terminal.assetId);
|
||||
//term.writeln(key)//输入并换行
|
||||
//});
|
||||
|
||||
/*
|
||||
this.term.prompt = () => {
|
||||
this.term.write('\r\n$ ');
|
||||
};
|
||||
this.term.onKey(e => {
|
||||
const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
|
||||
|
||||
if (e.domEvent.keyCode === 13) {
|
||||
this.prompt(term);
|
||||
} else if (e.domEvent.keyCode === 8) {
|
||||
// Do not delete the prompt
|
||||
if (this.term._core.buffer.x > 2) {
|
||||
this.term.write('\b \b');
|
||||
}
|
||||
} else if (printable) {
|
||||
this.term.write(e.key);
|
||||
}
|
||||
});*/
|
||||
|
||||
},
|
||||
|
||||
closeSocket(){
|
||||
|
||||
Reference in New Issue
Block a user