feat:新增功能
webshell模块（以下功能有待认真测试，此次提交为方便后端接口调试） 1.界面布局基本完成 2.多tab页实现多xshell连接（存在问题有待调整） 3.关闭功能（关闭所有连接）
This commit is contained in:
hanyuxia
116
nezha-fronted/src/components/cli/console.vue
Normal file
116
nezha-fronted/src/components/cli/console.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<style scoped>
|
||||
.console{
|
||||
height:405px;
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="console" >
|
||||
<div :id="'terminal'+idIndex"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Terminal from '../common/js/Xterm'
|
||||
export default {
|
||||
name: 'console',
|
||||
props:{
|
||||
terminal:{/*
|
||||
cols: 400,
|
||||
rows: 400,
|
||||
width:'',
|
||||
height:'',
|
||||
assetId:0,
|
||||
accountId:0,
|
||||
uuid:'aaadwdwd',*/
|
||||
},
|
||||
|
||||
idIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
term: null,
|
||||
terminalSocket: null,
|
||||
obj:{
|
||||
id:2
|
||||
},
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
/*
|
||||
token: {
|
||||
immediate:true,
|
||||
handler(val){
|
||||
if(val){
|
||||
this.create()
|
||||
}
|
||||
}
|
||||
},
|
||||
*/
|
||||
},
|
||||
methods: {
|
||||
create(){
|
||||
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.open(terminalContainer);
|
||||
//this.term.write("**************"+this.terminal.assetId);
|
||||
//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;
|
||||
//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.terminalSocket.onclose = () =>{
|
||||
//alert('closeSocket');
|
||||
};
|
||||
this.terminalSocket.ondata = (data) =>{
|
||||
//alert('data:'+data);
|
||||
};
|
||||
this.terminalSocket.onerror = (e) =>{
|
||||
//alert('error'+e);
|
||||
};
|
||||
|
||||
this.term.attach(this.terminalSocket);
|
||||
this.term._initialized = true;
|
||||
this.term.fit();
|
||||
},
|
||||
|
||||
closeSocket(){
|
||||
if(this.terminalSocket){
|
||||
this.terminalSocket.close();
|
||||
}
|
||||
if(this.term) {
|
||||
this.term.destroy();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.create();
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
beforeCreate(){
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.closeSocket();
|
||||
//this.terminalSocket.close()
|
||||
//this.term.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
nezha-fronted/src/components/cli/webSSH.scss
Normal file
62
nezha-fronted/src/components/cli/webSSH.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
|
||||
.console-dialog {
|
||||
.menu {
|
||||
|
||||
}
|
||||
.console{
|
||||
|
||||
}
|
||||
|
||||
.console-title-icon{
|
||||
font-size:18px;
|
||||
color: #909399;
|
||||
position: absolute;
|
||||
top:9px;
|
||||
}
|
||||
.console-title-icon:hover:before{
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
.el-dialog__body{
|
||||
padding: 0px !important;
|
||||
}
|
||||
.el-dialog__header{
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
.el-tabs--border-card>.el-tabs__content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
/*background-color: #F5F7FA;*/
|
||||
}
|
||||
|
||||
.el-tabs .el-tabs__header {
|
||||
margin-left:90px;
|
||||
margin-right:150px;
|
||||
}
|
||||
|
||||
.el-menu--horizontal>.el-submenu .el-submenu__title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.el-menu.el-menu--horizontal .el-submenu__title i:first-child:before{
|
||||
color: #909399;
|
||||
font-size:22px;
|
||||
}
|
||||
.el-menu.el-menu--horizontal .el-submenu__title i:first-child:hover:before{
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.el-submenu__title:hover{
|
||||
background-color:#FFF !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.dailog-custom{
|
||||
width:100%;
|
||||
}
|
||||
230
nezha-fronted/src/components/cli/webSSH.vue
Normal file
230
nezha-fronted/src/components/cli/webSSH.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<style lang="scss">
|
||||
@import './webSSH.scss';
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog class="console-dialog"
|
||||
:visible.sync="consoleShow"
|
||||
width="70%"
|
||||
:customClass="{'dailog-custom' :isFullScreen == true}"
|
||||
@close="closeDailog"
|
||||
@opened="initDialog">
|
||||
|
||||
<div style='position: relative;border:solid 0px red;'>
|
||||
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;'>
|
||||
<el-submenu index="1" style="width:40px;">
|
||||
<template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 9px;"></i></template>
|
||||
<el-submenu index="1-1">
|
||||
<template slot="title">文字大小</template>
|
||||
<el-menu-item index="1-1-1">最小</el-menu-item>
|
||||
<el-menu-item index="1-1-2">小</el-menu-item>
|
||||
<el-menu-item index="1-1-3">中</el-menu-item>
|
||||
<el-menu-item index="1-1-4">大</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="1-2" >
|
||||
<template slot="title">字体</template>
|
||||
<el-menu-item index="1-2-1">Monosapace</el-menu-item>
|
||||
<el-menu-item index="1-2-2">Courier New</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="2" style="width:50px;">
|
||||
<template slot="title" ><i class="el-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 9px;"></i></template>
|
||||
<el-menu-item index="2-1" @click="download">下载</el-menu-item>
|
||||
<el-menu-item index="2-2" @click="upload">上传</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
|
||||
<el-tabs v-model="editableTabsValue" @tab-click="handleClick" @tab-remove="removeTab" closable style='width:100%' type="border-card">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
<!-- tab显示的内容 -->
|
||||
<span slot="label" > <i class="el-icon-aim"></i>{{item.title}}</span>
|
||||
<my-console :terminal="item.terminal" :ref="'console'+index" :idIndex="index"></my-console>
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
<!--
|
||||
<el-button size='mini' style='position: absolute;right:50px;top:5px;'>设置</el-button>
|
||||
|
||||
<button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
|
||||
-->
|
||||
<i style='right:103px;' class="el-icon-minus console-title-icon"></i>
|
||||
<i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
|
||||
<i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
|
||||
<i style='right:8px;' @click="closeConsole" class="el-icon-close console-title-icon"></i>
|
||||
<!--el-icon-setting el-icon-minus el-icon-full-screen el-icon-copy-document-->
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Console from './console'
|
||||
import uuidv1 from "uuid/v1";
|
||||
|
||||
export default {
|
||||
name: 'webSSH',
|
||||
components: {
|
||||
'my-console': Console
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
consoleShow:false,
|
||||
isFullScreen:false,
|
||||
/*
|
||||
terminal: {
|
||||
//pid: 1,
|
||||
//name: 'terminal',
|
||||
cols: 400,
|
||||
rows: 400,
|
||||
assetId:'',
|
||||
uuid:'',
|
||||
},
|
||||
*/
|
||||
//activeName:'',
|
||||
editableTabsValue: '-1',//当前显示的console
|
||||
editableTabs: [/*
|
||||
{
|
||||
title: '用户管理',
|
||||
name: '1',
|
||||
content: '用户管理内容',
|
||||
terminal: {
|
||||
cols: 400,
|
||||
rows: 400,
|
||||
width:'',
|
||||
height:'',
|
||||
assetId:0,
|
||||
accountId:0,
|
||||
uuid:'aaadwdwd',
|
||||
},
|
||||
}, {
|
||||
title: '角色管理',
|
||||
name: '2',
|
||||
content: '角色管理内容'
|
||||
},*/ ],
|
||||
tabIndex: -1,//添加tab的时候使用，暂留
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUuid(){
|
||||
let uuid = uuidv1();
|
||||
let now = new Date().getTime();
|
||||
uuid = uuid+"-"+now+"-"+now;
|
||||
return uuid;
|
||||
},
|
||||
addConsole(id,host,accountId,port){
|
||||
let uuid = this.getUuid();
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
let title = host;
|
||||
if(port){
|
||||
title = title+":"+port;
|
||||
}
|
||||
const console = {
|
||||
title:title,
|
||||
name:newTabName,
|
||||
terminal: {
|
||||
cols: 825,
|
||||
rows: 800,
|
||||
width:500,
|
||||
height:400,
|
||||
assetId:id,
|
||||
accountId:accountId,
|
||||
uuid:uuid,
|
||||
},
|
||||
};
|
||||
this.editableTabsValue = newTabName;
|
||||
this.editableTabs.push(console);
|
||||
},
|
||||
show(id,host,accountId,port){
|
||||
this.addConsole(id,host,accountId,port);
|
||||
this.consoleShow = true;
|
||||
},
|
||||
initDialog(){
|
||||
|
||||
},
|
||||
|
||||
//可以做最小化的处理，点击窗口外的空白处会调用此方法
|
||||
closeDailog(){
|
||||
//alert('closeDailog');
|
||||
},
|
||||
closeConsole(){
|
||||
//关闭所有连接
|
||||
this.editableTabs.forEach((tab, index) => {
|
||||
this.$refs['console'+index][0].closeSocket();
|
||||
});
|
||||
|
||||
this.editableTabs = [];
|
||||
this.editableTabsValue= '-1',//当前显示的consol
|
||||
this.tabIndex = -1
|
||||
|
||||
this.consoleShow = false;
|
||||
},
|
||||
handleClick(){
|
||||
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
//关闭此console的链接
|
||||
//?????????????????
|
||||
|
||||
if(this.editableTabs.length<=0){
|
||||
this.closeConsole();
|
||||
}
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
//alert(key, keyPath);
|
||||
},
|
||||
download(){
|
||||
|
||||
},
|
||||
upload(){
|
||||
//alert('upload');
|
||||
},
|
||||
fullScreen(){
|
||||
isFullScreen = true;
|
||||
|
||||
//const dailog = document.getElementById("consoleDailog");
|
||||
//dailog.style.width = `${100}%`;
|
||||
},
|
||||
/*
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue = newTabName;
|
||||
},
|
||||
*/
|
||||
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -164,7 +164,7 @@
|
||||
class="el-icon-delete"></i>
|
||||
</span>
|
||||
|
||||
<span title="CLI" @click="ssss(scope.row.id ,scope.row.host)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
|
||||
<span title="CLI" @click="cli(scope.row.id ,scope.row.host,scope.row.accounts)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
|
||||
class="nz-icon nz-icon-cli"></i>
|
||||
</span>
|
||||
</template>
|
||||
@@ -195,6 +195,7 @@
|
||||
ref="elementset"
|
||||
></element-set>
|
||||
<module-box :module="module" @reload="getAssetData" ref="moduleBox"></module-box>
|
||||
<web-ssh ref="webSsh" ></web-ssh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -202,11 +203,14 @@
|
||||
import bus from "../../../libs/bus";
|
||||
import exportXLSX from "../../common/exportXLSX";
|
||||
import endpointStatusPop from "./endpointStatusPop";
|
||||
import webSSH from "../../cli/webSSH";
|
||||
|
||||
export default {
|
||||
name: "asset",
|
||||
components:{
|
||||
'export-excel':exportXLSX,
|
||||
'endpoint-status-pop':endpointStatusPop
|
||||
'endpoint-status-pop':endpointStatusPop,
|
||||
'web-ssh':webSSH,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -498,6 +502,15 @@
|
||||
});
|
||||
window.open(routeData.href);
|
||||
},
|
||||
cli(id,host,accounts){
|
||||
let port = '';
|
||||
let accountId = '';
|
||||
if(accounts && accounts.length>0 && accounts[0].port){
|
||||
port = accounts[0].port;
|
||||
accountId = accounts[0].id;
|
||||
}
|
||||
this.$refs.webSsh.show(id,host,accountId,port);
|
||||
},
|
||||
jumpToAlertMsg(assetId) {
|
||||
this.$store.commit('assetForAlertListChange', assetId);
|
||||
bus.$emit("menu-change", 'alertList');
|
||||
|
||||
Reference in New Issue
Block a user