<template>
  <div class="center_wrapper">
    <!-- <t-canvas></t-canvas> -->
    <div class="status_wrap">
      <div class="status_item">
          <div class="status_tip green"></div>
          <div class="status_name">运行</div>
      </div>
      <div class="status_item">
          <div class="status_tip yellow"></div>
          <div class="status_name">暂停</div>
      </div>
      <div class="status_item">
          <div class="status_tip gray"></div>
          <div class="status_name">停机</div>
      </div>
      <div class="status_item">
          <div class="status_tip red"></div>
          <div class="status_name">故障</div>
      </div>
    </div>
    <div class="m_block m_block_2">
      <div class="m_wraper">
        <div class="p_device ddxt_wrap_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="m_block m_block_1">
      <div class="m_wraper">
        <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 jyw_wrap">
          <div class="p_device" v-for="(e, i) in  conveyorLine" :key="e.equipment" :class="'jyw' + (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_green.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_green.png" alt="" @click="getInfo(e)">
            <device-pop
              type="ssx"
              :pkId="pkId"
              :data="e"
              @closePop="closePop"
            ></device-pop>
          </div>
        </div>
        <div class="p_device dpw_wrap">
          <img class="device_img" src="../../../images/device/ktp_green.png" alt="">
        </div>
        <div class="p_device cpj_wrap">
          <img v-show="trayStacker.status === 1" class="device_img" src="../../../images/device/cpj_green.png" alt="" @click="getInfo(trayStacker)">
          <img v-show="trayStacker.status === 2" class="device_img" src="../../../images/device/cpj_yellow.png" alt="" @click="getInfo(trayStacker)">
          <img v-show="trayStacker.status === 3" class="device_img" src="../../../images/device/cpj_gray.png" alt="" @click="getInfo(trayStacker)">
          <img v-show="trayStacker.status === 4" class="device_img" src="../../../images/device/cpj_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_enter_wrap">
          <div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="i">
            <img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
          </div>
        </div>
        <div class="p_device ktp_yao_out_wrap">
          <div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="i">
            <img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="m_block_8">
      <div class="p_device rgcdw_wrap">
        <div class="rgcdw" v-for="(e, i) in [1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/hjktp.png" alt="">
        </div>
      </div>
      <div class="p_device cdw_wrap cdw_wrap_1">
        <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/hjktp.png" alt="">
        </div>
      </div>
      <div class="p_device cdw_wrap cdw_wrap_2">
        <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/hjktp.png" alt="">
        </div>
      </div>
      <div class="p_device cdw_wrap cdw_wrap_3">
        <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/hjktp.png" alt="">
        </div>
      </div>
      <div class="p_device cdw_wrap cdw_wrap_4">
        <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/hjktp.png" alt="">
        </div>
      </div>
      <div class="p_device cdw_wrap cdw_wrap_5">
        <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/hjktp.png" alt="">
        </div>
      </div>
      <div class="p_device cdw_wrap cdw_wrap_6">
        <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/hjktp.png" alt="">
        </div>
      </div>
    </div>
    <div class="m_block m_block_3">
      <div class="m_wraper">
        <div class="yj_block" v-for="(e, i) in [1,1]" :key="i" >
          <div class="p_device weilan_630_wrap">
            <img class="device_img" src="../../../images/device/630/wl.png" alt="">
          </div>
          <div class="p_device flexwrap slw_630_wrap">
            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i">
              <img class="device_img" src="../../../images/device/lz_green.png" alt="">
            </div>
          </div>
          <div class="p_device flexwrap ktp_630_wrap">
            <div class="ktp_630" v-for="(e, i) in [1,1,1,1]" :key="i">
              <img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
            </div>
          </div>
          <div class="p_device yj_630_wrap">
            <div class="yj_630" v-for="(e, i) in [1,1]" :key="i">
              <img class="device_img" src="../../../images/device/yj_gray.png">
            </div>
          </div>
          <div class="p_device robot_630_wrap rotate_1">
            <img src="../../../images/device/robot_2500_green.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="m_block m_block_4">
      <div class="m_wraper">
        <div class="yj_block">
          <div class="p_device weilan_630_wrap">
            <img class="device_img" src="../../../images/device/630/wl.png" alt="">
          </div>
          <div class="p_device flexwrap slw_630_wrap">
            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i">
              <img class="device_img" src="../../../images/device/lz_green.png" alt="">
            </div>
          </div>
          <div class="p_device flexwrap ktp_630_wrap">
            <div class="ktp_630" v-for="(e, i) in [1,1,1,1]" :key="i">
              <img class="device_img" src="../../../images/device/ktpv_green.png" alt="">
            </div>
          </div>
          <div class="p_device yj_630_wrap">
            <div class="yj_630" v-for="(e, i) in [1,1]" :key="i">
              <img class="device_img" src="../../../images/device/yj_gray.png">
            </div>
          </div>
          <div class="p_device robot_630_wrap rotate_1">
            <img src="../../../images/device/robot_2500_green.png" alt="">
          </div>
        </div>
        <div class="yj_block yj_1250_block" v-for="(e, i) in [1, 1]" :key="i">
          <div class="p_device weilan_630_wrap">
            <img class="device_img" src="../../../images/device/630/wl.png" alt="">
          </div>
          <div class="p_device flexwrap slw_630_wrap slw_1250_wrap">
            <div class="slw_630" v-for="(e, i) in [1,1]" :key="i">
              <img class="device_img" src="../../../images/device/lz_green.png" alt="">
            </div>
          </div>
          <div class="p_device flexwrap ktp_630_wrap ktp_yyj">
            <div class="ktp_630" v-for="(e, i) in [1,1]" :key="i">
              <img class="device_img" src="../../../images/device/ktp_green.png" alt="">
            </div>
          </div>
          <div class="p_device yj_630_wrap">
            <div class="yj_630 yj_1250" v-for="(e, i) in [1]" :key="i">
              <img class="device_img" src="../../../images/device/yj_gray.png">
            </div>
          </div>
          <div class="p_device robot_630_wrap rotate_1">
            <img src="../../../images/device/robot_2500_green.png" alt="">
          </div>
        </div>
        <div class="yj_block yyj_block" v-for="(e, i) in [1, 1]" :key="i">
          <div class="p_device weilan_630_wrap">
            <img class="device_img" src="../../../images/device/630/wl.png" alt="">
          </div>
          <div v-show="i === 0" class="p_device flexwrap slw_630_wrap slw_1250_wrap">
            <div class="slw_630" v-for="(e, i) in [1,1]" :key="i">
              <img class="device_img" src="../../../images/device/lz_green.png" alt="">
            </div>
          </div>
          <div v-show="i === 1" class="p_device flexwrap slw_630_wrap slw_yyj_wrap">
            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i">
              <img class="device_img" src="../../../images/device/lz_green.png" alt="">
            </div>
          </div>
          <div class="p_device flexwrap ktp_630_wrap ktp_yyj">
            <div class="ktp_630" v-for="(e, i) in [1,1]" :key="i">
              <img class="device_img" src="../../../images/device/ktp_green.png" alt="">
            </div>
          </div>
          <div class="p_device yj_630_wrap yyj_wrap">
            <div class="yj_630" v-for="(e, i) in [1]" :key="i">
              <img class="device_img" src="../../../images/device/2500/yj_gray.png">
            </div>
          </div>
          <div class="p_device robot_630_wrap rotate_1">
            <img src="../../../images/device/robot_2500_green.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="m_block m_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="m_block m_block_6">
      <div class="m_wraper">
        <div class="lzhlj_wrap">
          <div class="lz_wrap">
            <div class="lz" v-for="e in unloadLocation.slice(0, 6)" :key="e.equipment">
              <img class="device_img" v-show="e.status === 1" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(e)">
              <img class="device_img" v-show="e.status === 2" src="../../../images/device/lz_hj_yellow.png" alt="" @click="getInfo(e)">
              <img class="device_img" v-show="e.status === 3" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(e)">
              <img class="device_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 class="lz" v-for="(e,i) in [1,1]" :key="i" style="opacity: 0.1">
              <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
            </div>
          </div>
          <div class="hlj_wrap">
            <div class="hlj" v-for="e in mixingMachine.slice(0, 6)" :key="e.equipment">
              <img class="device_img" v-show="e.status === 1" src="../../../images/device/hlj_green.png" alt="" @click="getInfo(e)">
              <img class="device_img" v-show="e.status === 2" src="../../../images/device/hlj_yellow.png" alt="" @click="getInfo(e)">
              <img class="device_img" v-show="e.status === 3" src="../../../images/device/hlj_gray.png" alt="" @click="getInfo(e)">
              <img class="device_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 class="hlj" v-for="(e,i) in [1,1]" :key="i" style="opacity: 0.1">
              <img class="device_img" src="../../../images/device/hlj_gray.png" alt="">
            </div>
          </div>
        </div>
        <div class="cbj_wrap">
          <div class="lz_wrap">
            <div class="lz" v-for="e in unloadLocation.slice(0, 1)" :key="e.equipment">
              <img class="device_img" v-show="e.status === 1" src="../../../images/device/lz_hj_green.png" alt="" @click="getInfo(e)">
              <img class="device_img" v-show="e.status === 2" src="../../../images/device/lz_hj_yellow.png" alt="" @click="getInfo(e)">
              <img class="device_img" v-show="e.status === 3" src="../../../images/device/lz_hj_gray.png" alt="" @click="getInfo(e)">
              <img class="device_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="hlj_wrap">
            <div class="hlj" v-for="e in mixingMachine.slice(0, 1)" :key="e.equipment">
              <img class="device_img" v-show="e.status === 1" src="../../../images/device/hlj_green.png" alt="" @click="getInfo(e)">
              <img class="device_img" v-show="e.status === 2" src="../../../images/device/hlj_yellow.png" alt="" @click="getInfo(e)">
              <img class="device_img" v-show="e.status === 3" src="../../../images/device/hlj_gray.png" alt="" @click="getInfo(e)">
              <img class="device_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>
      </div>
    </div>
    <div class="m_block_7">
      <div class="p_device klw_wraper_1">
        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
      <div class="p_device klw_wraper_2">
        <div class="klw" v-for="(e, i) in [1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
      <div class="p_device klw_wraper_3">
        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
      <div class="p_device klw_wraper_4">
        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
      <div class="p_device klw_wraper_5">
        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i">
          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import TCanvas from './canvas.vue'
