diff --git a/.env.development b/.env.development index 62c7e36d..86692991 100644 --- a/.env.development +++ b/.env.development @@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network EMS" VITE_APP_CODE = "CN EMS" # 应用版本 -VITE_APP_VERSION = "2.2401.5" +VITE_APP_VERSION = "2.2401.6" # 接口基础URL地址-不带/后缀 VITE_API_BASE_URL = "/omc-api" diff --git a/.env.production b/.env.production index 9b780321..a547fde2 100644 --- a/.env.production +++ b/.env.production @@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network EMS" VITE_APP_CODE = "CN EMS" # 应用版本 -VITE_APP_VERSION = "2.240126.5" +VITE_APP_VERSION = "2.240130.6" # 接口基础URL地址-不带/后缀 VITE_API_BASE_URL = "/omc-api" diff --git a/src/api/faultManage/actAlarm.ts b/src/api/faultManage/actAlarm.ts index 5fa6c669..f4793515 100644 --- a/src/api/faultManage/actAlarm.ts +++ b/src/api/faultManage/actAlarm.ts @@ -288,14 +288,13 @@ export async function exportAll(query: Record) { return result; } - /** * 展示页全部告警 * @param query 查询参数 * @returns bolb */ -export async function mainGet() { - let totalSQL = `select count(*) as value,orig_severity as name from alarm group by orig_severity`; +export async function origGet() { + let totalSQL = `select count(*) as value,orig_severity as name from alarm group by orig_severity`; // 发起请求 const result = await request({ @@ -305,6 +304,43 @@ export async function mainGet() { SQL: totalSQL, }, }); + //// + + // 解析数据 + if (result.code === RESULT_CODE_SUCCESS) { + const itemData = result.data.data; + if (Array.isArray(itemData)) { + const v = itemData[0]['alarm']; + if (Array.isArray(v)) { + result.data = v; + } + if (v === null) { + result.data = []; + } + } + } + return result; +} + +/** + * 查询前三的网元 + * @param filterFlag 查询参数 + * @returns object + */ +export async function top3Sel(filterFlag?: string) { + let filter = ` WHERE orig_severity='${filterFlag}'`; + if (!filterFlag) filter = ''; + + let top3SQL = `select count(*) as value,ne_type as name from alarm ${filter} group by ne_type ORDER BY value desc limit 0,3 `; + + // 发起请求 + const result = await request({ + url: `/api/rest/databaseManagement/v1/select/omc_db/alarm`, + method: 'get', + params: { + SQL: top3SQL, + }, + }); // 解析数据 if (result.code === RESULT_CODE_SUCCESS) { @@ -314,7 +350,10 @@ export async function mainGet() { if (Array.isArray(v)) { result.data = v; } + if (v === null) { + result.data = []; + } } } return result; -} \ No newline at end of file +} diff --git a/src/components/ChartGraphG6/index.vue b/src/components/ChartGraphG6/index.vue deleted file mode 100644 index 983d8181..00000000 --- a/src/components/ChartGraphG6/index.vue +++ /dev/null @@ -1,392 +0,0 @@ - - - - - diff --git a/src/components/ChartLine/index.vue b/src/components/ChartLine/index.vue index 91c0a14a..1539da20 100644 --- a/src/components/ChartLine/index.vue +++ b/src/components/ChartLine/index.vue @@ -1,8 +1,5 @@ - + + diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 2d117895..7fa20344 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -509,27 +509,30 @@ export default { alarmType: { title: "Alarm Statistics", }, + alarmTypeBar:{ + alarmSum:'Alarm Statistics', + topTitle:"Alarm-TOP 3 ", + }, resources: { - title: "Resource Situation", + title: "Resource Summary", sysMem: "Memory", sysCpu: "CPU", neCpu: "NE CPU", }, topology: { title: "Network Topology", + normal: "Normal", + abnormal: "AbNormal", }, - cdrEvent: { - title: "CDR User Activity", - id: "Serial", + userActivity: { + title: "User Activity", type: "Type", - msg: "Info", + duration: "Duration", + caller: "Caller", + called: "Called", + result: "Result", + time: "Time", }, - ueEvent: { - title: "UE User Activity", - id: "IMSI", - type: "Type", - msg: "Info", - } }, }, neUser: { diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index ad1a21f2..eefc239b 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -509,6 +509,10 @@ export default { alarmType: { title: "告警统计", }, + alarmTypeBar:{ + alarmSum:'告警统计', + topTitle:"告警总数TOP3", + }, resources: { title: "资源情况", sysMem: "系统内存", @@ -517,19 +521,18 @@ export default { }, topology: { title: "网络拓扑", + normal: "正常", + abnormal: "异常", }, - cdrEvent: { - title: "CDR用户活动", - id: "编号", + userActivity: { + title: "用户活动", type: "类型", - msg: "信息", + duration: "时长", + caller: "主叫", + called: "被叫", + result: "结果", + time: "时间", }, - ueEvent: { - title: "UE用户活动", - id: "IMSI", - type: "类型", - msg: "信息", - } } }, neUser: { diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 34b1b9f1..96daf0ad 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -122,26 +122,6 @@ const useUserStore = defineStore('user', { this.phonenumber = user.phonenumber; this.email = user.email; this.sex = user.sex; - // 额外信息 - try { - this.profile = JSON.parse(user.profile); - } catch (error) { - console.error(error); - this.profile = { - color: { - critical: '#e8994a', - event: '#c5d2dc', - major: '#494040', - minor: '#5f70a8', - sound: 'custom', - warning: '#b9e1dd', - }, - custom: 'hrxz.com-exz2s3uxhc47391.mp3', - pwdErrCount: 0, - pwdErrTime: 0, - sound: 'custom', - }; - } // 验证返回的roles是否是一个非空数组 if (Array.isArray(roles) && roles.length > 0) { diff --git a/src/utils/date-utils.ts b/src/utils/date-utils.ts index f739569a..c82d78d4 100644 --- a/src/utils/date-utils.ts +++ b/src/utils/date-utils.ts @@ -73,6 +73,29 @@ export function diffValue( return value; } +/** + * 格式化秒值为 ?h?m?s + * @param seconds 2558 秒 + * @returns 1h42m38s + */ +export function parseDuration(seconds: number | string) { + seconds = Number(seconds) || 0; + const duration = dayjs().startOf('day').subtract(seconds, 'seconds'); + const secondsLeft = duration.format('s'); + const minutes = duration.format('m'); + const hours = duration.format('H'); + if (+hours > 0) { + return `${hours}h${minutes}m${secondsLeft}s`; + } + if (+minutes > 0) { + return `${minutes}m${secondsLeft}s`; + } + if (+secondsLeft > 0) { + return `${secondsLeft}s`; + } + return `${seconds}s`; +} + /** * 格式时间不带年份 * diff --git a/src/views/dashboard/overview/components/AlarnDayLine/index.vue b/src/views/dashboard/overview/components/AlarnDayLine/index.vue index fc51d195..89c4f2f0 100644 --- a/src/views/dashboard/overview/components/AlarnDayLine/index.vue +++ b/src/views/dashboard/overview/components/AlarnDayLine/index.vue @@ -3,7 +3,7 @@ - - - - diff --git a/src/views/dashboard/overview/components/UEEvent/index.vue b/src/views/dashboard/overview/components/UEEvent/index.vue deleted file mode 100644 index be9d59ba..00000000 --- a/src/views/dashboard/overview/components/UEEvent/index.vue +++ /dev/null @@ -1,128 +0,0 @@ - - - - - diff --git a/src/views/dashboard/overview/components/UPFFlow/index.vue b/src/views/dashboard/overview/components/UPFFlow/index.vue index 75a74d7a..4574107b 100644 --- a/src/views/dashboard/overview/components/UPFFlow/index.vue +++ b/src/views/dashboard/overview/components/UPFFlow/index.vue @@ -62,20 +62,15 @@ function fnDesign(container: HTMLElement | undefined, option: EChartsOption) { if (!container) { return; } - const { clientHeight, clientWidth } = container; if (!upfFlowChart.value) { - upfFlowChart.value = markRaw( - echarts.init(container, 'light', { - width: clientWidth, - height: clientHeight - 36, - }) - ); + upfFlowChart.value = markRaw(echarts.init(container, 'light')); } + + option && upfFlowChart.value.setOption(option); window.onresize = function () { // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应 upfFlowChart.value.resize(); }; - option && upfFlowChart.value.setOption(option); } //渲染速率图 @@ -126,27 +121,25 @@ function initPicture() { color: color[x] + ')', smooth: true, areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: color[x] + ', 0.5)', - }, - { - offset: 0.8, - color: color[x] + ', 0.5)', - }, - ], - false - ), - shadowColor: 'rgba(0, 0, 0, 0.1)', - shadowBlur: 10, - }, + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: color[x] + ', 0.5)', + }, + { + offset: 0.8, + color: color[x] + ', 0.5)', + }, + ], + false + ), + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 10, }, symbol: 'circle', symbolSize: 5, @@ -201,7 +194,7 @@ function initPicture() { formatter: function (params: any) { return params.split(' ')[0] + '\n' + params.split(' ')[1]; }, - fontSize:12 + fontSize: 14, }, axisLine: { lineStyle: { @@ -213,9 +206,9 @@ function initPicture() { { name: charts.unit, type: 'value', - // splitNumber: 4, - min:0, - max:300, + // splitNumber: 4, + min: 0, + max: 300, axisLabel: { formatter: '{value}', }, @@ -230,11 +223,9 @@ function initPicture() { }, }, }, - ], series: lineY, }; - console.log(optionData) fnDesign(upfFlow.value, optionData); }); } diff --git a/src/views/dashboard/overview/components/UserActivity/index.vue b/src/views/dashboard/overview/components/UserActivity/index.vue new file mode 100644 index 00000000..b531a2ae --- /dev/null +++ b/src/views/dashboard/overview/components/UserActivity/index.vue @@ -0,0 +1,265 @@ + + + + + diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css index 8d91e093..03ebb166 100644 --- a/src/views/dashboard/overview/css/index.css +++ b/src/views/dashboard/overview/css/index.css @@ -135,16 +135,7 @@ color: #4c9bfd; } -/* 本月告警统计 */ -.alarmType { - min-height: 13rem; - height: 25%; -} -.alarmType .chart { - width: 100%; - height: 100%; - margin-top: 1rem; -} + /* 用户行为 */ .userActivity { @@ -213,6 +204,17 @@ margin-top: 1rem; } +/* 告警统计 */ +.alarmType { + min-height: 22rem; + height: 60%; +} +.alarmType .inner .chart { + width: 100%; + height: 100%; + margin-top: 1rem; +} + /* 监控 */ .monitor { height: 20rem; diff --git a/src/views/dashboard/overview/hooks/useCDREvent.ts b/src/views/dashboard/overview/hooks/useCDREvent.ts deleted file mode 100644 index bf516514..00000000 --- a/src/views/dashboard/overview/hooks/useCDREvent.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { ref } from 'vue'; - -/**事件数据 */ -export const cdrEventData = ref[]>([]); - -/**事件总量 */ -export const cdrEventTotal = ref(0); - -/**事件推送id */ -export const cdrEventId = ref(''); - -/**cdrEvent CDR会话事件 数据解析 */ -export function cdrEventParse(item: Record) { - let evData: Record = item.cdrJSON || item.CDR; - if (typeof evData === 'string') { - try { - evData = JSON.parse(evData); - } catch (error) { - console.error(error); - return false; - } - } - - if (evData.recordType === 'CALL') { - return { - id: item.id || item.timestamp, - type: evData.recordType, - time: evData.callDuration, - call: evData.callReference, - msg: `${evData.calledParty} -> ${evData.callerParty}`, - }; - } -} diff --git a/src/views/dashboard/overview/hooks/useTopology.ts b/src/views/dashboard/overview/hooks/useTopology.ts index 4e57723a..7610f561 100644 --- a/src/views/dashboard/overview/hooks/useTopology.ts +++ b/src/views/dashboard/overview/hooks/useTopology.ts @@ -15,6 +15,8 @@ export const notNeNodes = [ 'lan5', 'lan6', 'lan7', + 'LAN', + 'NR', ]; /**图状态 */ @@ -114,9 +116,10 @@ export function neStateParse(neType: string, data: Record) { const neS = nodes.find((n: any) => n.id === edgeSource); const neT = nodes.find((n: any) => n.id === edgeTarget); // console.log(neS, edgeSource, neT, edgeTarget); - // 通过 ID 查询节点实例 - const item = graphG6.value.findById(edge.id); - if (neS && neT && item) { + + if (neS && neT) { + // 通过 ID 查询节点实例 + // const item = graphG6.value.findById(edge.id); // console.log( // `${edgeSource} - ${edgeTarget}`, // neS.neState.online && neT.neState.online @@ -136,16 +139,16 @@ export function neStateParse(neType: string, data: Record) { // }); // 设置状态 graphG6.value.setItemState( - item, + edge.id, 'line-dash', neS.neState.online && neT.neState.online ); } if (neS && notNeNodes.includes(edgeTarget)) { - graphG6.value.setItemState(item, 'line-dash', neT.neState.online); + graphG6.value.setItemState(edge.id, 'line-path', neS.neState.online); } if (neT && notNeNodes.includes(edgeSource)) { - graphG6.value.setItemState(item, 'line-dash', neT.neState.online); + graphG6.value.setItemState(edge.id, 'line-path', neT.neState.online); } } } diff --git a/src/views/dashboard/overview/hooks/useUEEvent.ts b/src/views/dashboard/overview/hooks/useUEEvent.ts deleted file mode 100644 index 7bbe4862..00000000 --- a/src/views/dashboard/overview/hooks/useUEEvent.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { ref } from 'vue'; - -/**事件数据 */ -export const ueEventData = ref[]>([]); - -/**事件总量 */ -export const ueEventTotal = ref(0); - -/**事件推送id */ -export const ueEventId = ref(''); - -/**ueEvent UE会话事件 数据解析 */ -export function ueEventParse(item: Record) { - let evData: Record = item.eventJSON; - if (typeof evData === 'string') { - try { - evData = JSON.parse(evData); - } catch (error) { - console.error(error); - } - } - - if (item.eventType === 'auth-result') { - return { - id: item.id || item.timestamp, - type: item.eventType, - time: evData.authTime, - imsi: evData.imsi, - msg: `${evData.authMessage}`, - }; - } - - if (item.eventType === 'detach') { - return { - id: item.id || item.timestamp, - type: item.eventType, - time: evData.detachTime, - imsi: evData.imsi, - msg: `${evData.detachResult}`, - }; - } - - if (item.eventType === 'cm-state') { - return { - id: item.id || item.timestamp, - type: item.eventType, - time: evData.changeTime, - imsi: evData.imsi, - msg: `${evData.onlineNumber}`, - }; - } - - return false; -} diff --git a/src/views/dashboard/overview/hooks/useUserActivity.ts b/src/views/dashboard/overview/hooks/useUserActivity.ts new file mode 100644 index 00000000..3652edb4 --- /dev/null +++ b/src/views/dashboard/overview/hooks/useUserActivity.ts @@ -0,0 +1,66 @@ +import { ref } from 'vue'; + +/**UE事件数据 */ +export const ueEventData = ref[]>([]); + +/**UE事件总量 */ +export const ueEventTotal = ref(0); + +/**UE事件推送id */ +export const ueEventId = ref(''); + +/**ueEvent UE会话事件 数据解析 */ +export function ueEventParse(item: Record) { + let evData: Record = item.eventJSON; + if (typeof evData === 'string') { + try { + evData = JSON.parse(evData); + } catch (error) { + console.error(error); + } + } + + return { + eType: 'ue', + eId: `ue_${item.timestamp}`, + id: item.id, + type: item.eventType, + data: evData, + }; +} + +/**CDR事件数据 */ +export const cdrEventData = ref[]>([]); + +/**CDR事件总量 */ +export const cdrEventTotal = ref(0); + +/**CDR事件推送id */ +export const cdrEventId = ref(''); + +/**cdrEvent CDR会话事件 数据解析 */ +export function cdrEventParse(item: Record) { + let evData: Record = item.cdrJSON || item.CDR; + if (typeof evData === 'string') { + try { + evData = JSON.parse(evData); + } catch (error) { + console.error(error); + return false; + } + } + + return { + eType: 'cdr', + eId: `cdr_${item.timestamp}`, + id: item.id, + data: evData, + }; +} + +/**CDR+UE事件数据 */ +export const eventData = ref[]>([]); +/**CDR+UE事件总量 */ +export const eventTotal = ref(0); +/**CDR/UE事件推送id */ +export const eventId = ref(''); diff --git a/src/views/dashboard/overview/hooks/useWS.ts b/src/views/dashboard/overview/hooks/useWS.ts index a9deb43c..073594ee 100644 --- a/src/views/dashboard/overview/hooks/useWS.ts +++ b/src/views/dashboard/overview/hooks/useWS.ts @@ -2,17 +2,12 @@ import { RESULT_CODE_ERROR } from '@/constants/result-constants'; import { OptionsType, WS } from '@/plugins/ws-websocket'; import { onBeforeUnmount, onMounted } from 'vue'; import { - ueEventData, - ueEventId, - ueEventTotal, ueEventParse, -} from './useUEEvent'; -import { - cdrEventData, - cdrEventTotal, - cdrEventId, cdrEventParse, -} from './useCDREvent'; + eventData, + eventTotal, + eventId, +} from './useUserActivity'; import { upfTotalFlow, upfTFParse } from './useUPFTotalFlow'; import { neStateParse } from './useTopology'; @@ -28,21 +23,20 @@ export default function useWS() { /**接收数据后回调 */ function wsError(ev: any) { // 接收数据后回调 - console.log(ev); + console.error(ev); } /**接收数据后回调 */ function wsMessage(res: Record) { - console.log(res); + // console.log(res); const { code, requestId, data } = res; if (code === RESULT_CODE_ERROR) { console.warn(res.msg); return; } - if (!requestId) return; - + // 网元状态 - if (requestId.startsWith('neState')) { + if (requestId && requestId.startsWith('neState')) { const neType = requestId.split('_')[1]; neStateParse(neType, data); return; @@ -53,35 +47,27 @@ export default function useWS() { // ueEvent UE会话事件 case '1010': if (Array.isArray(data.rows)) { - ueEventTotal.value = data.total; - const evDataArr: Record[] = []; + eventTotal.value += data.total; for (const item of data.rows) { const v = ueEventParse(item); if (v) { - evDataArr.push(v); + eventData.value.push(v); } } - ueEventData.value = evDataArr; - if (evDataArr.length > 0) { - ueEventId.value = evDataArr[0].id; - } + eventId.value = eventData.value[0].eId; } break; //cdrEvent CDR会话事件 case '1005': if (Array.isArray(data.rows)) { - cdrEventTotal.value = data.total; - const evDataArr: Record[] = []; + eventTotal.value += data.total; for (const item of data.rows) { const v = cdrEventParse(item); if (v) { - evDataArr.push(v); + eventData.value.push(v); } } - cdrEventData.value = evDataArr; - if (evDataArr.length > 0) { - cdrEventId.value = evDataArr[0].id; - } + eventId.value = eventData.value[0].eId; } break; //UPF-总流量数 @@ -112,8 +98,12 @@ export default function useWS() { if (data.data) { const v = ueEventParse(data.data); if (v) { - ueEventData.value.unshift(v); - ueEventId.value = v.id; + eventData.value.unshift(v); + eventTotal.value += 1; + eventId.value = v.eId; + if (eventData.value.length > 50) { + eventData.value.pop(); + } } } break; @@ -122,8 +112,12 @@ export default function useWS() { if (data.data) { const v = cdrEventParse(data.data); if (v) { - cdrEventData.value.unshift(v); - cdrEventId.value = v.id; + eventData.value.unshift(v); + eventTotal.value += 1; + eventId.value = v.eId; + if (eventData.value.length > 50) { + eventData.value.pop(); + } } } break; @@ -154,7 +148,7 @@ export default function useWS() { sortField: 'timestamp', sortOrder: 'desc', pageNum: 1, - pageSize: 50, + pageSize: 25, }, }); } @@ -170,7 +164,7 @@ export default function useWS() { sortField: 'timestamp', sortOrder: 'desc', pageNum: 1, - pageSize: 50, + pageSize: 25, }, }); } diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index 910f68a2..d57ea1ec 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -3,9 +3,7 @@ import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'; import useI18n from '@/hooks/useI18n'; import Topology from './components/Topology/index.vue'; import NeResources from './components/NeResources/index.vue'; -import UEEvent from './components/UEEvent/index.vue'; -import CDREvent from './components/CDREvent/index.vue'; -import AlarnDayLine from './components/AlarnDayLine/index.vue'; +import UserActivity from './components/UserActivity/index.vue'; import AlarnTypeBar from './components/AlarnTypeBar/index.vue'; import UPFFlow from './components/UPFFlow/index.vue'; import { listSub } from '@/api/neUser/sub'; @@ -75,6 +73,7 @@ async function fnGetState() { stateTimeout.value = setTimeout(() => fnGetState(), 5_000); } +/**初始数据函数 */ function InitData() { cdrEventSend(); ueEventSend(); @@ -172,48 +171,38 @@ onBeforeUnmount(() => {
-

