<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="status_wrap">
                    <div class="status_item">
                        <div class="status_tip green"></div>
                        <div class="status_name">运行中/困料中</div>
                    </div>
                    <div class="status_item">
                        <div class="status_tip yellow"></div>
                        <div class="status_name">待机/困料完成</div>
                    </div>
                    <div class="status_item">
                        <div class="status_tip gray"></div>
                        <div class="status_name">关机</div>
                    </div>
                    <div class="status_item">
                        <div class="status_tip red"></div>
                        <div class="status_name">故障/困料超时</div>
                    </div>
                </div>
                <div class="center_content">
                    <div class="machine_wrap lz_wrap_3">
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div v-for="(e,i) in [1,2,3]" :key="i" class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div v-for="(e,i) in [1,2,3]" :key="i" class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="machine_wrap yyj_wrap_1">
                        <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 class="sh_machine yyj">
                          <img src="../../../images/workshop/yyj_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_1.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap yyj_wrap_2">
                        <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 class="sh_machine yyj">
                          <img src="../../../images/workshop/yyj_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_1.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_1">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine weilan">
                          <img src="../../../images/workshop/weilan_3.png" alt="">
                        </div>
                        <div class="sh_machine jzjcss">
                          <img src="../../../images/workshop/jzjcss_yellow.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_2.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_2">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_3">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine weilan">
                          <img src="../../../images/workshop/weilan_4.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_3.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_2 cyj_wrap_4">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap yyj_wrap_3">
                        <div class="sh_machine yyj">
                          <img src="../../../images/workshop/yyj_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                    </div>
                    <div class="machine_wrap cyj_wrap_1 cyj_wrap_5">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_1 cyj_wrap_6">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_1 cyj_wrap_7">
                      <div class="sh_machine cyj_1">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_1 cyj_wrap_8">
                      <div class="sh_machine cyj_1">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                      <div class="sh_machine cyj_2">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                      <div class="sh_machine kongtuopan_3">
                        <img src="../../../images/workshop/ktp.png" alt="">
                      </div>
                      <div class="sh_machine kongtuopan_4">
                        <img src="../../../images/workshop/ktp.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_2">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_3">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_4">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_5">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]" :key="i">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_6">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]" :key="i">
                        <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
    _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 20px
    _bis('../../../images/bg_content_l.jpg')
.n_body_container_wraper
    _wh(100%, 100%)
    position relative
    z-index 0
.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)
.yyj_wrap_1
  width 16%
  height 14%
  top 20%
  right -2%
  transform rotate(90deg)
  .yyj
    width 28.22%
    height 42%
    left 30.5%
    img
      _wh(100%, 100%)
  .wzm
    _wh(50.9%, 46.95%)
    background-color #d9d9d9
    top auto
    bottom 0
  .jzjcss
    width 22%
    left 51%
    top 11%
  .weilan
    width 49.1%
    height 73%
    left auto
    right 0
    top auto
    bottom 0
  .robot
    width: 26%;
    left: 53%;
    top: 62%;
  .kongtuopan_1
    width: 10%;
    top: 113%;
    left: 60%;
  .kongtuopan_2
    width 10%
    top: 113%;
    left: 72%;
.yyj_wrap_2
  width 16%
  height 14%
  top 20%
  right 10%
  transform rotate(90deg)
  .yyj
    width 28.22%
    height 42%
    left 30.5%
    img
      _wh(100%, 100%)
  .wzm
    _wh(50.9%, 46.95%)
    background-color #d9d9d9
    top auto
    bottom 0
  .jzjcss
    width 22%
    left 51%
    top 11%
  .weilan
    width: 34%;
    height: 73%;
    left: 53%;
    top 27%
  .robot
    width 24%
    left 72%
    top 65%
    transform rotate(90deg)
  .kongtuopan_1
    width 10%
    top: 53%;
    left: 76%;
    transform rotate(90deg)
  .kongtuopan_2
    width 10%
    top: 113%;
    left: 69%;
    transform rotate(-90deg)
