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

style: 跟踪管理多语言

Browse Source
This commit is contained in:
TsMask
2023-09-26 15:05:58 +08:00
parent 61eea0ec90
commit c22ad4e8a3
11 changed files with 384 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,10 +62,14 @@ function fnNeChange(_: any, item: any) {
const modalStateFrom = Form.useForm(
modalState.from,
reactive({
cmd: [{ required: true, message: 'tcpdump any 参数!' }],
timeout: [{ required: true, message: '执行时长，单位是秒!' }],
upfStart: [{ required: true, message: 'upf start pacp 命令!' }],
upfStop: [{ required: true, message: 'upf stop pacp 命令!' }],
cmd: [{ required: true, message: t('views.traceManage.pcap.capArgPlease') }],
timeout: [{ required: true, message: t('views.traceManage.pcap.capTimePlease') }],
upfStart: [
{ required: true, message: t('views.traceManage.pcap.capArgUPFPlease') },
],
upfStop: [
{ required: true, message: t('views.traceManage.pcap.capArgUPFPlease') },
],
})
);
@@ -81,7 +85,7 @@ function fnStart() {
.then(() => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const hide = message.loading('正在执行...', 0);
const hide = message.loading(t('common.loading'), 0);
controller = new AbortController();
const signal = controller.signal;
timeoutId = setInterval(() => {
@@ -90,8 +94,8 @@ function fnStart() {
clearInterval(timeoutId);
runTime.value = 0;
message.warning({
content: `执行超时`,
duration: 2,
content: t('views.traceManage.pcap.execTimeout'),
duration: 3,
});
// 超时终止请求
controller.abort();
@@ -107,7 +111,7 @@ function fnStart() {
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `执行完成`,
content: t('views.traceManage.pcap.execSuccess'),
duration: 3,
});
let logmsg = res.data.cmd + '\n\n' + res.data.msg;
@@ -120,12 +124,12 @@ function fnStart() {
res.msg.includes('timeout')
) {
message.warning({
content: `中断执行`,
content: t('views.traceManage.pcap.execBreak'),
duration: 3,
});
} else {
message.error({
content: `执行失败`,
content: t('views.traceManage.pcap.execFailed'),
duration: 3,
});
}
@@ -153,13 +157,13 @@ function fnStop() {
function fnDownPCAP() {
if (!modalState.fileName) {
message.warning({
content: `无效文件名`,
content: t('views.traceManage.pcap.noFileName'),
duration: 2,
});
return;
}
const key = 'tcpdumpPcapDownload';
message.loading({ content: '请稍等...', key });
message.loading({ content: t('common.loading'), key });
tcpdumpPcapDownload({
neType: modalState.neType[0],
neId: modalState.neType[1],
@@ -167,16 +171,16 @@ function fnDownPCAP() {
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `已完成`,
content: t('views.traceManage.pcap.execSuccess'),
key,
duration: 2,
duration: 3,
});
saveAs(res.data, modalState.fileName);
} else {
message.error({
content: `${res.msg}`,
key,
duration: 2,
duration: 3,
});
}
});
@@ -193,7 +197,7 @@ function fnUPF(runType: 'start' | 'stop') {
.then(() => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const hide = message.loading('请稍等...', 0);
const hide = message.loading(t('common.loading'), 0);
tcpdumpNeUPFTask({
neType: modalState.neType[0],
neId: modalState.neType[1],
@@ -209,12 +213,12 @@ function fnUPF(runType: 'start' | 'stop') {
if (runType === 'start') {
if (res.data.msg.includes('already')) {
message.warning({
content: `已经执行, 请根据情况停止抓包`,
content: t('views.traceManage.pcap.execUPFStartA'),
duration: 10,
});
} else {
message.success({
content: `执行成功, 请根据情况停止抓包`,
content: t('views.traceManage.pcap.execUPFStart'),
duration: 10,
});
}
@@ -222,12 +226,12 @@ function fnUPF(runType: 'start' | 'stop') {
if (runType === 'stop') {
if (res.data.msg.includes('already')) {
message.warning({
content: `已经停止, 请根据情况开始抓包`,
content: t('views.traceManage.pcap.execUPFStopA'),
duration: 10,
});
} else {
message.success({
content: `执行成功, 抓包已停止`,
content: t('views.traceManage.pcap.execUPFStop'),
duration: 10,
});
modalState.downBtn = true;
@@ -235,7 +239,7 @@ function fnUPF(runType: 'start' | 'stop') {
}
} else {
message.error({
content: `执行失败`,
content: t('views.traceManage.pcap.execFailed'),
duration: 3,
});
}
@@ -263,7 +267,7 @@ onMounted(() => {
}
} else {
message.warning({
content: `暂无网元列表数据`,
content: 'No Data',
duration: 2,
});
}
@@ -273,7 +277,7 @@ onMounted(() => {
<template>
<PageContainer>
<a-card :title="t('views.trace.pcap.cardTitle')">
<a-card :title="t('views.traceManage.pcap.cardTitle')">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form
@@ -284,22 +288,22 @@ onMounted(() => {
:label-col="{ span: 5 }"
labelWrap
>
<a-form-item :label="t('views.trace.pcap.neType')" name="neType">
<a-form-item :label="t('views.traceManage.pcap.neType')" name="neType">
<a-cascader
v-model:value="modalState.neType"
:options="useNeInfoStore().getNeCascaderOtions"
@change="fnNeChange"
:allow-clear="false"
placeholder="请选择网元"
:placeholder="t('views.traceManage.pcap.neTypePlease')"
/>
</a-form-item>
<a-form-item :label="t('views.trace.pcap.neIp')" name="ip">
<a-form-item :label="t('views.traceManage.pcap.neIp')" name="ip">
<span style="font-weight: bold">{{ modalState.from.ip }}</span>
</a-form-item>
<template v-if="modalState.neType[0] === 'UPF'">
<a-form-item
:label="t('views.trace.pcap.capStart')"
:label="t('views.traceManage.pcap.capStart')"
name="upfStart"
v-bind="modalStateFrom.validateInfos.upfStart"
>
@@ -307,7 +311,7 @@ onMounted(() => {
<a-input
v-model:value="modalState.from.upfStart"
allow-clear
placeholder="upf pacp 命令"
:placeholder="t('views.traceManage.pcap.capArgUPFPlease')"
style="width: 75%"
/>
<a-button
@@ -317,12 +321,12 @@ onMounted(() => {
:loading="modalState.confirmLoading"
@click.prevent="fnUPF('start')"
>
{{ t('views.trace.pcap.runText') }}
{{ t('views.traceManage.pcap.runText') }}
</a-button>
</a-input-group>
</a-form-item>
<a-form-item
:label="t('views.trace.pcap.capStop')"
:label="t('views.traceManage.pcap.capStop')"
name="upfStop"
v-bind="modalStateFrom.validateInfos.upfStop"
>
@@ -330,7 +334,7 @@ onMounted(() => {
<a-input
v-model:value="modalState.from.upfStop"
allow-clear
placeholder="upf pacp 命令"
:placeholder="t('views.traceManage.pcap.capArgUPFPlease')"
style="width: 75%"
/>
<a-button
@@ -340,32 +344,32 @@ onMounted(() => {
:loading="modalState.confirmLoading"
@click.prevent="fnUPF('stop')"
>
{{ t('views.trace.pcap.runText') }}
{{ t('views.traceManage.pcap.runText') }}
</a-button>
</a-input-group>
</a-form-item>
</template>
<template v-else>
<a-form-item
:label="t('views.trace.pcap.capArg')"
:label="t('views.traceManage.pcap.capArg')"
name="cmd"
v-bind="modalStateFrom.validateInfos.cmd"
>
<a-input
v-model:value="modalState.from.cmd"
allow-clear
placeholder="tcpdump any 参数"
:placeholder="t('views.traceManage.pcap.capArgPlease')"
>
</a-input>
</a-form-item>
<a-form-item
:label="t('views.trace.pcap.capTime')"
:label="t('views.traceManage.pcap.capTime')"
name="timeout"
v-bind="modalStateFrom.validateInfos.timeout"
>
<a-input-number
v-model:value="modalState.from.timeout"
placeholder="单位是秒's"
:placeholder="t('views.traceManage.pcap.capTimePlease')"
:min="5"
:max="120"
/>
@@ -381,8 +385,8 @@ onMounted(() => {
<template #icon><ApiOutlined /></template>
{{
runTime != 0
? t('views.trace.pcap.runTimeText', { s: runTime })
: t('views.trace.pcap.runText')
? t('views.traceManage.pcap.runTimeText', { s: runTime })
: t('views.traceManage.pcap.runText')
}}
</a-button>
<a-button
@@ -391,7 +395,7 @@ onMounted(() => {
:disabled="!modalState.confirmLoading"
@click.prevent="fnStop"
>
{{ t('views.trace.pcap.stopText') }}
{{ t('views.traceManage.pcap.stopText') }}
</a-button>
</a-space>
</a-form-item>
@@ -401,7 +405,7 @@ onMounted(() => {
<a-col :offset="2" :lg="10" :md="10" :xs="24">
<a-form layout="vertical" autocomplete="off">
<a-form-item
:label="t('views.trace.pcap.capLog')"
:label="t('views.traceManage.pcap.capLog')"
name="execLogMsg"
v-show="!!modalState.execLogMsg"
>
@@ -409,7 +413,6 @@ onMounted(() => {
v-model:value="modalState.execLogMsg"
:auto-size="{ minRows: 10, maxRows: 15 }"
:disabled="true"
placeholder="输出执行日志..."
/>
</a-form-item>
<a-form-item v-show="modalState.downBtn">
@@ -419,7 +422,7 @@ onMounted(() => {
@click.prevent="fnDownPCAP"
>
<template #icon><DownloadOutlined /></template>
{{ t('views.trace.pcap.capDownText') }}
{{ t('views.traceManage.pcap.capDownText') }}
</a-button>
</a-form-item>
</a-form>