feat：新增termail监控功能
This commit is contained in:
zhangyu
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="replay-tab" ref="replayTab">
|
||||
<div class="sub-top-tools">
|
||||
<div class="sub-list-tabs">
|
||||
<div class="sub-list-tab-title">ID：{{obj.id}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("config.terminallog.monitor.monitor")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="replay-container">
|
||||
<div class="replay-operate">
|
||||
<div>
|
||||
<button :title="$t('config.terminallog.record.pause')" @click="shutdown" class="nz-btn nz-btn-style-light nz-btn-size-large" id="terminal-kill" v-show="isPlaying"><i class="nz-icon nz-icon-ZD"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-console" ref="recordConsole">
|
||||
<div :id="obj.uuid" class="record-terminal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Terminal from '../../js/Xterm';
|
||||
import bus from "../../../../libs/bus";
|
||||
|
||||
export default {
|
||||
name: "terminalLogReplayTab",
|
||||
components: {
|
||||
Terminal
|
||||
},
|
||||
props: {
|
||||
obj: Object, //关联的实体对象
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filter: {
|
||||
size: 1,
|
||||
uuid: ""
|
||||
},
|
||||
terminal: null,
|
||||
term: null,
|
||||
terminalSocket: null,
|
||||
recordData: [],
|
||||
isNeedStop: false, // 是否需要停止
|
||||
playedCount: 0, // 当前已经播放完的数量
|
||||
isPlaying: true, // 是否正在播放
|
||||
isFinish: false, //是否已结束
|
||||
isDragging: false, //是否正在拖动进度条
|
||||
draggingOriginalX: 0, //开始拖拽时鼠标的x
|
||||
draggingOriginalProgress: 0, //开始拖拽时的进度
|
||||
recordTick: 50, // 输出间隔时间ms，默认50
|
||||
playerTimer: null, // 定时器
|
||||
playerCurrentTime: 0, // 当前时间进度
|
||||
speedTable: [ // 快进倍速选项
|
||||
{speed: 1, name: '×1'},
|
||||
{speed: 2, name: '×2'},
|
||||
{speed: 4, name: '×4'},
|
||||
{speed: 8, name: '×8'},
|
||||
{speed: 16, name: '×16'}
|
||||
],
|
||||
speedOffset: 0, // 快进倍数index
|
||||
progress: 0, // 进度条进度
|
||||
needSkip: true, // 是否跳过无操作时间，为true时表示需要，即不跳过无操作时间
|
||||
timeUsed: 0,
|
||||
successBackContent:'Connecting to',
|
||||
failBackContent:'Sorry',
|
||||
connectFailContent:'Connection failed',
|
||||
welcomeBackContent:'Welcome',
|
||||
psdCont:'password: ',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//创建连接
|
||||
create(){
|
||||
let that = this;
|
||||
if (this.terminal) {
|
||||
this.terminal.reset(parseInt(this.$refs.recordConsole.offsetWidth/11), parseInt(this.$refs.recordConsole.offsetHeight/18));
|
||||
} else {
|
||||
this.terminal = new Terminal({
|
||||
rows: parseInt(this.$refs.recordConsole.offsetHeight/18),
|
||||
cols: parseInt(this.$refs.recordConsole.offsetWidth/11),
|
||||
cursorStyle:'block', // 光标样式 null | 'block' | 'underline' | 'bar'
|
||||
//bellStyle:'sound',
|
||||
disableStdin:true,//是否应禁用输入
|
||||
});
|
||||
this.terminal.open(document.getElementById(this.obj.uuid));
|
||||
|
||||
let token = sessionStorage.getItem('nz-token');
|
||||
let baseUrl = this.$axios.defaults.baseURL;
|
||||
if (baseUrl.startsWith("/")) {
|
||||
baseUrl = "ws://" + window.location.host + baseUrl;
|
||||
} else {
|
||||
baseUrl = baseUrl.replace("http://", "ws://").replace("https://", "ws://");
|
||||
}
|
||||
///monitor
|
||||
let url = baseUrl+"/terminal/monitor.ws?"+"&token="+token+"&uuid="+this.obj.uuid;
|
||||
console.info(url);
|
||||
if(this.terminalSocket){//如果存在之前的链接 先断开 再链接新的
|
||||
this.terminalSocket.close();
|
||||
}
|
||||
this.terminalSocket = new WebSocket(url);
|
||||
//连接成功
|
||||
this.terminalSocket.onopen = () =>{
|
||||
};
|
||||
//登录后，你输入的内容从后台服务返回
|
||||
this.terminal.on("data", function(data) {
|
||||
console.log(data,'data')
|
||||
/*
|
||||
let code = data.charCodeAt(0);
|
||||
if(code==13){
|
||||
}else {
|
||||
//that.term.write(data);
|
||||
}*/
|
||||
});
|
||||
//返回
|
||||
this.terminalSocket.onmessage = function(evt) {
|
||||
console.log(evt,'evt')
|
||||
let backContent = evt.data;
|
||||
/*
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//关闭
|
||||
this.terminalSocket.onclose = () =>{
|
||||
//报错sorry的，还没来得及看信息就关闭
|
||||
// this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
|
||||
};
|
||||
|
||||
|
||||
//错误
|
||||
this.terminalSocket.onerror = (e) =>{};
|
||||
//选中 复制
|
||||
this.terminal.on("selection", function() {});
|
||||
this.terminal.attachCustomKeyEventHandler(function(ev) { });
|
||||
|
||||
this.terminal.attach(this.terminalSocket);
|
||||
this.terminal._initialized = true;
|
||||
this.terminal.fit();//自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
|
||||
// this.$nextTick(()=>{// 解决进入全屏和退出全屏是底部隐藏
|
||||
// this.setFontSize(this.fontSize);
|
||||
// })
|
||||
}
|
||||
},
|
||||
|
||||
//关闭连接
|
||||
closeSocket(){
|
||||
if(this.terminalSocket){
|
||||
this.terminalSocket.close();
|
||||
}
|
||||
if(this.terminal) {
|
||||
this.terminal.destroy();
|
||||
}
|
||||
},
|
||||
// 切换tab
|
||||
changeTab(tab) {
|
||||
this.$emit('changeTab', tab);
|
||||
},
|
||||
|
||||
getRecordData() {
|
||||
return new Promise(resolve => {
|
||||
this.$get("/terminal/record", this.filter).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.recordData = res.data.list;
|
||||
this.timeUsed = res.data.endTime;
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
consoleResize() {
|
||||
this.terminal && this.terminal.resize(parseInt(this.$refs.recordConsole.offsetWidth/11), parseInt(this.$refs.recordConsole.offsetHeight/18));
|
||||
this.$nextTick(() => {
|
||||
this.terminal && this.terminal.fit();
|
||||
});
|
||||
},
|
||||
shutdown(){
|
||||
this.$put("/terminal/kill", {uuid: this.obj.uuid}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success(this.$t("config.terminallog.success"));
|
||||
this.$emit('exit')
|
||||
} else {
|
||||
this.$message.error(this.$t("config.terminallog.killErrorTip"));
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 入口，监听terminal session的变化，开始功能
|
||||
obj: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(n) {
|
||||
if (n.uuid) {
|
||||
this.recordData = [];
|
||||
this.filter.uuid = n.uuid;
|
||||
this.playerCurrentTime = 0;
|
||||
if (this.playerTimer) {
|
||||
clearTimeout(this.playerTimer);
|
||||
}
|
||||
setTimeout(() => {this.create();}, 200);
|
||||
}
|
||||
}
|
||||
},
|
||||
progress(n) {
|
||||
let progressController = document.getElementById("progressController");
|
||||
progressController.style.left = `${n}%`;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
parseCurrentTime() {
|
||||
let currentTime = parseInt(this.playerCurrentTime/1000);
|
||||
let totalTime = parseInt(this.timeUsed/1000);
|
||||
if (currentTime > totalTime) {
|
||||
currentTime = totalTime;
|
||||
}
|
||||
return `${currentTime} / ${totalTime}`;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', bus.debounce(this.consoleResize, 1000));
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', bus.debounce);
|
||||
this.closeSocket();
|
||||
this.terminal.off("selection");
|
||||
this.terminal.off("data")
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.replay-tab {
|
||||
height: 100%;
|
||||
}
|
||||
.replay-container {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.record-console {
|
||||
padding: 10px 4px 10px 10px;
|
||||
background-color: black;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.terminal-replay-progress {
|
||||
height: 20px;
|
||||
padding: 3px 0;
|
||||
position: relative;
|
||||
width: 500px;
|
||||
}
|
||||
#terminal-kill{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.terminal-replay-progress-bar {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.el-progress-bar__inner {
|
||||
transition: unset;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
.replay-operate {
|
||||
.nz-btn {
|
||||
margin-right: 8px;
|
||||
|
||||
.nz-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.operate-skip {
|
||||
margin: 0 12px !important;
|
||||
}
|
||||
.time-box {
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.progress-controller {
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background-color: #409eef;
|
||||
top: 50%;
|
||||
transform: translate(-7px, -50%);
|
||||
}
|
||||
.progress-controller:hover {
|
||||
background-color: #207ecf;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user