物料工艺弹窗
This commit is contained in:
BIN
src/assets/images/device/arrow.png
Normal file
BIN
src/assets/images/device/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 534 B |
@@ -715,24 +715,72 @@ export const homepageEquipment = () => {
|
|||||||
'equipment': '压机7上料位1',
|
'equipment': '压机7上料位1',
|
||||||
'status': '4'
|
'status': '4'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机7上料位2',
|
||||||
|
'status': '4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机7上料位3',
|
||||||
|
'status': '4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机7上料位4',
|
||||||
|
'status': '4'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
'equipment': '压机8上料位1',
|
'equipment': '压机8上料位1',
|
||||||
'status': '4'
|
'status': '4'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机8上料位2',
|
||||||
|
'status': '4'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
'equipment': '压机9上料位1',
|
'equipment': '压机9上料位1',
|
||||||
'status': '1'
|
'status': '1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'equipment': '压机10上料位1',
|
'equipment': '压机9上料位2',
|
||||||
'status': '1'
|
'status': '1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'equipment': '压机11上料位1',
|
'equipment': '压机9上料位3',
|
||||||
'status': '1'
|
'status': '1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'equipment': '压机12上料位1',
|
'equipment': '压机9上料位4',
|
||||||
|
'status': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机9上料位5',
|
||||||
|
'status': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机9上料位6',
|
||||||
|
'status': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机9上料位7',
|
||||||
|
'status': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机9上料位8',
|
||||||
|
'status': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机9上料位9',
|
||||||
|
'status': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机9上料位10',
|
||||||
|
'status': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机9上料位11',
|
||||||
|
'status': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'equipment': '压机9上料位12',
|
||||||
'status': '1'
|
'status': '1'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="canvas_container" @click="rectClick">
|
<!-- <div class="canvas_container" @click="rectClick"> -->
|
||||||
|
<div class="canvas_container">
|
||||||
<canvas id="myCanvas" width="946" height="982"></canvas>
|
<canvas id="myCanvas" width="946" height="982"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
338
src/components/devicepop.vue
Normal file
338
src/components/devicepop.vue
Normal file
@@ -0,0 +1,338 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="pkId === data.equipment" class="popup_wraper" :class="{'popup_wraper_down': hangj === 1}">
|
||||||
|
<div class="popup_arrow" :class="{'popup_arrow_down': hangj === 1}">
|
||||||
|
<img src="../assets/images/device/arrow.png">
|
||||||
|
</div>
|
||||||
|
<div class="popup_bg">
|
||||||
|
<div class="popup_block">
|
||||||
|
<div v-show="type !== 'tp'" class="pop_header">
|
||||||
|
<div v-show="type !== 'lz' && type !== 'tp'" class="pop_name">{{data.equipment}}</div>
|
||||||
|
<div class="pop_status">
|
||||||
|
<div class="pop_status_dot" :class="data.status ==='1' ? 'green' : ''"></div>
|
||||||
|
<div class="pop_status_text fgray">运行</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'lz' || type === 'tp'" class="pop_content">
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">点位</div>
|
||||||
|
<div class="pop_val">{{data.equipment}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">载具</div>
|
||||||
|
<div class="pop_val">L007</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item pop_item_l">
|
||||||
|
<div class="pop_label">物料</div>
|
||||||
|
<div class="pop_val">W001</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item pop_item_l">
|
||||||
|
<div class="pop_label">名称</div>
|
||||||
|
<div class="pop_val">物料1</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'lz'" class="pop_item">
|
||||||
|
<div class="pop_label">重量</div>
|
||||||
|
<div class="pop_val">80 <span>KG</span></div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'tp'" class="pop_item">
|
||||||
|
<div class="pop_label">数量</div>
|
||||||
|
<div class="pop_val">800 <span>块</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">批次</div>
|
||||||
|
<div class="pop_val">20201010</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div v-if="type === 'lz'" class="pop_label">组盘时间</div>
|
||||||
|
<div v-if="type === 'tp'" class="pop_label">组盘/入库时间</div>
|
||||||
|
<div class="pop_val">2020-10-10 19:20:20</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'lz'" class="pop_item">
|
||||||
|
<div class="pop_label">已静置</div>
|
||||||
|
<div class="pop_val">8 <span>h</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'hlj' || type === 'yj' || type === 'yao' || type === 'cdjxs'" class="pop_content">
|
||||||
|
<div v-if="type !== 'yao'" class="pop_item pop_item_l">
|
||||||
|
<div class="pop_label">当前生产</div>
|
||||||
|
<div class="pop_val">铝碳化硅碳ACTTEXDA10M250X150X7523Z002</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">已工作时间</div>
|
||||||
|
<div class="pop_val">8 <span>h</span></div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'hlj' || type === 'yj'" class="pop_item">
|
||||||
|
<div class="pop_label">已生产总量</div>
|
||||||
|
<div class="pop_val">2300 <span>KG</span></div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'yao'" class="pop_item">
|
||||||
|
<div class="pop_label">窑内物料数量</div>
|
||||||
|
<div class="pop_val">2300 <span>块</span></div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'yao'" class="pop_item">
|
||||||
|
<div class="pop_label">当日已生产</div>
|
||||||
|
<div class="pop_val">2300 <span>块</span></div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'cdjxs'" class="pop_item">
|
||||||
|
<div class="pop_label">完成托盘数</div>
|
||||||
|
<div class="pop_val">2300 <span>托</span></div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'cdjxs'" class="pop_item">
|
||||||
|
<div class="pop_label">完成数量</div>
|
||||||
|
<div class="pop_val">2300 <span>块</span></div>
|
||||||
|
</div>
|
||||||
|
<table class="popup_table">
|
||||||
|
<tr>
|
||||||
|
<th>本日生产</th>
|
||||||
|
<th v-if="type === 'hlj'">已生产数量</th>
|
||||||
|
<th v-else>客户</th>
|
||||||
|
<th v-if="type === 'hlj'">单位</th>
|
||||||
|
<th v-else>已生产（块）</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>铝碳化硅碳ACTTEXDA10M250X150X7523Z002</td>
|
||||||
|
<td v-if="type === 'hlj'">1500</td>
|
||||||
|
<td v-else>新余</td>
|
||||||
|
<td v-if="type === 'hlj'">KG</td>
|
||||||
|
<td v-else>1000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>铝碳化硅碳ACTTEXDA10M250X150X7523Z002</td>
|
||||||
|
<td v-if="type === 'hlj'">1500</td>
|
||||||
|
<td v-else>新余</td>
|
||||||
|
<td v-if="type === 'hlj'">KG</td>
|
||||||
|
<td v-else>1000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>铝碳化硅碳ACTTEXDA10M250X150X7523Z002</td>
|
||||||
|
<td v-if="type === 'hlj'">1500</td>
|
||||||
|
<td v-else>新余</td>
|
||||||
|
<td v-if="type === 'hlj'">KG</td>
|
||||||
|
<td v-else>1000</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'hangj'" class="pop_content">
|
||||||
|
<div class="pop_item pop_item_l">
|
||||||
|
<div class="pop_label">当前物料</div>
|
||||||
|
<div class="pop_val">L007</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">当前载具</div>
|
||||||
|
<div class="pop_val">T001</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">当前物料数量</div>
|
||||||
|
<div class="pop_val">800 <span>块</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">当日搬运托盘数</div>
|
||||||
|
<div class="pop_val">800 <span>托</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">当日搬运数量</div>
|
||||||
|
<div class="pop_val">800 <span>块</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">当日搬运物料数</div>
|
||||||
|
<div class="pop_val">800 <span>个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'ssx'" class="pop_content">
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">已工作时间</div>
|
||||||
|
<div class="pop_val">3 <span>h</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">输入托盘数</div>
|
||||||
|
<div class="pop_val">800 <span>托</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">输入数量</div>
|
||||||
|
<div class="pop_val">800 <span>块</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">输出托盘数</div>
|
||||||
|
<div class="pop_val">800 <span>托</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">输出数量</div>
|
||||||
|
<div class="pop_val">800 <span>块</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'cpj'" class="pop_content">
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">已工作时间</div>
|
||||||
|
<div class="pop_val">3 <span>h</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">完成托盘数</div>
|
||||||
|
<div class="pop_val">800 <span>托</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">完成垛数</div>
|
||||||
|
<div class="pop_val">800 <span>垛</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'tpccx'" class="pop_content">
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">已工作时间</div>
|
||||||
|
<div class="pop_val">3 <span>h</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">当前托盘垛数</div>
|
||||||
|
<div class="pop_val">800 <span>垛</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pop_item">
|
||||||
|
<div class="pop_label">当前托盘数量</div>
|
||||||
|
<div class="pop_val">100 <span>个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="iconfont icon-guanbi close_btn" @click="closePop"></div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'devicepop',
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
pkId: String,
|
||||||
|
data: Object,
|
||||||
|
hangj: Number
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closePop () {
|
||||||
|
this.$emit('closePop')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
@import '~@css/mixin'
|
||||||
|
.popup_wraper
|
||||||
|
position absolute
|
||||||
|
left 50%
|
||||||
|
transform translateX(-50%) translateY(-80px)
|
||||||
|
bottom 0
|
||||||
|
z-index 100
|
||||||
|
padding 20px 0 30px 0
|
||||||
|
background top center / 100% 100% url(../assets/images/screen3/popup_bg.png) no-repeat
|
||||||
|
_wh(530px, auto)
|
||||||
|
.popup_wraper_down
|
||||||
|
bottom auto
|
||||||
|
top 0
|
||||||
|
transform translateX(-50%) translateY(80px)
|
||||||
|
.popup_arrow
|
||||||
|
position absolute
|
||||||
|
_wh(22px, 23px)
|
||||||
|
left calc(50% - 11px)
|
||||||
|
bottom -20px
|
||||||
|
animation todown 1.5s ease-in infinite
|
||||||
|
img
|
||||||
|
_wh(100%, 100%)
|
||||||
|
.popup_arrow_down
|
||||||
|
bottom auto
|
||||||
|
top -20px
|
||||||
|
animation toup 1.5s ease-in infinite
|
||||||
|
img
|
||||||
|
transform rotateZ(180deg)
|
||||||
|
.popup_bg
|
||||||
|
_wh(100%, auto)
|
||||||
|
background none
|
||||||
|
overflow hidden
|
||||||
|
.popup_block
|
||||||
|
_wh(100%,100%)
|
||||||
|
padding 0
|
||||||
|
.pop_header
|
||||||
|
_wh(calc(100% - 28px), 43px)
|
||||||
|
padding 15px 5px 0 5px
|
||||||
|
margin 0 14px
|
||||||
|
_fj(flex-end)
|
||||||
|
background top center / 100% 18px url(../assets/images/screen3/popup_line.png) no-repeat
|
||||||
|
.pop_name
|
||||||
|
width 50%
|
||||||
|
_font(14px,28px,#32C5FF,,left)
|
||||||
|
text-shadow 2px 2px 4px #A6E6FF
|
||||||
|
margin-bottom 8px
|
||||||
|
.pop_status
|
||||||
|
_wh(50%, 28px)
|
||||||
|
_fj(flex-end)
|
||||||
|
.pop_status_dot
|
||||||
|
_wh(15px, 15px)
|
||||||
|
border-radius 50%
|
||||||
|
margin-right 10px
|
||||||
|
.pop_status_text
|
||||||
|
_font(16px, 28px, #fff,,)
|
||||||
|
.pop_content
|
||||||
|
_wh(calc(100% - 14px), auto)
|
||||||
|
padding 0 5px
|
||||||
|
margin 0 7px
|
||||||
|
overflow-y auto
|
||||||
|
_fj(flex-start)
|
||||||
|
align-content flex-start
|
||||||
|
flex-wrap wrap
|
||||||
|
.pop_item
|
||||||
|
_wh(calc(50% - 14px), 24px)
|
||||||
|
_fj(row,flex-start)
|
||||||
|
background-color rgba(50,197,255,50%)
|
||||||
|
border-left 3px solid #fdfd0f
|
||||||
|
margin 0 7px 5px 7px
|
||||||
|
padding 0 10px 0 5px
|
||||||
|
.pop_item_l
|
||||||
|
width calc(100% - 14px)
|
||||||
|
.pop_label
|
||||||
|
width 80px
|
||||||
|
_font(12px, 24px, #fff,,left)
|
||||||
|
.pop_val
|
||||||
|
width calc(100% - 80px)
|
||||||
|
_font(13px, 24px, #0ff,,left)
|
||||||
|
white-space nowrap
|
||||||
|
span
|
||||||
|
font-size 13px
|
||||||
|
color #fff
|
||||||
|
.icon-guanbi
|
||||||
|
position absolute
|
||||||
|
top -30px
|
||||||
|
right -30px
|
||||||
|
_wh(30px, 30px)
|
||||||
|
_font(18px, 30px, #fff,,center)
|
||||||
|
border 1px solid #fff
|
||||||
|
border-radius 50%
|
||||||
|
background transparent
|
||||||
|
@keyframes todown {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(20px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes toup {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(-20px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popup_table
|
||||||
|
width calc(100% - 14px)
|
||||||
|
margin 0 7px
|
||||||
|
tr
|
||||||
|
th
|
||||||
|
_font(12px, 24px, #0ff,,left)
|
||||||
|
background-color #262f52
|
||||||
|
padding 0 10px
|
||||||
|
td
|
||||||
|
_font(13px, 24px, #fff,,left)
|
||||||
|
padding 0 10px
|
||||||
|
&:nth-child(2n)
|
||||||
|
td
|
||||||
|
background rgba(38,47,82,0.50)
|
||||||
|
&:nth-child(2n+1)
|
||||||
|
td
|
||||||
|
background rgba(38,47,82,0.80)
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -695,7 +695,6 @@ export default {
|
|||||||
.container
|
.container
|
||||||
_wh(100%, calc(100% - 1.38rem))
|
_wh(100%, calc(100% - 1.38rem))
|
||||||
padding .3rem .2509rem 0
|
padding .3rem .2509rem 0
|
||||||
overflow hidden
|
|
||||||
clear both
|
clear both
|
||||||
.bottom
|
.bottom
|
||||||
_wh(100%, .38rem)
|
_wh(100%, .38rem)
|
||||||
|
|||||||
Reference in New Issue
Block a user