230 lines
7.4 KiB
Vue
230 lines
7.4 KiB
Vue
|
<template>
|
|||
|
|
<section class="bg">
|
|||
|
|
<t-header title="宜宾高测原料称重看板">
|
|||
|
|
</t-header>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="sec sec1">
|
|||
|
|
<div class="four_wrap">
|
|||
|
|
<div class="item_tip item_tip_bg_l">
|
|||
|
|
<div class="item_tip_left">托盘信息</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item_content con01">
|
|||
|
|
<div class="lbox">
|
|||
|
|
<div class="list-con" style="width: 100%; height: 100%;">
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">母托盘：<span>{{ resData.mother_tray }}M100001</span></p>
|
|||
|
|
<p class="li-right">子托盘：<span>{{ resData.sub_tray }}Z100001</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">物料编码：<span>{{ resData.material_code }}WL001</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">物料名称：<span>{{ resData.material_name }}方形晶棒 10*10*190</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">总数量(条)：<span>{{ resData.number }}60</span></p>
|
|||
|
|
<p class="li-right">总重量(kg)：<span>{{ resData.qty }}1250</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">入库类型：<span>{{ resData.simtType }}采购</span></p>
|
|||
|
|
<p class="li-right">场 地：<span>{{ resData.locationCode }}XX仓库</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">供应商：<span>{{ resData.supplierName }}XX有限责任公司</span></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="four_wrap">
|
|||
|
|
<div class="item_tip item_tip_bg_l">
|
|||
|
|
<div class="item_tip_left">检测信息</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item_content con01">
|
|||
|
|
<div class="lbox">
|
|||
|
|
<div class="list-con" style="width: 100%; height: 100%;">
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">点位状态:<span>{{ resData.point_qty }}</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">称重设备:<span :class="{cgreen:resData.device_type ==='正常',cyellow:resData.device_type ==='离线',cred:resData.device_type ==='故障中'}">{{ resData.device_type }}</span></p>
|
|||
|
|
<p class="li-right">检测框架:<span :class="{cgreen:resData.frame_type ==='正常',cyellow:resData.frame_type ==='离线',cred:resData.frame_type ==='故障中'}">{{ resData.frame_type }}</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="li">
|
|||
|
|
<p class="li-left">母托扫码:<span :class="{cgreen:resData.mother_type ==='正常',cyellow:resData.mother_type ==='离线',cred:resData.mother_type ==='故障中'}">{{ resData.mother_type }}</span></p>
|
|||
|
|
<p class="li-right">子托扫码:<span :class="{cgreen:resData.sub_type ==='正常',cyellow:resData.sub_type ==='离线',cred:resData.sub_type ==='故障中'}">{{ resData.sub_type }}</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom-con">
|
|||
|
|
<div>
|
|||
|
|
<div class="tipImg" :class="{bgred:resData.error !== '正常',bggreen: resData.error === '正常'}"></div>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="resData.error !== '正常'">
|
|||
|
|
<p>外形检测超宽异常！</p>
|
|||
|
|
<p>错误码：{{resData.error}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<section class="bottom"></section>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import THeader from '@components/header3.vue'
|
|||
|
|
// import { cz } from '@js/getData1'
|
|||
|
|
import {cz} from '@js/mork00.js'
|
|||
|
|
export default {
|
|||
|
|
name: 'ProdCount',
|
|||
|
|
components: {
|
|||
|
|
THeader
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
timeOut: null,
|
|||
|
|
interTime: this.$store.getters.setTime,
|
|||
|
|
timer: null,
|
|||
|
|
resData: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
defaultOption2 () {
|
|||
|
|
return {
|
|||
|
|
timer1: null,
|
|||
|
|
timer2: null,
|
|||
|
|
step: 0.4, // 数值越大速度滚动越快
|
|||
|
|
limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
|
|||
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|||
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|||
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|||
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|||
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|||
|
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
this.initData()
|
|||
|
|
this.refresh()
|
|||
|
|
},
|
|||
|
|
beforeDestroy () {
|
|||
|
|
clearInterval(this.timer)
|
|||
|
|
clearInterval(this.timeOut)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
refresh () {
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
this.initData()
|
|||
|
|
}, this.interTime)
|
|||
|
|
},
|
|||
|
|
async initData () {
|
|||
|
|
let res = await cz()
|
|||
|
|
clearInterval(this.timeOut)
|
|||
|
|
this.resData = res
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus" scoped>
|
|||
|
|
// @import '~@css/mixin'
|
|||
|
|
@import '../../css/mixin'
|
|||
|
|
// @import '~@style/mixin'
|
|||
|
|
.bg
|
|||
|
|
_wh(100%, 100%)
|
|||
|
|
overflow hidden
|
|||
|
|
.container
|
|||
|
|
display flex
|
|||
|
|
align-items center
|
|||
|
|
flex-direction column
|
|||
|
|
_wh(100%, calc(100% - 138px))
|
|||
|
|
padding 30px 25.09px 0
|
|||
|
|
overflow hidden
|
|||
|
|
clear both
|
|||
|
|
.sec
|
|||
|
|
width 100%
|
|||
|
|
.sec1
|
|||
|
|
display flex
|
|||
|
|
justify-content space-between
|
|||
|
|
.sec2
|
|||
|
|
display flex
|
|||
|
|
.bottom
|
|||
|
|
_wh(100%, 38px)
|
|||
|
|
background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
|
|||
|
|
.cblue
|
|||
|
|
color #32C5FF !important
|
|||
|
|
.cgreen
|
|||
|
|
color #6ce64e !important
|
|||
|
|
.cgray
|
|||
|
|
color #516282 !important
|
|||
|
|
.cyellow
|
|||
|
|
color #E2BB0E !important
|
|||
|
|
.corange
|
|||
|
|
color #F96700 !important
|
|||
|
|
.cred
|
|||
|
|
color #FF0000 !important
|
|||
|
|
.bgred
|
|||
|
|
background #FF0000 !important
|
|||
|
|
.bggreen
|
|||
|
|
background #6CE64E !important
|
|||
|
|
|
|||
|
|
.four_wrap
|
|||
|
|
// _wh(100%, calc(39% - 20px))
|
|||
|
|
margin-top 40px
|
|||
|
|
height 88%
|
|||
|
|
width 50%
|
|||
|
|
padding 0 1%
|
|||
|
|
.item_tip
|
|||
|
|
_wh(100%, 32px)
|
|||
|
|
line-height 32px
|
|||
|
|
padding 0 10px
|
|||
|
|
.item_tip_bg_l
|
|||
|
|
background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
|
|||
|
|
.item_tip_left
|
|||
|
|
_wh(60%, 100%)
|
|||
|
|
font-family "SourceHanSansCN"
|
|||
|
|
_font(18px, inherit, #fff, 700, left)
|
|||
|
|
letter-spacing 2px
|
|||
|
|
text-shadow 0 0 9px #159AFF
|
|||
|
|
padding-left 34px
|
|||
|
|
background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
|
|||
|
|
.item_content
|
|||
|
|
_wh(100%, calc(100% - 37px))
|
|||
|
|
margin-top 7px
|
|||
|
|
.lbox
|
|||
|
|
.list-con
|
|||
|
|
.li
|
|||
|
|
display flex
|
|||
|
|
color #fff
|
|||
|
|
font-weight bold
|
|||
|
|
font-size 36px
|
|||
|
|
line-height 120px
|
|||
|
|
justify-content space-between
|
|||
|
|
padding 0 20px
|
|||
|
|
span
|
|||
|
|
color #f7b502
|
|||
|
|
margin 0 20px
|
|||
|
|
.li-right
|
|||
|
|
margin-left 20px
|
|||
|
|
.bottom-con
|
|||
|
|
display flex
|
|||
|
|
justify-content space-around
|
|||
|
|
margin-top 100px
|
|||
|
|
.tipImg
|
|||
|
|
margin-left 30px
|
|||
|
|
width 120px
|
|||
|
|
height 120px
|
|||
|
|
border 1px solid #000
|
|||
|
|
border-radius 60px
|
|||
|
|
// background #6CE64E
|
|||
|
|
p
|
|||
|
|
font-size 40px
|
|||
|
|
color #df63fb
|
|||
|
|
font-weight bold
|
|||
|
|
text-align center
|
|||
|
|
line-height 70px
|
|||
|
|
</style>
|