import DevicePop from './devicepop.vue'
// import {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
.status_wrap
    position absolute
    top 2%
    left 0
    z-index 1
    display: flex
    justify-content space-between
    align-items center
.status_item
    display: flex
    justify-content space-between
    align-items center
    margin-left 20px
.status_tip
    width 15px
    height 15px
    border-radius 50%
    margin-right 10px
    box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
.status_name
    font-size 16px
    line-height 1
    color #fff
.m_block
  position absolute
  border: 1px solid #00c8da;
  padding: 12px;
  box-shadow: 0 0 15px #0087ac;
  border-radius: 10px;
.m_wraper
  position relative
  width 100%
  height 100%
  display flex
  justify-content space-between
  align-items center
.p_device
  position absolute
  top 0
  left 0
  display inline-flex
  justify-content space-between
.device_img
  width 100%
  height auto
// 分拣拆垛位start
.m_block_2
  width: 55%;
  height: 22%;
  left: auto
  right: 2%
  top: 7%;
.ddxt_wrap_1
  width 30%
  height 49%
.ddxt_wrap_2
  top auto
  bottom 0
.weilan_ddxt_wrap_1
  width 45%
  height 100%
.weilan_ddxt_wrap_2
  width 45%
  height 100%
  left auto
  right 0
  img
    transform rotate(180deg)
