<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 diepanji_wrap">
                        <div class="machine_wrap mtp_wrap_1">
                            <img src="../../../images/workshop/mtp.png"  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">
                        </div>
                        <div class="machine_wrap gtssj_wrap_1">
                            <img src="../../../images/workshop/gtssj.png" alt="" v-for="(e,i) in [1,2,3,4,5]" :key="i">
                        </div>
                        <div class="machine_wrap cpj_wrap_1">
                            <div class="sh_machine cpj">
                            <img src="../../../images/workshop/cpj.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="machine_wrap cmd_block">
                        <div class="machine_wrap ktp_wrap_1">
                            <div class="sh_machine ktp">
                            <img src="../../../images/workshop/ktp.png" alt="">
                            </div>
                        </div>
                        <div class="machine_wrap cmd_wrap_1">
                          <div class="sh_machine weilan1">
                            <img src="../../../images/workshop/weilan_5.png" alt="">
                          </div>
                          <div class="sh_machine kongtuopan_1">
                            <img src="../../../images/workshop/mtp.png" alt="">
                          </div>
                          <div class="sh_machine kongtuopan_2">
                            <img src="../../../images/workshop/mtp.png" alt="">
                          </div>
                          <div class="sh_machine robot_1">
                            <img src="../../../images/workshop/robot_4.png" alt="">
                          </div>
                          <div class="sh_machine weilan2">
                            <img src="../../../images/workshop/weilan_5.png" alt="">
                          </div>
                          <div class="sh_machine fjfztb">
                            <img src="../../../images/workshop/fjfztb.png" alt="">
                          </div>
                          <div class="sh_machine guntssj_1">
                            <img src="../../../images/workshop/guntssj.png" alt="">
                          </div>
                          <div class="sh_machine guntssj_2">
                            <img src="../../../images/workshop/guntssj.png" alt="">
                          </div>
                          <div class="sh_machine robot_2">
                            <img src="../../../images/workshop/robot_4.png" alt="">
                          </div>
                        </div>
                        <div class="machine_wrap cmd_wrap_1 cmd_wrap_2">
                          <div class="sh_machine weilan1">
                            <img src="../../../images/workshop/weilan_5.png" alt="">
                          </div>
                          <div class="sh_machine kongtuopan_1">
                            <img src="../../../images/workshop/mtp.png" alt="">
                          </div>
                          <div class="sh_machine kongtuopan_2">
                            <img src="../../../images/workshop/mtp.png" alt="">
                          </div>
                          <div class="sh_machine robot_1">
                            <img src="../../../images/workshop/robot_4_gray.png" alt="">
                          </div>
                          <div class="sh_machine weilan2">
                            <img src="../../../images/workshop/weilan_5.png" alt="">
                          </div>
                          <div class="sh_machine fjfztb">
                            <img src="../../../images/workshop/fjfztb.png" alt="">
                          </div>
                          <div class="sh_machine guntssj_1">
                            <img src="../../../images/workshop/guntssj.png" alt="">
                          </div>
                          <div class="sh_machine guntssj_2">
                            <img src="../../../images/workshop/guntssj.png" alt="">
                          </div>
                          <div class="sh_machine robot_2">
                            <img src="../../../images/workshop/robot_4_gray.png" alt="">
                          </div>
                        </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)
.diepanji_wrap
    _wh(30%,50%)
    left 1%
    top 5%
.mtp_wrap_1
    width 7%
    img
        _wh(100%, auto)
.gtssj_wrap_1
    width: 7%;
    left: 11%;
    img
        _wh(100%, auto)
.cpj_wrap_1
    width: 11%;
    top: 8%;
    left: 8%;
    .cpj
        width 100%
.cmd_block
    _wh(60%, 80%)
    top 5%
    left 20%
.ktp_wrap_1
    width 3.5%
.cmd_wrap_1
    _wh(14%, 30%)
    left 6%
    .weilan1
        width 100%
        img
            transform: rotate(180deg);
    .kongtuopan_1
        width 25%
        top 10%
        left 10%
    .kongtuopan_2
        width 25%
        top 10%
        left auto
        right 10%
    .robot_1
        width: 20%;
        top: -4%;
        left: 38%;
    .weilan2
        width: 100%;
        top: 64%;
        left: 0;
    .fjfztb
        width: 38%;
        top: 27%;
        left: 29%;
    .guntssj_1
        width: 25%;
        top: 93%;
        left: 8%;
    .guntssj_2
        width: 25%;
        top: 93%;
        left: auto
        right 8%
    .robot_2
        width: 20%;
        top: 81%;
        left: 38%;
.cmd_wrap_2
    left 30%
</style>
