mahyargdz
111 lines
3.7 KiB
Vue
111 lines
3.7 KiB
Vue
<template>
|
|
<div class="container calculation-module" :class="whiteTxt && 'white'">
|
|
<div class="row align-items-start">
|
|
<div class="col-12 mb-4" :class="mini ? 'col-lg-6 col-xl-3 mb-xl-0' : 'col-md-6 col-lg-3 mb-lg-0'">
|
|
<p>{{ meterUnitLength ? content.s10.t6 : content.s10.t18 }}</p>
|
|
<el-input-number v-model="length" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
|
|
<el-checkbox class="mt-2" @change="sheetWeight = null" v-model="meterUnitLength" :class="mini && 'small'">
|
|
{{ content.s10.t17 }}
|
|
</el-checkbox>
|
|
</div>
|
|
<div class="col-12 mb-4" :class="mini ? 'col-lg-6 col-xl-3 mb-xl-0' : 'col-md-6 col-lg-3 mb-lg-0'">
|
|
<p>{{ meterUnitWidth ? content.s10.t10 : content.s10.t19 }}</p>
|
|
<el-input-number v-model="width" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
|
|
<el-checkbox class="mt-2" @change="sheetWeight = null" v-model="meterUnitWidth" :class="mini && 'small'">
|
|
{{ content.s10.t17 }}
|
|
</el-checkbox>
|
|
</div>
|
|
<div class="col-12 mb-4" :class="mini ? 'col-lg-6 col-xl-3 mb-xl-0' : 'col-md-6 col-lg-3 mb-lg-0'">
|
|
<p>{{ meterUnitThickness ? content.s10.t20 : content.s10.t5 }}</p>
|
|
<el-input-number v-model="thickness" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
|
|
<el-checkbox class="mt-2" @change="sheetWeight = null" v-model="meterUnitThickness" :class="mini && 'small'">
|
|
{{ content.s10.t17 }}
|
|
</el-checkbox>
|
|
</div>
|
|
<div class="col-12 mb-4" :class="mini ? 'col-lg-6 col-xl-3 mb-xl-0' : 'col-md-6 col-lg-3 mb-lg-0'">
|
|
<p>{{ content.s10.t7 }}</p>
|
|
<el-input-number v-model="quantity" :min="1" :size="mini ? 'small' : 'large'"></el-input-number>
|
|
</div>
|
|
<div class="col-12 mx-auto mb-5 mt-3">
|
|
<div>
|
|
<button type="button" @click="calculate" class="btn btn-default cal-btn mt-4 mb-4 d-block">
|
|
{{ content.s10.t2 }}
|
|
</button>
|
|
<template >
|
|
<p v-if="sheetWeight">
|
|
<span>
|
|
{{ content.s10.t3 }}
|
|
</span>
|
|
<span style="font-weight: bold">
|
|
{{ sheetWeight }}
|
|
</span>
|
|
<span>
|
|
{{ content.s10.t16 }}
|
|
</span>
|
|
</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SheetWeightCalculationModule',
|
|
props: {
|
|
whiteTxt: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
mini: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
length: 1,
|
|
meterUnitLength: true,
|
|
|
|
width: 1,
|
|
meterUnitWidth: true,
|
|
|
|
thickness: 1,
|
|
meterUnitThickness: false,
|
|
|
|
quantity: 1,
|
|
sheetWeight: null
|
|
}
|
|
},
|
|
computed: {
|
|
content() {
|
|
return this.$store.state.content.home[this.$route.params.lang]
|
|
}
|
|
},
|
|
methods: {
|
|
calculate() {
|
|
// check for validations
|
|
if (!this.width || !this.thickness || !this.length || !this.quantity) {
|
|
return this.$message({
|
|
message: this.content.s10.errMsg1,
|
|
type: 'error'
|
|
})
|
|
}
|
|
|
|
// init fixed and relative values
|
|
const FixedCoefficient = 7.85
|
|
const meterUnitRatio = 1000
|
|
const length = this.meterUnitLength ? this.length : this.length / meterUnitRatio
|
|
const width = this.meterUnitWidth ? this.width : this.width / meterUnitRatio
|
|
const thickness = this.meterUnitThickness ? this.thickness * meterUnitRatio : this.thickness
|
|
|
|
// calulation formula
|
|
this.sheetWeight = (width * thickness * length * this.quantity * FixedCoefficient).toFixed(2)
|
|
}
|
|
}
|
|
}
|
|
</script>
|