.ssj_wrap
  width: 40%;
  top: 40%;
  left: 30%;
.ktp_cmd_wrap
  width 18.31px
.ktp_cmd_wrap_1
  left: 1%;
  top: 6%;
.ktp_cmd_wrap_2
  left 1%
  top 67%
.cmdssj_1
  width 27.5px
  height 22px
  left 82%
  top 16%
.cmdssj_2
  top 70%
  img
    transform rotate(180deg)
.robot_cmd_wrap_1
  width 1px
  height 1px
  left: 14%;
  top: 50%;
  img
    position absolute
    width: 37px;
    height: auto;
    top: -11px;
    left: -7px;
.robot_cmd_wrap_2
  left 82%
  top 54%
  img
    transform rotate(180deg)
    top: -9px;
    left: -27px;
.rgv_line_wrap
  position absolute
  top 0
  left 31%
  width 5.5%
  height 100%
.rgv_line_1
  position absolute
  top 6%
  left 0
  width 3px
  height 88%
  background-color #b2b2b2
  margin 0 auto
  box-shadow 0px 3px 10px #333333
  _fj(row)
.rgv_line_begine
  position absolute
  width 10px
  height 3px
  top 0
  left -3.5px
  background-color #b2b2b2
  border-radius 50%
  box-shadow 0px 3px 10px #333333
