add graph
This commit is contained in:
parent
1720266423
commit
5460497359
106
package-lock.json
generated
106
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"@chenfengyuan/vue-qrcode": "^2.0.0",
|
||||
"pinia": "^3.0.1",
|
||||
"qrcode": "^1.5.4",
|
||||
"vis-network": "^10.0.2",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
@ -515,6 +516,19 @@
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@egjs/hammerjs": {
|
||||
"version": "2.0.17",
|
||||
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
|
||||
"integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/hammerjs": "^2.0.36"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.4.tgz",
|
||||
@ -1581,6 +1595,13 @@
|
||||
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/hammerjs": {
|
||||
"version": "2.0.46",
|
||||
"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
|
||||
"integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@ -2434,6 +2455,19 @@
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"node_modules/component-emitter": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz",
|
||||
"integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -3863,6 +3897,13 @@
|
||||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
},
|
||||
"node_modules/keycharm": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
|
||||
"integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
|
||||
"license": "(Apache-2.0 OR MIT)",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/keyv": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||
@ -5353,6 +5394,20 @@
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "13.0.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
|
||||
"integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
|
||||
"funding": [
|
||||
"https://github.com/sponsors/broofa",
|
||||
"https://github.com/sponsors/ctavan"
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"uuid": "dist-node/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
@ -5362,6 +5417,57 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/vis-data": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vis-data/-/vis-data-8.0.3.tgz",
|
||||
"integrity": "sha512-jhnb6rJNqkKR1Qmlay0VuDXY9ZlvAnYN1udsrP4U+krgZEq7C0yNSKdZqmnCe13mdnf9AdVcdDGFOzy2mpPoqw==",
|
||||
"license": "(Apache-2.0 OR MIT)",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/visjs"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^13.0.0",
|
||||
"vis-util": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vis-network": {
|
||||
"version": "10.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vis-network/-/vis-network-10.0.2.tgz",
|
||||
"integrity": "sha512-qPl8GLYBeHEFqiTqp4VBbYQIJ2EA8KLr7TstA2E8nJxfEHaKCU81hQLz7hhq11NUpHbMaRzBjW5uZpVKJ45/wA==",
|
||||
"license": "(Apache-2.0 OR MIT)",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/visjs"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@egjs/hammerjs": "^2.0.0",
|
||||
"component-emitter": "^1.3.0 || ^2.0.0",
|
||||
"keycharm": "^0.2.0 || ^0.3.0 || ^0.4.0",
|
||||
"uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^13.0.0",
|
||||
"vis-data": ">=8.0.0",
|
||||
"vis-util": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vis-util": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vis-util/-/vis-util-6.0.0.tgz",
|
||||
"integrity": "sha512-qtpts3HRma0zPe4bO7t9A2uejkRNj8Z2Tb6do6lN85iPNWExFkUiVhdAq5uLGIUqBFduyYeqWJKv/jMkxX0R5g==",
|
||||
"license": "(Apache-2.0 OR MIT)",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/visjs"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@egjs/hammerjs": "^2.0.0",
|
||||
"component-emitter": "^1.3.0 || ^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"@chenfengyuan/vue-qrcode": "^2.0.0",
|
||||
"pinia": "^3.0.1",
|
||||
"qrcode": "^1.5.4",
|
||||
"vis-network": "^10.0.2",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user