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

calc

This commit is contained in:
Kseninia Mikhaylova 2024-06-13 12:46:42 +03:00
parent f687cbf7e6
commit 1459cbcd0e
4 changed files with 18 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/main.scss
View File

@ -3,7 +3,9 @@
@tailwind utilities; @tailwind utilities;
@layer components {} @layer components {}
@import 'fonts.scss'; @import 'fonts.scss';
html { html {
// @apply text-[15px] // @apply text-[15px]
} }
@ -129,23 +131,23 @@ a[href^="#"] {
} }
label { label {
@apply inline-block text-sm font-medium text-gray-900 dark:text-white min-w-36; @apply inline-block text-sm font-medium text-gray-900 min-w-36;
} }
input { 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 invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500; @apply bg-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500;
} }
textarea { textarea {
@apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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 max-w-full min-h-10 max-h-40; @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 max-w-full min-h-10 max-h-40;
} }
button { button {
@apply rounded bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary; @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-4;
&.neutral, &.neutral,
&[type="reset"] { &[type="reset"] {
@apply bg-neutral hover:bg-neutral-400 @apply bg-neutral-200 hover:bg-neutral-400
} }
} }

46
components/calcValues.vue
View File

@ -30,7 +30,7 @@ const form_state = reactive({
length: fence_section.value * 1000, length: fence_section.value * 1000,
fence_length: 100, fence_length: 100,
height: 100 + lamelles_count.value * parametric.height.step, height: 100 + lamelles_count.value * parametric.height.step,
total_length: fence_section.value, total_length: fence_section.value * 2,
total_length_mm: fence_section.value * 1000, total_length_mm: fence_section.value * 1000,
full_sections: 1, full_sections: 1,
extra_section: 0 extra_section: 0
@ -61,11 +61,6 @@ const changeParametres = () => {
form_state[key_s] = parametric[key_p].max form_state[key_s] = parametric[key_p].max
} }
} }
if (parametric[key_p].min) {
if (form_state[key_s] < parametric[key_p].min) {
form_state[key_s] = parametric[key_p].min
}
}
} }
form_state.total_length_mm = form_state.total_length * 1000 form_state.total_length_mm = form_state.total_length * 1000
@ -103,25 +98,6 @@ const setLamelleColor = (color: ralTypes) => {
const setPillarColor = (color: ralTypes) => { const setPillarColor = (color: ralTypes) => {
pillar_color.value = color pillar_color.value = color
} }
const increment = (field: keyof typeof form_state, value: number) => {
if (form_state.hasOwnProperty(field)) {
const key_p = field as keyof typeof parametric
let v = (form_state[field] + value * parametric[key_p].step ?? 1)
if (parametric.hasOwnProperty(field)) {
if (parametric[key_p].max) {
if (v > parametric[key_p].max) {
v = parametric[key_p].max
}
}
if (parametric[key_p].min) {
if (v < parametric[key_p].min) {
v = parametric[key_p].min
}
}
}
form_state[field] = parseFloat(v.toFixed(2))
}
}
const autoSectionWidth = () => { const autoSectionWidth = () => {
auto_section_width.value = !auto_section_width.value auto_section_width.value = !auto_section_width.value
} }
@ -152,26 +128,23 @@ const toggleModal = () => {
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label for="length">Длина секции, мм</label> <label for="length">Длина секции, мм</label>
<Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline" <input disabled :value="`${form_state.length} мм`" class="w-28" />
:class="auto_section_width ? `disabled` : ''" /> <input id="length" type="range" v-bind="parametric.length" v-model="form_state.length"
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length"
:disabled="auto_section_width" :ref="form_refs.length" /> :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" /> <Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="height">Высота забора, мм</label> <label for="height">Высота забора, мм</label>
<Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" /> <input disabled :value="`${form_state.height} мм`" class="w-28" />
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" <input id="height" type="range" v-bind="parametric.height" v-model="form_state.height"
:ref="form_refs.height" /> :ref="form_refs.height" />
<Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label for="lamelle_color">Цвет ламелей</label> <label for="lamelle_color">Цвет ламелей</label>
<input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" disabled /> <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
disabled />
<template v-for="item in predefLamelleColors"> <template v-for="item in predefLamelleColors">
<ColorPicker :color="item" :cb="setLamelleColor" :open="false" <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
:active="lamelle_color == item" /> :active="lamelle_color == item" />
@ -180,7 +153,8 @@ const toggleModal = () => {
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="pillar_color">Цвет столба</label> <label for="pillar_color">Цвет столба</label>
<input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" disabled /> <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
disabled />
<template v-for="item in predefPillarColors"> <template v-for="item in predefPillarColors">
<ColorPicker :color="item" :cb="setPillarColor" :open="false" <ColorPicker :color="item" :cb="setPillarColor" :open="false"
:active="pillar_color == item" /> :active="pillar_color == item" />
@ -191,10 +165,8 @@ const toggleModal = () => {
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label for="total_length">Общая длина забора, м</label> <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" <input type="number" id="total_length" v-bind="parametric.total_length"
v-model="form_state.total_length" :ref="form_refs.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>
<div class="form-item grow"> <div class="form-item grow">
<label for="calculation">Приблизительный расчет забора</label> <label for="calculation">Приблизительный расчет забора</label>

2
components/model/parametric.vue
View File

@ -87,7 +87,7 @@ texture.needsUpdate = true;
<TresMesh receive-shadow :position-y="-0.5" name="ground"> <TresMesh receive-shadow :position-y="-0.5" name="ground">
<TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" /> <TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" />
<TresMeshStandardMaterial :map="pbrTexture.map" :normal-map="pbrTexture.normalMap" <TresMeshStandardMaterial :map="pbrTexture.map" :normal-map="pbrTexture.normalMap"
:roughness-map="pbrTexture.roughnessMap" :ao-map="pbrTexture.aoMap" :metalness="0" :roughness="0" /> :roughness-map="pbrTexture.roughnessMap" :ao-map="pbrTexture.aoMap" :metalness="0" :roughness="0.8" />
</TresMesh> </TresMesh>
<TresMesh receive-shadow :position-y="-0.25" :position-x="10" name="ground"> <TresMesh receive-shadow :position-y="-0.25" :position-x="10" name="ground">
<TresCircleGeometry :args="[10]" :rotate-x="-Math.PI * 0.5" /> <TresCircleGeometry :args="[10]" :rotate-x="-Math.PI * 0.5" />