.rgv_line_end
  top auto
  bottom 0
.rgv_line_node_wrap
  position absolute
  width 6px
  left -1.5px
  height 100%
  display flex
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
.rgv_line_node
  width 6px
  height 3px
  background-color #b2b2b2
  border-radius 50%
  box-shadow 0px 1px 4px #333333
.rgv_line_2
  left auto
  right 0
.rgv_line_3
  position absolute
  top 0
  left 50%
  z-index 4
  width 2px
  height 100%
  background-color #b2b2b2
  box-shadow 0px 3px 10px #333333
.rgvct
  width 5.5%
  top 10%
  left: 31%;
  z-index: 100;
.ggtj_wrap
  display flex
  justify-content flex-start
  img
    width 27px
    height auto
.ggtj_wrap_1
  left: 36%;
  top: 18%;
.ggtj_wrap_2
  left: 36%;
  top: 37%;
.ggtj_wrap_3
  left: 36%;
  top: 64%;
.fmj_wrap
  height: 122%;
  left: 14%;
  img
    height 100%
    width auto
// 分拣拆垛位end
// 压机模块start
.m_block_3
  width 29%
  height 22%
  left 2%
  top 60%
  .yj_block
    width 48%
.m_block_4
  width 66%
  height 22%
  left auto
  right 2%
  top 60%
  .yj_block
    width 20%
    &:nth-child(1)
      width 21%
    &:nth-child(2), &:nth-child(3)
      width 16%
.yj_block
  position relative
  height 100%
.weilan_630_wrap
  width 70%
  height 45%
  left 15%
  img
    transform rotate(180deg)
.slw_630_wrap
  width 100%
  top auto
  bottom 0
.slw_630
  display inline-flex
  width 50%
  img
    width 23px
    margin 0 auto
.slw_1250_wrap
  width 50%
  left 6%
  .slw_630
    width 100%
.slw_yyj_wrap
    width 50%
    left auto
    right 0
    .slw_630
      width 100%
.ktp_630_wrap
  width 94%
  left 3%
  top 4%
.ktp_630
  display inline-flex
  width 50%
  margin-bottom 10px
  img
    width 19px
    margin 0 auto
.ktp_yyj
  img
    width 26.78px
.yj_630_wrap
  width 100%
  height 20%
  top 47%
.yj_630
  position relative
  width 48%
  height 100%
  img
    height 100%
.yj_1250
  width 63%
.yyj_wrap
  height 27.5%
  top 40%
