The_evening_detective/evening_detective_admin_client
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add graph

Browse Source
This commit is contained in:
Владимир Фёдоров 2025-09-23 03:09:07 +07:00
parent 1720266423
commit 5460497359
4 changed files with 180 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
},

70
src/components/EditorWindow.vue
View File

@ -1,5 +1,55 @@
<script setup lang="ts">
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 {
.graph-container {
width: 100%;
height: 700px;
border: 1px solid #e0e0e0;
padding: 20px;
margin: 5px;
border-radius: 8px;
}
</style>

15
src/components/client.ts
View File

@ -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
}