Amir Mohamadi
344 lines
15 KiB
Vue
344 lines
15 KiB
Vue
<template>
|
|
<section class="app-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="app m-auto" :class="app.method === 'custom' ? 'col-12 col-lg-9 col-xl-8 col-xxl-6' : 'col-12'">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
|
|
<div class="col-12">
|
|
<div class="appTitle">
|
|
<h2 class="title">{{ titleTxt }}</h2>
|
|
</div>
|
|
<div class="appMethod">
|
|
<span class="txt">{{ staticData.app.t4 }}</span>
|
|
<el-radio-group v-model="app.method" style="direction: ltr">
|
|
<template v-if="$route.params.lang === 'fa'">
|
|
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
|
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
|
</template>
|
|
<template v-else>
|
|
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
|
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
|
</template>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'classified'">
|
|
<div class="appLayout">
|
|
<h2 class="layoutTitle">{{ staticData.app.t7 }}</h2>
|
|
<div class="class">
|
|
<h4>{{ staticData.app.t8 }}</h4>
|
|
<el-radio v-model="app.vehicleClass" label="class1">{{ staticData.app.t9 }}</el-radio>
|
|
</div>
|
|
<div class="class">
|
|
<h4>{{ staticData.app.t10 }}</h4>
|
|
<el-radio v-model="app.vehicleClass" label="class2">{{ staticData.app.t11 }}</el-radio>
|
|
<el-radio v-model="app.vehicleClass" label="class3">{{ staticData.app.t12 }}</el-radio>
|
|
<el-radio v-model="app.vehicleClass" label="class4">{{ staticData.app.t13 }}</el-radio>
|
|
</div>
|
|
<div class="class">
|
|
<h4>{{ staticData.app.t14 }}</h4>
|
|
<el-radio v-model="app.vehicleClass" label="FL1">FL1</el-radio>
|
|
<el-radio v-model="app.vehicleClass" label="FL2">FL2</el-radio>
|
|
<el-radio v-model="app.vehicleClass" label="FL3">FL3</el-radio>
|
|
<el-radio v-model="app.vehicleClass" label="FL4">FL4</el-radio>
|
|
<el-radio v-model="app.vehicleClass" label="FL5">FL5</el-radio>
|
|
<el-radio v-model="app.vehicleClass" label="FL6">FL6</el-radio>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div :class="app.method === 'custom' ? 'col-12' : 'col-12 col-lg-6'">
|
|
<div class="appLayout">
|
|
<h2 class="layoutTitle">{{ staticData.app.t15 }}</h2>
|
|
<el-form key="form-a">
|
|
<el-form-item :label="staticData.app.t16">
|
|
<el-radio-group v-model="app.gratingType">
|
|
<el-radio label="forge">{{ staticData.app.t17 }}</el-radio>
|
|
<el-radio label="pressured">{{ staticData.app.t18 }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="staticData.app.t19" v-if="app.method === 'custom'">
|
|
<el-radio-group v-model="app.loadType">
|
|
<el-radio label="pointedLoad">{{ staticData.app.t20 }}</el-radio>
|
|
<el-radio label="distributedLoad">{{ staticData.app.t21 }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item :class="validation.pointedLoadValue ? 'is-error' : null" :label="staticData.app.t22" v-if="app.method === 'custom' && app.loadType === 'pointedLoad'">
|
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.pointedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
|
<p class="err" v-if="validation.pointedLoadValue">{{ validation.pointedLoadValue.msg }}</p>
|
|
</el-form-item>
|
|
|
|
<el-form-item :class="validation.distributedLoadValue ? 'is-error' : null" :label="staticData.app.t23" v-if="app.method === 'custom' && app.loadType === 'distributedLoad'">
|
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.distributedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
|
<p class="err" v-if="validation.distributedLoadValue">{{ validation.distributedLoadValue.msg }}</p>
|
|
</el-form-item>
|
|
|
|
<el-form-item :class="validation.bearingBarPitch ? 'is-error' : null" :label="staticData.app.t24" v-if="calculationValues">
|
|
|
|
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_forge" v-if="app.gratingType === 'forge'"
|
|
:placeholder="staticData.app.select">
|
|
<el-option
|
|
v-for="item in calculationValues.bearingBarPitch_forge"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
|
<el-option
|
|
v-for="item in calculationValues.bearingBarPitch_pressured"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<p class="err" v-if="validation.bearingBarPitch">{{ validation.bearingBarPitch.msg }}</p>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item :class="validation.crossBarPitch ? 'is-error' : null" :label="staticData.app.t25" v-if="calculationValues">
|
|
|
|
<el-select v-model="app.crossBarPitch" key="crossBarPitch_forge" v-if="app.gratingType === 'forge'" :placeholder="staticData.app.select">
|
|
<el-option
|
|
v-for="item in calculationValues.crossBarPitch_forge"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<el-select v-model="app.crossBarPitch" key="crossBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
|
<el-option
|
|
v-for="item in calculationValues.crossBarPitch_pressured"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<p class="err" v-if="validation.crossBarPitch">{{ validation.crossBarPitch.msg }}</p>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item :class="validation.clearSpan ? 'is-error' : null" :label="staticData.app.t26">
|
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.clearSpan" :placeholder="staticData.app.enter"></el-input>
|
|
<p class="err" v-if="validation.clearSpan">{{ validation.clearSpan.msg }}</p>
|
|
</el-form-item>
|
|
|
|
<el-form-item :class="validation.bearingBarThickness ? 'is-error' : null" :label="staticData.app.t27">
|
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.bearingBarThickness" :placeholder="staticData.app.enter"></el-input>
|
|
<p class="err" v-if="validation.bearingBarThickness">{{ validation.bearingBarThickness.msg }}</p>
|
|
</el-form-item>
|
|
|
|
<!-- cross bar thickness -->
|
|
<el-form-item :class="validation.crossBarThickness ? 'is-error' : null" :label="staticData.app.t30" v-if="app.gratingType === 'pressured'">
|
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarThickness" :placeholder="staticData.app.enter"></el-input>
|
|
<p class="err" v-if="validation.crossBarThickness">{{ validation.crossBarThickness.msg }}</p>
|
|
</el-form-item>
|
|
<!-- cross bar thickness -->
|
|
|
|
<el-form-item :class="validation.bearingBarHeight ? 'is-error' : null" :label="staticData.app.t28">
|
|
<el-select v-model="app.bearingBarHeight"
|
|
key="bearingBarHeight"
|
|
:placeholder="relativeValues || app.loadType === 'distributedLoad' ? staticData.app.select : staticData.app.t29">
|
|
<el-option
|
|
v-for="item in app.loadType === 'distributedLoad' ? calculationValues.bearingBarHeight : relativeValues"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
<p class="err" v-if="validation.bearingBarHeight">{{ validation.bearingBarHeight.msg }}</p>
|
|
</el-form-item>
|
|
|
|
<!-- cross bar height -->
|
|
<el-form-item :class="validation.crossBarHeight ? 'is-error' : null" :label="staticData.app.t31" v-if="app.gratingType === 'pressured'">
|
|
<el-input inputmode="numeric" pattern="[0-9]*" v-model="app.crossBarHeight" :placeholder="staticData.app.enter"></el-input>
|
|
<p class="err" v-if="validation.crossBarHeight">{{ validation.crossBarHeight.msg }}</p>
|
|
</el-form-item>
|
|
<!-- cross bar height -->
|
|
|
|
<div class="calculateBtn">
|
|
<button class="btn btn-reverse-fill" @click.prevent="calculate">{{ staticData.app.calculate }}</button>
|
|
</div>
|
|
</el-form>
|
|
<div class="copyRight">
|
|
<p>Design And develop by <a href="https://www.negarehagency.com" target="_blank">negarehagency.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 mt-5">
|
|
<div class="appResult" v-if="waiting || appResult || validation">
|
|
<p class="waiting" v-if="waiting">{{ staticData.app.waiting }}</p>
|
|
<p class="err" v-if="!appResult && !waiting">{{ staticData.app.validationErr }}</p>
|
|
<p v-if="appResult" :class="appResult.sigmaStatus ? 'success' : 'failure'">{{ appResult.sigma }}</p>
|
|
<p v-if="appResult" :class="appResult.deflectionStatus ? 'success' : 'failure'">{{ appResult.deflection }}</p>
|
|
</div>
|
|
<div class="weight" v-if="!validation && waiting || appResult">
|
|
<p v-if="appResult">{{ staticData.app.t32 }}</p>
|
|
<p dir="ltr">
|
|
<b class="colored"> {{ appResult.gratingWeight.normal }} </b>
|
|
<b> Kg/m<sup>2</sup> </b>
|
|
</p>
|
|
<br>
|
|
<p v-if="appResult">{{ staticData.app.t33 }}</p>
|
|
<p dir="ltr">
|
|
<b class="colored"> {{ appResult.gratingWeight.galvanized }} </b>
|
|
<b> Kg/m<sup>2</sup> </b>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
app: {
|
|
method: 'custom',
|
|
gratingType: 'forge',
|
|
loadType: 'pointedLoad',
|
|
vehicleClass: 'class1',
|
|
pointedLoadValue: '',
|
|
distributedLoadValue: '',
|
|
bearingBarPitch: '',
|
|
crossBarPitch: '',
|
|
clearSpan: '',
|
|
bearingBarThickness: '',
|
|
crossBarThickness: '',
|
|
bearingBarHeight: '',
|
|
crossBarHeight: '',
|
|
locale: this.$route.params.lang
|
|
},
|
|
calculationValues: null,
|
|
relativeValues: null,
|
|
validation: {},
|
|
waiting: false,
|
|
appResult: null
|
|
}
|
|
},
|
|
async fetch() {
|
|
const calculationValues = await this.$axios.get('/api/public/calculation/values')
|
|
this.calculationValues = calculationValues.data
|
|
},
|
|
props: ['titleTxt'],
|
|
computed: {
|
|
staticData() {
|
|
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
|
},
|
|
gratingTypeTrigger() {
|
|
return this.app.gratingType
|
|
},
|
|
crossBarPitchTrigger() {
|
|
return this.app.crossBarPitch
|
|
},
|
|
loadTypeTrigger() {
|
|
return this.app.loadType
|
|
},
|
|
vehicleClassTrigger() {
|
|
return this.app.vehicleClass
|
|
},
|
|
methodTrigger() {
|
|
return this.app.method
|
|
}
|
|
},
|
|
watch: {
|
|
loadTypeTrigger(newVal, oldVal) {
|
|
this.app.bearingBarHeight = ''
|
|
},
|
|
gratingTypeTrigger(newVal, oldVal) {
|
|
this.app.bearingBarPitch = ''
|
|
this.app.crossBarPitch = ''
|
|
},
|
|
crossBarPitchTrigger(newVal, oldVal) {
|
|
if (this.app.loadType === 'pointedLoad') {
|
|
this.app.bearingBarHeight = ''
|
|
const data = {
|
|
gratingType: this.app.gratingType,
|
|
crossBarPitch: this.app.crossBarPitch
|
|
}
|
|
this.$axios.post('/api/public/calculation/relativeValues', data)
|
|
.then(res => {
|
|
this.relativeValues = res.data
|
|
})
|
|
.catch(err => {
|
|
this.relativeValues = null
|
|
})
|
|
}
|
|
},
|
|
vehicleClassTrigger(newVal, oldVal) {
|
|
this.app.crossBarPitch = ''
|
|
if (newVal === 'class1') this.app.loadType = 'distributedLoad'
|
|
else this.app.loadType = 'pointedLoad'
|
|
},
|
|
methodTrigger(newVal, oldVal) {
|
|
if (newVal === 'classified') {
|
|
this.app.vehicleClass = 'class1'
|
|
this.app.loadType = 'distributedLoad'
|
|
} else {
|
|
this.app.vehicleClass = ''
|
|
this.app.loadType = 'pointedLoad'
|
|
}
|
|
},
|
|
waiting() {
|
|
setTimeout(() => {
|
|
this.$gsap.timeline()
|
|
.to($('.app .appResult,.app .weight'), {opacity: 1, paddingTop: 20, paddingBottom: 20, duration: 0.2})
|
|
.to($('.app .appResult p,.app .weight p'), {opacity: 1, fontSize: 16, letterSpacing: 0, duration: 0.2}, 0)
|
|
}, 100)
|
|
}
|
|
},
|
|
methods: {
|
|
calculate() {
|
|
this.validation = {}
|
|
this.waiting = true
|
|
this.appResult = null
|
|
setTimeout(() => {
|
|
this.$axios.post('/api/public/calculate', this.app)
|
|
.then(res => {
|
|
this.waiting = false
|
|
this.appResult = res.data
|
|
})
|
|
.catch(err => {
|
|
this.waiting = false
|
|
if (err.response.status === 422) this.validation = err.response.data.validation
|
|
})
|
|
}, 2000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
.el-popper .popper__arrow {
|
|
border-width: 0;
|
|
filter: none;
|
|
left: 35px;
|
|
|
|
&:lang(fa) {
|
|
left: auto;
|
|
right: 35px;
|
|
}
|
|
}
|
|
</style>
|