<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_2">
      <div class="machine_combine">
        <div class="p_device ddxt_wrap_1" v-for="(e, i) in [1, 1]" :key="i" :class="'ddxt_wrap_' + (i +1)">
          <div class="p_device weilan_ddxt_wrap_1">
            <img class="device_img" src="../../../images/device/wl_cmd_1.png" alt="">
          </div>
          <div class="p_device weilan_ddxt_wrap_2">
            <img class="device_img" src="../../../images/device/wl_cmd_1.png" alt="">
          </div>
          <div class="p_device ssj_wrap">
            <img class="device_img" src="../../../images/device/ssj_gray.png" alt="">
          </div>
          <div class="p_device ktp_cmd_wrap" 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 cmdssj_1">
            <img class="device_img" src="../../../images/device/cmdssj_gray.png" alt="">
          </div>
          <div class="p_device cmdssj_1 cmdssj_2">
            <img class="device_img" src="../../../images/device/cmdssj_gray.png" alt="">
          </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 robot_cmd_wrap_2 rotate_3">
            <img class="device_img" src="../../../images/device/robot_cmd_green.png" alt="">
          </div>
        </div>
        <div class="rgv_line_wrap">
          <div class="rgv_line_1">
            <div class="rgv_line_begine"></div>
            <div class="rgv_line_begine rgv_line_end"></div>
            <div class="rgv_line_node_wrap">
              <div class="rgv_line_node"  v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="i"></div>
            </div>
          </div>
          <div class="rgv_line_1 rgv_line_2">
            <div class="rgv_line_begine"></div>
            <div class="rgv_line_begine rgv_line_end"></div>
            <div class="rgv_line_node_wrap">
              <div class="rgv_line_node"  v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="i"></div>
            </div>
          </div>
          <div class="rgv_line_3"></div>
        </div>
        <div class="p_device rgvct">
          <img class="device_img" src="../../../images/device/rgv_ct.png" alt="">
        </div>
        <div class="p_device ggtj_wrap ggtj_wrap_1">
          <img class="device_img" src="../../../images/device/ggtssj_yellow.png" alt="" v-for="(e,i) in [1,2]" :key="i">
        </div>
        <div class="p_device ggtj_wrap ggtj_wrap_2">
          <img class="device_img" src="../../../images/device/ggtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
          <div class="p_device fmj_wrap">
            <img class="device_img" src="../../../images/device/fmj.png" alt="">
          </div>
        </div>
        <div class="p_device ggtj_wrap ggtj_wrap_3">
          <img class="device_img" src="../../../images/device/ggtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3,4,5,6,1,2,3,4,5,]" :key="i">
        </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)">
          <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>
        </div>
        <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)">
            <device-pop
              type="ssx"
              :pkId="pkId"
              :data="e"
              @closePop="closePop"
            ></device-pop>
          </div>
        </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>
        </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>
        <div class="p_device ktp_yao_back_wrap">
          <div class="ktp_yao_back" v-for="e in backWarehouse" :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)">
            <device-pop
            type="tp"
            :pkId="pkId"
            :data="e"
            direction="down"
            @closePop="closePop"
          ></device-pop>
          </div>
        </div>
        <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)">
            <device-pop
              type="tp"
              :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_block" v-for="e in press.slice(0,2)" :key="e.pkid" >
          <!-- <div class="p_device slw_630_wrap" v-for="(el, j) in e.loadLocation" :key="el.equipment" :class="'slw_630_wrap_' + (j+1)">
            <img v-show="el.status !== 4 && (el.pointStatus === '2' || el.pointStatus === '3')" class="device_img" src="../../../images/device/lz_green.png" alt="" @click="getInfo(el)">
            <img v-show="el.status !== 4 && (el.pointStatus === '1')" class="device_img" src="../../../images/device/lz_gray.png" alt="" @click="getInfo(el)">
            <img v-show="el.status === 4" class="device_img" src="../../../images/device/lz_red.png" alt="" @click="getInfo(el)">
            <device-pop
              type="lz"
              :pkId="pkId"
              :data="el"
              @closePop="closePop"
            ></device-pop>
          </div> -->
          <div class="p_device slw_630_wrap slw_630_wrap_3">
            <img class="device_img" src="../../../images/device/lz_green.png" alt="">
          </div>
          <div class="p_device slw_630_wrap slw_630_wrap_4">
            <img class="device_img" src="../../../images/device/lz_green.png" alt="">
          </div>
          <div class="p_device weilan_630_wrap">
            <img class="device_img" src="../../../images/device/630/wl.png" alt="">
          </div>
          <div v-for="(el, j) in e.pressMachine" :key="el.equipment">
            <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 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>
          <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 class="machine_block machine_block_4">
      <div class="machine_combine">
        <div class="yj_630_block yj_630_block_3" v-for="e in press.slice(2,3)" :key="e.pkid">
          <div class="p_device slw_630_wrap" v-for="(el, j) in e.loadLocation" :key="el.equipment" :class="'slw_630_wrap_' + (j+1)">
            <img v-show="el.status !== 4 && (el.pointStatus === '2' || el.pointStatus === '3')" class="device_img" src="../../../images/device/lz_green.png" alt="" @click="getInfo(el)">
            <img v-show="el.status !== 4 && (el.pointStatus === '1')" class="device_img" src="../../../images/device/lz_gray.png" alt="" @click="getInfo(el)">
            <img v-show="el.status === 4" class="device_img" src="../../../images/device/lz_red.png" alt="" @click="getInfo(el)">
            <device-pop
              type="lz"
              :pkId="pkId"
              :data="el"
              @closePop="closePop"
            ></device-pop>
          </div>
          <div class="p_device slw_630_wrap slw_630_wrap_3">
            <img class="device_img" src="../../../images/device/lz_green.png" alt="">
          </div>
          <div class="p_device slw_630_wrap slw_630_wrap_4">
            <img class="device_img" src="../../../images/device/lz_green.png" alt="">
          </div>
          <div class="p_device weilan_630_wrap">
            <img class="device_img" src="../../../images/device/630/wl.png" alt="">
          </div>
          <div v-for="(el, j) in e.pressMachine" :key="el.equipment">
            <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 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>
          <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 class="yj_1250_block" v-for="(e, i) in [1, 1, 1]" :key="i">
          <div class="p_device weilan_630_wrap">
            <img class="device_img" src="../../../images/device/630/wl.png" alt="">
          </div>
          <div class="p_device slw_630_wrap slw_1250_wrap_1">
            <img class="device_img" src="../../../images/device/lz_green.png" alt="">
          </div>
          <div class="p_device slw_630_wrap slw_1250_wrap_2">
            <img class="device_img" src="../../../images/device/lz_green.png" alt="">
          </div>
          <div class="p_device yj_1250_wrap">
            <img class="device_img" src="../../../images/device/630/yj_gray.png" alt="">
          </div>
          <div class="p_device robot_1250_wrap">
            <img class="device_img" src="../../../images/device/robot_2500_gray.png" alt="">
          </div>
          <div class="p_device ktp_1250_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'ktp_1250_wrap_' + (i+1)">
            <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
          </div>
        </div>
        <div class="yyj_block">
          <div class="p_device weilan_630_wrap">
            <img class="device_img" src="../../../images/device/630/wl.png" alt="">
          </div>
          <div class="p_device slw_630_wrap slw_yyj_wrap">
            <div class="slw_yyj" v-for="(e, i) in [1,1,1,1]" :key="i">
              <img class="device_img" src="../../../images/device/lz_green.png" alt="">
            </div>
          </div>
          <div class="p_device yyj_wrap">
            <img class="device_img" src="../../../images/device/2500/yj_gray.png" alt="">
          </div>
          <div class="p_device robot_1250_wrap">
            <img class="device_img" src="../../../images/device/robot_2500_gray.png" alt="">
          </div>
          <div class="p_device ktp_1250_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'ktp_1250_wrap_' + (i+1)">
            <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
          </div>
        </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(2, 4)" :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(2, 4)" :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 class="machine_block_7">
      <div class="p_device klw_wraper_1">
        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
      <div class="p_device klw_wraper_2">
        <div class="klw" v-for="(e, i) in [1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
      <div class="p_device klw_wraper_3">
        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
      <div class="p_device klw_wraper_4">
        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
      <div class="p_device klw_wraper_5">
        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import TCanvas from './canvas.vue'