.robot_630_wrap
  width 18px
  height 18px
  left calc(50% - 9px)
  top 20%
  img
    position absolute
    width 23px
    height auto
    left -6px
// 压机模块end
// 叉车start
.m_block_5
  width 15%
  left 5%
  top 14%
  padding 20px
  border none
  box-shadow none
.agv_1
  width 17%
  left 16%
  top -30%
  img
    width 100%
.agv_2
  left 59%
// 叉车end
// 混料机start
.m_block_6
  width 96%
  height 10%
  top auto
  bottom 2%
  left 2%
.lzhlj_wrap
  width 60%
  padding 6px 0
.cbj_wrap
  width 10%
  padding 6px 2.5%
  border 2px solid #465e7b
  border-radius 5px
.lz_wrap
  width 100%
  height 40%
  display flex
  justify-content space-between
  align-items center
.hlj_wrap
  width 100%
  height 60%
  display flex
  justify-content space-between
  align-items center
.lz
  width 40px
  img
    position relative
    left 5px
    width 30px
.hlj
  width 40px
// 混料机end
// 窑start
.m_block_1
  width: 77%;
  height: 24%;
  right: 2%;
  top: 31%;
.yao_wrap
  position absolute
  width 80%
  height 50px
.yao_1
  left 15%
  top 22%
.yao_2
  left 15%
  bottom 22%
.yao_layer3
  position absolute
  width: 10%;
  height: 70%;
  top: 0;
  left: 0;
  background-color: #A0927E;
.yao_layer1
  position absolute
  left 1%
  top 0
  width 98%
  height 50%
  transform: skew(26deg);
