mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #84

Merged
ksenia_mikhailova merged 141 commits from dev into main 2024-10-03 15:30:24 +03:00
Conversation 0 Commits 141 Files Changed 62 +143 -131
7 changed files with 143 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c0608e1650 - Show all commits

19
assets/main.scss
View File

@ -178,18 +178,10 @@ a[href^="#"] {
} }
&_calc { &_calc {
@apply py-0 relative; // @apply;
>.container:first-child { .container {
@apply relative min-h-[650px] justify-between; @apply gap-4;
>* {
@apply z-10
}
}
&-canvas {
@apply absolute top-0 bottom-0;
} }
} }
@ -366,13 +358,14 @@ button {
&-changer { &-changer {
@apply flex gap-0; @apply flex gap-0;
} }
&-list { &-list {
@apply flex gap-4 w-full; @apply flex gap-4 w-full;
} }
&-item { &-item {
@apply w-10 h-10; @apply w-10 h-10;
&--empty { &--empty {
@apply block bg-slate-300; @apply block bg-slate-300;
} }

40
components/calc/models.vue
View File

@ -34,27 +34,25 @@ watch(fence_section, () => {
}) })
</script> </script>
<template> <template>
<div class="container min-w-full siteblock_calc-canvas"> <ClientOnly fallback-tag="div">
<ClientOnly fallback-tag="div"> <template #fallback>
<template #fallback> <div class="fallback">
<div class="fallback"> Загрузка 3D модели
Загрузка 3D модели </div>
</div> </template>
</template> <Loader />
<Loader /> <Stats />
<Stats /> <TresCanvas>
<TresCanvas> <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
<TresPerspectiveCamera v-bind="cameraStat" ref="camera" /> <OrbitControls v-bind="controlsState" make-default />
<OrbitControls v-bind="controlsState" make-default /> <Suspense>
<ModelCamera />
</Suspense>
<TresGroup :position-y="-0.5">
<Suspense> <Suspense>
<ModelCamera /> <ModelParametric />
</Suspense> </Suspense>
<TresGroup :position-y="-0.5"> </TresGroup>
<Suspense> </TresCanvas>
<ModelParametric /> </ClientOnly>
</Suspense>
</TresGroup>
</TresCanvas>
</ClientOnly>
</div>
</template> </template>

181
components/calc/values.vue
View File

@ -18,6 +18,7 @@ const extra_section = use_extra_section()
const total_length = use_total_length() const total_length = use_total_length()
const min_length = use_min_length() const min_length = use_min_length()
const goto_cam = use_goto_camera() const goto_cam = use_goto_camera()
const goto_target = use_goto_target()
const open_calc = use_open_calc() const open_calc = use_open_calc()
if (!pillar_color.value) { if (!pillar_color.value) {
@ -186,108 +187,114 @@ const calc_table = computed(() => {
watch(open_calc, () => { watch(open_calc, () => {
if (Object.keys(open_calc.value).length == 0) { if (Object.keys(open_calc.value).length == 0) {
goto_cam.value = new Vector3(1, 1, 1) goto_cam.value = new Vector3(0, 0, 0)
goto_target.value = new Vector3(0, 0, 0)
} }
}) })
</script> </script>
<template> <template>
<div class="container relative py-4"> <div class="form">
<div class="col-span-3"> <div class="form-row">
<div class="form-row"> <div class="form-item w-full">
<div class="form-item w-full"> <label for="length">Длина ламельного блока, мм</label>
<label for="length">Длина ламельного блока, мм</label> <input :value.input="`${form_state.length.toFixed(0)} мм`" disabled class="w-full" />
<input :value.input="`${form_state.length.toFixed(0)} мм`" disabled class="w-full" /> <input id="length" type="range" class="xl:w-full" v-bind="parametric.length" v-model="form_state.length"
<input id="length" type="range" class="xl:w-full" v-bind="parametric.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" /> </div>
</div> </div>
<div class="form-item w-full"> <div class="form-row">
<label for="height">Высота забора, мм</label> <div class="form-item w-full">
<input :value="`${form_state.height} мм`" class="w-full" disabled /> <label for="height">Высота забора, мм</label>
<input id="height" type="range" class="xl:w-full" v-bind="parametric.height" <input :value="`${form_state.height} мм`" class="w-full" disabled />
v-model="form_state.height" :ref="form_refs.height" /> <input id="height" type="range" class="xl:w-full" v-bind="parametric.height" v-model="form_state.height"
</div> :ref="form_refs.height" />
</div>
<div class="form-item"> </div>
<label for="total_length">Общая длина забора, м</label> <div class="form-row">
<input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600" <div class="form-item">
v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" /> <label for="total_length">Общая длина забора, м</label>
</div> <input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
<div class="form-item text-sm xl:text-base"> v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" />
<p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim"> </div>
Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший <div class="form-item text-sm xl:text-base">
размер, чтобы продолжить. <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
</p> Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
</div> размер, чтобы продолжить.
<div class="form-item form-item_checkbox">
<input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
<label for="auto_length">Автоматический подбор секции</label>
</div>
<p v-if="!form_state.auto_length" class="text-ioprim text-sm">
Рекомендуем вам включить автоподбор длины секции
</p> </p>
<div class="form-item form-item_checkbox">
<input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
<label for="remove_pillar">Без столбов</label>
</div>
</div> </div>
</div> </div>
<div class="col-span-3 col-start-10"> <div class="form-row">
<div class="form-row"> <div class="form-item form-item_checkbox">
<div class="form-item form-item_color"> <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
<label for="lamelle_color">Цвет ламелей</label> <label for="auto_length">Автоматический подбор секции</label>
<DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" </div>
:goto_cam="new Vector3(1, 1, 1)"> <p v-if="!form_state.auto_length" class="text-ioprim text-sm">
<input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{ Рекомендуем вам включить автоподбор длины секции
backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent', </p>
color: lamelle_text </div>
}" /> <div class="form-row">
</DropdownPicker> <div class="form-item form-item_checkbox">
</div> <input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
<div class="form-item form-item_color"> <label for="remove_pillar">Без столбов</label>
<label for="pillar_color">Цвет столба</label>
<DropdownPicker type="color" :cb="setPillarColor" name="pillar_color"
:goto_cam="new Vector3(-1, -1, -1)">
<input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
color: pillar_text
}" />
</DropdownPicker>
</div>
<div class="form-item form-item_color">
<label for="pillar_pattern">Узор столба</label>
<DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
:goto_cam="new Vector3(-1, 1, -1)">
<input id="pillar_pattern" type="text" :value="pillar_pattern" :style="{
backgroundImage: `url(${getFilename(pillar_pattern)})`
}" />
</DropdownPicker>
</div>
</div> </div>
</div> </div>
<template v-if="(form_state.total_length * 1000) >= parametric.length.min"> <div class="form-row">
<div class="col-span-12 xl:col-span-6 xl:col-start-4 grid calc_table"> <div class="form-item form-item_color">
<div class="grid grid-cols-4 relative"> <label for="lamelle_color">Цвет ламелей</label>
<template v-for="item in calc_table"> <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :goto_cam="new Vector3(1, 1, 1)"
<div class="col-span-3 calc_table-maincell"> :goto_target="new Vector3(1, 1, 1)">
{{ item.name }} <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
</div> backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
<div class="col-span-1 calc_table-maincell">{{ item.value }}</div> color: lamelle_text
</template> }" />
</div> </DropdownPicker>
<button @click.prevent="toggleModal">Рассчитать</button>
</div> </div>
</template> </div>
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_color">Цвет столба</label>
<DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :goto_cam="new Vector3(2, 1, 1)"
:goto_target="new Vector3(1, 1, 1)">
<input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
color: pillar_text
}" />
</DropdownPicker>
</div>
</div>
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_pattern">Узор столба</label>
<DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
:goto_cam="new Vector3(-1, 0, 0)" :goto_target="new Vector3(1, 1, 1)">
<input id="pillar_pattern" type="text" :value="pillar_pattern" :style="{
backgroundImage: `url(${getFilename(pillar_pattern)})`
}" />
</DropdownPicker>
</div>
</div>
<div class="form-row">
<template v-if="(form_state.total_length * 1000) >= parametric.length.min">
<div class="col-span-12 xl:col-span-6 xl:col-start-4 grid calc_table">
<div class="grid grid-cols-4 relative">
<template v-for="item in calc_table">
<div class="col-span-3 calc_table-maincell">
{{ item.name }}
</div>
<div class="col-span-1 calc_table-maincell">{{ item.value }}</div>
</template>
</div>
<button @click.prevent="toggleModal">Рассчитать</button>
</div>
</template>
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
#pillar_pattern { #pillar_pattern {
background-clip: content-box;
background-size: contain;
&[style*='url("/'] { &[style*='url("/'] {
background-size: contain;
background-clip: content-box;
color: transparent; color: transparent;
} }
} }

