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