.yao_layer1_1
  background-image: linear-gradient(to bottom, #00ff00, #b2fbb2);
  box-shadow: inset 1px 3px 6px 0px #04b004;
  border: 2px solid #028802;
.yao_layer1_2
  background-image: linear-gradient(to bottom, #bfbfbf, #f1f1f1);
  box-shadow: inset 1px 3px 6px 0px #838282;
  border: 2px solid #8e8a8a;
.yao_layer2
  position: absolute;
  left: 2%;
  top: 50%;
  width: 98%;
  height: 50%;
  background-color: #CCC4BB;
  border-top: 0;
  padding-left 10px
  p
    line-height: 22px;
    font-size: 20px;
    color: #F04826;
    transform: scale(1, 0.7);
    text-shadow 2px 2px 2px rgba(0, 0, 0, 0.3);
.yao_layer2_1
  border: 2px solid #028802;
.yao_layer2_2
  border: 2px solid #8e8a8a;
.jyw_wrap
  width 2.205%
  height 76%
  top: 21.1%
  left 8%
.jyw1
  top 15%
.jyw2
  top 38%
.jyw3
  top 62%
.jyw4
  top 86%
.dpw_wrap
  width: 4%;
  top: -27%;
  left: 15%;
.cpj_wrap
  width 6%
  top 80%
.yjbyx_1
  width: 4%;
  height: 76%;
  top: 22%;
  left: 10%;
.yjbyx_2
  width: 4%;
  height: 79%;
  left: auto;
  right: 0;
.ktp_yao_enter_wrap
  width 86%
  left auto
  top auto
  bottom 0
  right 0
.ktp_yao_out_wrap
  width 86%
  left: auto
  right: 4%;
.ktp_yao
  float left
  width calc(100% / 39)
  img
    height auto
// 窑end
// 困料货位start
.m_block_7
  position absolute
  width: 100%;
  height: 4%;
  top: auto;
  bottom: 12%;
.klw_wraper_1
  left 2%
.klw_wraper_2
  left 18%
.klw_wraper_3
  left 49%
.klw_wraper_4
  left 65%
.klw_wraper_5
  left 81%
.klw
  width 25.03px
  height 21.97px
  float left
// 困料货位end
// 货位start
.m_block_8
  position absolute
  width: 17%;
  height: 24%;
  top: 31%
  left: 2%
.rgcdw_wrap
  width 15%
  height: 70%;
  top: 15%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
.cdw_wrap
  width 15%
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .cdw
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 60%);
.cdw_wrap_1
  left 20%
  top 10%
.cdw_wrap_2
  left: 24%;
  top: 8%;
.cdw_wrap_3
  height 100%
  left: 50%
.cdw_wrap_4
  height 100%
  left: 54%;
  top: -2%;
.cdw_wrap_5
  height 100%
  left: 80%
.cdw_wrap_6
  height 100%
  left: 84%
  top: -2%
// 困料货位end
.rotate_1
  animation rotate_1 9s linear 1s infinite
@keyframes rotate_1 {
    0% {
      transform: rotateZ(20deg)
    }
    2% {
        transform: rotateZ(20deg)
    }
    8% {
        transform: rotateZ(60deg)
    }
    10% {
        transform: rotateZ(60deg)
    }
    18% {
      transform: rotateZ(20deg)
    }
    20% {
        transform: rotateZ(20deg)
    }
    28% {
      transform: rotateZ(100deg)
    }
    30% {
        transform: rotateZ(100deg)
    }
    43% {
      transform: rotateZ(-20deg)
    }
    50% {
        transform: rotateZ(-20deg)
    }
    58% {
      transform: rotateZ(-60deg)
    }
    60% {
        transform: rotateZ(-60deg)
    }
    68% {
      transform: rotateZ(-20deg)
    }
    70% {
        transform: rotateZ(-20deg)
    }
    78% {
      transform: rotateZ(-120deg)
    }
    80% {
        transform: rotateZ(-120deg)
    }
    93% {
      transform: rotateZ(20deg)
    }
    100% {
        transform: rotateZ(20deg)
    }
}
.rotate_2
  animation rotate_2 4s linear 1s infinite
@keyframes rotate_2 {
    0% {
      transform: rotateZ(-45deg)
    }
    3% {
        transform: rotateZ(-45deg)
    }
    17% {
        transform: rotateZ(-90deg)
    }
    20% {
        transform: rotateZ(-90deg)
    }
    43% {
        transform: rotateZ(45deg)
    }
    50% {
        transform: rotateZ(45deg)
    }
    72% {
        transform: rotateZ(90deg)
    }
    75% {
        transform: rotateZ(90deg)
    }
    93% {
        transform: rotateZ(-45deg)
    }
    100% {
        transform: rotateZ(-45deg)
    }
}
.rotate_3
  animation rotate_3 4s linear 1s infinite
@keyframes rotate_3 {
    0%{
      transform: rotateZ(-120deg)
    }
    3% {
        transform: rotateZ(-120deg)
    }
    20% {
        transform: rotateZ(0deg)
    }
    25% {
        transform: rotateZ(0deg)
    }
    47% {
        transform: rotateZ(120deg)
    }
    50% {
        transform: rotateZ(120deg)
    }
    70% {
        transform: rotateZ(0deg)
    }
    75% {
        transform: rotateZ(0deg)
    }
    97%{
      transform: rotateZ(-120deg)
    }
    100% {
        transform: rotateZ(-120deg)
    }
}
.rotate_4
  animation rotate_4 4s linear 1s infinite
@keyframes rotate_4 {
    0% {
      transform: rotateZ(0deg)
    }
    3% {
        transform: rotateZ(0deg)
    }
    22% {
      transform: rotateZ(-90deg)
    }
    25% {
        transform: rotateZ(-90deg)
    }
    43% {
      transform: rotateZ(0deg)
    }
    50% {
        transform: rotateZ(0deg)
    }
    72% {
      transform: rotateZ(90deg)
    }
    75% {
        transform: rotateZ(90deg)
    }
    93% {
        transform: rotateZ(0deg)
    }
    100% {
        transform: rotateZ(0deg)
    }
}
.rotate_5
  animation rotate_5 4s linear 1s infinite
@keyframes rotate_5 {
    0% {
      transform: rotateZ(-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>
