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

loader animation

This commit is contained in:
Kseninia Mikhaylova 2024-05-22 17:45:14 +03:00
parent ac66af1fd7
commit 37f3514d8c
4 changed files with 56 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/PythonImportHelper-v2-Completion.json vendored
View File

@ -8516,7 +8516,7 @@
"kind": 6,
"importPath": "back.api.views",
"description": "back.api.views",
"peekOfCode": "class FloorplanPointsView(APIView):\n def get(self, request, id):\n points = FloorplanPoints.objects.get(plan=id)\n serializer = FloorplanPointsSerializer(points, many=False)\n return JsonResponse(serializer.data, safe=False)\n def post(self, request, id):\n data = JSONParser().parse(request)\n data[\"plan\"] = id\n serializer = FloorplanPointsSerializer(data=data)\n if serializer.is_valid():",
"peekOfCode": "class FloorplanPointsView(APIView):\n def get(self, request, id):\n if FloorplanPoints.objects.filter(plan=id).exists():\n points = FloorplanPoints.objects.get(plan=id)\n serializer = FloorplanPointsSerializer(points, many=False)\n return JsonResponse(serializer.data, safe=False)\n else:\n return JsonResponse(\"No item\", status=400)\n def post(self, request, id):\n data = JSONParser().parse(request)",
"detail": "back.api.views",
"documentation": {}
},

32
admin_front/components/FloorplanSvg.vue
View File

@ -2,6 +2,8 @@
import { chunks } from '~/helpers';
import * as d3 from "d3";
const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
const point_array = useState<number[][] | undefined>('point_array', () => undefined)
const chunk_size = useState<number>('chunk_size', () => 8)
const threshold = useState<number>('threshold', () => 20)
@ -17,7 +19,13 @@ const setActivePoint = (item: { x: number, y: number }) => {
active_point.value = { x: item.x, y: item.y }
}
const sampling_data = () => {
const redraw = ref(false)
const sampling_data = async () => {
if (redraw.value) {
return
}
redraw.value = true
grid_redraw.value = true
const points = point_array.value
const chunk = chunk_size.value
@ -50,12 +58,14 @@ const sampling_data = () => {
})
paths_array.value = res
console.time('redraw D3')
// console.time('redraw D3')
const svg = d3.select('#d3svg')
// svg.selectAll("path").remove();
svg.selectAll("path").remove();
const path_elements = svg.selectAll("path")
paths_array.value.forEach(async (element, i) => {
for (let i = 0; i < paths_array.value.length; i++) {
const element = paths_array.value[i];
let _class = '';
if (element.unwalkable) {
_class += ' unwalkable'
@ -67,23 +77,23 @@ const sampling_data = () => {
}
const clickFunk = () => setActivePoint({ x: element.x, y: element.y })
if (path_elements.nodes()[i]) {
// console.log(`update ${i}`)
d3.select(path_elements.nodes()[i])
// .transition()
// .duration(300)
.attr('d', element.path)
.attr('class', _class)
.on('click', clickFunk)
} else {
// console.log(`add${i}`)
svg.append("path")
.attr('d', element.path)
.attr('class', _class)
.on('click', clickFunk)
}
});
console.timeEnd('redraw D3')
if (i % 10 == 0) {
await nextFrame()
}
};
// console.timeEnd('redraw D3')
grid_redraw.value = false
redraw.value = false
}
watch(point_array, () => {
sampling_data()
@ -98,7 +108,7 @@ watch(threshold, () => {
sampling_data()
})
onMounted(() => {
sampling_data()
// sampling_data()
})
</script>
<template>

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

@ -26,17 +26,26 @@ const ch = 800
const title = ref()
const dataToState = (data: any) => {
const dataToState = async (data: any) => {
point_array.value = data.np_field
title.value = data.title
if (data.d_size) chunk_size.value = data.d_size
if (data.d_border) threshold.value = data.d_border
try {
const res = await fetch(`${config.public.apiBase}/api/floorplan/${data.id}/points`)
const points = await res.json()
target_points.value = points.points
target_array.value = points.points
} catch (error) {
console.log(error)
}
}
const onUpload = (event: FileUploadUploadEvent) => {
const onUpload = async (event: FileUploadUploadEvent) => {
try {
const data = JSON.parse(event.xhr.response)
dataToState(data.response)
await dataToState(data.response)
} catch (error) {
console.log(error)
}
@ -46,7 +55,7 @@ const selectFileEvent = async () => {
try {
const res = await fetch(`${config.public.apiBase}/api/floorplan/${selectFile.value}`)
const data = await res.json()
dataToState(data)
await dataToState(data)
} catch (error) {
console.log(error)
}
@ -123,7 +132,9 @@ onMounted(async () => {
await loadFiles()
})
watch(grid_redraw, () => {
setTimeout(() => {
loading.value = grid_redraw.value
}, 100)
})
watch(active_point, () => {
if (!active_point.value) return
@ -177,7 +188,8 @@ watch(active_point, () => {
</div>
<div class="flex flex-col">
<label for="chunk">Значение дискретизации</label>
<InputNumber id="chunk" type="text" showButtons :min="8" :max="50" v-model="chunk_size" />
<InputNumber id="chunk_size" showButtons :min="0" :max="50" v-model="chunk_size"
:disabled="loading" />
</div>
<div class="flex flex-col">
<label for="threshold">Пороговое значение</label>

12
back/api/views.py
View File

@ -4,8 +4,12 @@ from rest_framework.views import APIView
from django.http import JsonResponse
from api.tracer import parse_image, read_image, numpy_zip_str_to_arr
from .serializers import (FloorplanListSerializer, FloorplanPointsSerializer, FloorplanSerializer,
ProductSerializer)
from .serializers import (
FloorplanListSerializer,
FloorplanPointsSerializer,
FloorplanSerializer,
ProductSerializer,
)
from .models import Floorplan, FloorplanPoints, Product
import logging
@ -99,11 +103,15 @@ class FloorplanView(APIView):
logger.error(e)
raise e
class FloorplanPointsView(APIView):
def get(self, request, id):
if FloorplanPoints.objects.filter(plan=id).exists():
points = FloorplanPoints.objects.get(plan=id)
serializer = FloorplanPointsSerializer(points, many=False)
return JsonResponse(serializer.data, safe=False)
else:
return JsonResponse("No item", status=400)
def post(self, request, id):
data = JSONParser().parse(request)