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

图标

Browse Source
This commit is contained in:
caill
2024-03-06 18:52:05 +08:00
parent b6933988fe
commit 43c8dd0971
5 changed files with 389 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/pages/modules/home/workshop.vue
View File

@@ -30,21 +30,24 @@
<div class="p_device ssj_wrap">
<img class="device_img" src="../../../images/device/ssj_gray.png" alt="">
</div>
<div class="p_device ktp_cmd_wrap">
<div class="ktp_cmd" v-for="(e, i) in [1,2]" :key="i">
<img class="device_img" src="../../../images/device/ktpv_yellow.png" alt="">
<div v-if="i === 1" class="p_device ktp_cmd_wrap">
<div class="ktp_cmd" v-for="e in SortAndPalletizingList.slice(0,2)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</div>
<div class="p_device ktp_cmd_wrap cmdssj_wrap">
<div class="ktp_cmd" v-for="(e, i) in [1,2]" :key="i">
<img class="device_img" :class="{'rotatex180': i === 1}" src="../../../images/device/cmdssj_gray.png" alt="">
<div v-if="i === 1" class="p_device ktp_cmd_wrap cmdssj_wrap">
<div class="ktp_cmd" v-for="(e,i) in SortAndPalletizingList.slice(2,4)" :key="e.device_code">
<img class="device_img" :class="{'rotatex180': i === 1}" :src="require('../../../images/device/cmdssj_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</div>
<div class="p_device robot_cmd_wrap robot_cmd_wrap_1 rotate_3">
<img class="device_img" src="../../../images/device/robot_cmd_green.png" alt="">
<div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_1" :class="{'rotate_3': Number(ManipulatorInfoList[0].device_status) === 1}">
<img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[0].device_status) - 1] + '.png')">
</div>
<div class="p_device robot_cmd_wrap robot_cmd_wrap_2 rotate_4">
<img class="device_img" src="../../../images/device/robot_cmd_green.png" alt="">
<div v-show="i === 0" class="p_device robot_cmd_wrap robot_cmd_wrap_2" :class="{'rotate_4': Number(ManipulatorInfoList[2].device_status) === 1}">
<img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[2].device_status) - 1] + '.png')">
</div>
<div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_2" :class="{'rotate_4': Number(ManipulatorInfoList[1].device_status) === 1}">
<img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[1].device_status) - 1] + '.png')">
</div>
</div>
<div class="rgv_line_wrap">
@@ -89,18 +92,26 @@
</div>
<div class="m_block m_block_1">
<div class="m_wraper">
<div class="yao_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'yao_' + (i + 1)">
<div class="yao_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'yao_' + (i + 1)" @click="getInfo(yaoObj)">
<div class="yao_layer3"></div>
<div class="yao_layer1 yao_layer1_1 yao_layer1_2"></div>
<div class="yao_layer2 yao_layer2_1 yao_layer2_2"><p>{{i+1}}号窑</p></div>
<div class="yao_layer1 yao_layer1_1"></div>
<div class="yao_layer2 yao_layer2_1">
<p>{{i === 0 ? '进窑' : '出窑'}}</p>
</div>
<device-pop
v-if="i === 0"
:pkId="pkId"
type="yao"
:data="yaoObj"
></device-pop>
</div>
<div class="p_device jyw_wrap">
<div class="p_device" v-for="(e, i) in [1,1]" :key="i" :class="'jyw' + (i+1)">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
<div class="p_device" v-for="(e, i) in [1,1,1,1]" :key="i" :class="'jyw' + (i+1)">
<img class="device_img" src="../../../images/device/ktpv_gray.png" alt="">
</div>
</div>
<div class="p_device dpw_wrap">
<img class="device_img" src="../../../images/device/ktp_green.png" alt="">
<img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
</div>
<div class="p_device cpj_wrap">
<img class="device_img" src="../../../images/device/cpj_green.png" alt="">
@@ -108,14 +119,24 @@
<div class="p_device" v-for="(e, i) in [1,1]" :key="i" :class="'yjbyx_' + (i + 1)">
<img class="device_img" src="../../../images/device/yjbyx_green.png" alt="">
</div>
<div class="p_device ktp_yao_enter_wrap">
<div class="p_device ktp_yao_enter_wrap" @click="getInfo(yaossxArr[0])">
<div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="i">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(yaossxArr[0].stat) - 1] + '.png')">
</div>
<device-pop
:pkId="pkId"
type="yaossx"
:data="yaossxArr[0]"
></device-pop>
</div>
<div class="p_device ktp_yao_out_wrap">
<div class="p_device ktp_yao_out_wrap" @click="getInfo(yaossxArr[1])">
<div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="i">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(yaossxArr[1].stat) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="yaossx"
:data="yaossxArr[1]"
></device-pop>
</div>
</div>
</div>
@@ -165,24 +186,35 @@
</div>
<div class="p_device flexwrap slw_630_wrap">
<div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i">
<img class="device_img" src="../../../images/device/lz_green.png" alt="">
<img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div>
</div>
<div class="p_device flexwrap ktp_630_wrap">
<div class="ktp_630" v-for="(e, i) in [1,1,1,1]" :key="i">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
</div>
<template v-if="i === 0">
<div class="ktp_630" v-for="e in StackingPositionList.slice(0,4)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</template>
<template v-if="i === 1">
<div class="ktp_630" v-for="e in StackingPositionList.slice(4,8)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</template>
</div>
<div class="p_device yj_630_wrap">
<div v-show="i === 0" class="yj_630" v-for="e in PressMachineList.slice(0,2)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
</div>
<div v-show="i === 1" class="yj_630" v-for="e in PressMachineList.slice(2,4)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<template v-if="i === 0">
<div class="yj_630" v-for="e in PressMachineList.slice(0,2)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
</div>
</template>
<template v-if="i === 1">
<div class="yj_630" v-for="e in PressMachineList.slice(2,4)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
</div>
</template>
</div>
<div class="p_device robot_630_wrap rotate_1">
<img src="../../../images/device/robot_green.png" alt="">
<div class="p_device robot_630_wrap" :class="{'rotate_1': Number(ManipulatorInfoList[3+i].device_status) === 1}">
<img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[3+i].device_status) - 1] + '.png')">
</div>
</div>
</div>
@@ -195,12 +227,12 @@
</div>
<div class="p_device flexwrap slw_630_wrap">
<div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i">
<img class="device_img" src="../../../images/device/lz_green.png" alt="">
<img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div>
</div>
<div class="p_device flexwrap ktp_630_wrap">
<div class="ktp_630" v-for="(e, i) in [1,1,1,1]" :key="i">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
<div class="ktp_630" v-for="e in StackingPositionList.slice(8,12)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</div>
<div class="p_device yj_630_wrap">
@@ -208,8 +240,9 @@
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
</div>
</div>
<div class="p_device robot_630_wrap rotate_1">
<div class="p_device robot_630_wrap" :class="{'rotate_1': Number(ManipulatorInfoList[5].device_status) === 1}">
<img src="../../../images/device/robot_green.png" alt="">
<img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[5].device_status) - 1] + '.png')">
</div>
</div>
<div class="yj_block yj_1250_block" v-for="(e, i) in [1, 1]" :key="i">
@@ -218,21 +251,28 @@
</div>
<div class="p_device flexwrap slw_630_wrap slw_1250_wrap">
<div class="slw_630" v-for="(e, i) in [1,1]" :key="i">
<img class="device_img" src="../../../images/device/lz_green.png" alt="">
<img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div>
</div>
<div class="p_device flexwrap ktp_630_wrap ktp_yyj">
<div class="ktp_630" v-for="(e, i) in [1,1]" :key="i">
<img class="device_img" src="../../../images/device/ktp_green.png" alt="">
<div class="p_device flexwrap ktp_630_wrap">
<template v-if="i === 0">
<div class="ktp_630 ktp_yyj" v-for="e in StackingPositionList.slice(12,14)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktp_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</template>
<template v-if="i === 1">
<div class="ktp_630 ktp_yyj" v-for="e in StackingPositionList.slice(14,16)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktp_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</template>
</div>
<div class="p_device yj_630_wrap">
<div class="yj_630 yj_1250">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(PressMachineList[6+i].device_status) - 1] + '.png')">
</div>
</div>
<div class="p_device robot_630_wrap rotate_5">
<img src="../../../images/device/robot_green.png" alt="">
<div class="p_device robot_630_wrap" :class="{'rotate_5': Number(ManipulatorInfoList[6+i].device_status) === 1}">
<img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[6+i].device_status) - 1] + '.png')">
</div>
</div>
<div class="yj_block yyj_block" v-for="(e, i) in [1, 1]" :key="i">
@@ -241,17 +281,17 @@
</div>
<div v-show="i === 0" class="p_device flexwrap slw_630_wrap slw_1250_wrap">
<div class="slw_630" v-for="(e, i) in [1,1]" :key="i">
<img class="device_img" src="../../../images/device/lz_green.png" alt="">
<img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div>
</div>
<div v-show="i === 1" class="p_device flexwrap slw_630_wrap slw_yyj_wrap">
<div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i">
<img class="device_img" src="../../../images/device/lz_green.png" alt="">
<img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div>
</div>
<div class="p_device flexwrap ktp_630_wrap ktp_yyj">
<div class="ktp_630" v-for="(e, i) in [1,1]" :key="i">
<img class="device_img" src="../../../images/device/ktp_green.png" alt="">
<div class="p_device flexwrap ktp_630_wrap" style="opacity:0.1">
<div class="ktp_630 ktp_yyj" v-for="(e, i) in [1,1]" :key="i">
<img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
</div>
</div>
<div class="p_device yj_630_wrap yyj_wrap">
@@ -260,8 +300,8 @@
<!-- <img class="device_img" :src="require('../../../images/device/yyj_' + ['green', 'yellow', 'gray', 'red'][Number(PressMachineList[8+i].device_status) - 1] + '.png')"> -->
</div>
</div>
<div class="p_device robot_630_wrap rotate_5">
<img src="../../../images/device/robot_green.png" alt="">
<div class="p_device robot_630_wrap" style="opacity:0.1">
<img src="../../../images/device/robot_gray.png" alt="">
</div>
</div>
</div>
@@ -276,13 +316,7 @@
<div class="lzhlj_wrap">
<div class="lz_wrap">
<div class="lz" v-for="e in MixBlankingList.slice(0, 6)" :key="e.pointCode">
<img class="device_img" :src="require('../../../images/device/lz_hj_' + ['green', 'yellow', 'gray', 'red'][Number(e.pointStatus) - 1] + '.png')" alt="" @click="getInfo(e)">
<device-pop
type="hlz"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
<img class="device_img" :src="require('../../../images/device/lz_hj_' + ['green', 'yellow', 'gray', 'red'][Number(e.pointStatus) - 1] + '.png')" alt="">
</div>
<div class="lz" v-for="(e,i) in [1,1]" :key="i" style="opacity: 0.1">
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
@@ -290,13 +324,7 @@
</div>
<div class="hlj_wrap">
<div class="hlj" v-for="e in MixMachineList" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/hlj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')" alt="" @click="getInfo(e)">
<device-pop
type="hlj"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
<img class="device_img" :src="require('../../../images/device/hlj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')" alt="">
</div>
</div>
</div>
@@ -343,8 +371,8 @@
<script>
// import TCanvas from './canvas.vue'
import DevicePop from './devicepop.vue'
// import {deviceCondition} from '@js/getData2.js'
import {deviceCondition} from '@js/mork2.js'
// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js'
export default {
name: 'workshop',
components: {
@@ -359,6 +387,10 @@ export default {
MixBlankingList: [], // 混碾机对接位
PressMachineList: [], // 压机
ManipulatorInfoList: [], // 压制、分拣机械手
StackingPositionList: [], // 压制码垛位情况显示
SortAndPalletizingList: [], // 分拣拆码垛对接位
yaossxArr: [],
yaoObj: {},
pkId: ''
}
},
@@ -374,23 +406,33 @@ export default {
methods: {
refresh () {
this._deviceCondition()
this._inOutKilnDetail()
this._kilnDetail()
this.timer3 = setInterval(() => {
this._deviceCondition()
this._inOutKilnDetail()
this._kilnDetail()
}, this.interTime)
},
async _deviceCondition () {
let res = await deviceCondition()
console.log(res)
this.MixMachineList = [...res.MixMachineList]
this.MixBlankingList = [...res.MixBlankingList]
this.PressMachineList = [...res.PressMachineList]
this.ManipulatorInfoList = [...res.ManipulatorInfoList]
this.StackingPositionList = [...res.StackingPositionList]
this.SortAndPalletizingList = [...res.SortAndPalletizingList]
},
async _inOutKilnDetail () {
let res = await inOutKilnDetail()
this.yaossxArr = [...res]
},
async _kilnDetail () {
let res = await kilnDetail()
this.yaoObj = res
},
getInfo (e) {
this.pkId = this.pkId !== e.equipment ? e.equipment : ''
},
closePop () {
this.pkId = ''
this.pkId = this.pkId === e.pointName ? '' : e.pointName
}
}
}
@@ -478,6 +520,7 @@ export default {
top 5%
left 3%
.ktp_cmd
position relative
width 100%
display inline-flex
.cmdssj_wrap
@@ -654,19 +697,35 @@ export default {
.slw_630
width 100%
.ktp_630_wrap
width 94%
left 3%
width: 60%;
height: 32%;
left: 20%;
top 4%
.ktp_630
display inline-flex
width 50%
margin-bottom 10px
img
width 19px
margin 0 auto
position absolute
width 19px
&:nth-child(1)
left 0
bottom 0
&:nth-child(2)
left 0
top 0
&:nth-child(3)
right 0
bottom 0
&:nth-child(4)
right 0
top 0
.ktp_yyj
img
width 26.78px
width 26.78px
&:nth-child(1)
left 0
top 0
bottom auto
&:nth-child(2)
left auto
right 0
top 0
.yj_630_wrap
width 100%
height 20%
@@ -763,10 +822,10 @@ export default {
height 50px
.yao_1
left 15%
top 22%
bottom 22%
.yao_2
left 15%
bottom 22%
top 22%
.yao_layer3
position absolute
width: 10%;