7
components/dropdown/picker.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { getColorHexFromRal } from '@/components/ral' import { getColorHexFromRal } from '@/components/ral'
import { Vector3 } from 'three';
const props = defineProps(['color', 'cb', 'name', 'type', 'goto_cam']) const props = defineProps(['color', 'cb', 'name', 'type', 'goto_cam', 'goto_target'])
const goto_cam = use_goto_camera() const goto_cam = use_goto_camera()
const goto_target = use_goto_target()
const open_calc = use_open_calc() const open_calc = use_open_calc()
const picker = ref() const picker = ref()
@ -16,6 +16,7 @@ const toggleOpen = (value: boolean = !is_open) => {
else if (value == false && open_calc.value.includes(props.name)) open_calc.value = [] else if (value == false && open_calc.value.includes(props.name)) open_calc.value = []
if (value == true && props.goto_cam) goto_cam.value = props.goto_cam if (value == true && props.goto_cam) goto_cam.value = props.goto_cam
if (value == true && props.goto_target) goto_target.value = props.goto_target
} }
const onClick = (color: string) => { const onClick = (color: string) => {
@ -26,7 +27,7 @@ const onClick = (color: string) => {
const clickOutside = (e: Event) => { const clickOutside = (e: Event) => {
if (!picker.value.contains(e.target)) { if (!picker.value.contains(e.target)) {
toggleOpen(false) // toggleOpen(false)
} }
} }

12
components/model/camera.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { useLoop } from '@tresjs/core';
import { Vector3 } from 'three'; import { Vector3 } from 'three';
const { controls, camera } = useTresContext(); const { controls, camera } = useTresContext();
const goto_camera = use_goto_camera(); const goto_camera = use_goto_camera();
const goto_target = use_goto_target();
const COUNT = 30 const COUNT = 30
type smooth = { type smooth = {
@ -18,10 +18,16 @@ const set_moveto = (obj: smooth, value: smooth["value"]) => {
obj.count = COUNT obj.count = COUNT
} }
watch(goto_camera, () => { watch(goto_target, () => {
smooth_target.value = goto_camera.value console.log(goto_target.value)
smooth_target.value = goto_target.value
smooth_target.count = COUNT smooth_target.count = COUNT
}) })
watch(goto_camera, () => {
console.log(goto_camera.value)
smooth_move.value = goto_camera.value
smooth_move.count = COUNT
})
const koef = (1 / COUNT) * 3 const koef = (1 / COUNT) * 3
const { onBeforeLoop } = useRenderLoop() const { onBeforeLoop } = useRenderLoop()

1
composables/useCalc.ts
View File

@ -23,4 +23,5 @@ export const use_max_size = () => useState<number>('max_size', () => 20)
export const use_explosion_state = () => useState<boolean>('explosion_state', () => false) export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
export const use_goto_camera = () => useState<Vector3 | undefined>('gotocam', () => undefined) export const use_goto_camera = () => useState<Vector3 | undefined>('gotocam', () => undefined)
export const use_goto_target = () => useState<Vector3 | undefined>('gotocontrols', () => undefined)
export const use_open_calc = () => useState<string[]>('open_calc', () => []) export const use_open_calc = () => useState<string[]>('open_calc', () => [])

14
pages/calc.vue
View File

@ -1,8 +1,14 @@
<template> <template>
<div class="siteblock siteblock_calc bg-white"> <div class="siteblock siteblock_calc bg-white">
<CalcValues /> <div class="container">
<Suspense> <div class="col-span-9 h-full relative">
<LazyCalcModels /> <Suspense>
</Suspense> <LazyCalcModels />
</Suspense>
</div>
<div class="col-span-3">
<CalcValues />
</div>
</div>
</div> </div>
</template> </template>