<template>
    <div 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="n_right_content">
                    <div class="right_wrap">
                      <div v-if="MixMachineList.length > 0" class="machine_wrap hlj_s_wrap">
                        <div v-for="(e,i) in MixMachineList.slice(0, 4)" :key="i" class="sh_machine hlj_s">
                          <div class="yj_info_wrap">
                            <div class="yj_info">
                              <p><span>时间：</span>{{e.open_time}}</p>
                              <p><span>BOM：</span>{{e.bom}}</p>
                              <p><span>产能：</span>{{e.now_capacity}}</p>
                            </div>
                            <div class="bg_line"></div>
                          </div>
                          <img v-show="String(e.device_status) === '0'" src="../../../images/workshop/hlj_s_gray.png" alt="">
                          <img v-show="String(e.device_status) === '1'" src="../../../images/workshop/hlj_s_yellow.png" alt="">
                          <img v-show="String(e.device_status) === '2'" src="../../../images/workshop/hlj_s_green.png" alt="">
                          <img v-show="String(e.device_status) === '3'" src="../../../images/workshop/hlj_s_red.png" alt="">
                        </div>
                      </div>
                      <div v-if="MixMachineList.length > 0" class="machine_wrap hlj_wrap">
                        <div v-for="(e,i) in MixMachineList.slice(4)" :key="i"  class="sh_machine hlj">
                          <div class="yj_info_wrap">
                            <div class="yj_info">
                              <p><span>时间：</span>{{e.open_time}}</p>
                              <p><span>BOM：</span>{{e.bom}}</p>
                              <p><span>产能：</span>{{e.now_capacity}}</p>
                            </div>
                            <div class="bg_line"></div>
                          </div>
                          <img v-show="String(e.device_status) === '0'" src="../../../images/workshop/hlj_gray.png" alt="">
                          <img v-show="String(e.device_status) === '1'" src="../../../images/workshop/hlj_yellow.png" alt="">
                          <img v-show="String(e.device_status) === '2'" src="../../../images/workshop/hlj_green.png" alt="">
                          <img v-show="String(e.device_status) === '3'" src="../../../images/workshop/hlj_red.png" alt="">
                        </div>
                      </div>
                      <div v-if="MixBlankingList.length > 0" class="machine_wrap lz_wrap_1">
                        <div v-for="(e,i) in MixBlankingList.slice(0, 4)" :key="i" class="sh_machine lz">
                          <img :class="String(e.point_status) === '0' ? 'hidden': ''" src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div v-if="MixBlankingList.length > 0" class="machine_wrap lz_wrap_2">
                        <div v-for="(e,i) in MixBlankingList.slice(4)" :key="i" class="sh_machine lz">
                          <img :class="String(e.point_status) === '0' ? 'hidden': ''" src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <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) !== '0' && String(TrappedShelfList[0].stand_status_color) === '0'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                          <img v-show="String(TrappedShelfList[0].point_status) !== '0' && String(TrappedShelfList[0].stand_status_color) === '1'" src="../../../images/workshop/lz_hj_green.png" alt="">
                          <img v-show="String(TrappedShelfList[0].point_status) !== '0' && String(TrappedShelfList[0].stand_status_color) === '2'" src="../../../images/workshop/lz_hj_red.png" alt="">
                          <img v-show="String(TrappedShelfList[0].point_status) !== '0' && String(TrappedShelfList[0].stand_status_color) === '3'" src="../../../images/workshop/lz_hj_yellow.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) !== '0' && String(e.stand_status_color) === '0'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '1'" src="../../../images/workshop/lz_hj_green.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '2'" src="../../../images/workshop/lz_hj_red.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '3'" src="../../../images/workshop/lz_hj_yellow.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) !== '0' && String(TrappedShelfList[4].stand_status_color) === '0'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                          <img v-show="String(TrappedShelfList[4].point_status) !== '0' && String(TrappedShelfList[4].stand_status_color) === '1'" src="../../../images/workshop/lz_hj_green.png" alt="">
                          <img v-show="String(TrappedShelfList[4].point_status) !== '0' && String(TrappedShelfList[4].stand_status_color) === '2'" src="../../../images/workshop/lz_hj_red.png" alt="">
                          <img v-show="String(TrappedShelfList[4].point_status) !== '0' && String(TrappedShelfList[4].stand_status_color) === '3'" src="../../../images/workshop/lz_hj_yellow.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) !== '0' && String(e.stand_status_color) === '0'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '1'" src="../../../images/workshop/lz_hj_green.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '2'" src="../../../images/workshop/lz_hj_red.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '3'" src="../../../images/workshop/lz_hj_yellow.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 @click="jumpTakeShape">
                        <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 class="sh_machine jzjcss">
                            <img src="../../../images/workshop/jzjcss_yellow.png" alt="">
                          </div>
                          <div v-if="PressMachineList.length > 0" class="sh_machine yyj">
                            <img v-show="String(PressMachineList[0].device_status) === '0'" src="../../../images/workshop/yj_2500_gray.png" alt="">
                            <img v-show="String(PressMachineList[0].device_status) === '1'" src="../../../images/workshop/yj_2500_yellow.png" alt="">
                            <img v-show="String(PressMachineList[0].device_status) === '2'" src="../../../images/workshop/yj_2500_green.png" alt="">
                            <img v-show="String(PressMachineList[0].device_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">
                            <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_green.png" alt="">
                            <img v-show="String(StackingPositionList[0].color_status) === '2'" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="String(StackingPositionList[0].color_status) === '3'" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2">
                            <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_green.png" alt="">
                            <img v-show="String(StackingPositionList[1].color_status) === '2'" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="String(StackingPositionList[1].color_status) === '3'" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot" :class="{'rotate_2500_1': String(ManipulatorInfoList[0].color_status) === '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_green.png" alt="">
                            <img v-show="String(ManipulatorInfoList[0].color_status) === '2'" src="../../../images/workshop/robot_2500_red.png" alt="">
                            <img v-show="String(ManipulatorInfoList[0].color_status) === '3'" src="../../../images/workshop/robot_2500_yellow.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 class="sh_machine jzjcss">
                            <img src="../../../images/workshop/jzjcss_yellow.png" alt="">
                          </div>
                          <div v-if="PressMachineList.length > 0" class="sh_machine yyj">
                            <img v-show="String(PressMachineList[1].device_status) === '0'" src="../../../images/workshop/yj_2500_gray.png" alt="">
                            <img v-show="String(PressMachineList[1].device_status) === '1'" src="../../../images/workshop/yj_2500_yellow.png" alt="">
                            <img v-show="String(PressMachineList[1].device_status) === '2'" src="../../../images/workshop/yj_2500_green.png" alt="">
                            <img v-show="String(PressMachineList[1].device_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">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[2].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[2].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[3].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[3].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot" :class="{'rotate_2500_2': String(ManipulatorInfoList[1].color_status) === '1'}">
                            <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_green.png" alt="">
                            <img v-show="String(ManipulatorInfoList[1].color_status) === '2'" src="../../../images/workshop/robot_2500_red.png" alt="">
                            <img v-show="String(ManipulatorInfoList[1].color_status) === '3'" src="../../../images/workshop/robot_2500_yellow.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="PressMachineList.length > 0" class="sh_machine cyj_1">
                            <div class="cyj_img_wrap">
                              <p>{{ PressMachineList[2].device_name }}</p>
                              <img v-show="String(PressMachineList[2].device_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                              <img v-show="String(PressMachineList[2].device_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                              <img v-show="String(PressMachineList[2].device_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                              <img v-show="String(PressMachineList[2].device_status) === '3'" src="../../../images/workshop/yj_630_red.png" alt="">
                            </div>
                          </div>
                          <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1 cyj_2">
                            <div class="cyj_img_wrap">
                              <p>{{ PressMachineList[3].device_name }}</p>
                              <img v-show="String(PressMachineList[3].device_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                              <img v-show="String(PressMachineList[3].device_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                              <img v-show="String(PressMachineList[3].device_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                              <img v-show="String(PressMachineList[3].device_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 class="sh_machine jzjcj_1">
                            <img src="../../../images/workshop/jzjcj_630.png" alt="">
                          </div>
                          <div class="sh_machine jzjcj_1 jzjcj_2">
                            <img src="../../../images/workshop/jzjcj_630.png" alt="">
                          </div>
                          <div class="sh_machine lmyzj">
                            <img src="../../../images/workshop/lmyzj_630.png" alt="">
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[4].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[4].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[5].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[5].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_3">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[6].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[6].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_4">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[7].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[7].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot" :class="{'rotate_630_1': String(ManipulatorInfoList[2].color_status) === '1'}">
                            <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_green.png" alt="">
                            <img v-show="String(ManipulatorInfoList[2].color_status) === '2'" src="../../../images/workshop/robot_2500_red.png" alt="">
                            <img v-show="String(ManipulatorInfoList[2].color_status) === '3'" src="../../../images/workshop/robot_2500_yellow.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="PressMachineList.length > 0" class="sh_machine cyj_1">
                            <div class="cyj_img_wrap">
                              <p>{{ PressMachineList[4].device_name }}</p>
                              <img v-show="String(PressMachineList[4].device_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                              <img v-show="String(PressMachineList[4].device_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                              <img v-show="String(PressMachineList[4].device_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                              <img v-show="String(PressMachineList[4].device_status) === '3'" src="../../../images/workshop/yj_630_red.png" alt="">
                            </div>
                          </div>
                          <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1 cyj_2">
                            <div class="cyj_img_wrap">
                              <p>{{ PressMachineList[5].device_name }}</p>
                              <img v-show="String(PressMachineList[5].device_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                              <img v-show="String(PressMachineList[5].device_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                              <img v-show="String(PressMachineList[5].device_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                              <img v-show="String(PressMachineList[5].device_status) === '3'" src="../../../images/workshop/yj_630_red.png" alt="">
                            </div>
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[8].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[8].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[9].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[9].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_3">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[10].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[10].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_4">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[11].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[11].color_status === 3" src="../../../images/workshop/ktp_yellow.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="PressMachineList.length > 0" class="sh_machine cyj_1">
                            <div class="cyj_img_wrap">
                              <p>{{ PressMachineList[6].device_name }}</p>
                              <img v-show="String(PressMachineList[6].device_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                              <img v-show="String(PressMachineList[6].device_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                              <img v-show="String(PressMachineList[6].device_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                              <img v-show="String(PressMachineList[6].device_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">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[12].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[12].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[13].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[13].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                            <div class="zhuan_qty">
                              <p>200</p>
                              <div class="zhuan_bg_arrow"></div>
                            </div>
                          </div>
                          <div class="sh_machine jcpmj">
                            <img src="../../../images/workshop/jcpmj.png" alt="">
                          </div>
                          <div v-if="ManipulatorInfoList.length > 0" class="sh_machine robot" :class="{'rotate_630_2': String(ManipulatorInfoList[3].color_status) === '1'}">
                            <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_green.png" alt="">
                            <img v-show="String(ManipulatorInfoList[3].color_status) === '2'" src="../../../images/workshop/robot_2500_red.png" alt="">
                            <img v-show="String(ManipulatorInfoList[3].color_status) === '3'" src="../../../images/workshop/robot_2500_yellow.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="PressMachineList.length > 0" class="sh_machine cyj_1">
                            <div class="cyj_img_wrap">
                              <p>{{ PressMachineList[7].device_name }}</p>
                              <img v-show="String(PressMachineList[7].device_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                              <img v-show="String(PressMachineList[7].device_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                              <img v-show="String(PressMachineList[7].device_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                              <img v-show="String(PressMachineList[7].device_status) === '3'" src="../../../images/workshop/yj_630_red.png" alt="">
                            </div>
                          </div>
                          <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1 cyj_2">
                            <div class="cyj_img_wrap">
                              <p>{{ PressMachineList[8].device_name }}</p>
                              <img v-show="String(PressMachineList[8].device_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                              <img v-show="String(PressMachineList[8].device_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                              <img v-show="String(PressMachineList[8].device_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                              <img v-show="String(PressMachineList[8].device_status) === '3'" src="../../../images/workshop/yj_630_red.png" alt="">
                            </div>
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[14].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[14].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_2">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[15].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[15].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_3">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[16].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[16].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_4">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[17].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[17].color_status === 3" src="../../../images/workshop/ktp_yellow.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="PressMachineList.length > 0" class="sh_machine cyj_1 cyj_2">
                            <div class="cyj_img_wrap">
                              <p>{{ PressMachineList[9].device_name }}</p>
                              <img v-show="String(PressMachineList[9].device_status) === '0'" src="../../../images/workshop/yj_630_gray.png" alt="">
                              <img v-show="String(PressMachineList[9].device_status) === '1'" src="../../../images/workshop/yj_630_yellow.png" alt="">
                              <img v-show="String(PressMachineList[9].device_status) === '2'" src="../../../images/workshop/yj_630_green.png" alt="">
                              <img v-show="String(PressMachineList[9].device_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">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[19].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[19].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                          </div>
                          <div v-if="StackingPositionList.length > 0" class="sh_machine kongtuopan_1 kongtuopan_4">
                            <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_green.png" alt="">
                            <img v-show="StackingPositionList[18].color_status === 2" src="../../../images/workshop/ktp_red.png" alt="">
                            <img v-show="StackingPositionList[18].color_status === 3" src="../../../images/workshop/ktp_yellow.png" alt="">
                          </div>
                          <div class="sh_machine elect_1 elect_2">
                            <img src="../../../images/workshop/elect.png" alt="">
                          </div>
                        </div>
                      </div>
                      <div v-if="TrappedMaterialShelfList.length > 0" class="machine_wrap kl_wrap_1">
                        <div v-for="(e,i) in TrappedMaterialShelfList.slice(0, 20)" :key="i" class="sh_machine lz" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}">
                          <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/hj.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '0'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '1'" src="../../../images/workshop/lz_hj_green.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '2'" src="../../../images/workshop/lz_hj_red.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '3'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
                        </div>
                      </div>
                      <div v-if="TrappedMaterialShelfList.length > 0" class="machine_wrap kl_wrap_1 kl_wrap_2">
                        <div v-for="(e,i) in TrappedMaterialShelfList.slice(20)" :key="i" class="sh_machine lz" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}">
                          <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/hj.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '0'" src="../../../images/workshop/lz_hj_gray.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '1'" src="../../../images/workshop/lz_hj_green.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '2'" src="../../../images/workshop/lz_hj_red.png" alt="">
                          <img v-show="String(e.point_status) !== '0' && String(e.stand_status_color) === '3'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap mtp_wrap_1">
                        <div v-for="(e,i) in [1,2,3,4,5,6]" :key="i" class="mtp">
                          <img src="../../../images/workshop/mtp.png" alt="">
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="n_left_content">
          <div class="item_wrap">
              <div class="item_tip item_tip_bg_s">
                  <div class="item_tip_left">当日混料生产</div>
              </div>
              <div class="item_content">
                  <div id="home_echart_1" style="width: 100%; height: 100%;"></div>
              </div>
          </div>
          <div class="item_wrap">
              <div class="item_tip item_tip_bg_s">
                  <div class="item_tip_left">当日压制生产</div>
              </div>
              <div class="item_content">
                  <div id="home_echart_2" style="width: 100%; height: 100%;"></div>
              </div>
          </div>
          <div class="item_wrap">
              <div class="item_tip item_tip_bg_s">
                  <div class="item_tip_left">当日成品情况</div>
              </div>
              <div class="item_content">
                  <div id="home_echart_3" style="width: 100%; height: 100%;"></div>
              </div>
          </div>
        </div>
        <div class="tooltip_wrap left_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
          <div class="tooltip_arrow pointer" @click="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>
            <div class="tooltip_page current_page pointer">1</div>
            <router-link to="/hnlkone" class="tooltip_page">2</router-link>
            <router-link to="/takeshapeone" class="tooltip_page">3</router-link>
            <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>
</template>

<script>
import { workshopCondition } from '@js/getData2'
export default {
  name: 'one',
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      expand: false,
      myCharts1: '',
      myCharts2: '',
      myCharts3: '',
      HLDayList: [],
      YZDayList: [],
      CPDayList: [],
      PressMachineList: [], // 压机数据
      MixMachineList: [], // 混料机数据
      MixBlankingList: [], // 混料机下料位
      TrappedShelfList: [], // 困料位料盅
      StackingPositionList: [], // 压制码垛数据信息
      TrappedMaterialShelfList: [], // 困料货架信息
      ManipulatorInfoList: [] // 机械手数据
    }
  },
  mounted () {
    this._workshopCondition()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._workshopCondition()
      }, this.interTime)
    },
    async _workshopCondition () {
      let res = await workshopCondition()
      if (res.code === 200) {
        this.HLDayList = [...res.result.HLDayList]
        if (this.HLDayList.length) {
          this.setEchart1()
        }
        this.YZDayList = [...res.result.YZDayList]
        if (this.YZDayList.length) {
          this.setEchart2()
        }
        this.CPDayList = [...res.result.CPDayList]
        if (this.CPDayList.length) {
          this.setEchart3()
        }
        this.PressMachineList = [...res.result.PressMachineList]
        this.MixMachineList = [...res.result.MixMachineList]
        this.MixBlankingList = [...res.result.MixBlankingList]
        this.TrappedShelfList = [...res.result.TrappedShelfList]
        this.StackingPositionList = [...res.result.StackingPositionList]
        this.TrappedMaterialShelfList = [...res.result.TrappedMaterialShelfList]
        this.ManipulatorInfoList = [...res.result.ManipulatorInfoList]
      }
    },
    setEchart1 () {
      // let barName = ['碾机1', '碾机2', '碾机3', '碾机4', '碾机5', '碾机6', '碾机7', '碾机8', '碾机9', '碾机10', '碾机11', '碾机12', '碾机13', '碾机14', '碾机15', '碾机16']
      // let barData = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000', '500', '600', '700', '800', '500', '600']
      let barName = []
      let barData = []
      this.HLDayList.map(el => {
        barName.push(el.device_name)
        barData.push(el.real_qty)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            },
            rotate: 50
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          name: '单位：KG',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: '产量',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            },
            data: barData
          }
        ]
      }
      let echart = document.getElementById('home_echart_1')
      if (this.myCharts1 !== '') {
        this.myCharts1.dispose()
      }
      if (echart !== null) {
        this.myCharts1 = this.$echarts.init(echart)
        this.myCharts1.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts1.resize()
        })
      }
    },
    setEchart2 () {
      // let barName = ['压机1', '压机2', '压机3', '压机4', '压机5', '压机6', '压机7', '压机8', '压机9', '压机10']
      // let barData1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
      // let barData2 = ['50', '180', '70', '100', '50', '70', '100', '180', '100', '120']
      let barName = []
      let barData1 = []
      let barData2 = []
      this.YZDayList.map(el => {
        barName.push(el.device_name)
        barData1.push(el.qualified_qty)
        barData2.push(el.unqualified_qty)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            },
            rotate: 50
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          name: '单位：块',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: '合格数',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: barData1
          },
          {
            name: '不合格数',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: barData2
          }
        ]
      }
      let echart = document.getElementById('home_echart_2')
      if (this.myCharts2 !== '') {
        this.myCharts2.dispose()
      }
      if (echart !== null) {
        this.myCharts2 = this.$echarts.init(echart)
        this.myCharts2.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts2.resize()
        })
      }
    },
    setEchart3 () {
      // let barName = ['成品1', '成品2', '成品3', '成品4', '成品5']
      // let barData1 = ['1500', '1600', '1700', '1800', '1500']
      // let barData2 = ['450', '500', '700', '800', '500']
      // let barData3 = ['50', '180', '60', '70', '50']
      let barName = []
      let barData1 = []
      let barData2 = []
      let barData3 = []
      this.CPDayList.map(el => {
        barName.push(el.material_code)
        barData1.push(el.inventory_qty)
        barData2.push(el.qualified_in_qty)
        barData3.push(el.unqualified_in_qty)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '库存数', itemStyle: {color: '#0E90FD'}}, {name: '合格入库', itemStyle: {color: '#33CCCC'}}, {name: '不合格入库', itemStyle: {color: '#EAAD24'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            }
            // rotate: 50
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          name: '单位：块',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: '库存数',
            type: 'bar',
            barWidth: '8',
            barGap: '200%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            },
            data: barData1
          },
          {
            name: '合格入库',
            type: 'bar',
            barWidth: '8',
            barGap: '200%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: barData2
          },
          {
            name: '不合格入库',
            type: 'bar',
            barWidth: '8',
            barGap: '200%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: barData3
          }
        ]
      }
      let echart = document.getElementById('home_echart_3')
      if (this.myCharts3 !== '') {
        this.myCharts3.dispose()
      }
      if (echart !== null) {
        this.myCharts3 = this.$echarts.init(echart)
        this.myCharts3.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts3.resize()
        })
      }
    },
    jumpTakeShape () {
      // this.$router.push('/takeshapeone')
    },
    expandTooltip () {
      this.expand = !this.expand
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
    position relative
    _wh(100%, 100%)
    overflow hidden
.n_header
    _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 0
    _bis('../../../images/bg_content_l.jpg')
.n_body_container_wraper
    _wh(100%, 100%)
    _fj(row)
.n_left_content
    position absolute
    left 0
    top 0
    _wh(calc(100% / 3), 100%)
    // background-color #070b1c
    background-image linear-gradient(to bottom, #070b1c, transparent)
.n_right_content
    padding-left calc(100% / 3)
    _wh(100%, 100%)
.item_wrap
    _wh(100%, calc(100% / 3))
.item_tip
    _wh(100%, 32px)
    line-height 32px
    padding 0 10px
.item_tip_bg_s
    _bis('../../../images/bg_title_s.png')
.item_tip_left
    _wh(60%, 100%)
    font-family "SourceHanSansCN"
    _font(18px, inherit, #fff, 700, left)
    letter-spacing 2px
    text-shadow 0 0 9px #159AFF
    padding-left 34px
    _bis('../../../images/bg_title_tip.png', 22px, 22px, left)
.item_content
    _wh(100%, calc(100% - 32px))
    padding 10px 5px
.right_wrap
    position relative
    z-index 1
    _wh(100%, 100%)
    top -5%
    // _bis('../../../images/workshop/workshop_l.png')
.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)
.hlj_s_wrap
  width 4%
  height 85.5%
  top 3%
  left 17%
  .hlj_s
    height 7%
    .yj_info_wrap
      position absolute
      top -17%
      left -356%
      z-index 0
      width 355%
      _fj(row)
      .yj_info
        width 96%
        height 52px
        padding 2px 5px
        background-image linear-gradient(to right, #067272, transparent)
        border 1px solid #00ffff
        border-radius 5px
        overflow hidden
        p
          _font(12px, 14px, #00ffff,,left)
          border-bottom 0.5px solid #067272
          span
            color #fff
          &:last-child
            border none
      .bg_line
        _wh(4%, 1px)
        background-color #03fcfd
    &:nth-child(2)
      top 8.5%
    &:nth-child(3)
      top 17.5%
    &:nth-child(4)
      top 26.5%
.hlj_wrap
  width 4%
  height 66.5%
  top 35%
  left 17%
  .hlj
    height 7%
    .yj_info_wrap
      position absolute
      top -22%
      left -356%
      z-index 0
      width 355%
      _fj(row)
      .yj_info
        width 96%
        height 52px
        padding 2px 5px
        background-image linear-gradient(to right, #067272, transparent)
        border 1px solid #00ffff
        border-radius 5px
        overflow hidden
        p
          _font(12px, 14px, #00ffff,,left)
          border-bottom 0.5px solid #067272
          span
            color #fff
          &:last-child
            border none
      .bg_line
        _wh(4%, 1px)
        background-color #03fcfd
    &:nth-child(2)
      top 8%
    &:nth-child(3)
      top 17%
    &:nth-child(4)
      top 25%
    &:nth-child(5)
      top 34%
    &:nth-child(6)
      top 42%
    &:nth-child(7)
      top 53%
    &:nth-child(8)
      top 61%
    &:nth-child(9)
      top 70%
    &:nth-child(10)
      top 78%
    &:nth-child(11)
      top 87%
    &:nth-child(12)
      top 95%
.lz_wrap_1
  width 2%
  height 84.6%
  top 3.5%
  left 22%
  .lz
    &:nth-child(2)
      top 9%
    &:nth-child(3)
      top 18%
    &:nth-child(4)
      top 27%
.lz_wrap_2
  width 2%
  height 66.3%
  top 36%
  left 22%
  .lz
    &:nth-child(2)
      top 7.5%
    &:nth-child(3)
      top 17%
    &:nth-child(4)
      top 24.5%
    &:nth-child(5)
      top 34%
    &:nth-child(6)
      top 42.5%
    &:nth-child(7)
      top 53%
    &:nth-child(8)
      top 61.5%
    &:nth-child(9)
      top 70%
    &:nth-child(10)
      top 78.5%
    &:nth-child(11)
      top 87%
    &:nth-child(12)
      top 94.5%
.yjlz_wrap_1
  width 2%
  height 16.442%
  top 2%
  left 42%
  .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
  top 21%
.yjlz_wrap_3
  top 41%
  .lz_1
    top 50%
    transform translateY(-50%)
.yjlz_wrap_5
  top 62%
  .lz_1
    top 50%
    transform translateY(-50%)
.yjlz_wrap_7
  top 75%
  .lz_1
    top 50%
    transform translateY(-50%)
.yjlz_wrap_8
  top 89%
  .lz_1
    top 50%
    transform translateY(-50%)
.yj_wrap_1
  width 16%
  height 16.442%
  top 2%
  left 44.7%
  .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
      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%
    img
      width: 83%;
      left: 37%;
  .wzm
    _wh(50%, 41%)
    background-color #d9d9d9
    top auto
    bottom 0
    _fj(row,flex-start)
    padding 0 10px
    p
      _font(15px,17px,#333,,left)
  .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
    _wh(12%, 12%)
    top: 81%;
    left: 61%;
    .zhuan_qty
      position absolute
      bottom -30px
      right: 0;
      z-index 8
      _wh(50px, 20px)
      background-color: #0ff;
      border: 1px solid #0ff;
      border-radius: 5px
      p
        display block
        _fj(row,center)
        _wh(100%, 100%)
        _font(13px, 13px, #fff,,center)
        white-space nowrap
      .zhuan_bg_arrow
        position: absolute;
        top -5px
        right 10%
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px
        border-top-width: 0;
        border-bottom-color: #0ff;
        &:after
          content: " ";
          border-width: 5px;
  .kongtuopan_2
    left: 74%;
    .zhuan_qty
      right auto
      left 0
      .zhuan_bg_arrow
        right auto
        left 10%
  .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
  top 21%
  .robot
    transform: rotate(-46deg)
  .kongtuopan_1
    top 31%
    left 85%
    img
      transform rotate(90deg)
    .zhuan_qty
      bottom auto
      top 0
      right auto
      left 32px
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-left-width: 0;
        border-right-color: #0ff;
        top: 20%;
        left: -5px;
  .kongtuopan_2
    top 80%
  .weilan
    top 16%
  .elect_2
    top 9%
    left: 89%;
.yj_wrap_3
  top 41%
  .yj_info_wrap
    top -10%
    width 148%
    .yj_info
      width 63%
    .bg_line
      width 37%
  .yj_info_wrap_1
    top 46%
  .blj_1
    width: 18%;
    top: 14%;
    left: 16%;
  .blj_2
    top 70%
  .cyj_1
    width 50%
    height 50%
    .cyj_img_wrap
      position absolute
      _wh(28%, 91.49%)
      left auto
      right 0
      _fj(row, center)
      p
        position relative
        z-index 7
        _font(15px,17px,#333,,)
  .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 6%
  .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-bottom-width: 0;
        border-top-color: #0ff;
        top auto
        bottom -5px
  .kongtuopan_2
    left: 80%;
  .kongtuopan_3
    top: 64%
    .zhuan_qty
      bottom -47px
      top auto
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-top-width: 0;
        border-bottom-color: #0ff;
        top -5px
        bottom auto
  .kongtuopan_4
    top: 64%
    left: 80%;
    .zhuan_qty
      bottom -47px
      top auto
      right auto
      left 0
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-top-width: 0;
        border-bottom-color: #0ff;
        top -5px
        bottom auto
        right auto
        left 10%
  .elect_2
    top: 101%;
    left: 38%;
.yj_wrap_5
  top 61%
  .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
  top 75%
  .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 0
      right auto
      left 32px
      .zhuan_bg_arrow
        border-color: transparent;
        border-width: 5px;
        border-left-width: 0;
        border-right-color: #0ff;
        top: 20%;
        left: -5px;
  .kongtuopan_2
    top: 59%
  .jcpmj
    width: 18%;
    top: 12%;
    left: 57%;
  .elect_2
    top: 74%;
    left: 38%;
.yj_wrap_8
  top 89%
.yj_wrap_17
  left 62.5%
  .yyj
    left auto
    right 0
    img
      left auto
      right 37%
      transform rotate(180deg)
  .wzm
    left auto
    right 0
.yj_wrap_15
  left 62.5%
  .cyj_1
    left auto
    right 0
    .cyj_img_wrap
      left 0
      right auto
.yj_wrap_13
  left 62.5%
  .cyj_1
    left auto
    right 0
    .cyj_img_wrap
      left 0
      right auto
.yj_wrap_12
  left 62.5%
  .cyj_1
    left auto
    right 0
    .cyj_img_wrap
      left 0
      right auto
.yj_wrap_10
  left 62.5%
  .yj_info_wrap
    left 63%
  .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: 46%;
    left: 52%;
.kl_wrap_1
  width 2%
  height 63%
  bottom 10%
  left auto
  right 7%
  .lz
    position relative
    _wh(100%,4.96%)
  .mgt5
    margin-top 45%
.kl_wrap_2
  right 5%
.mtp_wrap_1
  width 2.5%
  top 9%
  right 5%
  .mtp
    width 100%
    img
      _wh(100%, auto)
.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)
    }
}
</style>
