calc part
This commit is contained in:
parent
0f7992b495
commit
e20f3f75a2
|
|
@ -10,6 +10,7 @@ body {
|
|||
|
||||
.container {
|
||||
@apply max-w-7xl mx-auto px-4 grid grid-cols-12 items-center;
|
||||
|
||||
&.min-w-full {
|
||||
@apply px-0;
|
||||
}
|
||||
|
|
@ -92,7 +93,6 @@ a[href^="#"] {
|
|||
|
||||
&-image {
|
||||
@apply col-span-full xl:col-span-4 flex justify-center items-center;
|
||||
min-height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ label {
|
|||
}
|
||||
|
||||
input {
|
||||
@apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-neutral disabled:cursor-not-allowed;
|
||||
@apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-neutral disabled:cursor-not-allowed invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const { hasFinishLoading, progress, items } = await useProgress()
|
|||
<Suspense>
|
||||
<ModelParametric />
|
||||
</Suspense>
|
||||
<TresDirectionalLight :position="[70, 60, 70]" :intensity="10" color="#fdf5ca" cast-shadow />
|
||||
<TresDirectionalLight :position="[80, 70, 60]" :intensity="10" color="#fdf5ca" cast-shadow />
|
||||
</TresCanvas>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,34 +6,46 @@ const lamelle_color = useState('lamelle_color', () => '#C2B078')
|
|||
|
||||
const parametric = {
|
||||
length: {
|
||||
min: 100,
|
||||
min: 400,
|
||||
max: 2400,
|
||||
step: 10,
|
||||
step: 50,
|
||||
},
|
||||
total_length: {
|
||||
min: 0.1,
|
||||
step: 0.1,
|
||||
min: 0.4,
|
||||
step: 0.05,
|
||||
},
|
||||
height: {
|
||||
min: 220,
|
||||
min: 675,
|
||||
max: 2400,
|
||||
step: 115,
|
||||
}
|
||||
}
|
||||
const form_state = reactive({
|
||||
length: fence_section.value * 1000,
|
||||
height: lamelles_count.value * parametric.height.step,
|
||||
fence_length: 100,
|
||||
height: 100 + lamelles_count.value * parametric.height.step,
|
||||
total_length: fence_section.value,
|
||||
total_length_mm: fence_section.value * 1000,
|
||||
full_sections: 1,
|
||||
extra_section: 0
|
||||
})
|
||||
const form_errors = reactive({
|
||||
length: false,
|
||||
height: false,
|
||||
total_length: false,
|
||||
})
|
||||
const form_refs = {
|
||||
length: ref(),
|
||||
height: ref(),
|
||||
total_length: ref(),
|
||||
}
|
||||
const auto_section_width = ref<boolean>(false)
|
||||
|
||||
const changeParametres = () => {
|
||||
const lamelles = Math.floor(form_state.height / parametric.height.step)
|
||||
lamelles_count.value = lamelles
|
||||
fence_section.value = form_state.length * 0.001
|
||||
|
||||
for (const key in form_state) {
|
||||
if (parametric.hasOwnProperty(key) && parametric[key].max) {
|
||||
if (form_state[key] > parametric[key].max) {
|
||||
|
|
@ -46,30 +58,31 @@ const changeParametres = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
form_state.total_length_mm = form_state.total_length * 1000
|
||||
if (auto_section_width.value) {
|
||||
// form_state.length
|
||||
// if (form_state.total_length_mm % form_state.length) {
|
||||
let w = parametric.length.max
|
||||
while (((form_state.total_length_mm % w) > 0) && w > (parametric.length.min + parametric.length.step * 10)) {
|
||||
w -= parametric.length.step
|
||||
}
|
||||
form_state.length = w
|
||||
// }
|
||||
|
||||
}
|
||||
if (form_state.total_length_mm < form_state.length) {
|
||||
form_state.length = form_state.total_length_mm
|
||||
}
|
||||
form_state.full_sections = Math.ceil(form_state.total_length_mm / form_state.length)
|
||||
if (form_state.total_length_mm % form_state.length) {
|
||||
form_state.extra_section = (form_state.total_length_mm % form_state.length).toFixed(0)
|
||||
|
||||
const t_f = (form_state.total_length_mm - form_state.fence_length)
|
||||
const i_f = (form_state.length - form_state.fence_length)
|
||||
form_state.full_sections = Math.floor(t_f / i_f)
|
||||
if (t_f % i_f) {
|
||||
form_state.extra_section = Math.round(t_f % i_f)
|
||||
} else {
|
||||
form_state.extra_section = 0
|
||||
}
|
||||
|
||||
if (form_state.extra_section < parametric.length.min) {
|
||||
console.log('eh')
|
||||
form_refs.total_length.value.setCustomValidity('')
|
||||
if (form_state.extra_section && form_state.extra_section < parametric.length.min) {
|
||||
form_refs.total_length.value.setCustomValidity('Расчет невозможен')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,6 +113,7 @@ const autoSectionWidth = () => {
|
|||
const predefLamelleColors = ['#474B4E', '#705335', '#FDF4E3', '#2F4538']
|
||||
const predefPillarColors = ['#474B4E', '#6A5D4D', '#F4F4F4', '#2F4538']
|
||||
|
||||
watch(form_state, changeParametres, { deep: true })
|
||||
watch(form_state, changeParametres, { deep: true })
|
||||
|
||||
const calc_text = computed(() => {
|
||||
|
|
@ -124,7 +138,7 @@ const toggleModal = () => {
|
|||
<Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline"
|
||||
:class="auto_section_width ? `disabled` : ''" />
|
||||
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length"
|
||||
:disabled="auto_section_width" />
|
||||
:disabled="auto_section_width" :ref="form_refs.length" />
|
||||
<Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline"
|
||||
:class="auto_section_width ? `disabled` : ''" />
|
||||
<Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
|
||||
|
|
@ -132,7 +146,8 @@ const toggleModal = () => {
|
|||
<div class="form-item">
|
||||
<label for="height">Высота забора, мм</label>
|
||||
<Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" />
|
||||
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
|
||||
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height"
|
||||
:ref="form_refs.height" />
|
||||
<Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -160,7 +175,7 @@ const toggleModal = () => {
|
|||
<label for="total_length">Общая длина забора, м</label>
|
||||
<Icon type="button" @click="increment('total_length', -1)" name="mdi:minus-circle-outline" />
|
||||
<input type="number" id="total_length" v-bind="parametric.total_length"
|
||||
v-model="form_state.total_length" />
|
||||
v-model="form_state.total_length" :ref="form_refs.total_length" />
|
||||
<Icon type="button" @click="increment('total_length', 1)" name="mdi:plus-circle-outline" />
|
||||
</div>
|
||||
<div class="form-item grow">
|
||||
|
|
@ -169,9 +184,8 @@ const toggleModal = () => {
|
|||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<button class="not-prose" @click="toggleModal">Купить прямо сейчас</button>
|
||||
<button @click="toggleModal">Купить прямо сейчас</button>
|
||||
</p>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue