feat:新功能
1.webshell模块:根据是否连接服务器更新tab的title及圆点颜色 fix:修改问题 1.webshell窗口最大化及最小化后获得焦点 2.webshell:浏览器改变大小,调用resize 3.下载功能可进行下载 4.xshell窗口样式修改:左边有白线、最大化后底部有白条、全屏后恢复正常大小时新增窗口,滚动条高度不对、全屏返回正常大小时滚动条高度不对、高度改变后新增窗口,滚动条高度不对
This commit is contained in:
@@ -1,13 +1,13 @@
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.console{
|
.console{
|
||||||
height:305px;
|
height:270px;
|
||||||
padding:5px 5px;
|
padding:5px 5px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div class="console" :id="'ternimalContainer'+idIndex">
|
<div class="console" :id="'ternimalContainer'+idIndex">
|
||||||
<div :id="'terminal'+idIndex"></div>
|
<div :id="'terminal'+idIndex" ></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -38,11 +38,21 @@ export default {
|
|||||||
term: null,
|
term: null,
|
||||||
terminalSocket: null,
|
terminalSocket: null,
|
||||||
termimalRows:15,
|
termimalRows:15,
|
||||||
termimalHeight:300,
|
termimalHeight:270,
|
||||||
fontSize:18,
|
minRow:0,
|
||||||
|
fontSize:15,
|
||||||
|
fontSpaceHeight:2,//一行高度=fontSize+fontSpaceHeight
|
||||||
obj:{
|
obj:{
|
||||||
id:2
|
id:2
|
||||||
},
|
},
|
||||||
|
successBackContent:'Connecting to',
|
||||||
|
failBackContent:'Sorry',
|
||||||
|
connectFailContent:'Connection failed',
|
||||||
|
welcomeBackContent:'Welcome',
|
||||||
|
psdCont:'password: ',
|
||||||
|
conFinish:false,
|
||||||
|
conSuccessNum:0,
|
||||||
|
inputSecret:false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
@@ -61,16 +71,23 @@ export default {
|
|||||||
prompt(term) {
|
prompt(term) {
|
||||||
term.write('\r\n ');//term.write('\r\n~$ ');
|
term.write('\r\n ');//term.write('\r\n~$ ');
|
||||||
},
|
},
|
||||||
resizeConsole(consoleHeigt){
|
resize(consoleHeigt,consoleWidth){
|
||||||
|
this.resizeConsole(consoleHeigt,consoleWidth);
|
||||||
|
this.resizeServiceConsole();
|
||||||
|
},
|
||||||
|
resizeConsole(consoleHeigt,consoleWidth){
|
||||||
//调整终端容器高度
|
//调整终端容器高度
|
||||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||||
consoleBox.style.height = `${consoleHeigt}px`;
|
consoleBox.style.height = `${consoleHeigt}px`;
|
||||||
//调整终端高度
|
//调整终端高度
|
||||||
let rows = (consoleHeigt-30)/this.fontSize;
|
let rows = (consoleHeigt-38)/(this.fontSize+this.fontSpaceHeight);
|
||||||
rows = parseInt(rows);
|
let cols = this.term.cols;
|
||||||
this.term.resize(this.term.cols,rows);
|
if(consoleWidth){//需要调整宽度???
|
||||||
|
cols = (consoleWidth-30)/(this.fontSize+this.fontSpaceHeight);
|
||||||
|
}
|
||||||
|
this.term.resize(parseInt(cols),(parseInt(rows)-this.minRow));
|
||||||
},
|
},
|
||||||
resizeServiceConsole(consoleHeigt){
|
resizeServiceConsole(){
|
||||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||||
let width = document.body.clientWidth;//可视宽度
|
let width = document.body.clientWidth;//可视宽度
|
||||||
let height = parseInt(consoleBox.style.height);
|
let height = parseInt(consoleBox.style.height);
|
||||||
@@ -78,7 +95,7 @@ export default {
|
|||||||
const winStyle={
|
const winStyle={
|
||||||
width:width,
|
width:width,
|
||||||
height:height,
|
height:height,
|
||||||
cols:this.term.cols,
|
cols:this.term.cols,//cols和rows在resizeConsole方法已经设置
|
||||||
rows:this.term.rows,
|
rows:this.term.rows,
|
||||||
};
|
};
|
||||||
//alert(JSON.stringify(winStyle));
|
//alert(JSON.stringify(winStyle));
|
||||||
@@ -94,21 +111,24 @@ export default {
|
|||||||
fullScreenConsole(isFullScreen){
|
fullScreenConsole(isFullScreen){
|
||||||
this.isFullScreen = isFullScreen;
|
this.isFullScreen = isFullScreen;
|
||||||
//this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
|
//this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
|
||||||
let height = document.body.clientHeight;//可视高度
|
let height = document.body.clientHeight-30;//可视高度
|
||||||
let width = document.body.clientWidth;//可视宽度
|
let width = document.body.clientWidth;//可视宽度
|
||||||
let rows = height/this.fontSize;
|
let rows = height/(this.fontSize+this.fontSpaceHeight);
|
||||||
rows = parseInt(rows);
|
rows = parseInt(rows);
|
||||||
if(isFullScreen){
|
if(isFullScreen){
|
||||||
//容器高度设置100%
|
//容器高度设置100%
|
||||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||||
consoleBox.style.height = `${100}%`;
|
consoleBox.style.height = `${height}px`;//减去菜单的高度
|
||||||
}else {
|
}else {
|
||||||
rows = this.termimalRows;
|
//rows = this.termimalRows-this.minRow;
|
||||||
height = this.termimalHeight;
|
height = this.termimalHeight;
|
||||||
//容器高度设置
|
//容器高度设置
|
||||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||||
consoleBox.style.height = `${this.termimalHeight}px`;
|
consoleBox.style.height = `${this.termimalHeight+30}px`;
|
||||||
|
rows = (height-10)/(this.fontSize+this.fontSpaceHeight);//padding 5*2
|
||||||
|
rows = parseInt(rows);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.term.resize(this.term.cols,rows);//this.term.setOption('rows', rows);
|
this.term.resize(this.term.cols,rows);//this.term.setOption('rows', rows);
|
||||||
const winStyl={
|
const winStyl={
|
||||||
width:width,
|
width:width,
|
||||||
@@ -126,19 +146,7 @@ export default {
|
|||||||
this.$message.error(response.msg);
|
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)
|
window.addEventListener('resize',this.windowChange)
|
||||||
|
|
||||||
@@ -162,16 +170,16 @@ term.toggleFullScreen();//全屏
|
|||||||
if(this.isFullScreen){
|
if(this.isFullScreen){
|
||||||
//容器高度设置100%
|
//容器高度设置100%
|
||||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||||
|
let height = document.body.clientHeight;//高度
|
||||||
consoleBox.style.height = `${100}%`;
|
consoleBox.style.height = `${100}%`;
|
||||||
let height = document.body.clientHeight;//可视高度
|
rows = (height-30)/(this.fontSize+this.fontSpaceHeight);
|
||||||
rows = height/this.fontSize;
|
|
||||||
rows = parseInt(rows);
|
rows = parseInt(rows);
|
||||||
}else{
|
}else{
|
||||||
//容器高度设置100%
|
//容器高度设置100%
|
||||||
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
|
||||||
let height = this.terminal.height;//可视高度
|
let height = this.terminal.height;//可视高度
|
||||||
consoleBox.style.height = `${height+5}px`;
|
consoleBox.style.height = `${height}px`;
|
||||||
rows = (height-30)/this.fontSize;
|
rows = (height-38)/(this.fontSize+this.fontSpaceHeight);//menu 30 ,drag 8
|
||||||
rows = parseInt(rows);
|
rows = parseInt(rows);
|
||||||
}
|
}
|
||||||
let terminalContainer = document.getElementById('terminal'+this.idIndex);
|
let terminalContainer = document.getElementById('terminal'+this.idIndex);
|
||||||
@@ -181,6 +189,9 @@ term.toggleFullScreen();//全屏
|
|||||||
cursorStyle:'block', // 光标样式 null | 'block' | 'underline' | 'bar'
|
cursorStyle:'block', // 光标样式 null | 'block' | 'underline' | 'bar'
|
||||||
//bellStyle:'sound',
|
//bellStyle:'sound',
|
||||||
disableStdin:false,//是否应禁用输入
|
disableStdin:false,//是否应禁用输入
|
||||||
|
fontSize:this.fontSize,
|
||||||
|
//lineHeight:1,
|
||||||
|
//fontFamily: 'NotoSans',
|
||||||
//scrollback: 800, //回滚
|
//scrollback: 800, //回滚
|
||||||
//tabStopWidth: 8, //制表宽度
|
//tabStopWidth: 8, //制表宽度
|
||||||
//screenKeys: true//
|
//screenKeys: true//
|
||||||
@@ -199,18 +210,94 @@ term.toggleFullScreen();//全屏
|
|||||||
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;
|
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);
|
//alert(url);
|
||||||
this.terminalSocket = new WebSocket(url);
|
this.terminalSocket = new WebSocket(url);
|
||||||
|
/*
|
||||||
|
alert(this.term.getOption('fontSize'));
|
||||||
|
alert(this.term.getOption('lineHeight'));
|
||||||
|
alert(this.term.getOption('fontWeight'));
|
||||||
|
alert(this.term.getOption('fontFamily'));
|
||||||
|
*/
|
||||||
//连接成功
|
//连接成功
|
||||||
this.terminalSocket.onopen = () =>{
|
this.terminalSocket.onopen = () =>{
|
||||||
//alert('open');
|
//alert('open');
|
||||||
//this.term.write("22222*444555*************"+this.terminal.assetId);
|
//this.term.write("22222*444555*************"+this.terminal.assetId);
|
||||||
};
|
};
|
||||||
|
//登录后,你输入的内容从后台服务返回
|
||||||
|
this.term.on("data", function(data) {
|
||||||
|
//alert("data="+data);
|
||||||
|
//alert("data"+ data.charCodeAt(0)+"==");
|
||||||
|
let code = data.charCodeAt(0);
|
||||||
|
|
||||||
|
if(code==13){
|
||||||
|
//that.term.clear();
|
||||||
|
//alert("data="+data);
|
||||||
|
//that.prompt(that.term);
|
||||||
|
}else {
|
||||||
|
//that.term.write(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.terminalSocket.send(new TextEncoder().encode("\x00" + data));
|
||||||
|
|
||||||
|
});
|
||||||
//返回
|
//返回
|
||||||
this.terminalSocket.onmessage = function(evt) {
|
this.terminalSocket.onmessage = function(evt) {
|
||||||
//alert('socketmessage='+evt.data);
|
//let successBackContent = 'Connecting to';
|
||||||
//alert('back='+evt.data);
|
let backContent = evt.data;
|
||||||
//let str = new TextDecoder().decode(evt.data);
|
//alert(backContent+ backContent.charCodeAt(0)+"==");
|
||||||
|
/*
|
||||||
|
if(that.inputSecret){//当前为密码输入状态
|
||||||
|
}
|
||||||
|
if(backContent.length>1){
|
||||||
|
let pwdInput = backContent.endsWith(that.psdCont);
|
||||||
|
if(pwdInput){//输入密码
|
||||||
|
that.inputSecret = true;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
|
||||||
|
let welComIndex = backContent.indexOf(that.welcomeBackContent);
|
||||||
|
if(welComIndex>-1){//无服务器信息(只与nezha进行了连接)
|
||||||
|
const connectResult = {
|
||||||
|
title:'',
|
||||||
|
color:1,
|
||||||
|
};
|
||||||
|
that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
|
||||||
|
}else {
|
||||||
|
let successContentIndex = backContent.indexOf(that.successBackContent);
|
||||||
|
if(successContentIndex>-1 ){
|
||||||
|
//that.conFinish = true;
|
||||||
|
let startIndex = successContentIndex+that.successBackContent.length+1;
|
||||||
|
backContent = backContent.substring(startIndex);
|
||||||
|
let endIndex = backContent.indexOf('\r\n');
|
||||||
|
let title = backContent.substring(0,endIndex);
|
||||||
|
const connectResult = {
|
||||||
|
title:title,
|
||||||
|
color:2,
|
||||||
|
};
|
||||||
|
that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
|
||||||
|
}else {//失败
|
||||||
|
let failContentIndex = backContent.indexOf(that.failBackContent);
|
||||||
|
let connectFailIndex = backContent.indexOf(that.connectFailContent);
|
||||||
|
if(failContentIndex>-1 ){
|
||||||
|
//that.conFinish = true;
|
||||||
|
const connectResult = {
|
||||||
|
title:'',
|
||||||
|
color:3,
|
||||||
|
};
|
||||||
|
that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
|
||||||
|
}else if(connectFailIndex>-1){
|
||||||
|
let startIndex = successContentIndex+that.successBackContent.length+1;
|
||||||
|
backContent = backContent.substring(startIndex);
|
||||||
|
let endIndex = backContent.indexOf('\r\n');
|
||||||
|
let title = backContent.substring(0,endIndex);
|
||||||
|
const connectResult = {
|
||||||
|
title:'',
|
||||||
|
color:3,
|
||||||
|
};
|
||||||
|
that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//alert('socketmessage='+evt.data);
|
||||||
|
//let str = new TextDecoder().decode(evt.data);
|
||||||
//let str = new TextDecoder().decode(evt.data);
|
//let str = new TextDecoder().decode(evt.data);
|
||||||
//this.term.write(evt.data);
|
//this.term.write(evt.data);
|
||||||
//that.term.write("666622222*444555*************"+evt.data);
|
//that.term.write("666622222*444555*************"+evt.data);
|
||||||
@@ -230,9 +317,9 @@ term.toggleFullScreen();//全屏
|
|||||||
};
|
};
|
||||||
//选中 复制
|
//选中 复制
|
||||||
this.term.on("selection", function() {
|
this.term.on("selection", function() {
|
||||||
if (this.term.hasSelection()) {
|
//if (this.term.hasSelection()) {
|
||||||
//this.copy = this.term.getSelection();
|
//this.copy = this.term.getSelection();
|
||||||
}
|
//}
|
||||||
});
|
});
|
||||||
this.term.attachCustomKeyEventHandler(function(ev) {
|
this.term.attachCustomKeyEventHandler(function(ev) {
|
||||||
//粘贴 ctrl+v
|
//粘贴 ctrl+v
|
||||||
@@ -251,19 +338,7 @@ term.toggleFullScreen();//全屏
|
|||||||
this.term.onData = (data) =>{
|
this.term.onData = (data) =>{
|
||||||
//alert('data:'+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) {
|
//this.term.on('key', function(key, ev) {
|
||||||
//alert("key=========="+key);
|
//alert("key=========="+key);
|
||||||
//this.term.write(key)//输入
|
//this.term.write(key)//输入
|
||||||
@@ -304,6 +379,7 @@ term.toggleFullScreen();//全屏
|
|||||||
if(consoleBox){
|
if(consoleBox){
|
||||||
consoleBox.style.height = `${this.termimalHeight}px`;
|
consoleBox.style.height = `${this.termimalHeight}px`;
|
||||||
}
|
}
|
||||||
|
this.conFinish = false;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
|
|
||||||
#shell-service-resize-mask {
|
#shell-service-resize-mask {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -129,6 +130,7 @@
|
|||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
background: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*-------*/
|
/*-------*/
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div id="shell-service" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen}" v-show="consoleShow">
|
<div id="shell-service" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen}" v-show="consoleShow">
|
||||||
<div id="shell-service-resize-mask"></div>
|
<div id="shell-service-resize-mask"></div>
|
||||||
<div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
|
<div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
|
||||||
<div style='position: relative;border:solid 0px red;'>
|
<div style='position: relative;'>
|
||||||
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
|
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
|
||||||
<el-submenu index="1" style="width:40px;">
|
<el-submenu index="1" style="width:40px;">
|
||||||
<template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 4px;"></i></template>
|
<template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 4px;"></i></template>
|
||||||
@@ -37,19 +37,22 @@
|
|||||||
@tab-click="handleClick"
|
@tab-click="handleClick"
|
||||||
@tab-remove="removeTab"
|
@tab-remove="removeTab"
|
||||||
:before-leave="beforeLeave"
|
:before-leave="beforeLeave"
|
||||||
style='width:100%;'
|
style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
|
||||||
type="border-card">
|
type="border-card" >
|
||||||
<el-tab-pane v-for="(item, index) in editableTabs"
|
<el-tab-pane v-for="(item, index) in editableTabs"
|
||||||
:key="item.name"
|
:key="item.name"
|
||||||
:label="item.title"
|
:label="item.title"
|
||||||
:name="item.name"
|
:name="item.name"
|
||||||
closable
|
closable
|
||||||
>
|
>
|
||||||
<!-- tab显示的内容 <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div>-->
|
<!-- tab显示的内容 1 grey,2 green, 3 red-->
|
||||||
<span slot="label" style="">
|
<span slot="label" style="">
|
||||||
<div class="active-icon grey" style="margin-top: 0px;"></div>{{item.title}}
|
<div :class="{'active-icon grey':item.circleColor == 1,'active-icon green':item.circleColor == 2,'active-icon red':item.circleColor == 3}"
|
||||||
|
style="margin-top: 0px;"></div>{{item.title}}
|
||||||
</span>
|
</span>
|
||||||
<my-console :terminal="item.terminal" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen"></my-console>
|
|
||||||
|
<my-console :terminal="item.terminal" @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen"></my-console>
|
||||||
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane key="add" name="add">
|
<el-tab-pane key="add" name="add">
|
||||||
<span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
|
<span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
|
||||||
@@ -150,7 +153,7 @@
|
|||||||
consoleShow:false,
|
consoleShow:false,
|
||||||
isFullScreen:false,
|
isFullScreen:false,
|
||||||
initConsoleHeight:300,//只读,初始化高度
|
initConsoleHeight:300,//只读,初始化高度
|
||||||
consoleHeight:300,
|
consoleHeight:300,//console高度
|
||||||
currentTransform:0,
|
currentTransform:0,
|
||||||
editableTabsValue: '-1',//当前显示的console
|
editableTabsValue: '-1',//当前显示的console
|
||||||
currentIndex:'-1',
|
currentIndex:'-1',
|
||||||
@@ -195,6 +198,7 @@
|
|||||||
const console = {
|
const console = {
|
||||||
title:title,
|
title:title,
|
||||||
name:newTabName,
|
name:newTabName,
|
||||||
|
circleColor:1,//1 grey,2 green, 3 red
|
||||||
terminal: {
|
terminal: {
|
||||||
name:newTabName,
|
name:newTabName,
|
||||||
cols: 225,
|
cols: 225,
|
||||||
@@ -221,6 +225,7 @@
|
|||||||
},10)
|
},10)
|
||||||
|
|
||||||
//this.$store.commit('addConsole');
|
//this.$store.commit('addConsole');
|
||||||
|
|
||||||
},
|
},
|
||||||
show(id,host,accountId,port){
|
show(id,host,accountId,port){
|
||||||
this.addConsole(id,host,accountId,port);
|
this.addConsole(id,host,accountId,port);
|
||||||
@@ -251,6 +256,18 @@
|
|||||||
},
|
},
|
||||||
handleClick(){
|
handleClick(){
|
||||||
|
|
||||||
|
},
|
||||||
|
refreshTabTitle(connectResult){
|
||||||
|
if (this.editableTabs && this.editableTabs.length > 0) {
|
||||||
|
this.editableTabs.forEach((tab, index) => {
|
||||||
|
if (tab.name === this.editableTabsValue) {
|
||||||
|
if(connectResult.title && connectResult.title!=''){
|
||||||
|
tab.title = connectResult.title;
|
||||||
|
}
|
||||||
|
tab.circleColor = connectResult.color;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
removeTab(targetName) {
|
removeTab(targetName) {
|
||||||
let tabs = this.editableTabs;
|
let tabs = this.editableTabs;
|
||||||
@@ -342,11 +359,11 @@
|
|||||||
},
|
},
|
||||||
*/
|
*/
|
||||||
handleChange:function(file,fileList){
|
handleChange:function(file,fileList){
|
||||||
//if (fileList.length > 0) {
|
if (fileList.length > 0) {
|
||||||
//this.uploadFileList = [fileList[fileList.length - 1]]
|
this.uploadFileList = [fileList[fileList.length - 1]]
|
||||||
//}
|
}
|
||||||
//this.uploadFile.file = this.uploadFileList[0];
|
this.uploadFile.file = this.uploadFileList[0];
|
||||||
this.uploadFile.file = file;
|
//this.uploadFile.file = file;
|
||||||
},
|
},
|
||||||
upload() {
|
upload() {
|
||||||
//if(this.uploadFile && this.uploadFile.file.raw){
|
//if(this.uploadFile && this.uploadFile.file.raw){
|
||||||
@@ -370,14 +387,13 @@
|
|||||||
download(){
|
download(){
|
||||||
this.downloadFile.uuid = this.currentUuid;
|
this.downloadFile.uuid = this.currentUuid;
|
||||||
this.$post('terminal/download',this.downloadFile,{responseType:'blob'}).then(res => {
|
this.$post('terminal/download',this.downloadFile,{responseType:'blob'}).then(res => {
|
||||||
let fileName= this.downloadFile.path.substring(this.downloadFile.path.indexOf('/')+1);
|
let fileName= this.downloadFile.path.substring(this.downloadFile.path.lastIndexOf('/')+1);
|
||||||
if(res.code == 200 ){
|
|
||||||
if(window.navigator.msSaveOrOpenBlob){
|
if(window.navigator.msSaveOrOpenBlob){
|
||||||
// 兼容ie11
|
// 兼容ie11
|
||||||
let blobObject = new Blob([res.data]);
|
let blobObject = new Blob([res]);
|
||||||
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
|
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
|
||||||
}else{
|
}else{
|
||||||
let url = URL.createObjectURL(new Blob([res.data]));
|
let url = URL.createObjectURL(new Blob([res]));
|
||||||
let a = document.createElement('a');
|
let a = document.createElement('a');
|
||||||
document.body.appendChild(a); //此处增加了将创建的添加到body当中
|
document.body.appendChild(a); //此处增加了将创建的添加到body当中
|
||||||
a.href = url;
|
a.href = url;
|
||||||
@@ -387,9 +403,12 @@
|
|||||||
a.remove(); //将a标签移除
|
a.remove(); //将a标签移除
|
||||||
}
|
}
|
||||||
this.closeDownloadDialog();
|
this.closeDownloadDialog();
|
||||||
|
/*
|
||||||
|
if(res.code == 200 ){
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
this.$message.error(res.msg);
|
this.$message.error(res.msg);
|
||||||
}
|
}*/
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
/*upload--download end*/
|
/*upload--download end*/
|
||||||
@@ -399,7 +418,7 @@
|
|||||||
this.consoleShow = false;
|
this.consoleShow = false;
|
||||||
this.$store.commit('minConsole');
|
this.$store.commit('minConsole');
|
||||||
},
|
},
|
||||||
fullScreen(){
|
fullScreen(isChange){
|
||||||
//dialog全屏
|
//dialog全屏
|
||||||
this.isFullScreen = !this.isFullScreen;
|
this.isFullScreen = !this.isFullScreen;
|
||||||
|
|
||||||
@@ -411,6 +430,20 @@
|
|||||||
if(!this.isFullScreen){
|
if(!this.isFullScreen){
|
||||||
let targetDiv= document.getElementById('shell-service');
|
let targetDiv= document.getElementById('shell-service');
|
||||||
targetDiv.style.height=this.initConsoleHeight+'px';
|
targetDiv.style.height=this.initConsoleHeight+'px';
|
||||||
|
this.consoleHeight=this.initConsoleHeight;
|
||||||
|
}else {
|
||||||
|
let targetDiv= document.getElementById('shell-service');
|
||||||
|
targetDiv.style.height=`${100}%`;
|
||||||
|
let height = document.body.clientHeight;//可视高度
|
||||||
|
this.consoleHeight=height;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.editableTabs && this.editableTabs.length > 0) {
|
||||||
|
this.editableTabs.forEach((tab, index) => {
|
||||||
|
if (tab.name === this.editableTabsValue) {
|
||||||
|
this.$refs['console' + index][0].focusConsole();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//const dailog = document.getElementById("consoleDailog");
|
//const dailog = document.getElementById("consoleDailog");
|
||||||
@@ -454,13 +487,25 @@
|
|||||||
document.onmouseup=function(){
|
document.onmouseup=function(){
|
||||||
document.onmousemove=null;
|
document.onmousemove=null;
|
||||||
_this.editableTabs.forEach((tab, index) => {
|
_this.editableTabs.forEach((tab, index) => {
|
||||||
_this.$refs['console'+index][0].resizeServiceConsole(parseInt(targetDiv.style.height));
|
// _this.$refs['console'+index][0].resizeServiceConsole(parseInt(targetDiv.style.height));
|
||||||
|
_this.$refs['console'+index][0].resizeServiceConsole();
|
||||||
});
|
});
|
||||||
|
|
||||||
_this.consoleHeight = parseInt(targetDiv.style.height);
|
_this.consoleHeight = parseInt(targetDiv.style.height);
|
||||||
if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
|
if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
windowChange(){
|
||||||
|
//alert('winChange');
|
||||||
|
if(this.editableTabs&&this.editableTabs.length>0){
|
||||||
|
let width = document.body.clientWidth;//可视宽度
|
||||||
|
var targetDiv= document.getElementById('shell-service'); //e.target.parentNode.parentNode;.children[0]
|
||||||
|
var targetDivHeight=targetDiv.offsetHeight;
|
||||||
|
this.editableTabs.forEach((tab, index) => {
|
||||||
|
this.$refs['console'+index][0].resize(targetDivHeight,width);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$store.state.consoleShow':function(val){
|
'$store.state.consoleShow':function(val){
|
||||||
@@ -473,13 +518,23 @@
|
|||||||
this.show(id,host,accountId,port);
|
this.show(id,host,accountId,port);
|
||||||
}else {
|
}else {
|
||||||
this.consoleShow = true;
|
this.consoleShow = true;
|
||||||
|
//min后,从header区域打开,获得焦点
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.editableTabs && this.editableTabs.length > 0) {
|
||||||
|
this.editableTabs.forEach((tab, index) => {
|
||||||
|
if (tab.name === this.editableTabsValue ) {
|
||||||
|
this.$refs['console' + index][0].focusConsole();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
this.$store.state.consoleShow = false;
|
this.$store.state.consoleShow = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
window.addEventListener('resize',this.windowChange);
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user