diff --git a/src/images/device/yj_gray.png b/src/images/device/yj_gray.png new file mode 100644 index 0000000..cd42c48 Binary files /dev/null and b/src/images/device/yj_gray.png differ diff --git a/src/images/device/yj_green.png b/src/images/device/yj_green.png new file mode 100644 index 0000000..3a8b7b9 Binary files /dev/null and b/src/images/device/yj_green.png differ diff --git a/src/images/device/yj_red.png b/src/images/device/yj_red.png new file mode 100644 index 0000000..ac45b39 Binary files /dev/null and b/src/images/device/yj_red.png differ diff --git a/src/images/device/yj_yellow.png b/src/images/device/yj_yellow.png new file mode 100644 index 0000000..56e7d1c Binary files /dev/null and b/src/images/device/yj_yellow.png differ diff --git a/src/pages/modules/home/workshop.vue b/src/pages/modules/home/workshop.vue index ba63310..c38234f 100644 --- a/src/pages/modules/home/workshop.vue +++ b/src/pages/modules/home/workshop.vue @@ -19,8 +19,8 @@
故障
-
-
+
+
@@ -93,8 +93,8 @@
-
-
+
+
- -
+
- -
+
-
-
-
-
-
- -
- -
-
- -
-
- -
-
-
- - - - -
-
- - - - - -
-
-
- - - - -
-
- - - - - -
-
- - - - -
-
- -
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
-
-
-
-
- - - - -
-
- -
-
- -
+
+
+
-
-
- - - - -
-
- - - - - -
-
-
- - - - -
-
- - - - - -
-
- - - - -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
-
+
+
-
- +
+
+ +
-
- +
+
+ +
-
- +
+
-
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
@@ -395,15 +317,15 @@ >
-
-
-
-
-
- - - - +
+
+
+
+
+ + + +
-
-
-
- - - - - +
+
-
-
-
-
- - - - +
+
+ + + +
+
+ +
-
-
- - - - +
+
+
+
+ + + + + +
+
+
+
+ + + +
-
+
@@ -605,7 +533,6 @@ export default { width 100% height 100% position relative - background-size 100% 100% .status_wrap position absolute top 2% @@ -629,49 +556,13 @@ export default { font-size 16px line-height 1 color #fff -.machine_block +.m_block position absolute border: 1px solid #00c8da; padding: 12px; box-shadow: 0 0 15px #0087ac; border-radius: 10px; -.machine_block_1 - width: 77%; - height: 24%; - right: 2%; - top: 28%; -.machine_block_2 - width: 55%; - height: 22%; - left: auto - right: 2% - top: 4%; -.machine_block_3 - width 28% - height 22% - left 2% - top 60% - padding 12px -.machine_block_4 - width: 64%; - height: 22%; - left: auto; - right: 2%; - top: 60%; -.machine_block_5 - width 15% - left 5% - top 14% - padding 20px - border none - box-shadow none -.machine_block_6 - width 96% - height 10% - top auto - bottom 2% - left 2% -.machine_combine +.m_wraper position relative width 100% height 100% @@ -682,113 +573,18 @@ export default { position absolute top 0 left 0 + display inline-flex + justify-content space-between .device_img width 100% - height 100% -.yjbyx_1 - width: 4%; - height: 76%; - top: 22%; - left: 10%; -.yjbyx_2 - width: 4%; - height: 79%; - left: auto; - right: 0; -.yao_wrap - position absolute - width 80% - height 50px -.yao_layer1 - position absolute - left 1% - top 0 - width 98% - height 50% - transform: skew(26deg); -.yao_layer1_1 - background-image: linear-gradient(to bottom, #00ff00, #b2fbb2); - box-shadow: inset 1px 3px 6px 0px #04b004; - border: 2px solid #028802; -.yao_layer1_2 - background-image: linear-gradient(to bottom, #bfbfbf, #f1f1f1); - box-shadow: inset 1px 3px 6px 0px #838282; - border: 2px solid #8e8a8a; -.yao_layer2 - position: absolute; - left: 2%; - top: 50%; - width: 98%; - height: 50%; - background-color: #CCC4BB; - border-top: 0; - padding-left 10px - p - line-height: 22px; - font-size: 20px; - color: #F04826; - transform: scale(1, 0.7); - text-shadow 2px 2px 2px rgba(0, 0, 0, 0.3); -.yao_layer2_1 - border: 2px solid #028802; -.yao_layer2_2 - border: 2px solid #8e8a8a; -.yao_layer3 - position absolute - width: 10%; - height: 70%; - top: 0; - left: 0; - background-color: #A0927E; -.yao_1 - left 15% - top 22% -.yao_2 - left 15% - bottom 22% -.yytsj_wrap - width 50% - left 25% -.yygcj_wrap - width 50% - top auto - bottom 0 - left 25% -.ktp_yao_enter_wrap - width 86% - left auto - top auto - bottom 0 - right 0 -.ktp_yao_out_wrap - width 86% + height auto +// 分拣拆垛位start +.m_block_2 + width: 55%; + height: 22%; left: auto - right: 4%; -.ktp_yao_back - float left - width calc(100% / 39) - img - height auto -.dpw_wrap - width: 4%; - top: -30%; - left: 15%; -.cpj_wrap - width 6% - top 80% -.jyw_wrap - width 2% - height 76% - top: 22% - left 8% -.jyw1 - top 16% -.jyw2 - top 39% -.jyw3 - top 63% -.jyw4 - top 86% + right: 2% + top: 7%; .ddxt_wrap_1 width 30% height 49% @@ -844,363 +640,6 @@ export default { transform rotate(180deg) top: -9px; left: -27px; -.fmjxt_wrap - width 9% - left 88% - top 10% -.yj_630_block - position relative - width 48% - height 100% -.yj_630_block_3 - width 21% -.yj_630_wrap_1 - width: 58.61px - top: 59%; -.yj_630_wrap_2 - left auto - right 0 -.slw_630_wrap - width: 21.97px; - img - height auto -.slw_630_wrap_1 - left: 14%; - top: 74%; -.slw_630_wrap_2 - left: 14%; - top: 87%; -.slw_630_wrap_3 - left 67% - top: 74%; -.slw_630_wrap_4 - left 67% - top: 87%; -.slw_1250_wrap_1 - left: 30%; - top: 74%; -.slw_1250_wrap_2 - left: 30%; - top: 87%; -.mdssj_630_wrap_1 - width 46.41px - left 10% - top 49% -.mdssj_630_wrap_2 - left auto - right 10% -.lmyzj_630_wrap_1 - width 42.73px - left 36% - top 42% - img - transform rotate(180deg) -.weilan_630_wrap - width 70% - height 45% - left 15% - img - transform rotate(180deg) -.robot_630_wrap - width 1px - height 1px - left: 47%; - top: 22%; - img - position absolute - width: 24.38px - height: auto; - top: -400%; - left: -900%; -.ktp_630_wrap - width 18.31px -.ktp_630_wrap_1 - left 21% - top 4% -.ktp_630_wrap_2 - left auto - right 21% - top 4% -.ktp_630_wrap_3 - left 21% - top 22% -.ktp_630_wrap_4 - left auto - right 21% - top 22% -.yj_1600_block_1 - position relative - width 18% - height 100% -.yj_1600_block_2 - left 38% -.weilan_1600_wrap - width 100% - height 66% - top auto - bottom 0 -.slw_1600_wrap - width 19% -.slw_1600_wrap_1 - left: -9%; - top: 7%; -.slw_1600_wrap_2 - left 9% - top 7% -.slw_1600_wrap_3 - left: -9%; - top: 23%; -.slw_1600_wrap_4 - left 9% - top 23% -.slw_1600_wrap_6 - left 127% - top 7% -.slw_1600_wrap_8 - left 127% - top 23% -.yj_1250_wrap - width: 58.61px; - top: 59%; - left 14% -.robot_1250_wrap - width 1% - height 1% - left: 49%; - top: 24%; - img - position: absolute; - width: 2343%; - height: auto; - top: -500%; - left: -1200%; -.ktp_1250_wrap - width: 24.7%; - top 7% -.ktp_1250_wrap_1 - left: 17%; -.ktp_1250_wrap_2 - left: auto; - right: 17%; -.qzj_1600_wrap - width 22% - left auto - right 0 - top auto - bottom 0 -.jcj_1600_wrap - width 27% - left 39% - top 10% -.robot_1600_wrap - width 1% - height 1% - left: 49%; - top: 73%; - img - position: absolute; - width: 2000%; - height: auto; - top: -3600%; - left: -800%; -.ktp_1600_wrap - width 17% -.ktp_1600_wrap_1 - left: 10%; - top: 60%; -.ktp_1600_wrap_2 - left: auto; - right: 10%; - top: 60%; -.yj_1250_block - position relative - width 18% - height 100% -.yyj_block - position relative - width 21% - height 100% -.slw_yyj_wrap - top 50% - left 80% -.slw_yyj - height 25.03px -.yyj_wrap - width 54% - height 28% - top 48% - left 16% -.yj_2500_block - position relative - width 21% - height 100% -.weilan_2500_wrap - width 80% - height 66% - left auto - right 0 -.slw_2500_wrap - width 16% - top auto - bottom 0 - left 74% -.yj_2500_wrap - width 40% - top: 38%; - left: auto; - right: 4%; -.lz_yyj_wrap_1 - width 31% - display: flex - justify-content flex-start - align-items center - flex-wrap wrap - top: 33%; - left: -9%; -.lz_yyj_wrap_2 - width: 15.5%; - top: 76%; - left: 6%; -.lz_yyj_wrap_3 - top 97% -.ktp_yyj_wrap_3 - width: 15.5%; - top: 86%; - left: 22%; -.lz_yyj_1 - position relative - width 50% - img - width 100% -.lz_yyj_2 - position relative -.jzj_2500_wrap - width 36% - left auto - right 0 - top 38% -.jcj_2500_wrap - width 40% - left 50% - top 22% -.robot_2500_wrap - width 1% - height 1% - left: 60%; - top: 13%; - img - position: absolute; - width: 1600%; - height: auto; - top: -400%; - left: -900%; -.ktp_2500_wrap - width 14% -.ktp_2500_wrap_1 - left 26% - top 3% -.ktp_2500_wrap_2 - left auto - right 5% - top 3% -.ktp_2500_wrap_3 - left 10% - top 18% -.ktp_2500_wrap_4 - left auto - right 10% - top 18% -.lz_hj_wrap - width 100% - height 100% - display: flex - justify-content center - align-items center - flex-wrap wrap -.lz_hj - width 25% - height 40% - img - width 100% - height 100% -.lz_hlj_wrap - width 100% - height 100% -.lz_wrap - width 100% - height 40% - display: flex - justify-content space-between - align-items center -.hlj_wrap - height 60% -.lz_inner - width 80% - height 100% - display: flex - justify-content flex-start - align-items center -.lz_s_inner - width 17% - height 100% - display: flex - justify-content flex-start - align-items center - margin-left 3% -.lz_s_border - border 1px solid #465e7b - border-bottom 0 - border-top-left-radius: 5px; - border-top-right-radius: 5px; -.hlj_s_border - border 1px solid #465e7b - border-top 0 - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px -.lz - position relative - width 3.3% - margin 0 2.5166666666666666% - display: flex - justify-content center - align-items center - img - width 100% -.lz_s - position relative - width 16% - margin 0 17% - display: flex - justify-content center - align-items center - img - width 100% -.hlj - position relative - width 5.876% - margin 0 1.2286666666666666% - display: flex - justify-content center - align-items center - img - width 100% -.hlj_s - position relative - width 28% - margin 0 11% - display: flex - justify-content center - align-items center - img - width 100% -.agv_1 - width 17% - left 16% - top -30% - img - width 100% -.agv_2 - left 59% .rgv_line_wrap position absolute top 0 @@ -1283,7 +722,255 @@ export default { img height 100% width auto -.machine_block_7 +// 分拣拆垛位end +// 压机模块start +.m_block_3 + width 29% + height 22% + left 2% + top 60% + .yj_block + width 48% +.m_block_4 + width 66% + height 22% + left auto + right 2% + top 60% + .yj_block + width 20% + &:nth-child(1) + width 21% + &:nth-child(2), &:nth-child(3) + width 16% +.yj_block + position relative + height 100% +.weilan_630_wrap + width 70% + height 45% + left 15% + img + transform rotate(180deg) +.slw_630_wrap + width 100% + top auto + bottom 0 +.slw_630 + display inline-flex + width 50% + img + width 23px + margin 0 auto +.slw_1250_wrap + width 50% + left 6% + .slw_630 + width 100% +.slw_yyj_wrap + width 50% + left auto + right 0 + .slw_630 + width 100% +.ktp_630_wrap + width 94% + left 3% + top 4% +.ktp_630 + display inline-flex + width 50% + margin-bottom 10px + img + width 19px + margin 0 auto +.ktp_yyj + img + width 26.78px +.yj_630_wrap + width 100% + height 20% + top 47% +.yj_630 + position relative + width 48% + height 100% + img + height 100% +.yj_1250 + width 63% +.yyj_wrap + height 27.5% + top 40% +.robot_630_wrap + width 18px + height 18px + left calc(50% - 9px) + top 20% + img + position absolute + width 23px + height auto + left -6px +// 压机模块end +// 叉车start +.m_block_5 + width 15% + left 5% + top 14% + padding 20px + border none + box-shadow none +.agv_1 + width 17% + left 16% + top -30% + img + width 100% +.agv_2 + left 59% +// 叉车end +// 混料机start +.m_block_6 + width 96% + height 10% + top auto + bottom 2% + left 2% +.lzhlj_wrap + width 60% + padding 6px 0 +.cbj_wrap + width 10% + padding 6px 2.5% + border 2px solid #465e7b + border-radius 5px +.lz_wrap + width 100% + height 40% + display flex + justify-content space-between + align-items center +.hlj_wrap + width 100% + height 60% + display flex + justify-content space-between + align-items center +.lz + width 40px + img + position relative + left 5px + width 30px +.hlj + width 40px +// 混料机end +// 窑start +.m_block_1 + width: 77%; + height: 24%; + right: 2%; + top: 31%; +.yao_wrap + position absolute + width 80% + height 50px +.yao_1 + left 15% + top 22% +.yao_2 + left 15% + bottom 22% +.yao_layer3 + position absolute + width: 10%; + height: 70%; + top: 0; + left: 0; + background-color: #A0927E; +.yao_layer1 + position absolute + left 1% + top 0 + width 98% + height 50% + transform: skew(26deg); +.yao_layer1_1 + background-image: linear-gradient(to bottom, #00ff00, #b2fbb2); + box-shadow: inset 1px 3px 6px 0px #04b004; + border: 2px solid #028802; +.yao_layer1_2 + background-image: linear-gradient(to bottom, #bfbfbf, #f1f1f1); + box-shadow: inset 1px 3px 6px 0px #838282; + border: 2px solid #8e8a8a; +.yao_layer2 + position: absolute; + left: 2%; + top: 50%; + width: 98%; + height: 50%; + background-color: #CCC4BB; + border-top: 0; + padding-left 10px + p + line-height: 22px; + font-size: 20px; + color: #F04826; + transform: scale(1, 0.7); + text-shadow 2px 2px 2px rgba(0, 0, 0, 0.3); +.yao_layer2_1 + border: 2px solid #028802; +.yao_layer2_2 + border: 2px solid #8e8a8a; +.jyw_wrap + width 2.205% + height 76% + top: 21.1% + left 8% +.jyw1 + top 15% +.jyw2 + top 38% +.jyw3 + top 62% +.jyw4 + top 86% +.dpw_wrap + width: 4%; + top: -27%; + left: 15%; +.cpj_wrap + width 6% + top 80% +.yjbyx_1 + width: 4%; + height: 76%; + top: 22%; + left: 10%; +.yjbyx_2 + width: 4%; + height: 79%; + left: auto; + right: 0; +.ktp_yao_enter_wrap + width 86% + left auto + top auto + bottom 0 + right 0 +.ktp_yao_out_wrap + width 86% + left: auto + right: 4%; +.ktp_yao + float left + width calc(100% / 39) + img + height auto +// 窑end +// 困料货位start +.m_block_7 position absolute width: 100%; height: 4%; @@ -1303,6 +990,50 @@ export default { width 25.03px height 21.97px float left +// 困料货位end +// 货位start +.m_block_8 + position absolute + width: 17%; + height: 24%; + top: 31% + left: 2% +.rgcdw_wrap + width 15% + height: 70%; + top: 15%; + display: flex; + flex-direction: column; + justify-content: space-between; +.cdw_wrap + width 15% + height: 80%; + display: flex; + flex-direction: column; + justify-content: space-between; + .cdw + box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 60%); +.cdw_wrap_1 + left 20% + top 10% +.cdw_wrap_2 + left: 24%; + top: 8%; +.cdw_wrap_3 + height 100% + left: 50% +.cdw_wrap_4 + height 100% + left: 54%; + top: -2%; +.cdw_wrap_5 + height 100% + left: 80% +.cdw_wrap_6 + height 100% + left: 84% + top: -2% +// 困料货位end .rotate_1 animation rotate_1 9s linear 1s infinite @keyframes rotate_1 { diff --git a/src/style/reset.css b/src/style/reset.css index b3eac52..165c856 100644 --- a/src/style/reset.css +++ b/src/style/reset.css @@ -72,7 +72,7 @@ html, body { width: 1920px; height: 100%; min-height: 1080px; - /* height: 1200px; */ + height: 1200px; /* height: 1080px; 看板 */ /* height: 1200px; 大屏 */ } @@ -152,4 +152,12 @@ div, p { .relative { position: relative +} + +.absolute { + position: absolute +} + +.flexwrap { + flex-wrap: wrap } \ No newline at end of file