add graph

src/components/EditorWindow.vue

@@ -1,5 +1,55 @@
 <script setup lang="ts">
-  import HeaderBlock from './HeaderBlock.vue';
+
+import { ref, onMounted } from 'vue'
+import HeaderBlock from './HeaderBlock.vue';
+import { Data, Network } from 'vis-network'
+import { getGraph } from './client';
+
+const network = ref<HTMLElement>()
+
+interface GraphNode {
+  id: number
+  label: string
+  color?: string
+}
+
+interface GraphEdge {
+  from: number
+  to: number
+  arrows: string
+}
+
+const nodes = ref<GraphNode[]>([
+  { id: 1, label: 'Начало' },
+  { id: 2, label: 'Шаг 1' },
+  { id: 3, label: 'Шаг 2' },
+  { id: 4, label: 'Шаг 3' },
+  { id: 5, label: 'Конец' },
+  { id: 6, label: 'Параллельный процесс' },
+])
+
+const edges = ref<GraphEdge[]>([
+  { from: 1, to: 2, arrows: 'to' },
+  { from: 2, to: 3, arrows: 'to' },
+  { from: 3, to: 4, arrows: 'to' },
+  { from: 4, to: 5, arrows: 'to' },
+  { from: 2, to: 6, arrows: 'to' },
+  { from: 6, to: 4, arrows: 'to' },
+])
+
+onMounted(async () => {
+  if (!network.value) return
+
+  const graph = await getGraph()
+
+  const data = {
+    nodes: graph.nodes,
+    edges: graph.edges
+  }
+
+  const options = {}
+  new Network(network.value, data, options)
+})
 </script>
 
 <template>
@@ -9,24 +59,14 @@
     </div>
   </HeaderBlock>
 
-  <div class="three-columns">
-    <div class="column left">Левая (узкая)</div>
-    <div class="column center">Центральная (широкая)</div>
-    <div class="column right">Правая (узкая)</div>
-  </div>
+  <div ref="network" class="graph-container"></div>
 </template>
 
 <style scoped>
-  .three-columns {
-    display: grid;
-    grid-template-columns: 1fr 2fr 1fr; /* Соотношение 1:2:1 */
-    gap: 20px;
-    height: 100%;
-  }
-
-  .column {
-    border: 1px solid #e0e0e0;
-    padding: 20px;
-    margin: 5px;
-  }
+.graph-container {
+  width: 100%;
+  height: 700px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
 </style>

src/components/client.ts

@@ -117,6 +117,21 @@ export const apiDownloadQrCodesFile = async () => {
   }
 }
 
+export const getGraph = async () => {
+  try {
+    const response = await fetch(
+      getApiUrl("/graph")
+    )
+    if (!response.ok) {
+      throw new Error(`http error status: ${response.status}`)
+    }
+    return await response.json()
+  } catch (error) {
+    console.error('[apiDownloadQrCodesFile] error:', error)
+    throw error
+  }
+}
+
 function getApiUrl(path: string) {
   return  "http://" + window.location.host.split(":")[0] + ":8090" + path
 }