<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>
