Files
screen-huahong/src/pages/modules/home/workshop.vue

1488 lines
52 KiB
Vue
Raw Normal View History

2024-02-28 10:40:36 +08:00
<template>
<div class="center_wrapper">
2024-02-28 18:11:39 +08:00
<!-- <t-canvas></t-canvas> -->
2024-02-28 10:40:36 +08:00
<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="machine_block machine_block_2">
<div class="machine_combine">
<div class="p_device weilan_wrap_1">
<img class="device_img" src="../../../images/device/wl_cmd_1.png" alt="">
</div>
<div class="p_device weilan_wrap_1 weilan_wrap_2">
<img class="device_img" src="../../../images/device/wl_cmd_2.png" alt="">
</div>
<div class="p_device ssj_wrap_1">
<img class="device_img" src="../../../images/device/ssj_gray.png" alt="">
</div>
<div class="p_device ssj_wrap_1 ssj_wrap_2">
<img class="device_img" src="../../../images/device/ssj_gray.png" alt="">
</div>
<div class="p_device ktp_cmd_wrap" v-for="(e, i) in loadLocation" :key="i" :class="'ktp_cmd_wrap_' + (i + 1)">
<img v-show="e.status === 1" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" class="device_img" src="../../../images/device/ktpv_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" class="device_img" src="../../../images/device/ktpv_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/ktpv_red.png" alt="" @click="getInfo(e)">
<device-pop
type="tp"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device robot_cmd_wrap_1" :class="depalletizingRobot.status === 1 ? 'rotate_2' : ''">
<img v-show="depalletizingRobot.status === 1" class="device_img" src="../../../images/device/robot_cmd_green.png" alt="" @click="getInfo(depalletizingRobot)">
<img v-show="depalletizingRobot.status === 2" class="device_img" src="../../../images/device/robot_cmd_yellow.png" alt="" @click="getInfo(depalletizingRobot)">
<img v-show="depalletizingRobot.status === 3" class="device_img" src="../../../images/device/robot_cmd_gray.png" alt="" @click="getInfo(depalletizingRobot)">
<img v-show="depalletizingRobot.status === 4" class="device_img" src="../../../images/device/robot_cmd_red.png" alt="" @click="getInfo(depalletizingRobot)">
</div>
<div class="p_device robot_cmd_wrap_1">
<device-pop
type="cdjxs"
:pkId="pkId"
:data="depalletizingRobot"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device robot_cmd_wrap_1 robot_cmd_wrap_2" :class="palletizingRobot.status === 1 ? 'rotate_3' : ''">
<img v-show="palletizingRobot.status === 1" class="device_img" src="../../../images/device/robot_cmd_green.png" alt="" @click="getInfo(palletizingRobot)">
<img v-show="palletizingRobot.status === 2" class="device_img" src="../../../images/device/robot_cmd_yellow.png" alt="" @click="getInfo(palletizingRobot)">
<img v-show="palletizingRobot.status === 3" class="device_img" src="../../../images/device/robot_cmd_gray.png" alt="" @click="getInfo(palletizingRobot)">
<img v-show="palletizingRobot.status === 4" class="device_img" src="../../../images/device/robot_cmd_red.png" alt="" @click="getInfo(palletizingRobot)">
</div>
<div class="p_device robot_cmd_wrap_1 robot_cmd_wrap_2">
<device-pop
type="cdjxs"
:pkId="pkId"
:data="palletizingRobot"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device fmjxt_wrap">
<img v-show="laminatingMachine.status === 1" class="device_img" src="../../../images/device/fmjxt_green.png" alt="" @click="getInfo(laminatingMachine)">
<img v-show="laminatingMachine.status === 2" class="device_img" src="../../../images/device/fmjxt_yellow.png" alt="" @click="getInfo(laminatingMachine)">
<img v-show="laminatingMachine.status === 3" class="device_img" src="../../../images/device/fmjxt_gray.png" alt="" @click="getInfo(laminatingMachine)">
<img v-show="laminatingMachine.status === 4" class="device_img" src="../../../images/device/fmjxt_red.png" alt="" @click="getInfo(laminatingMachine)">
<device-pop
type="cdjxs"
:pkId="pkId"
:data="laminatingMachine"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device ktp_cmd_wrap" v-for="(e, i) in sunloadLocation" :key="e.equipment" :class="'ktp_cmd_wrap_' + (i + 3)">
<img v-show="e.status === 1" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" class="device_img" src="../../../images/device/ktpv_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" class="device_img" src="../../../images/device/ktpv_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/ktpv_red.png" alt="" @click="getInfo(e)">
<device-pop
type="tp"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
</div>
<div class="machine_block machine_block_1">
<div class="machine_combine">
<div class="yao_wrap" v-for="(e, i) in kiln" :key="e.equipment" :class="'yao_' + (i + 1)" @click="getInfo(e)">
2024-02-28 18:11:39 +08:00
<device-pop
type="yao"
:pkId="pkId"
:data="e"
direction="down"
@closePop="closePop"
></device-pop>
<div class="yao_layer3"></div>
<div class="yao_layer1" :class="Number(e.status) === 3 ? 'yao_layer1_2' : 'yao_layer1_1'"></div>
<div class="yao_layer2" :class="Number(e.status) === 3 ? 'yao_layer2_2' : 'yao_layer2_1'"><p>{{i+1}}号窑</p></div>
2024-02-28 10:40:36 +08:00
</div>
2024-02-28 18:11:39 +08:00
<div class="p_device ltssj_wrap">
<div class="ltssj" v-for="e in conveyorLine" :key="e.equipment">
<img v-show="e.status === 1" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" class="device_img" src="../../../images/device/ktp_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
2024-02-28 10:40:36 +08:00
<device-pop
type="ssx"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
2024-02-28 18:11:39 +08:00
</div>
<div class="p_device dpj_wrap">
<img v-show="trayStacker.status === 1" class="device_img" src="../../../images/device/dpj_green.png" alt="" @click="getInfo(trayStacker)">
<img v-show="trayStacker.status === 2" class="device_img" src="../../../images/device/dpj_yellow.png" alt="" @click="getInfo(trayStacker)">
<img v-show="trayStacker.status === 3" class="device_img" src="../../../images/device/dpj_gray.png" alt="" @click="getInfo(trayStacker)">
<img v-show="trayStacker.status === 4" class="device_img" src="../../../images/device/dpj_red.png" alt="" @click="getInfo(trayStacker)">
<device-pop
type="cpj"
:pkId="pkId"
:data="trayStacker"
@closePop="closePop"
></device-pop>
2024-02-28 10:40:36 +08:00
</div>
<div class="p_device" v-for="(e, i) in gantryRobot" :key="e.equipment" :class="'yjbyx_' + (i + 1)">
<img v-show="e.status === 1" class="device_img" src="../../../images/device/yjbyx_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" class="device_img" src="../../../images/device/yjbyx_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" class="device_img" src="../../../images/device/yjbyx_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/yjbyx_red.png" alt="" @click="getInfo(e)">
<device-pop
type="hangj"
:pkId="pkId"
:data="e"
:direction="i === 0 ? 'down' : ''"
@closePop="closePop"
></device-pop>
</div>
2024-02-28 18:11:39 +08:00
<div class="p_device ktp_yao_back_wrap">
2024-02-28 10:40:36 +08:00
<div class="ktp_yao_back" v-for="e in backWarehouse" :key="e.equipment">
2024-02-28 18:11:39 +08:00
<img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/ktp_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/ktp_red.png" alt="" @click="getInfo(e)">
2024-02-28 10:40:36 +08:00
<device-pop
type="tp"
:pkId="pkId"
:data="e"
direction="down"
@closePop="closePop"
></device-pop>
</div>
</div>
2024-02-28 18:11:39 +08:00
<div class="p_device ktp_yao_back_wrap ktp_yao_front_wrap">
<div class="ktp_yao_back" v-for="e in frontWarehouse" :key="e.equipment">
<img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/ktp_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/ktp_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/ktp_red.png" alt="" @click="getInfo(e)">
2024-02-28 10:40:36 +08:00
<device-pop
2024-02-28 18:11:39 +08:00
type="tp"
2024-02-28 10:40:36 +08:00
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
</div>
</div>
<div class="p_device cpj_ssx_wrap">
<div class="ssx_wrap">
<div class="ssx" v-for="(e, i) in vconveyorLine" :key="i">
<img class="device_img" src="../../../images/device/ssx_green.png" alt="" @click="getInfo(e)">
<device-pop
type="ssx"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
<div class="p_device cpj_wrap">
<img v-show="trayDestacker.status === 1" class="device_img" src="../../../images/device/cpj_green.png" alt="" @click="getInfo(trayDestacker)">
<img v-show="trayDestacker.status === 2" class="device_img" src="../../../images/device/cpj_yellow.png" alt="" @click="getInfo(trayDestacker)">
<img v-show="trayDestacker.status === 3" class="device_img" src="../../../images/device/cpj_gray.png" alt="" @click="getInfo(trayDestacker)">
<img v-show="trayDestacker.status === 4" class="device_img" src="../../../images/device/cpj_red.png" alt="" @click="getInfo(trayDestacker)">
<device-pop
type="ssx"
:pkId="pkId"
:data="trayDestacker"
@closePop="closePop"
></device-pop>
</div>
</div>
<div class="machine_block machine_block_3">
<div class="machine_combine">
<div class="yj_630_blocks">
2024-02-28 18:11:39 +08:00
<div class="yj_630_block" v-for="e in press.slice(0,2)" :key="e.pkid">
2024-02-28 10:40:36 +08:00
<div class="p_device slw_630_wrap_1" v-for="(el, j) in e.loadLocation" :key="el.equipment" :class="{'slw_630_wrap_2': j === 1}">
<img v-show="el.status !== 4 && (el.pointStatus === '2' || el.pointStatus === '3')" class="device_img" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(el)">
<img v-show="el.status !== 4 && (el.pointStatus === '1')" class="device_img" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(el)">
<img v-show="el.status === 4" class="device_img" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(el)">
<device-pop
type="lz"
:pkId="pkId"
:data="el"
@closePop="closePop"
></device-pop>
</div>
<div v-for="(el, j) in e.pressMachine" :key="el.equipment">
2024-02-28 18:11:39 +08:00
<div class="p_device weilan_630_wrap">
<img class="device_img" src="../../../images/device/630/wl.png" alt="">
</div>
2024-02-28 10:40:36 +08:00
<div class="p_device yj_630_wrap_1" :class="{'yj_630_wrap_2': j === 1}">
<img v-show="el.status === 1" class="device_img" src="../../../images/device/630/yj_green.png" alt="" @click="getInfo(el)">
<img v-show="el.status === 2" class="device_img" src="../../../images/device/630/yj_yellow.png" alt="" @click="getInfo(el)">
<img v-show="el.status === 3" class="device_img" src="../../../images/device/630/yj_gray.png" alt="" @click="getInfo(el)">
<img v-show="el.status === 4" class="device_img" src="../../../images/device/630/yj_red.png" alt="" @click="getInfo(el)">
<device-pop
type="yj"
:pkId="pkId"
:data="el"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device mdssj_630_wrap_1" :class="{'mdssj_630_wrap_2': j === 1}">
<img v-show="el.status === 1" class="device_img" src="../../../images/device/630/mdssj_green.png" alt="">
<img v-show="el.status === 2" class="device_img" src="../../../images/device/630/mdssj_yellow.png" alt="">
<img v-show="el.status === 3" class="device_img" src="../../../images/device/630/mdssj_gray.png" alt="">
<img v-show="el.status === 4" class="device_img" src="../../../images/device/630/mdssj_red.png" alt="">
</div>
</div>
<div class="p_device lmyzj_630_wrap_1">
<img v-show="e.palletizingRobot.status === 1" class="device_img" src="../../../images/device/630/lmyzj_green.png" alt="">
<img v-show="e.palletizingRobot.status === 2" class="device_img" src="../../../images/device/630/lmyzj_yellow.png" alt="">
<img v-show="e.palletizingRobot.status === 3" class="device_img" src="../../../images/device/630/lmyzj_gray.png" alt="">
<img v-show="e.palletizingRobot.status === 4" class="device_img" src="../../../images/device/630/lmyzj_red.png" alt="">
</div>
<div class="p_device ktp_630_wrap" v-for="(el, j) in e.unloadLocation" :key="el.equipment" :class="'ktp_630_wrap_' + (j+1)">
<img v-show="el.status === 1" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(el)">
<img v-show="el.status === 2" class="device_img" src="../../../images/device/ktpv_yellow.png" alt="" @click="getInfo(el)">
<img v-show="el.status === 3" class="device_img" src="../../../images/device/ktpv_gray.png" alt="" @click="getInfo(el)">
<img v-show="el.status === 4" class="device_img" src="../../../images/device/ktpv_red.png" alt="" @click="getInfo(el)">
<device-pop
type="tp"
:pkId="pkId"
:data="el"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device robot_630_wrap" :class="e.palletizingRobot.status === 1 ? 'rotate_1' : ''">
<img v-show="e.palletizingRobot.status === 1" class="device_img" src="../../../images/device/robot_2500_green.png" alt="" @click="getInfo(e.palletizingRobot)">
<img v-show="e.palletizingRobot.status === 2" class="device_img" src="../../../images/device/robot_2500_yellow.png" alt="" @click="getInfo(e.palletizingRobot)">
<img v-show="e.palletizingRobot.status === 3" class="device_img" src="../../../images/device/robot_2500_gray.png" alt="" @click="getInfo(e.palletizingRobot)">
<img v-show="e.palletizingRobot.status === 4" class="device_img" src="../../../images/device/robot_2500_red.png" alt="" @click="getInfo(e.palletizingRobot)">
</div>
<div class="p_device robot_630_wrap">
<device-pop
type="yj"
:pkId="pkId"
:data="e.palletizingRobot"
@closePop="closePop"
></device-pop>
</div>
</div>
</div>
</div>
</div>
<div class="blue_line blue_line_1"></div>
<div class="blue_line blue_line_2"></div>
<div class="machine_block machine_block_4">
<div class="yj_1600_block_1 yj_1250_block">
<div class="p_device weilan_1600_wrap">
<img class="device_img" src="../../../images/device/630/wl.png" alt="">
</div>
<div class="p_device yj_1600_wrap_1">
<img class="device_img" src="../../../images/device/630/yj_gray.png" alt="">
</div>
<div class="p_device robot_1600_wrap">
<img class="device_img" src="../../../images/device/robot_2500_gray.png" alt="">
</div>
<div class="p_device ktp_1600_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'ktp_1600_wrap_' + (i+1)">
<img class="device_img" src="../../../images/device/ktpv_gray.png" alt="">
</div>
</div>
<div v-if="press.length >= 3" class="yj_1600_block_1">
<div class="p_device weilan_1600_wrap">
<img class="device_img" src="../../../images/device/630/wl.png" alt="">
</div>
<div class="p_device slw_1600_wrap" v-for="(e, i) in press[3].loadLocation" :key="e.equipment" :class="'slw_1600_wrap_' + (i + 1)">
<img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(e)">
<device-pop
type="lz"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device yj_1600_wrap_1">
<img v-show="press[3].pressMachine[0].status === 1" class="device_img" src="../../../images/device/630/yj_green.png" alt="" @click="getInfo(press[3].pressMachine[0])">
<img v-show="press[3].pressMachine[0].status === 2" class="device_img" src="../../../images/device/630/yj_yellow.png" alt="" @click="getInfo(press[3].pressMachine[0])">
<img v-show="press[3].pressMachine[0].status === 3" class="device_img" src="../../../images/device/630/yj_gray.png" alt="" @click="getInfo(press[3].pressMachine[0])">
<img v-show="press[3].pressMachine[0].status === 4" class="device_img" src="../../../images/device/630/yj_red.png" alt="" @click="getInfo(press[3].pressMachine[0])">
<device-pop
type="yj"
:pkId="pkId"
:data="press[3].pressMachine[0]"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device ktp_1600_wrap" v-for="(e, i) in press[3].unloadLocation" :key="e.equipment" :class="'ktp_1600_wrap_' + (i+1)">
<img v-show="e.status === 1" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" class="device_img" src="../../../images/device/ktpv_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" class="device_img" src="../../../images/device/ktpv_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/ktpv_red.png" alt="" @click="getInfo(e)">
<device-pop
type="tp"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device robot_1600_wrap" :class="press[3].palletizingRobot.status === 1 ? 'rotate_4' : ''">
<img v-show="press[3].palletizingRobot.status === 1" class="device_img" src="../../../images/device/robot_630_green.png" alt="" @click="getInfo(press[3].palletizingRobot)">
<img v-show="press[3].palletizingRobot.status === 2" class="device_img" src="../../../images/device/robot_630_yellow.png" alt="" @click="getInfo(press[3].palletizingRobot)">
<img v-show="press[3].palletizingRobot.status === 3" class="device_img" src="../../../images/device/robot_630_gray.png" alt="" @click="getInfo(press[3].palletizingRobot)">
<img v-show="press[3].palletizingRobot.status === 4" class="device_img" src="../../../images/device/robot_630_red.png" alt="" @click="getInfo(press[3].palletizingRobot)">
</div>
<div class="p_device robot_1600_wrap">
<device-pop
type="yj"
:pkId="pkId"
:data="press[3].palletizingRobot"
@closePop="closePop"
></device-pop>
</div>
</div>
<div v-if="press.length >= 4" class="yj_1600_block_1 yj_1600_block_2">
<div class="p_device weilan_1600_wrap">
<img class="device_img" src="../../../images/device/630/wl.png" alt="">
</div>
<div class="p_device slw_1600_wrap" v-for="(e, i) in press[4].loadLocation" :key="e.equipment" :class="'slw_1600_wrap_' + (2 * i + 2)">
<img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(e)">
<device-pop
type="lz"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device yj_1600_wrap_1">
<img v-show="press[4].pressMachine[0].status === 1" class="device_img" src="../../../images/device/630/yj_green.png" alt="" @click="getInfo(press[4].pressMachine[0])">
<img v-show="press[4].pressMachine[0].status === 2" class="device_img" src="../../../images/device/630/yj_yellow.png" alt="" @click="getInfo(press[4].pressMachine[0])">
<img v-show="press[4].pressMachine[0].status === 3" class="device_img" src="../../../images/device/630/yj_gray.png" alt="" @click="getInfo(press[4].pressMachine[0])">
<img v-show="press[4].pressMachine[0].status === 4" class="device_img" src="../../../images/device/630/yj_red.png" alt="" @click="getInfo(press[4].pressMachine[0])">
<device-pop
type="yj"
:pkId="pkId"
:data="press[4].pressMachine[0]"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device ktp_1600_wrap" v-for="(e, i) in press[4].unloadLocation" :key="e.equipment" :class="'ktp_1600_wrap_' + (i+1)">
<img v-show="e.status === 1" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" class="device_img" src="../../../images/device/ktpv_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" class="device_img" src="../../../images/device/ktpv_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/ktpv_red.png" alt="" @click="getInfo(e)">
<device-pop
type="tp"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device robot_1600_wrap" :class="press[4].palletizingRobot.status === 1 ? 'rotate_4' : ''">
<img v-show="press[4].palletizingRobot.status === 1" class="device_img" src="../../../images/device/robot_630_green.png" alt="" @click="getInfo(press[4].palletizingRobot)">
<img v-show="press[4].palletizingRobot.status === 2" class="device_img" src="../../../images/device/robot_630_yellow.png" alt="" @click="getInfo(press[4].palletizingRobot)">
<img v-show="press[4].palletizingRobot.status === 3" class="device_img" src="../../../images/device/robot_630_gray.png" alt="" @click="getInfo(press[4].palletizingRobot)">
<img v-show="press[4].palletizingRobot.status === 4" class="device_img" src="../../../images/device/robot_630_red.png" alt="" @click="getInfo(press[4].palletizingRobot)">
</div>
<div class="p_device robot_1600_wrap">
<device-pop
type="yj"
:pkId="pkId"
:data="press[4].palletizingRobot"
@closePop="closePop"
></device-pop>
</div>
</div>
<div v-if="press.length >= 5" class="yj_1600_block_1 yj_2500_block">
<div class="p_device weilan_2500_wrap">
<img class="device_img" src="../../../images/device/2500/wl.png" alt="">
</div>
<div class="p_device yj_2500_wrap">
<img v-show="press[5].pressMachine[0].status === 1" class="device_img" src="../../../images/device/1600/yj_green.png" alt="" @click="getInfo(press[5].pressMachine[0])">
<img v-show="press[5].pressMachine[0].status === 2" class="device_img" src="../../../images/device/1600/yj_yellow.png" alt="" @click="getInfo(press[5].pressMachine[0])">
<img v-show="press[5].pressMachine[0].status === 3" class="device_img" src="../../../images/device/1600/yj_gray.png" alt="" @click="getInfo(press[5].pressMachine[0])">
<img v-show="press[5].pressMachine[0].status === 4" class="device_img" src="../../../images/device/1600/yj_red.png" alt="" @click="getInfo(press[5].pressMachine[0])">
<device-pop
type="yj"
:pkId="pkId"
:data="press[5].pressMachine[0]"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device lz_yyj_wrap_1">
<div class="lz_yyj_1" v-for="e in press[5].loadLocation.slice(0, 8)" :key="e.equipment">
<img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(e)">
<device-pop
type="lz"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
<div class="p_device lz_yyj_wrap_2">
<div class="lz_yyj_2" v-for="(e, i) in press[5].loadLocation.slice(8, 10)" :key="i">
<img v-show="e.status !== 4 && (e.pointStatus === '2' || e.pointStatus === '3')" class="device_img" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status !== 4 && e.pointStatus === '1'" class="device_img" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(e)">
<device-pop
type="lz"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
<div v-if="press[5].loadLocation.length > 10" class="p_device ktp_yyj_wrap_3">
<div class="lz_yyj_2">
<img v-show="press[5].loadLocation[10].status !== 4 && (press[5].loadLocation[10].pointStatus === '2' || press[5].loadLocation[10].pointStatus === '3')" class="device_img" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(press[5].loadLocation[10])">
<img v-show="press[5].loadLocation[10].status !== 4 && press[5].loadLocation[10].pointStatus === '1'" class="device_img" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(press[5].loadLocation[10])">
<img v-show="press[5].loadLocation[10].status === 4" class="device_img" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(press[5].loadLocation[10])">
<device-pop
type="lz"
:pkId="pkId"
:data="press[5].loadLocation[10]"
@closePop="closePop"
></device-pop>
</div>
</div>
<div v-if="press[5].loadLocation.length > 11" class="p_device lz_yyj_wrap_2 lz_yyj_wrap_3">
<div class="lz_yyj_2">
<img v-show="press[5].loadLocation[11].status !== 4 && (press[5].loadLocation[11].pointStatus === '2' || press[5].loadLocation[11].pointStatus === '3')" class="device_img" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(press[5].loadLocation[11])">
<img v-show="press[5].loadLocation[11].status !== 4 && press[5].loadLocation[11].pointStatus === '1'" class="device_img" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(press[5].loadLocation[11])">
<img v-show="press[5].loadLocation[11].status === 4" class="device_img" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(press[5].loadLocation[11])">
<device-pop
type="lz"
:pkId="pkId"
:data="press[5].loadLocation[11]"
@closePop="closePop"
></device-pop>
</div>
</div>
<div class="p_device ktp_2500_wrap" v-for="(e, i) in press[5].unloadLocation" :key="e.equipment" :class="'ktp_2500_wrap_' + (i+1)">
<img v-show="e.status === 1" class="device_img" src="../../../images/device/ktpv_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" class="device_img" src="../../../images/device/ktpv_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" class="device_img" src="../../../images/device/ktpv_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" class="device_img" src="../../../images/device/ktpv_red.png" alt="" @click="getInfo(e)">
<device-pop
type="tp"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
<div class="p_device robot_2500_wrap" :class="press[5].palletizingRobot.status === 1 ? 'rotate_5' : ''">
<img v-show="press[5].palletizingRobot.status === 1" class="device_img" src="../../../images/device/robot_2500_green.png" alt="" @click="getInfo(press[5].palletizingRobot)">
<img v-show="press[5].palletizingRobot.status === 2" class="device_img" src="../../../images/device/robot_2500_yellow.png" alt="" @click="getInfo(press[5].palletizingRobot)">
<img v-show="press[5].palletizingRobot.status === 3" class="device_img" src="../../../images/device/robot_2500_gray.png" alt="" @click="getInfo(press[5].palletizingRobot)">
<img v-show="press[5].palletizingRobot.status === 4" class="device_img" src="../../../images/device/robot_2500_red.png" alt="" @click="getInfo(press[5].palletizingRobot)">
</div>
<div class="p_device robot_2500_wrap">
<device-pop
type="tp"
:pkId="pkId"
:data="press[5].palletizingRobot"
@closePop="closePop"
></device-pop>
</div>
</div>
</div>
<div class="machine_block machine_block_5">
<div class="p_device agv_1" v-for="(e, i) in agv" :key="e.equipment" :class="'agv_' + (i+1)">
<img v-show="e.status === 1" src="../../../images/device/agv_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" src="../../../images/device/agv_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" src="../../../images/device/agv_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" src="../../../images/device/agv_red.png" alt="" @click="getInfo(e)">
<device-pop
type="agv"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
<div class="machine_block machine_block_6">
<div class="lz_hlj_wrap">
<div class="lz_wrap">
<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="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" src="../../../images/device/lz_hj_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(e)">
<device-pop
type="hlz"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
<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="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" src="../../../images/device/lz_hj_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" src="../../../images/device/lz_hj_red.png" alt="" @click="getInfo(e)">
<device-pop
type="hlz"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
</div>
<div class="lz_wrap hlj_wrap">
<div class="lz_inner">
<div class="hlj" v-for="e in mixingMachine.slice(0, 12)" :key="e.equipment">
<img v-show="e.status === 1" src="../../../images/device/hlj_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" src="../../../images/device/hlj_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" src="../../../images/device/hlj_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" src="../../../images/device/hlj_red.png" alt="" @click="getInfo(e)">
<device-pop
type="hlj"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
<div class="lz_s_inner hlj_s_border">
<div class="hlj_s" v-for="e in mixingMachine.slice(12, 14)" :key="e.equipment">
<img v-show="e.status === 1" src="../../../images/device/hlj_s_green.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 2" src="../../../images/device/hlj_s_yellow.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 3" src="../../../images/device/hlj_s_gray.png" alt="" @click="getInfo(e)">
<img v-show="e.status === 4" src="../../../images/device/hlj_s_red.png" alt="" @click="getInfo(e)">
<device-pop
type="hlj"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// import TCanvas from './canvas.vue'
import DevicePop from './devicepop.vue'
// import {homepageEquipment} from '@js/getData2.js'
import {homepageEquipment} from '@js/mork2.js'
export default {
name: 'workshop',
components: {
// TCanvas: TCanvas,
DevicePop: DevicePop
},
data () {
return {
interTime: this.$store.getters.setTime,
timer3: null,
mixingMachine: [],
unloadLocation: [],
palletizingRobot: {},
sunloadLocation: [],
depalletizingRobot: {},
loadLocation: [],
laminatingMachine: {},
press: [],
frontWarehouse: [],
backWarehouse: [],
conveyorLine: [],
gantryRobot: [],
kiln: [],
coolingConveyorLine: [],
trayStacker: {},
vconveyorLine: [],
trayDestacker: {},
agv: [],
pkId: ''
}
},
created () {
clearInterval(this.timer3)
this.refresh()
},
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer3)
})
},
methods: {
refresh () {
this._homepageEquipment()
this.timer3 = setInterval(() => {
this._homepageEquipment()
}, this.interTime)
},
async _homepageEquipment () {
let res = await homepageEquipment()
// 混料机
this.mixingMachine = [...res.mix.mixingMachine]
// 混料机下料位
this.unloadLocation = [...res.mix.unloadLocation]
// 分拣区
this.palletizingRobot = res.sort.palletizingRobot.length > 0 ? [...res.sort.palletizingRobot][0] : {}
this.sunloadLocation = [...res.sort.unloadLocation]
this.depalletizingRobot = res.sort.depalletizingRobot.length > 0 ? [...res.sort.depalletizingRobot][0] : {}
this.loadLocation = [...res.sort.loadLocation]
this.laminatingMachine = res.sort.laminatingMachine.length > 0 ? [...res.sort.laminatingMachine][0] : {}
// 压机
this.press = []
res.press.palletizingRobot.map((e, i) => {
// 压机上料位
let loadLocation = []
if (i < 3) {
loadLocation = res.stand.storageLocation.slice(2 * i, 2 * i + 2)
} else if (i === 3) {
loadLocation = res.stand.storageLocation.slice(6, 10)
} else if (i === 4) {
loadLocation = res.stand.storageLocation.slice(10, 14)
} else if (i === 5) {
loadLocation = res.stand.storageLocation.slice(14, 26)
}
// 压机
let pressMachine = i < 3 ? res.press.pressMachine.slice(2 * i, 2 * i + 2) : res.press.pressMachine.slice(i + 3, i + 4)
// 压机下料位
let unloadLocation = i < 3 ? res.press.unloadLocation.slice(4 * i, 4 * i + 4) : res.press.unloadLocation.slice(2 * i + 6, 2 * i + 8)
this.press.push({pkid: 'key' + i + 1, palletizingRobot: e, loadLocation: loadLocation, pressMachine: pressMachine, unloadLocation: unloadLocation})
})
// console.log(this.press)
// 窑前货架
this.frontWarehouse = [...res.frontWarehouse.storageLocation]
// 窑后货架
this.backWarehouse = [...res.backWarehouse.storageLocation]
// 干燥区
this.conveyorLine = [...res.dry.conveyorLine]
this.gantryRobot = [...res.dry.gantryRobot]
this.kiln = [...res.dry.kiln]
this.coolingConveyorLine = [...res.dry.coolingConveyorLine]
// 托盘输送线
this.trayStacker = res.vehicleConveyorLine.trayStacker.length > 0 ? [...res.vehicleConveyorLine.trayStacker][0] : {}
this.vconveyorLine = [...res.vehicleConveyorLine.conveyorLine].reverse()
// 拆盘机暂时不显示
// this.trayDestacker = res.vehicleConveyorLine.trayDestacker.length > 0 ? [...res.vehicleConveyorLine.trayDestacker][0] : {}
this.agv = [...res.agv.agv]
},
getInfo (e) {
this.pkId = this.pkId !== e.equipment ? e.equipment : ''
},
closePop () {
this.pkId = ''
}
}
}
</script>
<style lang="stylus" scoped>
.center_wrapper
width 100%
height 100%
position relative
background-size 100% 100%
.status_wrap
position absolute
top 2%
2024-02-28 18:11:39 +08:00
left 0
2024-02-28 10:40:36 +08:00
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
2024-02-28 18:11:39 +08:00
font-size 16px
2024-02-28 10:40:36 +08:00
line-height 1
color #fff
.machine_block
position absolute
border: 1px solid #00c8da;
2024-02-28 18:11:39 +08:00
padding: 12px;
2024-02-28 10:40:36 +08:00
box-shadow: 0 0 15px #0087ac;
border-radius: 10px;
.machine_block_1
2024-02-28 18:11:39 +08:00
width: 70%;
height: 25%;
right: 2%;
top: 27%;
2024-02-28 10:40:36 +08:00
.machine_block_2
2024-02-28 18:11:39 +08:00
width: 52%;
height: 23%;
left: 35%;
top: 1.5%;
2024-02-28 10:40:36 +08:00
.machine_block_3
2024-02-28 18:11:39 +08:00
width 28%
height 22%
left 2%
2024-02-28 10:40:36 +08:00
top 57%
2024-02-28 18:11:39 +08:00
padding 12px
2024-02-28 10:40:36 +08:00
.machine_block_4
width 39%
height 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
width 15%
left 61%
top 78%
2024-02-28 18:11:39 +08:00
padding 20px
2024-02-28 10:40:36 +08:00
border none
box-shadow none
.machine_block_6
width 100%
height 10%
2024-02-28 18:11:39 +08:00
padding 7px 1px
2024-02-28 10:40:36 +08:00
top auto
bottom 0
.machine_combine
position relative
width 100%
height 100%
.p_device
position absolute
top 0
left 0
.device_img
width 100%
height 100%
.yjbyx_1
2024-02-28 18:11:39 +08:00
width 4.5%
height 80%
top 10%
img
transform rotate(180deg)
2024-02-28 10:40:36 +08:00
.yjbyx_2
2024-02-28 18:11:39 +08:00
width 4.5%
height 80%
left auto
right 0
top 10%
2024-02-28 10:40:36 +08:00
.yao_line_1
position absolute
width 100%
height 6px
border 1px solid #d1d1d1
top -9px
background-color #9e9e9e
display flex
justify-content: space-between
align-items: center
.yao_line_2
top auto
bottom -9px
.yao_line_dot
width 2px
height 100%
background-color #e1e1e1
.yao_wrap
position absolute
2024-02-28 18:11:39 +08:00
width 88%
height 50px
2024-02-28 10:40:36 +08:00
.yao_layer1
position absolute
2024-02-28 18:11:39 +08:00
left 1%
2024-02-28 10:40:36 +08:00
top 0
2024-02-28 18:11:39 +08:00
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;
2024-02-28 10:40:36 +08:00
.yao_layer3
position absolute
2024-02-28 18:11:39 +08:00
width: 10%;
height: 70%;
top: 0;
left: 0;
background-color: #A0927E;
2024-02-28 10:40:36 +08:00
.yao_1
2024-02-28 18:11:39 +08:00
left 6%
top 20%
2024-02-28 10:40:36 +08:00
.yao_2
2024-02-28 18:11:39 +08:00
left 6%
bottom 30%
2024-02-28 10:40:36 +08:00
.yytsj_wrap
width 50%
left 25%
.yygcj_wrap
width 50%
top auto
bottom 0
left 25%
2024-02-28 18:11:39 +08:00
.ktp_yao_back_wrap
left 0
top auto
bottom 0
width 100%
height: 20px
.ktp_yao_front_wrap
width 90%
left 5%
bottom auto
top 0
2024-02-28 10:40:36 +08:00
.ktp_yao_back
2024-02-28 18:11:39 +08:00
float left
width 27px
height 20px
img
height auto
2024-02-28 10:40:36 +08:00
.dpj_wrap
2024-02-28 18:11:39 +08:00
width 15%
left 18%
2024-02-28 10:40:36 +08:00
top auto
2024-02-28 18:11:39 +08:00
bottom 9%
2024-02-28 10:40:36 +08:00
.ltssj_wrap
2024-02-28 18:11:39 +08:00
height 20px
left -12px
top: auto
bottom 12%
.ltssj
float left
width 27px
2024-02-28 10:40:36 +08:00
.weilan_wrap_1
height 100%
.weilan_wrap_2
left auto
right 0
.ssj_wrap_1
width 55%
height 30%
left: 18%;
top: 20%;
.ssj_wrap_2
top 60%
.ktp_cmd_wrap
width 6%
.ktp_cmd_wrap_1
left: 6%;
top: 6%;
.ktp_cmd_wrap_2
left 6%
top 78%
.ktp_cmd_wrap_3
left: 89.5%;
top: 5%;
.ktp_cmd_wrap_4
left: 89.5%;
top: 42%;
.robot_cmd_wrap_1
width 1%
height 1%
left: 9%;
top: 50%;
img
position absolute
width: 1500%;
height: auto;
top: -700%;
left: -300%;
.robot_cmd_wrap_2
left 79%
.fmjxt_wrap
width 9%
left 88%
top 10%
.yj_630_blocks
display flex
width 100%
height 100%
justify-content space-between
align-items center
flex-wrap wrap
.yj_630_block
position relative
2024-02-28 18:11:39 +08:00
width 48%
height 100%
2024-02-28 10:40:36 +08:00
.yj_630_wrap_1
2024-02-28 18:11:39 +08:00
width: 45%;
height: 30%;
bottom: 16%;
top: auto;
2024-02-28 10:40:36 +08:00
.yj_630_wrap_2
left auto
right 0
.slw_630_wrap_1
2024-02-28 18:11:39 +08:00
width: 20%;
left: 40%;
top: auto;
bottom: 12%;
height 21.42px
2024-02-28 10:40:36 +08:00
.slw_630_wrap_2
2024-02-28 18:11:39 +08:00
bottom 0
2024-02-28 10:40:36 +08:00
.mdssj_630_wrap_1
width 38%
left 10%
2024-02-28 18:11:39 +08:00
top 49%
2024-02-28 10:40:36 +08:00
.mdssj_630_wrap_2
left auto
right 10%
.lmyzj_630_wrap_1
width 35%
left 36%
2024-02-28 18:11:39 +08:00
top 42%
img
transform rotate(180deg)
2024-02-28 10:40:36 +08:00
.weilan_630_wrap
width 100%
2024-02-28 18:11:39 +08:00
height 45%
img
transform rotate(180deg)
2024-02-28 10:40:36 +08:00
.robot_630_wrap
width 1%
height 1%
left: 47%;
2024-02-28 18:11:39 +08:00
top: 22%;
2024-02-28 10:40:36 +08:00
img
position absolute
width: 2000%;
height: auto;
2024-02-28 18:11:39 +08:00
top: -400%;
2024-02-28 10:40:36 +08:00
left: -900%;
.ktp_630_wrap
width 15%
.ktp_630_wrap_1
2024-02-28 18:11:39 +08:00
left 10%
top 4%
2024-02-28 10:40:36 +08:00
.ktp_630_wrap_2
2024-02-28 18:11:39 +08:00
left auto
right 10%
top 4%
2024-02-28 10:40:36 +08:00
.ktp_630_wrap_3
2024-02-28 18:11:39 +08:00
left 10%
top 22%
2024-02-28 10:40:36 +08:00
.ktp_630_wrap_4
2024-02-28 18:11:39 +08:00
left auto
right 10%
top 22%
2024-02-28 10:40:36 +08:00
.yj_1600_block_1
position absolute
left: 5%;
top 3%
width 28%
height 32%
.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_1600_wrap_1
width 69%
left auto
right 0
.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
left auto
right 1%
opacity 0.2
.yj_2500_block
width 34%
height 52%
left auto
top auto
right 8%
bottom 6%
.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%
.cpj_ssx_wrap
2024-02-28 18:11:39 +08:00
width 2.7%
left: 11%;
top: 33%;
2024-02-28 10:40:36 +08:00
.ssx_wrap
width 100%
.ssx
2024-02-28 18:11:39 +08:00
width 100%
height 28.77px
2024-02-28 10:40:36 +08:00
.cpj_wrap
width 18%
top: -51%;
left: 20%;
.blue_line
position absolute
border-radius 10px
border 1px solid #00c8da
border-top 0
border-right 0
.blue_line_1
left: 61%;
top: 57%;
box-shadow -5px 5px 8px rgba(0,135,172,0.6)
width 18.5%
height 13%
border-bottom-right-radius 0
.blue_line_2
left: auto
right 0
top: 70%
box-shadow -5px 5px 8px rgba(0,135,172,0.6)
width 20.5%
height 19%
border-top-left-radius 0
.agv_1
width 17%
left 16%
top -30%
img
width 100%
.agv_2
left 59%
.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(-20deg)
}
3% {
transform: rotateZ(-20deg)
}
22% {
transform: rotateZ(90deg)
}
25% {
transform: rotateZ(90deg)
}
43% {
transform: rotateZ(-20deg)
}
50% {
transform: rotateZ(-20deg)
}
72% {
transform: rotateZ(-90deg)
}
75% {
transform: rotateZ(-90deg)
}
93% {
transform: rotateZ(-20deg)
}
100% {
transform: rotateZ(-20deg)
}
}
</style>