🔨 执行日志.
This commit is contained in:
lijiahang
@@ -1,5 +1,4 @@
|
||||
import type { IDisposable, ITerminalOptions, ITerminalInitOnlyOptions } from 'xterm';
|
||||
import type { Terminal } from 'xterm';
|
||||
import type { IDisposable, ITerminalInitOnlyOptions, ITerminalOptions, Terminal } from 'xterm';
|
||||
import type { FitAddon } from 'xterm-addon-fit';
|
||||
import type { SearchAddon } from 'xterm-addon-search';
|
||||
import type { CanvasAddon } from 'xterm-addon-canvas';
|
||||
@@ -96,3 +95,44 @@ export interface ILogAppender {
|
||||
// 关闭
|
||||
close(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量执行状态
|
||||
*/
|
||||
export const execStatus = {
|
||||
// 等待中
|
||||
WAITING: 'WAITING',
|
||||
// 运行中
|
||||
RUNNING: 'RUNNING',
|
||||
// 执行完成
|
||||
COMPLETED: 'COMPLETED',
|
||||
// 执行失败
|
||||
FAILED: 'FAILED',
|
||||
};
|
||||
|
||||
/**
|
||||
* 主机执行状态
|
||||
*/
|
||||
export const execHostStatus = {
|
||||
// 等待中
|
||||
WAITING: 'WAITING',
|
||||
// 运行中
|
||||
RUNNING: 'RUNNING',
|
||||
// 执行完成
|
||||
COMPLETED: 'COMPLETED',
|
||||
// 执行失败
|
||||
FAILED: 'FAILED',
|
||||
// 执行超时
|
||||
TIMEOUT: 'TIMEOUT',
|
||||
// 已中断
|
||||
INTERRUPTED: 'INTERRUPTED',
|
||||
};
|
||||
|
||||
// 执行状态 字典项
|
||||
export const execStatusKey = 'execStatus';
|
||||
|
||||
// 执行状态 字典项
|
||||
export const execHostStatusKey = 'execHostStatus';
|
||||
|
||||
// 加载的字典值
|
||||
export const dictKeys = [execStatusKey, execHostStatusKey];
|
||||
121
orion-ops-ui/src/components/exec/log/panel/exec-host.vue
Normal file
121
orion-ops-ui/src/components/exec/log/panel/exec-host.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<!-- 执行主机 -->
|
||||
<div class="container">
|
||||
<!-- 表头 -->
|
||||
<div class="panel-header">
|
||||
<h3>执行主机</h3>
|
||||
<!-- 操作 -->
|
||||
<a-button v-if="visibleBack"
|
||||
size="small"
|
||||
@click="emits('back')">
|
||||
返回
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 主机列表 -->
|
||||
<div class="exec-host-container">
|
||||
<div v-for="item in hosts"
|
||||
:key="item.id"
|
||||
class="exec-host-item"
|
||||
:class="[ current === item.id ? 'exec-host-item-selected' : '' ]"
|
||||
@click="emits('selected', item.id)">
|
||||
<!-- 主机名称 -->
|
||||
<div class="exec-host-item-name">
|
||||
<span class="host-name">{{ item.hostName }}</span>
|
||||
<span class="host-address">{{ item.hostAddress }}</span>
|
||||
</div>
|
||||
<!-- 状态 -->
|
||||
<div class="exec-host-item-status">
|
||||
<a-tag :color="getDictValue(execHostStatusKey, item.status, 'execColor')">
|
||||
{{ getDictValue(execHostStatusKey, item.status) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'execHost'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ExecCommandHostResponse } from '@/api/exec/exec';
|
||||
import { useDictStore } from '@/store';
|
||||
import { execHostStatusKey } from './const';
|
||||
|
||||
const props = defineProps<{
|
||||
visibleBack: boolean;
|
||||
current: number;
|
||||
hosts: Array<ExecCommandHostResponse>;
|
||||
}>();
|
||||
const emits = defineEmits(['back', 'selected']);
|
||||
|
||||
const { getDictValue } = useDictStore();
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.exec-host-container {
|
||||
margin-top: 4px;
|
||||
position: absolute;
|
||||
width: calc(100% - 32px);
|
||||
height: calc(100% - 68px);
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.exec-host-item-selected {
|
||||
background: var(--color-fill-3) !important;
|
||||
}
|
||||
|
||||
.exec-host-item {
|
||||
height: 46px;
|
||||
padding: 8px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
background: var(--color-fill-2);
|
||||
transition: all .2s;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-fill-3);
|
||||
}
|
||||
|
||||
&-name {
|
||||
width: calc(100% - 72px);
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--color-text-2);
|
||||
|
||||
.host-name, .host-address {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.host-address {
|
||||
margin-top: 2px;
|
||||
font-size: 10px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
}
|
||||
|
||||
&-status {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
171
orion-ops-ui/src/components/exec/log/panel/index.vue
Normal file
171
orion-ops-ui/src/components/exec/log/panel/index.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="log-panel-container" v-if="command">
|
||||
<!-- 执行主机 -->
|
||||
<exec-host class="exec-host-container"
|
||||
:visibleBack="visibleBack"
|
||||
:current="currentHostExecId"
|
||||
:hosts="command.hosts"
|
||||
@selected="selectedHost"
|
||||
@back="emits('back')" />
|
||||
<!-- 日志容器 -->
|
||||
<log-view ref="logView"
|
||||
class="log-view-container"
|
||||
:current="currentHostExecId"
|
||||
:command="command" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'execLogPanel'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ExecCommandResponse } from '@/api/exec/exec';
|
||||
import { onUnmounted, ref, nextTick } from 'vue';
|
||||
import { getExecLogStatus } from '@/api/exec/exec-log';
|
||||
import { execHostStatus, execStatus } from './const';
|
||||
import ExecHost from './exec-host.vue';
|
||||
import LogView from './log-view.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
visibleBack: boolean
|
||||
}>();
|
||||
|
||||
const emits = defineEmits(['back']);
|
||||
|
||||
const logView = ref();
|
||||
const currentHostExecId = ref();
|
||||
const statusIntervalId = ref();
|
||||
const finishIntervalId = ref();
|
||||
const command = ref<ExecCommandResponse>();
|
||||
|
||||
// 打开
|
||||
const open = (record: ExecCommandResponse) => {
|
||||
command.value = record;
|
||||
currentHostExecId.value = record.hosts[0].id;
|
||||
// 注册状态轮询
|
||||
statusIntervalId.value = setInterval(fetchTaskStatus, 5000);
|
||||
// 注册完成时间轮询
|
||||
finishIntervalId.value = setInterval(setTaskFinishTime, 1000);
|
||||
// 打开日志
|
||||
nextTick(() => {
|
||||
logView.value?.open();
|
||||
});
|
||||
};
|
||||
|
||||
// 加载状态
|
||||
const fetchTaskStatus = async () => {
|
||||
if (!command.value) {
|
||||
return;
|
||||
}
|
||||
// 加载状态
|
||||
const { data: { logList, hostList } } = await getExecLogStatus([command.value.id]);
|
||||
if (logList.length) {
|
||||
command.value.status = logList[0].status;
|
||||
command.value.startTime = logList[0].startTime;
|
||||
command.value.finishTime = logList[0].finishTime;
|
||||
}
|
||||
// 设置主机状态
|
||||
for (let host of command.value.hosts) {
|
||||
const hostStatus = hostList.find(s => s.id === host.id);
|
||||
if (hostStatus) {
|
||||
host.status = hostStatus.status;
|
||||
host.startTime = hostStatus.startTime;
|
||||
if (hostStatus.finishTime) {
|
||||
host.finishTime = hostStatus.finishTime;
|
||||
}
|
||||
host.exitStatus = hostStatus.exitStatus;
|
||||
host.errorMessage = hostStatus.errorMessage;
|
||||
}
|
||||
}
|
||||
// 已完成跳过
|
||||
if (command.value.status === execStatus.COMPLETED ||
|
||||
command.value.status === execStatus.FAILED) {
|
||||
closeClient();
|
||||
}
|
||||
};
|
||||
|
||||
// 设置完成时间
|
||||
const setTaskFinishTime = () => {
|
||||
const hosts = command.value?.hosts;
|
||||
if (!hosts) {
|
||||
return;
|
||||
}
|
||||
hosts.forEach(s => {
|
||||
// 未完成自动设置完成时间为当前时间 用于展示使用时间
|
||||
if (s.status === execHostStatus.WAITING ||
|
||||
s.status === execHostStatus.RUNNING) {
|
||||
if (!s.startTime) {
|
||||
s.startTime = Date.now();
|
||||
}
|
||||
s.finishTime = Date.now();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
|
||||
// 选中主机
|
||||
const selectedHost = (hostId: number) => {
|
||||
currentHostExecId.value = hostId;
|
||||
};
|
||||
|
||||
// 关闭连接
|
||||
const closeClient = () => {
|
||||
// 关闭日志
|
||||
logView.value?.closeClient();
|
||||
// 清理轮询
|
||||
clearAllInterval();
|
||||
};
|
||||
|
||||
// 清理并且关闭
|
||||
const closeAll = () => {
|
||||
// 关闭日志
|
||||
logView.value?.closeAll();
|
||||
// 清理轮询
|
||||
clearAllInterval();
|
||||
};
|
||||
|
||||
// 清理轮询
|
||||
const clearAllInterval = () => {
|
||||
// 关闭状态轮询
|
||||
clearInterval(statusIntervalId.value);
|
||||
// 关闭使用时间轮询
|
||||
clearInterval(finishIntervalId.value);
|
||||
};
|
||||
|
||||
onUnmounted(closeAll);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@host-width: 420px;
|
||||
@host-real-width: @host-width + 16px;
|
||||
|
||||
.log-panel-container {
|
||||
width: calc(100% - 32px);
|
||||
height: calc(100% - 32px);
|
||||
display: flex;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.exec-host-container, .log-view-container {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
.exec-host-container {
|
||||
width: @host-width;
|
||||
padding: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.log-view-container {
|
||||
width: calc(100% - @host-real-width);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { ILogAppender, LogAddons, LogAppenderConf, LogDomRef } from './appender.const';
|
||||
import type { ILogAppender, LogAddons, LogAppenderConf, LogDomRef } from './const';
|
||||
import type { ExecTailRequest } from '@/api/exec/exec';
|
||||
import { AppenderOptions } from './appender.const';
|
||||
import { AppenderOptions } from './const';
|
||||
import { getExecLogTailToken } from '@/api/exec/exec';
|
||||
import { webSocketBaseUrl } from '@/utils/env';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
271
orion-ops-ui/src/components/exec/log/panel/log-item.vue
Normal file
271
orion-ops-ui/src/components/exec/log/panel/log-item.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 面板头部 -->
|
||||
<div class="log-header">
|
||||
<!-- 左侧信息 -->
|
||||
<a-space class="log-header-left" :size="12">
|
||||
<!-- 状态 -->
|
||||
<a-tag :color="getDictValue(execHostStatusKey, host.status, 'color')">
|
||||
{{ getDictValue(execHostStatusKey, host.status) }}
|
||||
</a-tag>
|
||||
<!-- exitStatus -->
|
||||
<a-tag v-if="host.exitStatus || host.exitStatus === 0"
|
||||
:color="host.exitStatus === 0 ? 'arcoblue' : 'orangered'"
|
||||
title="exit status">
|
||||
<template #icon>
|
||||
<icon-check v-if="host.exitStatus === 0" />
|
||||
<icon-exclamation v-else />
|
||||
</template>
|
||||
<span class="tag-value">{{ host.exitStatus }}</span>
|
||||
</a-tag>
|
||||
<!-- 持续时间 -->
|
||||
<a-tag color="arcoblue" title="持续时间">
|
||||
<template #icon>
|
||||
<icon-loading v-if="host.status === execHostStatus.WAITING || host.status === execHostStatus.RUNNING" />
|
||||
<icon-clock-circle v-else />
|
||||
</template>
|
||||
<span class="tag-value">{{ formatDuration(host.startTime, host.finishTime) || '0s' }}</span>
|
||||
</a-tag>
|
||||
</a-space>
|
||||
<!-- 右侧操作 -->
|
||||
<a-space class="log-header-right" :size="12">
|
||||
<!-- 搜索 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="搜索"
|
||||
@click="() => appender?.openSearch()">
|
||||
<icon-find-replace />
|
||||
</span>
|
||||
<!-- 增大字号 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="增大字号"
|
||||
@click="() => appender?.addFontSize(1)">
|
||||
<icon-zoom-in />
|
||||
</span>
|
||||
<!-- 减小字号 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="减小字号"
|
||||
@click="() => appender?.addFontSize(-1)">
|
||||
<icon-zoom-out />
|
||||
</span>
|
||||
<!-- 去顶部 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="去顶部"
|
||||
@click="() => appender?.toTop()">
|
||||
<icon-up />
|
||||
</span>
|
||||
<!-- 去底部 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="去底部"
|
||||
@click="() => appender?.toBottom()">
|
||||
<icon-down />
|
||||
</span>
|
||||
<!-- 全选 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="全选"
|
||||
@click="() => appender?.selectAll()">
|
||||
<icon-expand />
|
||||
</span>
|
||||
<!-- 复制 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="复制"
|
||||
@click="() => appender?.copy()">
|
||||
<icon-copy />
|
||||
</span>
|
||||
<!-- 复制全部 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="复制全部"
|
||||
@click="() => appender?.copyAll()">
|
||||
<icon-brush />
|
||||
</span>
|
||||
<!-- 清空 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="清空"
|
||||
@click="() => appender?.clear()">
|
||||
<icon-delete />
|
||||
</span>
|
||||
<!-- 下载 -->
|
||||
<span class="log-action click-icon-wrapper"
|
||||
title="下载"
|
||||
@click="downloadLogFile(host.id)">
|
||||
<icon-download />
|
||||
</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 右键菜单 -->
|
||||
<a-dropdown :popup-max-height="false"
|
||||
trigger="contextMenu"
|
||||
position="bl"
|
||||
alignPoint>
|
||||
<!-- 日志面板 -->
|
||||
<div class="log-wrapper">
|
||||
<!-- terminal -->
|
||||
<div class="log-appender" ref="appenderRef" />
|
||||
<!-- 搜索框 -->
|
||||
<xterm-search-modal ref="searchRef"
|
||||
class="search-modal"
|
||||
@find="searchWords"
|
||||
@close="searchClose" />
|
||||
</div>
|
||||
<!-- 右键菜单 -->
|
||||
<template #content>
|
||||
<!-- 去顶部 -->
|
||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||
@click="() => appender?.toTop()">
|
||||
<template #icon>
|
||||
<icon-up />
|
||||
</template>
|
||||
<span>去顶部</span>
|
||||
</a-doption>
|
||||
<!-- 去底部 -->
|
||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||
@click="() => appender?.toBottom()">
|
||||
<template #icon>
|
||||
<icon-down />
|
||||
</template>
|
||||
<span>去底部</span>
|
||||
</a-doption>
|
||||
<!-- 全选 -->
|
||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||
@click="() => appender?.selectAll()">
|
||||
<template #icon>
|
||||
<icon-expand />
|
||||
</template>
|
||||
<span>全选</span>
|
||||
</a-doption>
|
||||
<!-- 复制 -->
|
||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||
@click="() => appender?.copy()">
|
||||
<template #icon>
|
||||
<icon-copy />
|
||||
</template>
|
||||
<span>复制</span>
|
||||
</a-doption>
|
||||
<!-- 清空 -->
|
||||
<a-doption style="line-height: 30px; padding: 0 8px;"
|
||||
@click="() => appender?.clear()">
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
<span>清空</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'logItem'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ExecCommandHostResponse } from '@/api/exec/exec';
|
||||
import type { ILogAppender } from './const';
|
||||
import { ref } from 'vue';
|
||||
import { execHostStatus, execHostStatusKey } from './const';
|
||||
import { formatDuration } from '@/utils';
|
||||
import { useDictStore } from '@/store';
|
||||
import { downloadExecLogFile } from '@/api/exec/exec';
|
||||
import { downloadFile } from '@/utils/file';
|
||||
import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
|
||||
import 'xterm/css/xterm.css';
|
||||
|
||||
const props = defineProps<{
|
||||
host: ExecCommandHostResponse;
|
||||
appender: ILogAppender
|
||||
}>();
|
||||
|
||||
const { getDictValue } = useDictStore();
|
||||
|
||||
const appenderRef = ref();
|
||||
const searchRef = ref();
|
||||
|
||||
// 打开搜索
|
||||
const openSearch = () => {
|
||||
searchRef.value.toggle();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
id: props.host.id,
|
||||
appenderRef,
|
||||
openSearch
|
||||
});
|
||||
|
||||
// 搜索关键字
|
||||
const searchWords = (word: string, next: boolean, options: any) => {
|
||||
props.appender?.find(word, next, options);
|
||||
};
|
||||
|
||||
// 关闭搜索框
|
||||
const searchClose = () => {
|
||||
props.appender?.focus();
|
||||
};
|
||||
|
||||
// 下载文件
|
||||
const downloadLogFile = async (id: number) => {
|
||||
const data = await downloadExecLogFile(id);
|
||||
downloadFile(data);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@header-height: 40px;
|
||||
|
||||
.log-header {
|
||||
width: 100%;
|
||||
height: @header-height;
|
||||
padding: 8px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--color-bg-1);
|
||||
color: var(--color-text-1);
|
||||
user-select: none;
|
||||
|
||||
:deep(.arco-tag-icon) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tag-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-action {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100% - @header-height);
|
||||
position: relative;
|
||||
background: #202020;
|
||||
padding: 4px 0 0 4px;
|
||||
|
||||
.log-appender {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-modal {
|
||||
--bg-focus: rgba(255, 255, 255, .85);
|
||||
--bg: rgba(255, 255, 255, .95);
|
||||
--color-text: #0E0E0E;
|
||||
--color-text-focus: #0F0F0F;
|
||||
--bg-icon-hover: rgba(12, 12, 12, .04);
|
||||
--bg-icon-hover-focus: rgba(12, 12, 12, .08);
|
||||
--bg-icon-selected: rgba(12, 12, 12, .06);
|
||||
--bg-icon-selected-focus: rgba(12, 12, 12, .10);
|
||||
}
|
||||
|
||||
</style>
|
||||
97
orion-ops-ui/src/components/exec/log/panel/log-view.vue
Normal file
97
orion-ops-ui/src/components/exec/log/panel/log-view.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<template v-if="appender">
|
||||
<log-item class="log-item"
|
||||
v-show="current === host.id"
|
||||
v-for="host in command.hosts"
|
||||
:key="host.id"
|
||||
:ref="addRef as unknown as VNodeRef"
|
||||
:host="host"
|
||||
:appender="appender as ILogAppender" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'logView'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { VNodeRef } from 'vue';
|
||||
import type { ExecCommandResponse } from '@/api/exec/exec';
|
||||
import type { LogDomRef, ILogAppender } from './const';
|
||||
import { nextTick, onBeforeMount, ref, watch } from 'vue';
|
||||
import LogAppender from './log-appender';
|
||||
import LogItem from './log-item.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
current: number;
|
||||
command: ExecCommandResponse;
|
||||
}>();
|
||||
|
||||
const logRefs = ref<Array<LogDomRef>>([]);
|
||||
const appender = ref<ILogAppender>();
|
||||
|
||||
// 切换标签
|
||||
watch(() => props.current, (val) => {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
appender.value?.setCurrent(val);
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
|
||||
// 打开
|
||||
const open = () => {
|
||||
nextTick(async () => {
|
||||
if (appender.value) {
|
||||
// 初始化
|
||||
await appender.value.init(logRefs.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 关闭客户端
|
||||
const closeClient = () => {
|
||||
appender.value?.closeClient();
|
||||
};
|
||||
|
||||
// 关闭全部
|
||||
const closeAll = () => {
|
||||
appender.value?.close();
|
||||
logRefs.value = [];
|
||||
appender.value = undefined;
|
||||
};
|
||||
|
||||
defineExpose({ open, closeClient, closeAll });
|
||||
|
||||
// 添加 ref
|
||||
const addRef = (ref: any) => {
|
||||
if (!ref) {
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
logRefs.value.push({
|
||||
id: ref.id,
|
||||
el: ref.appenderRef,
|
||||
openSearch: ref.openSearch
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
appender.value = new LogAppender({ execId: props.command.id });
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.log-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user