part of calc

components/modal.vue

@@ -4,6 +4,7 @@ import type { ralTypes } from '@/components/ral'
 
 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
+const { data: calculatorData } = await useFetch(`${apiBase}/calculator/5/`)
 
 const isModalOpen = useState('modal_open', () => false)
 
@@ -85,6 +86,26 @@ const submit = (e: any) => {
     modal_data.name = undefined
     isModalOpen.value = false
 }
+const roubleSign = new Intl.NumberFormat('ru-RU', {
+    style: 'currency',
+    currency: 'RUB',
+});
+const total = computed(() => {
+    const { mortgage, pillar, lamella } = calculatorData.value
+    const pillar_count = (section_count.value + 1)
+    const pil = (parseFloat(mortgage) + parseFloat(pillar)) * pillar_count
+
+    const lam_count = lamelles_count.value * section_count.value
+    const lam = lam_count * lamella
+
+    const top_count = section_count.value
+    const top = top_count * lamella
+    return [
+        `Столб, ${pillar_count}: ${roubleSign.format(pil)}`,
+        `Ламели, ${lam_count}: ${roubleSign.format(lam)}`,
+        `Верхняя планка, ${top_count}: ${roubleSign.format(top)}`,
+    ]
+})
 </script>
 <template>
     <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
@@ -104,28 +125,15 @@ const submit = (e: any) => {
             <template v-else>
                 <h2>данные расчета</h2>
                 <div class="flex gap-4 flex-col mb-4">
-                    <div>
-                        Ламелей: {{ lamelles_count }}
-                    </div>
-                    <div>
-                        Длина секции: {{ fence_section * 1000 }}
-                    </div>
-                    <div>
-                        общая длина: {{ total_length }}
-                    </div>
-
-                    <div>
-                        Секций: {{ section_count }}
-                    </div>
-                    <div>
-                        Секций: {{ total_length }}
-                    </div>
-                    <div>
-                        Цвет столба: {{ getColorNameFromRal(pillar_color) }}
-                    </div>
-                    <div>
-                        Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}
-                    </div>
+                    <p>Ламелей: {{ lamelles_count }}<br />
+                        Длина секции: {{ fence_section * 1000 }}<br />
+                        Общая длина: {{ total_length }}<br />
+                        Секций: {{ section_count }}<br />
+                        Цвет столба: {{ getColorNameFromRal(pillar_color) }}<br />
+                        Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}</p>
+                    <p>
+                        <template v-for="i in total">{{ i }}<br /></template>
+                    </p>
                 </div>
                 <div class="flex gap-4">
                     <button class="not-prose" @click="openForm">Данные верны</button>

components/model/parametric.vue

@@ -38,7 +38,6 @@ const { scene: top } = await useGLTF('/models_one/verh_100.glb')
 const { scene: fence } = await useGLTF('/models_one/fence.glb')
 const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
 const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')
-const { scene: back_light } = await useGLTF('/models_light/back_light.glb')
 
 const { seek, seekAll } = useSeek()
 watch(section_count, () => {
@@ -82,7 +81,6 @@ ctx.fillRect(10, 10, 512, 512)
 console.log(canvas.toDataURL())
 const texture = new DataTexture(ctx?.getImageData(0, 0, 512, 512).data.buffer, width, height);
 texture.needsUpdate = true;
-console.log(back_light)
 </script>
 <template>
     <TresGroup :translate-y="-3.25" name="base">
@@ -107,7 +105,6 @@ console.log(back_light)
             <TresBoxGeometry :args="[1, 1, 1]" />
             <TresMeshStandardMaterial :map="texture_one" />
         </TresMesh>
-        <TresDirectionalLight v-bind="back_light"/>
         <template v-for="i in section_count">
             <template v-if="i <= 20">
                 <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />