<template>
    <div @click.stop="closeModal" class="n_container">
        <div class="n_header">
            <div class="n_header_h1">
                <h1>晟华生产数</h1>
            </div>
        </div>
        <div class="n_body_container">
            <div class="n_body_container_wraper">
                <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 class="status_item">
                        <div class="status_tip gray1"></div>
                        <div class="status_name">空料盅</div>
                    </div>
                </div>
                <div class="center_content">
                  <div v-if="TrappedShelfList.length > 0" class="machine_wrap yjlz_wrap_1">
                    <div class="sh_machine lz_1">
                      <img v-show="String(TrappedShelfList[0].point_status) === '0'" src="../../../images/workshop/hj.png" alt="">
                      <img v-show="String(TrappedShelfList[0].point_status) === '1'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                      <img v-show="String(TrappedShelfList[0].point_status) === '2' && String(TrappedShelfList[0].stand_status) === '2'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
                      <img v-show="String(TrappedShelfList[0].point_status) === '2' && String(TrappedShelfList[0].stand_status) === '3' || String(TrappedShelfList[0].stand_status) === '4'" src="../../../images/workshop/lz_hj_green.png" alt="">
                      <img v-show="String(TrappedShelfList[0].point_status) === '2' && String(TrappedShelfList[0].stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                    </div>
                    <div class="sh_machine lz_1 lz_2" v-for="(e,i) in TrappedShelfList.slice(1, 4)" :key="i">
                      <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/hj.png" alt="">
                      <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '3' || String(e.stand_status) === '4'" src="../../../images/workshop/lz_hj_green.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                    </div>
                  </div>
                  <div v-if="TrappedShelfList.length > 0" class="machine_wrap yjlz_wrap_1 yjlz_wrap_2">
                    <div class="sh_machine lz_1">
                      <img v-show="String(TrappedShelfList[4].point_status) === '0'" src="../../../images/workshop/hj.png" alt="">
                      <img v-show="String(TrappedShelfList[4].point_status) === '1'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                      <img v-show="String(TrappedShelfList[4].point_status) === '2' && String(TrappedShelfList[4].stand_status) === '2'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
                      <img v-show="String(TrappedShelfList[4].point_status) === '2' && String(TrappedShelfList[4].stand_status) === '3' || String(TrappedShelfList[4].stand_status) === '4'" src="../../../images/workshop/lz_hj_green.png" alt="">
                      <img v-show="String(TrappedShelfList[4].point_status) === '2' && String(TrappedShelfList[4].stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                    </div>
                    <div class="sh_machine lz_1 lz_2" v-for="(e,i) in TrappedShelfList.slice(5)" :key="i">
                      <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/hj.png" alt="">
                      <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '3' || String(e.stand_status) === '4'" src="../../../images/workshop/lz_hj_green.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                    </div>
                  </div>
                  <div class="machine_wrap yjlz_wrap_1 yjlz_wrap_3">
                    <div class="sh_machine lz_1">
                      <img src="../../../images/workshop/hj.png" alt="">
                    </div>
                  </div>
                  <div class="machine_wrap yjlz_wrap_1 yjlz_wrap_5">
                    <div class="sh_machine lz_1">
                      <img src="../../../images/workshop/hj.png" alt="">
                    </div>
                  </div>
                  <div class="machine_wrap yjlz_wrap_1 yjlz_wrap_7">
                    <div class="sh_machine lz_1">
                      <img src="../../../images/workshop/hj.png" alt="">
                    </div>
                  </div>
                  <div class="machine_wrap yjlz_wrap_1 yjlz_wrap_8">
                    <div class="sh_machine lz_1">
                      <img src="../../../images/workshop/hj.png" alt="">
                    </div>
                  </div>
                  <div class="yaji_wrap">
                    <div class="machine_wrap yj_wrap_1">
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[0].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[0].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[0].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div class="sh_machine weilan">
                        <img src="../../../images/workshop/weilan_2.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine jzjcss">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '0'" src="../../../images/workshop/jzjcss_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '1'" src="../../../images/workshop/jzjcss_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '2'" src="../../../images/workshop/jzjcss_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '3'" src="../../../images/workshop/jzjcss_red.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine yyj" ref="yj01" @click.stop="yjInfo('yj', 1)">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '0'" src="../../../images/workshop/yj_2500_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '1'" src="../../../images/workshop/yj_2500_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '2'" src="../../../images/workshop/yj_2500_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '3'" src="../../../images/workshop/yj_2500_red.png" alt="">
                      </div>
                      <div class="sh_machine wzm">
                        <p v-if="PressMachineList.length > 0">{{ PressMachineList[0].device_name }}</p>
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1" ref="mpgw01" @click.stop="yjInfo('mpgw', 1)">
                        <img v-show="String(StackingPositionList[1].color_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="String(StackingPositionList[1].color_status) === '1'" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="String(StackingPositionList[1].color_status) === '2'" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="String(StackingPositionList[1].color_status) === '3'" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="String(StackingPositionList[1].color_status) === '2'" class="zhuan_qty">
                          <p>{{ StackingPositionList[1].encoder_qty }}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2" ref="mpgw02" @click.stop="yjInfo('mpgw', 2)">
                        <img v-show="String(StackingPositionList[0].color_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="String(StackingPositionList[0].color_status) === '1'" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="String(StackingPositionList[0].color_status) === '2'" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="String(StackingPositionList[0].color_status) === '3'" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="String(StackingPositionList[0].color_status) === '2'" class="zhuan_qty">
                          <p>{{ StackingPositionList[0].encoder_qty }}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_2">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot pointer" :class="{'rotate_2500_1': String(ManipulatorInfoList[0].color_status) === '2'}" ref="jxs01" @click.stop="yjInfo('jxs', 1)">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '0'" src="../../../images/workshop/robot_2500_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '1'" src="../../../images/workshop/robot_2500_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '2'" src="../../../images/workshop/robot_2500_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[0].color_status) === '3'" src="../../../images/workshop/robot_2500_red.png" alt="">
                      </div>
                      <div class="sh_machine elect_1">
                        <img src="../../../images/workshop/elect.png" alt="">
                      </div>
                      <div class="sh_machine elect_1 elect_2">
                        <img src="../../../images/workshop/elect.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_2">
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[1].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[1].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[1].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div class="sh_machine weilan">
                        <img src="../../../images/workshop/weilan_1.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine jzjcss">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '0'" src="../../../images/workshop/jzjcss_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '1'" src="../../../images/workshop/jzjcss_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '2'" src="../../../images/workshop/jzjcss_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '3'" src="../../../images/workshop/jzjcss_red.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine yyj" ref="yj02" @click.stop="yjInfo('yj', 2)">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '0'" src="../../../images/workshop/yj_2500_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '1'" src="../../../images/workshop/yj_2500_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '2'" src="../../../images/workshop/yj_2500_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '3'" src="../../../images/workshop/yj_2500_red.png" alt="">
                      </div>
                      <div class="sh_machine wzm">
                        <p v-if="PressMachineList.length > 0">{{ PressMachineList[1].device_name }}</p>
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1" ref="mpgw03" @click.stop="yjInfo('mpgw', 3)">
                        <img v-show="StackingPositionList[2].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[2].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[2].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[2].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="StackingPositionList[2].color_status === 2" class="zhuan_qty">
                          <p>{{ StackingPositionList[2].encoder_qty }}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2" ref="mpgw04" @click.stop="yjInfo('mpgw', 4)">
                        <img v-show="StackingPositionList[3].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[3].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[3].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[3].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="StackingPositionList[3].color_status === 2" class="zhuan_qty">
                          <p>{{ StackingPositionList[3].encoder_qty }}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_2">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot pointer" :class="{'rotate_2500_2': String(ManipulatorInfoList[1].color_status) === '2'}" ref="jxs02" @click.stop="yjInfo('jxs', 2)">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '0'" src="../../../images/workshop/robot_2500_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '1'" src="../../../images/workshop/robot_2500_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '2'" src="../../../images/workshop/robot_2500_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[1].color_status) === '3'" src="../../../images/workshop/robot_2500_red.png" alt="">
                      </div>
                      <div class="sh_machine elect_1 elect_2">
                        <img src="../../../images/workshop/elect.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_3">
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[2].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[2].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[2].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap yj_info_wrap_1">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[3].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[3].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[3].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div class="sh_machine blj_1">
                        <img src="../../../images/workshop/blj.png" alt="">
                      </div>
                      <div class="sh_machine blj_1 blj_2">
                        <img src="../../../images/workshop/blj.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine cyj_1">
                        <div class="cyj_img_wrap" ref="yj03" @click.stop="yjInfo('yj', 3)">
                          <p>{{ PressMachineList[2].device_name }}</p>
                          <img v-show="String(ManipulatorInfoList[2].color_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="String(ManipulatorInfoList[2].color_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="String(ManipulatorInfoList[2].color_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="String(ManipulatorInfoList[2].color_status) === '3'" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine cyj_1 cyj_2">
                        <div class="cyj_img_wrap" ref="yj04" @click.stop="yjInfo('yj', 4)">
                          <p>{{ PressMachineList[3].device_name }}</p>
                          <img v-show="String(ManipulatorInfoList[2].color_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="String(ManipulatorInfoList[2].color_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="String(ManipulatorInfoList[2].color_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="String(ManipulatorInfoList[2].color_status) === '3'" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                      </div>
                      <div class="sh_machine weilan">
                        <img src="../../../images/workshop/weilan_3.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine jzjcj_1">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '0'" src="../../../images/workshop/jzjcj_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '1'" src="../../../images/workshop/jzjcj_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '2'" src="../../../images/workshop/jzjcj_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '3'" src="../../../images/workshop/jzjcj_red.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine jzjcj_1 jzjcj_2">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '0'" src="../../../images/workshop/jzjcj_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '1'" src="../../../images/workshop/jzjcj_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '2'" src="../../../images/workshop/jzjcj_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '3'" src="../../../images/workshop/jzjcj_red.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine lmyzj">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '0'" src="../../../images/workshop/lmyzj_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '1'" src="../../../images/workshop/lmyzj_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '2'" src="../../../images/workshop/lmyzj_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '3'" src="../../../images/workshop/lmyzj_red.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1" ref="mpgw05" @click.stop="yjInfo('mpgw', 5)">
                        <img v-show="StackingPositionList[5].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[5].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[5].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[5].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="StackingPositionList[5].color_status === 2" class="zhuan_qty">
                          <p>{{StackingPositionList[5].encoder_qty}}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2" ref="mpgw06" @click.stop="yjInfo('mpgw', 6)">
                        <img v-show="StackingPositionList[4].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[4].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[4].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[4].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="StackingPositionList[4].color_status === 2" class="zhuan_qty">
                          <p>{{StackingPositionList[4].encoder_qty}}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_2">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_3" ref="mpgw07" @click.stop="yjInfo('mpgw', 7)">
                        <img v-show="StackingPositionList[7].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[7].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[7].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[7].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="StackingPositionList[7].color_status === 2" class="zhuan_qty">
                            <p>{{ StackingPositionList[7].encoder_qty }}</p>
                            <div class="zhuan_bg_arrow"></div>
                          </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_3">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_4" ref="mpgw08" @click.stop="yjInfo('mpgw', 8)">
                        <img v-show="StackingPositionList[6].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[6].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[6].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[6].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="StackingPositionList[6].color_status === 2" class="zhuan_qty">
                          <p>{{ StackingPositionList[6].encoder_qty }}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_4">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot pointer" :class="{'rotate_630_1': String(ManipulatorInfoList[2].color_status) === '2'}" ref="jxs03" @click.stop="yjInfo('jxs', 3)">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '0'" src="../../../images/workshop/robot_2500_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '1'" src="../../../images/workshop/robot_2500_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '2'" src="../../../images/workshop/robot_2500_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[2].color_status) === '3'" src="../../../images/workshop/robot_2500_red.png" alt="">
                      </div>
                      <div class="sh_machine elect_1 elect_2">
                        <img src="../../../images/workshop/elect.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_5">
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[4].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[4].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[4].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap yj_info_wrap_1">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[5].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[5].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[5].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div class="sh_machine blj_1">
                        <img src="../../../images/workshop/blj.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine cyj_1">
                        <div class="cyj_img_wrap" ref="yj05" @click.stop="yjInfo('yj', 5)">
                          <p>{{ PressMachineList[4].device_name }}</p>
                          <img v-show="StackingPositionList[8].color_status === 0 && StackingPositionList[9].color_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="StackingPositionList[8].color_status === 1 && StackingPositionList[9].color_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="StackingPositionList[8].color_status !== StackingPositionList[9].color_status" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="StackingPositionList[8].color_status === 3 && StackingPositionList[9].color_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine cyj_1 cyj_2">
                        <div class="cyj_img_wrap" ref="yj06" @click.stop="yjInfo('yj', 6)">
                          <p>{{ PressMachineList[5].device_name }}</p>
                          <img v-show="StackingPositionList[10].color_status === 0 && StackingPositionList[11].color_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="StackingPositionList[10].color_status === 1 && StackingPositionList[11].color_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="StackingPositionList[10].color_status !== StackingPositionList[11].color_status" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="StackingPositionList[10].color_status === 3 && StackingPositionList[11].color_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1" ref="mpgw09" @click.stop="yjInfo('mpgw', 9)">
                        <img v-show="StackingPositionList[8].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[8].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[8].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[8].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2" ref="mpgw10" @click.stop="yjInfo('mpgw', 10)">
                        <img v-show="StackingPositionList[9].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[9].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[9].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[9].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_2">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_3" ref="mpgw11" @click.stop="yjInfo('mpgw', 11)">
                        <img v-show="StackingPositionList[10].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[10].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[10].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[10].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_3">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_4" ref="mpgw12" @click.stop="yjInfo('mpgw', 12)">
                        <img v-show="StackingPositionList[11].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[11].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[11].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[11].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_4">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_7">
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[6].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[6].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[6].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div class="sh_machine blj_1">
                        <img src="../../../images/workshop/blj.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine cyj_1">
                        <div class="cyj_img_wrap" ref="yj07" @click.stop="yjInfo('yj', 7)">
                          <p>{{ PressMachineList[6].device_name }}</p>
                          <img v-show="String(ManipulatorInfoList[3].color_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="String(ManipulatorInfoList[3].color_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="String(ManipulatorInfoList[3].color_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="String(ManipulatorInfoList[3].color_status) === '3'" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                      </div>
                      <div class="sh_machine weilan">
                        <img src="../../../images/workshop/weilan_6.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1" ref="mpgw13" @click.stop="yjInfo('mpgw', 13)">
                        <img v-show="StackingPositionList[12].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[12].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[12].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[12].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="StackingPositionList[12].color_status === 2" class="zhuan_qty">
                          <p>{{StackingPositionList[12].encoder_qty}}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2" ref="mpgw14" @click.stop="yjInfo('mpgw', 14)">
                        <img v-show="StackingPositionList[13].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[13].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[13].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[13].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                        <div v-show="StackingPositionList[13].color_status === 2" class="zhuan_qty">
                          <p>{{ StackingPositionList[13].encoder_qty }}</p>
                          <div class="zhuan_bg_arrow"></div>
                        </div>
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_2">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine jcpmj">
                        <img v-show="String(ManipulatorInfoList[3].color_status) === '0'" src="../../../images/workshop/jcpmj_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[3].color_status) === '1'" src="../../../images/workshop/jcpmj_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[3].color_status) === '2'" src="../../../images/workshop/jcpmj_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[3].color_status) === '3'" src="../../../images/workshop/jcpmj_red.png" alt="">
                      </div>
                      <div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot pointer" :class="{'rotate_630_2': String(ManipulatorInfoList[3].color_status) === '2'}" ref="jxs04" @click.stop="yjInfo('jxs', 4)">
                        <img v-show="String(ManipulatorInfoList[3].color_status) === '0'" src="../../../images/workshop/robot_2500_gray.png" alt="">
                        <img v-show="String(ManipulatorInfoList[3].color_status) === '1'" src="../../../images/workshop/robot_2500_yellow.png" alt="">
                        <img v-show="String(ManipulatorInfoList[3].color_status) === '2'" src="../../../images/workshop/robot_2500_green.png" alt="">
                        <img v-show="String(ManipulatorInfoList[3].color_status) === '3'" src="../../../images/workshop/robot_2500_red.png" alt="">
                      </div>
                      <div class="sh_machine elect_1 elect_2">
                        <img src="../../../images/workshop/elect.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_5 yj_wrap_8">
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[7].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[7].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[7].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap yj_info_wrap_1">
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[8].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[8].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[8].now_capacity}}</p>
                        </div>
                        <div class="bg_line"></div>
                      </div>
                      <div class="sh_machine blj_1 blj_2">
                        <img src="../../../images/workshop/blj.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine cyj_1">
                        <div class="cyj_img_wrap" ref="yj08" @click.stop="yjInfo('yj', 8)">
                          <p>{{ PressMachineList[7].device_name }}</p>
                          <img v-show="StackingPositionList[14].color_status === 0 && StackingPositionList[15].color_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="StackingPositionList[14].color_status === 1 && StackingPositionList[15].color_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="StackingPositionList[14].color_status !== StackingPositionList[15].color_status" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="StackingPositionList[14].color_status === 3 && StackingPositionList[15].color_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine cyj_1 cyj_2">
                        <div class="cyj_img_wrap" ref="yj09" @click.stop="yjInfo('yj', 9)">
                          <p>{{ PressMachineList[8].device_name }}</p>
                          <img v-show="StackingPositionList[16].color_status === 0 && StackingPositionList[17].color_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="StackingPositionList[16].color_status === 1 && StackingPositionList[17].color_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="StackingPositionList[16].color_status !== StackingPositionList[17].color_status" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="StackingPositionList[16].color_status === 3 && StackingPositionList[17].color_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1" ref="mpgw15" @click.stop="yjInfo('mpgw', 15)">
                        <img v-show="StackingPositionList[14].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[14].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[14].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[14].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2" ref="mpgw16" @click.stop="yjInfo('mpgw', 16)">
                        <img v-show="StackingPositionList[15].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[15].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[15].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[15].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_2">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_3" ref="mpgw17" @click.stop="yjInfo('mpgw', 17)">
                        <img v-show="StackingPositionList[16].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[16].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[16].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[16].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_3">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_4" ref="mpgw18" @click.stop="yjInfo('mpgw', 18)">
                        <img v-show="StackingPositionList[17].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[17].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[17].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[17].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_4">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_17">
                      <div class="sh_machine yyj">
                        <img src="../../../images/workshop/yj_2500_gray.png" alt="">
                      </div>
                      <div class="sh_machine wzm"></div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_2 yj_wrap_17">
                      <div class="sh_machine yyj">
                        <img src="../../../images/workshop/yj_2500_gray.png" alt="">
                      </div>
                      <div class="sh_machine wzm"></div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_15">
                      <div class="sh_machine cyj_1">
                        <div class="cyj_img_wrap">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                      <div class="sh_machine cyj_1 cyj_2">
                        <div class="cyj_img_wrap">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_5 yj_wrap_13">
                      <div class="sh_machine cyj_1">
                        <div class="cyj_img_wrap">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                      <div class="sh_machine cyj_1 cyj_2">
                        <div class="cyj_img_wrap">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_7 yj_wrap_12">
                      <div class="sh_machine cyj_1">
                        <div class="cyj_img_wrap">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_5 yj_wrap_8 yj_wrap_10">
                      <div v-if="PressMachineList.length > 0" class="yj_info_wrap yj_info_wrap_1">
                        <div class="bg_line"></div>
                        <div class="yj_info">
                          <p><span>时间：</span>{{PressMachineList[9].open_time}}</p>
                          <p><span>物料：</span>{{PressMachineList[9].material_code}}</p>
                          <p><span>产能：</span>{{PressMachineList[9].now_capacity}}</p>
                        </div>
                      </div>
                      <div class="sh_machine cyj_1">
                        <div class="cyj_img_wrap">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine cyj_1 cyj_2">
                        <div class="cyj_img_wrap" ref="yj10" @click.stop="yjInfo('yj', 10)">
                          <p>{{ PressMachineList[9].device_name }}</p>
                          <img v-show="StackingPositionList[18].color_status === 0 && StackingPositionList[19].color_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="StackingPositionList[18].color_status === 1 && StackingPositionList[19].color_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="StackingPositionList[18].color_status !== StackingPositionList[19].color_status" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="StackingPositionList[18].color_status === 3 && StackingPositionList[19].color_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_3" ref="mpgw20" @click.stop="yjInfo('mpgw', 20)">
                        <img v-show="StackingPositionList[19].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[19].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[19].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[19].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_3">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_4" ref="mpgw19" @click.stop="yjInfo('mpgw', 19)">
                        <img v-show="StackingPositionList[18].color_status === 0" src="../../../images/workshop/ktp_gray.png" alt="">
                        <img v-show="StackingPositionList[18].color_status === 1" src="../../../images/workshop/ktp_yellow.png" alt="">
                        <img v-show="StackingPositionList[18].color_status === 2" src="../../../images/workshop/ktp_green.png" alt="">
                        <img v-show="StackingPositionList[18].color_status === 3" src="../../../images/workshop/ktp_red.png" alt="">
                      </div>
                      <div v-else class="sh_machine kongtuopan_1 kongtuopan_4">
                        <img src="../../../images/workshop/ktp_gray.png" alt="">
                      </div>
                      <div class="sh_machine elect_1 elect_2">
                        <img src="../../../images/workshop/elect.png" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="TrappedShelf40List.length > 0" class="machine_wrap kl_wrap_1">
                    <div v-for="(e,i) in TrappedShelf40List.slice(0, 20)" :key="i" class="sh_machine lz" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}" @click.stop="klhjInfo(e)">
                      <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/hj.png" alt="">
                      <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
                      <img v-show="String(e.point_status) === '2' && (String(e.stand_status) === '3' || String(e.stand_status) === '4')" src="../../../images/workshop/lz_hj_green.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                      <div v-if="e.point_code === pkId" class="popup_block_wraper popup_block_wraper_1">
                        <div class="foldline foldline_left"></div>
                        <div class="popup_bg">
                          <div class="popup_block">
                            <div class="pop_header">
                              <div class="pop_name">{{pkObj.point_name}}</div>
                            </div>
                            <div class="pop_content">
                              <div class="pop_item">
                                <div class="pop_label">状态</div>
                                <div class="pop_val">{{ pkObj.point_status_name }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">载具</div>
                                <div class="pop_val">{{ pkObj.vehicle_code }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">bom号</div>
                                <div class="pop_val">{{ pkObj.bom }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">碾次</div>
                                <div class="pop_val">{{ pkObj.mix_num }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">重量</div>
                                <div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
                                <div class="pop_unit">kg</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">入库时间</div>
                                <div class="pop_val">{{ pkObj.instorage_time }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">静置</div>
                                <div class="pop_val">{{ pkObj.standing_time }}</div>
                                <div class="pop_unit">h</div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal1"></div>
                      </div>
                    </div>
                  </div>
                  <div v-if="TrappedShelf40List.length > 0" class="machine_wrap kl_wrap_1 kl_wrap_2">
                    <div v-for="(e,i) in TrappedShelf40List.slice(20)" :key="i" class="sh_machine lz" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}" @click.stop="klhjInfo(e)">
                      <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/hj.png" alt="">
                      <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
                      <img v-show="String(e.point_status) === '2' && (String(e.stand_status) === '3' || String(e.stand_status) === '4')" src="../../../images/workshop/lz_hj_green.png" alt="">
                      <img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                      <div v-if="e.point_code === pkId" class="popup_block_wraper popup_block_wraper_1">
                        <div class="foldline foldline_left"></div>
                        <div class="popup_bg">
                          <div class="popup_block">
                            <div class="pop_header">
                              <div class="pop_name">{{pkObj.point_name}}</div>
                            </div>
                            <div class="pop_content">
                              <div class="pop_item">
                                <div class="pop_label">状态</div>
                                <div class="pop_val">{{ pkObj.point_status_name }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">载具</div>
                                <div class="pop_val">{{ pkObj.vehicle_code }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">bom号</div>
                                <div class="pop_val">{{ pkObj.bom }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">碾次</div>
                                <div class="pop_val">{{ pkObj.mix_num }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">重量</div>
                                <div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
                                <div class="pop_unit">kg</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">入库时间</div>
                                <div class="pop_val">{{ pkObj.instorage_time }}</div>
                              </div>
                              <div class="pop_item">
                                <div class="pop_label">静置</div>
                                <div class="pop_val">{{ pkObj.standing_time }}</div>
                                <div class="pop_unit">h</div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal1"></div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <div v-if="showModal" class="popup_block_wraper" :style="{'top': top, 'left': left}">
          <div class="foldline" :class="foldlineStyle"></div>
          <div class="popup_bg">
            <div class="popup_block">
              <div class="pop_header">
                <div v-show="machine === 'yj' || machine === 'jxs'" class="pop_name">{{pkObj.device_name}}</div>
                <div v-show="machine === 'mpgw'" class="pop_name">{{pkObj.point_name}}</div>
                <div v-show="machine === 'yj' || machine === 'jxs'" class="pop_status">
                  <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(pkObj.device_status)]"></div>
                  <div class="pop_status_text fgray">{{pkObj.device_status_name}}</div>
                </div>
              </div>
              <div v-show="machine === 'yj'" class="pop_content">
                <div class="pop_item">
                  <div class="pop_label">当前物料</div>
                  <div class="pop_val">{{pkObj.material_code}}</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">已生产</div>
                  <div class="pop_val pop_val_s">{{ pkObj.current_qty }}</div>
                  <div class="pop_unit">块</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">当日物料种数</div>
                  <div class="pop_val pop_val_s">{{ pkObj.total_classify_material }}</div>
                  <div class="pop_unit">个</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">当日累计生产</div>
                  <div class="pop_val pop_val_s">{{ pkObj.total_actual_quantity }}</div>
                  <div class="pop_unit">块</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">当日累计合格数</div>
                  <div class="pop_val pop_val_s">{{ pkObj.total_qualified_qty }}</div>
                  <div class="pop_unit">块</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">当日累计不合格数</div>
                  <div class="pop_val pop_val_s">{{ pkObj.total_unqualified_qty }}</div>
                  <div class="pop_unit">块</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">当日累计托盘数</div>
                  <div class="pop_val pop_val_s">{{ pkObj.total_vehicle }}</div>
                  <div class="pop_unit">托</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">开机时间</div>
                  <div class="pop_val">{{ pkObj.open_time }}</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">待机时间</div>
                  <div class="pop_val pop_val_s">{{ pkObj.stand_time }}</div>
                  <div class="pop_unit">时</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">生产时间</div>
                  <div class="pop_val pop_val_s">{{ pkObj.work_time }}</div>
                  <div class="pop_unit">时</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">故障时间</div>
                  <div class="pop_val pop_val_s">{{ pkObj.error_time }}</div>
                  <div class="pop_unit">时</div>
                </div>
              </div>
              <div v-show="machine === 'jxs'" class="pop_content">
                <div class="pop_item">
                  <div class="pop_label">开机时间</div>
                  <div class="pop_val">{{ pkObj.open_time }}</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">待机时间</div>
                  <div class="pop_val pop_val_s">{{ pkObj.stand_time }}</div>
                  <div class="pop_unit">时</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">生产时间</div>
                  <div class="pop_val pop_val_s">{{ pkObj.work_time }}</div>
                  <div class="pop_unit">时</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">故障时间</div>
                  <div class="pop_val pop_val_s">{{ pkObj.error_time }}</div>
                  <div class="pop_unit">时</div>
                </div>
              </div>
              <div v-show="machine === 'mpgw'" class="pop_content">
                <div class="pop_item">
                  <div class="pop_label">状态</div>
                  <div class="pop_val">{{ ['无货', '有货'][Number(pkObj.point_status)] }}</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">载具</div>
                  <div class="pop_val">{{ pkObj.vehicle_code }}</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">bom号</div>
                  <div class="pop_val">{{ pkObj.bom }}</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">物料编码</div>
                  <div class="pop_val">{{ pkObj.material_code }}</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">数量</div>
                  <div class="pop_val pop_val_s">{{ pkObj.material_qty }}</div>
                  <div class="pop_unit">块</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">机台</div>
                  <div class="pop_val">{{ pkObj.device_name }}</div>
                </div>
                <div class="pop_item">
                  <div class="pop_label">是否满托</div>
                  <div class="pop_val">{{ pkObj.is_full }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
        </div>
        <div class="tooltip_wrap left_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
          <div class="tooltip_arrow pointer" @click.stop="expandTooltip" v-text="expand ? '&gt;&gt;' : '&lt;&lt;'"></div>
          <div class="tooltip_pages" :style="expand ? 'width: 300px' : 'width: 0'">
            <router-link to="/setup" class="tooltip_page">配置</router-link>
            <router-link to="/homepageone" class="tooltip_page">1</router-link>
            <router-link to="/hnlkone" class="tooltip_page">2</router-link>
            <div class="tooltip_page current_page pointer">3</div>
            <router-link to="/firedryone" class="tooltip_page">4</router-link>
            <router-link to="/sortpackone" class="tooltip_page">5</router-link>
            <router-link to="/pdone" class="tooltip_page">6</router-link>
          </div>
        </div>
        <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
        <div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
        <div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
        <div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
        <div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
        <div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
        <div class="style_block" style="background: green;left: 0;top:0;"></div>
        <div class="style_block" style="left: 0;top:calc(100% / 3);"></div>
        <div class="style_block" style="background: green;left: 0;bottom: 0"></div>
    </div>
</template>

<script>
import { workshopCondition, moldingMaterialCondition } from '@js/getData2'
import { trappedMaterialCondition } from '@js/getData0'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      expand: false,
      myCharts1: '',
      myCharts2: '',
      myCharts3: '',
      PressMachineList: [], // 压机数据
      TrappedShelfList: [], // 困料位料盅
      StackingPositionList: [], // 压制码垛数据信息
      TrappedMaterialShelfList: [], // 困料货架信息
      ManipulatorInfoList: [], // 机械手数据
      PressPopoverList: [], // 压机弹窗数据
      ManipulatorList: [], // 机械手弹窗数据
      TrayStationPopoverList: [], // 码盘工位弹窗数据
      TrappedShelf40List: [], // 困料货架弹窗
      showModal: false,
      machine: '',
      top: '',
      left: '',
      foldlineStyle: '',
      pkObj: {},
      pkId: ''
    }
  },
  mounted () {
    this._workshopCondition()
    this._moldingMaterialCondition()
    this._trappedMaterialCondition()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._workshopCondition()
        this._moldingMaterialCondition()
        this._trappedMaterialCondition()
      }, this.interTime)
    },
    async _workshopCondition () {
      let res = await workshopCondition()
      if (res.code === 200) {
        if (res.result.hasOwnProperty('PressMachineList')) {
          this.PressMachineList = [...res.result.PressMachineList]
        }
        if (res.result.hasOwnProperty('TrappedShelfList')) {
          this.TrappedShelfList = [...res.result.TrappedShelfList]
        }
        if (res.result.hasOwnProperty('StackingPositionList')) {
          this.StackingPositionList = [...res.result.StackingPositionList]
        }
        if (res.result.hasOwnProperty('TrappedMaterialShelfList')) {
          this.TrappedMaterialShelfList = [...res.result.TrappedMaterialShelfList]
        }
        if (res.result.hasOwnProperty('ManipulatorInfoList')) {
          this.ManipulatorInfoList = [...res.result.ManipulatorInfoList]
        }
      }
    },
    // 弹窗内容
    async _moldingMaterialCondition () {
      let res = await moldingMaterialCondition()
      if (res.code === 200) {
        if (res.result.hasOwnProperty('PressPopoverList')) {
          this.PressPopoverList = [...res.result.PressPopoverList]
        }
        if (res.result.hasOwnProperty('ManipulatorList')) {
          this.ManipulatorList = [...res.result.ManipulatorList]
        }
        if (res.result.hasOwnProperty('TrayStationPopoverList')) {
          this.TrayStationPopoverList = [...res.result.TrayStationPopoverList]
        }
      }
    },
    // 困料货架弹窗
    async _trappedMaterialCondition () {
      let res = await trappedMaterialCondition()
      if (res.code === 200) {
        if (res.result.hasOwnProperty('TrappedShelf40List')) {
          this.TrappedShelf40List = [...res.result.TrappedShelf40List]
        }
      }
    },
    expandTooltip () {
      this.expand = !this.expand
    },
    closeModal () {
      this.showModal = false
      this.machine = ''
      this.pkObj = {}
      this.pkId = ''
    },
    yjInfo (m, type) {
      this.machine = m
      if (m === 'yj') {
        if (!this.PressPopoverList.length) {
          return
        }
        switch (type) {
          case 1:
            this.pkObj = this.PressPopoverList[0]
            this.top = this.$refs.yj01.getBoundingClientRect().top + 36
            this.left = this.$refs.yj01.getBoundingClientRect().left - 687
            this.foldlineStyle = 'foldline_right'
            break
          case 2:
            this.pkObj = this.PressPopoverList[1]
            this.top = this.$refs.yj02.getBoundingClientRect().top + 36
            this.left = this.$refs.yj02.getBoundingClientRect().left - 687
            this.foldlineStyle = 'foldline_right'
            break
          case 3:
            this.pkObj = this.PressPopoverList[2]
            this.top = this.$refs.yj03.getBoundingClientRect().top - 17
            this.left = this.$refs.yj03.getBoundingClientRect().left + 133
            this.foldlineStyle = 'foldline_left'
            break
          case 4:
            this.pkObj = this.PressPopoverList[3]
            this.top = this.$refs.yj04.getBoundingClientRect().top - 17
            this.left = this.$refs.yj04.getBoundingClientRect().left + 133
            this.foldlineStyle = 'foldline_left'
            break
          case 5:
            this.pkObj = this.PressPopoverList[4]
            this.top = this.$refs.yj05.getBoundingClientRect().top - 17
            this.left = this.$refs.yj05.getBoundingClientRect().left + 133
            this.foldlineStyle = 'foldline_left'
            break
          case 6:
            this.pkObj = this.PressPopoverList[5]
            this.top = this.$refs.yj06.getBoundingClientRect().top - 17
            this.left = this.$refs.yj06.getBoundingClientRect().left + 133
            this.foldlineStyle = 'foldline_left'
            break
          case 7:
            this.pkObj = this.PressPopoverList[6]
            this.top = this.$refs.yj07.getBoundingClientRect().top - 17
            this.left = this.$refs.yj07.getBoundingClientRect().left + 133
            this.foldlineStyle = 'foldline_left'
            break
          case 8:
            this.pkObj = this.PressPopoverList[7]
            this.top = this.$refs.yj08.getBoundingClientRect().top - 17
            this.left = this.$refs.yj08.getBoundingClientRect().left + 133
            this.foldlineStyle = 'foldline_left'
            break
          case 9:
            this.pkObj = this.PressPopoverList[8]
            this.top = this.$refs.yj09.getBoundingClientRect().top - 17
            this.left = this.$refs.yj09.getBoundingClientRect().left + 133
            this.foldlineStyle = 'foldline_left'
            break
          case 10:
            this.pkObj = this.PressPopoverList[9]
            this.top = this.$refs.yj10.getBoundingClientRect().top - 17
            this.left = this.$refs.yj10.getBoundingClientRect().left + 133
            this.foldlineStyle = 'foldline_left'
            break
        }
      }
      if (m === 'jxs') {
        if (!this.ManipulatorList.length) {
          return
        }
        switch (type) {
          case 1:
            this.pkObj = this.ManipulatorList[0]
            this.top = this.$refs.jxs01.getBoundingClientRect().top - 32
            this.left = this.$refs.jxs01.getBoundingClientRect().left - 647
            this.foldlineStyle = 'foldline_right'
            break
          case 2:
            this.pkObj = this.ManipulatorList[1]
            this.top = this.$refs.jxs02.getBoundingClientRect().top - 32
            this.left = this.$refs.jxs02.getBoundingClientRect().left - 647
            this.foldlineStyle = 'foldline_right'
            break
          case 3:
            this.pkObj = this.ManipulatorList[2]
            this.top = this.$refs.jxs03.getBoundingClientRect().top - 32
            this.left = this.$refs.jxs03.getBoundingClientRect().left + 101
            this.foldlineStyle = 'foldline_left'
            break
          case 4:
            this.pkObj = this.ManipulatorList[3]
            this.top = this.$refs.jxs04.getBoundingClientRect().top - 32
            this.left = this.$refs.jxs04.getBoundingClientRect().left + 101
            this.foldlineStyle = 'foldline_left'
            break
        }
      }
      if (m === 'mpgw') {
        if (!this.TrayStationPopoverList.length) {
          return
        }
        switch (type) {
          case 1:
            this.pkObj = this.TrayStationPopoverList[0]
            this.top = this.$refs.mpgw01.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw01.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 2:
            this.pkObj = this.TrayStationPopoverList[1]
            this.top = this.$refs.mpgw02.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw02.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 3:
            this.pkObj = this.TrayStationPopoverList[2]
            this.top = this.$refs.mpgw03.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw03.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 4:
            this.pkObj = this.TrayStationPopoverList[3]
            this.top = this.$refs.mpgw04.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw04.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 5:
            this.pkObj = this.TrayStationPopoverList[4]
            this.top = this.$refs.mpgw05.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw05.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 6:
            this.pkObj = this.TrayStationPopoverList[5]
            this.top = this.$refs.mpgw06.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw06.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 7:
            this.pkObj = this.TrayStationPopoverList[6]
            this.top = this.$refs.mpgw07.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw07.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 8:
            this.pkObj = this.TrayStationPopoverList[7]
            this.top = this.$refs.mpgw08.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw08.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 9:
            this.pkObj = this.TrayStationPopoverList[8]
            this.top = this.$refs.mpgw09.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw09.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 10:
            this.pkObj = this.TrayStationPopoverList[9]
            this.top = this.$refs.mpgw10.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw10.getBoundingClientRect().left - 640
            this.foldlineStyle = 'foldline_right'
            break
          case 11:
            this.pkObj = this.TrayStationPopoverList[10]
            this.top = this.$refs.mpgw11.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw11.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 12:
            this.pkObj = this.TrayStationPopoverList[11]
            this.top = this.$refs.mpgw12.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw12.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 13:
            this.pkObj = this.TrayStationPopoverList[12]
            this.top = this.$refs.mpgw13.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw13.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 14:
            this.pkObj = this.TrayStationPopoverList[13]
            this.top = this.$refs.mpgw14.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw14.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 15:
            this.pkObj = this.TrayStationPopoverList[14]
            this.top = this.$refs.mpgw15.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw15.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 16:
            this.pkObj = this.TrayStationPopoverList[15]
            this.top = this.$refs.mpgw16.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw16.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 17:
            this.pkObj = this.TrayStationPopoverList[16]
            this.top = this.$refs.mpgw17.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw17.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 18:
            this.pkObj = this.TrayStationPopoverList[17]
            this.top = this.$refs.mpgw18.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw18.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 19:
            this.pkObj = this.TrayStationPopoverList[18]
            this.top = this.$refs.mpgw19.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw19.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
          case 20:
            this.pkObj = this.TrayStationPopoverList[19]
            this.top = this.$refs.mpgw20.getBoundingClientRect().top - 21
            this.left = this.$refs.mpgw20.getBoundingClientRect().left + 112
            this.foldlineStyle = 'foldline_left'
            break
        }
      }
      this.showModal = true
    },
    klhjInfo (e) {
      this.pkId = this.pkId === e.point_code ? '' : e.point_code
      this.pkObj = this.pkId === e.point_code ? e : {}
    },
    closeModal1 () {
      this.pkId = ''
      this.pkObj = {}
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
    position relative
    _wh(100%, 100%)
    overflow hidden
.n_header
    position relative
    z-index 0
    _wh(100%, 8%)
    _bis('../../../images/bg_header.jpg')
.n_header_h1
    _wh(100%, 100%)
    _fj(row, flex-end)
    _bis('../../../images/top_left.png',auto,,right)
    h1
        _font(32px, 1, #fff,,right)
        padding-bottom 2%
        letter-spacing 6px
        font-family "阿里妈妈数黑体" !important
        margin-right -3px
.n_body_container
    _wh(100%, 92%)
    padding 40px 0 20px 20px
    _bis('../../../images/bg_content_l.jpg')
.n_body_container_wraper
    _wh(100%, 100%)
    position relative
    z-index 1
.center_content
    _wh(100%, 100%)
    position relative
    z-index 0
.status_wrap
    position absolute
    top -26px
    right 40px
    z-index 1
    _fj(row)
.status_item
    _fj(row)
    +.status_item
        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)
.green
  background-color $green2
.yellow
  background-color $yellow
.gray
  background-color $gray1
.red
  background-color $orange
.machine_wrap
    position absolute
    z-index 2
.sh_machine
  position absolute
  top 0
  left 0
  z-index 3
  width 100%
  img
    position absolute
    top 0
    left 0
    z-index 4
    _wh(100%, auto)
.kl_wrap_1
  width 2%
  height: 98%;
  bottom: -33%;
  left: auto;
  right: 51.5%
  transform: rotate(90deg);
  .lz
    position relative
    _wh(100%,4.96%)
  .mgt5
    margin-top 75%
.kl_wrap_2
  bottom -40%
.yaji_wrap
  position: absolute;
  left: 0;
  top: 14%;
  width: 98%;
  height: 55%;
// 压机
.yj_wrap_1
  width 10.801%
  height 29.895%
  // width: 15%;
  // height: 41.5%;
  transform rotate(90deg)
  top: 5%
  // left: 90.5%;
  left 87%
  .yj_info_wrap
    position absolute
    top 1%
    left -112%
    z-index 0
    width 130%
    _fj(row)
    .yj_info
      width 72%
      height 61px
      padding 5px
      background-image linear-gradient(to right, #067272, transparent)
      border 1px solid #00ffff
      border-radius 5px
      overflow hidden
      transform rotate(270deg) translateY(100%)
      p
        _font(13px, 17px, #00ffff,,left)
        border-bottom 0.5px solid #067272
        span
          color #fff
        &:last-child
          border none
    .bg_line
      _wh(28%, 1px)
      background-color #03fcfd
  .yyj
    width 50%
    cursor pointer
    img
      width: 83%;
      left: 37%;
  .wzm
    _wh(50%, 41%)
    background-color #d9d9d9
    top auto
    bottom 0
    _fj(row,center)
    p
      _font(15px,17px,#333,,)
      transform rotate(-90deg)
  .jzjcss
    width: 24%;
    left: 51%;
    top: 25%;
  .weilan
    width: 46%;
    left: 54%;
    top 37%
  .robot
    width 1%
    height 1%
    left: 75%;
    top: 55%;
    transform: rotate(-46deg)
    img
      width 2400%
      top: -800%;
      left: -2000%;
  .kongtuopan_1
    cursor pointer
    _wh(12%, 12%)
    top: 81%;
    left: 61%;
    .zhuan_qty
      position absolute
      bottom: -47px;
      right: -49%;
      z-index 8
      _wh(50px, 20px)
      background-color: #0ff;
      border: 1px solid #0ff;
      border-radius: 5px
      transform: rotate(-90deg);
      p
        display block
        _fj(row,center)
        _wh(100%, 100%)
        _font(13px, 13px, #fff,,center)
        white-space nowrap
      .zhuan_bg_arrow
        position: absolute;
        top: 3px;
        right: -5px;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px
        border-right-width: 0;
        border-left-color: #0ff;
        &:after
          content: " ";
          border-width: 5px;
  .kongtuopan_2
    left: 74%;
  .elect_1
    width: 10%;
    height: 9%;
    left: 74%;
    top: 27%;
    background-color #fff
    _fj(row,center)
    img
      position static
      _wh(50%, 100%)
  .elect_2
    left:86%
.yj_wrap_2
  left: 71%
  .robot
    transform: rotate(-46deg)
  .kongtuopan_1
    top 31%
    left 85%
    img
      transform rotate(90deg)
    .zhuan_qty
      bottom auto
      top 0
      right auto
      left 20px
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-top-width: 0;
        border-bottom-color: #0ff;
        top -5px
        right 50%
        transform: translateX(50%)
  .kongtuopan_2
    top 80%
  .weilan
    top 16%
  .elect_2
    top 9%
    left: 89%;
.yj_wrap_3
  left: 52.6%
  .yj_info_wrap
    top -10%
    width 148%
    .yj_info
      width 63%
      transform rotate(270deg) translateX(10%) translateY(100%)
    .bg_line
      width 37%
  .yj_info_wrap_1
    top 46%
    left: -143%;
    width 180%
    .yj_info
      width 51.8%
      transform rotate(270deg) translateY(100%)
    .bg_line
      width 48.2%
  .blj_1
    width: 18%;
    top: 14%;
    left: 16%;
  .blj_2
    top 70%
  .cyj_1
    width 50%
    height 50%
    cursor pointer
    .cyj_img_wrap
      position absolute
      _wh(28%, 91.49%)
      left auto
      right 0
      _fj(row, center)
      p
        position relative
        display block
        z-index 7
        _font(15px,17px,#333,,)
        transform rotate(-90deg)
        white-space nowrap
  .cyj_2
    top 50%
    .cyj_img_wrap
      top auto
      bottom 0
  .jzjcj_1
    width 7%
    height 50%
    left 51%
    img
      top auto
      bottom 5%
  .jzjcj_2
    top 50%
    img
      top 5%
  .lmyzj
    width: 13%;
    left: 54%;
    top: 33%;
  .weilan
    top 9%
  .robot
    left: 79%;
    top: 49%;
    transform: rotate(-4deg)
  .kongtuopan_1
    top: 21%
    left: 64%;
    .zhuan_qty
      bottom auto
      top -47px
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-left-width: 0;
        border-right-color: #0ff;
        left: -5px;
        right: auto;
  .kongtuopan_2
    left: 80%;
  .kongtuopan_3
    top: 64%
    .zhuan_qty
      bottom -47px
      top auto
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-right-width: 0;
        border-left-color: #0ff;
        left: auto;
        right: -5px;
  .kongtuopan_4
    top: 64%
    left: 80%;
    .zhuan_qty
      bottom -47px
      top auto
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-right-width: 0;
        border-left-color: #0ff;
        left: auto;
        right: -5px;
  .elect_2
    top: 101%;
    left: 38%;
.yj_wrap_5
  left: 36%
  .kongtuopan_1
    top: 7%;
    left: 64%;
    img
      transform rotate(90deg)
  .kongtuopan_2
    top 25%
  .kongtuopan_3
    top 62%
  .kongtuopan_4
    top 80%
.yj_wrap_7
  left 18%
  .yj_info_wrap
    top 19%
  .blj_1
    top 42%
  .cyj_1
    top 25%
    img
      top 50%
      transform translateY(-50%)
  .weilan
    top 15%
  .robot
    left: 75%
    transform: rotate(15deg)
  .kongtuopan_1
    top 35%
    left 90%
    img
      transform rotate(90deg)
    .zhuan_qty
      bottom auto
      top -13px
      right auto
      left 20px
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-top-width: 0;
        border-bottom-color: #0ff;
        top -5px
        right 60%
        left auto
  .kongtuopan_2
    top: 59%
    .zhuan_qty
      bottom -13px
      top auto
      .zhuan_bg_arrow
        left 60%
        right auto
  .jcpmj
    width: 18%;
    top: 12%;
    left: 57%;
  .elect_2
    top: 74%;
    left: 38%;
.yj_wrap_8
  left 3%
.yj_wrap_17
  top 55%
  .yyj
    left auto
    right 0
    img
      left auto
      right 37%
      transform rotate(180deg)
  .wzm
    left auto
    right 0
.yj_wrap_15
  top 55%
  .cyj_1
    left auto
    right 0
    .cyj_img_wrap
      left 0
      right auto
.yj_wrap_13
  top 55%
  .cyj_1
    left auto
    right 0
    .cyj_img_wrap
      left 0
      right auto
.yj_wrap_12
  top 55%
  .cyj_1
    left auto
    right 0
    .cyj_img_wrap
      left 0
      right auto
.yj_wrap_10
  top 55%
  .yj_info_wrap
    left 63%
    .yj_info
      transform: rotate(270deg) translateY(-100%)
  .cyj_1
    left auto
    right 0
    .cyj_img_wrap
      left 0
      right auto
  .kongtuopan_1
    left auto
    right 64%
    img
      transform rotate(-90deg)
  .elect_2
    top: 45%;
    left: 52%;
.yjlz_wrap_1
  width: 1.365%;
  height: 17%;
  top: 4%;
  right: 8.8%;
  transform rotate(90deg);
  .lz_1
    _wh(100%, 19.011%)
  .lz_2
    &:nth-child(2)
      top 43%
    &:nth-child(3)
      top 62%
    &:nth-child(4)
      top 81%
.yjlz_wrap_2
  right 24.5%
.yjlz_wrap_3
  right 42%
  .lz_1
    top 50%
    transform translateY(-50%)
.yjlz_wrap_5
  right: 58.8%;
  .lz_1
    top 50%
    transform translateY(-50%)
.yjlz_wrap_7
  right: 76.5%
  .lz_1
    top 50%
    transform translateY(-50%)
.yjlz_wrap_8
  right: 91%;
  .lz_1
    top 50%
    transform translateY(-50%)
.rotate_2500_1
  animation rotate_2500_1 1.5s linear 1.5s infinite alternate-reverse
.rotate_2500_2
  animation rotate_2500_2 1.5s linear 1.5s infinite alternate-reverse
.rotate_630_1
  animation rotate_630_1 1.5s linear 1.5s infinite alternate-reverse
.rotate_630_2
  animation rotate_630_2 3s linear 1.5s infinite alternate-reverse
@keyframes rotate_2500_1 {
    0% {
      transform: rotateZ(-46deg)
    }
    10% {
        transform: rotateZ(-46deg)
    }
    20% {
        transform: rotateZ(-46deg)
    }
    90% {
        transform: rotateZ(-115deg) rotateY(-30deg)
    }
    100% {
        transform: rotateZ(-115deg) rotateY(0deg)
    }
}
@keyframes rotate_2500_2 {
    0% {
      transform: rotateZ(-46deg)
    }
    10% {
        transform: rotateZ(-46deg)
    }
    20% {
        transform: rotateZ(-46deg)
    }
    90% {
        transform: rotateZ(-120deg) rotateY(-30deg)
    }
    100% {
        transform: rotateZ(-120deg) rotateY(0deg)
    }
}
@keyframes rotate_630_1 {
    0% {
      transform: rotateZ(-4deg)
    }
    10% {
        transform: rotateZ(-4deg)
    }
    20% {
        transform: rotateZ(-20deg)
    }
    90% {
        transform: rotateZ(-115deg) rotateY(-30deg)
    }
    100% {
        transform: rotateZ(-115deg) rotateY(0deg)
    }
}
@keyframes rotate_630_2 {
    0% {
      transform: rotateZ(150deg) rotateY(-30deg)
    }
    10% {
        transform: rotateZ(150deg) rotateY(0deg)
    }
    50% {
        transform: rotateZ(70deg) rotateY(-30deg)
    }
    60% {
        transform: rotateZ(70deg) rotateY(0deg)
    }
    90% {
        transform: rotateZ(15deg)
    }
    100% {
        transform: rotateZ(15deg)
    }
}
.popup_block_wraper_1
  position absolute
  top: -1029%;
  left: -828%
  z-index 10
  transform rotate(-90deg)
  .foldline_left
    transform rotate(0deg)
    top 34%
</style>
