OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

Merge remote-tracking branch 'origin/lichang'

Browse Source
This commit is contained in:
TsMask
2024-10-17 18:26:49 +08:00
parent ff556ce1ec 9ed7aed4b4
commit 8a71e8f773
28 changed files with 1544 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/tool/iperf.ts Normal file
View File

@@ -0,0 +1,20 @@
import { request } from '@/plugins/http-fetch';
// iperf 版本信息
export function iperfV(data: Record<string, string>) {
return request({
url: '/tool/iperf/v',
method: 'get',
params: data,
});
}
// iperf 软件安装
export function iperfI(data: Record<string, string>) {
return request({
url: '/tool/iperf/i',
method: 'post',
data: data,
timeout: 60_000,
});
}

25
src/api/tool/neFile.ts
View File

@@ -1,7 +1,7 @@
import { request } from '@/plugins/http-fetch';
/**
* 查询文件列表列表
* 查询网元端文件列表
* @param query 查询参数
* @returns object
*/
@@ -14,7 +14,7 @@ export function listNeFiles(query: Record<string, any>) {
}
/**
* 从网元端获取文件
* 从网元到本地获取文件
* @param query 查询参数
* @returns object
*/
@@ -27,3 +27,24 @@ export function getNeFile(query: Record<string, any>) {
timeout: 180_000,
});
}
// 从网元到本地获取目录压缩为ZIP
export function getNeDirZip(data: Record<string, any>) {
return request({
url: '/ne/action/pullDirZip',
method: 'get',
params: data,
responseType: 'blob',
timeout: 60_000,
});
}
// 查看网元端文件内容
export function getNeViewFile(data: Record<string, any>) {
return request({
url: '/ne/action/viewFile',
method: 'get',
params: data,
timeout: 60_000,
});
}

10
src/api/tool/ping.ts Normal file
View File

@@ -0,0 +1,10 @@
import { request } from '@/plugins/http-fetch';
// ping 网元端版本信息
export function pingV(data: Record<string, string>) {
return request({
url: '/tool/ping/v',
method: 'get',
params: data,
});
}

11
src/api/trace/pcap.ts
View File

