diff --git a/src/assets/images/device/hlj_s_gray.png b/src/assets/images/device/hlj_s_gray.png index 1dbded2..ca30b68 100644 Binary files a/src/assets/images/device/hlj_s_gray.png and b/src/assets/images/device/hlj_s_gray.png differ diff --git a/src/assets/images/device/hlj_s_red.png b/src/assets/images/device/hlj_s_red.png index dd20df4..ffdc035 100644 Binary files a/src/assets/images/device/hlj_s_red.png and b/src/assets/images/device/hlj_s_red.png differ diff --git a/src/assets/images/device/hlj_s_yellow.png b/src/assets/images/device/hlj_s_yellow.png index 6002437..8aed0f4 100644 Binary files a/src/assets/images/device/hlj_s_yellow.png and b/src/assets/images/device/hlj_s_yellow.png differ diff --git a/src/assets/js/mork2.js b/src/assets/js/mork2.js index a09f99e..ebd0844 100644 --- a/src/assets/js/mork2.js +++ b/src/assets/js/mork2.js @@ -60,6 +60,42 @@ export const homepageData = () => { 'materialCode': 'WL03', 'materialName': '物料3', 'completed': 16.25 + }, + { + 'equipment': 'HLJ04', + 'materialCode': 'WL04', + 'materialName': '物料1', + 'completed': 64.25 + }, + { + 'equipment': 'HLJ05', + 'materialCode': 'WL05', + 'materialName': '物料2', + 'completed': 32.25 + }, + { + 'equipment': 'HLJ06', + 'materialCode': 'WL06', + 'materialName': '物料3', + 'completed': 16.25 + }, + { + 'equipment': 'HLJ07', + 'materialCode': 'WL07', + 'materialName': '物料1', + 'completed': 64.25 + }, + { + 'equipment': 'HLJ08', + 'materialCode': 'WL08', + 'materialName': '物料2', + 'completed': 32.25 + }, + { + 'equipment': 'HLJ09', + 'materialCode': 'WL09', + 'materialName': '物料3', + 'completed': 16.25 } ] } @@ -369,10 +405,6 @@ export const homepageEquipment = () => { { 'equipment': '窑3', 'status': '4' - }, - { - 'equipment': '窑4', - 'status': '3' } ], 'gantryRobot': [ diff --git a/src/components/canvas.vue b/src/components/canvas.vue index b18856d..294673f 100644 --- a/src/components/canvas.vue +++ b/src/components/canvas.vue @@ -1,6 +1,6 @@ @@ -8,20 +8,20 @@ export default { data () { return { - points: [{x1: 711, y1: 749, x2: 711, y2: 731}, {x1: 645, y1: 683, x2: 625, y2: 683}, {x1: 778, y1: 683, x2: 800, y2: 683}, {x1: 305, y1: 470, x2: 305, y2: 440}, {x1: 419, y1: 435, x2: 419, y2: 420}, {x1: 455, y1: 240, x2: 550, y2: 240}, {x1: 830, y1: 332, x2: 830, y2: 370}, {x1: 830, y1: 407, x2: 830, y2: 464}, {x1: 830, y1: 426, x2: 593, y2: 426}, {x1: 593, y1: 426, x2: 593, y2: 470}], - dot1: {x1: 711, y1: 749, x2: 711, y2: 731}, - dot2: {x1: 645, y1: 683, x2: 625, y2: 683}, - dot3: {x1: 778, y1: 683, x2: 800, y2: 683}, - dot4: {x1: 305, y1: 470, x2: 305, y2: 440}, - dot5: {x1: 419, y1: 435, x2: 419, y2: 420}, - dot6: {x1: 455, y1: 240, x2: 550, y2: 240}, + points: [{x1: 650, y1: 885, x2: 650, y2: 852}, {x1: 577, y1: 815, x2: 548, y2: 815}, {x1: 719, y1: 815, x2: 754, y2: 815}, {x1: 305, y1: 560, x2: 305, y2: 545}, {x1: 419, y1: 510, x2: 419, y2: 490}, {x1: 455, y1: 282, x2: 548, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 561}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 560}], + dot1: {x1: 650, y1: 885, x2: 650, y2: 852}, + dot2: {x1: 577, y1: 815, x2: 548, y2: 815}, + dot3: {x1: 719, y1: 815, x2: 754, y2: 815}, + dot4: {x1: 305, y1: 560, x2: 305, y2: 545}, + dot5: {x1: 419, y1: 510, x2: 419, y2: 490}, + dot6: {x1: 455, y1: 282, x2: 548, y2: 282}, line1: 1, line2: 1, line3: 1, - dot7: {x1: 830, y1: 332, x2: 830, y2: 370}, - dot8: {x1: 830, y1: 407, x2: 830, y2: 464}, - dot9: {x1: 830, y1: 426, x2: 593, y2: 426}, - dot10: {x1: 593, y1: 426, x2: 593, y2: 470}, + dot7: {x1: 830, y1: 395, x2: 830, y2: 474}, + dot8: {x1: 830, y1: 499, x2: 830, y2: 561}, + dot9: {x1: 830, y1: 516, x2: 488, y2: 516}, + dot10: {x1: 488, y1: 516, x2: 488, y2: 560}, line4: 1 } }, @@ -30,9 +30,9 @@ export default { }, methods: { rectClick () { - // var ev = window.event + var ev = window.event // 获取相对于当前所指向对象的位置坐标 - // alert('x:' + ev.offsetX + 'y:' + ev.offsetY) + alert('x:' + ev.offsetX + 'y:' + ev.offsetY) }, drawPoint (ctx, x, y) { ctx.beginPath() @@ -59,7 +59,7 @@ export default { this.dot1.y1 -= 1 this.drawPoint(ctx, this.dot1.x1, this.dot1.y1) if (this.dot1.y1 === this.dot1.y2) { - this.dot1.y1 = 749 + this.dot1.y1 = 885 this.line1 = 2 } } @@ -68,7 +68,7 @@ export default { this.drawPoint(ctx, this.dot2.x1, this.dot2.y1) // this.line1 = 3 if (this.dot2.x1 === this.dot2.x2) { - this.dot2.x1 = 645 + this.dot2.x1 = 577 this.line1 = 3 } } @@ -77,7 +77,7 @@ export default { this.drawPoint(ctx, this.dot3.x1, this.dot3.y1) // this.line1 = 2 if (this.dot3.x1 === this.dot3.x2) { - this.dot3.x1 = 778 + this.dot3.x1 = 719 this.line1 = 1 } } @@ -85,7 +85,7 @@ export default { this.dot4.y1 -= 1 this.drawPoint(ctx, this.dot4.x1, this.dot4.y1) if (this.dot4.y1 === this.dot4.y2) { - this.dot4.y1 = 470 + this.dot4.y1 = 560 this.line2 = 2 } } @@ -93,7 +93,7 @@ export default { this.dot5.y1 -= 1 this.drawPoint(ctx, this.dot5.x1, this.dot5.y1) if (this.dot5.y1 === this.dot5.y2) { - this.dot5.y1 = 435 + this.dot5.y1 = 510 this.line2 = 1 } } @@ -109,7 +109,7 @@ export default { this.dot7.y1 += 1 this.drawPoint(ctx, this.dot7.x1, this.dot7.y1) if (this.dot7.y1 === this.dot7.y2) { - this.dot7.y1 = 332 + this.dot7.y1 = 395 this.line4 = 2 } } @@ -117,7 +117,7 @@ export default { this.dot8.y1 += 1 this.drawPoint(ctx, this.dot8.x1, this.dot8.y1) if (this.dot8.y1 === this.dot8.y2) { - this.dot8.y1 = 407 + this.dot8.y1 = 499 this.line4 = 3 } } @@ -133,7 +133,7 @@ export default { this.dot10.y1 += 1 this.drawPoint(ctx, this.dot10.x1, this.dot10.y1) if (this.dot10.y1 === this.dot10.y2) { - this.dot10.y1 = 426 + this.dot10.y1 = 516 this.line4 = 1 } } @@ -151,6 +151,6 @@ export default { position absolute top 0 left 0 - _wh(946px, 822px) + _wh(946px, 982px) // background red diff --git a/src/components/workshop.vue b/src/components/workshop.vue index 950f69e..b870d53 100644 --- a/src/components/workshop.vue +++ b/src/components/workshop.vue @@ -61,7 +61,7 @@
-
+
@@ -87,10 +87,10 @@
- - - - + + + +
@@ -162,15 +162,12 @@
-
+
-
- -
@@ -209,12 +206,6 @@
-
- - - - -
@@ -255,9 +246,9 @@
-
+
- +
@@ -272,16 +263,16 @@
- - - - + + + +
- - - - + + + +
- - - - + + + +
@@ -302,9 +293,56 @@
-
+
- + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+ +
+ + + + +
+
+ + + + +
+
+
+
+
@@ -313,53 +351,56 @@
- +
- +
-
- +
-
+
-
+ +
+ + + + +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
-
+
@@ -381,19 +422,39 @@
-
- - - - +
+
+ + + + +
+
+
+
+ + + + +
-
-
- - - - +
+
+
+ + + + +
+
+
+
+ + + + +
@@ -496,7 +557,7 @@ export default { background-size 100% 100% .status_wrap position absolute - top 0 + top 2% right 0 z-index 1 _fj(row) @@ -525,27 +586,28 @@ export default { left 58% top 17% .machine_block_3 - _wh(66%, 32%) + _wh(58%, 32%) top 57% - padding .1rem 3.5% + padding .1rem 4.5% .machine_block_4 - _wh(31%, 32%) + _wh(39%, 32%) left auto right 0 top 57% border-left none border-bottom none box-shadow 5px -5px 8px rgba(0, 135, 172, .6) + padding 0 .machine_block_5 - _wh(14%, 11%) - left 68.2% + _wh(15%, auto) + left 61% top 78% - padding 0.1rem + padding 0.2rem .machine_block_6 - _wh(90%, 9%) - left 5% + _wh(100%, 10%) + padding .07rem .1rem + top auto bottom 0 - padding .1rem .machine_combine position relative _wh(100%, 100%) @@ -654,7 +716,7 @@ export default { .ssj_wrap_2 top 60% .ktp_cmd_wrap - _wh(5%, auto) + _wh(6%, auto) .ktp_cmd_wrap_1 left: 6%; top: 6%; @@ -662,27 +724,27 @@ export default { left 6% top 78% .ktp_cmd_wrap_3 - left: 90%; - top: 0%; + left: 89.5%; + top: 5%; .ktp_cmd_wrap_4 - left: 90%; + left: 89.5%; top: 42%; .robot_cmd_wrap_1 _wh(1%, 1%) left: 9%; - top: 49%; + top: 50%; img position absolute - width: 790%; - height auto - top: -2500%; + width: 900%; + height: auto; + top: -2000%; left: -400%; .robot_cmd_wrap_2 left 79% .fmjxt_wrap - _wh(7%, auto) - left 89% - top 5% + _wh(9%, auto) + left 88% + top 10% .yj_630_blocks display flex _wh(100%, 100%) @@ -691,7 +753,7 @@ export default { flex-wrap wrap .yj_630_block position relative - _wh(22%, 46%) + _wh(27%, 46%) &:nth-child(2), &:nth-child(5) margin-left 8% margin-right 8% @@ -705,7 +767,7 @@ export default { right 0 .slw_630_wrap_1 _wh(19%, auto) - left -22% + left -24% top 5% .slw_630_wrap_2 left auto @@ -751,29 +813,30 @@ export default { left auto right 10% top 75% -.yj_1600_block +.yj_1600_block_1 position absolute left: 5%; - top: 5%; - _wh(41%, 40%) + top 3% + _wh(28%, 36%) +.yj_1600_block_2 + left 38% .weilan_1600_wrap - _wh(70%, 100%) -.slw_1600_wrap_1 - _wh(16%, auto) - left auto - right 0 - top 11% - transform: rotate(90deg) -.slw_1600_wrap_2 - top auto - bottom 11% -.yj_1600_wrap_1 - _wh(22.5%, 40%) - left auto - right 16% -.yj_1600_wrap_2 + _wh(100%, 66%) top auto bottom 0 +.slw_1600_wrap_1 + _wh(19%, auto) + left: -13%; + top: 7%; + transform: rotate(90deg); +.slw_1600_wrap_2 + top 26% +.yj_1600_wrap_1 + _wh(45%, 26%) + left 5% +.yj_1600_wrap_2 + left auto + right 0 .qzj_1600_wrap _wh(22%, auto) left auto @@ -786,50 +849,69 @@ export default { top 10% .robot_1600_wrap _wh(1%, 1%) - left: 33%; - top: 52%; - transform: rotate(145deg) + left: 52%; + top: 70%; img - position absolute - width: 4500%; - height auto - top: -1300%; - left: -3500%; + position: absolute; + width: 5000%; + height: auto; + top: -1200%; + left: -4000%; .ktp_1600_wrap - _wh(18%, auto) + _wh(17%, auto) .ktp_1600_wrap_1 - left 10% - top 16% + left: 10%; + top: 37%; .ktp_1600_wrap_2 - left 38% - top 16% + left: auto; + right: 10%; + top: 37%; .ktp_1600_wrap_3 - left 10% - top 76% + left: 10%; + top: 74%; .ktp_1600_wrap_4 - left 38% - top 76% + left: auto; + right: 10%; + top: 74%; .yj_1250_block left auto - right 3% + right 1% .yj_2500_block + _wh(34%, 52%) left auto top auto - right 3% - bottom 3% + right 9% + bottom 6% .weilan_2500_wrap - _wh(100%, 80%) + _wh(100%, 66%) .slw_2500_wrap _wh(16%, auto) top auto bottom 0 left 74% .yj_2500_wrap - _wh(38%, 24%) - top auto - left auto - right 0 - bottom 16% + _wh(40%, auto) + top: 38%; + left: auto; + right: 4%; +.ktp_yyj_wrap_1 + _wh(19%, auto) + _fj(flex-start) + flex-wrap wrap + top: 33%; + left: 10%; +.ktp_yyj_wrap_2 + width: 9.5%; + top: 76%; + left: 20%; +.ktp_yyj_wrap_3 + width: 13%; + top: 88%; + left: 30%; +.ktp_yyj_1 + width 50% + img + _wh(100%, auto) .jzj_2500_wrap _wh(36%, auto) left auto @@ -840,63 +922,94 @@ export default { left 50% top 22% .robot_2500_wrap - left: 47%; - top: 30%; + _wh(1%, 1%) + left: 52%; + top: 17%; transform: rotate(227deg) + img + position: absolute; + width: 4000%; + height: auto; + top: -600%; + left: -3200%; .ktp_2500_wrap - _wh(13%,auto) + _wh(12%,auto) .ktp_2500_wrap_1 left 10% - top 8% + top 3% .ktp_2500_wrap_2 left auto right 10% - top 8% + top 3% .ktp_2500_wrap_3 left 10% - top 36% + top 18% .ktp_2500_wrap_4 left auto right 10% - top 36% + top 18% .lz_hj_wrap _wh(100%, 100%) _fj(center) flex-wrap wrap .lz_hj - _wh(21%, 30%) + _wh(25%, 40%) img _wh(100%, 100%) .lz_hlj_wrap _wh(100%, 100%) .lz_wrap - _wh(100%, auto) + _wh(100%, 40%) _fj() - margin-bottom 1% -.lz - _wh(calc(100% / 22), auto) - img - position relative - left 34% - _wh(50%, auto) .hlj_wrap - _wh(100%, auto) - _fj() -.hlj - _wh(calc(100% / 22), auto) + height 60% +.lz_inner + _wh(80%, 100%) + _fj(flex-start) +.lz_s_inner + _wh(17%, 100%) + _fj(flex-start) + 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 + _wh(calc(100% / 12), 100%) + _fj(center) img - _wh(100%, auto) + _wh(40%, auto) +.lz_s + _wh(calc(100% / 2), 100%) + _fj(center) + img + _wh(32%, auto) +.hlj + img + _wh(70%, auto) + left 15% +.hlj_s + img + _wh(56%, auto) + left 22% .ktp_yao_front_wrap - _wh(1.5%, auto) - transform: rotate(-90deg); - top: 20%; - left: 29.5%; + _wh(38%, auto) + top: 52%; + left: 10%; + _fj(flex-start) + flex-wrap: wrap .ktp_yao_front - _wh(100%, auto) + _wh(calc(100% / 14), auto) .cpj_ssx_wrap - _wh(12%, auto) - left: 81%; - top: 46%; + _wh(15%, auto) + left: 75%; + top: 48%; .ssx_wrap _wh(100%, auto) _fj() @@ -915,17 +1028,17 @@ export default { border-top 0 border-right 0 .blue_line_1 - left: 69%; + left: 61%; top: 57%; box-shadow -5px 5px 8px rgba(0,135,172,0.6) - _wh(15.5%, 17%) + _wh(18.5%, 16%) border-bottom-right-radius 0 .blue_line_2 left: auto right 0 - top: 74% + top: 73% box-shadow -5px 5px 8px rgba(0,135,172,0.6) - _wh(15.5%, 15%) + _wh(20.5%, 16%) border-top-left-radius 0 .rotate_1 animation rotate_1 1.5s linear 1.5s infinite alternate-reverse diff --git a/src/pages/shunhe/LogisticsProcess.vue b/src/pages/shunhe/LogisticsProcess.vue index 3ea76f6..6c8d613 100644 --- a/src/pages/shunhe/LogisticsProcess.vue +++ b/src/pages/shunhe/LogisticsProcess.vue @@ -268,7 +268,7 @@ export default { defaultOption1 () { return { step: 0.4, // 数值越大速度滚动越快 - limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length + limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新dom @@ -655,7 +655,7 @@ export default { dataIndex: count % dataLength }) count++ - }, 2000) + }, 3000) }, async _homepageData () { let res = await homepageData()