Merge branch 'main' into lichang
This commit is contained in:
TsMask
@@ -16,9 +16,13 @@ import {
|
||||
startNf,
|
||||
restartNf,
|
||||
stopNf,
|
||||
importFile,
|
||||
listServerFile,
|
||||
} from '@/api/configManage/neManage';
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { FileType } from 'ant-design-vue/lib/upload/interface';
|
||||
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
@@ -26,6 +30,15 @@ const route = useRoute();
|
||||
/**路由标题 */
|
||||
let title = ref<string>((route.meta.title as string) ?? '标题');
|
||||
|
||||
/**表格所需option */
|
||||
const neManageOption = reactive({
|
||||
importType: [
|
||||
{ label: t('views.configManage.neManage.server'), value: 'server' },
|
||||
{ label: t('views.configManage.neManage.local'), value: 'local' },
|
||||
],
|
||||
serverFileName: <any[]>[],
|
||||
});
|
||||
|
||||
/**查询参数 */
|
||||
let queryParams = reactive({
|
||||
/**网元类型 */
|
||||
@@ -183,10 +196,14 @@ type ModalStateType = {
|
||||
visibleByView: boolean;
|
||||
/**新增框或修改框是否显示 */
|
||||
visibleByEdit: boolean;
|
||||
/**导入是否显示 */
|
||||
visibleByImport: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
/**导入表单数据 */
|
||||
importFrom: Record<string, any>;
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
};
|
||||
@@ -195,6 +212,7 @@ type ModalStateType = {
|
||||
let modalState: ModalStateType = reactive({
|
||||
visibleByView: false,
|
||||
visibleByEdit: false,
|
||||
visibleByImport: false,
|
||||
title: '网元',
|
||||
from: {
|
||||
dn: '',
|
||||
@@ -209,6 +227,14 @@ let modalState: ModalStateType = reactive({
|
||||
rmUid: '',
|
||||
vendorName: '',
|
||||
},
|
||||
importFrom: {
|
||||
neId: '',
|
||||
neType: '',
|
||||
importType: '',
|
||||
file: undefined,
|
||||
fileList: [],
|
||||
fileName: '',
|
||||
},
|
||||
confirmLoading: false,
|
||||
});
|
||||
|
||||
@@ -226,6 +252,31 @@ const modalStateFrom = Form.useForm(
|
||||
})
|
||||
);
|
||||
|
||||
/**导入对话框内表单属性和校验规则 */
|
||||
const importStateFrom = Form.useForm(
|
||||
modalState.importFrom,
|
||||
reactive({
|
||||
file: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.configManage.softwareManage.updateFilePlease'),
|
||||
},
|
||||
],
|
||||
importType: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.configManage.neManage.selectPlease'),
|
||||
},
|
||||
],
|
||||
fileName: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.configManage.neManage.fileSelect'),
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
/**
|
||||
* 对话框弹出显示为 新增或者修改
|
||||
* @param noticeId 网元id, 不传为新增
|
||||
@@ -292,6 +343,72 @@ function fnModalOk() {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入对话框弹出确认执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnImportModalOk() {
|
||||
const from = toRaw(modalState.importFrom);
|
||||
let validateName = ['importType'];
|
||||
if (from.file) {
|
||||
validateName.push('file');
|
||||
} else {
|
||||
validateName.push('fileName');
|
||||
}
|
||||
|
||||
importStateFrom
|
||||
.validate(validateName)
|
||||
.then(e => {
|
||||
modalState.confirmLoading = true;
|
||||
const hide = message.loading({ content: t('common.loading') });
|
||||
// let result = importFile(from);
|
||||
// if (from.importType === 'local') {
|
||||
// let formData = new FormData();
|
||||
// formData.append('nfType', from.neType);
|
||||
// formData.append('nfId', from.neId);
|
||||
// formData.append('file', from.file);
|
||||
// result = importFile(formData);
|
||||
// }
|
||||
|
||||
importFile(from)
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('common.msgSuccess', { msg: modalState.title }),
|
||||
duration: 3,
|
||||
});
|
||||
modalState.visibleByEdit = false;
|
||||
modalStateFrom.resetFields();
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
modalState.confirmLoading = false;
|
||||
// 获取列表数据
|
||||
fnGetList();
|
||||
});
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e)
|
||||
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入对话框弹出关闭执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnImportModalCancel() {
|
||||
modalState.visibleByView = false;
|
||||
modalState.visibleByImport = false;
|
||||
importStateFrom.resetFields();
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭执行函数
|
||||
* 进行表达规则校验
|
||||
@@ -472,6 +589,12 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
|
||||
if (type === 'stop') {
|
||||
fnRecordStop(row);
|
||||
}
|
||||
|
||||
if (type === 'import') {
|
||||
modalState.importFrom = Object.assign(modalState.importFrom, row);
|
||||
modalState.title = '导入';
|
||||
modalState.visibleByImport = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**查询网元列表 */
|
||||
@@ -491,6 +614,53 @@ function fnGetList() {
|
||||
});
|
||||
}
|
||||
|
||||
/**查询网元远程服务器备份文件 */
|
||||
function typeChange(value: any) {
|
||||
if (value === 'server') {
|
||||
listServerFile(modalState.importFrom).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
neManageOption.serverFileName = [];
|
||||
res.data.forEach((item: any) => {
|
||||
neManageOption.serverFileName.push({
|
||||
label: item.fileName,
|
||||
value: item.fileName,
|
||||
});
|
||||
});
|
||||
}
|
||||
// else if (res.code === RESULT_CODE_SUCCESS && !res.data) {
|
||||
// message.error({
|
||||
// content: `当前网元没有远程服务器备份文件`,
|
||||
// key: 'importServer',
|
||||
// duration: 2,
|
||||
// });
|
||||
// }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**上传前检查或转换压缩 */
|
||||
function fnBeforeUploadFile(file: FileType) {
|
||||
if (modalState.confirmLoading) return false;
|
||||
const fileName = file.name;
|
||||
const suff = fileName.substring(fileName.lastIndexOf('.'));
|
||||
const isLt60M = file.size / 1024 / 1024 > 60;
|
||||
if (isLt60M) {
|
||||
message.error('有效软件文件大小应不小于 60MB', 3);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**上传文件 */
|
||||
function fnUploadFile(up: UploadRequestOption) {
|
||||
// 改为完成状态
|
||||
const file = modalState.importFrom.fileList[0];
|
||||
file.percent = 100;
|
||||
file.status = 'done';
|
||||
// 预置到表单
|
||||
modalState.importFrom.file = up.file;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 获取列表数据
|
||||
fnGetList();
|
||||
@@ -846,6 +1016,97 @@ onMounted(() => {
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 导入框 -->
|
||||
<a-modal
|
||||
width="800px"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visibleByImport"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnImportModalOk"
|
||||
@cancel="fnImportModalCancel"
|
||||
>
|
||||
<a-form name="importStateFrom" layout="horizontal">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
label="网元类型"
|
||||
name="neType"
|
||||
v-bind="importStateFrom.validateInfos.neType"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.importFrom.neType"
|
||||
disabled
|
||||
allow-clear
|
||||
>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
label="网元内部标识"
|
||||
name="neId"
|
||||
v-bind="importStateFrom.validateInfos.neId"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.importFrom.neId"
|
||||
disabled
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item
|
||||
label="文件来源"
|
||||
name="importType"
|
||||
v-bind="importStateFrom.validateInfos.importType"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="modalState.importFrom.importType"
|
||||
default-value="server"
|
||||
:options="neManageOption.importType"
|
||||
@change="typeChange"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="导入远程文件"
|
||||
name="fileName"
|
||||
v-bind="importStateFrom.validateInfos.fileName"
|
||||
v-show="modalState.importFrom.importType === 'server'"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="modalState.importFrom.fileName"
|
||||
:options="neManageOption.serverFileName"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="导入本地文件"
|
||||
name="file"
|
||||
v-bind="importStateFrom.validateInfos.file"
|
||||
v-show="modalState.importFrom.importType === 'local'"
|
||||
>
|
||||
<a-upload
|
||||
name="file"
|
||||
v-model:file-list="modalState.importFrom.fileList"
|
||||
list-type="text"
|
||||
:max-count="1"
|
||||
:show-upload-list="true"
|
||||
:before-upload="fnBeforeUploadFile"
|
||||
:custom-request="fnUploadFile"
|
||||
>
|
||||
<a-button type="default" :loading="modalState.confirmLoading">
|
||||
{{ t('views.configManage.neManage.fileSelect') }}
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { reactive, ref, onMounted, toRaw } from 'vue';
|
||||
import { PageContainer } from '@ant-design-vue/pro-layout';
|
||||
import { message, Modal } from 'ant-design-vue/lib';
|
||||
@@ -18,7 +17,6 @@ import {
|
||||
getPass,
|
||||
exportAll,
|
||||
} from '@/api/faultManage/actAlarm';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import saveAs from 'file-saver';
|
||||
import { writeSheet } from '@/utils/execl-utils';
|
||||
@@ -26,7 +24,6 @@ import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { readLoalXlsx } from '@/utils/execl-utils';
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
/**路由标题 */
|
||||
let title = ref<string>((route.meta.title as string) ?? '标题');
|
||||
|
||||
@@ -36,23 +33,23 @@ let queryRangePicker = ref<[string, string]>(['', '']);
|
||||
/**查询参数 */
|
||||
let queryParams = reactive({
|
||||
/**告警设备类型 */
|
||||
ne_type: '',
|
||||
neType: '',
|
||||
/**告警网元名称 */
|
||||
ne_name: '',
|
||||
neName: '',
|
||||
/**告警网元标识 */
|
||||
ne_id: '',
|
||||
neId: '',
|
||||
/**告警编号 */
|
||||
alarm_code: '',
|
||||
alarmCode: '',
|
||||
/**告警级别 */
|
||||
orig_severity: '',
|
||||
origSeverity: '',
|
||||
beginTime: '',
|
||||
endTime: '',
|
||||
/**告警产生时间 */
|
||||
eventTime: (queryRangePicker.value = ['', '']),
|
||||
/**虚拟化标识 */
|
||||
pv_flag: '',
|
||||
pvFlag: '',
|
||||
/**告警类型 */
|
||||
alarm_type: '',
|
||||
alarmType: '',
|
||||
/**当前页数 */
|
||||
pageNum: 1,
|
||||
/**每页条数 */
|
||||
@@ -63,21 +60,21 @@ let queryParams = reactive({
|
||||
function fnQueryReset() {
|
||||
queryParams = Object.assign(queryParams, {
|
||||
/**告警设备类型 */
|
||||
ne_type: '',
|
||||
neType: '',
|
||||
/**告警网元名称 */
|
||||
ne_name: '',
|
||||
neName: '',
|
||||
/**告警网元标识 */
|
||||
ne_id: '',
|
||||
neId: '',
|
||||
/**告警编号 */
|
||||
alarm_code: '',
|
||||
alarmCode: '',
|
||||
/**告警级别 */
|
||||
orig_severity: '',
|
||||
origSeverity: '',
|
||||
/**告警产生时间 */
|
||||
eventTime: (queryRangePicker.value = ['', '']),
|
||||
/**虚拟化标识 */
|
||||
pv_flag: '',
|
||||
pvFlag: '',
|
||||
/**告警类型 */
|
||||
alarm_type: '',
|
||||
alarmType: '',
|
||||
/**当前页数 */
|
||||
});
|
||||
tablePagination.current = 1;
|
||||
@@ -295,20 +292,6 @@ let alarmTableColumns: ColumnsType = [
|
||||
},
|
||||
];
|
||||
|
||||
/**告警帮助文档 */
|
||||
let pronInfo: any = reactive({
|
||||
告警名称: '',
|
||||
告警定位信息: '',
|
||||
告警帮助信息: '',
|
||||
告警类型: '',
|
||||
告警级别: '',
|
||||
告警编号: '',
|
||||
告警问题原因: '',
|
||||
清除类型: '',
|
||||
英文标题: '',
|
||||
适用网元: '',
|
||||
});
|
||||
|
||||
/**表格分页器参数 */
|
||||
let tablePagination = reactive({
|
||||
/**当前页数 */
|
||||
@@ -774,7 +757,7 @@ onMounted(() => {
|
||||
name="ne_type"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="queryParams.ne_type"
|
||||
v-model:value="queryParams.neType"
|
||||
allow-clear
|
||||
placeholder="查询告警设备类型"
|
||||
></a-input>
|
||||
@@ -786,7 +769,7 @@ onMounted(() => {
|
||||
name="ne_name"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="queryParams.ne_name"
|
||||
v-model:value="queryParams.neName"
|
||||
allow-clear
|
||||
placeholder="查询告警网元名称"
|
||||
></a-input>
|
||||
@@ -798,7 +781,7 @@ onMounted(() => {
|
||||
name="ne_id"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="queryParams.ne_id"
|
||||
v-model:value="queryParams.neId"
|
||||
allow-clear
|
||||
placeholder="查询告警网元标识"
|
||||
></a-input>
|
||||
@@ -827,7 +810,7 @@ onMounted(() => {
|
||||
name="alarm_code"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="queryParams.alarm_code"
|
||||
v-model:value="queryParams.alarmCode"
|
||||
allow-clear
|
||||
placeholder="查询告警编号"
|
||||
></a-input>
|
||||
@@ -839,7 +822,7 @@ onMounted(() => {
|
||||
name="orig_severity"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="queryParams.orig_severity"
|
||||
v-model:value="queryParams.origSeverity"
|
||||
placeholder="Select alarm Type"
|
||||
show-search
|
||||
allow-clear
|
||||
@@ -869,7 +852,7 @@ onMounted(() => {
|
||||
name="pv_flag"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="queryParams.pv_flag"
|
||||
v-model:value="queryParams.pvFlag"
|
||||
placeholder="Select a person"
|
||||
show-search
|
||||
:options="actAlarmOption.pvFlag"
|
||||
@@ -885,7 +868,7 @@ onMounted(() => {
|
||||
name="alarm_type"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="queryParams.alarm_type"
|
||||
v-model:value="queryParams.alarmType"
|
||||
placeholder="Select alarm Type"
|
||||
show-search
|
||||
:options="actAlarmOption.alarmType"
|
||||
@@ -1025,7 +1008,7 @@ onMounted(() => {
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'origSeverity'">
|
||||
<a-tag :color="profile.color[record.origSeverity]">{{
|
||||
<a-tag :color="profile.color[record.origSeverity.toLowerCase()]">{{
|
||||
record.origSeverity
|
||||
}}</a-tag>
|
||||
</template>
|
||||
|
||||
@@ -767,7 +767,7 @@ onMounted(() => {
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'origSeverity'">
|
||||
<a-tag :color="profile.color[record.origSeverity]">{{
|
||||
<a-tag :color="profile.color[record.origSeverity.toLowerCase()]">{{
|
||||
record.origSeverity
|
||||
}}</a-tag>
|
||||
</template>
|
||||
|
||||
@@ -1,28 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
import { reactive, ref, onMounted, toRaw, nextTick } from 'vue';
|
||||
import { reactive, ref, onMounted, toRaw } from 'vue';
|
||||
import { PageContainer } from '@ant-design-vue/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 { parseDateToStr } from '@/utils/date-utils';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { saveAs } from 'file-saver';
|
||||
import { listperfData } from '@/api/perfManage/perfData';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { getTraceRawInfo, listTraceData } from '@/api/traceManage/analysis';
|
||||
const { getDict } = useDictStore();
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
/**路由标题 */
|
||||
let title = ref<string>((route.meta.title as string) ?? '标题');
|
||||
|
||||
/**字典数据 */
|
||||
let dict: {
|
||||
/**告警状态 */
|
||||
alarmStatus: DictType[];
|
||||
} = reactive({
|
||||
alarmStatus: [],
|
||||
});
|
||||
|
||||
/**记录开始结束时间 */
|
||||
let queryRangePicker = ref<[string, string]>(['', '']);
|
||||
|
||||
/**查询参数 */
|
||||
let queryParams = reactive({
|
||||
/**移动号 */
|
||||
imsi: '',
|
||||
/**移动号 */
|
||||
msisdn: '',
|
||||
/**网元类型 */
|
||||
neType: '',
|
||||
/**记录时间 */
|
||||
beginTime: '',
|
||||
endTime: '',
|
||||
/**当前页数 */
|
||||
pageNum: 1,
|
||||
/**每页条数 */
|
||||
@@ -32,10 +45,13 @@ let queryParams = reactive({
|
||||
/**查询参数重置 */
|
||||
function fnQueryReset() {
|
||||
queryParams = Object.assign(queryParams, {
|
||||
imsi: '',
|
||||
neType: '',
|
||||
beginTime: '',
|
||||
endTime: '',
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
queryRangePicker.value = ['', ''];
|
||||
tablePagination.current = 1;
|
||||
tablePagination.pageSize = 20;
|
||||
fnGetList();
|
||||
@@ -64,48 +80,49 @@ let tableState: TabeStateType = reactive({
|
||||
/**表格字段列 */
|
||||
let tableColumns: ColumnsType = [
|
||||
{
|
||||
title: t('views.traceManage.analysis.trackTaskId'),
|
||||
title: t('common.rowId'),
|
||||
dataIndex: 'id',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '任务ID',
|
||||
dataIndex: 'taskId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.imsi'),
|
||||
dataIndex: 'imsi',
|
||||
title: '网元类型',
|
||||
dataIndex: 'neType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.msisdn'),
|
||||
dataIndex: 'msisdn',
|
||||
title: '网元名称',
|
||||
dataIndex: 'neName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.srcIp'),
|
||||
dataIndex: 'srcAddr',
|
||||
title: '颗粒度',
|
||||
dataIndex: 'granulOption',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.dstIp'),
|
||||
dataIndex: 'dstAddr',
|
||||
title: '统计编码',
|
||||
dataIndex: 'kpiCode',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.signalType'),
|
||||
dataIndex: 'ifType',
|
||||
title: '统计指标项',
|
||||
dataIndex: 'kpiId',
|
||||
//key: 'alarmTitle',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '值',
|
||||
dataIndex: 'value',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.msgType'),
|
||||
dataIndex: 'msgType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.msgDirect'),
|
||||
dataIndex: 'msgDirect',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.rowTime'),
|
||||
dataIndex: 'timestamp',
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime',
|
||||
align: 'center',
|
||||
customRender(opt) {
|
||||
if (!opt.value) return '';
|
||||
@@ -113,10 +130,14 @@ let tableColumns: ColumnsType = [
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('common.operate'),
|
||||
key: 'id',
|
||||
title: '结束时间',
|
||||
dataIndex: 'endTime',
|
||||
align: 'center',
|
||||
},
|
||||
customRender(opt) {
|
||||
if (!opt.value) return '';
|
||||
return parseDateToStr(opt.value);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
/**表格分页器参数 */
|
||||
@@ -156,7 +177,12 @@ function fnTableSize({ key }: MenuInfo) {
|
||||
function fnGetList() {
|
||||
if (tableState.loading) return;
|
||||
tableState.loading = true;
|
||||
listTraceData(toRaw(queryParams)).then(res => {
|
||||
if (!queryRangePicker.value) {
|
||||
queryRangePicker.value = ['', ''];
|
||||
}
|
||||
queryParams.beginTime = queryRangePicker.value[0];
|
||||
queryParams.endTime = queryRangePicker.value[1];
|
||||
listperfData(toRaw(queryParams)).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
|
||||
tablePagination.total = res.total;
|
||||
tableState.data = res.rows;
|
||||
@@ -165,176 +191,15 @@ function fnGetList() {
|
||||
});
|
||||
}
|
||||
|
||||
/**抽屉对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**抽屉框是否显示 */
|
||||
visible: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
};
|
||||
|
||||
/**抽屉对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visible: false,
|
||||
title: '',
|
||||
from: {
|
||||
rawData: '',
|
||||
rawDataHTML: '',
|
||||
downBtn: false,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 对话框弹出显示
|
||||
* @param row 记录信息
|
||||
*/
|
||||
function fnModalVisible(row: Record<string, any>) {
|
||||
// 进制转数据
|
||||
const hexString = parseBase64Data(row.rawMsg);
|
||||
const rawData = convertToReadableFormat(hexString);
|
||||
modalState.from.rawData = rawData;
|
||||
// RAW解析HTML
|
||||
getTraceRawInfo(row.id).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
const htmlString = rawDataHTMLScript(res.msg);
|
||||
modalState.from.rawDataHTML = htmlString;
|
||||
modalState.from.downBtn = true;
|
||||
} else {
|
||||
modalState.from.rawDataHTML = t('views.traceManage.analysis.noData');
|
||||
}
|
||||
});
|
||||
modalState.title = t('views.traceManage.analysis.taskTitle', {
|
||||
num: row.imsi,
|
||||
});
|
||||
modalState.visible = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭
|
||||
*/
|
||||
function fnModalVisibleClose() {
|
||||
modalState.visible = false;
|
||||
modalState.from.downBtn = false;
|
||||
modalState.from.rawDataHTML = '';
|
||||
modalState.from.rawData = '';
|
||||
}
|
||||
|
||||
// 将Base64编码解码为字节数组
|
||||
function parseBase64Data(hexData: string) {
|
||||
// 将Base64编码解码为字节数组
|
||||
const byteString = atob(hexData);
|
||||
const byteArray = new Uint8Array(byteString.length);
|
||||
for (let i = 0; i < byteString.length; i++) {
|
||||
byteArray[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
// 将每一个字节转换为2位16进制数表示，并拼接起来
|
||||
let hexString = '';
|
||||
for (let i = 0; i < byteArray.length; i++) {
|
||||
const hex = byteArray[i].toString(16);
|
||||
hexString += hex.length === 1 ? '0' + hex : hex;
|
||||
}
|
||||
return hexString;
|
||||
}
|
||||
|
||||
// 转换十六进制字节流为可读格式和ASCII码表示
|
||||
function convertToReadableFormat(hexString: string) {
|
||||
let result = '';
|
||||
let asciiResult = '';
|
||||
let arr = [];
|
||||
let row = 100;
|
||||
for (let i = 0; i < hexString.length; i += 2) {
|
||||
const hexChars = hexString.substring(i, i + 2);
|
||||
const decimal = parseInt(hexChars, 16);
|
||||
const asciiChar =
|
||||
decimal >= 32 && decimal <= 126 ? String.fromCharCode(decimal) : '.';
|
||||
|
||||
result += hexChars + ' ';
|
||||
asciiResult += asciiChar;
|
||||
|
||||
if ((i + 2) % 32 === 0) {
|
||||
arr.push({
|
||||
row: row,
|
||||
code: result,
|
||||
asciiText: asciiResult,
|
||||
});
|
||||
result = '';
|
||||
asciiResult = '';
|
||||
row += 10;
|
||||
}
|
||||
if (2 + i == hexString.length) {
|
||||
arr.push({
|
||||
row: row,
|
||||
code: result,
|
||||
asciiText: asciiResult,
|
||||
});
|
||||
result = '';
|
||||
asciiResult = '';
|
||||
row += 10;
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
// 信息详情HTMl内容处理
|
||||
function rawDataHTMLScript(htmlString: string) {
|
||||
// 删除所有 <a> 标签
|
||||
// const withoutATags = htmlString.replace(/<a\b[^>]*>(.*?)<\/a>/gi, '');
|
||||
// 删除所有 <script> 标签
|
||||
let withoutScriptTags = htmlString.replace(
|
||||
/<script\b[^>]*>([\s\S]*?)<\/script>/gi,
|
||||
''
|
||||
);
|
||||
// 默认全展开
|
||||
// const withoutHiddenElements = withoutScriptTags.replace(
|
||||
// /style="display:none"/gi,
|
||||
// 'style="background:#ffffff"'
|
||||
// );
|
||||
|
||||
function set_node(node: any, str: string) {
|
||||
if (!node) return;
|
||||
node.style.display = str;
|
||||
node.style.background = '#ffffff';
|
||||
}
|
||||
Reflect.set(window, 'set_node', set_node);
|
||||
function toggle_node(node: any) {
|
||||
node = document.getElementById(node);
|
||||
if (!node) return;
|
||||
set_node(node, node.style.display != 'none' ? 'none' : 'block');
|
||||
}
|
||||
Reflect.set(window, 'toggle_node', toggle_node);
|
||||
function hide_node(node: any) {
|
||||
node = document.getElementById(node);
|
||||
if (!node) return;
|
||||
set_node(node, 'none');
|
||||
}
|
||||
Reflect.set(window, 'hide_node', hide_node);
|
||||
|
||||
// 展开第一个
|
||||
withoutScriptTags = withoutScriptTags.replace(
|
||||
'id="f1c" style="display:none"',
|
||||
'id="f1c" style="display:block"'
|
||||
);
|
||||
return withoutScriptTags;
|
||||
}
|
||||
|
||||
/**信息文件下载 */
|
||||
function fnDownloadFile() {
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.traceManage.analysis.taskDownTip'),
|
||||
onOk() {
|
||||
const blob = new Blob([modalState.from.rawDataHTML], {
|
||||
type: 'text/plain',
|
||||
});
|
||||
saveAs(blob, `${modalState.title}_${Date.now()}.html`);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 初始字典数据
|
||||
Promise.allSettled([getDict('alarm_status')]).then(resArr => {
|
||||
if (resArr[0].status === 'fulfilled') {
|
||||
dict.alarmStatus = resArr[0].value;
|
||||
}
|
||||
});
|
||||
// 获取网元网元列表
|
||||
useNeInfoStore().fnNelist();
|
||||
// 获取列表数据
|
||||
fnGetList();
|
||||
});
|
||||
@@ -351,29 +216,30 @@ onMounted(() => {
|
||||
<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.traceManage.analysis.imsi')"
|
||||
name="imsi"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="queryParams.imsi"
|
||||
:allow-clear="true"
|
||||
:placeholder="t('views.traceManage.analysis.imsiPlease')"
|
||||
></a-input>
|
||||
<a-form-item label="网元类型" name="neType">
|
||||
<a-auto-complete
|
||||
v-model:value="queryParams.neType"
|
||||
:options="useNeInfoStore().getNeSelectOtions"
|
||||
allow-clear
|
||||
placeholder="查询网元类型"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.analysis.msisdn')"
|
||||
name="imsi"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="queryParams.msisdn"
|
||||
:allow-clear="true"
|
||||
:placeholder="t('views.traceManage.analysis.msisdnPlease')"
|
||||
></a-input>
|
||||
<a-col :lg="8" :md="12" :xs="24">
|
||||
<a-form-item label="开始时间" name="queryRangePicker">
|
||||
<a-range-picker
|
||||
v-model:value="queryRangePicker"
|
||||
allow-clear
|
||||
bordered
|
||||
show-time
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
:placeholder="['开始', '结束']"
|
||||
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">
|
||||
@@ -416,7 +282,7 @@ onMounted(() => {
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.sizeText') }}</template>
|
||||
<a-dropdown trigger="click">
|
||||
<a-dropdown trigger="click" placement="bottomRight">
|
||||
<a-button type="text">
|
||||
<template #icon><ColumnHeightOutlined /></template>
|
||||
</a-button>
|
||||
@@ -425,15 +291,15 @@ onMounted(() => {
|
||||
: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-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>
|
||||
@@ -453,57 +319,15 @@ onMounted(() => {
|
||||
:scroll="{ x: true }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'id'">
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<template #title>查看详情</template>
|
||||
<a-button type="link" @click.prevent="fnModalVisible(record)">
|
||||
<template #icon><ProfileOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
<template v-if="column.key === 'alarmTitle'">
|
||||
<a-tooltip>
|
||||
<template #title>{{ record.operResult }}</template>
|
||||
<div class="alarmTitleText">{{ record.alarmTitle }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 详情框 -->
|
||||
<a-modal
|
||||
width="800px"
|
||||
:title="modalState.title"
|
||||
:visible="modalState.visible"
|
||||
@cancel="fnModalVisibleClose"
|
||||
>
|
||||
<div class="raw-title">
|
||||
{{ t('views.traceManage.analysis.signalData') }}
|
||||
</div>
|
||||
<a-row
|
||||
class="raw"
|
||||
:gutter="16"
|
||||
v-for="v in modalState.from.rawData"
|
||||
:key="v.row"
|
||||
>
|
||||
<a-col class="num" :span="2">{{ v.row }}</a-col>
|
||||
<a-col class="code" :span="12">{{ v.code }}</a-col>
|
||||
<a-col class="txt" :span="10">{{ v.asciiText }}</a-col>
|
||||
</a-row>
|
||||
<a-divider />
|
||||
<div class="raw-title">
|
||||
{{ t('views.traceManage.analysis.signalDetail') }}
|
||||
<a-button
|
||||
type="dashed"
|
||||
size="small"
|
||||
@click.prevent="fnDownloadFile"
|
||||
v-if="modalState.from.downBtn"
|
||||
>
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
{{ t('views.traceManage.analysis.taskDownText') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
|
||||
</a-modal>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
@@ -511,26 +335,8 @@ onMounted(() => {
|
||||
.table :deep(.ant-pagination) {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.raw {
|
||||
&-title {
|
||||
color: #000000d9;
|
||||
font-size: 24px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.num {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
.code {
|
||||
background-color: #e7e6ff;
|
||||
}
|
||||
.txt {
|
||||
background-color: #ffe3e5;
|
||||
}
|
||||
|
||||
&-html {
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.alarmTitleText {
|
||||
max-width: 300px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user