root/screen-shunhe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

物流工艺

Browse Source
This commit is contained in:
caill
2023-08-28 19:25:59 +08:00
parent 08653ff6ea
commit 01228b945b
7 changed files with 340 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/device/hlj_s_gray.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/images/device/hlj_s_red.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/device/hlj_s_yellow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

40
src/assets/js/mork2.js
View File

@@ -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': [

46
src/components/canvas.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="canvas_container" @click="rectClick">
<canvas id="myCanvas" width="946" height="822"></canvas>
<canvas id="myCanvas" width="946" height="982"></canvas>
</div>
</template>
@@ -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
</style>

429
src/components/workshop.vue
View File

@@ -61,7 +61,7 @@
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/yjbyx_red.png" alt="">
</div>
<div class="p_device ktp_yao_back_wrap_1">
<div class="ktp_yao_back" v-for="e in backWarehouse.slice(0, 14)" :key="e.equipment">
<div class="ktp_yao_back" v-for="e in backWarehouse" :key="e.equipment">
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
@@ -87,10 +87,10 @@
</div>
<div class="p_device ktp_yao_front_wrap">
<div class="ktp_yao_front" v-for="e in frontWarehouse" :key="e.equipment">
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktp_green.png" alt="">
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktp_yellow.png" alt="">
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktp_gray.png" alt="">
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktp_red.png" alt="">
</div>
</div>
<div class="p_device cpj_ssx_wrap">
@@ -162,15 +162,12 @@
<div class="p_device yj_630_wrap_1">
<img class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
</div>
<div class="p_device yj_630_wrap_1 yj_630_wrap_2">
<div class="p_device yj_630_wrap_1 yj_630_wrap_2" :style="i === 2 ? 'display: none' : ''">
<img class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
</div>
<div class="p_device slw_630_wrap_1">
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
</div>
<div class="p_device slw_630_wrap_1 slw_630_wrap_2">
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
</div>
<div class="p_device mdssj_630_wrap_1">
<img class="device_img" src="../assets/images/device/630/mdssj_gray.png" alt="">
</div>
@@ -209,12 +206,6 @@
<img v-show="e.loadLocation1 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
<img v-show="e.loadLocation1 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
</div>
<div class="p_device slw_630_wrap_1 slw_630_wrap_2">
<img v-show="e.loadLocation2 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
<img v-show="e.loadLocation2 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
<img v-show="e.loadLocation2 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
<img v-show="e.loadLocation2 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
</div>
<div class="p_device mdssj_630_wrap_1">
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/630/mdssj_green.png" alt="">
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/630/mdssj_yellow.png" alt="">
@@ -255,9 +246,9 @@
<div class="blue_line blue_line_1"></div>
<div class="blue_line blue_line_2"></div>
<div class="machine_block machine_block_4">
<div v-if="press.length > 3" class="yj_1600_block">
<div v-if="press.length > 3" class="yj_1600_block_1">
<div class="p_device weilan_1600_wrap">
<img class="device_img" src="../assets/images/device/1600/wl.png" alt="">
<img class="device_img" src="../assets/images/device/630/wl.png" alt="">
</div>
<div class="p_device slw_1600_wrap_1">
<img v-show="press[3].loadLocation1 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
@@ -272,16 +263,16 @@
<img v-show="press[3].loadLocation2 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
</div>
<div class="p_device yj_1600_wrap_1">
<img v-show="press[3].pressMachine1 === '1'" class="device_img" src="../assets/images/device/1600/yj_green.png" alt="">
<img v-show="press[3].pressMachine1 === '2'" class="device_img" src="../assets/images/device/1600/yj_yellow.png" alt="">
<img v-show="press[3].pressMachine1 === '3'" class="device_img" src="../assets/images/device/1600/yj_gray.png" alt="">
<img v-show="press[3].pressMachine1 === '4'" class="device_img" src="../assets/images/device/1600/yj_red.png" alt="">
<img v-show="press[3].pressMachine1 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
<img v-show="press[3].pressMachine1 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
<img v-show="press[3].pressMachine1 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
<img v-show="press[3].pressMachine1 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
</div>
<div class="p_device yj_1600_wrap_1 yj_1600_wrap_2">
<img v-show="press[3].pressMachine2 === '1'" class="device_img" src="../assets/images/device/1600/yj_green.png" alt="">
<img v-show="press[3].pressMachine2 === '2'" class="device_img" src="../assets/images/device/1600/yj_yellow.png" alt="">
<img v-show="press[3].pressMachine2 === '3'" class="device_img" src="../assets/images/device/1600/yj_gray.png" alt="">
<img v-show="press[3].pressMachine2 === '4'" class="device_img" src="../assets/images/device/1600/yj_red.png" alt="">
<img v-show="press[3].pressMachine2 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
<img v-show="press[3].pressMachine2 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
<img v-show="press[3].pressMachine2 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
<img v-show="press[3].pressMachine2 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
</div>
<!-- <div class="p_device qzj_1600_wrap">
<img class="device_img" src="../assets/images/device/1600/qzj_gray.png" alt="">
@@ -290,10 +281,10 @@
<img class="device_img" src="../assets/images/device/1600/jcj_gray.png" alt="">
</div> -->
<div class="p_device ktp_1600_wrap" v-for="(e, i) in press[3].unloadLocation" :key="i" :class="'ktp_1600_wrap_' + (i+1)">
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktp_green.png" alt="">
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktp_yellow.png" alt="">
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktp_gray.png" alt="">
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktp_red.png" alt="">
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
</div>
<div class="p_device robot_1600_wrap" :class="press[3].status === '1' ? 'rotate_3' : ''">
<img v-show="press[3].status === '1'" class="device_img" src="../assets/images/device/robot_2500_green.png" alt="">
@@ -302,9 +293,56 @@
<img v-show="press[3].status === '4'" class="device_img" src="../assets/images/device/robot_2500_red.png" alt="">
</div>
</div>
<div class="yj_1600_block yj_1250_block">
<div v-if="press.length > 3" class="yj_1600_block_1 yj_1600_block_2">
<div class="p_device weilan_1600_wrap">
<img class="device_img" src="../assets/images/device/1600/wl.png" alt="">
<img class="device_img" src="../assets/images/device/630/wl.png" alt="">
</div>
<div class="p_device slw_1600_wrap_1">
<img v-show="press[3].loadLocation1 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
<img v-show="press[3].loadLocation1 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
<img v-show="press[3].loadLocation1 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
<img v-show="press[3].loadLocation1 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
</div>
<div class="p_device slw_1600_wrap_1 slw_1600_wrap_2">
<img v-show="press[3].loadLocation2 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
<img v-show="press[3].loadLocation2 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
<img v-show="press[3].loadLocation2 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
<img v-show="press[3].loadLocation2 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
</div>
<div class="p_device yj_1600_wrap_1">
<img v-show="press[3].pressMachine1 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
<img v-show="press[3].pressMachine1 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
<img v-show="press[3].pressMachine1 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
<img v-show="press[3].pressMachine1 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
</div>
<div class="p_device yj_1600_wrap_1 yj_1600_wrap_2">
<img v-show="press[3].pressMachine2 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
<img v-show="press[3].pressMachine2 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
<img v-show="press[3].pressMachine2 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
<img v-show="press[3].pressMachine2 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
</div>
<!-- <div class="p_device qzj_1600_wrap">
<img class="device_img" src="../assets/images/device/1600/qzj_gray.png" alt="">
</div>
<div class="p_device jcj_1600_wrap">
<img class="device_img" src="../assets/images/device/1600/jcj_gray.png" alt="">
</div> -->
<div class="p_device ktp_1600_wrap" v-for="(e, i) in press[3].unloadLocation" :key="i" :class="'ktp_1600_wrap_' + (i+1)">
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
</div>
<div class="p_device robot_1600_wrap" :class="press[3].status === '1' ? 'rotate_3' : ''">
<img v-show="press[3].status === '1'" class="device_img" src="../assets/images/device/robot_2500_green.png" alt="">
<img v-show="press[3].status === '2'" class="device_img" src="../assets/images/device/robot_2500_yellow.png" alt="">
<img v-show="press[3].status === '3'" class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
<img v-show="press[3].status === '4'" class="device_img" src="../assets/images/device/robot_2500_red.png" alt="">
</div>
</div>
<div class="yj_1600_block_1 yj_1250_block">
<div class="p_device weilan_1600_wrap">
<img class="device_img" src="../assets/images/device/630/wl.png" alt="">
</div>
<div class="p_device slw_1600_wrap_1">
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
@@ -313,53 +351,56 @@
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
</div>
<div class="p_device yj_1600_wrap_1">
<img class="device_img" src="../assets/images/device/1600/yj_gray.png" alt="">
<img class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
</div>
<div class="p_device yj_1600_wrap_1 yj_1600_wrap_2">
<img class="device_img" src="../assets/images/device/1600/yj_gray.png" alt="">
<img class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
</div>
<!-- <div class="p_device qzj_1600_wrap">
<img class="device_img" src="../assets/images/device/1250/qzj_gray.png" alt="">
</div>
<div class="p_device jcj_1600_wrap">
<img class="device_img" src="../assets/images/device/1600/jcj_gray.png" alt="">
</div> -->
<div class="p_device robot_1600_wrap">
<img class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
</div>
<div class="p_device ktp_1600_wrap" v-for="(e, i) in [1,1,1,1]" :key="i" :class="'ktp_1600_wrap_' + (i+1)">
<img class="device_img" src="../assets/images/device/ktp_gray.png" alt="">
<img class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
</div>
</div>
<div v-if="press.length > 4" class="yj_1600_block yj_2500_block">
<div v-if="press.length > 4" class="yj_1600_block_1 yj_2500_block">
<div class="p_device weilan_2500_wrap">
<img class="device_img" src="../assets/images/device/2500/wl.png" alt="">
</div>
<div class="p_device slw_2500_wrap">
<!-- <div class="p_device slw_2500_wrap">
<img v-show="press[4].loadLocation1 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
<img v-show="press[4].loadLocation1 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
<img v-show="press[4].loadLocation1 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
<img v-show="press[4].loadLocation1 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
</div>
<div class="p_device yj_2500_wrap">
<img v-show="press[4].pressMachine1 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
<img v-show="press[4].pressMachine1 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
<img v-show="press[4].pressMachine1 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
<img v-show="press[4].pressMachine1 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
</div>
<!-- <div class="p_device jzj_2500_wrap">
<img class="device_img" src="../assets/images/device/2500/jzj_2500_gray.png" alt="">
</div>
<div class="p_device jcj_2500_wrap">
<img class="device_img" src="../assets/images/device/2500/jcj_2500_gray.png" alt="">
</div> -->
<div class="p_device yj_2500_wrap">
<img v-show="press[4].pressMachine1 === '1'" class="device_img" src="../assets/images/device/1600/yj_green.png" alt="">
<img v-show="press[4].pressMachine1 === '2'" class="device_img" src="../assets/images/device/1600/yj_yellow.png" alt="">
<img v-show="press[4].pressMachine1 === '3'" class="device_img" src="../assets/images/device/1600/yj_gray.png" alt="">
<img v-show="press[4].pressMachine1 === '4'" class="device_img" src="../assets/images/device/1600/yj_red.png" alt="">
</div>
<div class="p_device ktp_yyj_wrap_1">
<div class="ktp_yyj_1" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
<img class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
</div>
</div>
<div class="p_device ktp_yyj_wrap_2">
<div class="ktp_yyj_2" v-for="(e, i) in [1,1,1]" :key="i">
<img class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
</div>
</div>
<div class="p_device ktp_yyj_wrap_3">
<div class="ktp_yyj_3">
<img class="device_img" src="../assets/images/device/ktp_green.png" alt="">
</div>
</div>
<div class="p_device ktp_2500_wrap" v-for="(e, i) in press[4].unloadLocation" :key="i" :class="'ktp_2500_wrap_' + (i+1)">
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
</div>
<div class="p_device robot_1600_wrap robot_2500_wrap" :class="press[4].status === '1' ? 'rotate_4' : ''">
<div class="p_device robot_2500_wrap" :class="press[4].status === '1' ? 'rotate_4' : ''">
<img v-show="press[4].status === '1'" class="device_img" src="../assets/images/device/robot_2500_green.png" alt="">
<img v-show="press[4].status === '2'" class="device_img" src="../assets/images/device/robot_2500_yellow.png" alt="">
<img v-show="press[4].status === '3'" class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
@@ -381,21 +422,41 @@
<div class="machine_block machine_block_6">
<div class="lz_hlj_wrap">
<div class="lz_wrap">
<div class="lz" v-for="(e, i) in unloadLocation" :key="i">
<div class="lz_inner">
<div class="lz" v-for="e in unloadLocation.slice(0, 12)" :key="e.equipment">
<img v-show="e.status === '1'" src="../assets/images/device/lz_hj_green.png" alt="">
<img v-show="e.status === '2'" src="../assets/images/device/lz_hj_yellow.png" alt="">
<img v-show="e.status === '3'" src="../assets/images/device/lz_hj_gray.png" alt="">
<img v-show="e.status === '4'" src="../assets/images/device/lz_hj_red.png" alt="">
</div>
</div>
<div class="hlj_wrap">
<div class="hlj" v-for="(e, i) in mixingMachine" :key="i">
<div class="lz_s_inner lz_s_border">
<div class="lz_s" v-for="e in unloadLocation.slice(12, 14)" :key="e.equipment">
<img v-show="e.status === '1'" src="../assets/images/device/lz_hj_green.png" alt="">
<img v-show="e.status === '2'" src="../assets/images/device/lz_hj_yellow.png" alt="">
<img v-show="e.status === '3'" src="../assets/images/device/lz_hj_gray.png" alt="">
<img v-show="e.status === '4'" src="../assets/images/device/lz_hj_red.png" alt="">
</div>
</div>
</div>
<div class="lz_wrap hlj_wrap">
<div class="lz_inner">
<div class="lz hlj" v-for="e in mixingMachine.slice(0, 12)" :key="e.equipment">
<img v-show="e.status === '1'" src="../assets/images/device/hlj_green.png" alt="">
<img v-show="e.status === '2'" src="../assets/images/device/hlj_yellow.png" alt="">
<img v-show="e.status === '3'" src="../assets/images/device/hlj_gray.png" alt="">
<img v-show="e.status === '4'" src="../assets/images/device/hlj_red.png" alt="">
</div>
</div>
<div class="lz_s_inner hlj_s_border">
<div class="lz_s hlj_s" v-for="e in mixingMachine.slice(12, 14)" :key="e.equipment">
<img v-show="e.status === '1'" src="../assets/images/device/hlj_s_green.png" alt="">
<img v-show="e.status === '2'" src="../assets/images/device/hlj_s_yellow.png" alt="">
<img v-show="e.status === '3'" src="../assets/images/device/hlj_s_gray.png" alt="">
<img v-show="e.status === '4'" src="../assets/images/device/hlj_s_red.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
@@ -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

4
src/pages/shunhe/LogisticsProcess.vue
View File

@@ -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()