<template>
  <div class="center_wrapper">
    <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>
        <div class="yao_wrap yao_2">
          <div class="yao_layer1"></div>
          <div class="yao_layer2"></div>
        </div>
        <div class="yao_wrap yao_3">
          <div class="yao_layer1"></div>
          <div class="yao_layer2"></div>
        </div>
        <div class="yao_wrap yao_4">
          <div class="yao_layer1"></div>
          <div class="yao_layer2"></div>
        </div>
        <div class="yao_wrap yao_5">
          <div class="yao_layer1"></div>
          <div class="yao_layer2"></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">
          <div class="yao_layer1"></div>
          <div class="yao_layer2"></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_7">
          <div class="yao_layer1"></div>
          <div class="yao_layer2"></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_8">
          <div class="yao_layer1"></div>
          <div class="yao_layer2"></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 yjbyx_1">
          <img class="device_img" src="../assets/images/device/yjbyx_gray.png" alt="">
        </div>
        <div class="p_device yjbyx_1 yjbyx_2">
          <img class="device_img" src="../assets/images/device/yjbyx_gray.png" alt="">
        </div>
        <div class="p_device ktp_wrap_1">
          <div class="ktp" v-for="e in frontWarehouse.slice(0, 14)" :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 ktp_wrap_1 ktp_wrap_2">
          <div class="ktp" v-for="e in  frontWarehouse.slice(14, 28)" :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 ltssj_wrap">
          <img class="device_img" src="../assets/images/device/ltssj_green.png" alt="">
        </div>
      </div>
    </div>
    <div class="machine_block machine_block_2">
      <div class="machine_combine">
        <div class="p_device weilan_wrap_1">
          <img class="device_img" src="../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 sunloadLocation" :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 ktp_cmd_wrap" v-for="(e, i) in loadLocation" :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 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>
    </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">
              <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 slw_630_wrap_1 slw_630_wrap_2">
              <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 slw_630_wrap_1 slw_630_wrap_2">
              <img v-show="e.loadLocation2 === '1'" class="device_img" src="../assets/images/device/lz_hj_green.png" alt="">
              <img v-show="e.loadLocation2 === '2'" class="device_img" src="../assets/images/device/lz_hj_yellow.png" alt="">
              <img v-show="e.loadLocation2 === '3'" class="device_img" src="../assets/images/device/lz_hj_gray.png" alt="">
              <img v-show="e.loadLocation2 === '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 robot_630_wrap">
              <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 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>
        </div>
      </div>
    </div>
    <div class="machine_block machine_block_4">
      <div class="yj_1600_block">
        <div class="p_device weilan_1600_wrap">
          <img class="device_img" src="../assets/images/device/1600/wl.png" alt="">
        </div>
        <div class="p_device yj_1600_wrap">
          <img class="device_img" src="../assets/images/device/1600/yj_gray.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 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/ktp_gray.png" alt="">
        </div>
      </div>
      <div class="yj_1600_block yj_1250_block">
        <div class="p_device weilan_1600_wrap">
          <img class="device_img" src="../assets/images/device/1600/wl.png" alt="">
        </div>
        <div class="p_device yj_1600_wrap">
          <img class="device_img" src="../assets/images/device/1600/yj_gray.png" alt="">
        </div>
        <div class="p_device qzj_1600_wrap">
          <img class="device_img" src="../assets/images/device/1250/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 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/ktp_gray.png" alt="">
        </div>
      </div>
      <div class="yj_1600_block 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 yj_2500_wrap">
          <img class="device_img" src="../assets/images/device/1600/yj_gray.png" alt="">
        </div>
        <div class="p_device jzj_2500_wrap">
          <img class="device_img" src="../assets/images/device/2500/jzj_2500_gray.png" alt="">
        </div>
        <div class="p_device jcj_2500_wrap">
          <img class="device_img" src="../assets/images/device/2500/jcj_2500_gray.png" alt="">
        </div>
        <div class="p_device robot_1600_wrap robot_2500_wrap">
          <img class="device_img" src="../assets/images/device/robot_2500_gray.png" alt="">
        </div>
        <div class="p_device ktp_1600_wrap ktp_2500_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'ktp_2500_wrap_' + (i+1)">
          <img class="device_img" src="../assets/images/device/ktp_gray.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" v-for="(e, i) in unloadLocation" :key="i">
            <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="hlj_wrap">
          <div class="hlj" v-for="(e, i) in mixingMachine" :key="i">
            <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>
    </div>
  </div>
</template>

