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

feat: 页面调整组件属性升级

Browse Source
This commit is contained in:
TsMask
2024-10-28 11:02:39 +08:00
parent 670225a655
commit da0d49d306
125 changed files with 1775 additions and 3464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/traceManage/analysis/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { ProModal } from 'antdv-pro-modal';
import { Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { saveAs } from 'file-saver';
@@ -174,7 +175,7 @@ function fnGetList(pageNum?: number) {
/**抽屉对象信息状态类型 */
type ModalStateType = {
/**抽屉框是否显示 */
visible: boolean;
open: boolean;
/**标题 */
title: string;
/**表单数据 */
@@ -183,7 +184,7 @@ type ModalStateType = {
/**抽屉对象信息状态 */
let modalState: ModalStateType = reactive({
visible: false,
open: false,
title: '',
from: {
rawData: '',
@@ -214,14 +215,14 @@ function fnModalVisible(row: Record<string, any>) {
modalState.title = t('views.traceManage.analysis.taskTitle', {
num: row.imsi,
});
modalState.visible = true;
modalState.open = true;
}
/**
* 对话框弹出关闭
*/
function fnModalVisibleClose() {
modalState.visible = false;
modalState.open = false;
modalState.from.downBtn = false;
modalState.from.rawDataHTML = '';
modalState.from.rawData = '';
@@ -478,7 +479,7 @@ onMounted(() => {
:drag="true"
:width="800"
:title="modalState.title"
:visible="modalState.visible"
:open="modalState.open"
@cancel="fnModalVisibleClose"
>
<div class="raw-title">
@@ -486,7 +487,6 @@ onMounted(() => {
</div>
<a-row
class="raw"
:gutter="16"
v-for="v in modalState.from.rawData"
:key="v.row"
>

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

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { Modal, message } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/es/table';
import { Modal, message } from 'ant-design-vue/es';
import { parseDateToStr } from '@/utils/date-utils';
import { getNeFile, listNeFiles } from '@/api/tool/neFile';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -275,7 +275,7 @@ function fnGetList(pageNum?: number) {
/**抽屉状态 */
const viewDrawerState = reactive({
visible: false,
open: false,
/**文件路径 /var/log/amf.log */
filePath: '',
/**网元类型 */
@@ -289,7 +289,7 @@ 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;
viewDrawerState.open = !viewDrawerState.open;
}
onMounted(() => {
@@ -315,51 +315,39 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16" :wrap="true">
<a-row :gutter="16" :wrap="true" align="middle">
<a-col>
<a-button type="default" @click.prevent="fnClose()">
<template #icon><CloseOutlined /></template>
{{ t('common.close') }}
</a-button>
</a-col>
<a-col>
<span>{{ t('views.logManage.neFile.neType') }}:</span>&nbsp;
<a-cascader
v-model:value="neTypeSelect"
:options="neInfoStore.getNeCascaderOptions"
@change="fnNeChange"
:allow-clear="false"
:placeholder="t('views.logManage.neFile.neTypePlease')"
:disabled="downLoading || tableState.loading"
/>
</a-col>
<template v-if="nePathArr.length > 0">
<span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
<a-col>
<a-form-item style="margin-bottom: 0">
<a-button type="default" @click.prevent="fnClose()">
<template #icon><CloseOutlined /></template>
{{ t('common.close') }}
</a-button>
</a-form-item>
<a-breadcrumb>
<a-breadcrumb-item
v-for="(path, index) in nePathArr"
:key="path"
@click="fnDirCD(path, index)"
>
{{ path }}
</a-breadcrumb-item>
</a-breadcrumb>
</a-col>
<a-col>
<a-form-item
:label="t('views.logManage.neFile.neType')"
name="neType"
style="margin-bottom: 0"
>
<a-cascader
v-model:value="neTypeSelect"
:options="neInfoStore.getNeCascaderOptions"
@change="fnNeChange"
:allow-clear="false"
:placeholder="t('views.logManage.neFile.neTypePlease')"
:disabled="downLoading || tableState.loading"
/>
</a-form-item>
</a-col>
<a-col v-if="nePathArr.length > 0">
<a-form-item
:label="t('views.logManage.neFile.nePath')"
name="configName"
style="margin-bottom: 0"
>
<a-breadcrumb>
<a-breadcrumb-item
v-for="(path, index) in nePathArr"
:key="path"
@click="fnDirCD(path, index)"
>
{{ path }}
</a-breadcrumb-item>
</a-breadcrumb>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</a-row>
</template>
<!-- 插槽-卡片右侧 -->
@@ -433,7 +421,7 @@ onMounted(() => {
<!-- 文件内容查看抽屉 -->
<ViewDrawer
v-model:visible="viewDrawerState.visible"
v-model:open="viewDrawerState.open"
:file-path="viewDrawerState.filePath"
:ne-type="viewDrawerState.neType"
:ne-id="viewDrawerState.neId"

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

@@ -1,9 +1,10 @@
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue/lib';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { message, Modal } from 'ant-design-vue/es';
import { ColumnsType } from 'ant-design-vue/es/table';
import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { dumpStart, dumpStop, traceUPF } from '@/api/trace/pcap';
import { listAllNeInfo } from '@/api/ne/neInfo';
import { getNeDirZip, getNeFile, getNeViewFile } from '@/api/tool/neFile';
@@ -63,7 +64,7 @@ type ModalStateType = {
stop: string;
}[];
/**详情框是否显示 */
visibleByView: boolean;
openByView: boolean;
/**详情框内容 */
viewFrom: {
neType: string;
@@ -112,7 +113,7 @@ let modalState: ModalStateType = reactive({
stop: 'pcap dispatch trace off',
},
],
visibleByView: false,
openByView: false,
viewFrom: {
neType: '',
neId: '',
@@ -526,7 +527,7 @@ function fnModalVisibleByVive(id: string | number) {
modalState.viewFrom.path = path;
modalState.viewFrom.files = [...files];
fnViveTab(files[0]);
modalState.visibleByView = true;
modalState.openByView = true;
}
/**对话框tab查看 */
@@ -559,7 +560,7 @@ function fnViveTab(action: any) {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByView = false;
modalState.openByView = false;
modalState.viewFrom.action = '';
modalState.viewFrom.files = [];
}
@@ -751,7 +752,7 @@ onMounted(() => {
:fullscreen="true"
:borderDraw="true"
:width="800"
:visible="modalState.visibleByView"
:open="modalState.openByView"
:footer="false"
:maskClosable="false"
:keyboard="false"

31
src/views/traceManage/task-hlr/index.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { Form, message, Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { ProModal } from 'antdv-pro-modal';
import { Form, message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/es/table';
import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
@@ -271,9 +272,9 @@ function fnRecordStop(id: string) {
/**对话框对象信息状态类型 */
type ModalStateType = {
/**详情框是否显示 */
visibleByView: boolean;
openByView: boolean;
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
openByEdit: boolean;
/**标题 */
title: string;
/**任务开始结束时间 */
@@ -290,8 +291,8 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByView: false,
visibleByEdit: false,
openByView: false,
openByEdit: false,
title: '',
timeRangePicker: ['', ''],
from: {
@@ -364,7 +365,7 @@ function fnModalVisibleByVive(id: Record<string, any>) {
modalState.confirmLoading = false;
hide();
modalState.title = t('views.traceManage.task.viewTask');
modalState.visibleByView = true;
modalState.openByView = true;
} else {
message.error(t('views.traceManage.task.errorTaskInfo'), 3);
}
@@ -379,7 +380,7 @@ function fnModalVisibleByEdit(id?: string) {
if (!id) {
fnModalCancel();
modalState.title = t('views.traceManage.task.addTask');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
}
}
@@ -434,8 +435,8 @@ function fnModalOk() {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByView = false;
modalState.visibleByEdit = false;
modalState.openByView = false;
modalState.openByEdit = false;
modalState.confirmLoading = false;
modalStateFrom.resetFields();
modalState.timeRangePicker = ['', ''];
@@ -646,7 +647,7 @@ onMounted(() => {
<!-- 详情框 -->
<ProModal
:drag="true"
:visible="modalState.visibleByView"
:open="modalState.openByView"
:title="modalState.title"
@cancel="fnModalCancel"
:footer="null"
@@ -700,7 +701,7 @@ onMounted(() => {
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
:open="modalState.openByEdit"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@@ -728,7 +729,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.traceManage.task.imsiTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip>
</template>
</a-input>
@@ -748,7 +749,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.traceManage.task.msisdnTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip>
</template>
</a-input>

6
src/views/traceManage/task/analyze.vue
View File

@@ -2,7 +2,7 @@
import { onBeforeUnmount, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib';
import { message, Modal } from 'ant-design-vue/es';
import DissectionTree from '../tshark/components/DissectionTree.vue';
import DissectionDump from '../tshark/components/DissectionDump.vue';
import PacketTable from '../tshark/components/PacketTable.vue';
@@ -50,7 +50,7 @@ let downLoading = ref<boolean>(false);
/**信息文件下载 */
function fnDownloadFile() {
if (downLoading.value) return;
const fileName = `trace_${traceId.value}.pcap`
const fileName = `trace_${traceId.value}.pcap`;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.logManage.neFile.downTip', { fileName }),
@@ -248,7 +248,7 @@ onBeforeUnmount(() => {
:onScrollBottom="handleScrollBottom"
></PacketTable>
<a-row :gutter="20">
<a-row>
<a-col :lg="12" :md="12" :xs="24" class="tree">
<!-- 帧数据 -->
<DissectionTree

43
src/views/traceManage/task/index.vue
View File

@@ -2,10 +2,11 @@
import { reactive, onMounted, toRaw, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { PageContainer } from 'antdv-pro-layout';
import { Form, message, Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { ProModal } from 'antdv-pro-modal';
import { Form, message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { parseDateToStr } from '@/utils/date-utils';
import { MENU_PATH_INLINE } from '@/constants/menu-constants';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -268,7 +269,7 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */
type ModalStateType = {
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
openByEdit: boolean;
/**标题 */
title: string;
/**网元类型设备对象 */
@@ -305,8 +306,8 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByView: false,
visibleByEdit: false,
openByView: false,
openByEdit: false,
title: '',
neType: [],
neTypeInterface: [],
@@ -452,11 +453,11 @@ function fnSelectInterfaceInit(neType: string) {
* 对话框弹出显示为 新增或者修改
* @param noticeId 网元id, 不传为新增
*/
function fnModalVisibleByEdit(id?: string) {
function fnModalOpenByEdit(id?: string) {
if (!id) {
fnModalCancel();
modalState.title = t('views.traceManage.task.addTask');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
} else {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
@@ -479,7 +480,7 @@ function fnModalVisibleByEdit(id?: string) {
fnSelectInterfaceInit(res.data.neType);
}
modalState.title = t('views.traceManage.task.editTask');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
} else {
message.error(t('views.traceManage.task.errorTaskInfo'), 3);
}
@@ -541,7 +542,7 @@ function fnModalOk() {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByEdit = false;
modalState.openByEdit = false;
modalState.confirmLoading = false;
modalStateFrom.resetFields();
modalState.timeRangePicker = ['', ''];
@@ -676,7 +677,7 @@ onMounted(() => {
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
<a-button type="primary" @click.prevent="fnModalOpenByEdit()">
<template #icon><PlusOutlined /></template>
{{ t('common.addText') }}
</a-button>
@@ -767,7 +768,7 @@ onMounted(() => {
<template #title>{{ t('common.editText') }}</template>
<a-button
type="link"
@click.prevent="fnModalVisibleByEdit(record.id)"
@click.prevent="fnModalOpenByEdit(record.id)"
>
<template #icon><FormOutlined /></template>
</a-button>
@@ -803,7 +804,7 @@ onMounted(() => {
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
:open="modalState.openByEdit"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@@ -815,7 +816,7 @@ onMounted(() => {
:label-col="{ span: 4 }"
:label-wrap="true"
>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.common.neType')"
@@ -917,12 +918,12 @@ onMounted(() => {
<template #title>
<div>{{ t('views.traceManage.task.signalPortTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip>
</template>
</a-input-number>
</a-form-item>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.traceManage.task.srcIp')"
@@ -940,7 +941,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.traceManage.task.srcIpTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip>
</template>
</a-input>
@@ -963,7 +964,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.traceManage.task.dstIpTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip>
</template>
</a-input>
@@ -989,7 +990,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.traceManage.task.imsiTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip>
</template>
</a-input>
@@ -1009,7 +1010,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.traceManage.task.msisdnTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip>
</template>
</a-input>

8
src/views/traceManage/tshark/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { message, Upload } from 'ant-design-vue/lib';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import { FileType } from 'ant-design-vue/lib/upload/interface';
import { message, Upload } from 'ant-design-vue/es';
import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import { FileType } from 'ant-design-vue/es/upload/interface';
import { PageContainer } from 'antdv-pro-layout';
import DissectionTree from './components/DissectionTree.vue';
import DissectionDump from './components/DissectionDump.vue';
@@ -143,7 +143,7 @@ function fnUpload(up: UploadRequestOption) {
:onScrollBottom="handleScrollBottom"
></PacketTable>
<a-row :gutter="20">
<a-row>
<a-col :lg="12" :md="12" :xs="24" class="tree">
<!-- 帧数据 -->
<DissectionTree

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

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib';
import { message, Modal } from 'ant-design-vue/es';
import DissectionTree from '../tshark/components/DissectionTree.vue';
import DissectionDump from '../tshark/components/DissectionDump.vue';
import PacketTable from '../tshark/components/PacketTable.vue';
@@ -433,7 +433,7 @@ onBeforeUnmount(() => {
:onScrollBottom="handleScrollBottom"
></PacketTable>
<a-row :gutter="20">
<a-row>
<a-col :lg="12" :md="12" :xs="24" class="tree">
<!-- 帧数据 -->
<DissectionTree