added animations and pageLoad and preLoader
This commit is contained in:
Amir Mohamadi
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="page calculation--page">
|
||||
<Hero title="نرم افزار محاسبه"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">وزن گریتینگ</h2>
|
||||
<p>بدلیل این که وزن گریتینگ ها به واسطه مواردی همچون مشخصات فنی یا همان دیتیل ساخت از جمله نوع گریتینگ،جنس تسمه و اندازه چشمه ها متغیر است،بدین منظور جهت راحتی و سهولت در انجام کار شما مشتری گرامی، شرکت اراک ریل نرم افزار محاسبه وزن و میزان بار قابل تحمل را برای گریتینگ طراحی و در این صفحه قرار داده است.که با داشتن مشخصات فنی گریتینگ مورد نظر خود میتوانید وزن گریتینگ خود را همراه با گالوانیزه و یا بدون گالوانیزه محاسبه کنید.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="app m-auto" :class="app.method === 'a' ? 'col-12 col-lg-6' : 'col-12'">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<div class="appTitle">
|
||||
<h2 class="title">ظرفیت بارگیری گریتینگ خود را محاسبه کنید</h2>
|
||||
</div>
|
||||
<div class="appMethod">
|
||||
<span>روش محاسبه</span>
|
||||
<el-radio-group v-model="app.method" style="direction: ltr">
|
||||
<el-radio-button label="b">نفر یا وسیله نقلیه</el-radio-button>
|
||||
<el-radio-button label="a">وارد کردن بار</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'b'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">انتخاب کلاس لودینگ</h2>
|
||||
<div class="class">
|
||||
<h4>عابر پیاده:</h4>
|
||||
<el-radio v-model="app.class" :label="1">کلاس 1</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>وسایل نقلیه:</h4>
|
||||
<el-radio v-model="app.class" :label="2">کلاس 2</el-radio>
|
||||
<el-radio v-model="app.class" :label="3">کلاس 3</el-radio>
|
||||
<el-radio v-model="app.class" :label="4">کلاس 4</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>لیفتراک:</h4>
|
||||
<el-radio v-model="app.class" :label="5">FL1</el-radio>
|
||||
<el-radio v-model="app.class" :label="6">FL2</el-radio>
|
||||
<el-radio v-model="app.class" :label="7">FL3</el-radio>
|
||||
<el-radio v-model="app.class" :label="8">FL4</el-radio>
|
||||
<el-radio v-model="app.class" :label="9">FL5</el-radio>
|
||||
<el-radio v-model="app.class" :label="10">FL6</el-radio>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="app.method === 'a' ? 'col-12' : 'col-12 col-lg-6'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">اطلاعات ورودی</h2>
|
||||
<el-form key="form-a">
|
||||
<el-form-item label="نوع گریتینگ">
|
||||
<el-radio-group v-model="app.type">
|
||||
<el-radio label="elec">الکتروفورج</el-radio>
|
||||
<el-radio label="press">پرسی</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="بار متمرکز (kn)">
|
||||
<el-input v-model="app.pointLoad" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>kn</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="بار گسترده (kn/m2)">
|
||||
<el-input v-model="app.distributedLoad" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>kn/m2</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="گام تسمه های باربر (mm)">
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_elec" v-if="app.type === 'elec'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarPitch_elec"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_press" v-if="app.type === 'press'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarPitch_press"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- <span>mm</span>-->
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="گام تسمه های رابط (mm)">
|
||||
|
||||
<el-select v-model="app.crossBarPitCh" key="bearingBarPitch_elec" v-if="app.type === 'elec'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in crossBarPitCh_elec"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.crossBarPitCh" key="bearingBarPitch_press" v-if="app.type === 'press'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in crossBarPitCh_press"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- <span>mm</span>-->
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="دهنه باربر (mm)">
|
||||
<el-input v-model="app.clearSpan" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="ضخامت تسمه های باربر (mm)">
|
||||
<el-input v-model="app.bearingBarThickness" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="ارتفاع تسمه های باربر (mm)">
|
||||
<el-select v-model="app.bearingBarHeight" key="bearingBarHeight" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarHeight"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
<div class="calculateBtn">
|
||||
<!-- <el-button>محاسبه</el-button>-->
|
||||
<button class="btn btn-reverse-fill">محاسبه</button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
history: null,
|
||||
app: {
|
||||
method: 'a',
|
||||
type: 'elec',
|
||||
class: '',
|
||||
pointLoad: '',
|
||||
distributedLoad: '',
|
||||
bearingBarPitch: '',
|
||||
crossBarPitCh: '',
|
||||
clearSpan: '',
|
||||
bearingBarThickness: '',
|
||||
bearingBarHeight: '',
|
||||
locale: this.$route.params.lang
|
||||
},
|
||||
bearingBarPitch_elec: [30, 35, 41, 50],
|
||||
bearingBarPitch_press: [11, 22, 33, 44, 50, 55],
|
||||
crossBarPitCh_elec: [50, 76, 100],
|
||||
crossBarPitCh_press: [11, 22, 33, 44, 50, 55, 66, 77, 88, 100],
|
||||
bearingBarHeight: [20, 25, 30, 35, 40, 45, 50, 55, 60]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.el-popper .popper__arrow {
|
||||
border-width: 0;
|
||||
filter: none;
|
||||
left: 35px;
|
||||
|
||||
&:lang(fa) {
|
||||
left: auto;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user