{{ onlineInfo.ueNum }}

+

{{ onlineInfo.nbNum }}

- - {{ t('views.dashboard.overview.skim.session') }} + + {{ t('views.dashboard.overview.skim.base') }}
-

1000

+

{{ onlineInfo.ueNum }}

+ + + Data {{ t('views.dashboard.overview.skim.session') }} + +
+
+

0

IMS {{ t('views.dashboard.overview.skim.session') }}
-
-

{{ onlineInfo.nbNum }}

- - - {{ t('views.dashboard.overview.skim.base') }} - -
- -
-
-

{{ t('views.dashboard.overview.alarmType.title') }}

-
- -
-
-
- - -
+ +

   - {{ t('views.dashboard.overview.cdrEvent.title') }} + {{ t('views.dashboard.overview.userActivity.title') }}

- +
@@ -237,9 +226,9 @@ onBeforeUnmount(() => { {{ t('views.dashboard.overview.topology.title') }} - normal: + {{ t('views.dashboard.overview.topology.normal') }}: {{ graphNodeStateNum[0] }} - abnormal: + {{ t('views.dashboard.overview.topology.abnormal') }}: {{ graphNodeStateNum[1] }} @@ -305,15 +294,14 @@ onBeforeUnmount(() => {
- -
+ +

-    - {{ t('views.dashboard.overview.ueEvent.title') }} +    {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}

- +
diff --git a/src/views/monitor/monitor/index.vue b/src/views/monitor/monitor/index.vue index 2ecd8d9f..7383db93 100644 --- a/src/views/monitor/monitor/index.vue +++ b/src/views/monitor/monitor/index.vue @@ -164,7 +164,7 @@ function fnLoadChart(data: Record[]) { type: 'value', name: `${t('views.monitor.monitor.resourceUsage')} ( % )`, position: 'right', - alignTicks: true, + alignTicks: false }, ], grid: { left: '5%', right: '5%', bottom: '20%' }, diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue index d5e6f2cc..3ff3a6dc 100644 --- a/src/views/monitor/topologyArchitecture/index.vue +++ b/src/views/monitor/topologyArchitecture/index.vue @@ -57,6 +57,8 @@ const notNeNodes = [ 'lan5', 'lan6', 'lan7', + 'LAN', + 'NR', ]; /**图实例对象 */ @@ -419,9 +421,10 @@ function wsMessage(res: Record) { const neS = nodes.find((n: any) => n.id === edgeSource); const neT = nodes.find((n: any) => n.id === edgeTarget); // console.log(neS, edgeSource, neT, edgeTarget); - // 通过 ID 查询节点实例 - const item = graphG6.value.findById(edge.id); - if (neS && neT && item) { + + if (neS && neT) { + // 通过 ID 查询节点实例 + // const item = graphG6.value.findById(edge.id); // console.log( // `${edgeSource} - ${edgeTarget}`, // neS.neState.online && neT.neState.online @@ -441,16 +444,16 @@ function wsMessage(res: Record) { // }); // 设置状态 graphG6.value.setItemState( - item, + edge.id, 'line-dash', neS.neState.online && neT.neState.online ); } if (neS && notNeNodes.includes(edgeTarget)) { - graphG6.value.setItemState(item, 'line-dash', neT.neState.online); + graphG6.value.setItemState(edge.id, 'line-path', neS.neState.online); } if (neT && notNeNodes.includes(edgeSource)) { - graphG6.value.setItemState(item, 'line-dash', neT.neState.online); + graphG6.value.setItemState(edge.id, 'line-path', neT.neState.online); } } } diff --git a/src/views/monitor/topologyBuild/hooks/registerEdge.ts b/src/views/monitor/topologyBuild/hooks/registerEdge.ts index babe5a7f..8b9d1eb2 100644 --- a/src/views/monitor/topologyBuild/hooks/registerEdge.ts +++ b/src/views/monitor/topologyBuild/hooks/registerEdge.ts @@ -208,11 +208,15 @@ export function edgeLineAnimateState() { } return; } - + // line-dash 虚线运动 if (name === 'line-dash') { if (value) { - if (keyShape.cfg.animating) return; + keyShape.stopAnimate(); + keyShape.attr({ + lineDash: null, + lineDashOffset: null, + }); let index = 0; keyShape.animate( () => { @@ -221,7 +225,7 @@ export function edgeLineAnimateState() { index = 0; } return { - lineDash: [4, 2, 2, 2], + lineDash: [4, 2, 1, 2], lineDashOffset: -index, }; }, @@ -230,12 +234,6 @@ export function edgeLineAnimateState() { duration: 3000, // 执行一次的持续时间 } ); - } else { - keyShape.stopAnimate(); - keyShape.attr({ - lineDash: null, - lineDashOffset: null, - }); } return; }