1176 lines
32 KiB
Vue
1176 lines
32 KiB
Vue
<template>
|
|
<div class="center_wrapper">
|
|
<!-- <t-canvas></t-canvas> -->
|
|
<div class="status_wrap">
|
|
<div class="status_item">
|
|
<div class="status_tip green"></div>
|
|
<div class="status_name">运行</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip yellow"></div>
|
|
<div class="status_name">暂停</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip gray"></div>
|
|
<div class="status_name">停机</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip red"></div>
|
|
<div class="status_name">故障</div>
|
|
</div>
|
|
</div>
|
|
<div class="m_block m_block_2">
|
|
<div class="m_wraper">
|
|
<div class="p_device ddxt_wrap" v-for="(e, i) in [1, 1]" :key="i" :class="'ddxt_wrap_' + (i +1)">
|
|
<div class="p_device weilan_ddxt_wrap">
|
|
<div class="weilan_ddxt" v-for="(e, i) in [1, 1]" :key="i">
|
|
<img class="device_img" :class="{'rotatey180': i === 1}" src="../../../images/device/wl_cmd_1.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device ssj_wrap">
|
|
<img class="device_img" src="../../../images/device/ssj_gray.png" alt="">
|
|
</div>
|
|
<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 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 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 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">
|
|
<div class="rgv_line_1">
|
|
<div class="rgv_line_begine"></div>
|
|
<div class="rgv_line_begine rgv_line_end"></div>
|
|
<div class="rgv_line_node_wrap">
|
|
<div class="rgv_line_node" v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="i"></div>
|
|
</div>
|
|
</div>
|
|
<div class="rgv_line_1 rgv_line_2">
|
|
<div class="rgv_line_begine"></div>
|
|
<div class="rgv_line_begine rgv_line_end"></div>
|
|
<div class="rgv_line_node_wrap">
|
|
<div class="rgv_line_node" v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="i"></div>
|
|
</div>
|
|
</div>
|
|
<div class="rgv_line_3"></div>
|
|
</div>
|
|
<div class="p_device rgvct">
|
|
<img class="device_img" src="../../../images/device/rgv_ct.png" alt="">
|
|
</div>
|
|
<div class="p_device ggtj_wrap ggtj_wrap_1">
|
|
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2]" :key="i">
|
|
</div>
|
|
<div class="p_device ggtj_wrap ggtj_wrap_2">
|
|
<img class="fmj" src="../../../images/device/fmj_yellow.png" alt="">
|
|
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="i">
|
|
</div>
|
|
<div class="p_device rgpt"></div>
|
|
<div class="p_device fmj2">
|
|
<img class="device_img" src="../../../images/device/fmj2_yellow.png" alt="">
|
|
</div>
|
|
<div class="p_device ggtj_wrap ggtj_wrap_3">
|
|
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3]" :key="i">
|
|
<img class="ltssj" src="../../../images/device/ltssj_yellow.png" alt="">
|
|
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2]" :key="i">
|
|
<img class="crj" src="../../../images/device/crj_yellow.png" alt="">
|
|
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="i">
|
|
</div>
|
|
</div>
|
|
</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)" @click="getInfo(yaoObj)">
|
|
<div class="yao_layer3"></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,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_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device cpj_wrap">
|
|
<img class="device_img" src="../../../images/device/cpj_green.png" alt="">
|
|
</div>
|
|
<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" @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="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" @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="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>
|
|
</div>
|
|
<div class="m_block_8">
|
|
<div class="p_device rgcdw_wrap">
|
|
<div class="rgcdw" v-for="(e, i) in [1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/hjktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device cdw_wrap cdw_wrap_1">
|
|
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/hjktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device cdw_wrap cdw_wrap_2">
|
|
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/hjktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device cdw_wrap cdw_wrap_3">
|
|
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/hjktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device cdw_wrap cdw_wrap_4">
|
|
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/hjktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device cdw_wrap cdw_wrap_5">
|
|
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/hjktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device cdw_wrap cdw_wrap_6">
|
|
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/hjktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m_block m_block_3">
|
|
<div class="m_wraper">
|
|
<div class="yj_block" v-for="(e, i) in [1,1]" :key="i" >
|
|
<div class="p_device weilan_630_wrap">
|
|
<img class="device_img" src="../../../images/device/wl.png" alt="">
|
|
</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_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device flexwrap ktp_630_wrap">
|
|
<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">
|
|
<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" :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>
|
|
</div>
|
|
<div class="m_block m_block_4">
|
|
<div class="m_wraper">
|
|
<div class="yj_block">
|
|
<div class="p_device weilan_630_wrap">
|
|
<img class="device_img" src="../../../images/device/wl.png" alt="">
|
|
</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_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device flexwrap ktp_630_wrap">
|
|
<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">
|
|
<div class="yj_630" v-for="e in PressMachineList.slice(4,6)" :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>
|
|
<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">
|
|
<div class="p_device weilan_630_wrap">
|
|
<img class="device_img" src="../../../images/device/wl.png" alt="">
|
|
</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_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<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" :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">
|
|
<div class="p_device weilan_630_wrap">
|
|
<img class="device_img" src="../../../images/device/wl.png" alt="">
|
|
</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_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_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<div class="yj_630" style="opacity:0.1">
|
|
<img class="device_img" src="../../../images/device/yyj_gray.png" alt="">
|
|
<!-- <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" style="opacity:0.1">
|
|
<img src="../../../images/device/robot_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m_block m_block_5">
|
|
<div class="p_device agv_1" v-for="(e, i) in [1,1]" :key="i" :class="'agv_' + (i+1)">
|
|
<img src="../../../images/device/agv_green.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="m_block m_block_6">
|
|
<div class="m_wraper">
|
|
<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="">
|
|
</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="">
|
|
</div>
|
|
</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="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="lzhlj_wrap cbj_wrap">
|
|
<div class="lz_wrap">
|
|
拆包机没图片
|
|
</div>
|
|
<div class="hlj_wrap">
|
|
拆包机没图片
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="m_block_7">
|
|
<div class="p_device klw_wraper_1">
|
|
<div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device klw_wraper_2">
|
|
<div class="klw" v-for="(e, i) in [1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device klw_wraper_3">
|
|
<div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device klw_wraper_4">
|
|
<div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device klw_wraper_5">
|
|
<div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import TCanvas from './canvas.vue'
|
|
import DevicePop from './devicepop.vue'
|
|
// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
|
|
import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js'
|
|
export default {
|
|
name: 'workshop',
|
|
components: {
|
|
// TCanvas: TCanvas,
|
|
DevicePop: DevicePop
|
|
},
|
|
data () {
|
|
return {
|
|
interTime: this.$store.getters.setTime,
|
|
timer3: null,
|
|
MixMachineList: [], // 混碾机
|
|
MixBlankingList: [], // 混碾机对接位
|
|
PressMachineList: [], // 压机
|
|
ManipulatorInfoList: [], // 压制、分拣机械手
|
|
StackingPositionList: [], // 压制码垛位情况显示
|
|
SortAndPalletizingList: [], // 分拣拆码垛对接位
|
|
yaossxArr: [],
|
|
yaoObj: {},
|
|
pkId: ''
|
|
}
|
|
},
|
|
created () {
|
|
clearInterval(this.timer3)
|
|
this.refresh()
|
|
},
|
|
beforeDestroy () {
|
|
this.$once('hook:beforeDestroy', () => {
|
|
clearInterval(this.timer3)
|
|
})
|
|
},
|
|
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()
|
|
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.pointName ? '' : e.pointName
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.center_wrapper
|
|
width 100%
|
|
height 100%
|
|
position relative
|
|
.status_wrap
|
|
position absolute
|
|
top 2%
|
|
left 0
|
|
z-index 1
|
|
display: flex
|
|
justify-content space-between
|
|
align-items center
|
|
.status_item
|
|
display: flex
|
|
justify-content space-between
|
|
align-items center
|
|
margin-left 20px
|
|
.status_tip
|
|
width 15px
|
|
height 15px
|
|
border-radius 50%
|
|
margin-right 10px
|
|
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
|
|
.status_name
|
|
font-size 16px
|
|
line-height 1
|
|
color #fff
|
|
.m_block
|
|
position absolute
|
|
border: 1px solid #00c8da;
|
|
padding: 12px;
|
|
box-shadow: 0 0 15px #0087ac;
|
|
border-radius: 10px;
|
|
.m_wraper
|
|
position relative
|
|
width 100%
|
|
height 100%
|
|
display flex
|
|
justify-content space-between
|
|
align-items center
|
|
.p_device
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
display inline-flex
|
|
justify-content space-between
|
|
.device_img
|
|
width 100%
|
|
height auto
|
|
// 分拣拆垛位start
|
|
.m_block_2
|
|
width: 55%;
|
|
height: 22%;
|
|
left: auto
|
|
right: 2%
|
|
top: 7%;
|
|
.ddxt_wrap
|
|
width 30%
|
|
height 49%
|
|
.ddxt_wrap_2
|
|
top auto
|
|
bottom 0
|
|
.weilan_ddxt_wrap
|
|
width 100%
|
|
height 100%
|
|
display flex
|
|
.weilan_ddxt
|
|
width 45%
|
|
display inline-flex
|
|
.ssj_wrap
|
|
width: 36%;
|
|
top: 46%;
|
|
left: 32%;
|
|
.ktp_cmd_wrap
|
|
width 19px
|
|
height 90%
|
|
display flex
|
|
flex-direction column
|
|
top 5%
|
|
left 3%
|
|
.ktp_cmd
|
|
position relative
|
|
width 100%
|
|
display inline-flex
|
|
.cmdssj_wrap
|
|
width 28px
|
|
left auto
|
|
right 3%
|
|
.rotatex180
|
|
transform rotateX(180deg)
|
|
.rotatey180
|
|
transform rotateY(180deg)
|
|
.robot_cmd_wrap
|
|
width: 18px;
|
|
height: 18px;
|
|
img
|
|
position absolute
|
|
width: 36px;
|
|
height: 20px;
|
|
top: -2px;
|
|
left: -1px;
|
|
.robot_cmd_wrap_1
|
|
left: 11%;
|
|
top: 42%;
|
|
.robot_cmd_wrap_2
|
|
left: 79%;
|
|
top: 41%;
|
|
img
|
|
transform rotateY(180deg)
|
|
left -19px
|
|
.rgv_line_wrap
|
|
position absolute
|
|
top 0
|
|
left 31%
|
|
width 5.5%
|
|
height 100%
|
|
.rgv_line_1
|
|
position absolute
|
|
top 6%
|
|
left 0
|
|
width 3px
|
|
height 88%
|
|
background-color #b2b2b2
|
|
margin 0 auto
|
|
box-shadow 0px 3px 10px #333333
|
|
_fj(row)
|
|
.rgv_line_begine
|
|
position absolute
|
|
width 10px
|
|
height 3px
|
|
top 0
|
|
left -3.5px
|
|
background-color #b2b2b2
|
|
border-radius 50%
|
|
box-shadow 0px 3px 10px #333333
|
|
.rgv_line_end
|
|
top auto
|
|
bottom 0
|
|
.rgv_line_node_wrap
|
|
position absolute
|
|
width 6px
|
|
left -1.5px
|
|
height 100%
|
|
display flex
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.rgv_line_node
|
|
width 6px
|
|
height 3px
|
|
background-color #b2b2b2
|
|
border-radius 50%
|
|
box-shadow 0px 1px 4px #333333
|
|
.rgv_line_2
|
|
left auto
|
|
right 0
|
|
.rgv_line_3
|
|
position absolute
|
|
top 0
|
|
left 50%
|
|
z-index 4
|
|
width 2px
|
|
height 100%
|
|
background-color #b2b2b2
|
|
box-shadow 0px 3px 10px #333333
|
|
.rgvct
|
|
width 5.5%
|
|
top 10%
|
|
left: 31%;
|
|
z-index: 100;
|
|
.ggtj_wrap
|
|
display flex
|
|
justify-content flex-start
|
|
left 36.5%
|
|
.gtssj
|
|
width 27px
|
|
height 25px
|
|
.fmj
|
|
width 30px
|
|
height 30px
|
|
.rgpt
|
|
width 50px
|
|
height 50px
|
|
background-color #b4b4b4
|
|
left 51.8%
|
|
top 56%
|
|
.ltssj
|
|
width 53.59px
|
|
height 25px
|
|
.crj
|
|
width auto
|
|
height 40px
|
|
position relative
|
|
top -14px
|
|
.fmj2
|
|
width 26px
|
|
height 32px
|
|
left 68%
|
|
top 62%
|
|
.ggtj_wrap_1
|
|
top 18%
|
|
.ggtj_wrap_2
|
|
top 37%
|
|
.ggtj_wrap_3
|
|
top 64%
|
|
// 分拣拆垛位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: 60%;
|
|
height: 32%;
|
|
left: 20%;
|
|
top 4%
|
|
.ktp_630
|
|
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
|
|
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%
|
|
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%
|
|
padding 6px
|
|
.lzhlj_wrap
|
|
width 70%
|
|
height 100%
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around
|
|
.cbj_wrap
|
|
width 14%
|
|
border 2px solid #465e7b
|
|
border-radius 5px
|
|
.lz_wrap,.hlj_wrap
|
|
justify-content center
|
|
.lz_wrap
|
|
width 100%
|
|
display flex
|
|
justify-content space-between
|
|
align-items center
|
|
.hlj_wrap
|
|
width 100%
|
|
display flex
|
|
justify-content space-between
|
|
align-items center
|
|
.lz
|
|
width 40px
|
|
height 26.31px
|
|
img
|
|
position relative
|
|
left 5px
|
|
width 30px
|
|
.hlj
|
|
width 40px
|
|
height 30.3px
|
|
// 混料机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%
|
|
bottom 22%
|
|
.yao_2
|
|
left 15%
|
|
top 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%;
|
|
top: auto;
|
|
bottom: 12%;
|
|
.klw_wraper_1
|
|
left 2%
|
|
.klw_wraper_2
|
|
left 18%
|
|
.klw_wraper_3
|
|
left 49%
|
|
.klw_wraper_4
|
|
left 65%
|
|
.klw_wraper_5
|
|
left 81%
|
|
.klw
|
|
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 {
|
|
0% {
|
|
transform: rotateZ(20deg)
|
|
}
|
|
2% {
|
|
transform: rotateZ(20deg)
|
|
}
|
|
8% {
|
|
transform: rotateZ(60deg)
|
|
}
|
|
10% {
|
|
transform: rotateZ(60deg)
|
|
}
|
|
18% {
|
|
transform: rotateZ(20deg)
|
|
}
|
|
20% {
|
|
transform: rotateZ(20deg)
|
|
}
|
|
28% {
|
|
transform: rotateZ(100deg)
|
|
}
|
|
30% {
|
|
transform: rotateZ(100deg)
|
|
}
|
|
43% {
|
|
transform: rotateZ(-20deg)
|
|
}
|
|
50% {
|
|
transform: rotateZ(-20deg)
|
|
}
|
|
58% {
|
|
transform: rotateZ(-60deg)
|
|
}
|
|
60% {
|
|
transform: rotateZ(-60deg)
|
|
}
|
|
68% {
|
|
transform: rotateZ(-20deg)
|
|
}
|
|
70% {
|
|
transform: rotateZ(-20deg)
|
|
}
|
|
78% {
|
|
transform: rotateZ(-120deg)
|
|
}
|
|
80% {
|
|
transform: rotateZ(-120deg)
|
|
}
|
|
93% {
|
|
transform: rotateZ(20deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(20deg)
|
|
}
|
|
}
|
|
.rotate_2
|
|
animation rotate_2 4s linear 1s infinite
|
|
@keyframes rotate_2 {
|
|
0% {
|
|
transform: rotateZ(-45deg)
|
|
}
|
|
3% {
|
|
transform: rotateZ(-45deg)
|
|
}
|
|
17% {
|
|
transform: rotateZ(-90deg)
|
|
}
|
|
20% {
|
|
transform: rotateZ(-90deg)
|
|
}
|
|
43% {
|
|
transform: rotateZ(45deg)
|
|
}
|
|
50% {
|
|
transform: rotateZ(45deg)
|
|
}
|
|
72% {
|
|
transform: rotateZ(90deg)
|
|
}
|
|
75% {
|
|
transform: rotateZ(90deg)
|
|
}
|
|
93% {
|
|
transform: rotateZ(-45deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(-45deg)
|
|
}
|
|
}
|
|
.rotate_3
|
|
animation rotate_3 4s linear 1s infinite
|
|
@keyframes rotate_3 {
|
|
0%{
|
|
transform: rotateZ(-120deg)
|
|
}
|
|
3% {
|
|
transform: rotateZ(-120deg)
|
|
}
|
|
20% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
25% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
47% {
|
|
transform: rotateZ(120deg)
|
|
}
|
|
50% {
|
|
transform: rotateZ(120deg)
|
|
}
|
|
70% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
75% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
97%{
|
|
transform: rotateZ(-120deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(-120deg)
|
|
}
|
|
}
|
|
.rotate_4
|
|
animation rotate_4 4s linear 1s infinite
|
|
@keyframes rotate_4 {
|
|
0% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
3% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
22% {
|
|
transform: rotateZ(-90deg)
|
|
}
|
|
25% {
|
|
transform: rotateZ(-90deg)
|
|
}
|
|
43% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
50% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
72% {
|
|
transform: rotateZ(90deg)
|
|
}
|
|
75% {
|
|
transform: rotateZ(90deg)
|
|
}
|
|
93% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
}
|
|
.rotate_5
|
|
animation rotate_5 4s linear 1s infinite
|
|
@keyframes rotate_5 {
|
|
0% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
3% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
25% {
|
|
transform: rotateZ(120deg)
|
|
}
|
|
28% {
|
|
transform: rotateZ(120deg)
|
|
}
|
|
50% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
53% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
75% {
|
|
transform: rotateZ(-130deg)
|
|
}
|
|
78% {
|
|
transform: rotateZ(-130deg)
|
|
}
|
|
97% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
}
|
|
</style>
|