添加设备图片
This commit is contained in:
190
src/pages/modules/home/devicepop.vue
Normal file
190
src/pages/modules/home/devicepop.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div v-if="pkId === data.equipment" class="popup_wraper" :class="{'popup_wraper_down': direction === 'down'}">
|
||||
<div class="popup_arrow" :class="{'popup_arrow_down': direction === 'down'}">
|
||||
<img src="../../../images/device/arrow.png">
|
||||
</div>
|
||||
<div class="popup_bg">
|
||||
<div class="popup_block">
|
||||
<div v-show="data.hasOwnProperty('equipmentName') === true || data.hasOwnProperty('statusChinese') === true" class="pop_header">
|
||||
<div v-show="data.hasOwnProperty('equipmentName') === true" class="pop_name">{{data.equipmentName}}</div>
|
||||
<div v-show="data.hasOwnProperty('statusChinese') === true" class="pop_status">
|
||||
<div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.status) - 1]"></div>
|
||||
<div class="pop_status_text fgray">{{ data.statusChinese }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop_content">
|
||||
<div class="popup_item" v-for="e in data.data" :key="e.key">
|
||||
<div class="popup_label">{{ e.key }}</div>
|
||||
<div class="popup_val">{{ e.value }}</div>
|
||||
</div>
|
||||
<div v-if="data.hasOwnProperty('table') === true" class="popup_table_wrap">
|
||||
<table v-if="data.table.length > 0" class="popup_table">
|
||||
<tr>
|
||||
<th width="40%">本日生产</th>
|
||||
<th width="30%">客户</th>
|
||||
<th width="30%" v-if="type === 'hlj'">已生产（千克）</th>
|
||||
<th width="30%" v-else>已生产（块）</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in data.table" :key="i">
|
||||
<td width="40%">{{ e.material_name }}</td>
|
||||
<td width="30%">{{ e.kh }}</td>
|
||||
<td width="30%" v-if="type === 'hlj'">{{ e.weight }}</td>
|
||||
<td width="30%" v-else>{{ e.qty }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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,
|
||||
direction: String
|
||||
},
|
||||
methods: {
|
||||
closePop () {
|
||||
this.$emit('closePop')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.popup_wraper
|
||||
position absolute
|
||||
left 50%
|
||||
transform translateX(-50%) translateY(calc(-100% - 13px))
|
||||
top 0
|
||||
z-index 100
|
||||
padding 20px 0 30px 0
|
||||
background top center / 100% 100% url(../../../images/popup_bg.png) no-repeat
|
||||
_wh(530px, auto)
|
||||
.popup_wraper_down
|
||||
top auto
|
||||
bottom 0
|
||||
transform translateX(-50%) translateY(calc(100% + 13px))
|
||||
.popup_arrow
|
||||
position absolute
|
||||
_wh(22px, 23px)
|
||||
left calc(50% - 11px)
|
||||
bottom -23px
|
||||
// animation todown 1.5s ease-in-out infinite
|
||||
img
|
||||
_wh(100%, 100%)
|
||||
.popup_arrow_down
|
||||
bottom auto
|
||||
top -23px
|
||||
// animation toUp 1.5s ease-in-out 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(../../../images/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
|
||||
.popup_item
|
||||
_wh(calc(50% - 14px), 36px)
|
||||
_fj(row,flex-start)
|
||||
background-color rgba(50,197,255,50%)
|
||||
border-left 3px solid #fdfd0f
|
||||
margin 0 7px 5px 7px
|
||||
padding 0 5px 0 5px
|
||||
.popup_label
|
||||
width 80px
|
||||
_font(12px, 36px, #fff,,left)
|
||||
.popup_val
|
||||
_wh(calc(100% - 80px), 100%)
|
||||
_font(12px, 15px, #0ff,,left)
|
||||
word-break break-all
|
||||
_fj(center)
|
||||
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(60px)
|
||||
}
|
||||
}
|
||||
@keyframes toUp {
|
||||
0% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-60px)
|
||||
}
|
||||
}
|
||||
.popup_table_wrap
|
||||
width 100%
|
||||
max-height 132px
|
||||
.popup_table
|
||||
width calc(100% - 14px)
|
||||
height auto
|
||||
margin 0 7px
|
||||
tr
|
||||
th
|
||||
_font(12px, 24px, #0ff,,left)
|
||||
background-color #262f52
|
||||
padding 0 10px
|
||||
td
|
||||
_font(13px, 18px, #fff,,left)
|
||||
min-height 24px
|
||||
padding 0 10px
|
||||
vertical-align middle
|
||||
&:nth-child(2n)
|
||||
td
|
||||
background rgba(38,47,82,0.50)
|
||||
&:nth-child(2n+1)
|
||||
td
|
||||
background rgba(38,47,82,0.80)
|
||||
</style>
|
||||
Reference in New Issue
Block a user