ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save data

This commit is contained in:
Kseninia Mikhaylova 2024-05-17 16:01:18 +03:00
parent dd4553dcc3
commit 5948d5fcc9
8 changed files with 95 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin_front/assets/css/main.css
View File

@ -5,7 +5,7 @@
@font-face {
font-family: 'albertus';
src: url('../font/Albertus\ Extra\ Bold\ Regular.ttf'
src: url('~/assets/font/albertus.ttf'
);
}

0
admin_front/assets/font/Albertus Extra Bold Regular.ttf → admin_front/assets/font/albertus.ttf
View File

5
admin_front/helpers.ts Normal file
View File

@ -0,0 +1,5 @@
export function* chunks(arr: any, n: number) {
for (let i = 0; i < arr.length; i += n) {
yield arr.slice(i, i + n);
}
}

6
admin_front/nuxt.config.ts
View File

@ -3,7 +3,11 @@ import path from 'path';
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@nuxtjs/tailwindcss', 'nuxt-primevue'],
modules: [
'nuxt-primevue',
'@nuxtjs/tailwindcss',
'@nuxtjs/color-mode',
],
primevue: {
options: {
unstyled: true

12
admin_front/package-lock.json generated
View File

@ -7,6 +7,7 @@
"name": "nuxt-app",
"hasInstallScript": true,
"dependencies": {
"@nuxtjs/color-mode": "^3.4.1",
"@nuxtjs/tailwindcss": "^6.12.0",
"d3": "^7.9.0",
"nuxt": "^3.11.2",
@ -1896,6 +1897,17 @@
"vue": "^3.3.4"
}
},
"node_modules/@nuxtjs/color-mode": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-3.4.1.tgz",
"integrity": "sha512-vZgJqDstxInGw3RGSWbLoCLXtU1mvh1LLeuEA/X3a++DYA4ifwSbNoiSiOyb9qZHFEwz1Xr99H71sXV4IhOaEg==",
"dependencies": {
"@nuxt/kit": "^3.11.2",
"pathe": "^1.1.2",
"pkg-types": "^1.1.0",
"semver": "^7.6.0"
}
},
"node_modules/@nuxtjs/tailwindcss": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-6.12.0.tgz",

2
admin_front/package.json
View File

@ -10,8 +10,8 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxtjs/color-mode": "^3.4.1",
"@nuxtjs/tailwindcss": "^6.12.0",
"d3": "^7.9.0",
"nuxt": "^3.11.2",
"pathfinding": "^0.4.18",
"vue": "^3.4.27",

115
admin_front/pages/plan/index.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import type { FileUploadUploadEvent } from '~/node_modules/primevue/fileupload/FileUpload.d.ts'
import PF from 'pathfinding'
import PF, { Grid } from 'pathfinding'
import { chunks } from '~/helpers';
interface SvgContext {
array: number[][],
@ -12,90 +13,97 @@ const config = useRuntimeConfig()
const plan: Ref<SvgContext | {}> = useState('plan', () => ({}));
const loading = ref<boolean>(false)
const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
const context: Ref<CanvasRenderingContext2D | undefined> = ref();
const canvasElement2: Ref<HTMLCanvasElement | undefined> = ref();
const context2: Ref<CanvasRenderingContext2D | undefined> = ref();
const grid = ref<number[][]>()
const grid = ref<Grid>()
const startPoint = ref<number[]>()
const endPoint = ref<number[]>()
const startToEndPath = ref()
const chunkSize = 2
const beforeUpload = () => {
loading.value = true
}
const onUpload = (event: FileUploadUploadEvent) => {
loading.value = false
try {
const data = JSON.parse(event.xhr.response)
plan.value = data.response
startPoint.value = undefined
endPoint.value = undefined
context.value = canvasElement.value?.getContext('2d') || undefined;
if (canvasElement.value && context.value) {
context.value.clearRect(0, 0, canvasElement.value.width, canvasElement.value.height);
if (!plan.value.hasOwnProperty('paths')) return
(plan.value).paths.forEach((path: string) => {
if (!context.value) return
context.value.fillStyle = 'rgba(255, 0, 255, 0.25)'
context.value.fill(new Path2D(path));
context.value.strokeStyle = 'blue'
context.value.stroke(new Path2D(path));
});
}
context2.value = canvasElement2.value?.getContext('2d') || undefined;
if (canvasElement2.value && context2.value) {
plan.value.array.forEach((line, indexY) => {
line.forEach((point, indexX) => {
context2.value.fillStyle = point > 0 ? 'red' : 'WHITE'
context2.value.fillRect(indexX, indexY, 1, 1)
})
});
}
grid.value = new PF.Grid(plan.value.array.map(y => y.map(x => x > 0 ? 1 : 0)))
newDraw()
loading.value = false
} catch (error) {
console.error(error)
console.log(error)
loading.value = false
}
}
const newDraw = () => {
startPoint.value = undefined
endPoint.value = undefined
startToEndPath.value = undefined
context.value = canvasElement.value?.getContext('2d') || undefined;
const lines = (plan.value as SvgContext).array
lines.forEach((line, indexY) => {
line.forEach((point, indexX) => {
if (canvasElement.value && context.value) {
context.value.fillStyle = point > 0 ? 'red' : 'WHITE'
context.value.fillRect(indexX, indexY, 1, 1)
}
})
});
// const t = [...chunks(lines, chunkSize)].map(y => y.map(x => x.some(i => i > 0) > 0 ? 1 : 0))
// console.log(t)
grid.value = new PF.Grid((plan.value as SvgContext).array.map(y => y.map(x => x > 0 ? 1 : 0)))
}
const setPoint = (event: MouseEvent) => {
try {
const bound = event.currentTarget.getBoundingClientRect()
if (!event.currentTarget) return
const target = (<HTMLCanvasElement>event.currentTarget)
const bound = target.getBoundingClientRect()
const targetX = event.x - bound.x
const targetY = event.y - bound.y
const ctx = (context.value as CanvasRenderingContext2D)
if (!startPoint.value) {
startPoint.value = [targetX, targetY]
context2.value.fillStyle = 'rgb(0,255,0,0.75)';
context2.value.beginPath();
context2.value.arc(targetX, targetY, 10, 0, 2 * Math.PI);
context2.value.fill();
ctx.fillStyle = 'rgb(0,255,0,0.75)';
ctx.beginPath();
ctx.arc(targetX, targetY, 10, 0, 2 * Math.PI);
ctx.fill();
} else
if (!endPoint.value) {
endPoint.value = [targetX, targetY]
context2.value.fillStyle = 'rgb(0,0,255,0.75)';
context2.value.beginPath();
context2.value.arc(targetX, targetY, 10, 0, 2 * Math.PI);
context2.value.fill();
ctx.fillStyle = 'rgb(0,0,255,0.75)';
ctx.beginPath();
ctx.arc(targetX, targetY, 10, 0, 2 * Math.PI);
ctx.fill();
const finder = new PF.AStarFinder();
const finder = new PF.DijkstraFinder();
startToEndPath.value = finder.findPath(parseInt(startPoint.value[0]), parseInt(startPoint.value[1]), parseInt(endPoint.value[0]), parseInt(endPoint.value[1]), grid.value);
startToEndPath.value.forEach(element => {
context2.value.fillRect(element[0], element[1], 1, 1)
startToEndPath.value = finder.findPath(
Math.round(startPoint.value[0]),
Math.round(startPoint.value[1]),
Math.round(endPoint.value[0]),
Math.round(endPoint.value[1]),
(grid.value as Grid)
);
startToEndPath.value.forEach((element: number[]) => {
ctx.fillRect(element[0], element[1], 1, 1)
});
} else {
newDraw()
}
} catch (error) {
console.error(err)
console.log(error)
}
}
</script>
@ -106,11 +114,8 @@ const setPoint = (event: MouseEvent) => {
:maxFileSize="10000000" @upload="onUpload" @before-upload="beforeUpload" :auto="true"
chooseLabel="Выберите файл" :disabled="loading" />
</Panel>
<Panel v-if="plan && (<any>plan).paths" header="Отрисовка из массива значений">
<canvas ref="canvasElement2" :width="1200" height="400" @click="setPoint"></canvas>
</Panel>
<Panel v-if="plan && (<any>plan).paths" header="Парсинг изображения">
<canvas ref="canvasElement" :width="1200" height="400"></canvas>
<Panel :header="loading ? `Идет отрисовка` : `Отрисовка из массива значений`">
<canvas ref="canvasElement" :width="1200" height="400" @click="setPoint"></canvas>
</Panel>
</div>
</template>

11
admin_front/tailwind.config.js
View File

@ -1,4 +1,15 @@
const colors = require('tailwindcss/colors')
delete colors.inherit
delete colors.current
delete colors.transparent
delete colors.black
delete colors.white
delete colors.lightBlue
delete colors.warmGray
delete colors.trueGray
delete colors.coolGray
delete colors.blueGray
const randomPrimary = Object.values(colors)[Math.floor(Math.random()*Object.values(colors).length)];
const randomSurface = Object.values(colors)[Math.floor(Math.random()*Object.values(colors).length)];
export default {