.cyj_wrap_1
  width 11%
  height 20%
  top 23%
  right 26%
  transform rotate(90deg)
  .cyj_1
    width 25%
    top 0
  .cyj_2
    width 25%
    top 90%
  .jzjcss
    width: 32%;
    left: 25%;
    top: 43%;
  .weilan
    width 70%
    left auto
    right 0
    top 48%
  .robot
    width: 18%;
    top: 71%;
    left: auto;
    right: 19%;
  .kongtuopan_1
    width 14.5%
    top 53%
    left auto
    right 35%
  .kongtuopan_2
    width 14.5%
    top 53%
    left auto
    right 12%
  .kongtuopan_3
    width 14.5%
    top 90%
    left auto
    right 35%
  .kongtuopan_4
    width 14.5%
    top 90%
    left auto
    right 12%
.cyj_wrap_2
  width 11%
  height 20%
  top 23%
  left 44%
  transform rotate(90deg)
  .cyj_1
    width 25%
  .cyj_2
    width 25%
    top 90%
  .kongtuopan_1
    width 14.5%
    top: 19%;
    left: 38%;
    transform rotate(90deg)
  .kongtuopan_2
    width 14.5%
    top: 50%;
    left: 38%;
    transform rotate(90deg)
  .kongtuopan_3
    width 14.5%
    top: 106%;
    left: 38%;
    transform rotate(90deg)
  .kongtuopan_4
    width 14.5%
    top: 139%;
    left: 38%;
    transform rotate(90deg)
.cyj_wrap_3
  width 11%
  height 20%
  top: 23%;
  left: 25%;
  transform rotate(90deg)
  .cyj_1
    width: 25%;
  .cyj_2
    width 25%
    top 90%
  .weilan
    width 70%
    left auto
    right 0
    top: 37%;
  .robot
    width 21%
    top: 62%;
    left: 43%;
  .kongtuopan_1
    width 14.5%
    top: 53%;
    left: auto;
    right: 13%;
    transform rotate(90deg)
  .kongtuopan_2
    width 14.5%
    top: auto;
    bottom: -1%;
    left: auto;
    right: 13%;
    transform rotate(90deg)
.cyj_wrap_4
  left 7%
.yyj_wrap_3
  width 16%
  height 14%
  top: 62%;
  right: 10%;
  transform rotate(90deg)
  .yyj
    width 28.22%
    left -7.5%
    transform rotate(180deg)
    height 42%
    img
      _wh(100%, 100%)
  .wzm
    _wh(50.9%, 46.95%)
    background-color #d9d9d9
    top auto
    bottom 0
.cyj_wrap_5
  left auto
  right 26%
  top 53.6%
.cyj_wrap_6
  left 44%
  top 53.6%
.cyj_wrap_7
  left: 21%;
  top: 53.6%;
.cyj_wrap_8
  left auto
  left 7%
  top 53.6%;
  .kongtuopan_3
    width 14.5%
    top: 106%;
    left: -17%
    transform rotate(90deg)
  .kongtuopan_4
    width 14.5%
    top: 139%;
    left: -17%
    transform rotate(90deg)
.mtp_wrap_1
  width 1.5%
  height 7.4%
  top: 72%;
  right: 3.6%;
  transform rotate(90deg)
  .mtp
    width 100%
    img
      _wh(100%, auto)
.mtp_wrap_2
  top 76%
.mtp_wrap_3
  top 86%
.mtp_wrap_4
  top 90%
.mtp_wrap_5
  right 27%
  top 86%
.mtp_wrap_6
  right 27%
  top 90%
.lz_wrap_3
  width 2%
  height 100%
  top: -46%;
  right: 26%;
  transform rotate(90deg)
  .lz_boxs
    position relative
    top 0
    left 0
    _wh(100%, 100%)
    .lz
      width 100%
      img
        _wh(100%, auto)
    &:nth-child(1)
      height: 8%;
    &:nth-child(2)
      height: 17%;
    &:nth-child(3)
      height: 8%;
    &:nth-child(4)
      height: 30%;
    &:nth-child(5)
      height: 13%;
      left: 200%
    &:nth-child(6)
      height: 26%;
      left: 100%
    &:nth-child(7)
      height: 53%;
      left: 200%
    &:nth-child(8)
      height: 26%;
      left: 200%
    &:nth-child(9)
      height: 8%;
      left: 200%
</style>