@@ -20,17 +20,6 @@ export function dumpStop(data: Record<string, string>) {
});
}
// 网元抓包PACP 下载
export function dumpDownload(data: Record<string, any>) {
return request({
url: '/trace/tcpdump/download',
method: 'get',
params: data,
responseType: 'blob',
timeout: 60_000,
});
}
// UPF标准版内部抓包
export function traceUPF(data: Record<string, string>) {
return request({

27
src/components/TerminalSSHView/index.vue
View File

@@ -13,6 +13,11 @@ const props = defineProps({
type: String,
required: true,
},
/**ws连接地址，必传 如/ws/view */
url: {
type: String,
required: true,
},
/**网元类型，必传 */
neType: {
type: String,
@@ -33,6 +38,11 @@ const props = defineProps({
type: Number,
default: 40,
},
/**ws发送requestId前缀 如ssh_id */
prefix: {
type: String,
default: 'ssh',
},
});
/**终端输入DOM节点实例对象 */
@@ -148,13 +158,18 @@ function wsMessage(res: Record<string, any>) {
if (parts.length > 0) {
let text = parts[parts.length - 1];
// 找到最后输出标记
const lestIndex = text.lastIndexOf('\u001b[?2004h\u001b]0;');
let lestIndex = text.lastIndexOf('\u001b[?2004h\u001b]0;');
if (lestIndex !== -1) {
text = text.substring(0, lestIndex);
}
if (text === '' || text === '\r\n' || text.startsWith("^C\r\n") ) {
if (text === '' || text === '\r\n' || text.startsWith('^C\r\n')) {
return;
}
// 是否还有最后输出标记
lestIndex = text.lastIndexOf('\u001b[?2004h');
if (lestIndex !== -1) {
text = text.substring(0, lestIndex);
}
// console.log({ parts, text });
terminal.value.write(text);
return;
@@ -168,7 +183,7 @@ onMounted(() => {
if (props.neType && props.neId) {
// 建立链接
const options: OptionsType = {
url: '/ws/view',
url: props.url,
params: {
neType: props.neType,
neId: props.neId,
@@ -185,7 +200,7 @@ onMounted(() => {
});
onBeforeUnmount(() => {
ws.close();
if (ws.state() === WebSocket.OPEN) ws.close();
});
// 给组件设置属性 ref="xxxTerminal"
@@ -200,7 +215,7 @@ defineExpose({
/**发送命令 */
send: (type: string, data: Record<string, any>) => {
ws.send({
requestId: `ssh_${props.id}`,
requestId: `${props.prefix}_${props.id}`,
type,
data,
});
@@ -208,7 +223,7 @@ defineExpose({
/**模拟按下 Ctrl+C */
ctrlC: () => {
ws.send({
requestId: `ssh_${props.id}`,
requestId: `${props.prefix}_${props.id}`,
type: 'ctrl-c',
});
},

11
src/i18n/locales/en-US.ts
View File

@@ -685,11 +685,12 @@ export default {
addrPlease: "Please fill in the host IP address correctly",
port: "Port",
portPlease: "Please fill in the host port number correctly",
user: "Login User",
userPlease: "Please fill in the host login user correctly",
user: "User",
userPlease: "Please fill in the host user correctly",
database: "DataBase",
authMode: "Auth Mode",
password: "Password",
passwordPlease: "Please fill in the host login password correctly",
passwordPlease: "Please fill in the host password correctly",
privateKey: "Private Key",
privateKeyPlease: "Please fill in the private key characters correctly ~/.ssh/id_rsa",
passPhrase: "Private Key Cipher",
@@ -1110,8 +1111,8 @@ export default {
fileUPFTip: 'UPF internal packet capture and analysis packet',
textStart: "Start",
textStop: "Stop",
textLog: "Log",
textLogMsg: "Log Info",
textLog: "LogFile",
textLogMsg: "LogFile Info",
textDown: "Download",
downTip: "Are you sure you want to download the {title} capture data file?",
downOk: "{title} file download complete",

9
src/i18n/locales/zh-CN.ts
View File

@@ -686,10 +686,11 @@ export default {
port: "端口",
portPlease: "请正确填写主机端口号",
user: "用户名",
userPlease: "请正确填写主机登录用户",
userPlease: "请正确填写主机用户",
database: "数据库",
authMode: "认证模式",
password: "密码",
passwordPlease: "请正确填写主机登录密码",
passwordPlease: "请正确填写主机密码",
privateKey: "私钥",
privateKeyPlease: "请正确填写私钥字符内容 ~/.ssh/id_rsa",
passPhrase: "私钥密码",
@@ -1110,8 +1111,8 @@ export default {
fileUPFTip: 'UPF内部抓包分析包',
textStart: "开始",
textStop: "停止",
textLog: "日志",
textLogMsg: "日志信息",
textLog: "日志文件",
textLogMsg: "日志文件信息",
textDown: "下载",
downTip: "确认要下载 {title} 抓包数据文件吗？",
downOk: "{title} 文件下载完成",

1
src/plugins/http-fetch.ts
View File

@@ -187,7 +187,6 @@ function beforeRequest(options: OptionsType): OptionsType | Promise<any> {
const separator = options.url.includes('?') ? '&' : '?';
// 请求加密
if (options.crypto) {
debugger;
const data = encryptAES(JSON.stringify(paramStr), APP_DATA_API_KEY);
options.url += `${separator}data=${encodeURIComponent(data)}`;
} else {

4
src/utils/parse-utils.ts
View File

@@ -173,13 +173,13 @@ export function parseSizeFromKbs(sizeByte: number, timeInterval: number): any {
/**
* 字节数转换单位
* @param bits 字节Bit大小 64009540 = 512.08 MB
* @returns xx B/ KB / MB / GB / TB
* @returns xx B / KB / MB / GB / TB / PB / EB / ZB / YB
*/
export function parseSizeFromBits(bits: number | string): string {
bits = Number(bits) || 0;
if (bits <= 0) return '0 B';
bits = bits * 8;
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const unitIndex = Math.floor(Math.log2(bits) / 10);
const value = (bits / Math.pow(1000, unitIndex)).toFixed(2);
const unti = units[unitIndex];

2
src/views/configManage/softwareManage/index.vue
View File

@@ -425,8 +425,6 @@ function fnGetList(pageNum?: number) {
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
debugger;
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}

10
src/views/dashboard/overview/hooks/useWS.ts
View File

@@ -44,7 +44,7 @@ export default function useWS() {
// 普通信息
switch (requestId) {
// AMF_UE会话事件
case 'amf_1010_001':
case 'amf_1010':
if (Array.isArray(data.rows)) {
eventListParse('amf_ue', data);
}
@@ -85,7 +85,7 @@ export default function useWS() {
}
break;
// AMF_UE会话事件
case '1010_001':
case '1010':
if (data.data) {
queue.add(() => eventItemParseAndPush('amf_ue', data.data));
}
@@ -128,7 +128,7 @@ export default function useWS() {
function userActivitySend() {
// AMF_UE会话事件
ws.send({
requestId: 'amf_1010_001',
requestId: 'amf_1010',
type: 'amf_ue',
data: {
neType: 'AMF',
@@ -175,11 +175,11 @@ export default function useWS() {
/**订阅通道组
*
* 指标UPF (GroupID:12_neId)
* AMF_UE会话事件(GroupID:1010_neId)
* AMF_UE会话事件(GroupID:1010)
* MME_UE会话事件(GroupID:1011_neId)
* IMS_CDR会话事件(GroupID:1005_neId)
*/
subGroupID: '12_001,1010_001,1011_001,1005_001',
subGroupID: '12_001,1010,1011_001,1005_001',
},
onmessage: wsMessage,
onerror: (ev: any) => {

21
src/views/logManage/neFile/components/ViewDrawer.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, onMounted, watch, ref, nextTick } from 'vue';
import { reactive, watch, ref } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
import useI18n from '@/hooks/useI18n';
@@ -86,19 +86,20 @@ function fnInit() {
function fnReload() {
if (!viewTerminal.value) return;
viewTerminal.value.ctrlC();
if (state.form.showType !== 'lines') {
state.form.lines = 10;
} else {
state.form.char = 0;
}
viewTerminal.value.clear();
viewTerminal.value.send('tail', {
filePath: props.filePath,
lines: state.form.lines,
char: state.form.char,
follow: state.form.follow,
});
setTimeout(() => {
viewTerminal.value.send('tail', {
filePath: props.filePath,
lines: state.form.lines,
char: state.form.char,
follow: state.form.follow,
});
}, 1000);
}
</script>
@@ -122,9 +123,11 @@ function fnReload() {
<TerminalSSHView
ref="viewTerminal"
:id="`V${Date.now()}`"
style="height: calc(100% - 36px)"
prefix="tail"
url="/ws/view"
:ne-type="neType"
:ne-id="neId"
style="height: calc(100% - 36px)"
@connect="fnInit()"
></TerminalSSHView>
<!-- 命令控制属性 -->

8
src/views/logManage/neFile/index.vue
View File

@@ -204,11 +204,13 @@ function fnDirCD(dir: string, index?: number) {
/**网元类型选择对应修改 */
function fnNeChange(keys: any, _: any) {
if (!Array.isArray(keys)) return;
const neType = keys[0];
const neId = keys[1];
// 不是同类型时需要重新加载
if (Array.isArray(keys) && queryParams.neType !== keys[0]) {
const neType = keys[0];
if (queryParams.neType !== neType || queryParams.neId !== neId) {
queryParams.neType = neType;
queryParams.neId = keys[1];
queryParams.neId = neId;
if (neType === 'IMS') {
nePathArr.value = ['/var/log/ims'];
queryParams.search = '';

74
src/views/ne/neInfo/components/EditModal.vue
View File

@@ -40,7 +40,7 @@ let dict: {
* 测试主机连接
*/
function fnHostTest(row: Record<string, any>) {
if (modalState.confirmLoading || !row.addr) return;
if (modalState.confirmLoading || !row.addr || !row.port) return;
modalState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
testNeHost(row)
@@ -124,8 +124,8 @@ let modalState: ModalStateType = reactive({
addr: '',
port: 22,
user: 'omcuser',
authMode: '0',
password: 'a9tU53r',
authMode: '2',
password: '',
privateKey: '',
passPhrase: '',
remark: '',
@@ -283,11 +283,11 @@ function fnModalCancel() {
/**表单修改网元类型 */
function fnNeTypeChange(v: any) {
const hostsLen = modalState.from.hosts.length;
// 网元默认只含22和4100
if (hostsLen === 3 && v !== 'UPF') {
if (modalState.from.hosts.length === 3) {
modalState.from.hosts.pop();
}
const hostsLen = modalState.from.hosts.length;
// UPF标准版本可支持5002
if (hostsLen === 2 && v === 'UPF') {
modalState.from.hosts.push({
@@ -295,11 +295,27 @@ function fnNeTypeChange(v: any) {
hostType: 'telnet',
groupId: '1',
title: 'Telnet_NE_5002',
addr: '',
addr: modalState.from.ip,
port: 5002,
user: 'user',
user: 'admin',
authMode: '0',
password: 'user',
password: 'admin',
remark: '',
});
}
// UDM可支持6379
if (hostsLen === 2 && v === 'UDM') {
modalState.from.hosts.push({
hostId: undefined,
hostType: 'redis',
groupId: '1',
title: 'REDIS_NE_6379',
addr: modalState.from.ip,
port: 6379,
user: 'udmdb',
authMode: '0',
password: 'helloearth',
dbName: '0',
remark: '',
});
}
@@ -626,8 +642,13 @@ onMounted(() => {
(s:any) => !(s.hostType === 'telnet' && modalState.from.neType === 'OMC')
)"
:key="host.title"
:header="`${host.hostType.toUpperCase()} ${host.port}`"
>
<template #header>
<span v-if="host.hostType === 'redis'"> DB {{ host.port }} </span>
<span v-else>
{{ `${host.hostType.toUpperCase()} ${host.port}` }}
</span>
</template>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neHost.addr')">
@@ -654,7 +675,22 @@ onMounted(() => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-form-item
v-if="host.hostType === 'telnet'"
:label="t('views.ne.neHost.user')"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-input
v-model:value="host.user"
allow-clear
:maxlength="32"
:placeholder="t('common.inputPlease')"
>
</a-input>
</a-form-item>
<a-row :gutter="16" v-if="host.hostType === 'ssh'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neHost.user')">
<a-input
@@ -672,7 +708,6 @@ onMounted(() => {
v-model:value="host.authMode"
default-value="0"
:options="dict.neHostAuthMode"
:disabled="host.hostType === 'telnet'"
>
</a-select>
</a-form-item>
@@ -692,7 +727,6 @@ onMounted(() => {
>
</a-input-password>
</a-form-item>
<template v-if="host.authMode === '1'">
<a-form-item
:label="t('views.ne.neHost.privateKey')"
@@ -722,6 +756,21 @@ onMounted(() => {
</a-form-item>
</template>
<a-form-item
v-if="host.hostType === 'mysql'"
:label="t('views.ne.neHost.database')"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-input
v-model:value="host.dbName"
allow-clear
:maxlength="32"
:placeholder="t('common.inputPlease')"
>
</a-input>
</a-form-item>
<a-form-item
:label="t('common.remark')"
:label-col="{ span: 3 }"
@@ -736,6 +785,7 @@ onMounted(() => {
/>
</a-form-item>
<!-- 测试 -->
<a-form-item
:label="t('views.ne.neHost.test')"
name="test"

20
src/views/ne/neQuickSetup/components/NeInfoConfig.vue
View File

@@ -229,11 +229,11 @@ function fnModalOk() {
* 表单修改网元类型
*/
function fnNeTypeChange(v: any) {
const hostsLen = modalState.from.hosts.length;
// 网元默认只含22和4100
if (hostsLen === 3 && v !== 'UPF') {
if (modalState.from.hosts.length === 3) {
modalState.from.hosts.pop();
}
const hostsLen = modalState.from.hosts.length;
// UPF标准版本可支持5002
if (hostsLen === 2 && v === 'UPF') {
modalState.from.hosts.push({
@@ -249,6 +249,22 @@ function fnNeTypeChange(v: any) {
remark: '',
});
}
// UDM可支持6379
if (hostsLen === 2 && v === 'UDM') {
modalState.from.hosts.push({
hostId: undefined,
hostType: 'redis',
groupId: '1',
title: 'REDIS_NE_6379',
addr: modalState.from.ip,
port: 6379,
user: 'udmdb',
authMode: '0',
password: 'helloearth',
dbName: '0',
remark: '',
});
}
}
/**

5
src/views/neUser/auth/index.vue
View File

@@ -517,7 +517,7 @@ function fnExportList(type: string) {
if (!neId) return;
const hide = message.loading(t('common.loading'), 0);
exportUDMAuth({ ...queryParams, ...{ type } })
exportUDMAuth(Object.assign({ type: type }, queryParams))
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success(t('common.msgSuccess', { msg: t('common.export') }), 3);
@@ -555,6 +555,9 @@ function fnLoadData() {
fnQueryReset();
}, timerS * 1000);
} else {
modalState.loadDataLoading = false;
tableState.loading = false; // 表格loading
fnQueryReset();
message.error({
content: t('common.getInfoFail'),
duration: 3,

5
src/views/neUser/sub/index.vue
View File

@@ -878,7 +878,7 @@ function fnExportList(type: string) {
if (!neId) return;
const key = 'exportSub';
message.loading({ content: t('common.loading'), key });
exportUDMSub({ ...queryParams, ...{ type } }).then(res => {
exportUDMSub(Object.assign({ type: type }, queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: t('common.export') }),
@@ -920,6 +920,9 @@ function fnLoadData() {
fnQueryReset();
}, timerS * 1000);
} else {
modalState.loadDataLoading = false;
tableState.loading = false; // 表格loading
fnQueryReset();
message.error({
content: t('common.getInfoFail'),
duration: 3,

862
src/views/perfManage/kpiKeyTarget/index.vue
View File

File diff suppressed because it is too large Load Diff

1
src/views/system/log/login/index.vue
View File

@@ -193,7 +193,6 @@ function fnTableSelectedRows(
_: (string | number)[],
rows: Record<string, string>[]
) {
//debugger
tableState.selectedRowKeys = rows.map(item => item.loginId);
// 针对单个登录账号解锁
if (rows.length === 1) {

28
src/views/system/quick-start/components/NeInfoConfig.vue
View File

@@ -139,7 +139,7 @@ let tableColumns: any = [
* 测试主机连接
*/
function fnHostTest(row: Record<string, any>) {
if (tabState.confirmLoading || !row.addr) return;
if (tabState.confirmLoading || !row.addr || !row.port) return;
tabState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
testNeHost(row)
@@ -187,19 +187,19 @@ function fnHostAuthorized(row: Record<string, any>) {
* 表单修改网元类型
*/
function fnNeTypeChange(v: any, data: any) {
const hostsLen = data.hosts.length;
// 网元默认只含22和4100
if (hostsLen === 3 && v !== 'UPF') {
data.hosts.pop();
if (modalState.from.hosts.length === 3) {
modalState.from.hosts.pop();
}
const hostsLen = modalState.from.hosts.length;
// UPF标准版本可支持5002
if (hostsLen === 2 && v === 'UPF') {
data.hosts.push({
modalState.from.hosts.push({
hostId: undefined,
hostType: 'telnet',
groupId: '1',
title: 'Telnet_NE_5002',
addr: '',
addr: modalState.from.ip,
port: 5002,
user: 'admin',
authMode: '0',
@@ -207,6 +207,22 @@ function fnNeTypeChange(v: any, data: any) {
remark: '',
});
}
// UDM可支持6379
if (hostsLen === 2 && v === 'UDM') {
modalState.from.hosts.push({
hostId: undefined,
hostType: 'redis',
groupId: '1',
title: 'REDIS_NE_6379',
addr: modalState.from.ip,
port: 6379,
user: 'udmdb',
authMode: '0',
password: 'helloearth',
dbName: '0',
remark: '',
});
}
}
//打开新增或修改界面

9
src/views/system/setting/components/change-home-index.vue
View File

@@ -1,14 +1,11 @@
<script lang="ts" setup>
import { Modal, message } from 'ant-design-vue/lib';
import { onMounted, reactive, toRaw } from 'vue';
import useAppStore from '@/store/modules/app';
import useI18n from '@/hooks/useI18n';
import { listMenu } from '@/api/system/menu';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { getConfig, getConfigKey, changeValue } from '@/api/system/config';
const appStore = useAppStore();
const { t, optionsLocale } = useI18n();
import { getConfigKey, changeValue } from '@/api/system/config';
const { t } = useI18n();
type StateType = {
edite: boolean;
@@ -124,7 +121,7 @@ onMounted(() => {
<a-typography-paragraph>
{{ t('views.system.setting.homeInstruction') }}
</a-typography-paragraph>
</a-typography>
</a-typography>
</a-col>
</a-row>
</template>

4
src/views/system/setting/index.vue
View File

@@ -51,9 +51,9 @@ const { t } = useI18n();
<ChangeI18n></ChangeI18n>
</div>
<a-divider orientation="left">
{{t('views.system.setting.homeSet') }}
{{ t('views.system.setting.homeSet') }}
</a-divider>
<ChangeHome></ChangeHome>
<ChangeHome></ChangeHome>
<a-divider orientation="left">
{{ t('views.system.setting.reset') }}
</a-divider>

402
src/views/tool/iperf/index.vue
View File

@@ -1,17 +1,17 @@
<script setup lang="ts">
import { reactive, onMounted, onBeforeUnmount, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib';
import { message, Modal } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
import useNeInfoStore from '@/store/modules/neinfo';
import { iperfI, iperfV } from '@/api/tool/iperf';
const neInfoStore = useNeInfoStore();
const { t } = useI18n();
const ws = new WS();
/**网元参数 */
let neCascaderOptions = ref<Record<string, any>[]>([]);
@@ -20,68 +20,155 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
let state = reactive({
/**初始化 */
initialized: false,
/**运行中 */
running: false,
/**版本信息 */
versionInfo: [],
/**网元类型 */
neType: [],
/**数据类型 */
dataType: 'options' as 'options' | 'command',
/**ws参数 */
params: {
neType: 'AMF',
neId: '001',
neType: '',
neId: '',
cols: 120,
rows: 40,
},
/**ws数据 */
data: {
command: '', // 命令字符串
desAddr: 'www.baidu.com', // dns name or ip address
// Options
interval: 1, // seconds between sending each packet
ttl: 255, // define time to live
count: 4, // <count> 次回复后停止
size: 56, // 使用 <size> 作为要发送的数据字节数
timeout: 2, // seconds time to wait for response
client: true, // 服务端或客户端，默认服务端
// Server or Client
port: 5201, // 服务端口
interval: 1, // 每次报告之间的时间间隔，单位为秒
// Server
oneOff: false, // 只进行一次连接
// Client
host: '', // 客户端连接到的服务端IP地址
udp: false, // use UDP rather than TCP
time: 10, // 以秒为单位的传输时间（默认为 10 秒）
reverse: false, // 以反向模式运行（服务器发送，客户端接收）
window: '300k', // 设置窗口大小/套接字缓冲区大小
},
});
/**接收数据后回调（成功） */
function wsMessage(res: Record<string, any>) {
/**连接发送 */
async function fnIPerf3() {
const [neType, neId] = state.neType;
if (!neType || !neId) {
message.warning({
content: 'No Found NE Type',
duration: 2,
});
return;
}
if (state.dataType === 'options' && state.data.host === '') {
message.warning({
content: 'Please fill in the Host',
duration: 2,
});
return;
}
if (state.dataType === 'command' && state.data.command === '') {
message.warning({
content: 'Please fill in the Command',
duration: 2,
});
return;
}
if (state.initialized) {
fnResend();
return;
}
state.params.neType = neType;
state.params.neId = neId;
const resVersion = await iperfV({ neType, neId });
if (resVersion.code !== RESULT_CODE_SUCCESS) {
Modal.confirm({
title: t('common.tipTitle'),
content: 'Not found if iperf is installed',
onOk: () => fnInstall(),
});
return;
} else {
state.versionInfo = resVersion.data;
}
state.initialized = true;
}
/**触发安装iperf3 */
function fnInstall() {
const key = 'iperfI';
message.loading({ content: t('common.loading'), key });
const { neType, neId } = state.params;
iperfI({ neType, neId }).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: 'install success',
key,
duration: 2,
});
} else {
message.error({
content: 'install fail',
key,
duration: 2,
});
}
});
}
/**终端实例 */
const toolTerminal = ref();
/**重置并停止 */
function fnReset() {
if (!toolTerminal.value) return;
toolTerminal.value.ctrlC();
// toolTerminal.value.clear();
state.running = false;
}
/**重载发送 */
function fnResend() {
if (!toolTerminal.value) return;
state.running = true;
toolTerminal.value.ctrlC();
toolTerminal.value.clear();
setTimeout(() => {
const data = JSON.parse(JSON.stringify(state.data));
if (state.dataType === 'options') data.command = '';
toolTerminal.value.send('iperf3', data);
}, 1000);
}
/**终端初始连接*/
function fnConnect() {
fnResend();
}
/**终端消息监听*/
function fnMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// 建联时发送请求
if (!requestId && data.clientId) {
state.initialized = true;
if (!requestId) return;
let lestIndex = data.lastIndexOf('unable to');
if (lestIndex !== -1) {
state.running = false;
return;
}
// 收到消息数据
if (requestId.startsWith('ping_')) {
console.log(data);
lestIndex = data.lastIndexOf('iperf Done.');
if (lestIndex !== -1) {
state.running = false;
return;
}
}
/**连接到ws*/
function fnConnect(reLink: boolean) {
if (reLink) {
ws.close();
}
const options: OptionsType = {
url: '/tool/ping/run',
params: state.params,
onmessage: wsMessage,
onerror: (ev: any) => {
// 接收数据后回调
console.error(ev);
},
};
//建立连接
ws.connect(options);
}
/**钩子函数，界面打开初始化*/
onMounted(() => {
// 获取网元网元列表
@@ -111,9 +198,7 @@ onMounted(() => {
});
/**钩子函数，界面关闭*/
onBeforeUnmount(() => {
if (ws.state() === WebSocket.OPEN) ws.close();
});
onBeforeUnmount(() => {});
</script>
<template>
@@ -122,29 +207,224 @@ onBeforeUnmount(() => {
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8">
<a-cascader
v-model:value="state.neType"
:options="neCascaderOptions"
:placeholder="t('common.selectPlease')"
/>
<a-radio-group v-model:value="state.dataType" button-style="solid">
<span>
{{ t('views.ne.common.neType') }}:
<a-cascader
v-model:value="state.neType"
:options="neCascaderOptions"
:placeholder="t('common.selectPlease')"
:disabled="state.running"
/>
</span>
<a-radio-group
v-model:value="state.dataType"
button-style="solid"
:disabled="state.running"
>
<a-radio-button value="options">Options</a-radio-button>
<a-radio-button value="commandb">Command</a-radio-button>
<a-radio-button value="command">Command</a-radio-button>
</a-radio-group>
<a-button @click.prevent="fnConnect(false)">
<template #icon><PlayCircleOutlined /></template>
Connect {{ state.initialized }}
</a-button>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
:columns="[]"
:data-source="[]"
:pagination="false"
:loading="false"
/>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8">
<a-button
@click.prevent="fnIPerf3()"
type="primary"
:loading="state.running"
>
<template #icon><PlayCircleOutlined /></template>
{{ state.running ? 'Running' : 'Launch' }}
</a-button>
<a-button v-if="state.running" @click.prevent="fnReset()" danger>
<template #icon><CloseCircleOutlined /></template>
Stop
</a-button>
<!-- 版本信息 -->
<a-popover
trigger="click"
placement="bottomRight"
v-if="state.versionInfo.length > 0"
>
<template #content>
<div v-for="v in state.versionInfo">{{ v }}</div>
</template>
<InfoCircleOutlined />
</a-popover>
</a-space>
</template>
<!-- options -->
<a-form
v-if="state.dataType === 'options'"
:model="state.data"
name="queryParams"
layout="horizontal"
:label-col="{ span: 6 }"
:label-wrap="true"
style="padding: 12px"
>
<a-divider orientation="left">Server or Client</a-divider>
<a-row>
<a-col :lg="6" :md="6" :xs="12">
<a-form-item label="Port" name="port">
<a-input-number
v-model:value="state.data.port"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
:min="1024"
:max="65535"
></a-input-number> </a-form-item
></a-col>
<a-col :lg="6" :md="6" :xs="12">
<a-form-item label="Interval" name="interval">
<a-input-number
v-model:value="state.data.interval"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
:min="1"
:max="30"
></a-input-number>
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left">
<a-radio-group
v-model:value="state.data.client"
:disabled="state.running"
>
<a-radio :value="true">Client</a-radio>
<a-radio :value="false">Server</a-radio>
</a-radio-group>
</a-divider>
<template v-if="state.data.client">
<a-form-item
label="Host"
name="host"
help="run in client mode, connecting to <host>"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-input
v-model:value="state.data.host"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
>
</a-input>
</a-form-item>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="UDP"
name="udp"
help="use UDP rather than TCP"
>
<a-switch
v-model:checked="state.data.udp"
:disabled="state.running"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="Reverse"
name="reverse"
help="run in reverse mode (server sends, client receives)"
>
<a-switch
v-model:checked="state.data.reverse"
:disabled="state.running"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="Time"
name="time"
help="time in seconds to transmit for (default 10 secs)"
>
<a-input-number
v-model:value="state.data.time"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
:min="1"
:max="60"
></a-input-number>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="Window"
name="window"
help="set window size / socket buffer size"
>
<a-input
v-model:value="state.data.window"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
></a-input>
</a-form-item>
</a-col>
</a-row>
</template>
<a-row :gutter="16" v-else>
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="OneOff"
name="oneOff"
help=" handle one client connection then exit"
>
<a-switch
v-model:checked="state.data.oneOff"
:disabled="state.running"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- command -->
<div v-else style="padding: 12px">
<a-auto-complete
v-model:value="state.data.command"
:disabled="state.running"
:dropdown-match-select-width="500"
style="width: 100%"
>
<a-input
addon-before="iperf3"
placeholder="Client: -c 172.5.16.100 -p 5201 or Server: -s -p 5201"
/>
</a-auto-complete>
</div>
<!-- 运行过程 -->
<TerminalSSHView
v-if="state.initialized"
ref="toolTerminal"
:id="`V${Date.now()}`"
prefix="iperf3"
url="/tool/iperf/run"
:ne-type="state.params.neType"
:ne-id="state.params.neId"
:rows="state.params.rows"
:cols="state.params.cols"
style="height: 400px"
@connect="fnConnect"
@message="fnMessage"
></TerminalSSHView>
</a-card>
</PageContainer>
</template>

334
src/views/tool/ping/index.vue
View File

@@ -1,17 +1,17 @@
<script setup lang="ts">
import { reactive, onMounted, onBeforeUnmount, ref } from 'vue';
import { reactive, onMounted, onBeforeUnmount, ref, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
import useNeInfoStore from '@/store/modules/neinfo';
import { pingV } from '@/api/tool/ping';
const neInfoStore = useNeInfoStore();
const { t } = useI18n();
const ws = new WS();
/**网元参数 */
let neCascaderOptions = ref<Record<string, any>[]>([]);
@@ -20,68 +20,127 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
let state = reactive({
/**初始化 */
initialized: false,
/**运行中 */
running: false,
/**版本信息 */
versionInfo: '',
/**网元类型 */
neType: [],
/**数据类型 */
dataType: 'options' as 'options' | 'command',
/**ws参数 */
params: {
neType: 'AMF',
neId: '001',
neType: '',
neId: '',
cols: 120,
rows: 40,
},
/**ws数据 */
data: {
command: '', // 命令字符串
desAddr: 'www.baidu.com', // dns name or ip address
desAddr: '8.8.8.8', // dns name or ip address
// Options
interval: 1, // seconds between sending each packet
ttl: 255, // define time to live
count: 4, // <count> 次回复后停止
size: 56, // 使用 <size> 作为要发送的数据字节数
timeout: 2, // seconds time to wait for response
timeout: 10, // seconds time to wait for response
},
});
/**接收数据后回调（成功） */
function wsMessage(res: Record<string, any>) {
/**连接发送 */
async function fnPing() {
const [neType, neId] = state.neType;
if (!neType || !neId) {
message.warning({
content: 'No Found NE Type',
duration: 2,
});
return;
}
if (state.dataType === 'options' && state.data.desAddr === '') {
message.warning({
content: 'Please fill in the Destination',
duration: 2,
});
return;
}
if (state.dataType === 'command' && state.data.command === '') {
message.warning({
content: 'Please fill in the Command',
duration: 2,
});
return;
}
if (state.initialized) {
fnResend();
return;
}
state.params.neType = neType;
state.params.neId = neId;
const resVersion = await pingV({ neType, neId });
if (resVersion.code !== RESULT_CODE_SUCCESS) {
message.warning({
content: 'No Found ping iputils',
duration: 2,
});
return;
} else {
state.versionInfo = resVersion.data;
}
state.initialized = true;
}
/**终端实例 */
const toolTerminal = ref();
/**重置并停止 */
function fnReset() {
if (!toolTerminal.value) return;
toolTerminal.value.ctrlC();
// toolTerminal.value.clear();
state.running = false;
}
/**重载发送 */
function fnResend() {
if (!toolTerminal.value) return;
state.running = true;
toolTerminal.value.ctrlC();
toolTerminal.value.clear();
setTimeout(() => {
const data = JSON.parse(JSON.stringify(state.data));
if (state.dataType === 'options') data.command = '';
toolTerminal.value.send('ping', data);
}, 1000);
}
/**终端初始连接*/
function fnConnect() {
fnResend();
}
/**终端消息监听*/
function fnMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// 建联时发送请求
if (!requestId && data.clientId) {
state.initialized = true;
if (!requestId) return;
let lestIndex = data.lastIndexOf('ping statistics ---');
if (lestIndex !== -1) {
state.running = false;
return;
}
// 收到消息数据
if (requestId.startsWith('ping_')) {
console.log(data);
lestIndex = data.lastIndexOf('failure');
if (lestIndex !== -1) {
state.running = false;
return;
}
}
/**连接到ws*/
function fnConnect(reLink: boolean) {
if (reLink) {
ws.close();
}
const options: OptionsType = {
url: '/tool/ping/run',
params: state.params,
onmessage: wsMessage,
onerror: (ev: any) => {
// 接收数据后回调
console.error(ev);
},
};
//建立连接
ws.connect(options);
}
/**钩子函数，界面打开初始化*/
onMounted(() => {
// 获取网元网元列表
@@ -111,9 +170,7 @@ onMounted(() => {
});
/**钩子函数，界面关闭*/
onBeforeUnmount(() => {
if (ws.state() === WebSocket.OPEN) ws.close();
});
onBeforeUnmount(() => {});
</script>
<template>
@@ -122,29 +179,194 @@ onBeforeUnmount(() => {
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8">
<a-cascader
v-model:value="state.neType"
:options="neCascaderOptions"
:placeholder="t('common.selectPlease')"
/>
<a-radio-group v-model:value="state.dataType" button-style="solid">
<span>
{{ t('views.ne.common.neType') }}:
<a-cascader
v-model:value="state.neType"
:options="neCascaderOptions"
:placeholder="t('common.selectPlease')"
:disabled="state.running"
/>
</span>
<a-radio-group
v-model:value="state.dataType"
button-style="solid"
:disabled="state.running"
>
<a-radio-button value="options">Options</a-radio-button>
<a-radio-button value="commandb">Command</a-radio-button>
<a-radio-button value="command">Command</a-radio-button>
</a-radio-group>
<a-button @click.prevent="fnConnect(false)">
<template #icon><PlayCircleOutlined /></template>
Connect {{ state.initialized }}
</a-button>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
:columns="[]"
:data-source="[]"
:pagination="false"
:loading="false"
/>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8">
<a-button
@click.prevent="fnPing()"
type="primary"
:loading="state.running"
>
<template #icon><PlayCircleOutlined /></template>
{{ state.running ? 'Running' : 'Launch' }}
</a-button>
<a-button v-if="state.running" @click.prevent="fnReset()" danger>
<template #icon><CloseCircleOutlined /></template>
Stop
</a-button>
<!-- 版本信息 -->
<a-popover
trigger="click"
placement="bottomRight"
v-if="state.versionInfo"
>
<template #content>
{{ state.versionInfo }}
</template>
<InfoCircleOutlined />
</a-popover>
</a-space>
</template>
<!-- options -->
<a-form
v-if="state.dataType === 'options'"
:model="state.data"
name="queryParams"
layout="horizontal"
:label-col="{ span: 6 }"
:label-wrap="true"
style="padding: 12px"
>
<a-form-item
label="Destination"
name="desAddr"
help="dns name or ip address"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-input
v-model:value="state.data.desAddr"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
>
</a-input>
</a-form-item>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="Interval"
name="Interval"
help="seconds between sending each packet"
>
<a-input-number
v-model:value="state.data.interval"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
:min="1"
:max="120"
>
</a-input-number>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="12">
<a-form-item label="TTL" name="ttl" help="define time to live">
<a-input-number
v-model:value="state.data.ttl"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
:min="1"
:max="255"
></a-input-number>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="Count"
name="count"
help="stop after <count> replies"
>
<a-input-number
v-model:value="state.data.count"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
:min="1"
:max="120"
></a-input-number>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="Size"
name="size"
help="use <size> as number of data bytes to be sent"
>
<a-input-number
v-model:value="state.data.size"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
:min="1"
:max="128"
></a-input-number>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="12">
<a-form-item
label="Deadline"
name="timeout"
help="reply wait <deadline> in seconds"
>
<a-input-number
v-model:value="state.data.timeout"
:disabled="state.running"
allow-clear
:placeholder="t('common.inputPlease')"
style="width: 100%"
:min="1"
:max="60"
></a-input-number>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- command -->
<div v-else style="padding: 12px">
<a-auto-complete
v-model:value="state.data.command"
:disabled="state.running"
:dropdown-match-select-width="500"
style="width: 100%"
>
<a-input addon-before="ping" placeholder="eg: -i 1 -c 4 8.8.8.8" />
</a-auto-complete>
</div>
<!-- 运行过程 -->
<TerminalSSHView
v-if="state.initialized"
ref="toolTerminal"
:id="`V${Date.now()}`"
prefix="ping"
url="/tool/ping/run"
:ne-type="state.params.neType"
:ne-id="state.params.neId"
:rows="state.params.rows"
:cols="state.params.cols"
style="height: 400px"
@connect="fnConnect"
@message="fnMessage"
></TerminalSSHView>
</a-card>
</PageContainer>
</template>

50
src/views/traceManage/pcap/file.vue
View File

@@ -7,6 +7,7 @@ import { Modal, message } from 'ant-design-vue/lib';
import { parseDateToStr } from '@/utils/date-utils';
import { getNeFile, listNeFiles } from '@/api/tool/neFile';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import ViewDrawer from '@/views/logManage/neFile/components/ViewDrawer.vue';
import useNeInfoStore from '@/store/modules/neinfo';
import useTabsStore from '@/store/modules/tabs';
import useI18n from '@/hooks/useI18n';
@@ -218,16 +219,18 @@ function fnDirCD(dir: string, index?: number) {
/**网元类型选择对应修改 */
function fnNeChange(keys: any, _: any) {
if (!Array.isArray(keys)) return;
const neType = keys[0];
const neId = keys[1];
// 不是同类型时需要重新加载
if (Array.isArray(keys) && queryParams.neType !== keys[0]) {
const neType = keys[0];
if (queryParams.neType !== neType || queryParams.neId !== neId) {
queryParams.neType = neType;
queryParams.neId = keys[1];
queryParams.neId = neId;
if (neType === 'UPF' && tmp.value) {
nePathArr.value = ['/tmp'];
queryParams.search = `${neType}_${keys[1]}`;
queryParams.search = `${neType}_${neId}`;
} else {
nePathArr.value = [`/tmp/omc/tcpdump/${neType.toLowerCase()}/${keys[1]}`];
nePathArr.value = [`/tmp/omc/tcpdump/${neType.toLowerCase()}/${neId}`];
queryParams.search = '';
}
fnGetList(1);
@@ -270,6 +273,25 @@ function fnGetList(pageNum?: number) {
});
}
/**抽屉状态 */
const viewDrawerState = reactive({
visible: false,
/**文件路径 /var/log/amf.log */
filePath: '',
/**网元类型 */
neType: '',
/**网元ID */
neId: '',
});
/**打开抽屉查看 */
function fnDrawerOpen(row: Record<string, any>) {
viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
viewDrawerState.neType = neTypeSelect.value[0];
viewDrawerState.neId = neTypeSelect.value[1];
viewDrawerState.visible = !viewDrawerState.visible;
}
onMounted(() => {
// 获取网元网元列表
neInfoStore.fnNelist().then(res => {
@@ -375,6 +397,16 @@ onMounted(() => {
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fileName'">
<a-space :size="8" align="center">
<a-tooltip
v-if="
record.fileType === 'file' && record.fileName.endsWith('.log')
"
>
<template #title>{{ t('common.viewText') }}</template>
<a-button type="link" @click.prevent="fnDrawerOpen(record)">
<template #icon><ProfileOutlined /></template>
</a-button>
</a-tooltip>
<a-button
type="link"
:loading="downLoading"
@@ -398,6 +430,14 @@ onMounted(() => {
</template>
</a-table>
</a-card>
<!-- 文件内容查看抽屉 -->
<ViewDrawer
v-model:visible="viewDrawerState.visible"
:file-path="viewDrawerState.filePath"
:ne-type="viewDrawerState.neType"
:ne-id="viewDrawerState.neId"
></ViewDrawer>
</PageContainer>
</template>

116
src/views/traceManage/pcap/index.vue
View File

@@ -4,9 +4,9 @@ import { useRoute, useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue/lib';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { PageContainer } from 'antdv-pro-layout';
import { dumpStart, dumpStop, dumpDownload, traceUPF } from '@/api/trace/pcap';
import { dumpStart, dumpStop, traceUPF } from '@/api/trace/pcap';
import { listAllNeInfo } from '@/api/ne/neInfo';
import { getNeFile } from '@/api/tool/neFile';
import { getNeDirZip, getNeFile, getNeViewFile } from '@/api/tool/neFile';
import saveAs from 'file-saver';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
@@ -31,7 +31,7 @@ type ModalStateType = {
/**任务编号 */
taskCode: string;
/**任务日志,upf标准版为空字符串 */
logMsg: string;
taskFiles: string[];
/**提交表单参数 */
data: {
neType: string;
@@ -65,7 +65,14 @@ type ModalStateType = {
/**详情框是否显示 */
visibleByView: boolean;
/**详情框内容 */
logMsg: string;
viewFrom: {
neType: string;
neId: string;
path: string;
action: string;
files: string[];
content: string;
};
};
/**对话框对象信息状态 */
@@ -106,7 +113,14 @@ let modalState: ModalStateType = reactive({
},
],
visibleByView: false,
logMsg: '',
viewFrom: {
neType: '',
neId: '',
path: '',
action: '',
files: [],
content: '',
},
});
/**表格状态类型 */
@@ -194,7 +208,7 @@ function fnGetList() {
cmdStart: start,
cmdStop: stop,
taskCode: '',
logMsg: '',
taskFiles: [],
data: {
neType: item.neType,
neId: item.neId,
@@ -218,7 +232,7 @@ function fnSelectCmd(id: any, option: any) {
modalState.from[id].cmdStop = option.stop;
// 重置任务
modalState.from[id].taskCode = '';
modalState.from[id].logMsg = '';
modalState.from[id].taskFiles = [];
}
/**
@@ -341,7 +355,7 @@ function fnRecordStop(row?: Record<string, any>) {
if (res.status === 'fulfilled') {
const resV = res.value;
fromArr[idx].loading = false;
fromArr[idx].logMsg = '';
fromArr[idx].taskFiles = [];
if (fromArr[idx].cmdStop) {
fromArr[idx].taskCode = '';
}
@@ -350,7 +364,7 @@ function fnRecordStop(row?: Record<string, any>) {
if (fromArr[idx].cmdStop) {
fromArr[idx].taskCode = resV.data;
} else {
fromArr[idx].logMsg = resV.msg;
fromArr[idx].taskFiles = resV.data;
}
message.success({
content: t('views.traceManage.pcap.stopOk', { title }),
@@ -422,10 +436,15 @@ function fnDownPCAP(row?: Record<string, any>) {
)
);
} else {
const { neType, neId } = from.data;
const path = `/tmp/omc/tcpdump/${neType.toLowerCase()}/${neId}/${taskCode}`;
reqArr.push(
dumpDownload(
Object.assign({ taskCode: taskCode, delTemp: true }, from.data)
)
getNeDirZip({
neType,
neId,
path,
delTemp: true,
})
);
}
}
@@ -497,8 +516,42 @@ function fnBatchOper(key: string) {
function fnModalVisibleByVive(id: string | number) {
const from = modalState.from[id];
if (!from) return;
const { neType, neId } = from.data;
const path = `/tmp/omc/tcpdump/${neType.toLowerCase()}/${neId}/${
from.taskCode
}`;
const files = from.taskFiles.filter(f => f.endsWith('log'));
modalState.viewFrom.neType = neType;
modalState.viewFrom.neId = neId;
modalState.viewFrom.path = path;
modalState.viewFrom.files = [...files];
fnViveTab(files[0]);
modalState.visibleByView = true;
modalState.logMsg = from.logMsg;
}
/**对话框tab查看 */
function fnViveTab(action: any) {
console.log('fnViveTab', action);
if (modalState.viewFrom.action === action) return;
modalState.viewFrom.action = action;
modalState.viewFrom.content = '';
const { neType, neId, path } = modalState.viewFrom;
getNeViewFile({
neId,
neType,
path,
fileName: action,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
modalState.viewFrom.content = res.data;
} else {
modalState.viewFrom.content = '';
message.warning({
content: `${res.msg}`,
duration: 3,
});
}
});
}
/**
@@ -507,7 +560,8 @@ function fnModalVisibleByVive(id: string | number) {
*/
function fnModalCancel() {
modalState.visibleByView = false;
modalState.logMsg = '';
modalState.viewFrom.action = '';
modalState.viewFrom.files = [];
}
/**跳转文件数据页面 */
@@ -651,7 +705,7 @@ onMounted(() => {
placement="topRight"
v-if="
!modalState.from[record.id].loading &&
!!modalState.from[record.id].logMsg
modalState.from[record.id].taskFiles.length > 0
"
>
<template #title>
@@ -694,21 +748,39 @@ onMounted(() => {
<!-- 日志信息框 -->
<ProModal
:drag="true"
:fullscreen="true"
:borderDraw="true"
:width="800"
:visible="modalState.visibleByView"
:footer="false"
:maskClosable="false"
:keyboard="false"
:body-style="{ padding: '12px' }"
:body-style="{ padding: '0 12px 12px' }"
:title="t('views.traceManage.pcap.textLogMsg')"
@cancel="fnModalCancel"
>
<a-textarea
v-model:value="modalState.logMsg"
:auto-size="{ minRows: 2, maxRows: 18 }"
:disabled="true"
style="color: rgba(0, 0, 0, 0.85)"
/>
<a-tabs
v-model:activeKey="modalState.viewFrom.action"
tab-position="top"
size="small"
@tabClick="fnViveTab"
>
<a-tab-pane
v-for="fileName in modalState.viewFrom.files"
:key="fileName"
:tab="fileName"
:destroyInactiveTabPane="false"
>
<a-spin :spinning="!modalState.viewFrom.content">
<a-textarea
:value="modalState.viewFrom.content"
:auto-size="{ minRows: 2 }"
:disabled="true"
style="color: rgba(0, 0, 0, 0.85)"
/>
</a-spin>
</a-tab-pane>
</a-tabs>
</ProModal>
</PageContainer>
</template>

11
src/views/traceManage/wireshark/index.vue
View File

@@ -18,6 +18,7 @@ import {
packetStart,
packetStop,
packetFilter,
packetKeep,
} from '@/api/trace/packet';
const ws = new WS();
const { t } = useI18n();
@@ -29,6 +30,8 @@ type StateType = {
devices: { id: string; label: string; children: any[] }[];
/**初始化 */
initialized: boolean;
/**保活调度器 */
keepTimer: any;
/**任务 */
task: {
taskNo: string;
@@ -64,6 +67,7 @@ type StateType = {
const state = reactive<StateType>({
devices: [],
initialized: false,
keepTimer: null,
task: {
taskNo: 'laYlTbq',
device: '192.168.5.58',
@@ -274,6 +278,9 @@ function wsMessage(res: Record<string, any>) {
// 建联时发送请求
if (!requestId && data.clientId) {
state.initialized = true;
state.keepTimer = setInterval(() => {
packetKeep(state.task.taskNo, 120);
}, 90 * 1000);
return;
}
@@ -320,7 +327,9 @@ onMounted(() => {
});
onBeforeUnmount(() => {
ws.close();
clearInterval(state.keepTimer);
state.keepTimer = null;
if (ws.state() === WebSocket.OPEN) ws.close();
});
</script>