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>
|