import DevicePop from './devicepop.vue'
// import {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%
    left 0
    z-index 1
    display: flex
    justify-content space-between
    align-items center
.status_item
    display: flex
    justify-content space-between
    align-items center
    margin-left 20px
.status_tip
    width 15px
    height 15px
    border-radius 50%
    margin-right 10px
    box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
.status_name
    font-size 16px
    line-height 1
    color #fff
.machine_block
  position absolute
  border: 1px solid #00c8da;
  padding: 12px;
  box-shadow: 0 0 15px #0087ac;
  border-radius: 10px;
.machine_block_1
  width: 72%;
  height: 25%;
  right: 2%;
  top: 32%;
.machine_block_2
  width: 63%;
  height: 26%;
  left: auto
  right: 2%
  top: 4%;
.machine_block_3
  width 28%
  height 22%
  left 2%
  top 60%
  padding 12px
.machine_block_4
  width: 64%;
  height: 22%;
  left: auto;
  right: 2%;
  top: 60%;
.machine_block_5
  width 15%
  left 5%
  top 14%
  padding 20px
  border none
  box-shadow none
.machine_block_6
  width 96%
  height 10%
  top auto
  bottom 2%
  left 2%
.machine_combine
  position relative
  width 100%
  height 100%
  display flex
  justify-content space-between
  align-items center