<script>
// import {homepageEquipment} from '@js/getData2.js'
import {homepageEquipment} from '@js/mork2.js'
export default {
  name: 'workshop',
  data () {
    return {
      mixingMachine: [],
      unloadLocation: [],
      storageLocation: [],
      palletizingRobot: {},
      sunloadLocation: [],
      depalletizingRobot: {},
      loadLocation: [],
      laminatingMachine: {},
      press: [],
      frontWarehouse: []
    }
  },
  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 = res.press.pressMachine[2 * i].status
        let pressMachine2 = res.press.pressMachine[2 * i + 1].status
        let unloadLocation1 = res.press.unloadLocation[4 * i]
        let unloadLocation2 = res.press.unloadLocation[4 * i + 1]
        let unloadLocation3 = res.press.unloadLocation[4 * i + 2]
        let unloadLocation4 = 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: [unloadLocation1, unloadLocation2, unloadLocation3, unloadLocation4]})
      })
      // 窑前货架
      this.frontWarehouse = [...res.frontWarehouse.storageLocation]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.center_wrapper
  _wh(100%, 100%)
  position relative
  // background url(./q.jpg) no-repeat
  background-size 100% 100%
.status_wrap
    position absolute
    top 0
    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 dashed #8FABBF
  padding .2rem .1rem
.machine_block_1
  _wh(48%, 50%)
  left 0
  top 0
.machine_block_2
  _wh(35%, 23%)
  left 54%
  top 21%
.machine_block_3
  _wh(55%, 30%)
  left 2%
  top 58%
  padding .1rem 3.5%
.machine_block_4
  _wh(38%, 34%)
  left 59%
  top 54%
.machine_block_5
  _wh(14%, auto)
  left 61%
  top 75%
  padding 0.1rem
.machine_block_6
  _wh(90%, 9%)
  left 5%
  bottom 0
  padding .1rem
.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%)
.yjbyx_2
  top auto
  bottom 0
.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(4%, 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_1
  left 3%
.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_wrap_1
  left auto
  right: 4%;
  top: 11%;
  _wh(3.3%, auto)
.ktp_wrap_2
  right 0
.ktp
  _wh(100%, auto)
  margin-bottom 0.5px
.ltssj_wrap
  _wh(4%, auto)
  left: 93%;
  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(5%, auto)
.ktp_cmd_wrap_1
  left: 6%;
  top: 6%;
.ktp_cmd_wrap_2
  left 6%
  top 78%
.ktp_cmd_wrap_3
  left 77%
  top 6%
.ktp_cmd_wrap_4
  left 77%
  top 78%
.robot_cmd_wrap_1
  _wh(1%, 1%)
  left: 9%;
  top: 49%;
  img
      position absolute
      width: 790%;
      height auto
      top: -2500%;
      left: -400%;
.robot_cmd_wrap_2
  left 79%
.fmjxt_wrap
  _wh(7%, auto)
  left 89%
  top 5%
.yj_630_blocks
  display flex
  _wh(100%, 100%)
  justify-content space-between
  align-items center
  flex-wrap wrap
.yj_630_block
  position relative
  _wh(22%, 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 -22%
  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
  position absolute
  left: 3%;
  top: 3%;
  _wh(38%, 45%)
.weilan_1600_wrap
  _wh(76%, 100%)
.yj_1600_wrap
  _wh(27%, 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: 32%;
  top: 68%;
  img
      position absolute
      width: 3000%;
      height auto
      top: -800%;
      left: -2300%;
.ktp_1600_wrap
  _wh(16%, auto)
.ktp_1600_wrap_1
  left 10%
  top 80%
.ktp_1600_wrap_2
  left 42%
  top 80%
.yj_1250_block
  left auto
  right 3%
.yj_2500_block
  left auto
  top auto
  right 3%
  bottom 3%
.weilan_2500_wrap
  _wh(80%, 70%)
.yj_2500_wrap
  _wh(27%, auto)
  top auto
  left auto
  right 0
  bottom 0
.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
  left: 40%;
  top: 14%;
.ktp_2500_wrap_1
  left 10%
  top 8%
.ktp_2500_wrap_2
  left 56%
  top 8%
.lz_hj_wrap
  _wh(100%, 100%)
  _fj(center)
  flex-wrap wrap
.lz_hj
  _wh(25%, 10%)
  img
    _wh(100%, 100%)
.lz_hlj_wrap
  _wh(100%, 100%)
.lz_wrap
  _wh(100%, auto)
  _fj()
  margin-bottom 1%
.lz
  _wh(calc(100% / 22), auto)
  img
    position relative
    left 34%
    _wh(50%, auto)
.hlj_wrap
  _wh(100%, auto)
  _fj()
.hlj
  _wh(calc(100% / 22), auto)
  img
    _wh(100%, auto)
.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)
    }
}
</style>
