307 lines
9.6 KiB
Vue
307 lines
9.6 KiB
Vue
<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_gray.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_cmd_red.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/ggtssj.png" alt="">
|
|
</div>
|
|
<div class="sh_machine guntssj_2">
|
|
<img src="../../../images/workshop/ggtssj.png" alt="">
|
|
</div>
|
|
<div class="sh_machine robot_2">
|
|
<img src="../../../images/workshop/robot_cmd_red.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_cmd_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/ggtssj.png" alt="">
|
|
</div>
|
|
<div class="sh_machine guntssj_2">
|
|
<img src="../../../images/workshop/ggtssj.png" alt="">
|
|
</div>
|
|
<div class="sh_machine robot_2">
|
|
<img src="../../../images/workshop/robot_cmd_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap rgv_line_wrap">
|
|
<div class="sh_machine rgv_line">
|
|
<img src="../../../images/workshop/liu.png" alt="">
|
|
</div>
|
|
<!-- <div class="rgv_line_1">
|
|
<div class="rgv_line_begine"></div>
|
|
<div class="rgv_line_begine rgv_line_end"></div>
|
|
</div>
|
|
<div class="rgv_line_1 rgv_line_2">
|
|
<div class="rgv_line_begine"></div>
|
|
<div class="rgv_line_begine rgv_line_end"></div>
|
|
</div>
|
|
<div class="rgv_line_3"></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%
|
|
.rgv_line_wrap
|
|
width 100%
|
|
height 8%
|
|
top 36%
|
|
left 0
|
|
.rgv_line_1
|
|
position absolute
|
|
top 0
|
|
left 2%
|
|
z-index 4
|
|
width 96%
|
|
height 7%
|
|
background-color #b2b2b2
|
|
margin 0 auto
|
|
box-shadow 0px 3px 10px #333333
|
|
.rgv_line_begine
|
|
position absolute
|
|
top -100%
|
|
left 0
|
|
z-index 5
|
|
_wh(0.5%, 300%)
|
|
height 300%
|
|
background-color #b2b2b2
|
|
border-radius 50%
|
|
box-shadow 0px 3px 10px #333333
|
|
.rgv_line_end
|
|
left auto
|
|
right 0
|
|
.rgv_line_2
|
|
top auto
|
|
bottom 0
|
|
.rgv_line_3
|
|
position absolute
|
|
top 45%
|
|
left 0
|
|
z-index 4
|
|
width 100%
|
|
height 5%
|
|
background-color #b2b2b2
|
|
margin 0 auto
|
|
box-shadow 0px 3px 10px #333333
|
|
</style>
|