-
-
+
diff --git a/src/views/dashboard/overview/components/Topology/index.vue b/src/views/dashboard/overview/components/Topology/index.vue
index 1b9e04c8..12e9d763 100644
--- a/src/views/dashboard/overview/components/Topology/index.vue
+++ b/src/views/dashboard/overview/components/Topology/index.vue
@@ -22,25 +22,18 @@ const graphG6Dom = ref${label || id}
`;
}
if (!neState) {
return `${label || id}
`;
}
-
- // 获取同类型网元列表
- const sameTypeNes = neInfoList || [];
-
- // 如果没有网元或只有一个网元，显示原来的信息
- if (sameTypeNes.length <= 1) {
- return `
+ return `
-
';
- return content;
},
itemTypes: ['node'],
});
-
+/**图绑定事件 */
+function fnGraphEvent(graph: Graph) {
+ // 节点点击
+ graph.on('node:click', evt => {
+ // 获得鼠标当前目标节点
+ const node = evt.item?.getModel();
+ if (node && node.id && !notNeNodes.includes(node.id)) {
+ graphNodeClickID.value = node.id;
+ }
+ });
+}
/**图数据渲染 */
function handleRanderGraph(
@@ -176,6 +122,7 @@ function handleRanderGraph(
graph.data(data);
graph.render();
+ fnGraphEvent(graph);
graphG6.value = graph;
@@ -188,7 +135,7 @@ function handleRanderGraph(
}
graphG6.value.changeSize(
entry.contentRect.width,
- entry.contentRect.height - 20
+ entry.contentRect.height - 30
);
graphG6.value.fitCenter();
});
@@ -203,14 +150,14 @@ function handleRanderGraph(
* 获取图组数据渲染到画布
* @param reload 是否重载数据
*/
- function fnGraphDataLoad(reload: boolean = false) {
+function fnGraphDataLoad(reload: boolean = false) {
Promise.all([
getGraphData(graphState.group),
listAllNeInfo({
bandStatus: false,
}),
])
- .then(resArr => {
+ .then(resArr => {
const graphRes = resArr[0];
const neRes = resArr[1];
if (
@@ -236,45 +183,27 @@ function handleRanderGraph(
if (!res) return;
const { combos, edges, nodes } = res.graphData;
- // 按网元类型分组
- const neTypeMap = new Map();
- res.neList.forEach(ne => {
- if (!ne.neType) return;
- if (!neTypeMap.has(ne.neType)) {
- neTypeMap.set(ne.neType, []);
- }
- neTypeMap.get(ne.neType).push(ne);
- });
-
// 节点过滤
const nf: Record${t('views.monitor.topology.state')}：
- ${
- neState.online
- ? t('views.monitor.topology.normalcy')
- : t('views.monitor.topology.exceptions')
- }
-
- ${t('views.monitor.topology.refreshTime')}：
- ${neState.refreshTime ?? '--'}
-
- ========================
`;
-
- // 为每个同类型网元添加信息
- sameTypeNes.forEach((ne: any, index: number) => {
- // 获取该网元的状态信息
- const neStateInfo = neStateMap?.[ne.neId] ||
- (ne.neId === neState.neId ? neState : {});
-
- content += `
- ${t('views.monitor.topology.name')}：${ne.neName || id + '_' + ne.neId}
- ID：${ne.neId || '--'}
- IP：${neStateInfo.neIP || ne.neIP || '--'}
- ${t('views.monitor.topology.version')}：
- ${neStateInfo.version || ne.version || '--'}
-
- ${t('views.monitor.topology.serialNum')}：
- ${neStateInfo.sn || ne.sn || '--'}
-
- ${t('views.monitor.topology.expiryDate')}：
- ${neStateInfo.expire || ne.expire || '--'}
-
- ${t('views.monitor.topology.state')}：
- ${
- neStateInfo.online !== undefined
- ? (neStateInfo.online
- ? t('views.monitor.topology.normalcy')
- : t('views.monitor.topology.exceptions'))
- : 'undefined'
- }
-
- ${index < sameTypeNes.length - 1 ? '------------------------
' : ''}
- `;
- });
-
- content += '
+
+
+
+
+
+ {{ t('views.dashboard.overview.userActivity.type') }}:
+
+
+
+
+
+
+
+ {{ t('views.dashboard.overview.userActivity.caller') }}:
+
+ {{ item.data.callerParty }}
+
+
+
+ {{ t('views.dashboard.overview.userActivity.called') }}:
+
+ {{ item.data.calledParty }}
+
+
+
+ {{ t('views.dashboard.overview.userActivity.duration') }}:
+ {{ parseDuration(item.data.callDuration) }}
+
+
+
+ {{ t('views.dashboard.overview.userActivity.time') }}:
+
+ {{
+ typeof item.data.releaseTime === 'number'
+ ? parseDateToStr(+item.data.releaseTime * 1000)
+ : parseDateToStr(item.data.releaseTime)
+ }}
+
+
+
+ {{ t('views.dashboard.overview.userActivity.result') }}:
+
+
+ >({
export const graphG6 = ref(null);
/**图点击选择 */
-export const graphNodeClickID = ref('UPF_001');
+export const graphNodeClickID = ref('UPF');
/**图节点网元信息状态 */
-export const graphNodeState = computed(() =>{
- return graphState.data.nodes.map((item: any) => ({
+export const graphNodeState = computed(() =>
+ graphState.data.nodes.map((item: any) => ({
id: item.id,
label: item.label,
neInfo: item.neInfo,
neState: item.neState,
- neInfoList:item.neInfoList,
- neStateMap: item.neStateMap,
}))
-}
-
);
/**图节点网元状态数量 */
@@ -72,69 +68,48 @@ export const graphNodeStateNum = computed(() => {
export const neStateRequestMap = ref>(new Map());
/**neStateParse 网元状态 数据解析 */
-export function neStateParse(neType: string, data: Record,neId: string) {
- // console.log('neStateParse',neType, data, neId);
-
+export function neStateParse(neType: string, data: Record) {
const { combos, edges, nodes } = graphState.data;
-
const node = nodes.find((item: Record) => item.id === neType);
- //console.log('neStateParse',node);
-
- if (!node) return;
-
- // 初始化状态映射
- if (!node.neStateMap) node.neStateMap = {};
// 更新网元状态
- const newNeState :any = {
- ...data, // 先展开data对象
+ const newNeState = Object.assign(node.neState, data, {
refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
online: !!data.cpu,
- neId: neId
- };
- // 如果是001，更新节点状态。neInfo为主要的网元信息
- if (node.neInfo && node.neInfo.neId === neId) {
- Object.assign(node.neState, newNeState);
- }
+ });
- //console.log(node.neState)
- // 无论是否为主要网元，都更新状态映射
- node.neStateMap[neId] = {...newNeState};
- // 通过 ID 查询节点实例
+ // 通过 ID 查询节点实例
const item = graphG6.value.findById(node.id);
if (item) {
- // 检查当前节点下所有网元的状态
- const allStates = Object.values(node.neStateMap);
- // 判断状态颜色
- let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
- if (allStates.some((state: any) => !state.online)) {
- // 如果有任何一个网元不正常
- stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
- }
-
- // 图片类型不能填充
- if (node.type && node.type.startsWith('image')) {
- // 更新节点
- if (node.label !== newNeState.neType) {
- graphG6.value.updateItem(item, {
- label: newNeState.neType,
- });
- }
- // 设置状态
- graphG6.value.setItemState(item, 'top-right-dot', stateColor);
- } else {
- // 更新节点
+ const stateColor = newNeState.online ? '#52c41a' : '#f5222d'; // 状态颜色
+ // 图片类型不能填充
+ if (node.type.startsWith('image')) {
+ // 更新节点
+ if (node.label !== newNeState.neName) {
graphG6.value.updateItem(item, {
- label: newNeState.neType,
- style: {
- fill: stateColor, // 填充色
- stroke: stateColor, // 填充色
- },
+ label: newNeState.neName,
});
- // 设置状态
- graphG6.value.setItemState(item, 'stroke', newNeState.online);
}
-
+ // 设置状态
+ graphG6.value.setItemState(item, 'top-right-dot', stateColor);
+ } else {
+ // 更新节点
+ graphG6.value.updateItem(item, {
+ label: newNeState.neName,
+ // neState: newNeState,
+ style: {
+ fill: stateColor, // 填充色
+ stroke: stateColor, // 填充色
+ },
+ // labelCfg: {
+ // style: {
+ // fill: '#ffffff', // 标签文本色
+ // },
+ // },
+ });
+ // 设置状态
+ graphG6.value.setItemState(item, 'stroke', newNeState.online);
+ }
}
// 设置边状态
@@ -192,6 +167,6 @@ export function topologyReset() {
nodes: [],
};
graphG6.value = null;
- graphNodeClickID.value = 'UPF_001';
+ graphNodeClickID.value = 'UPF';
neStateRequestMap.value = new Map();
}
diff --git a/src/views/dashboard/overview/hooks/useWS.ts b/src/views/dashboard/overview/hooks/useWS.ts
index 6b589dd1..0810be2e 100644
--- a/src/views/dashboard/overview/hooks/useWS.ts
+++ b/src/views/dashboard/overview/hooks/useWS.ts
@@ -34,6 +34,7 @@ export default function useWS() {
/**接收数据后回调 */
function wsMessage(res: Record) {
+ //console.log(res);
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
@@ -42,8 +43,7 @@ export default function useWS() {
// 网元状态
if (requestId && requestId.startsWith('neState')) {
const neType = requestId.split('_')[1];
- const neId = requestId.split('_')[2];
- neStateParse(neType, data,neId);
+ neStateParse(neType, data);
return;
}
diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue
index bd007e0a..b19477d1 100644
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -7,7 +7,6 @@ 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 IMSActivity from './components/IMSActivity/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import UPFFlow from './components/UPFFlow/index.vue';
import { listUDMSub } from '@/api/neData/udm_sub';
@@ -30,11 +29,6 @@ import { useRouter } from 'vue-router';
import useNeInfoStore from '@/store/modules/neinfo';
import { message } from 'ant-design-vue';
import { upfWhoId } from './hooks/useWS';
-import {
- listAMFNbStatelist,
-} from '@/api/neData/amf';
-import { listMMENbStatelist } from '@/api/neData/mme';
-
const neInfoStore = useNeInfoStore();
const router = useRouter();
@@ -58,11 +52,8 @@ type SkimStateType = {
enbNum: number;
/**4G在线用户数量 */
enbUeNum: number;
- /**5G用户总数量 */
- gNbSumNum: number;
- /**4G用户总数量 */
- eNbSumNum: number;
};
+
/**概览状态信息 */
let skimState: SkimStateType = reactive({
udmSubNum: 0,
@@ -72,9 +63,6 @@ let skimState: SkimStateType = reactive({
gnbUeNum: 0,
enbNum: 0,
enbUeNum: 0,
- gNbSumNum: 0,
- eNbSumNum: 0,
-
});
/**网元参数 */
@@ -96,34 +84,25 @@ 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);
-
- const neInfoList = node.neInfoList || [];
- if (neInfoList.length === 0) continue;
-
-
- for (const neInfo of neInfoList) {
-
- if (!neInfo.neType || !neInfo.neId) continue;
-
- wsSend({
- requestId: `neState_${neInfo.neType}_${neInfo.neId}`,
- type: 'ne_state',
- data: {
- neType: neInfo.neType,
- neId: neInfo.neId,
- },
- });
- }
+ wsSend({
+ requestId: `neState_${neType}_${neId}`,
+ type: 'ne_state',
+ data: {
+ neType: neType,
+ neId: neId,
+ },
+ });
}
}
/**获取概览信息 */
async function fnGetSkim() {
-
- let tempGnbSumNum = 0;
- let tempEnbSumNum = 0;
-
const neHandlers = new Map([
// [
// 'UDM',
@@ -155,19 +134,13 @@ async function fnGetSkim() {
'AMF',
{
request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
- process: async (res: any, neId: any) => {
+ 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
);
- const amfNbRes = await listAMFNbStatelist({ neId });
- if (amfNbRes.code === RESULT_CODE_SUCCESS && Array.isArray(amfNbRes.data)) {
- // skimState.gNbSumNum += amfNbRes.data.length;
- tempGnbSumNum += amfNbRes.data.length;
-
- }
}
},
},
@@ -176,20 +149,13 @@ async function fnGetSkim() {
'MME',
{
request: (neId: string) => listBase5G({ neType: 'MME', neId }),
- process: async (res: any, neId: any) => {
+ 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 mmeNbRes = await listMMENbStatelist({ neId });
- if (mmeNbRes.code === RESULT_CODE_SUCCESS && Array.isArray(mmeNbRes.data)) {
- // skimState.eNbSumNum += mmeNbRes.data.length;
- tempEnbSumNum += mmeNbRes.data.length;
- }
-
}
},
},
@@ -203,10 +169,9 @@ async function fnGetSkim() {
const handler = neHandlers.get(child.neType);
return handler
? {
- promise: handler.request(child.neId),
- process: handler.process,
- neId: child.neId, // 这里加上neId
- }
+ promise: handler.request(child.neId),
+ process: handler.process,
+ }
: null;
})
.filter(Boolean) || []
@@ -224,21 +189,14 @@ async function fnGetSkim() {
enbNum: 0,
enbUeNum: 0,
});
- const processPromises = results.map((result, index) => {
- const req = requests[index];
+ results.forEach((result, index) => {
if (result.status === 'fulfilled') {
- return req.process(result.value, req.neId);
+ requests[index].process(result.value);
} else {
- return req.process(0, req.neId);
+ requests[index].process(0);
}
});
- // 等待所有 process 执行完再赋值gNbSumNum等
- await Promise.all(processPromises);
-
- skimState.gNbSumNum = tempGnbSumNum;
- skimState.eNbSumNum = tempEnbSumNum;
-
// UDM
listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
@@ -247,8 +205,6 @@ async function fnGetSkim() {
});
}
-
-
/**初始数据函数 */
function loadData() {
fnGetNeState(); // 获取网元状态
@@ -277,7 +233,7 @@ function loadData() {
if (!interval5s.value || !initFlag) return;
fnGetSkim(); // 获取概览信息
fnGetNeState(); // 获取网元状态
- }, 10_000);
+ }, 5_000);
}
/**栏目信息跳转 */
@@ -304,8 +260,6 @@ function fnSelectNe(value: any, option: any) {
let udmNeId = ref('001');
let udmOtions = ref[]>([]);
-let onlineOtions = ref[]>([]);
-
/**用户数量-选择UDM */
function fnSelectUDM(e: any) {
udmNeId.value = e.key;
@@ -315,11 +269,7 @@ function fnSelectUDM(e: any) {
}
});
}
-/**资源控制-选择NE */
-function fnSelectNeRe(e: any) {
- graphNodeClickID.value = e.key;
-}
-//
+
// 定义一个方法返回 views 容器
const getPopupContainer = () => {
// 使用 ref 或其他方式来引用你的 views 容器
@@ -346,29 +296,19 @@ onMounted(() => {
//queryParams.neRealId = arr[0].value;
fnSelectNe(arr[0].value, arr[0]);
}
- //online Ne
- let onlineArr: Record[] = [];
// UDM
let arr1: Record[] = [];
res.data.forEach((v: any) => {
- if (v.status && ['UDM', 'UPF', 'AUSF', 'PCF', 'SMF', 'AMF', 'OMC', 'SMSC', 'IMS', 'MME'].includes(v.neType)) {
- onlineArr.push({ value: v.neType + '_' + v.neId, label: v.neName, rmUid: v.rmUid });
- }
if (v.neType === 'UDM') {
arr1.push({ value: v.neId, label: v.neName, rmUid: v.rmUid });
}
});
udmOtions.value = arr1;
- onlineOtions.value = onlineArr;
if (arr1.length > 0) {
fnSelectUDM({ key: arr1[0].value });
}
- if (onlineArr.length > 0) {
- fnSelectNeRe({ key: onlineArr[0].value });
- }
-
// 过滤不可用的网元
neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
(item: any) => {
@@ -410,7 +350,11 @@ onBeforeUnmount(() => {
-
+
{{ t('views.dashboard.overview.title') }}
-
+
-
-
-
-
-
+
-
+
-
+
{{ t('views.dashboard.overview.skim.users') }}
-
+
{{ v.label }}
@@ -450,8 +401,13 @@ onBeforeUnmount(() => {
-
+
![]()
{{ skimState.imsUeNum }}
@@ -460,8 +416,12 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.imsUeNum') }}
-
+
![]()
{{ skimState.smfUeNum }}
@@ -473,115 +433,36 @@ onBeforeUnmount(() => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
- ![]()
- {{ skimState.gNbSumNum }}
-
- {{ t('views.dashboard.overview.skim.gnbSumBase') }}
-
-
-
- ![]()
+ ![]()
{{ skimState.gnbNum }}
{{ t('views.dashboard.overview.skim.gnbBase') }}
-
+
-
+
-
-
+
+
- ![]()
- {{ skimState.eNbSumNum }}
-
- {{ t('views.dashboard.overview.skim.enbSumBase') }}
-
-
-
- ![]()
+ ![]()
{{ skimState.enbNum }}
{{ t('views.dashboard.overview.skim.enbBase') }}
-
+
-
-
-
-
- {{ graphNodeClickID }}
-
-
- {{ v.label }}
-
-
-
-
-
+
+
-
-
-
-
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+ {{ upfTotalFlow[upfTFActive].upFrom }}
+
+
+
+ {{ upfTotalFlow[upfTFActive].downFrom }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >({
+ /**当前图组名 */
+ group: '5GC System Architecture',
+ /**图数据 */
+ data: {
+ combos: [],
+ edges: [],
+ nodes: [],
+ },
+});
+
+/**图实例对象 */
+export const graphG6 = ref(null);
+
+/**图点击选择 */
+export const graphNodeClickID = ref('UPF_001');
+
+/**图节点网元信息状态 */
+export const graphNodeState = computed(() =>{
+ return graphState.data.nodes.map((item: any) => ({
+ id: item.id,
+ label: item.label,
+ neInfo: item.neInfo,
+ neState: item.neState,
+ neInfoList:item.neInfoList,
+ neStateMap: item.neStateMap,
+ }))
+}
+
+);
+
+/**图节点网元状态数量 */
+export const graphNodeStateNum = computed(() => {
+ let normal = 0;
+ let abnormal = 0;
+ for (const item of graphState.data.nodes) {
+ const neId = item.neState.neId;
+ if (neId) {
+ if (item.neState.online) {
+ normal += 1;
+ } else {
+ abnormal += 1;
+ }
+ }
+ }
+ return [normal, abnormal];
+});
+
+/**网元状态请求标记 */
+export const neStateRequestMap = ref>(new Map());
+
+/**neStateParse 网元状态 数据解析 */
+export function neStateParse(neType: string, data: Record,neId: string) {
+ // console.log('neStateParse',neType, data, neId);
+
+ const { combos, edges, nodes } = graphState.data;
+
+ const node = nodes.find((item: Record) => item.id === neType);
+ //console.log('neStateParse',node);
+
+ if (!node) return;
+
+ // 初始化状态映射
+ if (!node.neStateMap) node.neStateMap = {};
+
+ // 更新网元状态
+ const newNeState :any = {
+ ...data, // 先展开data对象
+ refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
+ online: !!data.cpu,
+ neId: neId
+ };
+ // 如果是001，更新节点状态。neInfo为主要的网元信息
+ if (node.neInfo && node.neInfo.neId === neId) {
+ Object.assign(node.neState, newNeState);
+ }
+
+ //console.log(node.neState)
+ // 无论是否为主要网元，都更新状态映射
+ node.neStateMap[neId] = {...newNeState};
+ // 通过 ID 查询节点实例
+ const item = graphG6.value.findById(node.id);
+ if (item) {
+ // 检查当前节点下所有网元的状态
+ const allStates = Object.values(node.neStateMap);
+ // 判断状态颜色
+ let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
+ if (allStates.some((state: any) => !state.online)) {
+ // 如果有任何一个网元不正常
+ stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
+ }
+
+ // 图片类型不能填充
+ if (node.type && node.type.startsWith('image')) {
+ // 更新节点
+ if (node.label !== newNeState.neType) {
+ graphG6.value.updateItem(item, {
+ label: newNeState.neType,
+ });
+ }
+ // 设置状态
+ graphG6.value.setItemState(item, 'top-right-dot', stateColor);
+ } else {
+ // 更新节点
+ graphG6.value.updateItem(item, {
+ label: newNeState.neType,
+ style: {
+ fill: stateColor, // 填充色
+ stroke: stateColor, // 填充色
+ },
+ });
+ // 设置状态
+ graphG6.value.setItemState(item, 'stroke', newNeState.online);
+ }
+
+ }
+
+ // 设置边状态
+ for (const edge of edges) {
+ const edgeSource: string = edge.source;
+ const edgeTarget: string = edge.target;
+ const neS = nodes.find((n: any) => n.id === edgeSource);
+ const neT = nodes.find((n: any) => n.id === edgeTarget);
+ // console.log(neS, edgeSource, neT, edgeTarget);
+
+ if (neS && neT) {
+ // 通过 ID 查询节点实例
+ // const item = graphG6.value.findById(edge.id);
+ // console.log(
+ // `${edgeSource} - ${edgeTarget}`,
+ // neS.neState.online && neT.neState.online
+ // );
+ // const stateColor = neS.neState.online && neT.neState.online ? '#000000' : '#ff4d4f'; // 状态颜色
+ // 更新边
+ // graphG6.value.updateItem(item, {
+ // label: `${edgeSource} - ${edgeTarget}`,
+ // style: {
+ // stroke: stateColor, // 填充色
+ // },
+ // labelCfg: {
+ // style: {
+ // fill: '#ffffff', // 标签文本色
+ // },
+ // },
+ // });
+ // 设置状态
+ graphG6.value.setItemState(
+ edge.id,
+ 'circle-move',
+ neS.neState.online && neT.neState.online
+ );
+ }
+ if (neS && notNeNodes.includes(edgeTarget)) {
+ graphG6.value.setItemState(edge.id, 'line-dash', neS.neState.online);
+ }
+ if (neT && notNeNodes.includes(edgeSource)) {
+ graphG6.value.setItemState(edge.id, 'line-dash', neT.neState.online);
+ }
+ }
+
+ // 请求标记复位
+ neStateRequestMap.value.set(neType, false);
+}
+
+/**属性复位 */
+export function topologyReset() {
+ graphState.data = {
+ combos: [],
+ edges: [],
+ nodes: [],
+ };
+ graphG6.value = null;
+ graphNodeClickID.value = 'UPF_001';
+ neStateRequestMap.value = new Map();
+}
diff --git a/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts b/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts
new file mode 100644
index 00000000..4366405d
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts
@@ -0,0 +1,110 @@
+import { parseDateToStr } from '@/utils/date-utils';
+import { parseSizeFromBits, parseSizeFromKbs } from '@/utils/parse-utils';
+import { ref } from 'vue';
+
+type FDType = {
+ /**时间 */
+ lineXTime: string[];
+ /**上行 N3 */
+ lineYUp: number[];
+ /**下行 N6 */
+ lineYDown: number[];
+ /**容量 */
+ cap: number;
+};
+
+/**UPF-流量数据 */
+export const upfFlowData = ref({
+ lineXTime: [],
+ lineYUp: [],
+ lineYDown: [],
+ cap: 0,
+});
+
+/**UPF-流量数据 数据解析 */
+export function upfFlowParse(data: Record) {
+ upfFlowData.value.lineXTime.push(parseDateToStr(+data['timeGroup'], 'HH:mm:ss'));
+ const upN3 = parseSizeFromKbs(+data['UPF.03'], 5);
+ upfFlowData.value.lineYUp.push(upN3[0]);
+ const downN6 = parseSizeFromKbs(+data['UPF.06'], 5);
+ upfFlowData.value.lineYDown.push(downN6[0]);
+ upfFlowData.value.cap += 1;
+ // 超过 25 弹出
+ if (upfFlowData.value.cap > 25) {
+ upfFlowData.value.lineXTime.shift();
+ upfFlowData.value.lineYUp.shift();
+ upfFlowData.value.lineYDown.shift();
+ upfFlowData.value.cap -= 1;
+ }
+}
+
+type TFType = {
+ /**上行 N3 */
+ up: number;
+ upFrom: string;
+ /**下行 N6 */
+ down: number;
+ downFrom: string;
+ /**请求标记 */
+ requestFlag: boolean;
+};
+
+/**UPF-总流量数 */
+export const upfTotalFlow = ref>({
+ '0': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+ '7': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+ '30': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+});
+
+/**UPF-总流量数 数据解析 */
+export function upfTFParse(day: string, data: Record) {
+ let { up, down } = data;
+ upfTotalFlow.value[day] = {
+ up: up,
+ upFrom: parseSizeFromBits(up),
+ down: down,
+ downFrom: parseSizeFromBits(down),
+ requestFlag: false,
+ };
+}
+
+/**UPF-总流量数 选中 */
+export const upfTFActive = ref('0');
+
+/**属性复位 */
+export function upfTotalFlowReset() {
+ upfFlowData.value = {
+ lineXTime: [],
+ lineYUp: [],
+ lineYDown: [],
+ cap: 0,
+ };
+ for (const key of Object.keys(upfTotalFlow.value)) {
+ upfTotalFlow.value[key] = {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ };
+ }
+ upfTFActive.value = '0';
+}
diff --git a/src/views/dashboard/overview2/hooks/useUserActivity.ts b/src/views/dashboard/overview2/hooks/useUserActivity.ts
new file mode 100644
index 00000000..76ffd23e
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useUserActivity.ts
@@ -0,0 +1,144 @@
+import { ref } from 'vue';
+
+/**ueEventAMFParse UE会话事件AMF 数据解析 */
+function ueEventAMFParse(
+ item: Record
+): false | Record {
+ let evData: Record = item.eventJSON;
+ if (typeof evData === 'string') {
+ try {
+ evData = JSON.parse(evData);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ return {
+ eType: 'amf_ue',
+ eId: `amf_ue_${item.id}_${Date.now()}`,
+ eTime: +item.timestamp,
+ id: item.id,
+ type: item.eventType,
+ data: evData,
+ };
+}
+
+/**ueEventMMEParse UE会话事件MME 数据解析 */
+function ueEventMMEParse(
+ item: Record
+): false | Record {
+ let evData: Record = 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
+): false | Record {
+ let evData: Record = item.cdrJSON || item.CDR;
+ if (typeof evData === 'string') {
+ try {
+ evData = JSON.parse(evData);
+ } catch (error) {
+ console.error(error);
+ return false;
+ }
+ }
+
+ // 指定显示CDR类型MOC/MTSM
+ if (!['MOC', 'MTSM'].includes(evData.recordType)) {
+ return false;
+ }
+
+ return {
+ 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 = 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 > 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 = 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[]>([]);
+/**CDR+UE事件总量 */
+export const eventTotal = ref(0);
+/**CDR/UE事件推送id */
+export const eventId = ref('');
+
+/**属性复位 */
+export function userActivityReset() {
+ eventData.value = [];
+ eventTotal.value = 0;
+ eventId.value = '';
+}
diff --git a/src/views/dashboard/overview2/hooks/useWS.ts b/src/views/dashboard/overview2/hooks/useWS.ts
new file mode 100644
index 00000000..6b589dd1
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useWS.ts
@@ -0,0 +1,224 @@
+import { RESULT_CODE_ERROR } from '@/constants/result-constants';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import { onBeforeUnmount, ref } from 'vue';
+import {
+ eventData,
+ eventListParse,
+ eventItemParseAndPush,
+ userActivityReset,
+} from './useUserActivity';
+import {
+ upfTotalFlow,
+ upfTFParse,
+ upfFlowParse,
+ upfTotalFlowReset,
+} from './useUPFTotalFlow';
+import { topologyReset, neStateParse, neStateRequestMap } from './useTopology';
+import PQueue from 'p-queue';
+
+/**UPF-的Id */
+export const upfWhoId = ref('');
+
+/**UPF-的RmUid */
+export const upfWhoRmUid = ref('');
+
+/**websocket连接 */
+export default function useWS() {
+ const ws = new WS();
+ const queue = new PQueue({ concurrency: 1, autoStart: true });
+
+ /**发消息 */
+ function wsSend(data: Record) {
+ ws.send(data);
+ }
+
+ /**接收数据后回调 */
+ function wsMessage(res: Record) {
+ const { code, requestId, data } = res;
+ if (code === RESULT_CODE_ERROR) {
+ console.warn(res.msg);
+ return;
+ }
+ // 网元状态
+ if (requestId && requestId.startsWith('neState')) {
+ const neType = requestId.split('_')[1];
+ const neId = requestId.split('_')[2];
+ neStateParse(neType, data,neId);
+ return;
+ }
+
+ // 普通信息
+ switch (requestId) {
+ // AMF_UE会话事件
+ case 'amf_1010_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('amf_ue', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ // MME_UE会话事件
+ case 'mme_1011_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('mme_ue', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ // IMS_CDR会话事件
+ case 'ims_1005_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('ims_cdr', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ //UPF-总流量数
+ case 'upf_001_0':
+ upfTFParse('0', data);
+ break;
+ case 'upf_001_7':
+ upfTFParse('7', data);
+ break;
+ case 'upf_001_30':
+ upfTFParse('30', data);
+ break;
+ }
+ // 订阅组信息
+ if (!data?.groupId) {
+ return;
+ }
+ switch (data.groupId) {
+ // kpiEvent 指标UPF
+ case '10_UPF_' + upfWhoId.value:
+ if (data.data) {
+ upfFlowParse(data.data);
+ }
+ break;
+ // AMF_UE会话事件
+ case '1010_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('amf_ue', data.data));
+ }
+ break;
+ // MME_UE会话事件
+ case '1011_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('mme_ue', data.data));
+ }
+ break;
+ // IMS_CDR会话事件
+ case '1005_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('ims_cdr', data.data));
+ }
+ break;
+ }
+ }
+
+ /**UPF-总流量数 发消息*/
+ function upfTFSend(day: '0' | '7' | '30') {
+ // 请求标记检查避免重复发送
+ if (upfTotalFlow.value[day].requestFlag) {
+ return;
+ }
+ upfTotalFlow.value[day].requestFlag = true;
+
+ ws.send({
+ requestId: `upf_001_${day}`,
+ type: 'upf_tf',
+ data: {
+ neType: 'UPF',
+ neId: '001',
+ day: Number(day),
+ },
+ });
+ }
+
+ /**userActivitySend 用户行为事件基础列表数据 发消息*/
+ function userActivitySend() {
+ // AMF_UE会话事件
+ ws.send({
+ requestId: 'amf_1010_001',
+ type: 'amf_ue',
+ data: {
+ neType: 'AMF',
+ neId: '001',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ // MME_UE会话事件
+ ws.send({
+ requestId: 'mme_1011_001',
+ type: 'mme_ue',
+ data: {
+ neType: 'MME',
+ neId: '001',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ // IMS_CDR会话事件
+ ws.send({
+ requestId: 'ims_1005_001',
+ type: 'ims_cdr',
+ data: {
+ neType: 'IMS',
+ neId: '001',
+ recordType: 'MOC',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ }
+
+ /**重新发送至UPF 10_UPF_neId */
+ function reSendUPF(neId: string) {
+ upfWhoId.value = neId;
+ //初始时时无需还原全部属性以及关闭
+ if (ws.state() === WebSocket.OPEN) {
+ ws.close();
+ // userActivityReset();
+ upfTotalFlowReset();
+ neStateRequestMap.value = new Map();
+ //topologyReset();
+ }
+ const options: OptionsType = {
+ url: '/ws',
+ params: {
+ /**订阅通道组
+ *
+ * 指标UPF (GroupID:10_neType_neId)
+ * AMF_UE会话事件(GroupID:1010_neId)
+ * MME_UE会话事件(GroupID:1011_neId)
+ * IMS_CDR会话事件(GroupID:1005_neId)
+ */
+ subGroupID: '10_UPF_' + neId + ',1010_001,1011_001,1005_001',
+ },
+ onmessage: wsMessage,
+ onerror: (ev: any) => {
+ console.error(ev);
+ },
+ };
+ ws.connect(options);
+ }
+
+ onBeforeUnmount(() => {
+ ws.close();
+ userActivityReset();
+ upfTotalFlowReset();
+ topologyReset();
+ upfWhoRmUid.value = '';
+ });
+
+ return {
+ wsSend,
+ userActivitySend,
+ upfTFSend,
+ reSendUPF,
+ };
+}
diff --git a/src/views/dashboard/overview/images/bj.png b/src/views/dashboard/overview2/images/bj.png
similarity index 100%
rename from src/views/dashboard/overview/images/bj.png
rename to src/views/dashboard/overview2/images/bj.png
diff --git a/src/views/dashboard/overview2/images/border.png b/src/views/dashboard/overview2/images/border.png
new file mode 100644
index 0000000000000000000000000000000000000000..b854cea479a6d114c6b906d85684a7913ea5703e
GIT binary patch
literal 2418
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
Khid!K%s&AzyC`=6
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview2/images/brand.png b/src/views/dashboard/overview2/images/brand.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f6fb6a099fdb49c59bbd5a3dc4b8dc82aaf44ec
GIT binary patch
literal 14403
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
A8~^|S
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview2/images/line.png b/src/views/dashboard/overview2/images/line.png
new file mode 100644
index 0000000000000000000000000000000000000000..34e99aca630e1d8d6eb397f04e4b036f897e8fa4
GIT binary patch
literal 237
zcmV0H3dQqa!Y1+3ILTu%iT5S+orP8%1n3nC3Gu=Sfbg#HdtC00000NkvXXu0mjf>9=FR
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview/images/newBrand.png b/src/views/dashboard/overview2/images/newBrand.png
similarity index 100%
rename from src/views/dashboard/overview/images/newBrand.png
rename to src/views/dashboard/overview2/images/newBrand.png
diff --git a/src/views/dashboard/overview2/images/rect.png b/src/views/dashboard/overview2/images/rect.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c0ebf00e7d7b0887cd6d585eaebbf50d8016365
GIT binary patch
literal 1089
zcmeAS@N?(olHy`uVBq!ia0vp^D}eY72OE%l(De2k0|N_(r;B4q#hkadPxeWtN;q89
zzu>~_=%OT~Fp;&R@VxSeTQ(ktY|b}xFgnfhoTjDWa^Yp(^tZb$(jU(~{i!^3-KziJ
zm#W{ZdEMLiw$|2o{+hqGc1Z?np3IzCS(v7`_Gc^C6jNJUWBv6vr#eL54mSS$>Ws|V
zkNcQX#n+uVlWkmFdHcJV#_l2;ZS3Ir|@xEM7;Ss$SCmUN6@eRJ0{#^1scm
zR06X8ZGE-n)I8gWn|ni-E2jsXTE{)bq;Zm3z$F&1Sq`4U8ktP0z6+LcjtY*H05NN<
z%W?_HW%`?yc5nVnd*9Ak)%G9l&z!L~{=Azru;{<(i?=g(S{m=4DIm&!Pvvf;(%+jc
z8b8+W{xNxGWp!Gei6Y}9?g_EXlyP3Cr=j#6jY5NQm%Tjy)E|`D*jJurkM(*s~h<{~2Pi{}`
z4_&)+@xN{hKmdzcAW
PG%$F&`njxgN@xNAXiLX#
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview/images/title.png b/src/views/dashboard/overview2/images/title.png
similarity index 100%
rename from src/views/dashboard/overview/images/title.png
rename to src/views/dashboard/overview2/images/title.png
diff --git a/src/views/dashboard/overview2/index.vue b/src/views/dashboard/overview2/index.vue
new file mode 100644
index 00000000..bd007e0a
--- /dev/null
+++ b/src/views/dashboard/overview2/index.vue
@@ -0,0 +1,705 @@
+
+
+
+
+
+
+ {{ t('views.dashboard.overview.title') }}
+
+
+
+
+
+
+
+
+ {{ t('views.dashboard.overview.skim.users') }}
+
+
+ {{ v.label }}
+
+
+
+
+
+
+
+
+ ![]()
+ {{ skimState.imsUeNum }}
+
+
+ {{ t('views.dashboard.overview.skim.imsUeNum') }}
+
+
+
+
+ ![]()
+ {{ skimState.smfUeNum }}
+
+
+ {{ t('views.dashboard.overview.skim.smfUeNum') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+ {{ skimState.gNbSumNum }}
+
+ {{ t('views.dashboard.overview.skim.gnbSumBase') }}
+
+
+
+ ![]()
+ {{ skimState.gnbNum }}
+
+ {{ t('views.dashboard.overview.skim.gnbBase') }}
+
+
+
+
+
+
+
+
+ ![]()
+ {{ skimState.eNbSumNum }}
+
+ {{ t('views.dashboard.overview.skim.enbSumBase') }}
+
+
+
+ ![]()
+ {{ skimState.enbNum }}
+
+ {{ t('views.dashboard.overview.skim.enbBase') }}
+
+
+
+
+
+
+
+ {{ graphNodeClickID }}
+
+
+ {{ v.label }}
+
+
+
+
+
+
+
+
+
+
+
+
- UE IP and maxk
+ UE IP and mask
+
+
-
+
{{ v.label }}
@@ -450,8 +401,13 @@ onBeforeUnmount(() => {
-
-
-
{{ t('views.dashboard.overview.skim.users') }}
+
![]()
{{ skimState.imsUeNum }}
@@ -460,8 +416,12 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.overview.skim.imsUeNum') }}
-
-
-
+
![]()
{{ skimState.smfUeNum }}
@@ -473,115 +433,36 @@ onBeforeUnmount(() => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+
- ![]()
- {{ skimState.gNbSumNum }}
-
- {{ t('views.dashboard.overview.skim.gnbSumBase') }}
-
-
-
- ![]()
+ ![]()
{{ skimState.gnbNum }}
{{ t('views.dashboard.overview.skim.gnbBase') }}
-
+
-
+
-
-
+
+
- ![]()
- {{ skimState.eNbSumNum }}
-
- {{ t('views.dashboard.overview.skim.enbSumBase') }}
-
-
-
- ![]()
+ ![]()
{{ skimState.enbNum }}
{{ t('views.dashboard.overview.skim.enbBase') }}
-
+
-
-
-
-
- {{ graphNodeClickID }}
-
-
- {{ v.label }}
-
-
-
-
-
+
+
-
-
-
-
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+ {{ upfTotalFlow[upfTFActive].upFrom }}
+
+
+
+ {{ upfTotalFlow[upfTFActive].downFrom }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >({
+ /**当前图组名 */
+ group: '5GC System Architecture',
+ /**图数据 */
+ data: {
+ combos: [],
+ edges: [],
+ nodes: [],
+ },
+});
+
+/**图实例对象 */
+export const graphG6 = ref(null);
+
+/**图点击选择 */
+export const graphNodeClickID = ref('UPF_001');
+
+/**图节点网元信息状态 */
+export const graphNodeState = computed(() =>{
+ return graphState.data.nodes.map((item: any) => ({
+ id: item.id,
+ label: item.label,
+ neInfo: item.neInfo,
+ neState: item.neState,
+ neInfoList:item.neInfoList,
+ neStateMap: item.neStateMap,
+ }))
+}
+
+);
+
+/**图节点网元状态数量 */
+export const graphNodeStateNum = computed(() => {
+ let normal = 0;
+ let abnormal = 0;
+ for (const item of graphState.data.nodes) {
+ const neId = item.neState.neId;
+ if (neId) {
+ if (item.neState.online) {
+ normal += 1;
+ } else {
+ abnormal += 1;
+ }
+ }
+ }
+ return [normal, abnormal];
+});
+
+/**网元状态请求标记 */
+export const neStateRequestMap = ref>(new Map());
+
+/**neStateParse 网元状态 数据解析 */
+export function neStateParse(neType: string, data: Record,neId: string) {
+ // console.log('neStateParse',neType, data, neId);
+
+ const { combos, edges, nodes } = graphState.data;
+
+ const node = nodes.find((item: Record) => item.id === neType);
+ //console.log('neStateParse',node);
+
+ if (!node) return;
+
+ // 初始化状态映射
+ if (!node.neStateMap) node.neStateMap = {};
+
+ // 更新网元状态
+ const newNeState :any = {
+ ...data, // 先展开data对象
+ refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
+ online: !!data.cpu,
+ neId: neId
+ };
+ // 如果是001，更新节点状态。neInfo为主要的网元信息
+ if (node.neInfo && node.neInfo.neId === neId) {
+ Object.assign(node.neState, newNeState);
+ }
+
+ //console.log(node.neState)
+ // 无论是否为主要网元，都更新状态映射
+ node.neStateMap[neId] = {...newNeState};
+ // 通过 ID 查询节点实例
+ const item = graphG6.value.findById(node.id);
+ if (item) {
+ // 检查当前节点下所有网元的状态
+ const allStates = Object.values(node.neStateMap);
+ // 判断状态颜色
+ let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
+ if (allStates.some((state: any) => !state.online)) {
+ // 如果有任何一个网元不正常
+ stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
+ }
+
+ // 图片类型不能填充
+ if (node.type && node.type.startsWith('image')) {
+ // 更新节点
+ if (node.label !== newNeState.neType) {
+ graphG6.value.updateItem(item, {
+ label: newNeState.neType,
+ });
+ }
+ // 设置状态
+ graphG6.value.setItemState(item, 'top-right-dot', stateColor);
+ } else {
+ // 更新节点
+ graphG6.value.updateItem(item, {
+ label: newNeState.neType,
+ style: {
+ fill: stateColor, // 填充色
+ stroke: stateColor, // 填充色
+ },
+ });
+ // 设置状态
+ graphG6.value.setItemState(item, 'stroke', newNeState.online);
+ }
+
+ }
+
+ // 设置边状态
+ for (const edge of edges) {
+ const edgeSource: string = edge.source;
+ const edgeTarget: string = edge.target;
+ const neS = nodes.find((n: any) => n.id === edgeSource);
+ const neT = nodes.find((n: any) => n.id === edgeTarget);
+ // console.log(neS, edgeSource, neT, edgeTarget);
+
+ if (neS && neT) {
+ // 通过 ID 查询节点实例
+ // const item = graphG6.value.findById(edge.id);
+ // console.log(
+ // `${edgeSource} - ${edgeTarget}`,
+ // neS.neState.online && neT.neState.online
+ // );
+ // const stateColor = neS.neState.online && neT.neState.online ? '#000000' : '#ff4d4f'; // 状态颜色
+ // 更新边
+ // graphG6.value.updateItem(item, {
+ // label: `${edgeSource} - ${edgeTarget}`,
+ // style: {
+ // stroke: stateColor, // 填充色
+ // },
+ // labelCfg: {
+ // style: {
+ // fill: '#ffffff', // 标签文本色
+ // },
+ // },
+ // });
+ // 设置状态
+ graphG6.value.setItemState(
+ edge.id,
+ 'circle-move',
+ neS.neState.online && neT.neState.online
+ );
+ }
+ if (neS && notNeNodes.includes(edgeTarget)) {
+ graphG6.value.setItemState(edge.id, 'line-dash', neS.neState.online);
+ }
+ if (neT && notNeNodes.includes(edgeSource)) {
+ graphG6.value.setItemState(edge.id, 'line-dash', neT.neState.online);
+ }
+ }
+
+ // 请求标记复位
+ neStateRequestMap.value.set(neType, false);
+}
+
+/**属性复位 */
+export function topologyReset() {
+ graphState.data = {
+ combos: [],
+ edges: [],
+ nodes: [],
+ };
+ graphG6.value = null;
+ graphNodeClickID.value = 'UPF_001';
+ neStateRequestMap.value = new Map();
+}
diff --git a/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts b/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts
new file mode 100644
index 00000000..4366405d
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts
@@ -0,0 +1,110 @@
+import { parseDateToStr } from '@/utils/date-utils';
+import { parseSizeFromBits, parseSizeFromKbs } from '@/utils/parse-utils';
+import { ref } from 'vue';
+
+type FDType = {
+ /**时间 */
+ lineXTime: string[];
+ /**上行 N3 */
+ lineYUp: number[];
+ /**下行 N6 */
+ lineYDown: number[];
+ /**容量 */
+ cap: number;
+};
+
+/**UPF-流量数据 */
+export const upfFlowData = ref({
+ lineXTime: [],
+ lineYUp: [],
+ lineYDown: [],
+ cap: 0,
+});
+
+/**UPF-流量数据 数据解析 */
+export function upfFlowParse(data: Record) {
+ upfFlowData.value.lineXTime.push(parseDateToStr(+data['timeGroup'], 'HH:mm:ss'));
+ const upN3 = parseSizeFromKbs(+data['UPF.03'], 5);
+ upfFlowData.value.lineYUp.push(upN3[0]);
+ const downN6 = parseSizeFromKbs(+data['UPF.06'], 5);
+ upfFlowData.value.lineYDown.push(downN6[0]);
+ upfFlowData.value.cap += 1;
+ // 超过 25 弹出
+ if (upfFlowData.value.cap > 25) {
+ upfFlowData.value.lineXTime.shift();
+ upfFlowData.value.lineYUp.shift();
+ upfFlowData.value.lineYDown.shift();
+ upfFlowData.value.cap -= 1;
+ }
+}
+
+type TFType = {
+ /**上行 N3 */
+ up: number;
+ upFrom: string;
+ /**下行 N6 */
+ down: number;
+ downFrom: string;
+ /**请求标记 */
+ requestFlag: boolean;
+};
+
+/**UPF-总流量数 */
+export const upfTotalFlow = ref>({
+ '0': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+ '7': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+ '30': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+});
+
+/**UPF-总流量数 数据解析 */
+export function upfTFParse(day: string, data: Record) {
+ let { up, down } = data;
+ upfTotalFlow.value[day] = {
+ up: up,
+ upFrom: parseSizeFromBits(up),
+ down: down,
+ downFrom: parseSizeFromBits(down),
+ requestFlag: false,
+ };
+}
+
+/**UPF-总流量数 选中 */
+export const upfTFActive = ref('0');
+
+/**属性复位 */
+export function upfTotalFlowReset() {
+ upfFlowData.value = {
+ lineXTime: [],
+ lineYUp: [],
+ lineYDown: [],
+ cap: 0,
+ };
+ for (const key of Object.keys(upfTotalFlow.value)) {
+ upfTotalFlow.value[key] = {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ };
+ }
+ upfTFActive.value = '0';
+}
diff --git a/src/views/dashboard/overview2/hooks/useUserActivity.ts b/src/views/dashboard/overview2/hooks/useUserActivity.ts
new file mode 100644
index 00000000..76ffd23e
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useUserActivity.ts
@@ -0,0 +1,144 @@
+import { ref } from 'vue';
+
+/**ueEventAMFParse UE会话事件AMF 数据解析 */
+function ueEventAMFParse(
+ item: Record
+): false | Record {
+ let evData: Record = item.eventJSON;
+ if (typeof evData === 'string') {
+ try {
+ evData = JSON.parse(evData);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ return {
+ eType: 'amf_ue',
+ eId: `amf_ue_${item.id}_${Date.now()}`,
+ eTime: +item.timestamp,
+ id: item.id,
+ type: item.eventType,
+ data: evData,
+ };
+}
+
+/**ueEventMMEParse UE会话事件MME 数据解析 */
+function ueEventMMEParse(
+ item: Record
+): false | Record {
+ let evData: Record = 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
+): false | Record {
+ let evData: Record = item.cdrJSON || item.CDR;
+ if (typeof evData === 'string') {
+ try {
+ evData = JSON.parse(evData);
+ } catch (error) {
+ console.error(error);
+ return false;
+ }
+ }
+
+ // 指定显示CDR类型MOC/MTSM
+ if (!['MOC', 'MTSM'].includes(evData.recordType)) {
+ return false;
+ }
+
+ return {
+ 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 = 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 > 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 = 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[]>([]);
+/**CDR+UE事件总量 */
+export const eventTotal = ref(0);
+/**CDR/UE事件推送id */
+export const eventId = ref('');
+
+/**属性复位 */
+export function userActivityReset() {
+ eventData.value = [];
+ eventTotal.value = 0;
+ eventId.value = '';
+}
diff --git a/src/views/dashboard/overview2/hooks/useWS.ts b/src/views/dashboard/overview2/hooks/useWS.ts
new file mode 100644
index 00000000..6b589dd1
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useWS.ts
@@ -0,0 +1,224 @@
+import { RESULT_CODE_ERROR } from '@/constants/result-constants';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import { onBeforeUnmount, ref } from 'vue';
+import {
+ eventData,
+ eventListParse,
+ eventItemParseAndPush,
+ userActivityReset,
+} from './useUserActivity';
+import {
+ upfTotalFlow,
+ upfTFParse,
+ upfFlowParse,
+ upfTotalFlowReset,
+} from './useUPFTotalFlow';
+import { topologyReset, neStateParse, neStateRequestMap } from './useTopology';
+import PQueue from 'p-queue';
+
+/**UPF-的Id */
+export const upfWhoId = ref('');
+
+/**UPF-的RmUid */
+export const upfWhoRmUid = ref('');
+
+/**websocket连接 */
+export default function useWS() {
+ const ws = new WS();
+ const queue = new PQueue({ concurrency: 1, autoStart: true });
+
+ /**发消息 */
+ function wsSend(data: Record) {
+ ws.send(data);
+ }
+
+ /**接收数据后回调 */
+ function wsMessage(res: Record) {
+ const { code, requestId, data } = res;
+ if (code === RESULT_CODE_ERROR) {
+ console.warn(res.msg);
+ return;
+ }
+ // 网元状态
+ if (requestId && requestId.startsWith('neState')) {
+ const neType = requestId.split('_')[1];
+ const neId = requestId.split('_')[2];
+ neStateParse(neType, data,neId);
+ return;
+ }
+
+ // 普通信息
+ switch (requestId) {
+ // AMF_UE会话事件
+ case 'amf_1010_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('amf_ue', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ // MME_UE会话事件
+ case 'mme_1011_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('mme_ue', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ // IMS_CDR会话事件
+ case 'ims_1005_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('ims_cdr', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ //UPF-总流量数
+ case 'upf_001_0':
+ upfTFParse('0', data);
+ break;
+ case 'upf_001_7':
+ upfTFParse('7', data);
+ break;
+ case 'upf_001_30':
+ upfTFParse('30', data);
+ break;
+ }
+ // 订阅组信息
+ if (!data?.groupId) {
+ return;
+ }
+ switch (data.groupId) {
+ // kpiEvent 指标UPF
+ case '10_UPF_' + upfWhoId.value:
+ if (data.data) {
+ upfFlowParse(data.data);
+ }
+ break;
+ // AMF_UE会话事件
+ case '1010_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('amf_ue', data.data));
+ }
+ break;
+ // MME_UE会话事件
+ case '1011_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('mme_ue', data.data));
+ }
+ break;
+ // IMS_CDR会话事件
+ case '1005_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('ims_cdr', data.data));
+ }
+ break;
+ }
+ }
+
+ /**UPF-总流量数 发消息*/
+ function upfTFSend(day: '0' | '7' | '30') {
+ // 请求标记检查避免重复发送
+ if (upfTotalFlow.value[day].requestFlag) {
+ return;
+ }
+ upfTotalFlow.value[day].requestFlag = true;
+
+ ws.send({
+ requestId: `upf_001_${day}`,
+ type: 'upf_tf',
+ data: {
+ neType: 'UPF',
+ neId: '001',
+ day: Number(day),
+ },
+ });
+ }
+
+ /**userActivitySend 用户行为事件基础列表数据 发消息*/
+ function userActivitySend() {
+ // AMF_UE会话事件
+ ws.send({
+ requestId: 'amf_1010_001',
+ type: 'amf_ue',
+ data: {
+ neType: 'AMF',
+ neId: '001',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ // MME_UE会话事件
+ ws.send({
+ requestId: 'mme_1011_001',
+ type: 'mme_ue',
+ data: {
+ neType: 'MME',
+ neId: '001',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ // IMS_CDR会话事件
+ ws.send({
+ requestId: 'ims_1005_001',
+ type: 'ims_cdr',
+ data: {
+ neType: 'IMS',
+ neId: '001',
+ recordType: 'MOC',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ }
+
+ /**重新发送至UPF 10_UPF_neId */
+ function reSendUPF(neId: string) {
+ upfWhoId.value = neId;
+ //初始时时无需还原全部属性以及关闭
+ if (ws.state() === WebSocket.OPEN) {
+ ws.close();
+ // userActivityReset();
+ upfTotalFlowReset();
+ neStateRequestMap.value = new Map();
+ //topologyReset();
+ }
+ const options: OptionsType = {
+ url: '/ws',
+ params: {
+ /**订阅通道组
+ *
+ * 指标UPF (GroupID:10_neType_neId)
+ * AMF_UE会话事件(GroupID:1010_neId)
+ * MME_UE会话事件(GroupID:1011_neId)
+ * IMS_CDR会话事件(GroupID:1005_neId)
+ */
+ subGroupID: '10_UPF_' + neId + ',1010_001,1011_001,1005_001',
+ },
+ onmessage: wsMessage,
+ onerror: (ev: any) => {
+ console.error(ev);
+ },
+ };
+ ws.connect(options);
+ }
+
+ onBeforeUnmount(() => {
+ ws.close();
+ userActivityReset();
+ upfTotalFlowReset();
+ topologyReset();
+ upfWhoRmUid.value = '';
+ });
+
+ return {
+ wsSend,
+ userActivitySend,
+ upfTFSend,
+ reSendUPF,
+ };
+}
diff --git a/src/views/dashboard/overview/images/bj.png b/src/views/dashboard/overview2/images/bj.png
similarity index 100%
rename from src/views/dashboard/overview/images/bj.png
rename to src/views/dashboard/overview2/images/bj.png
diff --git a/src/views/dashboard/overview2/images/border.png b/src/views/dashboard/overview2/images/border.png
new file mode 100644
index 0000000000000000000000000000000000000000..b854cea479a6d114c6b906d85684a7913ea5703e
GIT binary patch
literal 2418
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
Khid!K%s&AzyC`=6
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview2/images/brand.png b/src/views/dashboard/overview2/images/brand.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f6fb6a099fdb49c59bbd5a3dc4b8dc82aaf44ec
GIT binary patch
literal 14403
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
A8~^|S
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview2/images/line.png b/src/views/dashboard/overview2/images/line.png
new file mode 100644
index 0000000000000000000000000000000000000000..34e99aca630e1d8d6eb397f04e4b036f897e8fa4
GIT binary patch
literal 237
zcmV0H3dQqa!Y1+3ILTu%iT5S+orP8%1n3nC3Gu=Sfbg#HdtC00000NkvXXu0mjf>9=FR
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview/images/newBrand.png b/src/views/dashboard/overview2/images/newBrand.png
similarity index 100%
rename from src/views/dashboard/overview/images/newBrand.png
rename to src/views/dashboard/overview2/images/newBrand.png
diff --git a/src/views/dashboard/overview2/images/rect.png b/src/views/dashboard/overview2/images/rect.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c0ebf00e7d7b0887cd6d585eaebbf50d8016365
GIT binary patch
literal 1089
zcmeAS@N?(olHy`uVBq!ia0vp^D}eY72OE%l(De2k0|N_(r;B4q#hkadPxeWtN;q89
zzu>~_=%OT~Fp;&R@VxSeTQ(ktY|b}xFgnfhoTjDWa^Yp(^tZb$(jU(~{i!^3-KziJ
zm#W{ZdEMLiw$|2o{+hqGc1Z?np3IzCS(v7`_Gc^C6jNJUWBv6vr#eL54mSS$>Ws|V
zkNcQX#n+uVlWkmFdHcJV#_l2;ZS3Ir|@xEM7;Ss$SCmUN6@eRJ0{#^1scm
zR06X8ZGE-n)I8gWn|ni-E2jsXTE{)bq;Zm3z$F&1Sq`4U8ktP0z6+LcjtY*H05NN<
z%W?_HW%`?yc5nVnd*9Ak)%G9l&z!L~{=Azru;{<(i?=g(S{m=4DIm&!Pvvf;(%+jc
z8b8+W{xNxGWp!Gei6Y}9?g_EXlyP3Cr=j#6jY5NQm%Tjy)E|`D*jJurkM(*s~h<{~2Pi{}`
z4_&)+@xN{hKmdzcAW
PG%$F&`njxgN@xNAXiLX#
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview/images/title.png b/src/views/dashboard/overview2/images/title.png
similarity index 100%
rename from src/views/dashboard/overview/images/title.png
rename to src/views/dashboard/overview2/images/title.png
diff --git a/src/views/dashboard/overview2/index.vue b/src/views/dashboard/overview2/index.vue
new file mode 100644
index 00000000..bd007e0a
--- /dev/null
+++ b/src/views/dashboard/overview2/index.vue
@@ -0,0 +1,705 @@
+
+
+
+
+
+
+ {{ t('views.dashboard.overview.title') }}
+
+
+
+
+
+
+
+
+ {{ t('views.dashboard.overview.skim.users') }}
+
+
+ {{ v.label }}
+
+
+
+
+
+
+
+
+ ![]()
+ {{ skimState.imsUeNum }}
+
+
+ {{ t('views.dashboard.overview.skim.imsUeNum') }}
+
+
+
+
+ ![]()
+ {{ skimState.smfUeNum }}
+
+
+ {{ t('views.dashboard.overview.skim.smfUeNum') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+ {{ skimState.gNbSumNum }}
+
+ {{ t('views.dashboard.overview.skim.gnbSumBase') }}
+
+
+
+ ![]()
+ {{ skimState.gnbNum }}
+
+ {{ t('views.dashboard.overview.skim.gnbBase') }}
+
+
+
+
+
+
+
+
+ ![]()
+ {{ skimState.eNbSumNum }}
+
+ {{ t('views.dashboard.overview.skim.enbSumBase') }}
+
+
+
+ ![]()
+ {{ skimState.enbNum }}
+
+ {{ t('views.dashboard.overview.skim.enbBase') }}
+
+
+
+
+
+
+
+ {{ graphNodeClickID }}
+
+
+ {{ v.label }}
+
+
+
+
+
+
+
+
+
+
+
+
- UE IP and maxk
+ UE IP and mask
+
+
-
+
-
-
- ![]()
- {{ skimState.gNbSumNum }}
-
- {{ t('views.dashboard.overview.skim.gnbSumBase') }}
-
-
-
- ![]()
+ ![]()
{{ skimState.gnbNum }}
{{ t('views.dashboard.overview.skim.gnbBase') }}
+
-
{{ t('views.dashboard.overview.skim.gnbUeNum') }}
@@ -589,32 +470,36 @@ onBeforeUnmount(() => {
+
-
-
+
+
-
- ![]()
- {{ skimState.eNbSumNum }}
-
- {{ t('views.dashboard.overview.skim.enbSumBase') }}
-
-
-
- ![]()
+ ![]()
{{ skimState.enbNum }}
{{ t('views.dashboard.overview.skim.enbBase') }}
+
-
-
-
-
-
-
{{ t('views.dashboard.overview.skim.enbUeNum') }}
@@ -623,48 +508,150 @@ onBeforeUnmount(() => {
+
+
-
-
-
-
-
-
-
-
-
- {{ graphNodeClickID }}
-
-
- {{ v.label }}
-
-
-
-
-
+
+
-
- {{ graphNodeClickID }}
-
-
-
+
+
+
+
+
+
+
-
-
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+ >({
+ /**当前图组名 */
+ group: '5GC System Architecture',
+ /**图数据 */
+ data: {
+ combos: [],
+ edges: [],
+ nodes: [],
+ },
+});
+
+/**图实例对象 */
+export const graphG6 = ref(null);
+
+/**图点击选择 */
+export const graphNodeClickID = ref('UPF_001');
+
+/**图节点网元信息状态 */
+export const graphNodeState = computed(() =>{
+ return graphState.data.nodes.map((item: any) => ({
+ id: item.id,
+ label: item.label,
+ neInfo: item.neInfo,
+ neState: item.neState,
+ neInfoList:item.neInfoList,
+ neStateMap: item.neStateMap,
+ }))
+}
+
+);
+
+/**图节点网元状态数量 */
+export const graphNodeStateNum = computed(() => {
+ let normal = 0;
+ let abnormal = 0;
+ for (const item of graphState.data.nodes) {
+ const neId = item.neState.neId;
+ if (neId) {
+ if (item.neState.online) {
+ normal += 1;
+ } else {
+ abnormal += 1;
+ }
+ }
+ }
+ return [normal, abnormal];
+});
+
+/**网元状态请求标记 */
+export const neStateRequestMap = ref>(new Map());
+
+/**neStateParse 网元状态 数据解析 */
+export function neStateParse(neType: string, data: Record,neId: string) {
+ // console.log('neStateParse',neType, data, neId);
+
+ const { combos, edges, nodes } = graphState.data;
+
+ const node = nodes.find((item: Record) => item.id === neType);
+ //console.log('neStateParse',node);
+
+ if (!node) return;
+
+ // 初始化状态映射
+ if (!node.neStateMap) node.neStateMap = {};
+
+ // 更新网元状态
+ const newNeState :any = {
+ ...data, // 先展开data对象
+ refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
+ online: !!data.cpu,
+ neId: neId
+ };
+ // 如果是001，更新节点状态。neInfo为主要的网元信息
+ if (node.neInfo && node.neInfo.neId === neId) {
+ Object.assign(node.neState, newNeState);
+ }
+
+ //console.log(node.neState)
+ // 无论是否为主要网元，都更新状态映射
+ node.neStateMap[neId] = {...newNeState};
+ // 通过 ID 查询节点实例
+ const item = graphG6.value.findById(node.id);
+ if (item) {
+ // 检查当前节点下所有网元的状态
+ const allStates = Object.values(node.neStateMap);
+ // 判断状态颜色
+ let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
+ if (allStates.some((state: any) => !state.online)) {
+ // 如果有任何一个网元不正常
+ stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
+ }
+
+ // 图片类型不能填充
+ if (node.type && node.type.startsWith('image')) {
+ // 更新节点
+ if (node.label !== newNeState.neType) {
+ graphG6.value.updateItem(item, {
+ label: newNeState.neType,
+ });
+ }
+ // 设置状态
+ graphG6.value.setItemState(item, 'top-right-dot', stateColor);
+ } else {
+ // 更新节点
+ graphG6.value.updateItem(item, {
+ label: newNeState.neType,
+ style: {
+ fill: stateColor, // 填充色
+ stroke: stateColor, // 填充色
+ },
+ });
+ // 设置状态
+ graphG6.value.setItemState(item, 'stroke', newNeState.online);
+ }
+
+ }
+
+ // 设置边状态
+ for (const edge of edges) {
+ const edgeSource: string = edge.source;
+ const edgeTarget: string = edge.target;
+ const neS = nodes.find((n: any) => n.id === edgeSource);
+ const neT = nodes.find((n: any) => n.id === edgeTarget);
+ // console.log(neS, edgeSource, neT, edgeTarget);
+
+ if (neS && neT) {
+ // 通过 ID 查询节点实例
+ // const item = graphG6.value.findById(edge.id);
+ // console.log(
+ // `${edgeSource} - ${edgeTarget}`,
+ // neS.neState.online && neT.neState.online
+ // );
+ // const stateColor = neS.neState.online && neT.neState.online ? '#000000' : '#ff4d4f'; // 状态颜色
+ // 更新边
+ // graphG6.value.updateItem(item, {
+ // label: `${edgeSource} - ${edgeTarget}`,
+ // style: {
+ // stroke: stateColor, // 填充色
+ // },
+ // labelCfg: {
+ // style: {
+ // fill: '#ffffff', // 标签文本色
+ // },
+ // },
+ // });
+ // 设置状态
+ graphG6.value.setItemState(
+ edge.id,
+ 'circle-move',
+ neS.neState.online && neT.neState.online
+ );
+ }
+ if (neS && notNeNodes.includes(edgeTarget)) {
+ graphG6.value.setItemState(edge.id, 'line-dash', neS.neState.online);
+ }
+ if (neT && notNeNodes.includes(edgeSource)) {
+ graphG6.value.setItemState(edge.id, 'line-dash', neT.neState.online);
+ }
+ }
+
+ // 请求标记复位
+ neStateRequestMap.value.set(neType, false);
+}
+
+/**属性复位 */
+export function topologyReset() {
+ graphState.data = {
+ combos: [],
+ edges: [],
+ nodes: [],
+ };
+ graphG6.value = null;
+ graphNodeClickID.value = 'UPF_001';
+ neStateRequestMap.value = new Map();
+}
diff --git a/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts b/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts
new file mode 100644
index 00000000..4366405d
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useUPFTotalFlow.ts
@@ -0,0 +1,110 @@
+import { parseDateToStr } from '@/utils/date-utils';
+import { parseSizeFromBits, parseSizeFromKbs } from '@/utils/parse-utils';
+import { ref } from 'vue';
+
+type FDType = {
+ /**时间 */
+ lineXTime: string[];
+ /**上行 N3 */
+ lineYUp: number[];
+ /**下行 N6 */
+ lineYDown: number[];
+ /**容量 */
+ cap: number;
+};
+
+/**UPF-流量数据 */
+export const upfFlowData = ref({
+ lineXTime: [],
+ lineYUp: [],
+ lineYDown: [],
+ cap: 0,
+});
+
+/**UPF-流量数据 数据解析 */
+export function upfFlowParse(data: Record) {
+ upfFlowData.value.lineXTime.push(parseDateToStr(+data['timeGroup'], 'HH:mm:ss'));
+ const upN3 = parseSizeFromKbs(+data['UPF.03'], 5);
+ upfFlowData.value.lineYUp.push(upN3[0]);
+ const downN6 = parseSizeFromKbs(+data['UPF.06'], 5);
+ upfFlowData.value.lineYDown.push(downN6[0]);
+ upfFlowData.value.cap += 1;
+ // 超过 25 弹出
+ if (upfFlowData.value.cap > 25) {
+ upfFlowData.value.lineXTime.shift();
+ upfFlowData.value.lineYUp.shift();
+ upfFlowData.value.lineYDown.shift();
+ upfFlowData.value.cap -= 1;
+ }
+}
+
+type TFType = {
+ /**上行 N3 */
+ up: number;
+ upFrom: string;
+ /**下行 N6 */
+ down: number;
+ downFrom: string;
+ /**请求标记 */
+ requestFlag: boolean;
+};
+
+/**UPF-总流量数 */
+export const upfTotalFlow = ref>({
+ '0': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+ '7': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+ '30': {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ },
+});
+
+/**UPF-总流量数 数据解析 */
+export function upfTFParse(day: string, data: Record) {
+ let { up, down } = data;
+ upfTotalFlow.value[day] = {
+ up: up,
+ upFrom: parseSizeFromBits(up),
+ down: down,
+ downFrom: parseSizeFromBits(down),
+ requestFlag: false,
+ };
+}
+
+/**UPF-总流量数 选中 */
+export const upfTFActive = ref('0');
+
+/**属性复位 */
+export function upfTotalFlowReset() {
+ upfFlowData.value = {
+ lineXTime: [],
+ lineYUp: [],
+ lineYDown: [],
+ cap: 0,
+ };
+ for (const key of Object.keys(upfTotalFlow.value)) {
+ upfTotalFlow.value[key] = {
+ up: 0,
+ upFrom: '0 B',
+ down: 0,
+ downFrom: '0 B',
+ requestFlag: false,
+ };
+ }
+ upfTFActive.value = '0';
+}
diff --git a/src/views/dashboard/overview2/hooks/useUserActivity.ts b/src/views/dashboard/overview2/hooks/useUserActivity.ts
new file mode 100644
index 00000000..76ffd23e
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useUserActivity.ts
@@ -0,0 +1,144 @@
+import { ref } from 'vue';
+
+/**ueEventAMFParse UE会话事件AMF 数据解析 */
+function ueEventAMFParse(
+ item: Record
+): false | Record {
+ let evData: Record = item.eventJSON;
+ if (typeof evData === 'string') {
+ try {
+ evData = JSON.parse(evData);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ return {
+ eType: 'amf_ue',
+ eId: `amf_ue_${item.id}_${Date.now()}`,
+ eTime: +item.timestamp,
+ id: item.id,
+ type: item.eventType,
+ data: evData,
+ };
+}
+
+/**ueEventMMEParse UE会话事件MME 数据解析 */
+function ueEventMMEParse(
+ item: Record
+): false | Record {
+ let evData: Record = 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
+): false | Record {
+ let evData: Record = item.cdrJSON || item.CDR;
+ if (typeof evData === 'string') {
+ try {
+ evData = JSON.parse(evData);
+ } catch (error) {
+ console.error(error);
+ return false;
+ }
+ }
+
+ // 指定显示CDR类型MOC/MTSM
+ if (!['MOC', 'MTSM'].includes(evData.recordType)) {
+ return false;
+ }
+
+ return {
+ 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 = 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 > 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 = 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[]>([]);
+/**CDR+UE事件总量 */
+export const eventTotal = ref(0);
+/**CDR/UE事件推送id */
+export const eventId = ref('');
+
+/**属性复位 */
+export function userActivityReset() {
+ eventData.value = [];
+ eventTotal.value = 0;
+ eventId.value = '';
+}
diff --git a/src/views/dashboard/overview2/hooks/useWS.ts b/src/views/dashboard/overview2/hooks/useWS.ts
new file mode 100644
index 00000000..6b589dd1
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useWS.ts
@@ -0,0 +1,224 @@
+import { RESULT_CODE_ERROR } from '@/constants/result-constants';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import { onBeforeUnmount, ref } from 'vue';
+import {
+ eventData,
+ eventListParse,
+ eventItemParseAndPush,
+ userActivityReset,
+} from './useUserActivity';
+import {
+ upfTotalFlow,
+ upfTFParse,
+ upfFlowParse,
+ upfTotalFlowReset,
+} from './useUPFTotalFlow';
+import { topologyReset, neStateParse, neStateRequestMap } from './useTopology';
+import PQueue from 'p-queue';
+
+/**UPF-的Id */
+export const upfWhoId = ref('');
+
+/**UPF-的RmUid */
+export const upfWhoRmUid = ref('');
+
+/**websocket连接 */
+export default function useWS() {
+ const ws = new WS();
+ const queue = new PQueue({ concurrency: 1, autoStart: true });
+
+ /**发消息 */
+ function wsSend(data: Record) {
+ ws.send(data);
+ }
+
+ /**接收数据后回调 */
+ function wsMessage(res: Record) {
+ const { code, requestId, data } = res;
+ if (code === RESULT_CODE_ERROR) {
+ console.warn(res.msg);
+ return;
+ }
+ // 网元状态
+ if (requestId && requestId.startsWith('neState')) {
+ const neType = requestId.split('_')[1];
+ const neId = requestId.split('_')[2];
+ neStateParse(neType, data,neId);
+ return;
+ }
+
+ // 普通信息
+ switch (requestId) {
+ // AMF_UE会话事件
+ case 'amf_1010_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('amf_ue', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ // MME_UE会话事件
+ case 'mme_1011_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('mme_ue', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ // IMS_CDR会话事件
+ case 'ims_1005_001':
+ if (Array.isArray(data.rows)) {
+ eventListParse('ims_cdr', data);
+ eventData.value.sort((a, b) => b.eTime - a.eTime);
+ }
+ break;
+ //UPF-总流量数
+ case 'upf_001_0':
+ upfTFParse('0', data);
+ break;
+ case 'upf_001_7':
+ upfTFParse('7', data);
+ break;
+ case 'upf_001_30':
+ upfTFParse('30', data);
+ break;
+ }
+ // 订阅组信息
+ if (!data?.groupId) {
+ return;
+ }
+ switch (data.groupId) {
+ // kpiEvent 指标UPF
+ case '10_UPF_' + upfWhoId.value:
+ if (data.data) {
+ upfFlowParse(data.data);
+ }
+ break;
+ // AMF_UE会话事件
+ case '1010_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('amf_ue', data.data));
+ }
+ break;
+ // MME_UE会话事件
+ case '1011_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('mme_ue', data.data));
+ }
+ break;
+ // IMS_CDR会话事件
+ case '1005_001':
+ if (data.data) {
+ queue.add(() => eventItemParseAndPush('ims_cdr', data.data));
+ }
+ break;
+ }
+ }
+
+ /**UPF-总流量数 发消息*/
+ function upfTFSend(day: '0' | '7' | '30') {
+ // 请求标记检查避免重复发送
+ if (upfTotalFlow.value[day].requestFlag) {
+ return;
+ }
+ upfTotalFlow.value[day].requestFlag = true;
+
+ ws.send({
+ requestId: `upf_001_${day}`,
+ type: 'upf_tf',
+ data: {
+ neType: 'UPF',
+ neId: '001',
+ day: Number(day),
+ },
+ });
+ }
+
+ /**userActivitySend 用户行为事件基础列表数据 发消息*/
+ function userActivitySend() {
+ // AMF_UE会话事件
+ ws.send({
+ requestId: 'amf_1010_001',
+ type: 'amf_ue',
+ data: {
+ neType: 'AMF',
+ neId: '001',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ // MME_UE会话事件
+ ws.send({
+ requestId: 'mme_1011_001',
+ type: 'mme_ue',
+ data: {
+ neType: 'MME',
+ neId: '001',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ // IMS_CDR会话事件
+ ws.send({
+ requestId: 'ims_1005_001',
+ type: 'ims_cdr',
+ data: {
+ neType: 'IMS',
+ neId: '001',
+ recordType: 'MOC',
+ sortField: 'timestamp',
+ sortOrder: 'desc',
+ pageNum: 1,
+ pageSize: 20,
+ },
+ });
+ }
+
+ /**重新发送至UPF 10_UPF_neId */
+ function reSendUPF(neId: string) {
+ upfWhoId.value = neId;
+ //初始时时无需还原全部属性以及关闭
+ if (ws.state() === WebSocket.OPEN) {
+ ws.close();
+ // userActivityReset();
+ upfTotalFlowReset();
+ neStateRequestMap.value = new Map();
+ //topologyReset();
+ }
+ const options: OptionsType = {
+ url: '/ws',
+ params: {
+ /**订阅通道组
+ *
+ * 指标UPF (GroupID:10_neType_neId)
+ * AMF_UE会话事件(GroupID:1010_neId)
+ * MME_UE会话事件(GroupID:1011_neId)
+ * IMS_CDR会话事件(GroupID:1005_neId)
+ */
+ subGroupID: '10_UPF_' + neId + ',1010_001,1011_001,1005_001',
+ },
+ onmessage: wsMessage,
+ onerror: (ev: any) => {
+ console.error(ev);
+ },
+ };
+ ws.connect(options);
+ }
+
+ onBeforeUnmount(() => {
+ ws.close();
+ userActivityReset();
+ upfTotalFlowReset();
+ topologyReset();
+ upfWhoRmUid.value = '';
+ });
+
+ return {
+ wsSend,
+ userActivitySend,
+ upfTFSend,
+ reSendUPF,
+ };
+}
diff --git a/src/views/dashboard/overview/images/bj.png b/src/views/dashboard/overview2/images/bj.png
similarity index 100%
rename from src/views/dashboard/overview/images/bj.png
rename to src/views/dashboard/overview2/images/bj.png
diff --git a/src/views/dashboard/overview2/images/border.png b/src/views/dashboard/overview2/images/border.png
new file mode 100644
index 0000000000000000000000000000000000000000..b854cea479a6d114c6b906d85684a7913ea5703e
GIT binary patch
literal 2418
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
Khid!K%s&AzyC`=6
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview2/images/brand.png b/src/views/dashboard/overview2/images/brand.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f6fb6a099fdb49c59bbd5a3dc4b8dc82aaf44ec
GIT binary patch
literal 14403
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
A8~^|S
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview2/images/line.png b/src/views/dashboard/overview2/images/line.png
new file mode 100644
index 0000000000000000000000000000000000000000..34e99aca630e1d8d6eb397f04e4b036f897e8fa4
GIT binary patch
literal 237
zcmV0H3dQqa!Y1+3ILTu%iT5S+orP8%1n3nC3Gu=Sfbg#HdtC00000NkvXXu0mjf>9=FR
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview/images/newBrand.png b/src/views/dashboard/overview2/images/newBrand.png
similarity index 100%
rename from src/views/dashboard/overview/images/newBrand.png
rename to src/views/dashboard/overview2/images/newBrand.png
diff --git a/src/views/dashboard/overview2/images/rect.png b/src/views/dashboard/overview2/images/rect.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c0ebf00e7d7b0887cd6d585eaebbf50d8016365
GIT binary patch
literal 1089
zcmeAS@N?(olHy`uVBq!ia0vp^D}eY72OE%l(De2k0|N_(r;B4q#hkadPxeWtN;q89
zzu>~_=%OT~Fp;&R@VxSeTQ(ktY|b}xFgnfhoTjDWa^Yp(^tZb$(jU(~{i!^3-KziJ
zm#W{ZdEMLiw$|2o{+hqGc1Z?np3IzCS(v7`_Gc^C6jNJUWBv6vr#eL54mSS$>Ws|V
zkNcQX#n+uVlWkmFdHcJV#_l2;ZS3Ir|@xEM7;Ss$SCmUN6@eRJ0{#^1scm
zR06X8ZGE-n)I8gWn|ni-E2jsXTE{)bq;Zm3z$F&1Sq`4U8ktP0z6+LcjtY*H05NN<
z%W?_HW%`?yc5nVnd*9Ak)%G9l&z!L~{=Azru;{<(i?=g(S{m=4DIm&!Pvvf;(%+jc
z8b8+W{xNxGWp!Gei6Y}9?g_EXlyP3Cr=j#6jY5NQm%Tjy)E|`D*jJurkM(*s~h<{~2Pi{}`
z4_&)+@xN{hKmdzcAW
PG%$F&`njxgN@xNAXiLX#
literal 0
HcmV?d00001
diff --git a/src/views/dashboard/overview/images/title.png b/src/views/dashboard/overview2/images/title.png
similarity index 100%
rename from src/views/dashboard/overview/images/title.png
rename to src/views/dashboard/overview2/images/title.png
diff --git a/src/views/dashboard/overview2/index.vue b/src/views/dashboard/overview2/index.vue
new file mode 100644
index 00000000..bd007e0a
--- /dev/null
+++ b/src/views/dashboard/overview2/index.vue
@@ -0,0 +1,705 @@
+
+
+
+
- UE IP and maxk
+ UE IP and mask
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ upfTotalFlow[upfTFActive].upFrom }}
+
+
+
+ {{ upfTotalFlow[upfTFActive].downFrom }}
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -674,24 +661,22 @@ onBeforeUnmount(() => {
diff --git a/src/views/dashboard/overview/components/IMSActivity/index.vue b/src/views/dashboard/overview2/components/IMSActivity/index.vue
similarity index 100%
rename from src/views/dashboard/overview/components/IMSActivity/index.vue
rename to src/views/dashboard/overview2/components/IMSActivity/index.vue
diff --git a/src/views/dashboard/overview2/components/NeResources/index.vue b/src/views/dashboard/overview2/components/NeResources/index.vue
new file mode 100644
index 00000000..669214c8
--- /dev/null
+++ b/src/views/dashboard/overview2/components/NeResources/index.vue
@@ -0,0 +1,352 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/overview2/components/Topology/index.vue b/src/views/dashboard/overview2/components/Topology/index.vue
new file mode 100644
index 00000000..1b9e04c8
--- /dev/null
+++ b/src/views/dashboard/overview2/components/Topology/index.vue
@@ -0,0 +1,337 @@
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/overview2/components/UPFFlow/index.vue b/src/views/dashboard/overview2/components/UPFFlow/index.vue
new file mode 100644
index 00000000..ac864183
--- /dev/null
+++ b/src/views/dashboard/overview2/components/UPFFlow/index.vue
@@ -0,0 +1,291 @@
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/overview2/components/UserActivity/index.vue b/src/views/dashboard/overview2/components/UserActivity/index.vue
new file mode 100644
index 00000000..614b19a2
--- /dev/null
+++ b/src/views/dashboard/overview2/components/UserActivity/index.vue
@@ -0,0 +1,324 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/overview2/css/index.css b/src/views/dashboard/overview2/css/index.css
new file mode 100644
index 00000000..35fff9fb
--- /dev/null
+++ b/src/views/dashboard/overview2/css/index.css
@@ -0,0 +1,399 @@
+.viewport {
+ /* 限定大小 */
+ min-width: 1024px;
+ max-width: 1920px;
+ min-height: 780px;
+ margin: 0 auto;
+ position: relative;
+ display: flex;
+ padding: 5rem 0.833rem 0;
+ line-height: 1.15;
+ background-image: url(../images/bj.png);
+ height: 100vh;
+ margin-bottom: -20px;
+ background-size:80% 80%;
+ background-attachment:fixed;
+ -webkit-background-size: cover;
+}
+
+
+.column {
+ flex: 3;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
+
+/* 边框 */
+.panel {
+ box-sizing: border-box;
+ border: 2px solid rgba(252, 252, 252, 0);
+ border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
+ position: relative;
+ margin-bottom: 0.833rem;
+}
+.panel .inner {
+ /* 装内容 */
+ /* height: 60px; */
+ position: absolute;
+ top: -2.125rem;
+ right: -1.583rem;
+ bottom: -0.875rem;
+ left: -5.5rem;
+ padding: 1rem 1.5rem;
+}
+.panel h3 {
+ font-size: 0.833rem;
+ color: #fff;
+}
+
+.leftright {
+ width: 100%;
+ min-height: 2.5rem;
+ background: url(../images/title.png) no-repeat center center;
+ background-size: 100%;
+ color: #4c9bfd;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ padding: 0.5rem 1.2rem;
+ border-radius: 0.7rem 0.7rem 0 0;
+ margin: 0;
+ box-sizing: border-box;
+ text-shadow: 0 1px 4px #000a;
+ flex-wrap: nowrap;
+ /* 保证内容不换行且居中 */
+}
+
+.leftright .title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ font-size: 1rem;
+ padding-left: 0;
+}
+
+.centerStyle {
+ width: 100%;
+ min-height: 2.5rem;
+ background: url(../images/title.png) no-repeat center center;
+ background-size: 90%;
+ color: #4c9bfd;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ padding: 0.5rem 1.2rem;
+ border-radius: 0.7rem 0.7rem 0 0;
+ margin: 0;
+ box-sizing: border-box;
+ text-shadow: 0 1px 4px #000a;
+ flex-wrap: nowrap;
+ /* 保证内容不换行且居中 */
+}
+
+.centerStyle .title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ font-size: 1rem;
+ padding-left: 0;
+}
+
+/* 总览标题 */
+.brand {
+ background-image: url(../images/newBrand.png);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+ position: absolute;
+ top: 0.833rem;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ cursor: pointer;
+}
+.brand .brand-title {
+ color: #ffffff;
+ font-size: 1.4rem;
+ font-weight: 600;
+ padding-top: 1rem;
+ padding-bottom: 0.5rem;
+}
+.brand .brand-desc {
+ color: #d9d9d9;
+ font-size: 0.9rem;
+}
+
+/* 实时流量 */
+.upfFlow {
+ /* min-height: 16rem; */
+ height: 40%;
+}
+.upfFlow .inner .chart {
+ width: 100%;
+ height: 100%;
+ margin-top: 0rem;
+}
+
+/* 网络拓扑 */
+.topology {
+ /* min-height: 27.8rem; */
+ height: 46.4%;
+ flex: 1;
+}
+.topology .inner h3 {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: baseline;
+}
+.topology .inner h3 .normal {
+ color: #52c41a;
+ font-size: 1.1rem;
+ margin-right: 8px;
+}
+.topology .inner h3 .abnormal {
+ color: #f5222d;
+ font-size: 1.1rem;
+}
+.topology .inner .chart {
+ width: 100%;
+ height: 100%;
+ margin-top: 1rem;
+}
+
+/* 概览区域 */
+.skim {
+ /* min-height: 7.78rem; */
+ height: 14.4%;
+}
+.skim .inner .data {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 90%;
+}
+.skim .inner .data .item {
+ display: flex;
+ flex-direction: column;
+ align-items: baseline;
+ width: 33%;
+}
+.skim .inner .data .item div {
+ font-size: 1.467rem;
+ color: #fff;
+ margin-bottom: 0;
+ display: flex;
+ align-items: baseline;
+ line-height: 2rem;
+}
+.skim .inner .data .item span {
+ color: #4c9bfd;
+ font-size: 0.833rem;
+ width: 100%;
+ position: relative;
+ line-height: 2rem;
+ white-space: nowrap;
+ text-align: start;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.skim .inner .data .item span::before {
+ content: ' ';
+ position: absolute;
+ top: 2px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 0;
+ background-image: linear-gradient(to right, #fff, #fff0);
+ height: 1px;
+ border-radius: 4px;
+}
+
+/* 概览区域 衍生基站信息 */
+.skim.base {
+ height: 11.25%;
+}
+
+.skim.base .inner .data {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 75%;
+}
+.skim.base .inner .data .item {
+ display: flex;
+ flex-direction: column;
+ align-items: baseline;
+ width: 50%;
+}
+
+/* 用户行为 */
+.userActivity {
+ /* min-height: 35.8rem; */
+ height: 54.6%;
+ flex: 1;
+}
+.userActivity .inner .chart {
+ width: 100%;
+ height: 100%;
+ margin-top: 1rem;
+}
+
+/* 流量统计 */
+.upfFlowTotal1 {
+ /* min-height: 7.5rem; */
+ height: 14.4%;
+}
+.upfFlowTotal1 .inner h3 {
+ display: flex;
+ justify-content: space-between;
+}
+.upfFlowTotal1 .inner h3 .filter {
+ display: flex;
+}
+.upfFlowTotal1 .inner h3 .filter span {
+ display: block;
+ height: 0.75rem;
+ line-height: 1;
+ padding: 0 0.75rem;
+ color: #1950c4;
+ font-size: 0.75rem;
+ border-right: 0.083rem solid #00f2f1;
+ cursor: pointer;
+}
+.upfFlowTotal1 .inner h3 .filter span:first-child {
+ padding-left: 0;
+}
+.upfFlowTotal1 .inner h3 .filter span:last-child {
+ border-right: none;
+}
+.upfFlowTotal1 .inner h3 .filter span.active {
+ color: #fff;
+ font-size: 0.833rem;
+}
+.upfFlowTotal1 .inner .chart {
+ width: 100%;
+ height: 100%;
+ margin-top: 0.1rem;
+}
+.upfFlowTotal1 .inner .chart .data {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ height: 60%;
+}
+.upfFlowTotal1 .inner .chart .data .item {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+}
+.upfFlowTotal1 .inner .chart .data .item h4 {
+ font-size: 1.467rem;
+ color: #fff;
+ margin-bottom: 0;
+}
+.upfFlowTotal1 .inner .chart .data .item span {
+ color: #4c9bfd;
+ font-size: 0.867rem;
+}
+
+
+/* 流量统计 */
+.upfFlowTotal {
+ /* min-height: 7.5rem; */
+ height: 14.4%;
+}
+.upfFlowTotal .inner h3 {
+ display: flex;
+ justify-content: space-between;
+}
+.upfFlowTotal .inner h3 .filter {
+ display: flex;
+}
+.upfFlowTotal .inner h3 .filter span {
+ display: block;
+ height: 0.75rem;
+ line-height: 1;
+ padding: 0 0.75rem;
+ color: #1950c4;
+ font-size: 0.75rem;
+ border-right: 0.083rem solid #00f2f1;
+ cursor: pointer;
+}
+.upfFlowTotal .inner h3 .filter span:first-child {
+ padding-left: 0;
+}
+.upfFlowTotal .inner h3 .filter span:last-child {
+ border-right: none;
+}
+.upfFlowTotal .inner h3 .filter span.active {
+ color: #fff;
+ font-size: 0.833rem;
+}
+.upfFlowTotal .inner .chart {
+ width: 100%;
+ height: 100%;
+ margin-top: 0.1rem;
+}
+.upfFlowTotal .inner .chart .data {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ height: 60%;
+}
+.upfFlowTotal .inner .chart .data .item {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+}
+.upfFlowTotal .inner .chart .data .item h4 {
+ font-size: 1.467rem;
+ color: #fff;
+ margin-bottom: 0;
+}
+.upfFlowTotal .inner .chart .data .item span {
+ color: #4c9bfd;
+ font-size: 0.867rem;
+}
+
+/* 资源情况 */
+.resources {
+ /* min-height: 18rem; */
+ height: 24.4%;
+}
+.resources .inner .chart {
+ width: 100%;
+ height: 100%;
+ margin-top: 1rem;
+}
+
+
+/* 告警统计 */
+.alarmType {
+ /* min-height: 25rem; */
+ height: 35%;
+}
+.alarmType .inner .chart {
+ width: 100%;
+ height: 100%;
+}
+
+/* 跳转鼠标悬浮 */
+.toRouter:hover {
+ cursor: pointer;
+ color: #fff !important;
+}
+.toRouter:hover > *,
+.toRouter:hover > * > * {
+ color: #fff !important;
+}
diff --git a/src/views/dashboard/overview2/hooks/useTopology.ts b/src/views/dashboard/overview2/hooks/useTopology.ts
new file mode 100644
index 00000000..ff83a840
--- /dev/null
+++ b/src/views/dashboard/overview2/hooks/useTopology.ts
@@ -0,0 +1,197 @@
+import { parseDateToStr } from '@/utils/date-utils';
+import { computed, reactive, ref } from 'vue';
+
+/**非网元元素 */
+export const notNeNodes = [
+ '5GC',
+ 'DN',
+ 'UE',
+ 'Base',
+ 'lan',
+ 'lan1',
+ 'lan2',
+ 'lan3',
+ 'lan4',
+ 'lan5',
+ 'lan6',
+ 'lan7',
+ 'LAN',
+ 'NR',
+];
+
+/**图状态 */
+export const graphState = reactive
+
+
+
+
+
+
+ {{ t('views.dashboard.overview.userActivity.type') }}:
+
+
+
+ IMSI: {{ item.data.imsi }}
+
+
+
+
+
+ GNB ID: {{ item.data.gNBID }}
+
+
+ Cell ID: {{ item.data.cellID }}
+
+
+ TAC ID: {{ item.data.tacID }}
+
+
+ {{ t('views.dashboard.overview.userActivity.time') }}:
+
+ {{ parseDateToStr(item.data.time) }}
+
+
+ {{ parseDateToStr(+item.data.timestamp * 1000) }}
+
+ -
+
+
+ {{ t('views.dashboard.overview.userActivity.result') }}:
+
+
+
+ {{ t('views.dashboard.overview.userActivity.result') }}:
+ {{ t('views.dashboard.overview.userActivity.resultOK') }}
+
+
+ {{ t('views.dashboard.overview.userActivity.result') }}:
+
+
+
+
+
+
+
+
+
+ {{ t('views.dashboard.overview.userActivity.type') }}:
+
+ {{
+ dict.ueEventType
+ .find(s => s.value === item.type)
+ ?.label.replace('CM', 'ECM')
+ }}
+
+
+
+
+ IMSI: {{ item.data?.imsi }}
+
+
+
+
+
+ ENB ID: {{ item.data.eNBID }}
+
+
+ Cell ID: {{ item.data.cellID }}
+
+
+ TAC ID: {{ item.data.tacID }}
+
+
+ {{ t('views.dashboard.overview.userActivity.time') }}:
+
+ {{ parseDateToStr(item.data.time) }}
+
+
+ {{
+ typeof item.data?.timestamp === 'number'
+ ? parseDateToStr(+item.data?.timestamp * 1000)
+ : parseDateToStr(item.data?.timestamp)
+ }}
+
+ -
+
+
+ {{ t('views.dashboard.overview.userActivity.result') }}:
+
+
+
+ {{ t('views.dashboard.overview.userActivity.result') }}:
+ {{ t('views.dashboard.overview.userActivity.resultOK') }}
+
+
+ {{ t('views.dashboard.overview.userActivity.result') }}:
+
+
+
+
+
+
+
diff --git a/src/views/ne/neQuickSetup/components/Para5GForm.vue b/src/views/ne/neQuickSetup/components/Para5GForm.vue
index d77ed0f1..3d92a614 100644
--- a/src/views/ne/neQuickSetup/components/Para5GForm.vue
+++ b/src/views/ne/neQuickSetup/components/Para5GForm.vue
@@ -175,7 +175,7 @@ watch(
>
+
+
+
+ {{ t('views.dashboard.overview.title') }}
+
+ {{ appStore.appName }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ v.label }}
+
+
+
+
+
+
+
+
+
+
+ {{ t('views.dashboard.overview.skim.users') }}
+
+
+
+
+
+ ![]()
+ {{ skimState.imsUeNum }}
+
+
+ {{ t('views.dashboard.overview.skim.imsUeNum') }}
+
+
+
+
+ ![]()
+ {{ skimState.smfUeNum }}
+
+
+ {{ t('views.dashboard.overview.skim.smfUeNum') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+ {{ skimState.gNbSumNum }}
+
+ {{ t('views.dashboard.overview.skim.gnbSumBase') }}
+
+
+
+ ![]()
+ {{ skimState.gnbNum }}
+
+ {{ t('views.dashboard.overview.skim.gnbBase') }}
+
+
+
+
+ {{ t('views.dashboard.overview.skim.gnbUeNum') }}
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ ![]()
+ {{ skimState.eNbSumNum }}
+
+ {{ t('views.dashboard.overview.skim.enbSumBase') }}
+
+
+
+ ![]()
+ {{ skimState.enbNum }}
+
+ {{ t('views.dashboard.overview.skim.enbBase') }}
+
+
+
+
+ {{ t('views.dashboard.overview.skim.enbUeNum') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ graphNodeClickID }}
+
+
+ {{ v.label }}
+
+
+
+
+
+
+
+ {{ graphNodeClickID }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+