.p_device
  position absolute
  top 0
  left 0
.device_img
  width 100%
  height 100%
.yjbyx_1
  width 4.5%
  height 80%
  top 10%
  left 2%
  img
    transform rotate(180deg)
.yjbyx_2
  width 4.5%
  height 80%
  left auto
  right 0
  top 10%
.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
  width 86%
  height 50px
.yao_layer1
  position absolute
  left 1%
  top 0
  width 98%
  height 50%
  transform: skew(26deg);
.yao_layer1_1
  background-image: linear-gradient(to bottom, #00ff00, #b2fbb2);
  box-shadow: inset 1px 3px 6px 0px #04b004;
  border: 2px solid #028802;
.yao_layer1_2
  background-image: linear-gradient(to bottom, #bfbfbf, #f1f1f1);
  box-shadow: inset 1px 3px 6px 0px #838282;
  border: 2px solid #8e8a8a;
.yao_layer2
  position: absolute;
  left: 2%;
  top: 50%;
  width: 98%;
  height: 50%;
  background-color: #CCC4BB;
  border-top: 0;
  padding-left 10px
  p
    line-height: 22px;
    font-size: 20px;
    color: #F04826;
    transform: scale(1, 0.7);
    text-shadow 2px 2px 2px rgba(0, 0, 0, 0.3);
.yao_layer2_1
  border: 2px solid #028802;
.yao_layer2_2
  border: 2px solid #8e8a8a;
.yao_layer3
  position absolute
  width: 10%;
  height: 70%;
  top: 0;
  left: 0;
  background-color: #A0927E;
.yao_1
  left 8%
  top 20%
.yao_2
  left 8%
  bottom 30%
.yytsj_wrap
  width 50%
  left 25%
.yygcj_wrap
  width 50%
  top auto
  bottom 0
  left 25%
.ktp_yao_back_wrap
  left 0
  top auto
  bottom 0
  width 100%
  height: 20px
.ktp_yao_front_wrap
  width 88%
  left 7%
  top 0
.ktp_yao_back
  float left
  width 27px
  height 20px
  img
    height auto
.dpj_wrap
  width 15%
  left 18%
  top auto
  bottom 9%
.ltssj_wrap
  height 20px
  left -12px
  top: auto
  bottom 12%
.ltssj
  float left
  width 27px
.ddxt_wrap_1
  width 45%
  height 49%
.ddxt_wrap_2
  top auto
  bottom 0
.weilan_ddxt_wrap_1
  width 25%
  height 100%
.weilan_ddxt_wrap_2
  width 35%
  height 100%
  left auto
  right 0
  img
    transform rotate(180deg)
.ssj_wrap
  width: 60%;
  top: 40%;
  left: 20%;
.ktp_cmd_wrap
  width 18.31px
.ktp_cmd_wrap_1
  left: 6%;
  top: 6%;
.ktp_cmd_wrap_2
  left 6%
  top 72%
.ktp_cmd_wrap_3
  left: 89.5%;
  top: 5%;
.ktp_cmd_wrap_4
  left: 89.5%;
  top: 42%;
.cmdssj_1
  width 27.5px
  height 22px
  left 82%
  top 16%
.cmdssj_2
  top 70%
  img
    transfrom rotate(180deg)
.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 88%
.fmjxt_wrap
  width 9%
  left 88%
  top 10%
.yj_630_block
  position relative
  width 48%
  height 100%
.yj_630_block_3
  width 21%
.yj_630_wrap_1
  width: 58.61px
  top: 59%;
.yj_630_wrap_2
  left auto
  right 0
.slw_630_wrap
  width: 21.97px;
  img
    height auto
.slw_630_wrap_1
  left: 14%;
  top: 74%;
.slw_630_wrap_2
  left: 14%;
  top: 87%;
.slw_630_wrap_3
  left 67%
  top: 74%;
.slw_630_wrap_4
  left 67%
  top: 87%;
.slw_1250_wrap_1
  left: 30%;
  top: 74%;
.slw_1250_wrap_2
  left: 30%;
  top: 87%;
.mdssj_630_wrap_1
  width 46.41px
  left 10%
  top 49%
.mdssj_630_wrap_2
  left auto
  right 10%
.lmyzj_630_wrap_1
  width 42.73px
  left 36%
  top 42%
  img
    transform rotate(180deg)
.weilan_630_wrap
  width 70%
  height 45%
  left 15%
  img
    transform rotate(180deg)
.robot_630_wrap
  width 1px
  height 1px
  left: 47%;
  top: 22%;
  img
      position absolute
      width: 24.38px
      height: auto;
      top: -400%;
      left: -900%;
.ktp_630_wrap
    width 18.31px
.ktp_630_wrap_1
  left 21%
  top 4%
.ktp_630_wrap_2
  left auto
  right 21%
  top 4%
.ktp_630_wrap_3
  left 21%
  top 22%
.ktp_630_wrap_4
  left auto
  right 21%
  top 22%
.yj_1600_block_1
  position relative
  width 18%
  height 100%
.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_1250_wrap
  width: 58.61px;
  top: 59%;
  left 14%
.robot_1250_wrap
  width 1%
  height 1%
  left: 49%;
  top: 24%;
  img
    position: absolute;
    width: 2343%;
    height: auto;
    top: -500%;
    left: -1200%;
.ktp_1250_wrap
  width: 24.7%;
  top 7%
.ktp_1250_wrap_1
  left: 17%;
.ktp_1250_wrap_2
  left: auto;
  right: 17%;
.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
  position relative
  width 18%
  height 100%
.yyj_block
  position relative
  width 21%
  height 100%
.slw_yyj_wrap
  top 50%
  left 80%
.slw_yyj
  height 25.03px
.yyj_wrap
  width 54%
  height 28%
  top 48%
  left 16%
.yj_2500_block
  position relative
  width 21%
  height 100%
.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
  width 2.7%
  left: 11%;
  top: 38%;
.ssx_wrap
  width 100%
.ssx
  width 100%
  height 28.77px
.cpj_wrap
  width 18%
  top: -51%;
  left: 20%;
.agv_1
  width 17%
  left 16%
  top -30%
  img
    width 100%
.agv_2
  left 59%
.rgv_line_wrap
  position absolute
  top 0
  left 46%
  width 5.5%
  height 100%
.rgv_line_1
  position absolute
  top 6%
  left 0
  width 3px
  height 88%
  background-color #b2b2b2
  margin 0 auto
  box-shadow 0px 3px 10px #333333
  _fj(row)
.rgv_line_begine
  position absolute
  width 10px
  height 3px
  top 0
  left -3.5px
  background-color #b2b2b2
  border-radius 50%
  box-shadow 0px 3px 10px #333333
.rgv_line_end
  top auto
  bottom 0
.rgv_line_node_wrap
  position absolute
  width 6px
  left -1.5px
  height 100%
  display flex
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
.rgv_line_node
  width 6px
  height 3px
  background-color #b2b2b2
  border-radius 50%
  box-shadow 0px 1px 4px #333333
.rgv_line_2
  left auto
  right 0
.rgv_line_3
  position absolute
  top 0
  left 50%
  z-index 4
  width 2px
  height 100%
  background-color #b2b2b2
  box-shadow 0px 3px 10px #333333
.rgvct
  width 5.5%
  top 10%
  left: 46%;
  z-index: 100;
.ggtj_wrap
  display flex
  justify-content flex-start
  img
    width 27px
    height auto
.ggtj_wrap_1
  left: 51%;
  top: 18%;
.ggtj_wrap_2
  left: 51%;
  top: 34%;
.ggtj_wrap_3
  left: 51%;
  top: 64%;
.fmj_wrap
  height: 122%;
  left: 14%;
  img
    height 100%
    width auto
.machine_block_7
  position absolute
  width: 100%;
  height: 4%;
  top: auto;
  bottom: 12%;
.klw_wraper_1
  left 2%
.klw_wraper_2
  left 18%
.klw_wraper_3
  left 49%
.klw_wraper_4
  left 65%
.klw_wraper_5
  left 81%
.klw
  width 25.03px
  height 21.97px
  float left
.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>
