components/model/line.vue

@@ -74,6 +74,9 @@ watch(() => [props.count, fence_section.value, section_count.value, extra_sectio
     count_pos,
     { flush: 'post' }
 )
+watch(()=>props.models.lamelle, () => {
+    console.log(props.models.lamelle)
+}, { deep: true })
 </script>
 <template>
     <TresGroup :name="`line_${props.number}`" :rotate-y="rotate()" :position-x="position.x" :position-y="position.y"

components/model/parametric.vue

@@ -20,6 +20,8 @@ const goto_target = use_goto_target()
 const { scene, controls, camera } = useTresContext()
 const { seek, seekAll } = useSeek()
 
+const globalFenceType = useGlobalFenceType()
+
 const topper_models = {} as { [key: toppersIds]: Object3D }
 for await (const element of toppers) {
     const { scene } = await useGLTF(getModel(element.id))
@@ -38,6 +40,9 @@ const { scene: model_fixing } = await useGLTF('/models_one/fixing.glb');
 const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: true })
 const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
 
+const { scene: lamelle_model_aristo } = await useGLTF('/models_one/top_100.glb', { draco: true });
+const { scene: lamelle_model_standart } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
+
 const top = ref(top_model)
 const pillar_top = ref(topper_models[pillar_topper.value])
 const pillar_center = ref(model_pillar_center)
@@ -113,10 +118,20 @@ watch(open_calc, () => {
 const min_for_square = 12;
 
 setTarget()
+
+watch(() => globalFenceType.value?.id, () => {
+    console.log('t')
+    if (globalFenceType.value?.id == 5) {
+        lamelle.value = lamelle_model_aristo
+    }
+    if (globalFenceType.value?.id == 6) {
+        lamelle.value = lamelle_model_standart
+    }
+})
 </script>
 <template>
     <TresGroup name="base">
-        <template v-for="line in (total >= min_for_square) ? 4 : 1" :key="`${line}_${count}`">
+        <template v-for="line in (total >= min_for_square) ? 4 : 1" :key="`${globalFenceType?.id ?? 5}_${line}_${count}`">
             <ModelLine :models="{
                 top,
                 pillar_center, pillar_top, pillar_bottom, pillar_inner,

composables/globalFenceType.ts

@@ -0,0 +1,6 @@
+interface calc {
+    id: number
+    calc: ApiCalcType
+}
+export const useGlobalFenceType = () => useState<calc | null>('fence-global-type', () => null)
+

error.vue

@@ -32,7 +32,7 @@ if(route.path !== '/404') {
                     <h1>Вы ищете страницу, которой не существует. Вернитесь на главную страницу сайта</h1>
                     <p>Извините, но мы не можем найти запрашиваемую страницу. К сожалению, мы не можем помочь вам с
                         покупкой забора здесь.</p>
-                    <p class="hidden">
+                    <p>
                         <code>
                             {{ error?.message }}
                         </code>

pages/index.vue

@@ -7,6 +7,8 @@ import { marked } from 'marked';
 
 import og_img from '/og_img.png'
 
+const globalFenceType = useGlobalFenceType()
+
 const { data: seoData } = await apiFetch<ApiKpType>(`kp/1/`)
 useSeoMeta({
     title: seoData.value?.title,
@@ -51,9 +53,21 @@ const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
 const setCalcData = (id: number) => {
     openTab.value = id
 }
+watch(openTab, () => {
+    if (!openTab.value) return
+    if (!calculators.value) return
+
+    const v = {
+        id: openTab.value as number,
+        calc: calculators.value.find(el => el.id == openTab.value) as ApiCalcType,
+
+    }
+    globalFenceType.value = v
+})
 </script>
 <template>
     <div>
+        <Modal :calcData="calculators.find(el => el.id == openTab)" />
         <div class="siteblock bg-white" :id="about?.slug" v-if="about">
             <div class="container">
                 <h1 class="siteblock-title">{{ about?.title }}</h1>
@@ -98,8 +112,7 @@ const setCalcData = (id: number) => {
                 </template>
             </div>
         </div>
-        <div class="siteblock bg-white" id="calculator" v-if="calculators">
-            <div class="container">
+        <div class="siteblock bg-white" :id="advantages?.slug">
             <div class="flex col-span-full gap-2 justify-center">
                 <template v-for="item in calculators">
                     <div class="flex items-center gap-2">
@@ -110,10 +123,6 @@ const setCalcData = (id: number) => {
                     </div>
                 </template>
             </div>
-            </div>
-        </div>
-        <Modal :calcData="calculators.find(el => el.id == openTab)" />
-        <div class="siteblock bg-white" :id="advantages?.slug">
             <div class="container gap-4">
                 <div class="col-span-full xl:col-span-8">
                     <ExpDiagram />