435 lines
17 KiB
Vue
435 lines
17 KiB
Vue
<template>
|
|
<div @click.stop="closeModal" class="n_container">
|
|
<div class="n_header">
|
|
<div class="n_header_h1">
|
|
<h1>晟华生产数</h1>
|
|
</div>
|
|
</div>
|
|
<div class="n_body_container">
|
|
<div class="n_body_container_wraper">
|
|
<div class="box1">
|
|
<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="machine_wrap yao_wrap">
|
|
<div class="yaosb">
|
|
<img src="../../../images/workshop/yao.png" alt="">
|
|
</div>
|
|
<div class="sh_machine yjbyx_1">
|
|
<img src="../../../images/workshop/yjbyx.png" alt="">
|
|
</div>
|
|
<div class="sh_machine yjbyx_2">
|
|
<img src="../../../images/workshop/yjbyx.png" alt="">
|
|
</div>
|
|
<div class="machine_wrap mtp_wrap_3 yao_left">
|
|
<div v-for="(e,i) in [1,2,3,4]" :key="i" class="mtp">
|
|
<img src="../../../images/workshop/mtp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap mtp_wrap_3 yao_right">
|
|
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" :key="i" class="mtp">
|
|
<img src="../../../images/workshop/mtp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div v-if="FinishedProductShelfList.length > 0" class="machine_wrap mtp_wrap_3 mtp_wrap_4">
|
|
<!-- <div v-for="(e,i) in FinishedProductShelfList.slice(0, 26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)" @mouseover="mouseoverHandle(e)" @mouseout="mouseoutHandle(e)"> -->
|
|
<div v-for="(e,i) in FinishedProductShelfList.slice(0, 26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)">
|
|
<!-- <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt=""> -->
|
|
<!-- <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/mtp.png" alt=""> -->
|
|
<div v-show="String(e.point_status) === '0'" class="img1" :class="{yellow:(pkId && e.bglight)}"></div>
|
|
<div v-show="String(e.point_status) === '1'" class="img2" :class="{yellow:(pkId && e.bglight)}"></div>
|
|
<div v-if="pkId === e.point_code" class="popup_block_wraper" :class="youModel" :style="{'top': top, 'left': left}">
|
|
<div class="foldline foldline_left" :class="foldlineStyle" style="display: block;"></div>
|
|
<div class="popup_bg">
|
|
<div class="popup_block">
|
|
<div class="pop_header">
|
|
<div class="pop_name">{{pkObj.point_code + '/' + pkObj.point_name}}</div>
|
|
<div class="pop_status">
|
|
<!-- <div class="pop_status_dot" :class="{green:pkObj.status ==='2',red:pkObj.status ==='5',yellow:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
|
|
<div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="pop_content">
|
|
<div class="pop_item">
|
|
<div class="pop_label">状态</div>
|
|
<div class="pop_val">{{pkObj.point_status_name}}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">载具</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">BOM号</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">物料编码</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.material_code }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">数量</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.qty }}</div>
|
|
<div class="pop_unit">块</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">机台</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.device_name }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">碾次</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">入库时间</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="FinishedProductShelfList.length > 0" class="machine_wrap mtp_wrap_3 mtp_wrap_4 mtp_wrap_5">
|
|
<!-- <div v-for="(e,i) in FinishedProductShelfList.slice(26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)" @mouseover="mouseoverHandle(e)" @mouseout="mouseoutHandle(e)"> -->
|
|
<div v-for="(e,i) in FinishedProductShelfList.slice(26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)">
|
|
<!-- <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt=""> -->
|
|
<!-- <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/mtp.png" alt=""> -->
|
|
<div v-show="String(e.point_status) === '0'" class="img1" :class="{yellow:(pkId && e.bglight)}"></div>
|
|
<div v-show="String(e.point_status) === '1'" class="img2" :class="{yellow:(pkId && e.bglight)}"></div>
|
|
<div v-if="pkId === e.point_code" class="popup_block_wraper" :class="youModel" :style="{'top': top, 'left': left}">
|
|
<div class="foldline foldline_left" :class="foldlineStyle" style="display: block;"></div>
|
|
<div class="popup_bg">
|
|
<div class="popup_block">
|
|
<div class="pop_header">
|
|
<div class="pop_name">{{pkObj.point_code + '/' + pkObj.point_name}}</div>
|
|
<div class="pop_status">
|
|
<!-- <div class="pop_status_dot" :class="{green:pkObj.status ==='2',red:pkObj.status ==='5',yellow:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
|
|
<div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="pop_content">
|
|
<div class="pop_item">
|
|
<div class="pop_label">状态</div>
|
|
<div class="pop_val">{{pkObj.point_status_name}}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">载具</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">BOM号</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">物料编码</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.material_code }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">数量</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.qty }}</div>
|
|
<div class="pop_unit">块</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">机台</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.device_name }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">碾次</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
|
|
</div>
|
|
<div class="pop_item">
|
|
<div class="pop_label">入库时间</div>
|
|
<div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tooltip_wrap left_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
|
|
<div class="tooltip_arrow pointer" @click.stop="expandTooltip" v-text="expand ? '>>' : '<<'"></div>
|
|
<div class="tooltip_pages" :style="expand ? 'width: 300px' : 'width: 0'">
|
|
<router-link to="/setup" class="tooltip_page">配置</router-link>
|
|
<router-link to="/homepageone" class="tooltip_page">1</router-link>
|
|
<router-link to="/hnlkone" class="tooltip_page">2</router-link>
|
|
<router-link to="/takeshapeone" class="tooltip_page">3</router-link>
|
|
<div class="tooltip_page current_page pointer">4</div>
|
|
<router-link to="/sortpackone" class="tooltip_page">5</router-link>
|
|
<router-link to="/pdone" class="tooltip_page">6</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { firingAndDryingPopover } from '@js/getData0'
|
|
export default {
|
|
name: 'one',
|
|
data () {
|
|
return {
|
|
expand: false,
|
|
top: '',
|
|
left: '',
|
|
youModel: '',
|
|
foldlineStyle: '',
|
|
pkId: '',
|
|
pkObj: {
|
|
aaa: 'aaa',
|
|
num: '3'
|
|
},
|
|
FinishedProductShelfList: []
|
|
}
|
|
},
|
|
mounted () {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
expandTooltip () {
|
|
this.expand = !this.expand
|
|
},
|
|
mouseoverHandle (e) {
|
|
this.FinishedProductShelfList.map(el => {
|
|
if (e.material_code !== '-' && e.material_code === el.material_code) {
|
|
el.bglight = true
|
|
} else {
|
|
el.bglight = false
|
|
}
|
|
})
|
|
},
|
|
mouseoutHandle (e) {
|
|
this.FinishedProductShelfList.map(el => {
|
|
el.bglight = false
|
|
})
|
|
},
|
|
getInfo1 (e, i) {
|
|
this.pkId = this.pkId ? '' : e.point_code
|
|
// this.pkId = e.point_code
|
|
this.pkObj = e
|
|
console.log(i)
|
|
if (i > 13 && i < 26) {
|
|
console.log(i, 666)
|
|
this.youModel = 'popup_block_wraper2'
|
|
this.foldlineStyle = 'foldline_left2'
|
|
} else {
|
|
this.youModel = ''
|
|
this.foldlineStyle = ''
|
|
}
|
|
},
|
|
closeModal () {
|
|
this.pkId = ''
|
|
this.pkObj = {}
|
|
},
|
|
async initData () {
|
|
let res = await firingAndDryingPopover()
|
|
this.FinishedProductShelfList = res.result.FinishedProductShelfList
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@css/mixin'
|
|
.n_container
|
|
_wh(100%, 100%)
|
|
.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.jpg')
|
|
.n_body_container_wraper
|
|
_wh(100%, 100%)
|
|
_fj()
|
|
.status_wrap
|
|
position absolute
|
|
top 0px
|
|
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 !important
|
|
.yellow
|
|
background-color $yellow !important
|
|
.gray
|
|
background-color $gray1 !important
|
|
.red
|
|
background-color $orange !important
|
|
.box1
|
|
position relative
|
|
_wh(100%, 100%)
|
|
.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)
|
|
.mtp_wrap_1
|
|
width 2.5%
|
|
top 39%
|
|
left 1%
|
|
.mtp
|
|
position relative
|
|
width 100%
|
|
// img
|
|
// _wh(100%, auto)
|
|
.img1
|
|
display inline-block
|
|
_wh(60px, 43px)
|
|
background center center / 100% 100% url(../../../images/workshop/ktp_gray.png) no-repeat
|
|
color #f00
|
|
.img2
|
|
display inline-block
|
|
_wh(60px, 43px)
|
|
background center center / 100% 100% url(../../../images/workshop/mtp.png) no-repeat
|
|
color #f00
|
|
.gtssj_wrap_1
|
|
width 2.5%
|
|
top 39%
|
|
left 7.6%
|
|
.gtssj
|
|
width 100%
|
|
img
|
|
_wh(100%, auto)
|
|
.cpj_wrap_1
|
|
width: 4%;
|
|
top: 42%;
|
|
left: 6.3%;
|
|
.cpj
|
|
width 100%
|
|
img
|
|
_wh(100%, auto)
|
|
.cdz_wrap_1
|
|
width: 3%;
|
|
top: 9%;
|
|
left: 3.5%;
|
|
.cdz
|
|
width 100%
|
|
img
|
|
_wh(100%, auto)
|
|
.cdz_wrap_2
|
|
top: 16%;
|
|
.yao_wrap
|
|
width 90%
|
|
top 7%
|
|
left auto
|
|
right 6%
|
|
background-color #676767
|
|
.yaosb
|
|
width 100%
|
|
img
|
|
_wh(100%, auto)
|
|
.yjbyx_1
|
|
width: 4%;
|
|
top: -2%;
|
|
left: 2%;
|
|
img
|
|
_wh(100%, auto)
|
|
.yjbyx_2
|
|
width: 4%;
|
|
top: -2%;
|
|
left: auto;
|
|
right: 2%;
|
|
img
|
|
_wh(100%, auto)
|
|
.mtp_wrap_3
|
|
width: 3.5%;
|
|
height: 10%;
|
|
// top: 85%;
|
|
top: 125%;
|
|
left: -0.8%;
|
|
transform rotate(-90deg)
|
|
z-index 4
|
|
.mtp
|
|
position relative
|
|
width 100%
|
|
margin-bottom 10%
|
|
img
|
|
_wh(100%, auto)
|
|
.mtp_wrap_4
|
|
left 18.3%
|
|
// top: 87%
|
|
top: 127%
|
|
.mtp_wrap_5
|
|
// top 105%
|
|
top 145%
|
|
z-index 0
|
|
.popup_block_wraper
|
|
position absolute
|
|
// top: 706%;
|
|
// left: -27%;
|
|
top: 650%;
|
|
left: -557%;
|
|
z-index 1
|
|
transform rotate(90deg)
|
|
.popup_block_wraper2
|
|
position absolute
|
|
top: -1080%;
|
|
left: -557%;
|
|
z-index 10
|
|
transform rotate(90deg)
|
|
.foldline_left2
|
|
left 530px
|
|
transform rotateY(0)
|
|
.yao_left
|
|
margin-left 20px
|
|
margin-top -160px
|
|
.yao_right
|
|
margin-right 300px
|
|
position absolute
|
|
top 72%
|
|
left 49.6%
|
|
</style>
|