From 7e2f404ba72b28f655ceb0affe88c3bc2337de74 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Thu, 4 Jan 2024 15:54:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=93=E6=89=91=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=AD=98=E5=82=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/monitor/topology.ts | 40 + src/views/monitor/topology-build/index.vue | 2479 ----------------- .../components/GraphEditModal.vue | 2 +- .../hooks/useCombo.ts | 0 .../hooks/useEdge.ts | 0 .../hooks/useGraph.ts | 71 +- .../hooks/useNode.ts | 8 +- src/views/monitor/topologyBuild/index.vue | 359 +++ 8 files changed, 436 insertions(+), 2523 deletions(-) create mode 100644 src/api/monitor/topology.ts delete mode 100644 src/views/monitor/topology-build/index.vue rename src/views/monitor/{topology-build => topologyBuild}/components/GraphEditModal.vue (99%) rename src/views/monitor/{topology-build => topologyBuild}/hooks/useCombo.ts (100%) rename src/views/monitor/{topology-build => topologyBuild}/hooks/useEdge.ts (100%) rename src/views/monitor/{topology-build => topologyBuild}/hooks/useGraph.ts (91%) rename src/views/monitor/{topology-build => topologyBuild}/hooks/useNode.ts (99%) create mode 100644 src/views/monitor/topologyBuild/index.vue diff --git a/src/api/monitor/topology.ts b/src/api/monitor/topology.ts new file mode 100644 index 00000000..2529c483 --- /dev/null +++ b/src/api/monitor/topology.ts @@ -0,0 +1,40 @@ +import { request } from '@/plugins/http-fetch'; + +/**图组名称信息 */ +export function getGraphGroups() { + return request({ + url: '/chart/graph/groups', + method: 'get', + }); +} + +/**获取图数据 */ +export function getGraphData(group: string) { + return request({ + url: '/chart/graph', + method: 'get', + params: { + group, + }, + }); +} + +/**保存图数据 */ +export function saveGraphData(group: string, data: Record) { + return request({ + url: '/chart/graph', + method: 'post', + data: { + group, + data, + }, + }); +} + +/**删除图组数据 */ +export function delGraphData(group: string) { + return request({ + url: `/chart/graph/${group}`, + method: 'delete', + }); +} diff --git a/src/views/monitor/topology-build/index.vue b/src/views/monitor/topology-build/index.vue deleted file mode 100644 index 3a02c739..00000000 --- a/src/views/monitor/topology-build/index.vue +++ /dev/null @@ -1,2479 +0,0 @@ - - - - - diff --git a/src/views/monitor/topology-build/components/GraphEditModal.vue b/src/views/monitor/topologyBuild/components/GraphEditModal.vue similarity index 99% rename from src/views/monitor/topology-build/components/GraphEditModal.vue rename to src/views/monitor/topologyBuild/components/GraphEditModal.vue index d9566715..d98f30a1 100644 --- a/src/views/monitor/topology-build/components/GraphEditModal.vue +++ b/src/views/monitor/topologyBuild/components/GraphEditModal.vue @@ -43,7 +43,7 @@ const { watch(graphEvent, v => { if (!v) return; const { type, target, item } = v; - console.log(type, target, item); + // console.log(type, target, item); // 画布 if (type === 'canvas-create-edge') { diff --git a/src/views/monitor/topology-build/hooks/useCombo.ts b/src/views/monitor/topologyBuild/hooks/useCombo.ts similarity index 100% rename from src/views/monitor/topology-build/hooks/useCombo.ts rename to src/views/monitor/topologyBuild/hooks/useCombo.ts diff --git a/src/views/monitor/topology-build/hooks/useEdge.ts b/src/views/monitor/topologyBuild/hooks/useEdge.ts similarity index 100% rename from src/views/monitor/topology-build/hooks/useEdge.ts rename to src/views/monitor/topologyBuild/hooks/useEdge.ts diff --git a/src/views/monitor/topology-build/hooks/useGraph.ts b/src/views/monitor/topologyBuild/hooks/useGraph.ts similarity index 91% rename from src/views/monitor/topology-build/hooks/useGraph.ts rename to src/views/monitor/topologyBuild/hooks/useGraph.ts index c54bf84f..548a19c4 100644 --- a/src/views/monitor/topology-build/hooks/useGraph.ts +++ b/src/views/monitor/topologyBuild/hooks/useGraph.ts @@ -39,7 +39,7 @@ export const selectSourceTargetOptions = ref[]>([]); export const selectComboOptions = ref[]>([]); /**图模式选择项 */ -export const graphMode = ref('default'); +export const graphMode = ref<'default' | 'edit'>('default'); export default function useGraph() { //实例化i18n @@ -51,7 +51,6 @@ export default function useGraph() { offseY: 10, itemTypes: ['canvas'], getContent(evt) { - console.log(evt); if (!evt) return '无'; const edit = graphMode.value === 'edit'; return ` @@ -125,26 +124,32 @@ export default function useGraph() { offseY: 10, itemTypes: ['combo'], getContent(evt) { - console.log(evt); + if (!evt) return '无'; + const item = evt.item?.getModel(); + const edit = graphMode.value === 'edit'; return `
-

分组

-
- 1. 编辑 -
-
- 2. 删除 -
+

分组:${item?.label || item?.id}

- 2. 隐藏 + 隐藏
+
+ 编辑 +
+
+ 删除 +
+
`; }, @@ -172,7 +177,6 @@ export default function useGraph() { offseY: 10, itemTypes: ['node'], getContent(evt) { - console.log(evt); if (!evt) return '无'; const item = evt.item?.getModel(); const edit = graphMode.value === 'edit'; @@ -182,19 +186,18 @@ export default function useGraph() { display: flex; flex-direction: column; width: 140px; - background: #e6f7ff; " > -

节点:${item?.label || '无标签'}

-
+

节点:${item?.label || item?.id}

+
隐藏
-
编辑
-
删除 @@ -225,23 +228,17 @@ export default function useGraph() { offsetX: 10, offsetY: 20, getContent(evt) { - console.log(evt); if (!evt) return '无'; const item = evt.item?.getModel(); - if (!item?.label) { - return '无标签'; - } - console.log(item); return `
-

节点： ${item?.label}

+

节点:${item?.label || item?.id}

`; }, @@ -254,7 +251,6 @@ export default function useGraph() { offseY: 10, itemTypes: ['edge'], getContent(evt) { - console.log(evt); if (!evt) return '无'; const item = evt.item?.getModel(); const edit = graphMode.value === 'edit'; @@ -264,19 +260,18 @@ export default function useGraph() { display: flex; flex-direction: column; width: 140px; - background: #e6f7ff; " > - 边:${item?.label || '无标签'} -
+

边:${item?.label || '无标签'}

+
隐藏
-
编辑
-
删除 @@ -306,22 +301,17 @@ export default function useGraph() { offsetX: 10, offsetY: 20, getContent(evt) { - console.log(evt); if (!evt) return '无'; const item = evt.item?.getModel(); - if (!item?.label) { - return '无标签'; - } return `
-

边： ${item?.label}

+

边： ${item?.label || '无标签'}

`; }, @@ -420,7 +410,10 @@ export default function useGraph() { } /**图数据渲染 */ - function handleRanderGraph(container: HTMLElement, data: GraphData) { + function handleRanderGraph( + container: HTMLElement | undefined, + data: GraphData + ) { if (!container) return; const { clientHeight, clientWidth } = container; @@ -569,7 +562,7 @@ export default function useGraph() { /**图模式改变 default | edit */ function handleChangeMode(value: any) { - console.log(value, JSON.parse(JSON.stringify(graphG6.value.save()))); + // console.log(value, JSON.parse(JSON.stringify(graphG6.value.save()))); graphG6.value.setMode(value); graphMode.value = graphG6.value.getCurrentMode(); } diff --git a/src/views/monitor/topology-build/hooks/useNode.ts b/src/views/monitor/topologyBuild/hooks/useNode.ts similarity index 99% rename from src/views/monitor/topology-build/hooks/useNode.ts rename to src/views/monitor/topologyBuild/hooks/useNode.ts index 29502ad6..116306f4 100644 --- a/src/views/monitor/topology-build/hooks/useNode.ts +++ b/src/views/monitor/topologyBuild/hooks/useNode.ts @@ -33,10 +33,10 @@ export const nodeTypeOptions = [ value: 'image', label: '图片', }, - { - value: 'donut', - label: '面包圈', - }, + // { + // value: 'donut', + // label: '面包圈', + // }, ]; /**图节点标签文本位置 */ diff --git a/src/views/monitor/topologyBuild/index.vue b/src/views/monitor/topologyBuild/index.vue new file mode 100644 index 00000000..53828107 --- /dev/null +++ b/src/views/monitor/topologyBuild/index.vue @@ -0,0 +1,359 @@ + + + + +