del
This commit is contained in:
lai
@@ -1,43 +0,0 @@
|
|||||||
import { request } from '@/plugins/http-fetch';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 查询IMS-CDR会话事件
|
|
||||||
* @param query 查询参数
|
|
||||||
* @returns object
|
|
||||||
*/
|
|
||||||
export function listMFDataCDR(query: Record<string, any>) {
|
|
||||||
return request({
|
|
||||||
url: '/neData/mf/cdr/list',
|
|
||||||
method: 'get',
|
|
||||||
params: query,
|
|
||||||
timeout: 60_000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* IMS-CDR会话删除
|
|
||||||
* @param id 信息ID
|
|
||||||
* @returns object
|
|
||||||
*/
|
|
||||||
export function delMFDataCDR(cdrIds: string | number) {
|
|
||||||
return request({
|
|
||||||
url: `/neData/mf/cdr/${cdrIds}`,
|
|
||||||
method: 'delete',
|
|
||||||
timeout: 60_000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* IMS-CDR会话列表导出
|
|
||||||
* @param data 查询列表条件
|
|
||||||
* @returns object
|
|
||||||
*/
|
|
||||||
export function exportMFDataCDR(data: Record<string, any>) {
|
|
||||||
return request({
|
|
||||||
url: '/neData/mf/cdr/export',
|
|
||||||
method: 'post',
|
|
||||||
data,
|
|
||||||
responseType: 'blob',
|
|
||||||
timeout: 60_000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -433,8 +433,6 @@ export default {
|
|||||||
sgwcServedMSISDN: 'MSISDN',
|
sgwcServedMSISDN: 'MSISDN',
|
||||||
sgwcVolumeGPRSUplink: 'GPRS Uplink',
|
sgwcVolumeGPRSUplink: 'GPRS Uplink',
|
||||||
sgwcVolumeGPRSDownlink: 'GPRS Downlink',
|
sgwcVolumeGPRSDownlink: 'GPRS Downlink',
|
||||||
recordPath:'Record Path',
|
|
||||||
msd:'MSD',
|
|
||||||
},
|
},
|
||||||
ue: {
|
ue: {
|
||||||
eventType: "Event Type",
|
eventType: "Event Type",
|
||||||
|
|||||||
@@ -433,8 +433,6 @@ export default {
|
|||||||
sgwcServedMSISDN: 'MSISDN',
|
sgwcServedMSISDN: 'MSISDN',
|
||||||
sgwcVolumeGPRSUplink: 'GPRS 上行链路',
|
sgwcVolumeGPRSUplink: 'GPRS 上行链路',
|
||||||
sgwcVolumeGPRSDownlink: 'GPRS 下行链路',
|
sgwcVolumeGPRSDownlink: 'GPRS 下行链路',
|
||||||
recordPath:'录音文件路径',
|
|
||||||
msd:'最小数据集',
|
|
||||||
},
|
},
|
||||||
ue: {
|
ue: {
|
||||||
eventType: "事件类型",
|
eventType: "事件类型",
|
||||||
|
|||||||
@@ -1,835 +0,0 @@
|
|||||||
<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/es';
|
|
||||||
import { SizeType } from 'ant-design-vue/es/config-provider';
|
|
||||||
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
|
|
||||||
import { ColumnsType } from 'ant-design-vue/es/table';
|
|
||||||
import useI18n from '@/hooks/useI18n';
|
|
||||||
import {
|
|
||||||
RESULT_CODE_ERROR,
|
|
||||||
RESULT_CODE_SUCCESS,
|
|
||||||
} from '@/constants/result-constants';
|
|
||||||
import useDictStore from '@/store/modules/dict';
|
|
||||||
import useNeInfoStore from '@/store/modules/neinfo';
|
|
||||||
import {
|
|
||||||
delMFDataCDR,
|
|
||||||
exportMFDataCDR,
|
|
||||||
listMFDataCDR,
|
|
||||||
} from '@/api/neData/mf';
|
|
||||||
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 { useClipboard } from '@vueuse/core';
|
|
||||||
import dayjs, { type Dayjs } from 'dayjs';
|
|
||||||
const { copy } = useClipboard({ legacy: true });
|
|
||||||
const { t } = useI18n();
|
|
||||||
const { getDict } = useDictStore();
|
|
||||||
const ws = new WS();
|
|
||||||
const queue = new PQueue({ concurrency: 1, autoStart: true });
|
|
||||||
|
|
||||||
/**字典数据 */
|
|
||||||
let dict: {
|
|
||||||
/**CDR SIP响应代码类别类型 */
|
|
||||||
cdrSipCode: DictType[];
|
|
||||||
/**CDR 呼叫类型 */
|
|
||||||
cdrCallType: DictType[];
|
|
||||||
} = reactive({
|
|
||||||
cdrSipCode: [],
|
|
||||||
cdrCallType: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
/**网元可选 */
|
|
||||||
let neOtions = ref<Record<string, any>[]>([]);
|
|
||||||
|
|
||||||
/**开始结束时间 */
|
|
||||||
let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
|
|
||||||
dayjs().startOf('hour'),
|
|
||||||
dayjs().endOf('hour'),
|
|
||||||
]);
|
|
||||||
/**时间范围 */
|
|
||||||
let rangePickerPresets = ref([
|
|
||||||
{
|
|
||||||
label: 'Now hour',
|
|
||||||
value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
|
|
||||||
},
|
|
||||||
{ label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
|
|
||||||
{
|
|
||||||
label: 'Yesterday',
|
|
||||||
value: [
|
|
||||||
dayjs().subtract(1, 'day').startOf('day'),
|
|
||||||
dayjs().subtract(1, 'day').endOf('day'),
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
/**查询参数 */
|
|
||||||
let queryParams = reactive({
|
|
||||||
/**网元类型 */
|
|
||||||
neType: 'MF',
|
|
||||||
neId: '001',
|
|
||||||
recordType: '',
|
|
||||||
callerParty: '',
|
|
||||||
calledParty: '',
|
|
||||||
sortField: 'timestamp',
|
|
||||||
sortOrder: 'desc',
|
|
||||||
/**开始时间 */
|
|
||||||
startTime: undefined as undefined | number,
|
|
||||||
/**结束时间 */
|
|
||||||
endTime: undefined as undefined | number,
|
|
||||||
/**当前页数 */
|
|
||||||
pageNum: 1,
|
|
||||||
/**每页条数 */
|
|
||||||
pageSize: 20,
|
|
||||||
});
|
|
||||||
|
|
||||||
/**查询参数重置 */
|
|
||||||
function fnQueryReset() {
|
|
||||||
recordTypes.value = [];
|
|
||||||
queryParams = Object.assign(queryParams, {
|
|
||||||
recordType: '',
|
|
||||||
callerParty: '',
|
|
||||||
calledParty: '',
|
|
||||||
startTime: undefined,
|
|
||||||
endTime: undefined,
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
});
|
|
||||||
queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
|
|
||||||
tablePagination.current = 1;
|
|
||||||
tablePagination.pageSize = 20;
|
|
||||||
fnGetList();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**记录类型 */
|
|
||||||
const recordTypes = ref<string[]>([]);
|
|
||||||
|
|
||||||
/**查询记录类型变更 */
|
|
||||||
function fnQueryRecordTypeChange(value: any) {
|
|
||||||
if (Array.isArray(value)) {
|
|
||||||
queryParams.recordType = 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: t('views.dashboard.cdr.recordType'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
align: 'left',
|
|
||||||
width: 150,
|
|
||||||
customRender(opt) {
|
|
||||||
const cdrJSON = opt.value;
|
|
||||||
return cdrJSON.recordType;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.type'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
key: 'callType',
|
|
||||||
align: 'left',
|
|
||||||
width: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.caller'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
key: 'callerParty',
|
|
||||||
align: 'left',
|
|
||||||
width: 120,
|
|
||||||
customRender(opt) {
|
|
||||||
const cdrJSON = opt.value;
|
|
||||||
return cdrJSON.callerParty;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.called'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
key: 'calledParty',
|
|
||||||
align: 'left',
|
|
||||||
width: 120,
|
|
||||||
customRender(opt) {
|
|
||||||
const cdrJSON = opt.value;
|
|
||||||
return cdrJSON.calledParty;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.result'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
key: 'cause',
|
|
||||||
align: 'left',
|
|
||||||
width: 150,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.duration'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
key: 'callDuration',
|
|
||||||
align: 'left',
|
|
||||||
width: 100,
|
|
||||||
customRender(opt) {
|
|
||||||
const cdrJSON = opt.value;
|
|
||||||
return cdrJSON.callType === 'sms'
|
|
||||||
? '-'
|
|
||||||
: parseDuration(cdrJSON.callDuration);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.recordPath'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
key: 'record_path',
|
|
||||||
align: 'left',
|
|
||||||
width: 100,
|
|
||||||
customRender(opt) {
|
|
||||||
const cdrJSON = opt.value;
|
|
||||||
return cdrJSON.record_path;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.msd'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
key: 'msd',
|
|
||||||
align: 'left',
|
|
||||||
width: 100,
|
|
||||||
customRender(opt) {
|
|
||||||
const cdrJSON = opt.value;
|
|
||||||
return cdrJSON.msd;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.seizureTime'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
align: 'left',
|
|
||||||
width: 200,
|
|
||||||
customRender(opt) {
|
|
||||||
const cdrJSON = opt.value;
|
|
||||||
if (typeof cdrJSON.seizureTime === 'number') {
|
|
||||||
return parseDateToStr(+cdrJSON.seizureTime * 1000);
|
|
||||||
}
|
|
||||||
return cdrJSON.seizureTime;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('views.dashboard.cdr.releaseTime'),
|
|
||||||
dataIndex: 'cdrJSON',
|
|
||||||
align: 'left',
|
|
||||||
width: 200,
|
|
||||||
customRender(opt) {
|
|
||||||
const cdrJSON = opt.value;
|
|
||||||
if (typeof cdrJSON.releaseTime === 'number') {
|
|
||||||
return parseDateToStr(+cdrJSON.releaseTime * 1000);
|
|
||||||
}
|
|
||||||
return cdrJSON.releaseTime;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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);
|
|
||||||
delMFDataCDR(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;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 复制CDR
|
|
||||||
* @param jsonStr JSON字符串
|
|
||||||
*/
|
|
||||||
function fnRecordCopy(jsonStr: string) {
|
|
||||||
if (!jsonStr) return;
|
|
||||||
const text = JSON.stringify(jsonStr, null, 2);
|
|
||||||
copy(text).then(() => {
|
|
||||||
message.success(t('common.copyOk'), 3);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**查询列表, pageNum初始页数 */
|
|
||||||
function fnGetList(pageNum?: number) {
|
|
||||||
if (tableState.loading) return;
|
|
||||||
tableState.loading = true;
|
|
||||||
if (pageNum) {
|
|
||||||
queryParams.pageNum = pageNum;
|
|
||||||
}
|
|
||||||
// 时间范围
|
|
||||||
if (
|
|
||||||
Array.isArray(queryRangePicker.value) &&
|
|
||||||
queryRangePicker.value.length > 0
|
|
||||||
) {
|
|
||||||
queryParams.startTime = queryRangePicker.value[0].valueOf();
|
|
||||||
queryParams.endTime = queryRangePicker.value[1].valueOf();
|
|
||||||
} else {
|
|
||||||
queryParams.startTime = undefined;
|
|
||||||
queryParams.endTime = undefined;
|
|
||||||
}
|
|
||||||
listMFDataCDR(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;
|
|
||||||
exportMFDataCDR(querys)
|
|
||||||
.then(res => {
|
|
||||||
if (res.code === RESULT_CODE_SUCCESS) {
|
|
||||||
message.success({
|
|
||||||
content: t('common.operateOk'),
|
|
||||||
duration: 3,
|
|
||||||
});
|
|
||||||
saveAs(res.data, `MF_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) {
|
|
||||||
tableState.seached = false;
|
|
||||||
// 建立链接
|
|
||||||
const options: OptionsType = {
|
|
||||||
url: '/ws',
|
|
||||||
params: {
|
|
||||||
/**订阅通道组
|
|
||||||
*
|
|
||||||
* IMS_CDR会话事件(GroupID:1005)
|
|
||||||
*/
|
|
||||||
subGroupID: `1005_${queryParams.neId}`,
|
|
||||||
},
|
|
||||||
onmessage: wsMessage,
|
|
||||||
onerror: (ev: any) => {
|
|
||||||
console.error(ev);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
ws.connect(options);
|
|
||||||
} else {
|
|
||||||
ws.close();
|
|
||||||
tableState.seached = true;
|
|
||||||
fnGetList(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**接收数据后回调 */
|
|
||||||
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 === `1005_${queryParams.neId}`) {
|
|
||||||
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(() => {
|
|
||||||
// 初始字典数据
|
|
||||||
Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')]).then(
|
|
||||||
resArr => {
|
|
||||||
if (resArr[0].status === 'fulfilled') {
|
|
||||||
dict.cdrSipCode = resArr[0].value;
|
|
||||||
}
|
|
||||||
if (resArr[1].status === 'fulfilled') {
|
|
||||||
dict.cdrCallType = resArr[1].value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// 获取网元网元列表
|
|
||||||
useNeInfoStore()
|
|
||||||
.fnNelist()
|
|
||||||
.then(res => {
|
|
||||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
|
||||||
if (res.data.length > 0) {
|
|
||||||
let arr: Record<string, any>[] = [];
|
|
||||||
res.data.forEach(i => {
|
|
||||||
if (i.neType === 'MF') {
|
|
||||||
arr.push({ value: i.neId, label: i.neName });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
neOtions.value = arr;
|
|
||||||
if (arr.length > 0) {
|
|
||||||
queryParams.neId = arr[0].value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
message.warning({
|
|
||||||
content: t('common.noData'),
|
|
||||||
duration: 2,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.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="MF" name="neId ">
|
|
||||||
<a-select v-model:value="queryParams.neId" :options="neOtions" :placeholder="t('common.selectPlease')"
|
|
||||||
@change="fnQueryReset()" />
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :lg="6" :md="12" :xs="24">
|
|
||||||
<a-form-item :label="t('views.dashboard.cdr.called')" name="calledParty">
|
|
||||||
<a-input v-model:value="queryParams.calledParty" 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="t('views.dashboard.cdr.caller')" name="callerParty ">
|
|
||||||
<a-input v-model:value="queryParams.callerParty" allow-clear
|
|
||||||
:placeholder="t('common.inputPlease')"></a-input>
|
|
||||||
</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-col :lg="8" :md="12" :xs="24">
|
|
||||||
<a-form-item :label="t('views.dashboard.cdr.recordType')" name="recordType">
|
|
||||||
<a-select v-model:value="recordTypes" mode="multiple" :options="['MOC', 'MTC'].map(v => ({ value: v }))"
|
|
||||||
:placeholder="t('common.selectPlease')" @change="fnQueryRecordTypeChange"></a-select>
|
|
||||||
</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" :presets="rangePickerPresets" :bordered="true"
|
|
||||||
:allow-clear="false" style="width: 100%" :show-time="{ format: 'HH:mm:ss' }"
|
|
||||||
format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
|
|
||||||
</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')" v-perms:has="['cdr:ne:remove']">
|
|
||||||
<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" :disabled="realTimeData" />
|
|
||||||
</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 * 150, y: 'calc(100vh - 480px)' }" :row-selection="{
|
|
||||||
type: 'checkbox',
|
|
||||||
columnWidth: '48px',
|
|
||||||
selectedRowKeys: tableState.selectedRowKeys,
|
|
||||||
onChange: fnTableSelectedRowKeys,
|
|
||||||
}">
|
|
||||||
<template #bodyCell="{ column, record }">
|
|
||||||
<template v-if="column.key === 'callType'">
|
|
||||||
<DictTag :options="dict.cdrCallType" :value="record.cdrJSON.callType" />
|
|
||||||
</template>
|
|
||||||
<template v-if="column.key === 'cause'">
|
|
||||||
<span v-if="record.cdrJSON.callType !== 'sms'">
|
|
||||||
<DictTag :options="dict.cdrSipCode" :value="record.cdrJSON.cause" value-default="0" />
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
{{ t('views.dashboard.cdr.resultOk') }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<template v-if="column.key === 'id'">
|
|
||||||
<a-space :size="8" align="center">
|
|
||||||
<a-tooltip>
|
|
||||||
<template #title>{{ t('common.copyText') }}</template>
|
|
||||||
<a-button type="link" @click.prevent="fnRecordCopy(record.cdrJSON)">
|
|
||||||
<template #icon>
|
|
||||||
<CopyOutlined />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</a-tooltip>
|
|
||||||
<a-tooltip>
|
|
||||||
<template #title>{{ t('common.deleteText') }}</template>
|
|
||||||
<a-button type="link" @click.prevent="fnRecordDelete(record.id)" v-perms:has="['cdr:ne:remove']">
|
|
||||||
<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>
|
|
||||||
{{
|
|
||||||
typeof record.cdrJSON.releaseTime === 'number'
|
|
||||||
? parseDateToStr(+record.cdrJSON.releaseTime * 1000)
|
|
||||||
: record.cdrJSON.releaseTime
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :lg="8" :md="12" :xs="24">
|
|
||||||
<a-divider orientation="left">
|
|
||||||
{{ t('views.dashboard.cdr.rowInfo') }}
|
|
||||||
</a-divider>
|
|
||||||
<div>
|
|
||||||
<span>{{ t('views.dashboard.cdr.type') }}: </span>
|
|
||||||
<DictTag :options="dict.cdrCallType" :value="record.cdrJSON.callType" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{{ t('views.dashboard.cdr.duration') }}: </span>
|
|
||||||
<span v-if="record.cdrJSON.callType !== 'sms'">
|
|
||||||
{{ parseDuration(record.cdrJSON.callDuration) }}
|
|
||||||
</span>
|
|
||||||
<span v-else> - </span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{{ t('views.dashboard.cdr.caller') }}: </span>
|
|
||||||
<span>{{ record.cdrJSON.callerParty }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{{ t('views.dashboard.cdr.called') }}: </span>
|
|
||||||
<span>{{ record.cdrJSON.calledParty }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{{ t('views.dashboard.cdr.result') }}: </span>
|
|
||||||
<span v-if="record.cdrJSON.callType !== 'sms'">
|
|
||||||
<DictTag :options="dict.cdrSipCode" :value="record.cdrJSON.cause" value-default="0" />
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
{{ t('views.dashboard.cdr.resultOk') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{{ t('views.dashboard.cdr.seizureTime') }}: </span>
|
|
||||||
<span>
|
|
||||||
{{
|
|
||||||
typeof record.cdrJSON.seizureTime === 'number'
|
|
||||||
? parseDateToStr(+record.cdrJSON.seizureTime * 1000)
|
|
||||||
: record.cdrJSON.seizureTime
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{{ t('views.dashboard.cdr.releaseTime') }}: </span>
|
|
||||||
<span>
|
|
||||||
{{
|
|
||||||
typeof record.cdrJSON.releaseTime === 'number'
|
|
||||||
? parseDateToStr(+record.cdrJSON.releaseTime * 1000)
|
|
||||||
: record.cdrJSON.releaseTime
|
|
||||||
}}
|
|
||||||
</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>
|
|
||||||
@@ -1,145 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { defineComponent, ref } from 'vue';
|
|
||||||
import TrendChart from './TrendChart.vue';
|
|
||||||
|
|
||||||
|
|
||||||
// 模拟数据
|
|
||||||
const activeCallsData = ref([10, 20, 30, 40, 30, 20, 0]);
|
|
||||||
const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
|
|
||||||
const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<a-card>
|
|
||||||
<div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px;">
|
|
||||||
Users</div>
|
|
||||||
<a-row :gutter="[16, 16]">
|
|
||||||
<a-col :xs="24" :sm="24" :lg="8">
|
|
||||||
<a-card :bordered="false" class="metric-card">
|
|
||||||
<div class="card-title">Online Users</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="trend-chart">
|
|
||||||
<TrendChart :data="activeCallsData" color="#4CAF50" />
|
|
||||||
</div>
|
|
||||||
<div class="metric-info">
|
|
||||||
<div class="metric-value">
|
|
||||||
0
|
|
||||||
<a-icon class="trend-icon up" type="arrow-up" />
|
|
||||||
</div>
|
|
||||||
<div class="metric-change">-20 last 5m</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-card>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :xs="24" :sm="24" :lg="8">
|
|
||||||
<a-card :bordered="false" class="metric-card">
|
|
||||||
<div class="card-title">Total Users</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="trend-chart">
|
|
||||||
<TrendChart :data="mosData" color="#2196F3" />
|
|
||||||
</div>
|
|
||||||
<div class="metric-info">
|
|
||||||
<div class="metric-value">
|
|
||||||
70
|
|
||||||
<a-icon class="trend-icon right" type="arrow-right" />
|
|
||||||
</div>
|
|
||||||
<div class="metric-change">+40 last 5m</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-card>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a-col :xs="24" :sm="24" :lg="8">
|
|
||||||
<a-card :bordered="false" class="metric-card">
|
|
||||||
<div class="card-title">Parallel Users</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="trend-chart">
|
|
||||||
<TrendChart :data="failedCallsData" color="#F44336" />
|
|
||||||
</div>
|
|
||||||
<div class="metric-info">
|
|
||||||
<div class="metric-value">
|
|
||||||
30
|
|
||||||
</div>
|
|
||||||
<div class="metric-change">-10 last 5m</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-card>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.dashboard-cards {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card {
|
|
||||||
border-radius: 8px;
|
|
||||||
height: 100%;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trend-chart {
|
|
||||||
flex: 1;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-info {
|
|
||||||
margin-left: 16px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-value {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-change {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trend-icon {
|
|
||||||
margin-left: 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.up {
|
|
||||||
color: #4CAF50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.down {
|
|
||||||
color: #F44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
color: #2196F3;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="trend-chart-container" ref="chartContainer"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, watch, PropType } from 'vue';
|
|
||||||
import * as echarts from 'echarts/core';
|
|
||||||
import { LineChart } from 'echarts/charts';
|
|
||||||
import { GridComponent } from 'echarts/components';
|
|
||||||
import { SVGRenderer } from 'echarts/renderers';
|
|
||||||
|
|
||||||
echarts.use([LineChart, GridComponent, SVGRenderer]);
|
|
||||||
|
|
||||||
// 定义props
|
|
||||||
const props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Array as PropType<number[]>,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#4CAF50'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const chartContainer = ref<HTMLElement | null>(null);
|
|
||||||
let chart: echarts.ECharts | null = null;
|
|
||||||
|
|
||||||
const initChart = () => {
|
|
||||||
if (!chartContainer.value) return;
|
|
||||||
|
|
||||||
chart = echarts.init(chartContainer.value);
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
grid: {
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
bottom: 0
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
show: false,
|
|
||||||
data: ['40m', '', '', '', '', '', 'now']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: props.data,
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
symbol: 'none',
|
|
||||||
lineStyle: {
|
|
||||||
color: props.color,
|
|
||||||
width: 2
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: props.color + '40' // 40% 透明度
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: props.color + '00' // 0% 透明度
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
animation: false
|
|
||||||
};
|
|
||||||
|
|
||||||
chart.setOption(option);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initChart();
|
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
chart?.resize();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(() => props.data, () => {
|
|
||||||
chart?.setOption({
|
|
||||||
series: [{ data: props.data }]
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.trend-chart-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,30 +1,684 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
|
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
|
||||||
|
import svgBase from '@/assets/svg/base.svg';
|
||||||
|
import svgUserIMS from '@/assets/svg/userIMS.svg';
|
||||||
|
import svgUserSMF from '@/assets/svg/userSMF.svg';
|
||||||
|
import useI18n from '@/hooks/useI18n';
|
||||||
|
import Topology from './components/Topology/index.vue';
|
||||||
|
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 { listUDMSub } from '@/api/neData/udm_sub';
|
||||||
|
import { listUENumBySMF } from '@/api/neUser/smf';
|
||||||
|
import { listUENumByIMS } from '@/api/neUser/ims';
|
||||||
|
import { listBase5G } from '@/api/neUser/base5G';
|
||||||
|
import {
|
||||||
|
graphNodeClickID,
|
||||||
|
graphState,
|
||||||
|
notNeNodes,
|
||||||
|
graphNodeStateNum,
|
||||||
|
neStateRequestMap,
|
||||||
|
} from './hooks/useTopology';
|
||||||
|
import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
|
||||||
|
import { useFullscreen } from '@vueuse/core';
|
||||||
|
import useWS from './hooks/useWS';
|
||||||
|
import useAppStore from '@/store/modules/app';
|
||||||
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import useNeInfoStore from '@/store/modules/neinfo';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import { upfWhoId } from './hooks/useWS';
|
||||||
|
|
||||||
|
const neInfoStore = useNeInfoStore();
|
||||||
|
const router = useRouter();
|
||||||
|
const appStore = useAppStore();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
|
||||||
|
|
||||||
|
/**概览状态类型 */
|
||||||
|
type SkimStateType = {
|
||||||
|
/**UDM签约用户数量 */
|
||||||
|
udmSubNum: number;
|
||||||
|
/**SMF在线用户数 */
|
||||||
|
smfUeNum: number;
|
||||||
|
/**IMS在线用户数 */
|
||||||
|
imsUeNum: number;
|
||||||
|
/**5G基站数量 */
|
||||||
|
gnbNum: number;
|
||||||
|
/**5G在线用户数量 */
|
||||||
|
gnbUeNum: number;
|
||||||
|
/**4G基站数量 */
|
||||||
|
enbNum: number;
|
||||||
|
/**4G在线用户数量 */
|
||||||
|
enbUeNum: number;
|
||||||
|
};
|
||||||
|
|
||||||
import DashboardCards from './components/MFOverview/DashboardCards.vue';
|
/**概览状态信息 */
|
||||||
|
let skimState: SkimStateType = reactive({
|
||||||
|
udmSubNum: 0,
|
||||||
|
smfUeNum: 0,
|
||||||
|
imsUeNum: 0,
|
||||||
|
gnbNum: 0,
|
||||||
|
gnbUeNum: 0,
|
||||||
|
enbNum: 0,
|
||||||
|
enbUeNum: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
/**网元参数 */
|
||||||
|
let neCascaderOptions = ref<Record<string, any>[]>([]);
|
||||||
|
|
||||||
|
/**总览节点 */
|
||||||
|
const viewportDom = ref<HTMLElement | null>(null);
|
||||||
|
const { isFullscreen, toggle } = useFullscreen(viewportDom);
|
||||||
|
|
||||||
|
let initFlag = false;
|
||||||
|
/**10s调度器 */
|
||||||
|
const interval10s = ref<any>(null);
|
||||||
|
|
||||||
|
/**5s调度器 */
|
||||||
|
const interval5s = ref<any>(null);
|
||||||
|
|
||||||
|
/**查询网元状态 */
|
||||||
|
function fnGetNeState() {
|
||||||
|
// 获取节点状态
|
||||||
|
for (const node of graphState.data.nodes) {
|
||||||
|
if (notNeNodes.includes(node.id)) continue;
|
||||||
|
const { neType, neId } = node.neInfo;
|
||||||
|
if (!neType || !neId) continue;
|
||||||
|
// 请求标记检查避免重复发送
|
||||||
|
if (neStateRequestMap.value.get(neType)) continue;
|
||||||
|
neStateRequestMap.value.set(neType, true);
|
||||||
|
|
||||||
|
wsSend({
|
||||||
|
requestId: `neState_${neType}_${neId}`,
|
||||||
|
type: 'ne_state',
|
||||||
|
data: {
|
||||||
|
neType: neType,
|
||||||
|
neId: neId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**获取概览信息 */
|
||||||
|
async function fnGetSkim() {
|
||||||
|
const neHandlers = new Map([
|
||||||
|
// [
|
||||||
|
// 'UDM',
|
||||||
|
// {
|
||||||
|
// request: (neId: string) =>
|
||||||
|
// listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }),
|
||||||
|
// process: (res: any) =>
|
||||||
|
// res.code === RESULT_CODE_SUCCESS &&
|
||||||
|
// (skimState.udmSubNum += res.total),
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
[
|
||||||
|
'SMF',
|
||||||
|
{
|
||||||
|
request: (neId: string) => listUENumBySMF(neId),
|
||||||
|
process: (res: any) =>
|
||||||
|
res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'IMS',
|
||||||
|
{
|
||||||
|
request: (neId: string) => listUENumByIMS(neId),
|
||||||
|
process: (res: any) =>
|
||||||
|
res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'AMF',
|
||||||
|
{
|
||||||
|
request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
|
||||||
|
process: (res: any) => {
|
||||||
|
if (res.code === RESULT_CODE_SUCCESS) {
|
||||||
|
skimState.gnbNum += res.total;
|
||||||
|
skimState.gnbUeNum += res.rows.reduce(
|
||||||
|
(sum: number, item: any) => sum + item.ueNum,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'MME',
|
||||||
|
{
|
||||||
|
request: (neId: string) => listBase5G({ neType: 'MME', neId }),
|
||||||
|
process: (res: any) => {
|
||||||
|
if (res.code === RESULT_CODE_SUCCESS) {
|
||||||
|
skimState.enbNum += res.total;
|
||||||
|
skimState.enbUeNum += res.rows.reduce(
|
||||||
|
(sum: number, item: any) => sum + item.ueNum,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
const requests = neCascaderOptions.value.flatMap(
|
||||||
|
(ne: any) =>
|
||||||
|
ne.children
|
||||||
|
?.map((child: any) => {
|
||||||
|
const handler = neHandlers.get(child.neType);
|
||||||
|
return handler
|
||||||
|
? {
|
||||||
|
promise: handler.request(child.neId),
|
||||||
|
process: handler.process,
|
||||||
|
}
|
||||||
|
: null;
|
||||||
|
})
|
||||||
|
.filter(Boolean) || []
|
||||||
|
);
|
||||||
|
|
||||||
|
const results = await Promise.allSettled(requests.map(r => r.promise));
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
Object.assign(skimState, {
|
||||||
|
udmSubNum: 0,
|
||||||
|
smfUeNum: 0,
|
||||||
|
imsUeNum: 0,
|
||||||
|
gnbNum: 0,
|
||||||
|
gnbUeNum: 0,
|
||||||
|
enbNum: 0,
|
||||||
|
enbUeNum: 0,
|
||||||
|
});
|
||||||
|
results.forEach((result, index) => {
|
||||||
|
if (result.status === 'fulfilled') {
|
||||||
|
requests[index].process(result.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// UDM
|
||||||
|
listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
|
||||||
|
if (res.code === RESULT_CODE_SUCCESS) {
|
||||||
|
skimState.udmSubNum = res.total;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**初始数据函数 */
|
||||||
|
function loadData() {
|
||||||
|
fnGetNeState(); // 获取网元状态
|
||||||
|
userActivitySend();
|
||||||
|
upfTFSend('0');
|
||||||
|
upfTFSend('7');
|
||||||
|
upfTFSend('30');
|
||||||
|
|
||||||
|
clearInterval(interval10s.value);
|
||||||
|
interval10s.value = setInterval(() => {
|
||||||
|
if (!interval10s.value) return;
|
||||||
|
if (upfTFActive.value === '0') {
|
||||||
|
upfTFSend('7');
|
||||||
|
upfTFActive.value = '7';
|
||||||
|
} else if (upfTFActive.value === '7') {
|
||||||
|
upfTFSend('30');
|
||||||
|
upfTFActive.value = '30';
|
||||||
|
} else if (upfTFActive.value === '30') {
|
||||||
|
upfTFSend('0');
|
||||||
|
upfTFActive.value = '0';
|
||||||
|
}
|
||||||
|
}, 10_000);
|
||||||
|
|
||||||
|
clearInterval(interval5s.value);
|
||||||
|
interval5s.value = setInterval(() => {
|
||||||
|
if (!interval5s.value || !initFlag) return;
|
||||||
|
fnGetSkim(); // 获取概览信息
|
||||||
|
fnGetNeState(); // 获取网元状态
|
||||||
|
}, 5_000);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**栏目信息跳转 */
|
||||||
|
function fnToRouter(name: string, query?: any) {
|
||||||
|
router.push({ name, query });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**网元参数 */
|
||||||
|
let neOtions = ref<Record<string, any>[]>([]);
|
||||||
|
|
||||||
|
// UPF实时流量下拉框选择
|
||||||
|
function fnSelectNe(value: any, option: any) {
|
||||||
|
upfWhoId.value = value;
|
||||||
|
reSendUPF(value);
|
||||||
|
// upfTotalFlow.value.map((item: any) => {
|
||||||
|
// item.requestFlag = false;
|
||||||
|
// });
|
||||||
|
|
||||||
|
for (var key in upfTotalFlow.value) {
|
||||||
|
upfTotalFlow.value[key].requestFlag = false;
|
||||||
|
}
|
||||||
|
// loadData();
|
||||||
|
}
|
||||||
|
|
||||||
|
let udmNeId = ref<string>('001');
|
||||||
|
let udmOtions = ref<Record<string, any>[]>([]);
|
||||||
|
/**用户数量-选择UDM */
|
||||||
|
function fnSelectUDM(e: any) {
|
||||||
|
udmNeId.value = e.key;
|
||||||
|
listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
|
||||||
|
if (res.code === RESULT_CODE_SUCCESS) {
|
||||||
|
skimState.udmSubNum = res.total;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义一个方法返回 views 容器
|
||||||
|
const getPopupContainer = () => {
|
||||||
|
// 使用 ref 或其他方式来引用你的 views 容器
|
||||||
|
// 如果 views 容器直接在这个组件内部，你可以使用 ref
|
||||||
|
// 但在这个例子中，我们假设它是通过类名来获取的
|
||||||
|
return document.querySelector('.viewport');
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
neInfoStore
|
||||||
|
.fnNelist()
|
||||||
|
.then(res => {
|
||||||
|
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||||
|
if (res.data.length > 0) {
|
||||||
|
// UPF
|
||||||
|
let arr: Record<string, any>[] = [];
|
||||||
|
res.data.forEach(i => {
|
||||||
|
if (i.neType === 'UPF') {
|
||||||
|
arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
neOtions.value = arr;
|
||||||
|
if (arr.length > 0) {
|
||||||
|
//queryParams.neRealId = arr[0].value;
|
||||||
|
fnSelectNe(arr[0].value, arr[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// UDM
|
||||||
|
let arr1: Record<string, any>[] = [];
|
||||||
|
res.data.forEach((v: any) => {
|
||||||
|
if (v.neType === 'UDM') {
|
||||||
|
arr1.push({ value: v.neId, label: v.neName, rmUid: v.rmUid });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
udmOtions.value = arr1;
|
||||||
|
if (arr1.length > 0) {
|
||||||
|
fnSelectUDM({ key: arr1[0].value });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 过滤不可用的网元
|
||||||
|
neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
|
||||||
|
(item: any) => {
|
||||||
|
return ['UDM', 'SMF', 'IMS', 'AMF', 'MME'].includes(item.value);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (neCascaderOptions.value.length === 0) {
|
||||||
|
message.warning({
|
||||||
|
content: t('common.noData'),
|
||||||
|
duration: 2,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.warning({
|
||||||
|
content: t('common.noData'),
|
||||||
|
duration: 2,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
initFlag = true;
|
||||||
|
fnGetSkim().then(() => {
|
||||||
|
loadData();
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
clearInterval(interval10s.value);
|
||||||
|
interval10s.value = null;
|
||||||
|
clearInterval(interval5s.value);
|
||||||
|
interval5s.value = null;
|
||||||
|
initFlag = false;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="dashboard-page">
|
<div class="viewport" ref="viewportDom">
|
||||||
<DashboardCards />
|
<div class="brand">
|
||||||
|
<div
|
||||||
|
class="brand-title"
|
||||||
|
@click="toggle"
|
||||||
|
:title="t('views.dashboard.overview.fullscreen')"
|
||||||
|
>
|
||||||
|
{{ t('views.dashboard.overview.title') }}
|
||||||
|
<FullscreenExitOutlined v-if="isFullscreen" />
|
||||||
|
<FullscreenOutlined v-else />
|
||||||
|
</div>
|
||||||
|
<div class="brand-desc">{{ appStore.appName }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<!--概览-->
|
||||||
|
<div class="skim panel">
|
||||||
|
<div class="inner">
|
||||||
|
<h3>
|
||||||
|
<IdcardOutlined style="color: #68d8fe" />
|
||||||
|
{{ t('views.dashboard.overview.skim.userTitle') }}
|
||||||
|
</h3>
|
||||||
|
<div class="data">
|
||||||
|
<div
|
||||||
|
class="item toRouter"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
>
|
||||||
|
<div @click="fnToRouter('Sub_2010')">
|
||||||
|
<UserOutlined
|
||||||
|
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
|
||||||
|
/>
|
||||||
|
{{ skimState.udmSubNum }}
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
<a-dropdown :trigger="['click']">
|
||||||
|
<div class="toDeep-text">
|
||||||
|
{{ t('views.dashboard.overview.skim.users') }}
|
||||||
|
<DownOutlined style="margin-left: 12px; font-size: 12px" />
|
||||||
|
</div>
|
||||||
|
<template #overlay>
|
||||||
|
<a-menu @click="fnSelectUDM">
|
||||||
|
<a-menu-item v-for="v in udmOtions" :key="v.value" :disabled="udmNeId === v.value">
|
||||||
|
{{ v.label }}
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item toRouter"
|
||||||
|
@click="fnToRouter('Ims_2080')"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
style="margin: 0 12px"
|
||||||
|
v-perms:has="['dashboard:overview:imsUeNum']"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
|
||||||
|
{{ skimState.imsUeNum }}
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
{{ t('views.dashboard.overview.skim.imsUeNum') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item toRouter"
|
||||||
|
@click="fnToRouter('Ue_2081')"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
v-perms:has="['dashboard:overview:smfUeNum']"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
|
||||||
|
{{ skimState.smfUeNum }}
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
{{ t('views.dashboard.overview.skim.smfUeNum') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="skim panel base" v-perms:has="['dashboard:overview:gnbBase']">
|
||||||
|
<div class="inner">
|
||||||
|
<h3>
|
||||||
|
<GlobalOutlined style="color: #68d8fe" /> 5G
|
||||||
|
{{ t('views.dashboard.overview.skim.baseTitle') }}
|
||||||
|
</h3>
|
||||||
|
<div class="data">
|
||||||
|
<div
|
||||||
|
class="item toRouter"
|
||||||
|
@click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
>
|
||||||
|
<div style="align-items: flex-start">
|
||||||
|
<img
|
||||||
|
:src="svgBase"
|
||||||
|
style="width: 18px; margin-right: 8px; height: 2rem"
|
||||||
|
/>
|
||||||
|
{{ skimState.gnbNum }}
|
||||||
|
</div>
|
||||||
|
<span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item toRouter"
|
||||||
|
@click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
>
|
||||||
|
<div style="align-items: flex-start">
|
||||||
|
<UserOutlined
|
||||||
|
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
|
||||||
|
/>
|
||||||
|
{{ skimState.gnbUeNum }}
|
||||||
|
</div>
|
||||||
|
<span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="skim panel base" v-perms:has="['dashboard:overview:enbBase']">
|
||||||
|
<div class="inner">
|
||||||
|
<h3>
|
||||||
|
<GlobalOutlined style="color: #68d8fe" /> 4G
|
||||||
|
{{ t('views.dashboard.overview.skim.baseTitle') }}
|
||||||
|
</h3>
|
||||||
|
<div class="data">
|
||||||
|
<div
|
||||||
|
class="item toRouter"
|
||||||
|
@click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
>
|
||||||
|
<div style="align-items: flex-start">
|
||||||
|
<img
|
||||||
|
:src="svgBase"
|
||||||
|
style="width: 18px; margin-right: 8px; height: 2rem"
|
||||||
|
/>
|
||||||
|
{{ skimState.enbNum }}
|
||||||
|
</div>
|
||||||
|
<span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="item toRouter"
|
||||||
|
@click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
>
|
||||||
|
<div style="align-items: flex-start">
|
||||||
|
<UserOutlined
|
||||||
|
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
|
||||||
|
/>
|
||||||
|
{{ skimState.enbUeNum }}
|
||||||
|
</div>
|
||||||
|
<span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户行为 -->
|
||||||
|
<div class="userActivity panel">
|
||||||
|
<div class="inner">
|
||||||
|
<h3>
|
||||||
|
<WhatsAppOutlined style="color: #68d8fe" />
|
||||||
|
{{ t('views.dashboard.overview.userActivity.title') }}
|
||||||
|
</h3>
|
||||||
|
<div class="chart">
|
||||||
|
<UserActivity />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
|
||||||
|
<!-- 实时流量 -->
|
||||||
|
<div class="upfFlow panel">
|
||||||
|
<div class="inner">
|
||||||
|
<h3
|
||||||
|
class="toRouter"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
style="display: flex; align-items: center"
|
||||||
|
>
|
||||||
|
<AreaChartOutlined style="color: #68d8fe" />
|
||||||
|
<span @click="fnToRouter('GoldTarget_2104')">{{
|
||||||
|
t('views.dashboard.overview.upfFlow.title')
|
||||||
|
}}</span>
|
||||||
|
<a-select
|
||||||
|
v-model:value="upfWhoId"
|
||||||
|
:options="neOtions"
|
||||||
|
:get-Popup-Container="getPopupContainer"
|
||||||
|
class="toDeep"
|
||||||
|
style="width: 100px; color: #fff; margin-left: auto"
|
||||||
|
@change="fnSelectNe"
|
||||||
|
/>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="chart">
|
||||||
|
<UPFFlow />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 网络拓扑 -->
|
||||||
|
<div class="topology panel">
|
||||||
|
<div class="inner">
|
||||||
|
<h3
|
||||||
|
class="toRouter"
|
||||||
|
@click="fnToRouter('TopologyArchitecture_2128')"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<ApartmentOutlined style="color: #68d8fe" />
|
||||||
|
{{ t('views.dashboard.overview.topology.title') }}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{{ t('views.dashboard.overview.topology.normal') }}:
|
||||||
|
<span class="normal"> {{ graphNodeStateNum[0] }} </span>
|
||||||
|
{{ t('views.dashboard.overview.topology.abnormal') }}:
|
||||||
|
<span class="abnormal"> {{ graphNodeStateNum[1] }} </span>
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
<div class="chart">
|
||||||
|
<Topology />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<!-- 流量统计 -->
|
||||||
|
<div class="upfFlowTotal panel">
|
||||||
|
<div class="inner">
|
||||||
|
<h3>
|
||||||
|
<span>
|
||||||
|
<SwapOutlined style="color: #68d8fe" />
|
||||||
|
{{ t('views.dashboard.overview.upfFlowTotal.title') }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- 筛选 -->
|
||||||
|
<div class="filter">
|
||||||
|
<span
|
||||||
|
:data-key="v"
|
||||||
|
:class="{ active: upfTFActive === v }"
|
||||||
|
v-for="v in ['0', '7', '30']"
|
||||||
|
:key="v"
|
||||||
|
@click="
|
||||||
|
() => {
|
||||||
|
upfTFActive = v;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
v === '0'
|
||||||
|
? '24' + t('common.units.hour')
|
||||||
|
: v + t('common.units.day')
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<div class="chart">
|
||||||
|
<!-- 数据 -->
|
||||||
|
<div class="data">
|
||||||
|
<div class="item">
|
||||||
|
<span>
|
||||||
|
<ArrowUpOutlined style="color: #597ef7" />
|
||||||
|
{{ t('views.dashboard.overview.upfFlowTotal.up') }}
|
||||||
|
</span>
|
||||||
|
<h4>{{ upfTotalFlow[upfTFActive].upFrom }}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span>
|
||||||
|
<ArrowDownOutlined style="color: #52c41a" />
|
||||||
|
{{ t('views.dashboard.overview.upfFlowTotal.down') }}
|
||||||
|
</span>
|
||||||
|
<h4>{{ upfTotalFlow[upfTFActive].downFrom }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 告警统计 -->
|
||||||
|
<div class="alarmType panel">
|
||||||
|
<div class="inner">
|
||||||
|
<h3
|
||||||
|
class="toRouter"
|
||||||
|
@click="fnToRouter('HistoryAlarm_2097')"
|
||||||
|
:title="t('views.dashboard.overview.toRouter')"
|
||||||
|
>
|
||||||
|
<PieChartOutlined style="color: #68d8fe" />
|
||||||
|
{{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
|
||||||
|
</h3>
|
||||||
|
<div class="chart">
|
||||||
|
<AlarnTypeBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 资源情况 -->
|
||||||
|
<div class="resources panel">
|
||||||
|
<div class="inner">
|
||||||
|
<h3>
|
||||||
|
<DashboardOutlined style="color: #68d8fe" />
|
||||||
|
{{ t('views.dashboard.overview.resources.title') }}：
|
||||||
|
{{ graphNodeClickID }}
|
||||||
|
</h3>
|
||||||
|
<div class="chart">
|
||||||
|
<NeResources />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.cardClass {
|
@import url('./css/index.css');
|
||||||
height: 100%;
|
.toDeep {
|
||||||
width: 100%;
|
--editor-background-color: blue;
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@import url('./css/index.css');
|
.toDeep :deep(.ant-select-selector) {
|
||||||
|
background-color: #101129;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toDeep :deep(.ant-select-arrow) {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toDeep :deep(.ant-select-selection-item) {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.toDeep-text {
|
||||||
|
color: #4c9bfd !important;
|
||||||
|
font-size: 0.844rem !important;
|
||||||
|
position: relative !important;
|
||||||
|
line-height: 2rem !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
text-align: start !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -104,12 +104,12 @@ let modalState: ModalStateType = reactive({
|
|||||||
from: {
|
from: {
|
||||||
id: undefined,
|
id: undefined,
|
||||||
neId: '001',
|
neId: '001',
|
||||||
neType: 'MF',
|
neType: 'AMF',
|
||||||
neName: '',
|
neName: '',
|
||||||
ip: '',
|
ip: '',
|
||||||
port: 33030,
|
port: 33030,
|
||||||
pvFlag: 'PNF',
|
pvFlag: 'PNF',
|
||||||
rmUid: '4400HXMF001',
|
rmUid: '4400HXAMF001',
|
||||||
neAddress: '',
|
neAddress: '',
|
||||||
dn: '',
|
dn: '',
|
||||||
vendorName: '',
|
vendorName: '',
|
||||||
@@ -321,14 +321,14 @@ function fnNeTypeChange(v: any) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
modalState.from.rmUid = `4400HX${v}${modalState.from.neId}`; // 4400HX1MF001
|
modalState.from.rmUid = `4400HX${v}${modalState.from.neId}`; // 4400HX1AMF001
|
||||||
}
|
}
|
||||||
|
|
||||||
/**表单修改网元neId */
|
/**表单修改网元neId */
|
||||||
function fnNeIdChange(e: any) {
|
function fnNeIdChange(e: any) {
|
||||||
const v = e.target.value;
|
const v = e.target.value;
|
||||||
if (v.length < 1) return;
|
if (v.length < 1) return;
|
||||||
modalState.from.rmUid = `4400HX${modalState.from.neType}${v}`; // 4400HX1MF001
|
modalState.from.rmUid = `4400HX${modalState.from.neType}${v}`; // 4400HX1AMF001
|
||||||
}
|
}
|
||||||
|
|
||||||
/**表单修改网元IP */
|
/**表单修改网元IP */
|
||||||
|
|||||||
Reference in New Issue
Block a user