1103 lines
44 KiB
Vue
1103 lines
44 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="machine_block machine_block_1">
|
|
<div class="machine_combine">
|
|
<div class="yao_line_1">
|
|
<div v-for="(e, i) in [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="i" class="yao_line_dot"></div>
|
|
</div>
|
|
<div class="yao_line_1 yao_line_2">
|
|
<div v-for="(e, i) in [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="i" class="yao_line_dot"></div>
|
|
</div>
|
|
<div class="yao_wrap yao_1">
|
|
<div class="yao_layer1"></div>
|
|
<div class="yao_layer2"></div>
|
|
<div class="yao_layer3"></div>
|
|
</div>
|
|
<div class="yao_wrap" v-for="(e, i) in kiln" :key="e.equipment" :class="'yao_' + (i + 2)">
|
|
<div class="yao_layer1"></div>
|
|
<div class="yao_layer2"></div>
|
|
<div class="yao_layer3" :style="{background: ['#11ff0d', '#fdfd0f', '#bfbfbf', '#ff1016'][Number(e.status) - 1]}"></div>
|
|
</div>
|
|
<!-- <div class="yao_wrap yao_5">
|
|
<div class="yao_layer1"></div>
|
|
<div class="yao_layer2"></div>
|
|
<div class="yao_layer3" :style="{background: ['#11ff0d', '#fdfd0f', '#bfbfbf', '#ff1016'][Number(emptyVehicleConveyorLine.status) - 1]}"></div>
|
|
<div class="p_device yytsj_wrap">
|
|
<img class="device_img" src="../assets/images/device/yytsj_green.png" alt="">
|
|
</div>
|
|
<div class="p_device yygcj_wrap">
|
|
<img class="device_img" src="../assets/images/device/yygcj_green.png" alt="">
|
|
</div>
|
|
</div> -->
|
|
<div class="yao_wrap yao_6" v-for="(e, i) in coolingConveyorLine" :key="e.equipment" :class="'yao_' + (i + 6)">
|
|
<div class="yao_layer1"></div>
|
|
<div class="yao_layer2"></div>
|
|
<div class="yao_layer3" :style="{background: ['#11ff0d', '#fdfd0f', '#bfbfbf', '#ff1016'][Number(e.status) - 1]}"></div>
|
|
<div class="p_device yytsj_wrap">
|
|
<img class="device_img" src="../assets/images/device/yytsj_green.png" alt="">
|
|
</div>
|
|
<div class="p_device yygcj_wrap">
|
|
<img class="device_img" src="../assets/images/device/yygcj_green.png" alt="">
|
|
</div>
|
|
</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="../assets/images/device/yjbyx_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/yjbyx_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/yjbyx_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/yjbyx_red.png" alt="">
|
|
</div>
|
|
<div class="p_device ktp_yao_back_wrap_1">
|
|
<div class="ktp_yao_back" v-for="e in backWarehouse" :key="e.equipment">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device dpj_wrap">
|
|
<img v-show="trayStacker.status === '1'" class="device_img" src="../assets/images/device/dpj_green.png" alt="">
|
|
<img v-show="trayStacker.status === '2'" class="device_img" src="../assets/images/device/dpj_yellow.png" alt="">
|
|
<img v-show="trayStacker.status === '3'" class="device_img" src="../assets/images/device/dpj_gray.png" alt="">
|
|
<img v-show="trayStacker.status === '4'" class="device_img" src="../assets/images/device/dpj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device ltssj_wrap">
|
|
<!-- <img class="device_img" src="../assets/images/device/ltssj_green.png" alt=""> -->
|
|
<div class="ltssj" v-for="e in conveyorLine" :key="e.equipment">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p_device ktp_yao_front_wrap">
|
|
<div class="ktp_yao_front" v-for="e in frontWarehouse" :key="e.equipment">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktp_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktp_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktp_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktp_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device cpj_ssx_wrap">
|
|
<div class="ssx_wrap">
|
|
<div class="ssx" v-for="(e, i) in vconveyorLine" :key="i">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ssx_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ssx_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ssx_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ssx_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device cpj_wrap">
|
|
<img v-show="trayDestacker.status === '1'" class="device_img" src="../assets/images/device/cpj_green.png" alt="">
|
|
<img v-show="trayDestacker.status === '2'" class="device_img" src="../assets/images/device/cpj_yellow.png" alt="">
|
|
<img v-show="trayDestacker.status === '3'" class="device_img" src="../assets/images/device/cpj_gray.png" alt="">
|
|
<img v-show="trayDestacker.status === '4'" class="device_img" src="../assets/images/device/cpj_red.png" alt="">
|
|
</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="../assets/images/device/wl_cmd_1.png" alt="">
|
|
</div>
|
|
<div class="p_device weilan_wrap_1 weilan_wrap_2">
|
|
<img class="device_img" src="../assets/images/device/wl_cmd_2.png" alt="">
|
|
</div>
|
|
<div class="p_device ssj_wrap_1">
|
|
<img class="device_img" src="../assets/images/device/ssj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device ssj_wrap_1 ssj_wrap_2">
|
|
<img class="device_img" src="../assets/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="../assets/images/device/ktpv_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
|
|
</div>
|
|
<div class="p_device robot_cmd_wrap_1" :class="depalletizingRobot.status === '1' ? 'rotate_1' : ''">
|
|
<img v-show="depalletizingRobot.status === '1'" class="device_img" src="../assets/images/device/robot_cmd_green.png" alt="">
|
|
<img v-show="depalletizingRobot.status === '2'" class="device_img" src="../assets/images/device/robot_cmd_yellow.png" alt="">
|
|
<img v-show="depalletizingRobot.status === '3'" class="device_img" src="../assets/images/device/robot_cmd_gray.png" alt="">
|
|
<img v-show="depalletizingRobot.status === '4'" class="device_img" src="../assets/images/device/robot_cmd_red.png" alt="">
|
|
</div>
|
|
<div class="p_device robot_cmd_wrap_1 robot_cmd_wrap_2" :class="palletizingRobot.status === '1' ? 'rotate_2' : ''">
|
|
<img v-show="palletizingRobot.status === '1'" class="device_img" src="../assets/images/device/robot_cmd_green.png" alt="">
|
|
<img v-show="palletizingRobot.status === '2'" class="device_img" src="../assets/images/device/robot_cmd_yellow.png" alt="">
|
|
<img v-show="palletizingRobot.status === '3'" class="device_img" src="../assets/images/device/robot_cmd_gray.png" alt="">
|
|
<img v-show="palletizingRobot.status === '4'" class="device_img" src="../assets/images/device/robot_cmd_red.png" alt="">
|
|
</div>
|
|
<div class="p_device fmjxt_wrap">
|
|
<img v-show="laminatingMachine.status === '1'" class="device_img" src="../assets/images/device/fmjxt_green.png" alt="">
|
|
<img v-show="laminatingMachine.status === '2'" class="device_img" src="../assets/images/device/fmjxt_yellow.png" alt="">
|
|
<img v-show="laminatingMachine.status === '3'" class="device_img" src="../assets/images/device/fmjxt_gray.png" alt="">
|
|
<img v-show="laminatingMachine.status === '4'" class="device_img" src="../assets/images/device/fmjxt_red.png" alt="">
|
|
</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="../assets/images/device/ktpv_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="machine_block machine_block_3">
|
|
<div class="machine_combine">
|
|
<div class="yj_630_blocks">
|
|
<div class="yj_630_block" v-for="(e, i) in [1,1,1]" :key="i">
|
|
<div class="p_device yj_630_wrap_1">
|
|
<img class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device yj_630_wrap_1 yj_630_wrap_2" :style="i === 2 ? 'display: none' : ''">
|
|
<img class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_630_wrap_1">
|
|
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device mdssj_630_wrap_1">
|
|
<img class="device_img" src="../assets/images/device/630/mdssj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device mdssj_630_wrap_1 mdssj_630_wrap_2">
|
|
<img class="device_img" src="../assets/images/device/630/mdssj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device lmyzj_630_wrap_1">
|
|
<img class="device_img" src="../assets/images/device/630/lmyzj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device weilan_630_wrap">
|
|
<img class="device_img" src="../assets/images/device/630/wl.png" alt="">
|
|
</div>
|
|
<div class="p_device robot_630_wrap">
|
|
<img class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device ktp_630_wrap" v-for="(e, i) in [1,1,1,1]" :key="i" :class="'ktp_630_wrap_' + (i+1)">
|
|
<img class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="yj_630_block" v-for="e in press.slice(0,3)" :key="e.equipment">
|
|
<div class="p_device yj_630_wrap_1">
|
|
<img v-show="e.pressMachine1 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
|
|
<img v-show="e.pressMachine1 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
|
|
<img v-show="e.pressMachine1 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
|
|
<img v-show="e.pressMachine1 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device yj_630_wrap_1 yj_630_wrap_2">
|
|
<img v-show="e.pressMachine2 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
|
|
<img v-show="e.pressMachine2 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
|
|
<img v-show="e.pressMachine2 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
|
|
<img v-show="e.pressMachine2 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_630_wrap_1">
|
|
<img v-show="e.loadLocation1 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="e.loadLocation1 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="e.loadLocation1 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="e.loadLocation1 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device mdssj_630_wrap_1">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/630/mdssj_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/630/mdssj_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/630/mdssj_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/630/mdssj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device mdssj_630_wrap_1 mdssj_630_wrap_2">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/630/mdssj_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/630/mdssj_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/630/mdssj_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/630/mdssj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device lmyzj_630_wrap_1">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/630/lmyzj_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/630/lmyzj_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/630/lmyzj_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/630/lmyzj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device weilan_630_wrap">
|
|
<img class="device_img" src="../assets/images/device/630/wl.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="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
|
|
</div>
|
|
<div class="p_device robot_630_wrap" :class="e.status === '1' ? 'rotate_1' : ''">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/robot_2500_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/robot_2500_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/robot_2500_red.png" alt="">
|
|
</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 v-if="press.length > 3" class="yj_1600_block_1">
|
|
<div class="p_device weilan_1600_wrap">
|
|
<img class="device_img" src="../assets/images/device/630/wl.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_1600_wrap slw_1600_wrap_1">
|
|
<img v-show="press[3].loadLocation1 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="press[3].loadLocation1 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="press[3].loadLocation1 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="press[3].loadLocation1 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_1600_wrap slw_1600_wrap_2">
|
|
<img v-show="press[3].loadLocation2 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="press[3].loadLocation2 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="press[3].loadLocation2 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="press[3].loadLocation2 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_1600_wrap slw_1600_wrap_3">
|
|
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_1600_wrap slw_1600_wrap_4">
|
|
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device yj_1600_wrap_1">
|
|
<img v-show="press[3].pressMachine1 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
|
|
<img v-show="press[3].pressMachine1 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
|
|
<img v-show="press[3].pressMachine1 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
|
|
<img v-show="press[3].pressMachine1 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
|
|
</div>
|
|
<!-- <div class="p_device qzj_1600_wrap">
|
|
<img class="device_img" src="../assets/images/device/1600/qzj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device jcj_1600_wrap">
|
|
<img class="device_img" src="../assets/images/device/1600/jcj_gray.png" alt="">
|
|
</div> -->
|
|
<div class="p_device ktp_1600_wrap" v-for="(e, i) in press[3].unloadLocation" :key="i" :class="'ktp_1600_wrap_' + (i+1)">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
|
|
</div>
|
|
<div class="p_device robot_1600_wrap" :class="press[3].status === '1' ? 'rotate_3' : ''">
|
|
<img v-show="press[3].status === '1'" class="device_img" src="../assets/images/device/robot_2500_green.png" alt="">
|
|
<img v-show="press[3].status === '2'" class="device_img" src="../assets/images/device/robot_2500_yellow.png" alt="">
|
|
<img v-show="press[3].status === '3'" class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
|
|
<img v-show="press[3].status === '4'" class="device_img" src="../assets/images/device/robot_2500_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div 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="../assets/images/device/630/wl.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_1600_wrap slw_1600_wrap_2">
|
|
<img v-show="press[3].loadLocation1 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="press[3].loadLocation1 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="press[3].loadLocation1 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="press[3].loadLocation1 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_1600_wrap slw_1600_wrap_4">
|
|
<img v-show="press[3].loadLocation2 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="press[3].loadLocation2 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="press[3].loadLocation2 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="press[3].loadLocation2 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device yj_1600_wrap_1">
|
|
<img v-show="press[3].pressMachine1 === '1'" class="device_img" src="../assets/images/device/630/yj_green.png" alt="">
|
|
<img v-show="press[3].pressMachine1 === '2'" class="device_img" src="../assets/images/device/630/yj_yellow.png" alt="">
|
|
<img v-show="press[3].pressMachine1 === '3'" class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
|
|
<img v-show="press[3].pressMachine1 === '4'" class="device_img" src="../assets/images/device/630/yj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device ktp_1600_wrap" v-for="(e, i) in press[3].unloadLocation" :key="i" :class="'ktp_1600_wrap_' + (i+1)">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
|
|
</div>
|
|
<div class="p_device robot_1600_wrap" :class="press[3].status === '1' ? 'rotate_3' : ''">
|
|
<img v-show="press[3].status === '1'" class="device_img" src="../assets/images/device/robot_2500_green.png" alt="">
|
|
<img v-show="press[3].status === '2'" class="device_img" src="../assets/images/device/robot_2500_yellow.png" alt="">
|
|
<img v-show="press[3].status === '3'" class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
|
|
<img v-show="press[3].status === '4'" class="device_img" src="../assets/images/device/robot_2500_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="yj_1600_block_1 yj_1250_block">
|
|
<div class="p_device weilan_1600_wrap">
|
|
<img class="device_img" src="../assets/images/device/630/wl.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_1600_wrap slw_1600_wrap_2">
|
|
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device slw_1600_wrap slw_1600_wrap_4">
|
|
<img class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device yj_1600_wrap_1">
|
|
<img class="device_img" src="../assets/images/device/630/yj_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device robot_1600_wrap">
|
|
<img class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
|
|
</div>
|
|
<div class="p_device ktp_1600_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'ktp_1600_wrap_' + (i+1)">
|
|
<img class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div v-if="press.length > 4" class="yj_1600_block_1 yj_2500_block">
|
|
<div class="p_device weilan_2500_wrap">
|
|
<img class="device_img" src="../assets/images/device/2500/wl.png" alt="">
|
|
</div>
|
|
<!-- <div class="p_device slw_2500_wrap">
|
|
<img v-show="press[4].loadLocation1 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="press[4].loadLocation1 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="press[4].loadLocation1 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="press[4].loadLocation1 === '4'" class="device_img" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div> -->
|
|
<div class="p_device yj_2500_wrap">
|
|
<img v-show="press[4].pressMachine1 === '1'" class="device_img" src="../assets/images/device/1600/yj_green.png" alt="">
|
|
<img v-show="press[4].pressMachine1 === '2'" class="device_img" src="../assets/images/device/1600/yj_yellow.png" alt="">
|
|
<img v-show="press[4].pressMachine1 === '3'" class="device_img" src="../assets/images/device/1600/yj_gray.png" alt="">
|
|
<img v-show="press[4].pressMachine1 === '4'" class="device_img" src="../assets/images/device/1600/yj_red.png" alt="">
|
|
</div>
|
|
<div class="p_device ktp_yyj_wrap_1">
|
|
<div class="ktp_yyj_1" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
|
|
<img class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device ktp_yyj_wrap_2">
|
|
<div class="ktp_yyj_2" v-for="(e, i) in [1,1,1]" :key="i">
|
|
<img class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device ktp_yyj_wrap_3">
|
|
<div class="ktp_yyj_3">
|
|
<img class="device_img" src="../assets/images/device/ktp_green.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="p_device ktp_2500_wrap" v-for="(e, i) in press[4].unloadLocation" :key="i" :class="'ktp_2500_wrap_' + (i+1)">
|
|
<img v-show="e.status === '1'" class="device_img" src="../assets/images/device/ktpv_green.png" alt="">
|
|
<img v-show="e.status === '2'" class="device_img" src="../assets/images/device/ktpv_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" class="device_img" src="../assets/images/device/ktpv_gray.png" alt="">
|
|
<img v-show="e.status === '4'" class="device_img" src="../assets/images/device/ktpv_red.png" alt="">
|
|
</div>
|
|
<div class="p_device robot_2500_wrap" :class="press[4].status === '1' ? 'rotate_4' : ''">
|
|
<img v-show="press[4].status === '1'" class="device_img" src="../assets/images/device/robot_2500_green.png" alt="">
|
|
<img v-show="press[4].status === '2'" class="device_img" src="../assets/images/device/robot_2500_yellow.png" alt="">
|
|
<img v-show="press[4].status === '3'" class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
|
|
<img v-show="press[4].status === '4'" class="device_img" src="../assets/images/device/robot_2500_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="machine_block machine_block_5">
|
|
<div class="lz_hj_wrap">
|
|
<div class="lz_hj" v-for="(e, i) in storageLocation" :key="i">
|
|
<img v-show="e.pointStatus === '2'" src="../assets/images/device/hj.png" alt="">
|
|
<img v-show="e.pointStatus === '3' && e.status === '1'" src="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="e.pointStatus === '3' && e.status === '2'" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="e.pointStatus === '3' && e.status === '3'" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="e.pointStatus === '3' && e.status === '4'" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div>
|
|
</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="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="e.status === '2'" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="e.status === '4'" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="lz_s_inner lz_s_border">
|
|
<div class="lz_s" v-for="e in unloadLocation.slice(12, 14)" :key="e.equipment">
|
|
<img v-show="e.status === '1'" src="../assets/images/device/lz_hj_green.png" alt="">
|
|
<img v-show="e.status === '2'" src="../assets/images/device/lz_hj_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" src="../assets/images/device/lz_hj_gray.png" alt="">
|
|
<img v-show="e.status === '4'" src="../assets/images/device/lz_hj_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lz_wrap hlj_wrap">
|
|
<div class="lz_inner">
|
|
<div class="lz hlj" v-for="e in mixingMachine.slice(0, 12)" :key="e.equipment">
|
|
<img v-show="e.status === '1'" src="../assets/images/device/hlj_green.png" alt="">
|
|
<img v-show="e.status === '2'" src="../assets/images/device/hlj_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" src="../assets/images/device/hlj_gray.png" alt="">
|
|
<img v-show="e.status === '4'" src="../assets/images/device/hlj_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="lz_s_inner hlj_s_border">
|
|
<div class="lz_s hlj_s" v-for="e in mixingMachine.slice(12, 14)" :key="e.equipment">
|
|
<img v-show="e.status === '1'" src="../assets/images/device/hlj_s_green.png" alt="">
|
|
<img v-show="e.status === '2'" src="../assets/images/device/hlj_s_yellow.png" alt="">
|
|
<img v-show="e.status === '3'" src="../assets/images/device/hlj_s_gray.png" alt="">
|
|
<img v-show="e.status === '4'" src="../assets/images/device/hlj_s_red.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TCanvas from '@components/canvas.vue'
|
|
// import {homepageEquipment} from '@js/getData2.js'
|
|
import {homepageEquipment} from '@js/mork2.js'
|
|
export default {
|
|
name: 'workshop',
|
|
components: {
|
|
TCanvas
|
|
},
|
|
data () {
|
|
return {
|
|
mixingMachine: [],
|
|
unloadLocation: [],
|
|
storageLocation: [],
|
|
palletizingRobot: {},
|
|
sunloadLocation: [],
|
|
depalletizingRobot: {},
|
|
loadLocation: [],
|
|
laminatingMachine: {},
|
|
press: [],
|
|
frontWarehouse: [],
|
|
backWarehouse: [],
|
|
conveyorLine: [],
|
|
gantryRobot: [],
|
|
kiln: [],
|
|
// emptyVehicleConveyorLine: {},
|
|
coolingConveyorLine: [],
|
|
trayStacker: {},
|
|
vconveyorLine: [],
|
|
trayDestacker: {}
|
|
}
|
|
},
|
|
created () {
|
|
this._homepageEquipment()
|
|
},
|
|
methods: {
|
|
async _homepageEquipment () {
|
|
let res = await homepageEquipment()
|
|
// 混料机
|
|
this.mixingMachine = [...res.mix.mixingMachine]
|
|
// 混料机下料位
|
|
this.unloadLocation = [...res.mix.unloadLocation]
|
|
// 困料货架
|
|
this.storageLocation = [...res.stand.storageLocation]
|
|
// 分拣区
|
|
this.palletizingRobot = [...res.sort.palletizingRobot][0]
|
|
this.sunloadLocation = [...res.sort.unloadLocation]
|
|
this.depalletizingRobot = [...res.sort.depalletizingRobot][0]
|
|
this.loadLocation = [...res.sort.loadLocation]
|
|
this.laminatingMachine = [...res.sort.laminatingMachine][0]
|
|
// 压机
|
|
this.press = []
|
|
res.press.palletizingRobot.map((e, i) => {
|
|
let loadLocation1 = res.press.loadLocation[2 * i].status
|
|
let loadLocation2 = res.press.loadLocation[2 * i + 1].status
|
|
let pressMachine1 = i < 3 ? res.press.pressMachine[2 * i].status : res.press.pressMachine[i + 3].status
|
|
let pressMachine2 = i < 3 ? res.press.pressMachine[2 * i + 1].status : ''
|
|
let unloadLocation1 = i < 3 ? res.press.unloadLocation[4 * i] : res.press.unloadLocation[4 * i - (i - 3) * 2]
|
|
let unloadLocation2 = i < 3 ? res.press.unloadLocation[4 * i + 1] : res.press.unloadLocation[4 * i - (i - 3) * 2 + 1]
|
|
let unloadLocation3 = i < 3 ? res.press.unloadLocation[4 * i + 2] : {}
|
|
let unloadLocation4 = i < 3 ? res.press.unloadLocation[4 * i + 3] : {}
|
|
this.press.push({equipment: e.equipment, status: e.status, palletizingRobot: e.palletizingRobot, loadLocation1: loadLocation1, loadLocation2: loadLocation2, pressMachine1: pressMachine1, pressMachine2: pressMachine2, unloadLocation: i < 3 ? [unloadLocation1, unloadLocation2, unloadLocation3, unloadLocation4] : [unloadLocation1, unloadLocation2]})
|
|
})
|
|
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.emptyVehicleConveyorLine = [...res.dry.emptyVehicleConveyorLine][0]
|
|
this.coolingConveyorLine = [...res.dry.coolingConveyorLine]
|
|
// 托盘输送线
|
|
this.trayStacker = [...res.vehicleConveyorLine.trayStacker][0]
|
|
let vconveyorLine = [{status: ''}, {status: ''}, {status: ''}, {status: ''}, {status: ''}]
|
|
vconveyorLine.length = 5
|
|
vconveyorLine.map(el => {
|
|
el.status = [...res.vehicleConveyorLine.conveyorLine][0].status
|
|
})
|
|
this.vconveyorLine = vconveyorLine
|
|
this.trayDestacker = [...res.vehicleConveyorLine.trayDestacker][0]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@css/mixin'
|
|
.center_wrapper
|
|
_wh(100%, 100%)
|
|
position relative
|
|
background-size 100% 100%
|
|
.status_wrap
|
|
position absolute
|
|
top 2%
|
|
right 0
|
|
z-index 1
|
|
_fj(row)
|
|
.status_item
|
|
_fj(row)
|
|
margin-left 20px
|
|
.status_tip
|
|
_wh(15px, 15px)
|
|
border-radius 50%
|
|
margin-right 10px
|
|
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
|
|
.status_name
|
|
_font(16px, 1, #fff)
|
|
.machine_block
|
|
position absolute
|
|
border: 1px solid #00c8da;
|
|
padding: 0.2rem 0.1rem;
|
|
box-shadow: 0 0 15px #0087ac;
|
|
border-radius: 10px;
|
|
.machine_block_1
|
|
_wh(48%, 50%)
|
|
left 0
|
|
top 0
|
|
.machine_block_2
|
|
_wh(35%, 23%)
|
|
left 58%
|
|
top 17%
|
|
.machine_block_3
|
|
_wh(58%, 32%)
|
|
top 57%
|
|
padding .1rem 4.5%
|
|
.machine_block_4
|
|
_wh(39%, 32%)
|
|
left auto
|
|
right 0
|
|
top 57%
|
|
border-left none
|
|
border-bottom none
|
|
box-shadow 5px -5px 8px rgba(0, 135, 172, .6)
|
|
padding 0
|
|
.machine_block_5
|
|
_wh(15%, auto)
|
|
left 61%
|
|
top 78%
|
|
padding 0.2rem
|
|
.machine_block_6
|
|
_wh(100%, 10%)
|
|
padding .07rem .1rem
|
|
top auto
|
|
bottom 0
|
|
.machine_combine
|
|
position relative
|
|
_wh(100%, 100%)
|
|
.p_device
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
.device_img
|
|
_wh(100%, 100%)
|
|
.yjbyx_1
|
|
_wh(100%, 10%)
|
|
top auto
|
|
bottom 0
|
|
.yjbyx_2
|
|
_wh(100%, 10%)
|
|
.yao_line_1
|
|
position absolute
|
|
_wh(100%, 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
|
|
_wh(2px, 100%)
|
|
background-color #e1e1e1
|
|
.yao_wrap
|
|
position absolute
|
|
_wh(2%, 100%)
|
|
background-color #ded8e6
|
|
.yao_layer1
|
|
position absolute
|
|
left -5px
|
|
top -3px
|
|
_wh(calc(100% + 10px), calc(100% + 6px))
|
|
border-left 2px solid #909090
|
|
border-right 2px solid #909090
|
|
.yao_layer2
|
|
position absolute
|
|
left calc(50% - 1px)
|
|
top 0
|
|
_wh(2px, 100%)
|
|
background-color #ddb528
|
|
.yao_layer3
|
|
position absolute
|
|
left -5px
|
|
top 5%
|
|
_wh(calc(100% + 10px), 90%)
|
|
.yao_1
|
|
left 3%
|
|
opacity 0.2
|
|
.yao_layer3
|
|
background-color #bfbfbf
|
|
.yao_2
|
|
left 14%
|
|
.yao_3
|
|
left 25%
|
|
.yao_4
|
|
left 36%
|
|
.yao_5
|
|
left 48%
|
|
.yao_6
|
|
left 60%
|
|
.yao_7
|
|
left 72%
|
|
.yao_8
|
|
left 83%
|
|
.yytsj_wrap
|
|
_wh(50%, auto)
|
|
left 25%
|
|
.yygcj_wrap
|
|
_wh(50%, auto)
|
|
top auto
|
|
bottom 0
|
|
left 25%
|
|
.ktp_yao_back_wrap_1
|
|
left auto
|
|
right: 0;
|
|
top: 10%;
|
|
_wh(7%, auto)
|
|
_fj()
|
|
flex-wrap wrap
|
|
.ktp_yao_back
|
|
_wh(50%, auto)
|
|
.dpj_wrap
|
|
_wh(6%, auto)
|
|
left auto
|
|
top auto
|
|
right 1%
|
|
bottom 15%
|
|
.ltssj_wrap
|
|
_wh(3.3%, auto)
|
|
left: auto;
|
|
right 4%
|
|
top: 87%;
|
|
.weilan_wrap_1
|
|
_wh(auto, 100%)
|
|
.weilan_wrap_2
|
|
left auto
|
|
right 0
|
|
.ssj_wrap_1
|
|
_wh(55%, 30%)
|
|
left: 18%;
|
|
top: 20%;
|
|
.ssj_wrap_2
|
|
top 60%
|
|
.ktp_cmd_wrap
|
|
_wh(6%, auto)
|
|
.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
|
|
_wh(1%, 1%)
|
|
left: 9%;
|
|
top: 50%;
|
|
img
|
|
position absolute
|
|
width: 900%;
|
|
height: auto;
|
|
top: -2000%;
|
|
left: -400%;
|
|
.robot_cmd_wrap_2
|
|
left 79%
|
|
.fmjxt_wrap
|
|
_wh(9%, auto)
|
|
left 88%
|
|
top 10%
|
|
.yj_630_blocks
|
|
display flex
|
|
_wh(100%, 100%)
|
|
justify-content space-between
|
|
align-items center
|
|
flex-wrap wrap
|
|
.yj_630_block
|
|
position relative
|
|
_wh(27%, 46%)
|
|
&:nth-child(2), &:nth-child(5)
|
|
margin-left 8%
|
|
margin-right 8%
|
|
&:nth-child(n+4)
|
|
margin-top 4%
|
|
transform rotate(180deg)
|
|
.yj_630_wrap_1
|
|
_wh(45%, 26%)
|
|
.yj_630_wrap_2
|
|
left auto
|
|
right 0
|
|
.slw_630_wrap_1
|
|
_wh(19%, auto)
|
|
left -24%
|
|
top 5%
|
|
.slw_630_wrap_2
|
|
left auto
|
|
right -22%
|
|
.mdssj_630_wrap_1
|
|
_wh(38%, auto)
|
|
left 10%
|
|
top 25%
|
|
.mdssj_630_wrap_2
|
|
left auto
|
|
right 10%
|
|
.lmyzj_630_wrap_1
|
|
_wh(35%, auto)
|
|
left 36%
|
|
top 31%
|
|
.weilan_630_wrap
|
|
_wh(100%, 66%)
|
|
top auto
|
|
bottom 0
|
|
.robot_630_wrap
|
|
_wh(1%, 1%)
|
|
left: 47%;
|
|
top: 73%;
|
|
img
|
|
position absolute
|
|
width: 5000%;
|
|
height auto
|
|
top: -1200%;
|
|
left: -4000%;
|
|
.ktp_630_wrap
|
|
_wh(15%, auto)
|
|
.ktp_630_wrap_1
|
|
left 10%
|
|
top 47%
|
|
.ktp_630_wrap_2
|
|
left auto
|
|
right 10%
|
|
top 47%
|
|
.ktp_630_wrap_3
|
|
left 10%
|
|
top 75%
|
|
.ktp_630_wrap_4
|
|
left auto
|
|
right 10%
|
|
top 75%
|
|
.yj_1600_block_1
|
|
position absolute
|
|
left: 5%;
|
|
top 3%
|
|
_wh(28%, 32%)
|
|
.yj_1600_block_2
|
|
left 38%
|
|
.weilan_1600_wrap
|
|
_wh(100%, 66%)
|
|
top auto
|
|
bottom 0
|
|
.slw_1600_wrap
|
|
_wh(19%, auto)
|
|
.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%
|
|
.yj_1600_wrap_1
|
|
_wh(69%, auto)
|
|
left auto
|
|
right 0
|
|
.qzj_1600_wrap
|
|
_wh(22%, auto)
|
|
left auto
|
|
right 0
|
|
top auto
|
|
bottom 0
|
|
.jcj_1600_wrap
|
|
_wh(27%, auto)
|
|
left 39%
|
|
top 10%
|
|
.robot_1600_wrap
|
|
_wh(1%, 1%)
|
|
left: 49%;
|
|
top: 73%;
|
|
img
|
|
position: absolute;
|
|
width: 5000%;
|
|
height: auto;
|
|
top: -1200%;
|
|
left: -4000%;
|
|
.ktp_1600_wrap
|
|
_wh(17%, auto)
|
|
.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
|
|
_wh(34%, 52%)
|
|
left auto
|
|
top auto
|
|
right 9%
|
|
bottom 6%
|
|
.weilan_2500_wrap
|
|
_wh(80%, 66%)
|
|
left auto
|
|
right 0
|
|
.slw_2500_wrap
|
|
_wh(16%, auto)
|
|
top auto
|
|
bottom 0
|
|
left 74%
|
|
.yj_2500_wrap
|
|
_wh(40%, auto)
|
|
top: 38%;
|
|
left: auto;
|
|
right: 4%;
|
|
.ktp_yyj_wrap_1
|
|
_wh(19%, auto)
|
|
_fj(flex-start)
|
|
flex-wrap wrap
|
|
top: 33%;
|
|
left: -1%;
|
|
.ktp_yyj_wrap_2
|
|
width: 9.5%;
|
|
top: 76%;
|
|
left: 8%;
|
|
.ktp_yyj_wrap_3
|
|
width: 13%;
|
|
top: 88%;
|
|
left: 18%;
|
|
.ktp_yyj_1
|
|
width 50%
|
|
img
|
|
_wh(100%, auto)
|
|
.jzj_2500_wrap
|
|
_wh(36%, auto)
|
|
left auto
|
|
right 0
|
|
top 38%
|
|
.jcj_2500_wrap
|
|
_wh(40%, auto)
|
|
left 50%
|
|
top 22%
|
|
.robot_2500_wrap
|
|
_wh(1%, 1%)
|
|
left: 60%;
|
|
top: 13%;
|
|
transform: rotate(227deg)
|
|
img
|
|
position: absolute;
|
|
width: 4000%;
|
|
height: auto;
|
|
top: -600%;
|
|
left: -3200%;
|
|
.ktp_2500_wrap
|
|
_wh(14%,auto)
|
|
.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
|
|
_wh(100%, 100%)
|
|
_fj(center)
|
|
flex-wrap wrap
|
|
.lz_hj
|
|
_wh(25%, 40%)
|
|
img
|
|
_wh(100%, 100%)
|
|
.lz_hlj_wrap
|
|
_wh(100%, 100%)
|
|
.lz_wrap
|
|
_wh(100%, 40%)
|
|
_fj()
|
|
.hlj_wrap
|
|
height 60%
|
|
.lz_inner
|
|
_wh(80%, 100%)
|
|
_fj(flex-start)
|
|
.lz_s_inner
|
|
_wh(17%, 100%)
|
|
_fj(flex-start)
|
|
margin-left 3%
|
|
.lz_s_border
|
|
border 1px solid #465e7b
|
|
border-bottom 0
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
.hlj_s_border
|
|
border 1px solid #465e7b
|
|
border-top 0
|
|
border-bottom-right-radius: 5px;
|
|
border-bottom-left-radius: 5px
|
|
.lz
|
|
_wh(calc(100% / 12), 100%)
|
|
_fj(center)
|
|
img
|
|
_wh(40%, auto)
|
|
.lz_s
|
|
_wh(calc(100% / 2), 100%)
|
|
_fj(center)
|
|
img
|
|
_wh(32%, auto)
|
|
.hlj
|
|
img
|
|
_wh(70%, auto)
|
|
left 15%
|
|
.hlj_s
|
|
img
|
|
_wh(56%, auto)
|
|
left 22%
|
|
.ktp_yao_front_wrap
|
|
_wh(38%, auto)
|
|
top: 52%;
|
|
left: 10%;
|
|
_fj(flex-start)
|
|
flex-wrap: wrap
|
|
.ktp_yao_front
|
|
_wh(calc(100% / 14), auto)
|
|
.cpj_ssx_wrap
|
|
_wh(15%, auto)
|
|
left: 75%;
|
|
top: 48%;
|
|
.ssx_wrap
|
|
_wh(100%, auto)
|
|
_fj()
|
|
.ssx
|
|
width 20%
|
|
img
|
|
_wh(100%, auto)
|
|
.cpj_wrap
|
|
_wh(18%, auto)
|
|
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)
|
|
_wh(18.5%, 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)
|
|
_wh(20.5%, 19%)
|
|
border-top-left-radius 0
|
|
.rotate_1
|
|
animation rotate_1 1.5s linear 1.5s infinite alternate-reverse
|
|
@keyframes rotate_1 {
|
|
0% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
10% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
90% {
|
|
transform: rotateZ(45deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(45deg)
|
|
}
|
|
}
|
|
.rotate_2
|
|
animation rotate_2 1.5s linear 1.5s infinite alternate-reverse
|
|
@keyframes rotate_2 {
|
|
0% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
10% {
|
|
transform: rotateZ(0deg)
|
|
}
|
|
90% {
|
|
transform: rotateZ(-45deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(-45deg)
|
|
}
|
|
}
|
|
.rotate_3
|
|
animation rotate_3 1.5s linear 1.5s infinite alternate-reverse
|
|
@keyframes rotate_3 {
|
|
0% {
|
|
transform: rotateZ(145deg)
|
|
}
|
|
10% {
|
|
transform: rotateZ(145deg)
|
|
}
|
|
90% {
|
|
transform: rotateZ(110deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(110deg)
|
|
}
|
|
}
|
|
.rotate_4
|
|
animation rotate_4 1.5s linear 1.5s infinite alternate-reverse
|
|
@keyframes rotate_4 {
|
|
0% {
|
|
transform: rotateZ(227deg)
|
|
}
|
|
10% {
|
|
transform: rotateZ(227deg)
|
|
}
|
|
90% {
|
|
transform: rotateZ(190deg)
|
|
}
|
|
100% {
|
|
transform: rotateZ(190deg)
|
|
}
|
|
}
|
|
</style>
|