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

Merge remote-tracking branch 'origin/main' into multi-tenant

Browse Source
This commit is contained in:
TsMask
2024-06-27 20:19:46 +08:00
parent c38855acf8 e31c85835d
commit ef3796c34f
114 changed files with 4066 additions and 1781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/account/components/base-info.vue
View File

@@ -15,9 +15,9 @@ const { getDict } = useDictStore();
/**用户性别字典 */
let sysUserSex = ref<DictType[]>([
{ label: '未知', value: '0', elTagType: '', elTagClass: '' },
{ label: '男', value: '1', elTagType: '', elTagClass: '' },
{ label: '女', value: '2', elTagType: '', elTagClass: '' },
{ label: '未知', value: '0', tagType: '', tagClass: '' },
{ label: '男', value: '1', tagType: '', tagClass: '' },
{ label: '女', value: '2', tagType: '', tagClass: '' },
]);
/**表单数据状态 */

8
src/views/configManage/backupManage/index.vue
View File

@@ -481,8 +481,10 @@ onMounted(() => {
</a-card>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -505,7 +507,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

8
src/views/configManage/configParamTreeTable/hooks/useOptions.ts
View File

@@ -23,6 +23,8 @@ export default function useOptions() {
}
switch (type) {
case 'int':
// filter: "0~128"
if (filter && filter.indexOf('~') !== -1) {
const filterArr = filter.split('~');
const minInt = parseInt(filterArr[0]);
@@ -73,6 +75,8 @@ export default function useOptions() {
}
break;
case 'bool':
// filter: '{"0":"false", "1":"true"}'
if (filter && filter.indexOf('{') === 1) {
let filterJson: Record<string, any> = {};
try {
@@ -90,6 +94,8 @@ export default function useOptions() {
}
break;
case 'string':
// filter: "0~128"
// 字符串长度判断
if (filter && filter.indexOf('~') !== -1) {
try {
@@ -127,6 +133,8 @@ export default function useOptions() {
break;
case 'regex':
// filter: "^[0-9]{3}$"
if (filter) {
try {
let regex = new RegExp(filter);

8
src/views/configManage/configParamTreeTable/index.vue
View File

@@ -1455,8 +1455,10 @@ onMounted(() => {
</a-row>
<!-- 新增框或修改框 -->
<DraggableModal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
@@ -1549,7 +1551,7 @@ onMounted(() => {
</a-tooltip>
</a-form-item>
</a-form>
</DraggableModal>
</ProModal>
</PageContainer>
</template>

8
src/views/configManage/license/index.vue
View File

@@ -430,8 +430,10 @@ onMounted(() => {
</a-card>
<!-- 上传框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -487,7 +489,7 @@ onMounted(() => {
</a-upload>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

22
src/views/configManage/neManage/index.vue
View File

@@ -26,8 +26,8 @@ import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import useLockedStore from '@/store/modules/locked';
const lockedStore = useLockedStore();
import useMaskStore from '@/store/modules/mask';
const maskStore = useMaskStore();
const { t } = useI18n();
/**表格所需option */
@@ -550,7 +550,7 @@ function fnRecordRestart(row: Record<string, any>) {
if (res.code === RESULT_CODE_SUCCESS) {
// OMC自升级
if (row.neType.toLowerCase() === 'omc') {
lockedStore.fnLock('reload');
maskStore.handleMaskType('reload');
return;
}
message.success({
@@ -972,8 +972,10 @@ onMounted(() => {
</a-card>
<!-- 新增框或修改框 -->
<DraggableModal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1168,11 +1170,13 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</DraggableModal>
</ProModal>
<!-- 导入框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByImport"
@@ -1259,7 +1263,7 @@ onMounted(() => {
</a-upload>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

36
src/views/configManage/softwareManage/components/software-history.vue
View File

@@ -167,7 +167,11 @@ function fnGetList(pageNum?: number) {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -197,15 +201,16 @@ watch(
</script>
<template>
<a-modal
width="100%"
wrap-class-name="full-modal"
<ProModal
:drag="true"
:forceFullscreen="true"
:destroyOnClose="true"
:title="props.title"
:visible="props.visible"
:keyboard="false"
:mask-closable="false"
@cancel="fnModalCancel"
:footer="null"
:footer="false"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
@@ -265,7 +270,7 @@ watch(
:pagination="tablePagination"
>
</a-table>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped>
@@ -273,22 +278,3 @@ watch(
padding: 0 24px;
}
</style>
<style lang="less">
.full-modal {
.ant-modal {
max-width: 100%;
top: 0;
padding-bottom: 0;
margin: 0;
}
.ant-modal-content {
display: flex;
flex-direction: column;
height: calc(100vh);
}
.ant-modal-body {
flex: 1;
}
}
</style>

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

@@ -23,8 +23,8 @@ import useI18n from '@/hooks/useI18n';
import useNeInfoStore from '@/store/modules/neinfo';
import { FileType } from 'ant-design-vue/lib/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import useLockedStore from '@/store/modules/locked';
const lockedStore = useLockedStore();
import useMaskStore from '@/store/modules/mask';
const maskStore = useMaskStore();
const { t } = useI18n();
/**查询参数 */
@@ -299,7 +299,7 @@ function fnFileModalOk() {
if (type === 'run' && from.neType.toLowerCase() === 'omc') {
if (res.code === RESULT_CODE_SUCCESS) {
fnFileModalCancel();
lockedStore.fnLock('reload');
maskStore.handleMaskType('reload');
} else {
message.error({
content: `${fileModalState.title} ${res.msg}`,
@@ -919,8 +919,9 @@ onMounted(() => {
</a-card>
<!-- 上传框 -->
<DraggableModal
width="800px"
<ProModal
:drag="true"
:width="800"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1012,7 +1013,7 @@ onMounted(() => {
</a-upload>
</a-form-item>
</a-form>
</DraggableModal>
</ProModal>
<!-- 上传激活历史 -->
<SoftwareHistory
@@ -1022,8 +1023,8 @@ onMounted(() => {
/>
<!-- 文件框 下发激活 -->
<a-modal
width="600px"
<ProModal
:drag="true"
:keyboard="false"
:mask-closable="false"
:visible="fileModalState.visible"
@@ -1051,11 +1052,11 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
<!-- 回退框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:keyboard="false"
:mask-closable="false"
:visible="fileModalState.visibleByBack"
@@ -1086,7 +1087,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

82
src/views/dashboard/amfUE/index.vue
View File

@@ -12,8 +12,9 @@ import {
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useDictStore from '@/store/modules/dict';
import { listAMFDataUE, delAMFDataUE } from '@/api/neData/amf';
import { listAMFDataUE, delAMFDataUE, exportAMFDataUE } from '@/api/neData/amf';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import saveAs from 'file-saver';
import PQueue from 'p-queue';
import useUserStore from '@/store/modules/user';
const { t } = useI18n();
@@ -35,6 +36,9 @@ let dict: {
ueEventCmState: [],
});
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
@@ -45,6 +49,10 @@ let queryParams = reactive({
tenantName: '',
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
/**结束时间 */
endTime: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -58,9 +66,12 @@ function fnQueryReset() {
eventType: 'auth-result',
imsi: '',
tenantName: '',
startTime: '',
endTime: '',
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
@@ -255,6 +266,11 @@ function fnGetList(pageNum?: number) {
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listAMFDataUE(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
@@ -289,6 +305,39 @@ function fnGetList(pageNum?: number) {
});
}
/**列表导出 */
function fnExportList() {
if (modalState.confirmLoading) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.ue.exportTip'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const querys = toRaw(queryParams);
querys.pageSize = 10000;
exportAMFDataUE(querys)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
saveAs(res.data, `amf_ue_event_export_${Date.now()}.xlsx`);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**实时数据开关 */
const realTimeData = ref<boolean>(false);
@@ -304,7 +353,7 @@ function fnRealTime() {
params: {
/**订阅通道组
*
* UE会话事件-AMF (GroupID:1010)
* AMF_UE会话事件(GroupID:1010)
*/
subGroupID: '1010',
},
@@ -335,7 +384,7 @@ function wsMessage(res: Record<string, any>) {
if (!data?.groupId) {
return;
}
// ueEvent CDR会话事件
// ueEvent AMF_UE会话事件
if (data.groupId === '1010') {
const ueEvent = data.data;
queue.add(async () => {
@@ -423,7 +472,7 @@ onBeforeUnmount(() => {
></a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="4" :md="12" :xs="24">
<a-form-item label="IMSI" name="imsi ">
<a-input
v-model:value="queryParams.imsi"
@@ -443,6 +492,22 @@ onBeforeUnmount(() => {
></a-input>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.time')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
@@ -501,6 +566,11 @@ onBeforeUnmount(() => {
<template #icon><DeleteOutlined /></template>
{{ t('common.deleteText') }}
</a-button>
<a-button type="dashed" @click.prevent="fnExportList()">
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</a-button>
</a-space>
</template>
@@ -638,11 +708,11 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.ue.ueInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.ue.neName') }}: </span>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.dashboard.ue.rmUID') }}: </span>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<a-divider orientation="left">

97
src/views/dashboard/imsCDR/index.vue
View File

@@ -12,9 +12,14 @@ import {
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useDictStore from '@/store/modules/dict';
import { delIMSDataCDR, listIMSDataCDR } from '@/api/neData/ims';
import {
delIMSDataCDR,
exportIMSDataCDR,
listIMSDataCDR,
} from '@/api/neData/ims';
import { parseDateToStr, parseDuration } from '@/utils/date-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import saveAs from 'file-saver';
import PQueue from 'p-queue';
import useUserStore from '@/store/modules/user';
const { t } = useI18n();
@@ -33,6 +38,9 @@ let dict: {
cdrCallType: [],
});
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
@@ -44,6 +52,10 @@ let queryParams = reactive({
tenantName: '',
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
/**结束时间 */
endTime: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -58,9 +70,12 @@ function fnQueryReset() {
callerParty: '',
calledParty: '',
tenantName: '',
startTime: '',
endTime: '',
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
@@ -293,6 +308,11 @@ function fnGetList(pageNum?: number) {
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listIMSDataCDR(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
@@ -328,6 +348,39 @@ function fnGetList(pageNum?: number) {
});
}
/**列表导出 */
function fnExportList() {
if (modalState.confirmLoading) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.cdr.exportTip'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const querys = toRaw(queryParams);
querys.pageSize = 10000;
exportIMSDataCDR(querys)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
saveAs(res.data, `ims_cdr_event_export_${Date.now()}.xlsx`);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**实时数据开关 */
const realTimeData = ref<boolean>(false);
@@ -343,7 +396,7 @@ function fnRealTime() {
params: {
/**订阅通道组
*
* CDR会话事件-IMS (GroupID:1005)
* IMS_CDR会话事件(GroupID:1005)
*/
subGroupID: '1005',
},
@@ -492,6 +545,22 @@ onBeforeUnmount(() => {
></a-input>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.time')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
@@ -538,6 +607,22 @@ onBeforeUnmount(() => {
}}
</a-button>
</a-popconfirm>
<a-button
type="default"
danger
:disabled="tableState.selectedRowKeys.length <= 0"
:loading="modalState.confirmLoading"
@click.prevent="fnRecordDelete('0')"
>
<template #icon><DeleteOutlined /></template>
{{ t('common.deleteText') }}
</a-button>
<a-button type="dashed" @click.prevent="fnExportList()">
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</a-button>
</a-space>
</template>
@@ -620,7 +705,7 @@ onBeforeUnmount(() => {
<DictTag
:options="dict.cdrSipCode"
:value="record.cdrJSON.cause"
value-option="0"
value-default="0"
/>
</span>
<span v-else>
@@ -649,11 +734,11 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.cdr.cdrInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.cdr.neName') }}: </span>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.rmUID') }}: </span>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<div>
@@ -691,7 +776,7 @@ onBeforeUnmount(() => {
<DictTag
:options="dict.cdrSipCode"
:value="record.cdrJSON.cause"
value-option="0"
value-default="0"
/>
</span>
<span v-else>

693
src/views/dashboard/mmeUE/index.vue Normal file
View File

@@ -0,0 +1,693 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, ref, onBeforeUnmount } 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 useI18n from '@/hooks/useI18n';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useDictStore from '@/store/modules/dict';
import { listMMEDataUE, delMMEDataUE, exportMMEDataUE } from '@/api/neData/mme';
import { parseDateToStr } from '@/utils/date-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import saveAs from 'file-saver';
import PQueue from 'p-queue';
const { t } = useI18n();
const { getDict } = useDictStore();
const ws = new WS();
const queue = new PQueue({ concurrency: 1, autoStart: true });
/**字典数据 */
let dict: {
/**UE 事件认证代码类型 */
ueAauthCode: DictType[];
/**UE 事件类型 */
ueEventType: DictType[];
/**UE 事件CM状态 */
ueEventCmState: DictType[];
} = reactive({
ueAauthCode: [],
ueEventType: [],
ueEventCmState: [],
});
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: 'MME',
neId: '001',
eventType: 'auth-result',
imsi: '',
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
/**结束时间 */
endTime: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
});
/**查询参数重置 */
function fnQueryReset() {
eventTypes.value = ['auth-result'];
queryParams = Object.assign(queryParams, {
eventType: 'auth-result',
imsi: '',
startTime: '',
endTime: '',
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**记录类型 */
const eventTypes = ref<string[]>(['auth-result']);
/**查询记录类型变更 */
function fnQueryEventTypeChange(value: any) {
if (Array.isArray(value)) {
queryParams.eventType = value.join(',');
}
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**紧凑型 */
size: SizeType;
/**搜索栏 */
seached: boolean;
/**记录数据 */
data: object[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: true,
data: [],
selectedRowKeys: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('common.rowId'),
dataIndex: 'id',
align: 'left',
width: 100,
},
{
title: 'IMSI',
dataIndex: 'eventJSON',
align: 'left',
width: 150,
customRender(opt) {
const eventJSON = opt.value;
return eventJSON.imsi;
},
},
{
title: t('views.dashboard.ue.eventType'),
dataIndex: 'eventType',
key: 'eventType',
align: 'left',
width: 150,
},
{
title: t('views.dashboard.ue.result'),
dataIndex: 'eventJSON',
key: 'result',
align: 'left',
width: 150,
},
{
title: t('views.dashboard.ue.time'),
dataIndex: 'eventJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return parseDateToStr(+cdrJSON.timestamp * 1000);
},
},
{
title: t('common.operate'),
key: 'id',
align: 'left',
},
];
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 20,
/**默认的每页条数 */
defaultPageSize: 20,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: false,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
/**数据总数 */
total: 0,
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
onChange: (page: number, pageSize: number) => {
tablePagination.current = page;
tablePagination.pageSize = pageSize;
queryParams.pageNum = page;
queryParams.pageSize = pageSize;
fnGetList();
},
});
/**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格多选 */
function fnTableSelectedRowKeys(keys: (string | number)[]) {
tableState.selectedRowKeys = keys;
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**确定按钮 loading */
confirmLoading: boolean;
/**最大ID值 */
maxId: number;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
confirmLoading: false,
maxId: 0,
});
/**
* 记录删除
* @param id 编号
*/
function fnRecordDelete(id: string) {
if (!id || modalState.confirmLoading) return;
let msg = id;
if (id === '0') {
msg = `${id}... ${tableState.selectedRowKeys.length}`;
id = tableState.selectedRowKeys.join(',');
}
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.ue.delTip', { msg }),
onOk() {
modalState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
delMMEDataUE(id)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
fnGetList(1);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listMMEDataUE(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
let eventJSON = item.eventJSON;
if (!eventJSON) {
Reflect.set(item, 'eventJSON', {});
}
try {
eventJSON = JSON.parse(eventJSON);
Reflect.set(item, 'eventJSON', eventJSON);
} catch (error) {
console.error(error);
Reflect.set(item, 'eventJSON', {});
}
return item;
});
// 取最大值ID用作实时累加
if (res.total > 0) {
modalState.maxId = Number(res.rows[0].id);
}
}
tableState.loading = false;
});
}
/**列表导出 */
function fnExportList() {
if (modalState.confirmLoading) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.ue.exportTip'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const querys = toRaw(queryParams);
querys.pageSize = 10000;
exportMMEDataUE(querys)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
saveAs(res.data, `mme_ue_event_export_${Date.now()}.xlsx`);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**实时数据开关 */
const realTimeData = ref<boolean>(false);
/**
* 实时数据
*/
function fnRealTime() {
realTimeData.value = !realTimeData.value;
if (realTimeData.value) {
// 建立链接
const options: OptionsType = {
url: '/ws',
params: {
/**订阅通道组
*
* MME_UE会话事件(GroupID:1011)
*/
subGroupID: '1011',
},
onmessage: wsMessage,
onerror: wsError,
};
ws.connect(options);
} else {
ws.close();
}
}
/**接收数据后回调 */
function wsError(ev: any) {
// 接收数据后回调
console.error(ev);
}
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// 订阅组信息
if (!data?.groupId) {
return;
}
// ueEvent MME_UE会话事件
if (data.groupId === '1011') {
const ueEvent = data.data;
queue.add(async () => {
modalState.maxId += 1;
tableState.data.unshift({
id: modalState.maxId,
neType: ueEvent.neType,
neName: ueEvent.neName, // 空
rmUID: ueEvent.rmUID, // 空
timestamp: ueEvent.timestamp,
eventType: ueEvent.eventType,
eventJSON: ueEvent.eventJSON,
});
tablePagination.total += 1;
if (tableState.data.length > 100) {
tableState.data.pop();
}
await new Promise(resolve => setTimeout(resolve, 800));
});
}
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([
getDict('ue_auth_code'),
getDict('ue_event_type'),
getDict('ue_event_cm_state'),
])
.then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.ueAauthCode = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.ueEventType = resArr[1].value;
}
if (resArr[2].status === 'fulfilled') {
dict.ueEventCmState = resArr[2].value;
}
})
.finally(() => {
// 获取列表数据
fnGetList();
});
});
onBeforeUnmount(() => {
if (ws.state() !== -1) {
ws.close();
}
});
</script>
<template>
<PageContainer>
<a-card
v-show="tableState.seached"
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.ue.eventType')"
name="eventType "
>
<a-select
v-model:value="eventTypes"
mode="multiple"
:options="dict.ueEventType"
:placeholder="t('common.selectPlease')"
@change="fnQueryEventTypeChange"
></a-select>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item label="IMSI" name="imsi ">
<a-input
v-model:value="queryParams.imsi"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.time')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-popconfirm
placement="bottomLeft"
:title="
!realTimeData
? t('views.dashboard.ue.realTimeDataStart')
: t('views.dashboard.ue.realTimeDataStop')
"
ok-text="Yes"
cancel-text="No"
@confirm="fnRealTime()"
>
<a-button type="primary" :danger="realTimeData">
<template #icon><FundOutlined /> </template>
{{
!realTimeData
? t('views.dashboard.ue.realTimeDataStart')
: t('views.dashboard.ue.realTimeDataStop')
}}
</a-button>
</a-popconfirm>
<a-button
type="default"
danger
:disabled="tableState.selectedRowKeys.length <= 0"
:loading="modalState.confirmLoading"
@click.prevent="fnRecordDelete('0')"
>
<template #icon><DeleteOutlined /></template>
{{ t('common.deleteText') }}
</a-button>
<a-button type="dashed" @click.prevent="fnExportList()">
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</a-button>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
v-model:checked="tableState.seached"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click" placement="bottomRight">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
<template #overlay>
<a-menu
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-tooltip>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:pagination="tablePagination"
:scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
:row-selection="{
type: 'checkbox',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'eventType'">
<DictTag :options="dict.ueEventType" :value="record.eventType" />
</template>
<template v-if="column.key === 'result'">
<span v-if="record.eventType === 'auth-result'">
<DictTag
:options="dict.ueAauthCode"
:value="record.eventJSON.result"
/>
</span>
<span v-if="record.eventType === 'detach'">
<span>{{ t('views.dashboard.ue.resultOk') }}</span>
</span>
<span v-if="record.eventType === 'cm-state'">
<DictTag
:options="dict.ueEventCmState"
:value="record.eventJSON.result"
/>
</span>
</template>
<template v-if="column.key === 'id'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.deleteText') }}</template>
<a-button
type="link"
@click.prevent="fnRecordDelete(record.id)"
>
<template #icon>
<DeleteOutlined />
</template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
<template #expandedRowRender="{ record }">
<div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
<a-divider orientation="left">
{{ t('views.dashboard.ue.ueInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<a-divider orientation="left">
{{ t('views.dashboard.ue.rowInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.ue.time') }}: </span>
{{ parseDateToStr(record.eventJSON.timestamp * 1000) }}
</div>
<div>
<span>{{ t('views.dashboard.ue.eventType') }}: </span>
<DictTag :options="dict.ueEventType" :value="record.eventType" />
</div>
<div>
<span>{{ t('views.dashboard.ue.result') }}: </span>
<span v-if="record.eventType === 'auth-result'">
<DictTag
:options="dict.ueAauthCode"
:value="record.eventJSON.result"
/>
</span>
<span v-if="record.eventType === 'detach'">
{{ t('views.dashboard.ue.resultOK') }}
</span>
<span v-if="record.eventType === 'cm-state'">
<DictTag
:options="dict.ueEventCmState"
:value="record.eventJSON.result"
/>
</span>
</div>
</div>
</template>
</a-table>
</a-card>
</PageContainer>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>

7
src/views/dashboard/mocn/components/setting.vue
View File

@@ -56,8 +56,9 @@ watch(
</script>
<template>
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:title="props.title"
:visible="props.visible"
:keyboard="false"
@@ -82,7 +83,7 @@ watch(
</a-input-number>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped></style>

9
src/views/dashboard/mocn/index.vue
View File

@@ -10,7 +10,7 @@ import UserActivity from '../overview/components/UserActivity/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import setting from './components/setting.vue';
import UPFFlow from '../overview/components/UPFFlow/index.vue';
import { listSub } from '@/api/neUser/sub';
import { listUDMSub } from '@/api/neData/udm_sub';
import { listUENumBySMF } from '@/api/neUser/smf';
import { listUENumByIMS } from '@/api/neUser/ims';
import { listBase5G } from '@/api/neUser/base5G';
@@ -31,7 +31,7 @@ import { dbGetJSON } from '@/utils/cache-db-utils';
const router = useRouter();
const appStore = useAppStore();
const { t } = useI18n();
const { wsSend, cdrEventSend, ueEventSend, upfTFSend } = useWS();
const { wsSend, userActivitySend, upfTFSend } = useWS();
/**概览状态类型 */
type SkimStateType = {
@@ -97,7 +97,7 @@ function fnGetNeState() {
/**获取概览信息 */
async function fnGetSkim() {
const resArr = await Promise.allSettled([
listSub({
listUDMSub({
neid: '001',
pageNum: 1,
pageSize: 1,
@@ -157,8 +157,7 @@ async function fnGetSkim() {
/**初始数据函数 */
function loadData() {
fnGetNeState(); // 获取网元状态
cdrEventSend();
ueEventSend();
userActivitySend();
upfTFSend(0);
upfTFSend(7);
upfTFSend(30);

156
src/views/dashboard/overview/components/UserActivity/index.vue
View File

@@ -58,11 +58,11 @@ onMounted(() => {
<template>
<div class="activty">
<template v-for="item in eventData" :key="item.eId">
<!-- CDR事件 -->
<!-- CDR事件IMS -->
<div
class="card-cdr"
:class="{ active: item.eId === eventId }"
v-if="item.eType === 'cdr'"
v-if="item.eType === 'ims_cdr'"
>
<div class="card-cdr-item">
<div>
@@ -104,18 +104,22 @@ onMounted(() => {
<div>
{{ t('views.dashboard.overview.userActivity.result') }}:&nbsp;
<span v-if="item.data.callType !== 'sms'">
<DictTag :options="dict.cdrSipCode" :value="item.data.cause" value-option="0" />
<DictTag
:options="dict.cdrSipCode"
:value="item.data.cause"
value-default="0"
/>
</span>
<span v-else>
{{ t('views.dashboard.overview.userActivity.resultOK') }}
</span>
</div>
</div>
<!-- UE事件 -->
<!-- UE事件AMF -->
<div
class="card-ue"
:class="{ active: item.eId === eventId }"
v-if="item.eType === 'ue'"
v-if="item.eType === 'amf_ue'"
>
<div class="card-ue-item">
<div>
@@ -155,6 +159,7 @@ onMounted(() => {
TAC ID: <span>{{ item.data.tacID }}</span>
</div>
</div>
<div v-if="item.type === 'auth-result'">
{{ t('views.dashboard.overview.userActivity.result') }}:&nbsp;
<span>
@@ -172,96 +177,59 @@ onMounted(() => {
</span>
</div>
</div>
<!-- UE事件MME -->
<div
class="card-ue"
:class="{ active: item.eId === eventId }"
v-if="item.eType === 'mme_ue'"
>
<div class="card-ue-item">
<div>
{{ t('views.dashboard.overview.userActivity.type') }}:&nbsp;
<span>
<DictTag :options="dict.ueEventType" :value="item.type" />
</span>
</div>
<div>
IMSI: <span :title="item.data.imsi">{{ item.data.imsi }}</span>
</div>
<div>
{{ t('views.dashboard.overview.userActivity.time') }}:
<span :title="item.data.timestamp">
{{ parseDateToStr(+item.data.timestamp * 1000) }}
</span>
</div>
</div>
<div class="card-ue-w33" v-if="item.type === 'auth-result'">
<div>
ENB ID: <span>{{ item.data.eNBID }}</span>
</div>
<div>
Cell ID: <span>{{ item.data.cellID }}</span>
</div>
<div>
TAC ID: <span>{{ item.data.tacID }}</span>
</div>
</div>
<div v-if="item.type === 'auth-result'">
{{ t('views.dashboard.overview.userActivity.result') }}:&nbsp;
<span>
<DictTag :options="dict.ueAauthCode" :value="item.data.result" />
</span>
</div>
<div v-if="item.type === 'detach'">
{{ t('views.dashboard.overview.userActivity.result') }}:
<span>{{ t('views.dashboard.overview.userActivity.resultOK') }}</span>
</div>
<div class="card-ue-w33" v-if="item.type === 'cm-state'">
{{ t('views.dashboard.overview.userActivity.result') }}:&nbsp;
<span>
<DictTag :options="dict.ueEventCmState" :value="item.data.result" />
</span>
</div>
</div>
</template>
<!-- <div class="card-cdr active">
<div class="card-cdr-item">
<div>类型: <span>video</span></div>
<div>时长: <span>123s</span></div>
</div>
<div class="card-cdr-item">
<div>主叫: <span>12307550064</span></div>
<div>被叫: <span>12307550064</span></div>
</div>
<div>结果: <span>200</span></div>
</div>
<div class="card-cdr">
<div class="card-cdr-item">
<div>类型: <span>audio</span></div>
<div>时长: <span>123s</span></div>
</div>
<div class="card-cdr-item">
<div>主叫: <span>12307550064</span></div>
<div>被叫: <span>12307550064</span></div>
</div>
<div>结果: <span>200</span></div>
</div>
<div class="card-ue">
<div class="card-ue-item">
<div>类型: <span>auth-result</span></div>
<div>Time: <span>2023-01-16 07:28:11</span></div>
</div>
<div>IMSI: <span>4600212141</span></div>
<div class="card-ue-auth">
<div>GNB ID: <span>31</span></div>
<div>Cell ID: <span>17</span></div>
<div>Tac ID: <span>98</span></div>
</div>
</div>
<div class="card-ue">
<div class="card-ue-item">
<div>类型: <span>cm-state</span></div>
<div>Time: <span>2023-01-16 07:28:11</span></div>
</div>
<div>IMSI: <span>4600212141</span></div>
</div> -->
<!-- <div class="card-cdr">
{ "recordType":"MOC", // MOC, MTC, MOSM, MTSM
"seqNumber":81,
"callReference":"Y6ecb69Bj@10.25.0.210",
"callerParty":"7112",
"calledParty":"7108",
"serviceResult":"ok",
"seizureTime":1706515269,
"answerTime":1706515273,
"releaseTime":1706515294,
"callDuration":21
"callType":"audio" // audio, video
"fwdType": "CFB" // CFU,CFB, CFNR, CFNL
"fwdParty":"7999",
"cause": 200 // 200, 403, 408, 500 .... }
{"neType":"IMS","neName":"IMS_001","rmUID":"4400HX1IMS001","timestamp":1707124616,
"CDR":{"recordType":"MOSM","seqNumber":1,"callReference":"IIocbkeoj@10.10.91.22",
"callerParty":"12307551241","calledParty":"+8613800755000","serviceResult":"ok",
"seizureTime":1707124616,"answerTime":1707124616,"releaseTime":1707124616,
"callDuration":0,"callType":"text","fwdType":"","fwdParty":"","cause":200}}
https://telnyx.com/resources/sip-response-codes-need-know-2-minutes
主叫：callerParty
被叫：calledParty
时长：callDuration
呼叫类型：callType
原因：cause
信息： 主叫 -> 被叫
</div>
<div class="card-ue">ue
事件类型：auth-result
imei
GNB ID
Cell ID
Tac ID
authTime
事件类型：detach
imsi
detachTime
事件类型：cm-state
imsi
changeTime
</div> -->
</div>
</template>

102
src/views/dashboard/overview/hooks/useUserActivity.ts
View File

@@ -1,7 +1,9 @@
import { ref } from 'vue';
/**ueEvent UE会话事件 数据解析 */
export function ueEventParse(item: Record<string, any>) {
/**ueEventAMFParse UE会话事件AMF 数据解析 */
function ueEventAMFParse(
item: Record<string, any>
): false | Record<string, any> {
let evData: Record<string, any> = item.eventJSON;
if (typeof evData === 'string') {
try {
@@ -12,8 +14,8 @@ export function ueEventParse(item: Record<string, any>) {
}
return {
eType: 'ue',
eId: `ue_${item.id}_${Date.now()}`,
eType: 'amf_ue',
eId: `amf_ue_${item.id}_${Date.now()}`,
eTime: +item.timestamp,
id: item.id,
type: item.eventType,
@@ -21,8 +23,33 @@ export function ueEventParse(item: Record<string, any>) {
};
}
/**cdrEvent CDR会话事件 数据解析 */
export function cdrEventParse(item: Record<string, any>) {
/**ueEventMMEParse UE会话事件MME 数据解析 */
function ueEventMMEParse(
item: Record<string, any>
): false | Record<string, any> {
let evData: Record<string, any> = item.eventJSON;
if (typeof evData === 'string') {
try {
evData = JSON.parse(evData);
} catch (error) {
console.error(error);
}
}
return {
eType: 'mme_ue',
eId: `mme_ue_${item.id}_${Date.now()}`,
eTime: +item.timestamp,
id: item.id,
type: item.eventType,
data: evData,
};
}
/**cdrEventIMSParse CDR会话事件IMS 数据解析 */
function cdrEventIMSParse(
item: Record<string, any>
): false | Record<string, any> {
let evData: Record<string, any> = item.cdrJSON || item.CDR;
if (typeof evData === 'string') {
try {
@@ -39,14 +66,73 @@ export function cdrEventParse(item: Record<string, any>) {
}
return {
eType: 'cdr',
eId: `cdr_${item.id}_${Date.now()}`,
eType: 'ims_cdr',
eId: `ims_cdr_${item.id}_${Date.now()}`,
eTime: +item.timestamp,
id: item.id,
data: evData,
};
}
/**eventListParse 事件列表解析 */
export function eventListParse(
type: 'ims_cdr' | 'amf_ue' | 'mme_ue',
data: any
) {
eventTotal.value += data.total;
for (const item of data.rows) {
let v: false | Record<string, any> = false;
if (type === 'ims_cdr') {
v = cdrEventIMSParse(item);
}
if (type === 'amf_ue') {
v = ueEventAMFParse(item);
}
if (type === 'mme_ue') {
v = ueEventMMEParse(item);
}
if (v) {
eventData.value.push(v);
}
}
// 有数据进行排序
if (eventData.value.length > 5) {
eventData.value.sort((a, b) => b.eTime - a.eTime);
}
if (eventData.value.length > 0) {
eventId.value = eventData.value[0].eId;
}
}
/**eventItemParseAndPush 事件项解析并添加 */
export async function eventItemParseAndPush(
type: 'ims_cdr' | 'amf_ue' | 'mme_ue',
item: any
) {
let v: false | Record<string, any> = false;
if (type === 'ims_cdr') {
v = cdrEventIMSParse(item);
}
if (type === 'amf_ue') {
v = ueEventAMFParse(item);
}
if (type === 'mme_ue') {
v = ueEventMMEParse(item);
}
if (v) {
eventData.value.unshift(v);
eventTotal.value += 1;
eventId.value = v.eId;
await new Promise(resolve => setTimeout(resolve, 800));
if (eventData.value.length > 20) {
eventData.value.pop();
}
}
}
/**CDR+UE事件数据 */
export const eventData = ref<Record<string, any>[]>([]);
/**CDR+UE事件总量 */

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

@@ -2,11 +2,8 @@ import { RESULT_CODE_ERROR } from '@/constants/result-constants';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { onBeforeUnmount, onMounted } from 'vue';
import {
ueEventParse,
cdrEventParse,
eventData,
eventTotal,
eventId,
eventListParse,
eventItemParseAndPush,
userActivityReset,
} from './useUserActivity';
import {
@@ -52,44 +49,22 @@ export default function useWS() {
// 普通信息
switch (requestId) {
// ueEvent UE会话事件
// AMF_UE会话事件
case '1010':
if (Array.isArray(data.rows)) {
eventTotal.value += data.total;
for (const item of data.rows) {
const v = ueEventParse(item);
if (v) {
eventData.value.push(v);
}
}
// 有数据进行排序
if (eventData.value.length > 10) {
eventData.value.sort((a, b) => b.eTime - a.eTime);
}
if (eventData.value.length > 0) {
eventId.value = eventData.value[0].eId;
}
eventListParse('amf_ue', data);
}
break;
//cdrEvent CDR会话事件
// MME_UE会话事件
case '1011':
if (Array.isArray(data.rows)) {
eventListParse('mme_ue', data);
}
break;
// IMS_CDR会话事件
case '1005':
if (Array.isArray(data.rows)) {
eventTotal.value += data.total;
for (const item of data.rows) {
const v = cdrEventParse(item);
if (v) {
eventData.value.push(v);
}
}
// 有数据进行排序
if (eventData.value.length > 10) {
eventData.value.sort((a, b) => b.eTime - a.eTime);
}
if (eventData.value.length > 0) {
eventId.value = eventData.value[0].eId;
}
eventListParse('ims_cdr', data);
}
break;
//UPF-总流量数
@@ -124,38 +99,22 @@ export default function useWS() {
upfFlowParse(data.data);
}
break;
// ueEvent UE会话事件
// AMF_UE会话事件
case '1010':
if (data.data) {
queue.add(async () => {
const v = ueEventParse(data.data);
if (v) {
eventData.value.unshift(v);
eventTotal.value += 1;
eventId.value = v.eId;
await new Promise(resolve => setTimeout(resolve, 800));
if (eventData.value.length > 20) {
eventData.value.pop();
}
}
});
queue.add(() => eventItemParseAndPush('amf_ue', data.data));
}
break;
// cdrEvent CDR会话事件
// MME_UE会话事件
case '1011':
if (data.data) {
queue.add(() => eventItemParseAndPush('mme_ue', data.data));
}
break;
// IMS_CDR会话事件
case '1005':
if (data.data) {
queue.add(async () => {
const v = cdrEventParse(data.data);
if (v) {
eventData.value.unshift(v);
eventTotal.value += 1;
eventId.value = v.eId;
await new Promise(resolve => setTimeout(resolve, 800));
if (eventData.value.length > 20) {
eventData.value.pop();
}
}
});
queue.add(() => eventItemParseAndPush('ims_cdr', data.data));
}
break;
}
@@ -188,27 +147,38 @@ export default function useWS() {
});
}
/**ueEvent UE会话事件 发消息*/
function ueEventSend() {
/**userActivitySend 用户行为事件基础列表数据 发消息*/
function userActivitySend() {
// AMF_UE会话事件
ws.send({
requestId: '1010',
type: 'ue',
type: 'amf_ue',
data: {
neType: 'AMF',
neId: '001',
sortField: 'timestamp',
sortOrder: 'desc',
pageNum: 1,
pageSize: 10,
pageSize: 5,
},
});
}
/**cdrEvent CDR会话事件 发消息*/
function cdrEventSend() {
// MME_UE会话事件
ws.send({
requestId: '1011',
type: 'mme_ue',
data: {
neType: 'MME',
neId: '001',
sortField: 'timestamp',
sortOrder: 'desc',
pageNum: 1,
pageSize: 5,
},
});
// IMS_CDR会话事件
ws.send({
requestId: '1005',
type: 'cdr',
type: 'ims_cdr',
data: {
neType: 'IMS',
neId: '001',
@@ -216,7 +186,7 @@ export default function useWS() {
sortField: 'timestamp',
sortOrder: 'desc',
pageNum: 1,
pageSize: 10,
pageSize: 5,
},
});
}
@@ -228,10 +198,11 @@ export default function useWS() {
/**订阅通道组
*
* 指标UPF (GroupID:12)
* UE会话事件-AMF (GroupID:1010)
* CDR会话事件-IMS (GroupID:1005)
* AMF_UE会话事件(GroupID:1010)
* MME_UE会话事件(GroupID:1011)
* IMS_CDR会话事件(GroupID:1005)
*/
subGroupID: '12,1010,1005',
subGroupID: '12,1010,1011,1005',
},
onmessage: wsMessage,
onerror: wsError,
@@ -248,8 +219,7 @@ export default function useWS() {
return {
wsSend,
cdrEventSend,
ueEventSend,
userActivitySend,
upfTFSend,
};
}

9
src/views/dashboard/overview/index.vue
View File

@@ -9,7 +9,7 @@ import NeResources from './components/NeResources/index.vue';
import UserActivity from './components/UserActivity/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import UPFFlow from './components/UPFFlow/index.vue';
import { listSub } from '@/api/neUser/sub';
import { listUDMSub } from '@/api/neData/udm_sub';
import { listUENumBySMF } from '@/api/neUser/smf';
import { listUENumByIMS } from '@/api/neUser/ims';
import { listBase5G } from '@/api/neUser/base5G';
@@ -32,7 +32,7 @@ import useNeInfoStore from '@/store/modules/neinfo';
const router = useRouter();
const appStore = useAppStore();
const { t } = useI18n();
const { wsSend, cdrEventSend, ueEventSend, upfTFSend } = useWS();
const { wsSend, userActivitySend, upfTFSend } = useWS();
/**网元参数 */
let neOtions = ref<Record<string, any>[]>([]);
@@ -104,7 +104,7 @@ function fnGetNeState() {
/**获取概览信息 */
async function fnGetSkim() {
const resArr = await Promise.allSettled([
listSub({
listUDMSub({
neid: '001',
pageNum: 1,
pageSize: 1,
@@ -164,8 +164,7 @@ async function fnGetSkim() {
/**初始数据函数 */
function loadData() {
fnGetNeState(); // 获取网元状态
cdrEventSend();
ueEventSend();
userActivitySend();
upfTFSend(0);
upfTFSend(7);
upfTFSend(30);

785
src/views/dashboard/smfCDR/index.vue Normal file
View File

@@ -0,0 +1,785 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, onBeforeUnmount, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { Modal, message } 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 useI18n from '@/hooks/useI18n';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import {
delSMFDataCDR,
exportSMFDataCDR,
listSMFDataCDR,
} from '@/api/neData/smf';
import { parseDateToStr } from '@/utils/date-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import PQueue from 'p-queue';
import saveAs from 'file-saver';
const { t } = useI18n();
const ws = new WS();
const queue = new PQueue({ concurrency: 1, autoStart: true });
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: 'SMF',
neId: '001',
subscriberID: '',
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
/**结束时间 */
endTime: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
});
/**查询参数重置 */
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
subscriberID: '',
startTime: '',
endTime: '',
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**紧凑型 */
size: SizeType;
/**搜索栏 */
seached: boolean;
/**记录数据 */
data: object[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: true,
data: [],
selectedRowKeys: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('common.rowId'),
dataIndex: 'id',
align: 'center',
width: 100,
},
{
title: t('views.dashboard.cdr.smfChargingID'), // 计费ID
dataIndex: 'cdrJSON',
align: 'left',
width: 100,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.chargingID;
},
},
{
title: t('views.dashboard.cdr.smfSubscriptionIDType'), // 订阅 ID 类型
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.subscriberIdentifier?.subscriptionIDType;
},
},
{
title: t('views.dashboard.cdr.smfSubscriptionIDData'), // 订阅 ID 数据
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.subscriberIdentifier?.subscriptionIDData;
},
},
{
title: t('views.dashboard.cdr.smfDataVolumeUplink'), // 数据量上行链路
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
if (
!Array.isArray(listOfMultipleUnitUsage) ||
listOfMultipleUnitUsage.length < 1
) {
return 0;
}
const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
return 0;
}
return usedUnitContainer[0].dataVolumeUplink;
},
},
{
title: t('views.dashboard.cdr.smfDataVolumeDownlink'), // 数据量下行链路
dataIndex: 'cdrJSON',
align: 'left',
width: 180,
customRender(opt) {
const cdrJSON = opt.value;
const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
if (
!Array.isArray(listOfMultipleUnitUsage) ||
listOfMultipleUnitUsage.length < 1
) {
return 0;
}
const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
return 0;
}
return usedUnitContainer[0].dataVolumeDownlink;
},
},
{
title: t('views.dashboard.cdr.smfDataTotalVolume'), // 数据总量
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
if (
!Array.isArray(listOfMultipleUnitUsage) ||
listOfMultipleUnitUsage.length < 1
) {
return 0;
}
const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
return 0;
}
return usedUnitContainer[0].dataTotalVolume;
},
},
{
title: t('views.dashboard.cdr.smfDuration'), // 持续时间
dataIndex: 'cdrJSON',
align: 'left',
width: 100,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.duration;
},
},
{
title: t('views.dashboard.cdr.smfInvocationTime'), // 调用时间
dataIndex: 'cdrJSON',
align: 'left',
width: 250,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.invocationTimestamp;
},
},
{
title: t('common.operate'),
key: 'id',
align: 'left',
},
];
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 20,
/**默认的每页条数 */
defaultPageSize: 20,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: false,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
/**数据总数 */
total: 0,
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
onChange: (page: number, pageSize: number) => {
tablePagination.current = page;
tablePagination.pageSize = pageSize;
queryParams.pageNum = page;
queryParams.pageSize = pageSize;
fnGetList();
},
});
/**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格多选 */
function fnTableSelectedRowKeys(keys: (string | number)[]) {
tableState.selectedRowKeys = keys;
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**确定按钮 loading */
confirmLoading: boolean;
/**最大ID值 */
maxId: number;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
confirmLoading: false,
maxId: 0,
});
/**
* 记录删除
* @param id 编号
*/
function fnRecordDelete(id: string) {
if (!id || modalState.confirmLoading) return;
let msg = id;
if (id === '0') {
msg = `${id}... ${tableState.selectedRowKeys.length}`;
id = tableState.selectedRowKeys.join(',');
}
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.cdr.delTip', { msg }),
onOk() {
modalState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
delSMFDataCDR(id)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
fnGetList(1);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listSMFDataCDR(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
let cdrJSON = item.cdrJSON;
if (!cdrJSON) {
Reflect.set(item, 'cdrJSON', {});
}
try {
cdrJSON = JSON.parse(cdrJSON);
Reflect.set(item, 'cdrJSON', cdrJSON);
} catch (error) {
console.error(error);
Reflect.set(item, 'cdrJSON', {});
}
return item;
});
// 取最大值ID用作实时累加
if (res.total > 0) {
modalState.maxId = Number(res.rows[0].id);
}
}
tableState.loading = false;
});
}
/**列表导出 */
function fnExportList() {
if (modalState.confirmLoading) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.cdr.exportTip'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const querys = toRaw(queryParams);
querys.pageSize = 10000;
exportSMFDataCDR(querys)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
saveAs(res.data, `smf_cdr_event_export_${Date.now()}.xlsx`);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**实时数据开关 */
const realTimeData = ref<boolean>(false);
/**
* 实时数据
*/
function fnRealTime() {
realTimeData.value = !realTimeData.value;
if (realTimeData.value) {
// 建立链接
const options: OptionsType = {
url: '/ws',
params: {
/**订阅通道组
*
* CDR会话事件-SMF (GroupID:1006)
*/
subGroupID: '1006',
},
onmessage: wsMessage,
onerror: wsError,
};
ws.connect(options);
} else {
ws.close();
}
}
/**接收数据后回调 */
function wsError(ev: any) {
// 接收数据后回调
console.error(ev);
}
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// 订阅组信息
if (!data?.groupId) {
return;
}
// cdrEvent CDR会话事件
if (data.groupId === '1006') {
const cdrEvent = data.data;
queue.add(async () => {
modalState.maxId += 1;
tableState.data.unshift({
id: modalState.maxId,
neType: cdrEvent.neType,
neName: cdrEvent.neName,
rmUID: cdrEvent.rmUID,
timestamp: cdrEvent.timestamp,
cdrJSON: cdrEvent.CDR,
});
tablePagination.total += 1;
if (tableState.data.length > 100) {
tableState.data.pop();
}
await new Promise(resolve => setTimeout(resolve, 800));
});
}
}
onMounted(() => {
// 获取列表数据
fnGetList();
});
onBeforeUnmount(() => {
if (ws.state() !== -1) {
ws.close();
}
});
</script>
<template>
<PageContainer>
<a-card
v-show="tableState.seached"
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.smfSubscriptionIDData')"
name="calledParty "
>
<a-input
v-model:value="queryParams.subscriberID"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="40"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.time')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-popconfirm
placement="bottomLeft"
:title="
!realTimeData
? t('views.dashboard.cdr.realTimeDataStart')
: t('views.dashboard.cdr.realTimeDataStop')
"
ok-text="Yes"
cancel-text="No"
@confirm="fnRealTime()"
>
<a-button type="primary" :danger="realTimeData">
<template #icon><FundOutlined /> </template>
{{
!realTimeData
? t('views.dashboard.cdr.realTimeDataStart')
: t('views.dashboard.cdr.realTimeDataStop')
}}
</a-button>
</a-popconfirm>
<a-button
type="default"
danger
:disabled="tableState.selectedRowKeys.length <= 0"
:loading="modalState.confirmLoading"
@click.prevent="fnRecordDelete('0')"
>
<template #icon><DeleteOutlined /></template>
{{ t('common.deleteText') }}
</a-button>
<a-button type="dashed" @click.prevent="fnExportList()">
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</a-button>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
v-model:checked="tableState.seached"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click" placement="bottomRight">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
<template #overlay>
<a-menu
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-tooltip>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:pagination="tablePagination"
:scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
:row-selection="{
type: 'checkbox',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'id'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.deleteText') }}</template>
<a-button
type="link"
@click.prevent="fnRecordDelete(record.id)"
>
<template #icon>
<DeleteOutlined />
</template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
<template #expandedRowRender="{ record }">
<a-row :gutter="16">
<a-col :lg="8" :md="12" :xs="24" :offset="2">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.cdrInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.time') }}: </span>
<span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
</div>
<a-divider orientation="left">
{{ t('views.dashboard.cdr.rowInfo') }}
</a-divider>
<div>
<span>Record Network Function ID: </span>
<span>{{ record.cdrJSON.recordingNetworkFunctionID }}</span>
</div>
<div>
<span>Record Type: </span>
<span>{{ record.cdrJSON.recordType }}</span>
</div>
<div>
<span>Record Opening Time: </span>
<span>{{ record.cdrJSON.recordOpeningTime }}</span>
</div>
<div>
<span>Charging ID: </span>
<span>{{ record.cdrJSON.chargingID }}</span>
</div>
<div>
<span>Duration: </span>
<span>{{ record.cdrJSON.duration }}</span>
</div>
<a-divider orientation="left"> Subscriber Identifier </a-divider>
<div>
<span>Subscription ID Type: </span>
<span>
{{ record.cdrJSON.subscriberIdentifier?.subscriptionIDType }}
</span>
</div>
<div>
<span>Subscription ID Data: </span>
<span>
{{ record.cdrJSON.subscriberIdentifier?.subscriptionIDData }}
</span>
</div>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-divider orientation="left">
List Of Multiple Unit Usage
</a-divider>
<div v-for="u in record.cdrJSON.listOfMultipleUnitUsage">
<div>RatingGroup: {{ u.ratingGroup }}</div>
<div v-for="udata in u.usedUnitContainer">
<div>
<span>Data Total Volume: </span>
<span>{{ udata.dataTotalVolume }}</span>
</div>
<div>
<span>Data Volume Downlink: </span>
<span>{{ udata.dataVolumeDownlink }}</span>
</div>
<div>
<span>Data Volume Uplink: </span>
<span>{{ udata.dataVolumeUplink }}</span>
</div>
<div>
<span>Time: </span>
<span>{{ udata.time }}</span>
</div>
</div>
</div>
<a-divider orientation="left">
PDU Session Charging Information
</a-divider>
<div>
<span>User Identifier: </span>
<span>{{
record.cdrJSON.pDUSessionChargingInformation?.userIdentifier
}}</span>
</div>
<div>
<span>SSC Mode: </span>
<span>{{
record.cdrJSON.pDUSessionChargingInformation?.sSCMode
}}</span>
&nbsp;&nbsp;
<span>RAT Type: </span>
<span>{{
record.cdrJSON.pDUSessionChargingInformation?.rATType
}}</span>
&nbsp;&nbsp;
<span>DNN ID: </span>
<span>
{{ record.cdrJSON.pDUSessionChargingInformation?.dNNID }}
</span>
</div>
<div>
<span>PDU Type: </span>
<span>
{{ record.cdrJSON.pDUSessionChargingInformation?.pDUType }}
</span>
</div>
<div>
<span>PDU IPv4 Address: </span>
<span>
{{
record.cdrJSON.pDUSessionChargingInformation?.pDUAddress
?.pDUIPv4Address
}}
</span>
</div>
<div>
<span>PDU IPv6 Addres Swith Prefix: </span>
<span>
{{
record.cdrJSON.pDUSessionChargingInformation?.pDUAddress
?.pDUIPv6AddresswithPrefix
}}
</span>
</div>
</a-col>
</a-row>
</template>
</a-table>
</a-card>
</PageContainer>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>

55
src/views/faultManage/active-alarm/index.vue
View File

@@ -16,12 +16,14 @@ import {
exportAll,
} from '@/api/faultManage/actAlarm';
import useI18n from '@/hooks/useI18n';
import useNeInfoStore from '@/store/modules/neinfo';
import useDictStore from '@/store/modules/dict';
import saveAs from 'file-saver';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { writeSheet } from '@/utils/execl-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { readLoalXlsx } from '@/utils/execl-utils';
const neInfoStore = useNeInfoStore();
const { getDict } = useDictStore();
const { t, currentLocale } = useI18n();
@@ -741,6 +743,8 @@ onMounted(() => {
dict.activeAlarmSeverity = resArr[3].value;
}
});
// 获取网元网元列表
useNeInfoStore().fnNelist();
fnGetList();
});
</script>
@@ -758,9 +762,14 @@ onMounted(() => {
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.neType')"
name="ne_type"
name="neType"
>
<a-input v-model:value="queryParams.neType" allow-clear></a-input>
<a-auto-complete
v-model:value="queryParams.neType"
:options="neInfoStore.getNeSelectOtions"
allow-clear
:placeholder="t('common.inputPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -1036,15 +1045,17 @@ onMounted(() => {
</a-card>
<!-- 帮助文档 -->
<a-modal
width="100%"
wrap-class-name="full-modal"
<ProModal
:drag="true"
:forceFullscreen="true"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.helpShowView"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
:footer="null"
:body-style="{ padding: '0px' }"
:footer="false"
@cancel="fnModalCancel"
>
<a-table
@@ -1055,14 +1066,15 @@ onMounted(() => {
:data-source="alarmTableState.data"
:size="alarmTableState.size"
:pagination="false"
:scroll="{ x: 1700, y: '82vh' }"
:scroll="{ x: 1700, y: '88vh' }"
>
</a-table>
</a-modal>
</ProModal>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false"
:mask-closable="false"
@@ -1265,11 +1277,12 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</a-modal>
</ProModal>
<!-- 显示过滤框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByShowSet"
@@ -1286,11 +1299,12 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.neType')"
name="neType"
>
<a-input
<a-auto-complete
v-model:value="modalState.showSetFrom.ne_type"
:options="neInfoStore.getNeSelectOtions"
allow-clear
>
</a-input>
:placeholder="t('common.inputPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
@@ -1363,11 +1377,12 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</a-modal>
</ProModal>
<!-- 个性化设置框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByMyselfSet"
@@ -1461,7 +1476,7 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

23
src/views/faultManage/event/index.vue
View File

@@ -8,13 +8,14 @@ import { ColumnsType } from 'ant-design-vue/lib/table';
import { listAct, exportAll } from '@/api/faultManage/eventAlarm';
import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict';
import useNeInfoStore from '@/store/modules/neinfo';
import saveAs from 'file-saver';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { writeSheet } from '@/utils/execl-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { readLoalXlsx } from '@/utils/execl-utils';
const neInfoStore = useNeInfoStore();
const { getDict } = useDictStore();
const { t, currentLocale } = useI18n();
const { t } = useI18n();
/**字典数据 */
let dict: {
@@ -431,6 +432,8 @@ onMounted(() => {
dict.activeAlarmSeverity = resArr[3].value;
}
});
// 获取网元网元列表
useNeInfoStore().fnNelist();
fnGetList();
});
</script>
@@ -448,9 +451,14 @@ onMounted(() => {
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.faultManage.activeAlarm.neType')"
name="ne_type"
name="neType "
>
<a-input v-model:value="queryParams.neType" allow-clear></a-input>
<a-auto-complete
v-model:value="queryParams.neType"
:options="neInfoStore.getNeSelectOtions"
allow-clear
:placeholder="t('common.inputPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -665,8 +673,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false"
:mask-closable="false"
@@ -828,7 +837,7 @@ onMounted(() => {
{{ modalState.from.specificProblem }}
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

27
src/views/faultManage/fault-setting/index.vue
View File

@@ -94,7 +94,7 @@ function fnFormLogSetFinish() {
/**告警前转接口对象信息状态 */
let forwardState: ModalStateType = reactive({
title:t('views.faultManage.faultSetting.forwardSet'),
title: t('views.faultManage.faultSetting.forwardSet'),
from: {
interface: 'email',
emailObj: [],
@@ -128,11 +128,15 @@ function fnFormForwardFinish() {
forwardStateFrom.validate().then(() => {
forwardState.confirmLoading = true;
const from = toRaw(forwardState.from);
console.log(from);
updateForwardSet(from)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success( t('common.msgSuccess', { msg: t('views.faultManage.faultSetting.save')}), 3);
message.success(
t('common.msgSuccess', {
msg: t('views.faultManage.faultSetting.save'),
}),
3
);
} else {
message.warning(t('views.faultManage.faultSetting.noChange'), 3);
}
@@ -158,7 +162,6 @@ onMounted(() => {
if (resArr[1].status === 'fulfilled') {
const result = resArr[1].value;
if (result.code === RESULT_CODE_SUCCESS) {
console.log(result.data);
let finalData: any = {
emailObj: result.data[0]['to_user'],
smsObj: result.data[1]['to_user'],
@@ -273,12 +276,11 @@ onMounted(() => {
</a-button>
</a-space>
</template>
<a-form
name="forwardState"
layout="horizontal"
autocomplete="off"
>
<a-form-item :label="t('views.faultManage.faultSetting.interfaceType')" name="interface">
<a-form name="forwardState" layout="horizontal" autocomplete="off">
<a-form-item
:label="t('views.faultManage.faultSetting.interfaceType')"
name="interface"
>
<a-input value="Email" allow-clear disabled></a-input>
</a-form-item>
<a-form-item
@@ -292,7 +294,10 @@ onMounted(() => {
:token-separators="[',']"
></a-select>
</a-form-item>
<a-form-item :label="t('views.faultManage.faultSetting.interfaceType')" name="interface">
<a-form-item
:label="t('views.faultManage.faultSetting.interfaceType')"
name="interface"
>
<a-input value="SMS" allow-clear disabled></a-input>
</a-form-item>
<a-form-item

17
src/views/faultManage/history-alarm/index.vue
View File

@@ -13,9 +13,11 @@ import {
} from '@/api/faultManage/historyAlarm';
import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict';
import useNeInfoStore from '@/store/modules/neinfo';
import saveAs from 'file-saver';
import { writeSheet } from '@/utils/execl-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const neInfoStore = useNeInfoStore();
const { getDict } = useDictStore();
const { t } = useI18n();
@@ -555,6 +557,8 @@ onMounted(() => {
dict.activeAlarmSeverity = resArr[3].value;
}
});
// 获取网元网元列表
useNeInfoStore().fnNelist();
fnGetList();
});
</script>
@@ -574,10 +578,12 @@ onMounted(() => {
:label="t('views.faultManage.activeAlarm.neType')"
name="ne_type"
>
<a-input
<a-auto-complete
v-model:value="queryParams.ne_type"
:options="neInfoStore.getNeSelectOtions"
allow-clear
></a-input>
:placeholder="t('common.inputPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -818,8 +824,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false"
:mask-closable="false"
@@ -1036,7 +1043,7 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

21
src/views/monitor/job/index.vue
View File

@@ -551,7 +551,11 @@ function fnGetList(pageNum?: number) {
}
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -841,8 +845,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -949,11 +954,13 @@ onMounted(() => {
{{ t('common.close') }}
</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1110,7 +1117,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
<!-- 生成cron表达式 -->
<CronModal

17
src/views/monitor/job/log.vue
View File

@@ -373,12 +373,16 @@ function fnGetList(pageNum?: number) {
}
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
}
tableState.loading = false;
}
tableState.loading = false;
});
}
@@ -628,8 +632,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -728,7 +733,7 @@ onMounted(() => {
{{ t('common.close') }}
</a-button>
</template>
</a-modal>
</ProModal>
</PageContainer>
</template>

3
src/views/monitor/topology/graph.ts
View File

@@ -1566,9 +1566,6 @@ export function randerGroph(
collapseArray
);
break;
case 'restart':
console.log('restart');
break;
case 'show':
showItems(graph);
break;

3
src/views/monitor/topology/index.vue
View File

@@ -139,8 +139,7 @@ function fnGetList(refresh: boolean = false) {
}
})
.then(hasNeList => {
if (!hasNeList) return;
console.log(graphG6Data)
if (!hasNeList) return;
if (refresh) {
// graphG6.value.get('canvas').set('localRefresh', true);
graphG6.value.destroy();

8
src/views/monitor/topologyBuild/components/GraphEditModal.vue
View File

@@ -175,8 +175,10 @@ function fnModalCancel() {
</script>
<template>
<DraggableModal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
@@ -1269,7 +1271,7 @@ function fnModalCancel() {
</a-col>
</a-row>
</a-form>
</DraggableModal>
</ProModal>
</template>
<style lang="less" scoped></style>

4
src/views/monitor/topologyBuild/hooks/useEdge.ts
View File

@@ -173,9 +173,7 @@ export default function useEdge() {
edge.type = 'loop';
}
// 不存在fontWeight会触发异常
if(!edge.labelCfg.style.fontWeight){
console.log(edge)
debugger
if(!edge.labelCfg.style.fontWeight){
edge.labelCfg.style.fontWeight = 500
}
// 存在更新，新增id是#不监听变化

6
src/views/monitor/topologyBuild/hooks/useGraph.ts
View File

@@ -94,7 +94,7 @@ export default function useGraph() {
</div>`;
},
handleMenuClick(target, item) {
console.log(target, item);
// console.log(target, item);
const targetId = target.id;
switch (targetId) {
case 'create-edge':
@@ -223,7 +223,7 @@ export default function useGraph() {
`;
},
handleMenuClick(target, item) {
console.log(target, item);
// console.log(target, item);
const targetId = target.id;
switch (targetId) {
case 'edit':
@@ -302,7 +302,7 @@ export default function useGraph() {
`;
},
handleMenuClick(target, item) {
console.log(target, item);
// console.log(target, item);
const targetId = target.id;
switch (targetId) {
case 'edit':

8
src/views/monitor/topologyBuild/index.vue
View File

@@ -142,7 +142,7 @@ function fnModalOk() {
modalState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
// 根据类型选择函数
const groupName = from.group.trim()
const groupName = from.group.trim();
saveGraphData(groupName, graphG6.value.save())
.then((res: any) => {
if (res.code === RESULT_CODE_SUCCESS) {
@@ -325,8 +325,8 @@ onMounted(() => {
<GraphEditModal></GraphEditModal>
<!-- 图保存图组名修改框 -->
<a-modal
width="500px"
<ProModal
:drag="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visible"
@@ -359,7 +359,7 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

9
src/views/ne/neConfPara5G/components/Para5GForm.vue
View File

@@ -213,7 +213,7 @@ onMounted(() => {});
<a-row :gutter="16">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="EMS_IP"
label="OMC_IP"
name="sbi.omc_ip"
:required="true"
:validate-on-rule-change="false"
@@ -334,7 +334,12 @@ onMounted(() => {});
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col
:lg="12"
:md="12"
:xs="24"
v-if="state.from.external.upf_type === 'StandardUPF'"
>
<a-form-item label="N3_PCI" name="external.upfn3_pci">
<a-input
v-model:value="state.from.external.upfn3_pci"

7
src/views/ne/neConfPara5G/index.vue
View File

@@ -231,8 +231,9 @@ onMounted(() => {
</a-card>
<!-- 保存选择同步网元 -->
<a-modal
width="500px"
<ProModal
:drag="true"
:minHeight="0"
:keyboard="false"
:mask-closable="false"
:visible="state.visible"
@@ -281,7 +282,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

10
src/views/ne/neHost/index.vue
View File

@@ -414,7 +414,7 @@ function fnModalTest() {
const validateArr = ['title', 'addr', 'port', 'user'];
if (form.authMode === '0') {
validateArr.push('password');
}
}
if (form.authMode === '1') {
validateArr.push('privateKey');
}
@@ -626,8 +626,10 @@ onMounted(() => {
</a-table>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -828,7 +830,7 @@ onMounted(() => {
</a-button>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</a-card>
</PageContainer>
</template>

8
src/views/ne/neHostCommand/index.vue
View File

@@ -497,8 +497,10 @@ onMounted(() => {
</a-table>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -586,7 +588,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</a-card>
</PageContainer>
</template>

7
src/views/ne/neInfo/components/BackConfModal.vue
View File

@@ -244,8 +244,9 @@ defineExpose({
</script>
<template>
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -331,7 +332,7 @@ defineExpose({
</a-col>
</a-row>
</a-form>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped></style>

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

@@ -3,7 +3,6 @@ import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Form, Modal } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
@@ -124,9 +123,9 @@ let modalState: ModalStateType = reactive({
title: 'SSH_NE_22',
addr: '',
port: 22,
user: 'user',
authMode: '0',
password: 'user',
user: 'omcuser',
authMode: '2',
password: '',
privateKey: '',
passPhrase: '',
remark: '',
@@ -138,9 +137,9 @@ let modalState: ModalStateType = reactive({
title: 'Telnet_NE_4100',
addr: '',
port: 4100,
user: 'user',
user: 'admin',
authMode: '0',
password: 'user',
password: 'admin',
remark: '',
},
],
@@ -224,6 +223,12 @@ function fnModalVisibleByEdit(editId: string) {
modalState.confirmLoading = false;
hide();
if (res.code === RESULT_CODE_SUCCESS) {
// OMC没有telnet
if (res.data.neType === 'OMC') {
res.data.hosts = res.data.hosts.filter(
(s: any) => s.hostType === 'ssh'
);
}
Object.assign(modalState.from, res.data);
modalState.title = t('views.ne.neInfo.editTitle');
modalState.visibleByEdit = true;
@@ -250,9 +255,8 @@ function fnModalOk() {
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success(t('common.operateOk'), 3);
// 刷新缓存的网元信息
useNeInfoStore().fnRefreshNelist();
emit('ok');
// 返回无引用信息
emit('ok', JSON.parse(JSON.stringify(from)));
fnModalCancel();
} else {
message.error({
@@ -288,6 +292,10 @@ function fnModalCancel() {
*/
function fnNeTypeChange(v: any) {
const hostsLen = modalState.from.hosts.length;
// OMC没有telnet
if (hostsLen >= 2 && v === 'OMC') {
modalState.from.hosts.splice(1, hostsLen);
}
// 网元默认只含22和4100
if (hostsLen === 3 && v !== 'UPF') {
modalState.from.hosts.pop();
@@ -349,8 +357,10 @@ onMounted(() => {
</script>
<template>
<DraggableModal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
@@ -755,7 +765,7 @@ onMounted(() => {
</a-collapse-panel>
</a-collapse>
</a-form>
</DraggableModal>
</ProModal>
</template>
<style lang="less" scoped>

7
src/views/ne/neInfo/components/OAMModal.vue
View File

@@ -161,8 +161,9 @@ watch(
</script>
<template>
<DraggableModal
width="500px"
<ProModal
:drag="true"
:destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
@@ -290,7 +291,7 @@ watch(
</a-collapse-panel>
</a-collapse>
</a-form>
</DraggableModal>
</ProModal>
</template>
<style lang="less" scoped>

6
src/views/ne/neInfo/hooks/useNeOptions.ts
View File

@@ -4,12 +4,12 @@ import useI18n from '@/hooks/useI18n';
import { useRouter } from 'vue-router';
import { updateNeConfigReload } from '@/api/configManage/configParam';
import { serviceNeAction } from '@/api/ne/neInfo';
import useLockedStore from '@/store/modules/locked';
import useMaskStore from '@/store/modules/mask';
export default function useNeOptions() {
const router = useRouter();
const { t } = useI18n();
const lockedStore = useLockedStore();
const maskStore = useMaskStore();
/**
* 网元启动
@@ -60,7 +60,7 @@ export default function useNeOptions() {
// OMC自升级
if (row.neType.toUpperCase() === 'OMC') {
if (res.code === RESULT_CODE_SUCCESS) {
lockedStore.fnLock('reload');
maskStore.handleMaskType('reload');
} else {
message.error({
content: `${res.msg}`,

142
src/views/ne/neInfo/index.vue
View File

@@ -8,7 +8,7 @@ import { ColumnsType } from 'ant-design-vue/lib/table';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import { listNeInfo, delNeInfo } from '@/api/ne/neInfo';
import { listNeInfo, delNeInfo, stateNeInfo } from '@/api/ne/neInfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import useDictStore from '@/store/modules/dict';
import useNeOptions from './hooks/useNeOptions';
@@ -70,7 +70,7 @@ type TabeStateType = {
/**搜索栏 */
seached: boolean;
/**记录数据 */
data: object[];
data: Record<string, any>[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
@@ -219,8 +219,25 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
* 对话框弹出确认执行函数
* 进行表达规则校验
*/
function fnModalEditOk() {
fnGetList(1);
function fnModalEditOk(from: Record<string, any>) {
stateNeInfo(from.neType, from.neId)
.then(res => {
// 找到编辑更新的网元
const item = tableState.data.find(s => s.id === from.id);
if (item && res.code === RESULT_CODE_SUCCESS) {
item.neType = from.neType;
item.neId = from.neId;
item.ip = from.ip;
item.neName = from.neName;
item.status = res.data.online ? '1' : '0';
Object.assign(item.serverState, res.data);
const resouresUsage = parseResouresUsage(item.serverState);
Reflect.set(item, 'resoures', resouresUsage);
}
})
.finally(() => {
useNeInfoStore().fnRefreshNelist();
});
}
/**
@@ -243,6 +260,7 @@ function fnRecordDelete(id: string) {
let msg = t('views.ne.neInfo.delTip');
if (id === '0') {
msg = `${msg} ...${tableState.selectedRowKeys.length}`;
id = tableState.selectedRowKeys.join(',');
}
Modal.confirm({
@@ -255,7 +273,16 @@ function fnRecordDelete(id: string) {
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success(t('common.operateOk'), 3);
fnGetList(1);
// 过滤掉删除的id
tableState.data = tableState.data.filter(item => {
if (id.indexOf(',')) {
return !tableState.selectedRowKeys.includes(item.id);
} else {
return item.id != id;
}
});
// 刷新缓存
useNeInfoStore().fnRefreshNelist();
} else {
message.error({
content: `${res.msg}`,
@@ -330,56 +357,8 @@ function fnGetList(pageNum?: number) {
// 遍历处理资源情况数值
tableState.data = res.rows.map(item => {
const neState = item.serverState;
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (neState.cpu) {
nfCpuUsage = neState.cpu.nfCpuUsage;
if (nfCpuUsage > 100) {
const nfCpu = +(neState.cpu.nfCpuUsage / 100);
if (nfCpu > 100) {
nfCpuUsage = 100;
} else {
nfCpuUsage = +nfCpu.toFixed(2);
}
}
sysCpuUsage = neState.cpu.sysCpuUsage;
if (sysCpuUsage > 100) {
const sysCpu = +(neState.cpu.sysCpuUsage / 100);
if (sysCpu > 100) {
sysCpuUsage = 100;
} else {
sysCpuUsage = +sysCpu.toFixed(2);
}
}
}
let sysMemUsage = 0;
if (neState.mem) {
let men = neState.mem.sysMemUsage;
if (men > 100) {
men = +(men / 100).toFixed(2);
}
sysMemUsage = men;
}
let sysDiskUsage = 0;
if (neState.disk && Array.isArray(neState.disk.partitionInfo)) {
let disks: any[] = neState.disk.partitionInfo;
disks = disks.sort((a, b) => +b.used - +a.used);
if (disks.length > 0) {
const { total, used } = disks[0];
sysDiskUsage = +((used / total) * 100).toFixed(2);
}
}
Reflect.set(item, 'resoures', {
sysDiskUsage,
sysMemUsage,
sysCpuUsage,
nfCpuUsage,
});
const resouresUsage = parseResouresUsage(neState);
Reflect.set(item, 'resoures', resouresUsage);
return item;
});
}
@@ -387,6 +366,59 @@ function fnGetList(pageNum?: number) {
});
}
/**解析网元状态携带的资源利用率 */
function parseResouresUsage(neState: Record<string, any>) {
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (neState.cpu) {
nfCpuUsage = neState.cpu.nfCpuUsage;
if (nfCpuUsage > 100) {
const nfCpu = +(neState.cpu.nfCpuUsage / 100);
if (nfCpu > 100) {
nfCpuUsage = 100;
} else {
nfCpuUsage = +nfCpu.toFixed(2);
}
}
sysCpuUsage = neState.cpu.sysCpuUsage;
if (sysCpuUsage > 100) {
const sysCpu = +(neState.cpu.sysCpuUsage / 100);
if (sysCpu > 100) {
sysCpuUsage = 100;
} else {
sysCpuUsage = +sysCpu.toFixed(2);
}
}
}
let sysMemUsage = 0;
if (neState.mem) {
let men = neState.mem.sysMemUsage;
if (men > 100) {
men = +(men / 100).toFixed(2);
}
sysMemUsage = men;
}
let sysDiskUsage = 0;
if (neState.disk && Array.isArray(neState.disk.partitionInfo)) {
let disks: any[] = neState.disk.partitionInfo;
disks = disks.sort((a, b) => +b.used - +a.used);
if (disks.length > 0) {
const { total, used } = disks[0];
sysDiskUsage = +((used / total) * 100).toFixed(2);
}
}
return {
sysDiskUsage,
sysMemUsage,
sysCpuUsage,
nfCpuUsage,
};
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('ne_info_status')]).then(resArr => {

8
src/views/ne/neLicense/components/EditModal.vue
View File

@@ -282,8 +282,10 @@ onMounted(() => {});
</script>
<template>
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -387,7 +389,7 @@ onMounted(() => {});
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped></style>

7
src/views/ne/neLicense/components/UploadLicenseFile.vue
View File

@@ -185,8 +185,9 @@ onMounted(() => {});
</script>
<template>
<a-modal
width="500px"
<ProModal
:drag="true"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByUploadFile"
@@ -242,7 +243,7 @@ onMounted(() => {});
</a-upload>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped></style>

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

@@ -64,9 +64,9 @@ let modalState: ModalStateType = reactive({
title: 'SSH_NE_22',
addr: '',
port: 22,
user: 'user',
authMode: '0',
password: 'user',
user: 'omcuser',
authMode: '2',
password: '',
privateKey: '',
passPhrase: '',
remark: '',

8
src/views/ne/neSoftware/components/EditModal.vue
View File

@@ -344,8 +344,10 @@ onMounted(() => {});
</script>
<template>
<a-modal
width="550px"
<ProModal
:drag="true"
:width="650"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -464,7 +466,7 @@ onMounted(() => {});
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped></style>

28
src/views/ne/neSoftware/components/UploadMoreFile.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Upload, notification } from 'ant-design-vue/lib';
import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import type { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { NE_TYPE_LIST, NE_EXPAND_LIST } from '@/constants/ne-constants';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import { addNeSoftware } from '@/api/ne/neSoftware';
import { FileType } from 'ant-design-vue/lib/upload/interface';
import { uploadFileChunk } from '@/api/tool/file';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
@@ -230,6 +230,20 @@ function fnBeforeUploadFile(file: FileType) {
return true;
}
/**表单上传前删除 */
function fnBeforeRemoveFile(file: UploadFile) {
const fileName = file.name;
// 取网元类型判断是否支持
let neType = '';
const neTypeIndex = fileName.indexOf('-');
if (neTypeIndex !== -1) {
neType = fileName.substring(0, neTypeIndex).toUpperCase();
}
const idx = modalState.from.findIndex(item => item.neType === neType);
modalState.from.splice(idx, 1);
return true;
}
/**表单上传文件 */
function fnUploadFile(up: UploadRequestOption) {
const uploadFile = modalState.uploadFiles.find(
@@ -338,7 +352,7 @@ watch(
() => props.visible,
val => {
if (val) {
modalState.title = t('views.ne.neSoftware.uploadBatch');
modalState.title = t('views.ne.neSoftware.uploadTitle');
modalState.visibleByMoreFile = true;
}
}
@@ -348,8 +362,9 @@ onMounted(() => {});
</script>
<template>
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByMoreFile"
@@ -464,6 +479,7 @@ onMounted(() => {});
showRemoveIcon: true,
showDownloadIcon: false,
}"
:remove="fnBeforeRemoveFile"
:before-upload="fnBeforeUploadFile"
:custom-request="fnUploadFile"
:disabled="modalState.confirmLoading"
@@ -478,7 +494,7 @@ onMounted(() => {});
</a-form-item>
</template>
</a-form>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped></style>

41
src/views/ne/neVersion/index.vue
View File

@@ -1,7 +1,12 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { Modal, TableColumnsType, message } from 'ant-design-vue/lib';
import {
Modal,
TableColumnsType,
message,
notification,
} 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 useNeInfoStore from '@/store/modules/neinfo';
@@ -11,8 +16,8 @@ import { listNeVersion, operateNeVersion } from '@/api/ne/neVersion';
import { parseDateToStr } from '@/utils/date-utils';
import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict';
import useLockedStore from '@/store/modules/locked';
const lockedStore = useLockedStore();
import useMaskStore from '@/store/modules/mask';
const maskStore = useMaskStore();
const { t } = useI18n();
const { getDict } = useDictStore();
@@ -311,7 +316,13 @@ function fnRecordVersion(
onOk() {
if (modalState.confirmLoading) return;
modalState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
const notificationKey = 'NE_VERSION_' + action;
notification.info({
key: notificationKey,
message: t('common.tipTitle'),
description: `${row.neType} ${t('common.loading')}`,
duration: 0,
});
let preinput = {};
if (row.neType.toUpperCase() === 'IMS') {
preinput = { pisCSCF: 'y', updateMFetc: 'No', updateMFshare: 'No' };
@@ -327,7 +338,7 @@ function fnRecordVersion(
// OMC自升级
if (row.neType.toUpperCase() === 'OMC') {
if (res.code === RESULT_CODE_SUCCESS) {
lockedStore.fnLock('reload');
maskStore.handleMaskType('reload');
} else {
message.error(t('views.ne.neVersion.upgradeFail'), 3);
}
@@ -339,7 +350,7 @@ function fnRecordVersion(
}
})
.finally(() => {
hide();
notification.close(notificationKey);
modalState.confirmLoading = false;
});
},
@@ -376,6 +387,16 @@ async function fnRecordUpgrade() {
});
continue;
}
// OMC跳过操作
if (row.neType.toUpperCase() === 'OMC') {
modalState.operateDataUpgrade.push({
neType: row.neType,
neId: row.neId,
status: 'fail',
log: t('views.ne.neVersion.upgradeOMCVer'),
});
continue;
}
// 开始升级
let preinput = {};
if (row.neType.toUpperCase() === 'IMS') {
@@ -636,8 +657,10 @@ onMounted(() => {
></UploadMoreFile>
<!-- 勾选网元版本进行升级框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false"
:mask-closable="false"
@@ -684,7 +707,7 @@ onMounted(() => {
</template>
</a-alert>
</p>
</a-modal>
</ProModal>
</PageContainer>
</template>

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

@@ -7,22 +7,23 @@ import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import UploadModal from '@/components/UploadModal/index.vue';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import {
listAuth,
getAuth,
updateAuth,
addAuth,
delAuth,
loadAuth,
exportAuth,
importAuthData,
batchAuth,
batchDelAuth,
} from '@/api/neUser/auth';
import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { saveAs } from 'file-saver';
import {
addUDMAuth,
updateUDMAuth,
batchAddUDMAuth,
batchDelUDMAuth,
delUDMAuth,
getUDMAuth,
exportUDMAuth,
importUDMAuth,
resetUDMAuth,
listUDMAuth,
} from '@/api/neData/udm_auth';
import { uploadFile } from '@/api/tool/file';
const { t } = useI18n();
/**网元参数 */
@@ -82,7 +83,7 @@ let tableState: TabeStateType = reactive({
});
/**表格字段列 */
let tableColumns: ColumnsType = [
let tableColumns = ref<ColumnsType>([
{
title: 'IMSI',
dataIndex: 'imsi',
@@ -125,7 +126,7 @@ let tableColumns: ColumnsType = [
key: 'imsi',
align: 'left',
},
];
]);
/**表格字段列排序 */
let tableColumnsDnd = ref<ColumnsType>([]);
@@ -291,8 +292,8 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
modalState.confirmLoading = true;
const neID = queryParams.neId || '-';
getAuth(neID, row.imsi)
const neId = queryParams.neId || '-';
getUDMAuth(neId, row.imsi)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
modalState.from = Object.assign(modalState.from, res.data);
@@ -340,7 +341,7 @@ function fnModalOk() {
const from = toRaw(modalState.from);
from.neId = queryParams.neId || '-';
from.algoIndex = `${from.algoIndex}`;
const result = from.id ? updateAuth(from) : addAuth(from);
const result = from.id ? updateUDMAuth(from) : addUDMAuth(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
@@ -379,31 +380,35 @@ function fnBatchModalOk() {
.then(e => {
modalState.confirmLoading = true;
const from = toRaw(modalState.BatchForm);
from.neID = queryParams.neId || '-';
from.neId = queryParams.neId || '-';
from.algoIndex = `${from.algoIndex}`;
const result = batchAuth(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
const result = batchAddUDMAuth(from, from.num);
result.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const timerS = Math.max(
Math.ceil(+from.num / 500),
`${from.num}`.length
);
notification.success({
message: modalState.title,
description: t('common.operateOk'),
duration: timerS,
});
setTimeout(() => {
modalState.confirmLoading = false;
modalState.visibleByBatch = false;
modalStateBatchFrom.resetFields();
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
fnGetList(1);
}, timerS * 1000);
} else {
modalState.confirmLoading = false;
});
notification.error({
message: modalState.title,
description: res.msg,
duration: 3,
});
}
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
@@ -420,33 +425,30 @@ function fnBatchDelModalOk() {
.then(e => {
modalState.confirmLoading = true;
const from = toRaw(modalState.BatchDelForm);
const neID = queryParams.neId || '-';
// const result = from.id ? updateAuth(from) : addAuth(neID, from);
from.neID = neID;
const result = batchDelAuth(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
const neId = queryParams.neId || '-';
batchDelUDMAuth(neId, from.imsi, from.num).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const timerS = Math.ceil(+from.num / 1500) + 1;
notification.success({
message: modalState.title,
description: t('common.operateOk'),
duration: timerS,
});
setTimeout(() => {
modalState.visibleByBatchDel = false;
modalState.confirmLoading = false;
modalStateBatchDelFrom.resetFields();
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
fnGetList(1);
}, timerS * 1000);
} else {
modalState.confirmLoading = false;
});
notification.error({
message: modalState.title,
description: res.msg,
duration: 3,
});
}
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
@@ -485,8 +487,8 @@ function fnModalCancel() {
* @param imsi 编号imsi
*/
function fnRecordDelete(imsi: string) {
const neID = queryParams.neId;
if (!neID) return;
const neId = queryParams.neId;
if (!neId) return;
let imsiMsg = imsi;
if (imsi === '0') {
imsiMsg = `${tableState.selectedRowKeys[0]}... ${t(
@@ -501,7 +503,7 @@ function fnRecordDelete(imsi: string) {
onOk() {
modalState.loadDataLoading = true;
const hide = message.loading(t('common.loading'), 0);
delAuth(neID, imsi)
delUDMAuth(neId, imsi)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const msgContent = t('common.msgSuccess', {
@@ -557,56 +559,50 @@ function fnRecordExport(type: string = 'txt') {
/**列表导出 */
function fnExportList(type: string) {
const neID = queryParams.neId;
if (!neID) return;
const key = 'exportAuth';
message.loading({ content: t('common.loading'), key });
exportAuth({
neId: neID,
const neId = queryParams.neId;
if (!neId) return;
const hide = message.loading(t('common.loading'), 0);
exportUDMAuth({
neId: neId,
type: type,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: t('common.export') }),
key,
duration: 2,
});
saveAs(res.data, `UDMAuth_${Date.now()}.${type}`);
} else {
message.error({
content: `${res.msg}`,
key,
duration: 2,
});
}
});
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success(t('common.msgSuccess', { msg: t('common.export') }), 3);
saveAs(res.data, `UDMAuth_${Date.now()}.${type}`);
} else {
message.error(`${res.msg}`, 3);
}
})
.finally(() => {
hide();
});
}
/**重新加载数据 */
function fnLoadData() {
const neID = queryParams.neId;
if (tableState.loading || !neID) return;
const neId = queryParams.neId;
if (tableState.loading || !neId) return;
modalState.loadDataLoading = true;
tablePagination.total = 0;
tableState.data = [];
tableState.loading = true; // 表格loading
loadAuth(neID).then(res => {
resetUDMAuth(neId).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const num = res.data;
const timerS = Math.ceil(+num / 2500) + 1;
notification.success({
message: t('views.neUser.auth.loadData'),
description: t('views.neUser.auth.loadDataTip', { num }),
duration: num < 10_0000 ? 10 : 30,
duration: timerS,
});
// 延迟10s后关闭loading刷新列表
setTimeout(
() => {
modalState.loadDataLoading = false;
tableState.loading = false; // 表格loading
fnQueryReset();
},
num < 10_0000 ? 10_000 : 30_000
);
setTimeout(() => {
modalState.loadDataLoading = false;
tableState.loading = false; // 表格loading
fnQueryReset();
}, timerS * 1000);
} else {
message.error({
content: t('common.getInfoFail'),
@@ -624,7 +620,7 @@ function fnGetList(pageNum?: number) {
queryParams.pageNum = pageNum;
tablePagination.current = pageNum;
}
listAuth(toRaw(queryParams)).then(res => {
listUDMAuth(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
@@ -675,26 +671,42 @@ function fnModalUploadImportOpen() {
/**对话框表格信息导入关闭窗口 */
function fnModalUploadImportClose() {
uploadImportState.visible = false;
fnGetList();
fnGetList(1);
}
/**对话框表格信息导入上传 */
function fnModalUploadImportUpload(file: File) {
const neID = queryParams.neId;
if (!neID) {
const neId = queryParams.neId;
if (!neId) {
return Promise.reject('Unknown network element');
}
let formData = new FormData();
formData.append('file', file);
formData.append('neId', neID);
const hide = message.loading(t('common.loading'), 0);
uploadImportState.loading = true;
importAuthData(formData)
// 上传文件
let formData = new FormData();
formData.append('file', file);
formData.append('subPath', 'import');
uploadFile(formData)
.then(res => {
uploadImportState.msg = res.msg;
if (res.code === RESULT_CODE_SUCCESS) {
return res.data.fileName;
} else {
uploadImportState.msg = res.msg;
uploadImportState.loading = false;
return '';
}
})
.catch((err: { code: number; msg: string }) => {
message.error(` ${err.msg}`);
.then((filePath: string) => {
if (!filePath) return;
// 文件导入
return importUDMAuth({
neId: neId,
uploadPath: filePath,
});
})
.then(res => {
if (!res) return;
uploadImportState.msg = res.msg;
})
.finally(() => {
hide();
@@ -755,7 +767,11 @@ onMounted(() => {
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="IMSI" name="imsi">
<a-input v-model:value="queryParams.imsi" allow-clear></a-input>
<a-input
v-model:value="queryParams.imsi"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -982,8 +998,10 @@ onMounted(() => {
</a-card>
<!-- 新增框或修改框 -->
<DraggableModal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1132,11 +1150,13 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</DraggableModal>
</ProModal>
<!-- 批量新增框 -->
<DraggableModal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByBatch"
@@ -1162,8 +1182,8 @@ onMounted(() => {
v-model:value="modalState.BatchForm.num"
style="width: 100%"
:min="1"
:max="100000"
placeholder="<=100000"
:max="10000"
placeholder="<=10000"
></a-input-number>
</a-form-item>
</a-col>
@@ -1297,11 +1317,12 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</DraggableModal>
</ProModal>
<!-- 批量删除框 -->
<DraggableModal
width="500px"
<ProModal
:drag="true"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByBatchDel"
@@ -1348,14 +1369,14 @@ onMounted(() => {
v-model:value="modalState.BatchDelForm.num"
style="width: 100%"
:min="1"
:max="100000"
placeholder="<=100000"
:max="10000"
placeholder="<=10000"
></a-input-number>
</a-form-item>
</a-col>
</a-row>
</a-form>
</DraggableModal>
</ProModal>
<!-- 上传导入表格数据文件框 -->
<UploadModal
@@ -1365,6 +1386,7 @@ onMounted(() => {
@close="fnModalUploadImportClose"
v-model:visible="uploadImportState.visible"
:ext="['.txt']"
:size="10"
>
<template #default>
<a-textarea

1
src/views/neUser/nssfAmf/index.vue
View File

@@ -64,7 +64,6 @@ function fnGetList(pageNum?: number) {
tableState.loading = true;
listNSSFAMF().then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
console.log(res.rows);
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];

10
src/views/neUser/pcf/index.vue
View File

@@ -300,7 +300,6 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
sessRules = [sessRules];
}
modalState.from.sessRules = sessRules;
console.log(modalState.from);
modalState.title = t('views.neUser.pcf.updateTitle', {
imsi: row.imsi,
@@ -327,7 +326,6 @@ function fnModalOk() {
const from = JSON.parse(JSON.stringify(modalState.from));
from.neId = queryParams.neId || '-';
from.rfsp = Number(from.rfsp) || 0;
console.log(from);
let pccRules = modalState.from.pccRules;
if (Array.isArray(pccRules)) {
pccRules = pccRules.join('|');
@@ -886,8 +884,10 @@ onMounted(() => {
</a-card>
<!-- 新增框或修改框 -->
<DraggableModal
:width="modalState.type === 'delete' ? '500px' : '800px'"
<ProModal
:drag="true"
:width="modalState.type === 'delete' ? 520 : 800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1127,7 +1127,7 @@ onMounted(() => {
</a-row>
</template>
</a-form>
</DraggableModal>
</ProModal>
<!-- 上传导入表格数据文件框 -->
<UploadModal

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

@@ -7,25 +7,34 @@ import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import UploadModal from '@/components/UploadModal/index.vue';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import {
loadSub,
listSub,
getSub,
updateSub,
addSub,
delSub,
importSubData,
exportSub,
batchAddSub,
batchDelSub,
} from '@/api/neUser/sub';
import useNeInfoStore from '@/store/modules/neinfo';
import useDictStore from '@/store/modules/dict';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import saveAs from 'file-saver';
import useUserStore from '@/store/modules/user';
import {
addUDMSub,
batchAddUDMSub,
batchDelUDMSub,
delUDMSub,
exportUDMSub,
getUDMSub,
importUDMSub,
listUDMSub,
resetUDMSub,
updateUDMSub,
} from '@/api/neData/udm_sub';
import { uploadFile } from '@/api/tool/file';
const { t } = useI18n();
const { getDict } = useDictStore();
/**字典数据 */
let dict: {
/**CN Type可选类型 */
udmSubCNType: DictType[];
} = reactive({
udmSubCNType: [],
});
/**网元参数 */
let neOtions = ref<Record<string, any>[]>([]);
@@ -90,7 +99,7 @@ let tableState: TabeStateType = reactive({
});
/**表格字段列 */
let tableColumns: ColumnsType = [
let tableColumns = ref<ColumnsType>([
{
title: 'IMSI',
dataIndex: 'imsi',
@@ -143,6 +152,7 @@ let tableColumns: ColumnsType = [
{
title: 'CN Type',
dataIndex: 'cn',
key: 'cn',
align: 'center',
width: 100,
},
@@ -176,7 +186,7 @@ let tableColumns: ColumnsType = [
fixed: 'right',
width: 100,
},
];
]);
/**表格字段列排序 */
let tableColumnsDnd = ref<ColumnsType>([]);
@@ -263,7 +273,7 @@ let modalState: ModalStateType = reactive({
visibleByBatchDel: false,
title: 'UDM签约用户',
from: {
id: '',
id: undefined,
msisdn: '',
imsi: '',
ambr: 'def_ambr',
@@ -288,7 +298,7 @@ let modalState: ModalStateType = reactive({
ueType: 1,
},
BatchForm: {
num: '',
num: 1,
msisdn: '',
imsi: '',
ambr: 'def_ambr',
@@ -313,7 +323,7 @@ let modalState: ModalStateType = reactive({
ueType: 1,
},
BatchDelForm: {
num: '',
num: 1,
imsi: '',
},
confirmLoading: false,
@@ -432,8 +442,8 @@ function fnModalVisibleByEdit(imsi?: string) {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
modalState.confirmLoading = true;
const neID = queryParams.neId || '-';
getSub(neID, imsi)
const neId = queryParams.neId || '-';
getUDMSub(neId, imsi)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
transformFormData(res.data.smData);
@@ -659,8 +669,8 @@ function fnModalOk() {
.map((item: number) => `${item}`.padStart(2, '0'))
.join('');
const neID = queryParams.neId || '-';
const result = from.id ? updateSub(neID, from) : addSub(neID, from);
from.neId = queryParams.neId || '-';
const result = from.id ? updateUDMSub(from) : addUDMSub(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
@@ -747,29 +757,32 @@ function fnBatchModalOk() {
.map((item: number) => `${item}`.padStart(2, '0'))
.join('');
const neID = queryParams.neId || '-';
from.neID = neID;
const hide = message.loading(t('common.loading'), 0);
batchAddSub(from)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
fnBatchModalCancel();
from.neId = queryParams.neId || '-';
batchAddUDMSub(from, from.num).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const timerS = Math.max(
Math.ceil(+from.num / 500),
`${from.num}`.length * 5
);
notification.success({
message: modalState.title,
description: t('common.operateOk'),
duration: timerS,
});
setTimeout(() => {
fnBatchModalCancel();
modalState.confirmLoading = false;
fnGetList(1);
}, timerS * 1000);
} else {
modalState.confirmLoading = false;
});
notification.error({
message: modalState.title,
description: res.msg,
duration: 3,
});
}
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
@@ -800,29 +813,30 @@ function fnBatchDelModalOk() {
.then(e => {
modalState.confirmLoading = true;
const from = toRaw(modalState.BatchDelForm);
from.neID = queryParams.neId || '-';
const hide = message.loading(t('common.loading'), 0);
batchDelSub(from)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
const neId = queryParams.neId || '-';
batchDelUDMSub(neId, from.imsi, from.num).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const timerS = Math.ceil(+from.num / 1500) + 1;
notification.success({
message: modalState.title,
description: t('common.operateOk'),
duration: timerS,
});
setTimeout(() => {
modalState.visibleByBatchDel = false;
modalState.confirmLoading = false;
modalStateBatchDelFrom.resetFields();
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
fnGetList(1);
}, timerS * 1000);
} else {
modalState.confirmLoading = false;
});
notification.error({
message: modalState.title,
description: res.msg,
duration: 3,
});
}
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
@@ -908,8 +922,8 @@ function fnBatchDelModalCancel() {
* @param imsi 编号imsi
*/
function fnRecordDelete(imsi: string) {
const neID = queryParams.neId;
if (!neID) return;
const neId = queryParams.neId;
if (!neId) return;
let imsiMsg = imsi;
if (imsi === '0') {
imsiMsg = `${tableState.selectedRowKeys[0]}... ${t(
@@ -924,7 +938,7 @@ function fnRecordDelete(imsi: string) {
onOk() {
modalState.loadDataLoading = true;
const hide = message.loading(t('common.loading'), 0);
delSub(neID, imsi)
delUDMSub(neId, imsi)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const msgContent = t('common.msgSuccess', {
@@ -1001,12 +1015,12 @@ function fnRecordExport(type: string = 'txt') {
/**列表导出 */
function fnExportList(type: string) {
const neID = queryParams.neId;
if (!neID) return;
const neId = queryParams.neId;
if (!neId) return;
const key = 'exportSub';
message.loading({ content: t('common.loading'), key });
exportSub({
neId: neID,
exportUDMSub({
neId: neId,
type: type,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
@@ -1028,29 +1042,27 @@ function fnExportList(type: string) {
/**重新加载数据 */
function fnLoadData() {
const neID = queryParams.neId;
if (tableState.loading || !neID) return;
const neId = queryParams.neId;
if (tableState.loading || !neId) return;
modalState.loadDataLoading = true;
tablePagination.total = 0;
tableState.data = [];
tableState.loading = true; // 表格loading
loadSub(neID).then(res => {
resetUDMSub(neId).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const num = res.data;
const timerS = Math.ceil(+num / 1500) + 1;
notification.success({
message: t('views.neUser.sub.loadData'),
description: t('views.neUser.sub.loadDataTip', { num }),
duration: num < 10_0000 ? 10 : 30,
duration: timerS,
});
// 延迟20s后关闭loading刷新列表
setTimeout(
() => {
modalState.loadDataLoading = false;
tableState.loading = false; // 表格loading
fnQueryReset();
},
num < 10_0000 ? 10_000 : 30_000
);
setTimeout(() => {
modalState.loadDataLoading = false;
tableState.loading = false; // 表格loading
fnQueryReset();
}, timerS * 1000);
} else {
message.error({
content: t('common.getInfoFail'),
@@ -1068,10 +1080,7 @@ function fnGetList(pageNum?: number) {
queryParams.pageNum = pageNum;
tablePagination.current = pageNum;
}
const selectFrom = Object.assign({}, toRaw(queryParams));
listSub(selectFrom).then(res => {
listUDMSub(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
@@ -1128,21 +1137,37 @@ function fnModalUploadImportClose() {
/**对话框表格信息导入上传 */
function fnModalUploadImportUpload(file: File) {
const neID = queryParams.neId;
if (!neID) {
const neId = queryParams.neId;
if (!neId) {
return Promise.reject('Unknown network element');
}
let formData = new FormData();
formData.append('file', file);
formData.append('neId', neID);
const hide = message.loading(t('common.loading'), 0);
uploadImportState.loading = true;
importSubData(formData)
// 上传文件
let formData = new FormData();
formData.append('file', file);
formData.append('subPath', 'import');
uploadFile(formData)
.then(res => {
uploadImportState.msg = res.msg;
if (res.code === RESULT_CODE_SUCCESS) {
return res.data.fileName;
} else {
uploadImportState.msg = res.msg;
uploadImportState.loading = false;
return '';
}
})
.catch((err: { code: number; msg: string }) => {
message.error(` ${err.msg}`);
.then((filePath: string) => {
if (!filePath) return;
// 文件导入
return importUDMSub({
neId: neId,
uploadPath: filePath,
});
})
.then(res => {
if (!res) return;
uploadImportState.msg = res.msg;
})
.finally(() => {
hide();
@@ -1186,6 +1211,13 @@ function delBigRow(bigIndex: any) {
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('udm_sub_cn_type')]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.udmSubCNType = resArr[0].value;
}
});
// 获取网元网元列表
useNeInfoStore()
.fnNelist()
@@ -1231,19 +1263,27 @@ onMounted(() => {
<a-form-item :label="t('views.neUser.sub.neType')" name="neId ">
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:options="dict.udmSubCNType"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="IMSI" name="imsi">
<a-input v-model:value="queryParams.imsi" allow-clear></a-input>
<a-input
v-model:value="queryParams.imsi"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="MSISDN" name="msisdn">
<a-input v-model:value="queryParams.msisdn" allow-clear></a-input>
<a-input
v-model:value="queryParams.msisdn"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -1459,6 +1499,9 @@ onMounted(() => {
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'cn'">
<DictTag :options="dict.udmSubCNType" :value="record.cn" />
</template>
<template v-if="column.key === 'imsi'">
<a-space :size="8" align="center">
<a-tooltip>
@@ -1490,9 +1533,11 @@ onMounted(() => {
</a-card>
<!-- 新增框或修改框 -->
<DraggableModal
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
style="top: 0px"
width="800px"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
@@ -1513,7 +1558,6 @@ onMounted(() => {
<a-form-item
label="IMSI"
name="imsi"
:label-col="{ span: 5 }"
v-bind="modalStateFrom.validateInfos.imsi"
>
<a-input v-model:value="modalState.from.imsi" allow-clear>
@@ -1530,6 +1574,13 @@ onMounted(() => {
</template>
</a-input>
</a-form-item>
<a-form-item label="CN Type" name="cn">
<a-select
v-model:value="modalState.from.cn"
:options="dict.udmSubCNType"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
@@ -1554,8 +1605,10 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left"
>Subscribed SM Data
<!-- SM Data ---- S -->
<a-divider orientation="left">
Subscribed SM Data
<a-tooltip title="Add SM Data">
<a-button
shape="circle"
@@ -1658,6 +1711,8 @@ onMounted(() => {
</a-row>
</div>
</div>
<!-- SM Data ---- E -->
<a-collapse :bordered="false" ghost>
<a-collapse-panel key="5G">
<template #header>
@@ -1673,12 +1728,12 @@ onMounted(() => {
<a-input
v-model:value="modalState.from.ambr"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.neUser.sub.inputTip', { num: '16' }) }}
{{ t('views.neUser.sub.inputTip', { num: '50' }) }}
</template>
<InfoCircleOutlined
style="color: rgba(0, 0, 0, 0.45)"
@@ -1697,12 +1752,12 @@ onMounted(() => {
<a-input
v-model:value="modalState.from.nssai"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.neUser.sub.inputTip', { num: '16' }) }}
{{ t('views.neUser.sub.inputTip', { num: '50' }) }}
</template>
<InfoCircleOutlined
style="color: rgba(0, 0, 0, 0.45)"
@@ -1723,12 +1778,12 @@ onMounted(() => {
<a-input
v-model:value="modalState.from.smfSel"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.neUser.sub.inputTip', { num: '16' }) }}
{{ t('views.neUser.sub.inputTip', { num: '50' }) }}
</template>
<InfoCircleOutlined
style="color: rgba(0, 0, 0, 0.45)"
@@ -1743,7 +1798,7 @@ onMounted(() => {
<a-input
v-model:value="modalState.from.arfb"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
@@ -1769,7 +1824,7 @@ onMounted(() => {
<a-input
v-model:value="modalState.from.sar"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
@@ -1881,12 +1936,12 @@ onMounted(() => {
<a-input
v-model:value="modalState.from.epstpl"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.neUser.sub.inputTip', { num: '16' }) }}
{{ t('views.neUser.sub.inputTip', { num: '50' }) }}
</template>
<InfoCircleOutlined
style="color: rgba(0, 0, 0, 0.45)"
@@ -2005,12 +2060,14 @@ onMounted(() => {
</a-collapse-panel>
</a-collapse>
</a-form>
</DraggableModal>
</ProModal>
<!-- 批量增加框 -->
<DraggableModal
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
style="top: 0px"
width="800px"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
@@ -2037,8 +2094,8 @@ onMounted(() => {
v-model:value="modalState.BatchForm.num"
style="width: 100%"
:min="1"
:max="100000"
placeholder="<=100000"
:max="10000"
placeholder="<=10000"
></a-input-number>
</a-form-item>
</a-col>
@@ -2064,6 +2121,13 @@ onMounted(() => {
</template>
</a-input>
</a-form-item>
<a-form-item label="CN Type" name="cn">
<a-select
v-model:value="modalState.BatchForm.cn"
:options="dict.udmSubCNType"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
@@ -2088,8 +2152,10 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left"
>Subscribed SM Data
<!-- SM Data ---- S -->
<a-divider orientation="left">
Subscribed SM Data
<a-tooltip title="Add SM Data">
<a-button
shape="circle"
@@ -2192,6 +2258,7 @@ onMounted(() => {
</a-row>
</div>
</div>
<!-- SM Data ---- E -->
<a-collapse :bordered="false" ghost>
<a-collapse-panel key="5G">
@@ -2209,12 +2276,12 @@ onMounted(() => {
<a-input
v-model:value="modalState.BatchForm.ambr"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.neUser.sub.inputTip', { num: '16' }) }}
{{ t('views.neUser.sub.inputTip', { num: '50' }) }}
</template>
<InfoCircleOutlined
style="color: rgba(0, 0, 0, 0.45)"
@@ -2233,12 +2300,12 @@ onMounted(() => {
<a-input
v-model:value="modalState.BatchForm.nssai"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.neUser.sub.inputTip', { num: '16' }) }}
{{ t('views.neUser.sub.inputTip', { num: '50' }) }}
</template>
<InfoCircleOutlined
style="color: rgba(0, 0, 0, 0.45)"
@@ -2259,12 +2326,12 @@ onMounted(() => {
<a-input
v-model:value="modalState.BatchForm.smfSel"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.neUser.sub.inputTip', { num: '16' }) }}
{{ t('views.neUser.sub.inputTip', { num: '50' }) }}
</template>
<InfoCircleOutlined
style="color: rgba(0, 0, 0, 0.45)"
@@ -2278,7 +2345,7 @@ onMounted(() => {
<a-form-item
label="5G Forbidden Areas Template"
name="arfb"
:maxlength="16"
:maxlength="50"
>
<a-input
v-model:value="modalState.BatchForm.arfb"
@@ -2308,7 +2375,7 @@ onMounted(() => {
<a-input
v-model:value="modalState.BatchForm.sar"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
@@ -2420,12 +2487,12 @@ onMounted(() => {
<a-input
v-model:value="modalState.BatchForm.epstpl"
allow-clear
:maxlength="16"
:maxlength="50"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.neUser.sub.inputTip', { num: '16' }) }}
{{ t('views.neUser.sub.inputTip', { num: '50' }) }}
</template>
<InfoCircleOutlined
style="color: rgba(0, 0, 0, 0.45)"
@@ -2546,12 +2613,13 @@ onMounted(() => {
</a-collapse-panel>
</a-collapse>
</a-form>
</DraggableModal>
</ProModal>
<!-- 批量删除框 -->
<DraggableModal
<ProModal
:drag="true"
:destroyOnClose="true"
style="top: 0px"
width="500px"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByBatchDel"
@@ -2598,14 +2666,14 @@ onMounted(() => {
v-model:value="modalState.BatchDelForm.num"
style="width: 100%"
:min="1"
:max="100000"
placeholder="<=100000"
:max="10000"
placeholder="<=10000"
></a-input-number>
</a-form-item>
</a-col>
</a-row>
</a-form>
</DraggableModal>
</ProModal>
<!-- 上传导入表格数据文件框 -->
<UploadModal
@@ -2615,6 +2683,7 @@ onMounted(() => {
@close="fnModalUploadImportClose"
v-model:visible="uploadImportState.visible"
:ext="['.txt']"
:size="10"
>
<template #default>
<a-textarea

25
src/views/neUser/ue/index.vue
View File

@@ -30,7 +30,7 @@ let queryParams = reactive({
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
pageSize: 50,
});
/**查询参数重置 */
@@ -40,10 +40,10 @@ function fnQueryReset() {
msisdn: '',
tenantName: '',
pageNum: 1,
pageSize: 20,
pageSize: 50,
});
tablePagination.current = 1;
tablePagination.pageSize = 20;
tablePagination.pageSize = 50;
fnGetList();
}
@@ -65,7 +65,7 @@ type TabeStateType = {
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: false,
seached: true,
data: [],
selectedRowKeys: [],
});
@@ -146,17 +146,13 @@ let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 20,
/**默认的每页条数 */
defaultPageSize: 20,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
pageSize: 50,
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: false,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
showSizeChanger: false,
/**数据总数 */
total: 0,
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
@@ -448,12 +444,13 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<DraggableModal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
:footer="null"
:footer="false"
>
<a-form layout="horizontal" labelAlign="left" :labelWrap="false">
<a-row :gutter="8">
@@ -505,7 +502,7 @@ onMounted(() => {
</a-descriptions-item>
</a-descriptions>
</a-form>
</DraggableModal>
</ProModal>
</PageContainer>
</template>

12
src/views/perfManage/customTarget/index.vue
View File

@@ -295,7 +295,7 @@ function fnSelectPerformanceInit(value: any) {
i => i.neType === value
);
if (modalState.from.objectType) modalState.from.objectType = '';
if(modalState.selectedPre.length > 0) modalState.selectedPre = [];
if (modalState.selectedPre.length > 0) modalState.selectedPre = [];
modalState.from.expression = '';
const arrSet = new Set<string>();
@@ -598,8 +598,10 @@ onMounted(() => {
</a-card>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -689,7 +691,7 @@ onMounted(() => {
name="expression"
v-bind="modalStateFrom.validateInfos.expression"
>
<a-input v-model:value="modalState.from.expression" allow-clear >
<a-input v-model:value="modalState.from.expression" allow-clear>
</a-input>
</a-form-item>
<a-row :gutter="16">
@@ -721,7 +723,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

15
src/views/perfManage/perfReport/index.vue
View File

@@ -151,14 +151,18 @@ function fnTableSize({ key }: MenuInfo) {
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if(pageNum){
if (pageNum) {
queryParams.pageNum = pageNum;
}
listTraceData(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -470,8 +474,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:title="modalState.title"
:visible="modalState.visible"
@cancel="fnModalVisibleClose"
@@ -505,7 +510,7 @@ onMounted(() => {
</a-button>
</div>
<div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
</a-modal>
</ProModal>
</PageContainer>
</template>

13
src/views/perfManage/perfSet/index.vue
View File

@@ -158,7 +158,11 @@ function fnGetList(pageNum?: number) {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -470,8 +474,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:title="modalState.title"
:visible="modalState.visible"
@cancel="fnModalVisibleClose"
@@ -505,7 +510,7 @@ onMounted(() => {
</a-button>
</div>
<div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
</a-modal>
</ProModal>
</PageContainer>
</template>

8
src/views/perfManage/perfThreshold/index.vue
View File

@@ -670,8 +670,10 @@ onMounted(() => {
</a-card>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -740,7 +742,7 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

15
src/views/perfManage/taskManage/index.vue
View File

@@ -880,8 +880,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -987,11 +988,13 @@ onMounted(() => {
t('common.close')
}}</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1137,7 +1140,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

21
src/views/system/config/index.vue
View File

@@ -449,7 +449,11 @@ function fnGetList(pageNum?: number) {
}
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -698,8 +702,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -762,11 +767,13 @@ onMounted(() => {
{{ t('common.close') }}
</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -855,7 +862,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

18
src/views/system/dept/index.vue
View File

@@ -602,8 +602,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -691,11 +692,13 @@ onMounted(() => {
t('common.cancel')
}}</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -818,9 +821,8 @@ onMounted(() => {
</a-col>
</a-row>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>

22
src/views/system/dict/data.vue
View File

@@ -301,7 +301,6 @@ function fnModalVisibleByVive(row: Record<string, string>) {
* @param dictCode 数据编号id, 不传为新增
*/
function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
console.log(record);
if (!dictCode) {
modalStateFrom.resetFields();
modalState.from.dictType = queryParams.dictType;
@@ -463,7 +462,11 @@ function fnGetList(pageNum?: number) {
}
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -714,8 +717,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -844,11 +848,13 @@ onMounted(() => {
{{ t('common.close') }}
</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -999,7 +1005,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

21
src/views/system/dict/index.vue
View File

@@ -452,7 +452,11 @@ function fnGetList(pageNum?: number) {
}
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -718,8 +722,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -753,11 +758,13 @@ onMounted(() => {
t('common.cancel')
}}</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -810,7 +817,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

7
src/views/system/log/operate/index.vue
View File

@@ -626,8 +626,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -749,7 +750,7 @@ onMounted(() => {
{{ t('common.cancel') }}
</a-button>
</template>
</a-modal>
</ProModal>
</PageContainer>
</template>

15
src/views/system/menu/index.vue
View File

@@ -717,8 +717,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -907,11 +908,13 @@ onMounted(() => {
t('common.cancel')
}}</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1182,7 +1185,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

15
src/views/system/post/index.vue
View File

@@ -631,8 +631,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -715,11 +716,13 @@ onMounted(() => {
t('common.cancel')
}}</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -804,7 +807,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

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

@@ -98,8 +98,8 @@ function fnTabCreate() {
title: 'SSH_NE_22',
addr: '',
port: 22,
user: '',
authMode: '0',
user: 'omcuser',
authMode: '2',
password: '',
privateKey: '',
passPhrase: '',
@@ -313,16 +313,19 @@ function fnGetList() {
listAllNeInfo({
bandHost: true,
}).then(res => {
console.log(res);
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
for (const item of res.data) {
if (item.neType === 'OMC') continue;
if (item.neType === 'OMC' || !Array.isArray(item.hosts)) continue;
tabState.panes.push({
key: `${item.neType}@${item.neId}`,
data: item,
status: false,
});
}
// 没有终端信息时，新建一个占位
if (tabState.panes.length === 0) {
fnTabCreate();
}
// 选择首个
if (tabState.panes.length > 0) {
tabState.activeKey = tabState.panes[0].key;

9
src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
View File

@@ -151,7 +151,7 @@ async function fnRecordInstall() {
// 开始安装
let preinput = {};
if (row.neType.toUpperCase() === 'IMS') {
preinput = { pisCSCF: 'y', updateMFetc: 'No', updateMFshare: 'No' }
preinput = { pisCSCF: 'y', updateMFetc: 'No', updateMFshare: 'No' };
}
const installData = {
neType: row.neType,
@@ -315,8 +315,9 @@ onMounted(() => {
></UploadMoreFile>
<!-- 勾选网元版本进行安装框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:destroyOnClose="true"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false"
:mask-closable="false"
@@ -363,7 +364,7 @@ onMounted(() => {
</template>
</a-alert>
</p>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped>

62
src/views/system/quick-start/components/SystemConfig.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { fnToStepName, stepState } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n';
import { reactive } from 'vue';
import { nextTick, onMounted, reactive, watch } from 'vue';
import useAppStore from '@/store/modules/app';
import { parseUrlPath } from '@/plugins/file-static-url';
import { Modal, message } from 'ant-design-vue/lib';
@@ -36,7 +36,7 @@ type StateType = {
const state: StateType = reactive({
confirmLoading: false,
filePath: '',
type: 'icon',
type: appStore.logoType,
icon: getLogoURL('icon'),
brand: getLogoURL('brand'),
title: appStore.appName,
@@ -44,7 +44,7 @@ const state: StateType = reactive({
open: appStore.i18nOpen,
openOld: appStore.i18nOpen,
username: 'admin',
password: 'Abcd1234..',
password: 'Abcd@1234..',
});
// LOGO地址
@@ -117,7 +117,6 @@ function fnSaveAcount() {
// 发送保存
state.confirmLoading = true;
bootloaderAccount(state.username, state.password).then(res => {
console.log(res);
if (res.code === RESULT_CODE_SUCCESS) {
message.success(t('common.operateOk'));
} else {
@@ -158,7 +157,6 @@ function fnSaveSystem() {
// 发送保存
state.confirmLoading = true;
Promise.all(reqArr).then(resArr => {
console.log(resArr);
message.success(t('views.system.quickStart.sysSaveOk'));
state.confirmLoading = false;
});
@@ -197,6 +195,30 @@ function fnStepNext(stepName: 'NeInfoConfig' | 'Done') {
});
}
}
/**检查系统名称是否超出范围进行滚动 */
function fnCheckAppNameOverflow() {
const container: HTMLDivElement | null = document.querySelector(
'.header-icon > .app-name'
);
if (!container) return;
const text: HTMLDivElement | null = container.querySelector('.marquee');
if (!text) return;
if (text.offsetWidth > container.offsetWidth) {
text.classList.add('app-name_scrollable');
} else {
text.classList.remove('app-name_scrollable');
}
}
watch(
() => state.title,
() => nextTick(fnCheckAppNameOverflow)
);
onMounted(() => {
fnCheckAppNameOverflow();
});
</script>
<template>
@@ -273,8 +295,10 @@ function fnStepNext(stepName: 'NeInfoConfig' | 'Done') {
</div>
<div class="header-icon" v-show="state.type === 'icon'">
<img :src="state.icon" />
<h1 :title="state.title">
{{ state.title }}
<h1 class="app-name" :title="state.title">
<span class="marquee app-name_scrollable">
{{ state.title }}
</span>
</h1>
</div>
<div class="header-menu">
@@ -363,15 +387,31 @@ function fnStepNext(stepName: 'NeInfoConfig' | 'Done') {
border-style: none;
border-radius: 6.66px;
}
& > h1 {
& > .app-name {
overflow: hidden;
text-overflow: ellipsis;
/* text-overflow: ellipsis; */
white-space: nowrap;
width: 130px;
width: 148px;
color: #fff;
margin: 0 0 0 12px;
font-weight: 600;
font-size: 16px;
font-size: 18px;
> .app-name_scrollable {
// padding-left: 100%;
display: inline-block;
animation: scrollable-animation linear 6s infinite both;
}
@keyframes scrollable-animation {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
}
}

15
src/views/system/role/components/auth-user-select.vue
View File

@@ -183,7 +183,11 @@ function fnGetList(pageNum?: number) {
}
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -231,8 +235,11 @@ watch(
</script>
<template>
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:forceFullscreen="true"
:title="props.title"
:visible="props.visible"
:keyboard="false"
@@ -309,7 +316,7 @@ watch(
</template>
</template>
</a-table>
</a-modal>
</ProModal>
</template>
<style lang="less" scoped>

24
src/views/system/role/index.vue
View File

@@ -999,8 +999,10 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="false"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -1098,11 +1100,13 @@ onMounted(() => {
t('common.cancel')
}}</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1242,11 +1246,13 @@ onMounted(() => {
</a-tree>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
<!-- 分配角色数据权限修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByDataScope"
@@ -1387,7 +1393,7 @@ onMounted(() => {
</a-tree>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>

1
src/views/system/setting/components/change-help-doc.vue
View File

@@ -28,7 +28,6 @@ let state: StateType = reactive({
/**上传前检查或转换压缩 */
function fnBeforeUpload(file: FileType) {
console.log(file.type);
if (state.loading) return false;
const isType = ['application/pdf'].includes(file.type);
if (!isType) {

52
src/views/system/setting/components/change-logo.vue
View File

@@ -3,7 +3,7 @@ import { Modal, message } from 'ant-design-vue/lib';
import { FileType } from 'ant-design-vue/lib/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import IconFont from '@/components/IconFont/index.vue';
import { onMounted, reactive, watch, computed } from 'vue';
import { onMounted, reactive, watch, computed, nextTick } from 'vue';
import useAppStore from '@/store/modules/app';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -182,7 +182,26 @@ watch(
}
);
/**检查系统名称是否超出范围进行滚动 */
function fnCheckAppNameOverflow() {
const container: HTMLDivElement | null = document.querySelector('.header-icon > .app-name');
if (!container) return;
const text: HTMLDivElement | null = container.querySelector('.marquee');
if (!text) return;
if (text.offsetWidth > container.offsetWidth) {
text.classList.add('app-name_scrollable');
} else {
text.classList.remove('app-name_scrollable');
}
}
watch(
() => appStore.appName,
() => nextTick(fnCheckAppNameOverflow)
);
onMounted(() => {
fnCheckAppNameOverflow()
Object.assign(state, {
language: currentLocale.value,
filePath: '',
@@ -205,8 +224,10 @@ onMounted(() => {
</div>
<div class="header-icon" v-show="state.type === 'icon'">
<img :src="state.icon" />
<h1 :title="appStore.appName">
{{ appStore.appName }}
<h1 class="app-name" :title="appStore.appName">
<span class="marquee app-name_scrollable">
{{ appStore.appName }}
</span>
</h1>
</div>
<div class="header-menu">
@@ -329,15 +350,32 @@ onMounted(() => {
border-style: none;
border-radius: 6.66px;
}
& > h1 {
& > .app-name {
overflow: hidden;
text-overflow: ellipsis;
/* text-overflow: ellipsis; */
white-space: nowrap;
width: 130px;
width: 148px;
color: #fff;
margin: 0 0 0 12px;
font-weight: 600;
font-size: 16px;
font-size: 18px;
> .app-name_scrollable {
// padding-left: 100%;
display: inline-block;
animation: scrollable-animation linear 6s infinite both;
}
@keyframes scrollable-animation {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
}
}

13
src/views/system/setting/components/system-reset.vue
View File

@@ -3,9 +3,9 @@ import { message } from 'ant-design-vue/lib';
import { reactive } from 'vue';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useLockedStore from '@/store/modules/locked';
import { bootloaderReset } from '@/api/system/quick-start/bootloader';
const lockedStore = useLockedStore();
import useMaskStore from '@/store/modules/mask';
const maskStore = useMaskStore();
const { t } = useI18n();
type StateType = {
@@ -36,13 +36,13 @@ function fnModalVisible() {
/**对话框提交确认 */
function fnModalOk() {
// 发送请求
lockedStore.fnLock('reset');
maskStore.handleMaskType('reset');
bootloaderReset().then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
fnModalCancel();
lockedStore.fnLock('reload');
maskStore.handleMaskType('reload');
} else {
lockedStore.fnLock('none');
maskStore.handleMaskType('none');
message.error(res.msg, 3);
clearInterval(state.timer);
state.timer = null;
@@ -67,6 +67,9 @@ function fnModalCancel() {
</a-button>
</a-col>
<a-modal
:drag="true"
:width="416"
:destroyOnClose="true"
:mask-closable="false"
v-model:visible="state.visible"
:title="t('common.tipTitle')"

52
src/views/system/user/index.vue
View File

@@ -265,7 +265,7 @@ let modalState: ModalStateType = reactive({
phonenumber: '',
postIds: [],
roleIds: [],
sex: '1',
sex: '0',
status: '0',
remark: '',
createTime: 0,
@@ -392,6 +392,7 @@ function fnModalVisibleByEdit(userId?: string | number) {
modalState.from = Object.assign(modalState.from, user);
modalState.from.roleIds = roleIds;
modalState.from.postIds = postIds;
modalState.from.deptId = deptTreeData.value[0].id;
modalState.title =
t('common.addText') + t('views.system.user.userInfo');
modalState.visibleByEdit = true;
@@ -968,7 +969,7 @@ onMounted(() => {
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList(1)">
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
@@ -1095,8 +1096,10 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="false"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -1218,7 +1221,12 @@ onMounted(() => {
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col
:lg="12"
:md="12"
:xs="24"
v-perms:has="['system:user:editRole']"
>
<a-form-item
:label="t('views.system.user.permission')"
name="roleIds"
@@ -1274,11 +1282,13 @@ onMounted(() => {
{{ t('common.close') }}
</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1346,7 +1356,12 @@ onMounted(() => {
></a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col
:lg="12"
:md="12"
:xs="24"
v-perms:has="['system:user:editPost']"
>
<a-form-item
:label="t('views.system.user.userWork')"
name="postIds"
@@ -1410,7 +1425,15 @@ onMounted(() => {
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col
:lg="12"
:md="12"
:xs="24"
v-if="
modalState.from.userId !== '1' &&
modalState.from.userId !== userStore.userId
"
>
<a-form-item :label="t('views.system.user.status')" name="status">
<a-select
v-model:value="modalState.from.status"
@@ -1481,11 +1504,12 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
<!-- 重置密码修改框 -->
<a-modal
width="500px"
<ProModal
:drag="true"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByResetPwd"
@@ -1521,7 +1545,7 @@ onMounted(() => {
</a-input-password>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
<!-- 上传导入表格数据文件框 -->
<UploadModal

199
src/views/tool/lockScreen/index.vue Normal file
View File

@@ -0,0 +1,199 @@
<script lang="ts" setup>
import useAppStore from '@/store/modules/app';
import useUserStore from '@/store/modules/user';
import useMaskStore from '@/store/modules/mask';
import useI18n from '@/hooks/useI18n';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue/lib';
const { t } = useI18n();
const userStore = useUserStore();
const appStore = useAppStore();
const maskStore = useMaskStore();
const route = useRoute();
const router = useRouter();
/**
* 国际化翻译转换
*/
function fnLocale() {
let title = route.meta.title as string;
if (title.indexOf('router.') !== -1) {
title = t(title);
}
appStore.setTitle(title);
}
const password = ref('');
/**解锁 */
function handleUnlock() {
if (maskStore.lockPasswd === password.value) {
message.success(t('components.LockScreen.validSucc'), 3);
password.value = '';
maskStore.handleMaskType('none');
const redirectPath = route.query?.redirect || '/index';
router.push({ path: redirectPath as string });
} else {
message.error(t('components.LockScreen.validError'), 3);
}
}
/**返回登录界面 */
function handleBackLogin() {
maskStore.handleMaskType('none');
const redirectPath = route.query?.redirect || '/index';
userStore
.fnLogOut()
.finally(() =>
router.push({ name: 'Login', query: { redirect: redirectPath } })
);
}
onMounted(() => {
fnLocale();
});
</script>
<template>
<div class="container">
<section>
<div class="animation animation1"></div>
<div class="animation animation2"></div>
<div class="animation animation3"></div>
<div class="animation animation4"></div>
<div class="animation animation5"></div>
</section>
<!-- 锁屏-登录 -->
<div class="lock-screen_login">
<div class="lock-screen_login-user">
<a-avatar
shape="circle"
:size="100"
:src="userStore.getAvatar"
:alt="userStore.userName"
></a-avatar>
<span class="nick">
{{ userStore.nickName }}
</span>
</div>
<div class="lock-screen_login-from">
<a-input-group compact>
<a-input
type="password"
v-model:value="password"
:placeholder="t('components.LockScreen.inputPlacePwd')"
:maxlength="32"
style="width: calc(100% - 50px)"
@keyup.enter="handleUnlock"
/>
<a-button type="primary" @click="handleUnlock">
<LoginOutlined />
</a-button>
</a-input-group>
<a-button type="text" class="logout" @click="handleBackLogin">
{{ t('components.LockScreen.backLogin') }}
</a-button>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.lock-screen_login {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: transparent;
&-user {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.nick {
font-size: 28px;
max-width: 164px;
white-space: nowrap;
text-align: start;
text-overflow: ellipsis;
overflow: hidden;
color: #fff;
}
}
&-from {
display: flex;
flex-flow: column;
width: 256px;
margin-top: 30px;
.logout {
margin-top: 8px;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
&:hover {
color: var(--ant-primary-color);
}
}
}
}
.container {
position: relative;
width: 100%;
min-height: 100%;
padding-top: 164px;
background: url('@/assets/black_dot.png') 0% 0% / 14px 14px repeat;
// background-image: url(@/assets/background.jpg);
// background-repeat: no-repeat;
// background-size: cover;
// background-position: center center;
.animation {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #1be1f6;
&.animation1 {
left: 15%;
top: 70%;
animation: slashStar 2s ease-in-out 0.3s infinite;
}
&.animation2 {
left: 34%;
top: 35%;
animation: slashStar 2s ease-in-out 1.2s infinite;
}
&.animation3 {
left: 10%;
top: 8%;
animation: slashStar 2s ease-in-out 0.5s infinite;
}
&.animation4 {
left: 68%;
top: 68%;
animation: slashStar 2s ease-in-out 0.8s infinite;
}
&.animation5 {
left: 87%;
top: 30%;
animation: slashStar 2s ease-in-out 1.5s infinite;
}
}
@keyframes slashStar {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
}
</style>

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

@@ -151,14 +151,18 @@ function fnTableSize({ key }: MenuInfo) {
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if(pageNum){
if (pageNum) {
queryParams.pageNum = pageNum;
}
listTraceData(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -470,8 +474,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:title="modalState.title"
:visible="modalState.visible"
@cancel="fnModalVisibleClose"
@@ -505,7 +510,7 @@ onMounted(() => {
</a-button>
</div>
<div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
</a-modal>
</ProModal>
</PageContainer>
</template>

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

@@ -535,10 +535,11 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:footer="null"
:footer="false"
:maskClosable="false"
:keyboard="false"
:title="t('views.traceManage.pcap.textLogMsg')"
@@ -550,7 +551,7 @@ onMounted(() => {
:disabled="true"
style="color: rgba(0, 0, 0, 0.85)"
/>
</a-modal>
</ProModal>
</PageContainer>
</template>

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

@@ -236,7 +236,11 @@ function fnGetList(pageNum?: number) {
}
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
@@ -727,8 +731,9 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
@@ -834,11 +839,13 @@ onMounted(() => {
t('common.close')
}}</a-button>
</template>
</a-modal>
</ProModal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
@@ -1041,7 +1048,7 @@ onMounted(() => {
/>
</a-form-item>
</a-form>
</a-modal>
</ProModal>
</PageContainer>
</template>