add pwa app
This commit is contained in:
Amir Mohamadi
@@ -316,26 +316,23 @@ module.exports.calculate = [
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
///////// grating weight
|
||||
const gratingLength = 1000
|
||||
const gratingWidth = 1000
|
||||
const frameThickness = 5
|
||||
const forgeCrossBarThickness = 6
|
||||
|
||||
///////////////// api
|
||||
|
||||
|
||||
///////// weight formula
|
||||
function forgeWeight() {
|
||||
// formula variables
|
||||
const B2 = gratingLength
|
||||
const B3 = gratingWidth
|
||||
const B4 = bearingBarHeight
|
||||
const B5 = bearingBarThickness
|
||||
const B6 = forgeCrossBarThickness
|
||||
const B7 = bearingBarPitch
|
||||
const B8 = crossBarPitch
|
||||
const B9 = frameThickness
|
||||
const B2 = Number(gratingLength)
|
||||
const B3 = Number(gratingWidth)
|
||||
const B4 = Number(bearingBarHeight)
|
||||
const B5 = Number(bearingBarThickness)
|
||||
const B6 = Number(forgeCrossBarThickness)
|
||||
const B7 = Number(bearingBarPitch)
|
||||
const B8 = Number(crossBarPitch)
|
||||
const B9 = Number(frameThickness)
|
||||
//
|
||||
const E2 = B2 - 2 * B9
|
||||
const E3 = B3
|
||||
@@ -358,7 +355,7 @@ module.exports.calculate = [
|
||||
const K3 = E3 * (2 * (B4 + B5)) * H3 / 1000000
|
||||
const K4 = E4 * (2 * (B4 + B5)) * H4 / 1000000
|
||||
const K5 = E5 * B6 * B6 * H5 / 1000000
|
||||
const K6 = K2 + K5
|
||||
const K6 = K2 + K3 + K4 + K5
|
||||
const K7 = 80
|
||||
const K8 = K6 * K7 / 1000000 * 7140
|
||||
const K9 = K8 / E6 * 100
|
||||
@@ -368,110 +365,67 @@ module.exports.calculate = [
|
||||
//
|
||||
const H10 = E8 / ((B2 * B3) / 1000000)
|
||||
|
||||
|
||||
// ///////// debug variables
|
||||
// // B
|
||||
// console.log('************ B Column ************')
|
||||
// console.log('B2 = ', B2)
|
||||
// console.log('B3 = ', B3)
|
||||
// console.log('B4 = ', B4)
|
||||
// console.log('B5 = ', B5)
|
||||
// console.log('B6 = ', B6)
|
||||
// console.log('B7 = ', B7)
|
||||
// console.log('B8 = ', B8)
|
||||
// console.log('B9 = ', B9)
|
||||
// // E
|
||||
// console.log('************ E Column ************')
|
||||
// console.log('E2 = ', E2)
|
||||
// console.log('E3 = ', E3)
|
||||
// console.log('E4 = ', E4)
|
||||
// console.log('E5 = ', E5)
|
||||
// console.log('E6 = ', E6)
|
||||
// console.log('E7 = ', E7)
|
||||
// console.log('E8 = ', E8)
|
||||
// // H
|
||||
// console.log('************ H Column ************')
|
||||
// console.log('H2 = ', H2)
|
||||
// console.log('H3 = ', H3)
|
||||
// console.log('H4 = ', H4)
|
||||
// console.log('H5 = ', H5)
|
||||
// console.log('H6 = ', H6)
|
||||
// console.log('H7 = ', H7)
|
||||
// console.log('H8 = ', H8)
|
||||
// console.log('H9 = ', H9)
|
||||
// console.log('H10 = ', H10)
|
||||
// // K
|
||||
// console.log('************ K Column ************')
|
||||
// console.log('K2 = ', K2)
|
||||
// console.log('K3 = ', K3)
|
||||
// console.log('K4 = ', K4)
|
||||
// console.log('K5 = ', K5)
|
||||
// console.log('K6 = ', K6)
|
||||
// console.log('K7 = ', K7)
|
||||
// console.log('K8 = ', K8)
|
||||
// console.log('K9 = ', K9)
|
||||
|
||||
|
||||
return {
|
||||
normal: Number(E6.toFixed(2)),
|
||||
galvanized: Number(E8.toFixed(2))
|
||||
}
|
||||
}
|
||||
|
||||
// function forgeWeight_rounded() {
|
||||
// // formula variables
|
||||
// const B2 = gratingLength
|
||||
// const B3 = gratingWidth
|
||||
// const B4 = bearingBarHeight
|
||||
// const B5 = bearingBarThickness
|
||||
// const B6 = forgeCrossBarThickness
|
||||
// const B7 = bearingBarPitch
|
||||
// const B8 = crossBarPitch
|
||||
// const B9 = frameThickness
|
||||
// //
|
||||
// const E2 = Math.round(B2 - 2 * B9)
|
||||
// const E3 = B3
|
||||
// const E4 = Math.round(B2 - 2 * B9)
|
||||
// const E5 = B3
|
||||
// //
|
||||
// const H2 = 0
|
||||
// const H3 = 2
|
||||
// const H4 = Math.round(E5 / B7 + 1)
|
||||
// const H5 = Math.round(E4 / B8 - 1)
|
||||
// const H6 = Number((E4 * B4 * B5 / 1000000 * 7.85 * H4).toFixed(2))
|
||||
// const H7 = Number(((E5 / 1000) * B6 * B6 * 7.85 / 1000 * H5).toFixed(2))
|
||||
// const H8 = Number((E2 * B9 * B4 / 1000000 * H2 * 7.85 + E3 * B4 * B9 / 1000000 * 7.85 * H3).toFixed(2))
|
||||
// const H9 = Math.round((1750 * (25.25 / (B4 * B5))))
|
||||
//
|
||||
// //
|
||||
// const E6 = Number((H6 + H7 + H8).toFixed(2))
|
||||
// //
|
||||
// const K2 = Number((E2 * (2 * (B4 + B5)) * H2 / 1000000).toFixed(2))
|
||||
// const K3 = Number((E3 * (2 * (B4 + B5)) * H3 / 1000000).toFixed(2))
|
||||
// const K4 = Number((E4 * (2 * (B4 + B5)) * H4 / 1000000).toFixed(2))
|
||||
// const K5 = Number((E5 * B6 * B6 * H5 / 1000000).toFixed(2))
|
||||
// const K6 = Number((K2 + K5).toFixed(2))
|
||||
// const K7 = 80
|
||||
// const K8 = Number((K6 * K7 / 1000000 * 7140).toFixed(2))
|
||||
// const K9 = Number((K8 / E6 * 100).toFixed(2))
|
||||
// //
|
||||
// const E7 = Number((K9 / 100 * E6).toFixed(2))
|
||||
// const E8 = Number((E6 + E7).toFixed(2))
|
||||
// //
|
||||
// const H10 = Number((E8 / ((B2 * B3) / 1000000)).toFixed(2))
|
||||
//
|
||||
// ///////// debug variables
|
||||
// // B
|
||||
// console.log('************ B Column ************')
|
||||
// console.log('B2 = ', B2)
|
||||
// console.log('B3 = ', B3)
|
||||
// console.log('B4 = ', B4)
|
||||
// console.log('B5 = ', B5)
|
||||
// console.log('B6 = ', B6)
|
||||
// console.log('B7 = ', B7)
|
||||
// console.log('B8 = ', B8)
|
||||
// console.log('B9 = ', B9)
|
||||
// // E
|
||||
// console.log('************ E Column ************')
|
||||
// console.log('E2 = ', E2)
|
||||
// console.log('E3 = ', E3)
|
||||
// console.log('E4 = ', E4)
|
||||
// console.log('E5 = ', E5)
|
||||
// console.log('E6 = ', E6)
|
||||
// console.log('E7 = ', E7)
|
||||
// console.log('E8 = ', E8)
|
||||
// // H
|
||||
// console.log('************ H Column ************')
|
||||
// console.log('H2 = ', H2)
|
||||
// console.log('H3 = ', H3)
|
||||
// console.log('H4 = ', H4)
|
||||
// console.log('H5 = ', H5)
|
||||
// console.log('H6 = ', H6)
|
||||
// console.log('H7 = ', H7)
|
||||
// console.log('H8 = ', H8)
|
||||
// console.log('H9 = ', H9)
|
||||
// console.log('H10 = ', H10)
|
||||
// // K
|
||||
// console.log('************ K Column ************')
|
||||
// console.log('K2 = ', K2)
|
||||
// console.log('K3 = ', K3)
|
||||
// console.log('K4 = ', K4)
|
||||
// console.log('K5 = ', K5)
|
||||
// console.log('K6 = ', K6)
|
||||
// console.log('K7 = ', K7)
|
||||
// console.log('K8 = ', K8)
|
||||
// console.log('K9 = ', K9)
|
||||
// // check H6
|
||||
// return E8
|
||||
// }
|
||||
|
||||
function pressuredWeight() {
|
||||
// formula variables
|
||||
const B15 = gratingLength
|
||||
const B16 = gratingWidth
|
||||
const B17 = bearingBarHeight
|
||||
const B18 = bearingBarThickness
|
||||
const B19 = crossBarHeight
|
||||
const B20 = crossBarThickness
|
||||
const B21 = bearingBarPitch
|
||||
const B22 = crossBarPitch
|
||||
const B23 = frameThickness
|
||||
const B15 = Number(gratingLength)
|
||||
const B16 = Number(gratingWidth)
|
||||
const B17 = Number(bearingBarHeight)
|
||||
const B18 = Number(bearingBarThickness)
|
||||
const B19 = Number(crossBarHeight)
|
||||
const B20 = Number(crossBarThickness)
|
||||
const B21 = Number(bearingBarPitch)
|
||||
const B22 = Number(crossBarPitch)
|
||||
const B23 = Number(frameThickness)
|
||||
//
|
||||
const E15 = B15 - 2
|
||||
const E16 = B16 - 2 * B23 - 2
|
||||
@@ -496,7 +450,7 @@ module.exports.calculate = [
|
||||
const K16 = E16 * (2 * (B17 + B18)) * H16 / 1000000
|
||||
const K17 = E17 * (2 * (B17 + B18)) * H17 / 1000000
|
||||
const K18 = E18 * (2 * (B19 + B20)) * H18 / 1000000
|
||||
const K19 = K15 + K18
|
||||
const K19 = K15 + K16 + K17 + K18
|
||||
const K20 = 80
|
||||
const K21 = K19 * K20 / 1000000 * 7140
|
||||
const K22 = K21 / E19 * 100
|
||||
@@ -511,19 +465,6 @@ module.exports.calculate = [
|
||||
const K26 = L26 - 4 - 2 * B23 - B18
|
||||
//
|
||||
|
||||
// console.log('H15 ' + H15)
|
||||
// console.log('H16 ' + H16)
|
||||
// console.log('H17 ' + H17)
|
||||
// console.log('H18 ' + H18)
|
||||
// console.log('H19 ' + H19)
|
||||
// console.log('H20 ' + H20)
|
||||
// console.log('H21 ' + H21)
|
||||
// console.log('H22 ' + H22)
|
||||
// console.log('H23 ' + H23)
|
||||
|
||||
|
||||
// console.log('answer ' + H18)
|
||||
|
||||
return {
|
||||
normal: Number(E19.toFixed(2)),
|
||||
galvanized: Number(E21.toFixed(2))
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
+570
-307
@@ -333,6 +333,49 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.install-app-dialog {
|
||||
.el-dialog {
|
||||
@media (max-width: 1400px) {
|
||||
width: 80%;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
width: 90%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.install-app-description {
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.imgBox {
|
||||
text-align: center;
|
||||
margin: 20px 0 40px;
|
||||
|
||||
img {
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
@include boxShadow(0 4px 10px rgba(#000, 0.4));
|
||||
@include borderRadius(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////// about page
|
||||
@@ -1488,56 +1531,427 @@
|
||||
.s1 {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.s2 {
|
||||
.app {
|
||||
$appLayoutPadding: 55px;
|
||||
@include transition(0.1s);
|
||||
.app-section {
|
||||
.app {
|
||||
$appLayoutPadding: 55px;
|
||||
@include transition(0.1s);
|
||||
|
||||
& > .container-fluid, & > .container-fluid .row {
|
||||
padding: 0 !important;
|
||||
& > .container-fluid, & > .container-fluid .row {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.appTitle {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.appMethod {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
background: $theme;
|
||||
padding: 15px;
|
||||
|
||||
.txt {
|
||||
display: inline-block;
|
||||
margin: 0 10px 10px;
|
||||
}
|
||||
|
||||
.appTitle {
|
||||
text-align: center;
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: $darkGray;
|
||||
border-color: #fff;
|
||||
@include boxShadow(-1px 0 0 0 $darkGray);
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
font-size: 25px;
|
||||
}
|
||||
.el-radio-button .el-radio-button__inner {
|
||||
color: $theme;
|
||||
@extend %userSelect;
|
||||
@media (max-width: 530px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.appMethod {
|
||||
text-align: center;
|
||||
.el-radio-button.is-active .el-radio-button__inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.appLayout {
|
||||
padding: $appLayoutPadding;
|
||||
background: $theme;
|
||||
height: 100%;
|
||||
@include boxSizing(border-box);
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
padding: 55px 15px;
|
||||
}
|
||||
|
||||
span, p, b, * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
|
||||
.layoutTitle {
|
||||
margin-bottom: 50px;
|
||||
background: $theme;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: inline-block;
|
||||
margin: 0 10px 10px;
|
||||
.class {
|
||||
margin-bottom: 40px;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
.calculateBtn {
|
||||
text-align: center;
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: $darkGray;
|
||||
.btn {
|
||||
@include borderRadius(5px);
|
||||
background: #fff;
|
||||
border-color: #fff;
|
||||
@include boxShadow(-1px 0 0 0 $darkGray);
|
||||
color: $darkGray;
|
||||
|
||||
&:hover {
|
||||
background: $darkGray;
|
||||
border-color: $darkGray;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
background-color: $darkGray;
|
||||
border-color: $darkGray;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
@media (max-width: 600px) {
|
||||
float: none !important;
|
||||
|
||||
&:lang(fa) {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
margin-left: 200px !important;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-radio-button .el-radio-button__inner {
|
||||
color: $theme;
|
||||
@extend %userSelect;
|
||||
@media (max-width: 530px) {
|
||||
font-size: 12px;
|
||||
&:lang(fa) {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 200px !important;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--suffix .el-input__inner {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
&::placeholder {
|
||||
color: $darkGray;
|
||||
}
|
||||
}
|
||||
|
||||
.err {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.copyRight {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
|
||||
p {
|
||||
color: rgba(#fff, 0.5);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
@keyframes blinking {
|
||||
from {
|
||||
color: rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
to {
|
||||
color: rgba(#fff, 0.7);
|
||||
}
|
||||
}
|
||||
@include animation(blinking 1s alternate-reverse infinite);
|
||||
@extend %defaultTransition;
|
||||
color: rgba(#fff, 0.5);
|
||||
|
||||
&:hover {
|
||||
color: rgba(#fff, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
//width: auto;
|
||||
//
|
||||
//@media (max-width: 600px) {
|
||||
// width: 100%;
|
||||
//}
|
||||
input {
|
||||
font-family: 'sahel', 'diodrum', sans-serif;
|
||||
|
||||
&:lang(en) {
|
||||
font-family: 'diodrum', sans-serif;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-family: 'sahel';
|
||||
|
||||
&:lang(en) {
|
||||
font-family: 'diodrum';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: auto;
|
||||
left: 5px;
|
||||
|
||||
&:lang(en) {
|
||||
right: 5px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.el-input__icon {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-right: 20px;
|
||||
|
||||
&:lang(fa) {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.appResult {
|
||||
background: lightgray;
|
||||
padding-left: $appLayoutPadding;
|
||||
padding-right: $appLayoutPadding;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.success {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.failure {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
@keyframes waiting {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0;
|
||||
letter-spacing: -10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.waiting {
|
||||
@include animation(waiting 0.7s alternate-reverse infinite);
|
||||
}
|
||||
}
|
||||
|
||||
.weight {
|
||||
margin-top: 30px;
|
||||
background: lightgray;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
|
||||
p {
|
||||
font-size: 0;
|
||||
letter-spacing: -10px;
|
||||
}
|
||||
|
||||
.colored {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-guide-tables {
|
||||
.notice {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 960px;
|
||||
border: 1px solid rgba(#000, 1);
|
||||
|
||||
thead {
|
||||
background: $theme;
|
||||
color: #fff;
|
||||
|
||||
th {
|
||||
padding: 20px;
|
||||
font-family: 'sahel-LD', 'diodrum', sans-serif;
|
||||
direction: ltr;
|
||||
|
||||
&.middle {
|
||||
border-left: 2px solid rgba(#fff, 0.4) !important;
|
||||
border-right: 2px solid rgba(#fff, 0.4) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
background: rgba($theme, 0.2);
|
||||
color: #000;
|
||||
|
||||
tr {
|
||||
line-height: 1.3em;
|
||||
|
||||
td {
|
||||
border: 1px solid rgba(#000, 1);
|
||||
padding: 20px;
|
||||
font-family: 'sahel-LD', 'diodrum', sans-serif;
|
||||
direction: ltr;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
direction: ltr !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.odd {
|
||||
background: rgba(#000, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vehicles {
|
||||
}
|
||||
|
||||
&.forklifts {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////// pwa app
|
||||
.pwa {
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
background: #fff;
|
||||
@include transition(background-color 0.2s, color 0.2s !important);
|
||||
|
||||
div, p, a, h1, h2, h3, b, span, i {
|
||||
@include transition(background-color 0.2s, color 0.2s !important);
|
||||
}
|
||||
|
||||
&.dark-mode {
|
||||
$darkModeBG: #1b1b1b ;
|
||||
$darkModeAppLayout: #2b2b2b;
|
||||
background: $darkModeBG;
|
||||
|
||||
|
||||
p, h2, h3, a, i, b {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.appLayout, .appMethod, .app-guide-tables thead {
|
||||
background: $darkModeAppLayout;
|
||||
}
|
||||
|
||||
.app-guide-tables tbody {
|
||||
background: rgba(#fff, 0.4);
|
||||
}
|
||||
|
||||
.notice {
|
||||
//color: #805858 !important;
|
||||
color: $red !important;
|
||||
}
|
||||
|
||||
.pwa-header {
|
||||
background: $darkModeAppLayout;
|
||||
}
|
||||
|
||||
.pwa-about {
|
||||
background: $darkModeBG;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.app {
|
||||
.appMethod {
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: rgba(#fff, 0.5);
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.el-radio-button.is-active .el-radio-button__inner {
|
||||
color: #fff;
|
||||
@@ -1545,317 +1959,166 @@
|
||||
}
|
||||
|
||||
.appLayout {
|
||||
padding: $appLayoutPadding;
|
||||
background: $theme;
|
||||
height: 100%;
|
||||
@include boxSizing(border-box);
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
padding: 55px 15px;
|
||||
}
|
||||
|
||||
span, p, b, * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
button {
|
||||
color: $red;
|
||||
|
||||
span {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.layoutTitle {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.class {
|
||||
margin-bottom: 40px;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.calculateBtn {
|
||||
text-align: center;
|
||||
|
||||
.btn {
|
||||
@include borderRadius(5px);
|
||||
|
||||
&:hover {
|
||||
background: $darkGray;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
background-color: $darkGray;
|
||||
border-color: $darkGray;
|
||||
background-color: rgba($red, 1) !important;
|
||||
border-color: rgba(#fff, 0.3) !important;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
@media (max-width: 600px) {
|
||||
float: none !important;
|
||||
|
||||
&:lang(fa) {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
margin-left: 200px !important;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:lang(fa) {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 200px !important;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--suffix .el-input__inner {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
&::placeholder {
|
||||
color: $darkGray;
|
||||
.btn {
|
||||
&:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.err {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.copyRight {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
|
||||
p {
|
||||
color: rgba(#fff, 0.5);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
@keyframes blinking {
|
||||
from {
|
||||
color: rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
to {
|
||||
color: rgba(#fff, 0.7);
|
||||
}
|
||||
}
|
||||
@include animation(blinking 1s alternate-reverse infinite);
|
||||
@extend %defaultTransition;
|
||||
color: rgba(#fff, 0.5);
|
||||
|
||||
&:hover {
|
||||
color: rgba(#fff, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
color: $red !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
//width: auto;
|
||||
//
|
||||
//@media (max-width: 600px) {
|
||||
// width: 100%;
|
||||
//}
|
||||
input {
|
||||
font-family: 'sahel', 'diodrum', sans-serif;
|
||||
|
||||
&:lang(en) {
|
||||
font-family: 'diodrum', sans-serif;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-family: 'sahel';
|
||||
|
||||
&:lang(en) {
|
||||
font-family: 'diodrum';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: auto;
|
||||
left: 5px;
|
||||
|
||||
&:lang(en) {
|
||||
right: 5px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.el-input__icon {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-right: 20px;
|
||||
|
||||
&:lang(fa) {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.appResult {
|
||||
background: lightgray;
|
||||
padding-left: $appLayoutPadding;
|
||||
padding-right: $appLayoutPadding;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.appResult, .weight {
|
||||
background: #454545;
|
||||
|
||||
.success {
|
||||
color: #67C23A;
|
||||
color: #7cfc00 !important;
|
||||
}
|
||||
|
||||
.failure {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
@keyframes waiting {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0;
|
||||
letter-spacing: -10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.waiting {
|
||||
@include animation(waiting 0.7s alternate-reverse infinite);
|
||||
color: $red !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.weight {
|
||||
margin-top: 30px;
|
||||
background: lightgray;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
.page-load {
|
||||
background: $darkModeAppLayout;
|
||||
|
||||
p {
|
||||
font-size: 0;
|
||||
letter-spacing: -10px;
|
||||
}
|
||||
|
||||
.colored {
|
||||
color: $theme;
|
||||
svg {
|
||||
path {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s3 {
|
||||
.notice {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
.pwa-header {
|
||||
padding: 10px 0;
|
||||
background: $theme;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
@include boxShadow(0 4px 8px rgba(#000, 0.4));
|
||||
|
||||
@media (max-width: 992px) {
|
||||
display: block;
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
padding: 2px 5px;
|
||||
@include borderRadius(8px);
|
||||
|
||||
&.active {
|
||||
background-color: rgba(#fff, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
padding-left: 0;
|
||||
|
||||
&:lang(en) {
|
||||
padding-left: 10px;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
.logo {
|
||||
svg {
|
||||
width: 60px;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 960px;
|
||||
border: 1px solid rgba(#000, 1);
|
||||
|
||||
thead {
|
||||
background: $theme;
|
||||
color: #fff;
|
||||
|
||||
th {
|
||||
padding: 20px;
|
||||
font-family: 'sahel-LD', 'diodrum', sans-serif;
|
||||
direction: ltr;
|
||||
|
||||
&.middle {
|
||||
border-left: 2px solid rgba(#fff, 0.4) !important;
|
||||
border-right: 2px solid rgba(#fff, 0.4) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
background: rgba($theme, 0.2);
|
||||
color: #000;
|
||||
|
||||
tr {
|
||||
line-height: 1.3em;
|
||||
|
||||
td {
|
||||
border: 1px solid rgba(#000, 1);
|
||||
padding: 20px;
|
||||
font-family: 'sahel-LD', 'diodrum', sans-serif;
|
||||
direction: ltr;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
direction: ltr !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.odd {
|
||||
background: rgba(#000, 0.1);
|
||||
}
|
||||
}
|
||||
path {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vehicles {
|
||||
.pwa-about {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
@include boxSizing(border-box);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
.description {
|
||||
a {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
&.forklifts {
|
||||
margin-top: 50px;
|
||||
.copyRight {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin-top: 80px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #872071;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calculation--page {
|
||||
.s1 {
|
||||
padding-bottom: 0;
|
||||
|
||||
.notice {
|
||||
margin-top: 20px;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
position: fixed;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
z-index: 20;
|
||||
background: $red;
|
||||
padding: 2px 8px;
|
||||
@include borderRadius(10px);
|
||||
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,343 @@
|
||||
<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>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<section class="app-guide-tables">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="tableBox vehicles">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4" class="center">{{ staticData.table1.title }}</th>
|
||||
<th class="middle">{{ staticData.table1.load }}</th>
|
||||
<th>{{ staticData.table1.imprint }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ staticData.table1.class1.t1 }}</td>
|
||||
<td>{{ staticData.table1.class1.t2 }}</td>
|
||||
<td>{{ staticData.table1.class1.t3 }}</td>
|
||||
<td>{{ staticData.table1.danSqm }}</td>
|
||||
<td>600</td>
|
||||
<td>1000 x 1000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table1.class2.t1 }}</td>
|
||||
<td>{{ staticData.table1.class2.t2 }}</td>
|
||||
<td>{{ staticData.table1.class2.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>1.000</td>
|
||||
<td>200 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table1.class3.t1 }}</td>
|
||||
<td>{{ staticData.table1.class3.t2 }}</td>
|
||||
<td>{{ staticData.table1.class3.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>3.000</td>
|
||||
<td>200 x 400</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table1.class4.t1 }}</td>
|
||||
<td>{{ staticData.table1.class4.t2 }}</td>
|
||||
<td>{{ staticData.table1.class4.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>9.000</td>
|
||||
<td>250 x 600</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||
<div class="tableBox forklifts">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="6" class="center">{{ staticData.table2.title }}</th>
|
||||
<th class="middle">{{ staticData.table2.load }}</th>
|
||||
<th>{{ staticData.table2.imprint }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{{ staticData.table2.t1 }}</td>
|
||||
<td>{{ staticData.table2.t2 }}</td>
|
||||
<td>{{ staticData.table2.t3 }}</td>
|
||||
<td>{{ staticData.table2.t4 }}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl1.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl1.t2 }}</td>
|
||||
<td>21</td>
|
||||
<td>10</td>
|
||||
<td>31</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>2600</td>
|
||||
<td>130 x 130</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl2.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl2.t2 }}</td>
|
||||
<td>31</td>
|
||||
<td>15</td>
|
||||
<td>46</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>4000</td>
|
||||
<td>175 x 150</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl3.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl3.t2 }}</td>
|
||||
<td>44</td>
|
||||
<td>25</td>
|
||||
<td>69</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>6300</td>
|
||||
<td>200 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl4.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl4.t2 }}</td>
|
||||
<td>60</td>
|
||||
<td>40</td>
|
||||
<td>100</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>9000</td>
|
||||
<td>300 x 200</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl5.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl5.t2 }}</td>
|
||||
<td>90</td>
|
||||
<td>60</td>
|
||||
<td>150</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>14000</td>
|
||||
<td>375 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl6.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl6.t2 }}</td>
|
||||
<td>110</td>
|
||||
<td>80</td>
|
||||
<td>190</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>17000</td>
|
||||
<td>450 x 200</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+28
-4
@@ -1,6 +1,30 @@
|
||||
<template>
|
||||
<div class="page-load">
|
||||
<logo/>
|
||||
<p>Arak Rail Co.</p>
|
||||
</div>
|
||||
<div class="page-load">
|
||||
<logo/>
|
||||
<p>Arak Rail Co.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
////////////////////////////////////////// global router guards
|
||||
this.$router.beforeEach((to, from, next) => {
|
||||
this.$gsap.timeline({
|
||||
onComplete: () => {
|
||||
next()
|
||||
}
|
||||
})
|
||||
.to($('.page-load'), {autoAlpha: 1, duration: 0.3})
|
||||
.fromTo($('.page-load svg'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
|
||||
.fromTo($('.page-load p'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
|
||||
})
|
||||
|
||||
this.$router.afterEach((to, from) => {
|
||||
this.$gsap.timeline({delay: 0.3})
|
||||
.to($('.page-load p,.page-load svg'), {opacity: 0, scale: 0.5, duration: 0.15})
|
||||
.to($('.page-load'), {autoAlpha: 0, duration: 0.5})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<section class="pwa-about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="description">
|
||||
<h2 class="title">{{ staticData.t6 }}</h2>
|
||||
<p>{{ staticData.t1 }}</p>
|
||||
<br>
|
||||
<p>
|
||||
<span>{{ staticData.t3 }}</span>
|
||||
<a href="/" target="_blank">www.arakrail.com</a>
|
||||
<span>{{ staticData.t4 }}</span>
|
||||
</p>
|
||||
<br>
|
||||
<p>{{ staticData.t2 }}</p>
|
||||
|
||||
<div class="copyRight">
|
||||
<p>{{ staticData.t5 }}</p>
|
||||
<a href="http://negarehagency.com/" target="_blank">Negareh Agency</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.pwa[this.$route.params.lang]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<header class="pwa-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="logo">
|
||||
<logo/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 options">
|
||||
<nuxt-link :to="{name: 'lang-pwa',params: {lang: 'fa'}}">FA</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-pwa',params: {lang: 'en'}}">EN</nuxt-link>
|
||||
<i :class="darkMode ? 'fas fa-sun' : 'fad fa-moon'" @click="toggleDarkMode"></i>
|
||||
<i :class="aboutPage ? 'fas fa-times-circle' : 'fas fa-info-circle'" @click="showAbout"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
darkMode: false,
|
||||
aboutPage: false,
|
||||
aboutPageTL: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.pwa[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleDarkMode() {
|
||||
this.darkMode = !this.darkMode
|
||||
this.$emit('darkModeStatus', this.darkMode)
|
||||
},
|
||||
showAbout() {
|
||||
!this.aboutPage ? this.aboutPageTL.play() : this.aboutPageTL.play().reverse()
|
||||
this.aboutPage = !this.aboutPage
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.aboutPageTL = this.$gsap.timeline({paused: true})
|
||||
.to($('.pwa .pwa-about'), {autoAlpha: 1, duration: 0.1})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -13,25 +13,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
////////////////////////////////////////// global router guards
|
||||
this.$router.beforeEach((to, from, next) => {
|
||||
this.$gsap.timeline({
|
||||
onComplete: () => {
|
||||
next()
|
||||
}
|
||||
})
|
||||
.to($('.page-load'), {autoAlpha: 1, duration: 0.3})
|
||||
.fromTo($('.page-load svg'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
|
||||
.fromTo($('.page-load p'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
|
||||
})
|
||||
|
||||
this.$router.afterEach((to, from) => {
|
||||
this.$gsap.timeline({delay: 0.3})
|
||||
.to($('.page-load p,.page-load svg'), {opacity: 0, scale: 0.5, duration: 0.15})
|
||||
.to($('.page-load'), {autoAlpha: 0, duration: 0.5})
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="pwa" :class="darkMode ? 'dark-mode' : null">
|
||||
<div class="connection-status" v-if="$nuxt.isOffline">
|
||||
<p>{{ staticData.connection }}</p>
|
||||
</div>
|
||||
<pwa-about/>
|
||||
<pwa-header @darkModeStatus="changeTheme"/>
|
||||
<nuxt/>
|
||||
<page-load/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
darkMode: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.pwa[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTheme(val) {
|
||||
this.darkMode = val
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
lang: this.$route.params.lang
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+24
-4
@@ -1,4 +1,5 @@
|
||||
const webpack = require("webpack")
|
||||
const {state} = require('./store/global')
|
||||
export default {
|
||||
// Global page headers (https://go.nuxtjs.dev/config-head)
|
||||
head: {
|
||||
@@ -39,7 +40,9 @@ export default {
|
||||
components: true,
|
||||
|
||||
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
|
||||
buildModules: [],
|
||||
buildModules: [
|
||||
'@nuxtjs/pwa'
|
||||
],
|
||||
|
||||
// Modules (https://go.nuxtjs.dev/config-modules)
|
||||
modules: [
|
||||
@@ -47,13 +50,30 @@ export default {
|
||||
'@nuxtjs/axios',
|
||||
'@nuxtjs/auth'
|
||||
],
|
||||
|
||||
pwa: {
|
||||
manifest: {
|
||||
name: 'وزن گریتینگ',
|
||||
short_name: 'ArakRail Grating',
|
||||
// description: state().meta_description.fa,
|
||||
description: false,
|
||||
lang: 'fa',
|
||||
useWebmanifestExtension: false,
|
||||
start_url: '/fa/pwa'
|
||||
},
|
||||
meta: {
|
||||
mobileAppIOS: true,
|
||||
name: 'اراک ریل'
|
||||
},
|
||||
workbox: {
|
||||
cleanupOutdatedCaches: true
|
||||
}
|
||||
},
|
||||
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
|
||||
axios: {
|
||||
proxy: true
|
||||
},
|
||||
proxy: {
|
||||
'/api': {target: 'http://127.0.0.1:7320'}
|
||||
'/api': {target: 'http://127.0.0.1:6096'}
|
||||
},
|
||||
|
||||
// Build Configuration (https://go.nuxtjs.dev/config-build)
|
||||
@@ -72,7 +92,7 @@ export default {
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 7320
|
||||
port: 6096
|
||||
},
|
||||
serverMiddleware: ['~/api/index'],
|
||||
auth: {
|
||||
|
||||
Generated
+112
@@ -1881,6 +1881,82 @@
|
||||
"http-proxy-middleware": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"@nuxtjs/pwa": {
|
||||
"version": "3.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/pwa/-/pwa-3.3.5.tgz",
|
||||
"integrity": "sha512-8tTmW8DBspWxlJwTimOHTkwfkwPpL9wIcGmy75Gcmin+c9YtX2Ehxmhgt/TLFOC9XsLAqojqynw3/Agr/9OE1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"clone-deep": "^4.0.1",
|
||||
"defu": "^3.2.2",
|
||||
"execa": "^5.0.0",
|
||||
"fs-extra": "^9.1.0",
|
||||
"hasha": "^5.2.2",
|
||||
"jimp-compact": "^0.16.1",
|
||||
"lodash.template": "^4.5.0",
|
||||
"serve-static": "^1.14.1",
|
||||
"workbox-cdn": "^5.1.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"execa": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
|
||||
"integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cross-spawn": "^7.0.3",
|
||||
"get-stream": "^6.0.0",
|
||||
"human-signals": "^2.1.0",
|
||||
"is-stream": "^2.0.0",
|
||||
"merge-stream": "^2.0.0",
|
||||
"npm-run-path": "^4.0.1",
|
||||
"onetime": "^5.1.2",
|
||||
"signal-exit": "^3.0.3",
|
||||
"strip-final-newline": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
||||
"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"at-least-node": "^1.0.0",
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^6.0.1",
|
||||
"universalify": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"get-stream": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz",
|
||||
"integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==",
|
||||
"dev": true
|
||||
},
|
||||
"human-signals": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
|
||||
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
|
||||
"dev": true
|
||||
},
|
||||
"jsonfile": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
|
||||
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6",
|
||||
"universalify": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"universalify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@nuxtjs/youch": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/youch/-/youch-4.2.3.tgz",
|
||||
@@ -2632,6 +2708,12 @@
|
||||
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
||||
"dev": true
|
||||
},
|
||||
"at-least-node": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||
"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
|
||||
"dev": true
|
||||
},
|
||||
"atob": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
|
||||
@@ -6044,6 +6126,24 @@
|
||||
"minimalistic-assert": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hasha": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
|
||||
"integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-stream": "^2.0.0",
|
||||
"type-fest": "^0.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"type-fest": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
|
||||
"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"he": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||
@@ -6892,6 +6992,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"jimp-compact": {
|
||||
"version": "0.16.1",
|
||||
"resolved": "https://registry.npmjs.org/jimp-compact/-/jimp-compact-0.16.1.tgz",
|
||||
"integrity": "sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww==",
|
||||
"dev": true
|
||||
},
|
||||
"jiti": {
|
||||
"version": "0.1.12",
|
||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-0.1.12.tgz",
|
||||
@@ -12959,6 +13065,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"workbox-cdn": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/workbox-cdn/-/workbox-cdn-5.1.4.tgz",
|
||||
"integrity": "sha512-04gM3mi8QGutokkSaA9xunVfjURnLbo9TTWyi8+pSDCEW5cD8u5GbJiliLK1vB9CShk/9OY1UDfW+XcmD+d6KQ==",
|
||||
"dev": true
|
||||
},
|
||||
"worker-farm": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
"vue-persian-datetime-picker": "^2.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/pwa": "^3.3.5",
|
||||
"node-sass": "^4.14.1",
|
||||
"sass-loader": "^8.0.2"
|
||||
}
|
||||
|
||||
@@ -10,353 +10,10 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<calculation-app :titleTxt="staticData.app.t3"/>
|
||||
|
||||
<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">
|
||||
<calculation-guide-tables/>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="appTitle">
|
||||
<h2 class="title">{{ staticData.app.t3 }}</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">
|
||||
|
||||
<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">
|
||||
|
||||
<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>
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="tableBox vehicles">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4" class="center">{{ staticData.table1.title }}</th>
|
||||
<th class="middle">{{ staticData.table1.load }}</th>
|
||||
<th>{{ staticData.table1.imprint }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ staticData.table1.class1.t1 }}</td>
|
||||
<td>{{ staticData.table1.class1.t2 }}</td>
|
||||
<td>{{ staticData.table1.class1.t3 }}</td>
|
||||
<td>{{ staticData.table1.danSqm }}</td>
|
||||
<td>600</td>
|
||||
<td>1000 x 1000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table1.class2.t1 }}</td>
|
||||
<td>{{ staticData.table1.class2.t2 }}</td>
|
||||
<td>{{ staticData.table1.class2.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>1.000</td>
|
||||
<td>200 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table1.class3.t1 }}</td>
|
||||
<td>{{ staticData.table1.class3.t2 }}</td>
|
||||
<td>{{ staticData.table1.class3.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>3.000</td>
|
||||
<td>200 x 400</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table1.class4.t1 }}</td>
|
||||
<td>{{ staticData.table1.class4.t2 }}</td>
|
||||
<td>{{ staticData.table1.class4.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>9.000</td>
|
||||
<td>250 x 600</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||
<div class="tableBox forklifts">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="6" class="center">{{ staticData.table2.title }}</th>
|
||||
<th class="middle">{{ staticData.table2.load }}</th>
|
||||
<th>{{ staticData.table2.imprint }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{{ staticData.table2.t1 }}</td>
|
||||
<td>{{ staticData.table2.t2 }}</td>
|
||||
<td>{{ staticData.table2.t3 }}</td>
|
||||
<td>{{ staticData.table2.t4 }}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl1.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl1.t2 }}</td>
|
||||
<td>21</td>
|
||||
<td>10</td>
|
||||
<td>31</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>2600</td>
|
||||
<td>130 x 130</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl2.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl2.t2 }}</td>
|
||||
<td>31</td>
|
||||
<td>15</td>
|
||||
<td>46</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>4000</td>
|
||||
<td>175 x 150</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl3.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl3.t2 }}</td>
|
||||
<td>44</td>
|
||||
<td>25</td>
|
||||
<td>69</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>6300</td>
|
||||
<td>200 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl4.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl4.t2 }}</td>
|
||||
<td>60</td>
|
||||
<td>40</td>
|
||||
<td>100</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>9000</td>
|
||||
<td>300 x 200</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl5.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl5.t2 }}</td>
|
||||
<td>90</td>
|
||||
<td>60</td>
|
||||
<td>150</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>14000</td>
|
||||
<td>375 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl6.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl6.t2 }}</td>
|
||||
<td>110</td>
|
||||
<td>80</td>
|
||||
<td>190</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>17000</td>
|
||||
<td>450 x 200</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -365,116 +22,12 @@
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
|
||||
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
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
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)
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
@@ -489,26 +42,8 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const calculationValues = await $axios.get('/api/public/calculation/values')
|
||||
return {
|
||||
calculationValues: calculationValues.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.el-popper .popper__arrow {
|
||||
border-width: 0;
|
||||
filter: none;
|
||||
left: 35px;
|
||||
|
||||
&:lang(fa) {
|
||||
left: auto;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+40
-3
@@ -129,7 +129,7 @@
|
||||
|
||||
<section class="s5">
|
||||
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||
<div class="txt anim-parallax">
|
||||
<div class="txt anim-fadeIn">
|
||||
<h2 class="title title-shape">{{ staticData.s4.t1 }} <span>{{ staticData.s4.t2 }}</span></h2>
|
||||
<p>{{ staticData.s4.t3 }}</p>
|
||||
<a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s4.link }}</a>
|
||||
@@ -146,7 +146,7 @@
|
||||
<h2 class="title title-shape">{{ staticData.s6.t1 }}</h2>
|
||||
<p>{{ staticData.s6.t2 }}</p>
|
||||
<nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s6.link1 }}</nuxt-link>
|
||||
<a @click.prevent="notAvailable" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
|
||||
<a @click.prevent="dialogVisible = true" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
|
||||
</div>
|
||||
<div class="col-2 img-side d-none d-lg-block">
|
||||
<img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
|
||||
@@ -154,6 +154,42 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<el-dialog class="install-app-dialog" :title="staticData.s6.link1" :visible.sync="dialogVisible">
|
||||
<div class="install-app-description">
|
||||
<h2>{{ staticData.s6.t3 }}</h2>
|
||||
<p>{{ staticData.s6.t4 }}</p>
|
||||
<div class="imgBox">
|
||||
<img src="~/assets/img/home/android-step-1.jpg" :alt="staticData.s6.link2">
|
||||
</div>
|
||||
<p>{{ staticData.s6.t5 }}</p>
|
||||
<div class="imgBox">
|
||||
<img src="~/assets/img/home/android-step-2.jpg" :alt="staticData.s6.link2">
|
||||
</div>
|
||||
<h2>{{ staticData.s6.t6 }}</h2>
|
||||
<p>{{ staticData.s6.t7 }}</p>
|
||||
<div class="imgBox">
|
||||
<img src="~/assets/img/home/ios-step-1.jpg" :alt="staticData.s6.link2">
|
||||
</div>
|
||||
<p>{{ staticData.s6.t8 }}</p>
|
||||
<div class="imgBox">
|
||||
<img src="~/assets/img/home/ios-step-2.jpg" :alt="staticData.s6.link2">
|
||||
</div>
|
||||
<h2>{{ staticData.s6.t9 }}</h2>
|
||||
<p>{{ staticData.s6.t10 }}</p>
|
||||
<div class="imgBox">
|
||||
<img src="~/assets/img/home/desktop-step-1.jpg" :alt="staticData.s6.link2">
|
||||
</div>
|
||||
<p>{{ staticData.s6.t11 }}</p>
|
||||
<div class="imgBox">
|
||||
<img src="~/assets/img/home/desktop-step-2.jpg" :alt="staticData.s6.link2">
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false">{{ staticData.s6.t12 }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -168,7 +204,8 @@ export default {
|
||||
favoriteProducts: null,
|
||||
catalog: null,
|
||||
calc_app_link: this.$store.state.staticData.calc_app_link,
|
||||
validation: []
|
||||
validation: {},
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="page calculation--page latin-digits">
|
||||
|
||||
<calculation-app/>
|
||||
<calculation-guide-tables/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.pwa[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
title: this.staticData.title
|
||||
},
|
||||
title: this.staticData.title,
|
||||
meta: [
|
||||
{
|
||||
hid: this.staticData.title,
|
||||
name: 'description',
|
||||
content: this.staticData.t1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
layout: 'pwa'
|
||||
}
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
+44
-2
@@ -114,7 +114,17 @@ export const state = () => ({
|
||||
t1: 'نرم افزار محاسبه وزن گریتینگ',
|
||||
t2: 'نرم افزار طراحی شده در این بخش، با انجام محاسبات دقیق، آنالیز وزن و مقاومتی گریتینگ را ارائه می کند، با استفاده از این ابزار انتخاب محصول برای شما آسان تر خواهد بود.',
|
||||
link1: 'ماژول محاسبات',
|
||||
link2: 'دانلود نرم افزار'
|
||||
link2: 'نصب نرم افزار',
|
||||
t3: 'آموزش نصب در Android',
|
||||
t4: 'برای نصب نرم افزار اراک ریل در گوشی های اندرویدی ابتدا با مرورگر گوگل کروم وارد سایت اراک ریل شوید و مطابق تصویر زیر دکمه منو را بزنید:',
|
||||
t5: 'سپس گزینه install app را بزنید و برنامه روی گوشی شما نصب میشود.',
|
||||
t6: 'آموزش نصب در iOS',
|
||||
t7: 'برای نصب نرم افزار اراک ریل در گوشی های آیفون ابتدا با مرورگر خود گوشی وارد سایت اراک ریل شوید و مطابق تصویر زیر دکمه اشتراک گزاری را بزنید:',
|
||||
t8: 'سپس گزینه add to home screen را بزنید و برنامه روی گوشی شما نصب میشود.',
|
||||
t9: 'آموزش نصب در کامپیوتر',
|
||||
t10: 'برای نصب نرم افزار اراک ریل در کامپیوتر (Windows,Mac,Linux) ابتدا با مرورگر گوگل کروم وارد سایت اراک ریل شوید و مطابق تصویر زیر دکمه نصب موجود در نوار آدرس را بزنید:',
|
||||
t11: 'سپس گزینه install را بزنید و برنامه روی کامپیوتر شما نصب میشود.',
|
||||
t12: 'متوجه شدم'
|
||||
}
|
||||
},
|
||||
en: {
|
||||
@@ -165,7 +175,17 @@ export const state = () => ({
|
||||
t1: 'Grating weight calculation software',
|
||||
t2: "The software designed in this section, by performing accurate calculations, provides weight analysis and grating resistance, using this tool, product selection will be easier for you.",
|
||||
link1: 'Calculation Module',
|
||||
link2: 'Download App'
|
||||
link2: 'Install App',
|
||||
t3: 'Android installation tutorial',
|
||||
t4: 'To install Arak Rail software on Android phones, first enter the Arak Rail site with Google Chrome browser and click the menu button according to the image below:',
|
||||
t5: 'Then click install app and the app will be installed on your phone.',
|
||||
t6: 'iOS installation tutorial',
|
||||
t7: 'To install Arak Rail software on iPhones, first enter the Arak Rail site with your phone browser and click the share button as shown below:',
|
||||
t8: 'Then click the add to home screen option and the app will be installed on your phone.',
|
||||
t9: 'Computer installation tutorial',
|
||||
t10: 'To install Arak Rail software on a computer (Windows, Mac, Linux), first enter the Arak Rail site with Google Chrome browser and according to the image below, click the installation button in the address bar:',
|
||||
t11: 'Then click install and the program will be installed on your computer.',
|
||||
t12: 'Got it!'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -905,6 +925,28 @@ export const state = () => ({
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pwa: {
|
||||
fa: {
|
||||
title: '',
|
||||
connection: 'اتصال اینترنت خود را بررسی نمایید.',
|
||||
t1: 'بدلیل این که وزن گریتینگ ها به واسطه مواردی همچون مشخصات فنی یا همان دیتیل ساخت از جمله نوع گریتینگ،جنس تسمه و اندازه چشمه ها متغیر است،بدین منظور جهت راحتی و سهولت در انجام کار شما مشتری گرامی، شرکت اراک ریل نرم افزار محاسبه وزن و میزان بار قابل تحمل را برای گریتینگ طراحی و در این صفحه قرار داده است.که با داشتن مشخصات فنی گریتینگ مورد نظر خود میتوانید وزن گریتینگ خود را همراه با گالوانیزه و یا بدون گالوانیزه محاسبه کنید.',
|
||||
t2: 'توجه داشته باشید که برای بدست آوردن نتایج صحیح محاسبات داخل سرور اصلی اراک ریل انجام میشود و برای محاسبات نیاز به اینترنت دارید.',
|
||||
t3: 'برای اطلاعات بیشتر راجب گریتینگ و تماس با متخصصین شرکت اراک ریل میتوانید به سایت ',
|
||||
t4: ' مراجعه فرمایید. ',
|
||||
t5: 'طراحی و ساخت برنامه توسط نگاره',
|
||||
t6: 'وزن و مقاومت گریتینگ'
|
||||
},
|
||||
en: {
|
||||
title: '',
|
||||
connection: 'Check your internet connection.',
|
||||
t1: 'Due to the fact that the weight of the gratings varies due to items such as technical specifications or construction details such as the type of grating, the type of belt and the size of the springs, for the convenience and ease of your work, dear customer, Arak Rail Company And has designed the amount of tolerable load for the grating and placed it on this page. Having the technical specifications of the grating you want, you can calculate the weight of your grating with or without galvanizing.',
|
||||
t2: 'Note that in order to get the correct results, the calculations are done inside the main server of Arak Rail and you need internet for the calculations.',
|
||||
t3: 'For more information about Grating and contacting the experts of Arak Rail Company, you can visit the site ',
|
||||
t4: '',
|
||||
t5: 'Design and Develop by Negareh',
|
||||
t6: 'Grating weight and strength'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user