root/screenkb-gaoce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

入库看吧

Browse Source
This commit is contained in:
xiangxy
2024-04-18 11:13:48 +08:00
parent bfbf95f944
commit e49cdfcd31
6 changed files with 1088 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
src/pages/modules/InStore.vue Normal file
View File

@@ -0,0 +1,436 @@
<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 id="echart_d01" style="width: 100%; height: 100%"></div>
</div>
<div class="rbox">
<div class="rbox-con">
<div class="title">总库存</div>
<div class="desc"><span>12000</span><span>条</span></div>
<div class="desc"><span>2000</span><span>吨</span></div>
</div>
<div class="rbox-con">
<div class="title">待入库存</div>
<div class="desc"><span>2000</span><span>条</span></div>
<div class="desc"><span>50</span><span>吨</span></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>400</span>个</p>
<p class="li-right">已使用:<span>200</span>个</p>
</div>
<div class="li">
<p class="li-left">剩余数:<span>200</span>个</p>
</div>
<div class="li">
<p class="li-left">空托位数:<span>20</span>个</p>
<p class="li-right">剩余:<span>10</span>个</p>
</div>
<div class="li">
<p class="li-left">空托盘垛:<span>10</span>垛</p>
<p class="li-right">数量:<span>60</span>个</p>
</div>
</div>
</div>
<div class="rbox">
<div class="rbox-con">
<!-- <div class="title">总库存</div>
<div class="desc"><span>12000</span><span>条</span></div>
<div class="desc"><span>2000</span><span>吨</span></div> -->
</div>
<div class="rbox-con">
<!-- <div class="title">待入库存</div>
<div class="desc"><span>2000</span><span>条</span></div>
<div class="desc"><span>50</span><span>吨</span></div> -->
</div>
</div>
</div>
</div>
</div>
<div class="sec sec2">
<div class="four_wrap">
<div class="item_tip item_tip_bg_l">
<div class="item_tip_left">库内物料</div>
</div>
<div class="item_content">
<div class="scroll_wrap">
<ul class="scroll_tab_2">
<li>序号</li>
<li>托盘号</li>
<li>物料编码</li>
<li>名称</li>
<li>数量(条)</li>
<li>重量(kg)</li>
<li>供应商</li>
</ul>
<div class="scroll_container_2">
<vue-seamless-scroll :data="ProductionTask" :class-option="defaultOption2">
<ul class="scroll-ul_2">
<li v-for="(e, i) in ProductionTask" :key="i" :class="['green', 'red'][Number(e.state)]">
<div class="scroll-ul_2_div">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.palletSN}}</div>
<div class="scroll-ul_2_div">{{e.productName}}</div>
<div class="scroll-ul_2_div">{{e.productDescription}}</div>
<div class="scroll-ul_2_div">{{e.qty}}</div>
<div class="scroll-ul_2_div">{{e.incomingWeight}}</div>
<div class="scroll-ul_2_div">{{e.supplierName}}</div>
</li>
</ul>
</vue-seamless-scroll>
</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">
<div class="scroll_wrap">
<ul class="scroll_tab_2">
<li>序号</li>
<li>托盘号</li>
<li>物料编码</li>
<li>名称</li>
<li>数量(条)</li>
<li>重量(kg)</li>
<li>供应商</li>
</ul>
<div class="scroll_container_2">
<vue-seamless-scroll :data="ProductionTask" :class-option="defaultOption2">
<ul class="scroll-ul_2">
<li v-for="(e, i) in ProductionTask" :key="i" :class="['green', 'red'][Number(e.state)]">
<div class="scroll-ul_2_div">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.palletSN}}</div>
<div class="scroll-ul_2_div">{{e.productName}}</div>
<div class="scroll-ul_2_div">{{e.productDescription}}</div>
<div class="scroll-ul_2_div">{{e.qty}}</div>
<div class="scroll-ul_2_div">{{e.incomingWeight}}</div>
<div class="scroll-ul_2_div">{{e.supplierName}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="bottom"></section>
</section>
</template>
<script>
import THeader from '@components/header3.vue'
import { cockpitpress } from '@js/getData1'
// import {cockpitpress} from '@js/mork1.js'
export default {
name: 'ProdCount',
components: {
THeader
},
data () {
return {
timeOut: null,
interTime: this.$store.getters.setTime,
timer: null,
ProductionTask: [],
ShiftProductionList: [],
resData: {},
myCharts01: ''
}
},
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.setEchart01()
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 cockpitpress()
clearInterval(this.timeOut)
this.resData = res
this.ProductionTask = res.ProductionTask
this.ShiftProductionList = res.ShiftProductionList
},
setEchart01 () {
let data = [
{
value: 10,
name: '1号砖'
},
{
value: 20,
name: '2号砖'
},
{
value: 30,
name: '3号砖'
},
{
value: 40,
name: '4号砖'
},
{
value: 50,
name: '5号砖'
},
{
value: 60,
name: '6号砖'
}
]
// let dataName = []
// this.resData.mixProduction.map(el => {
// dataName.push(el.name)
// })
// let data = this.resData.mixProduction
var option = {
legend: {
// orient: 'vertical',
orient: 'horizontal',
top: '3%',
// right: 0,
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 16
},
itemGap: 10.86,
itemWidth: 14.16,
itemHeight: 7.38,
// data: dataName
data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
},
color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
series: [
{
type: 'pie',
radius: ['43%', '70%'],
label: {
normal: {
show: true,
// position: 'inner',
formatter: '{d}%',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 12
}
}
},
labelLine: {
show: true
},
data: data
}
]
}
let echart = document.getElementById('echart_d01')
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
}
}
}
</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
justify-content center
flex-direction column
_wh(100%, calc(100% - 138px))
padding 30px 25.09px 0
overflow hidden
clear both
.sec
width 100%
height 50%
.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
.blue
color #32C5FF !important
.green
color #30EBC9 !important
.gray
color #516282 !important
.yellow
color #E2BB0E !important
.orange
color #F96700 !important
.red
color #FF0000 !important
.con01
width 48%
display flex
.lbox
width 70%
.rbox
width 30%
.rbox-con
height 50%
.title
font-size 32px
background #548ddd
color #ffffff
text-indent 10px
.desc
font-size 30px
span
display inline-block
line-height 62px
&:nth-child(1)
width 80%
text-align left
color #f7b502
font-weight bold
text-indent 10px
&:nth-child(2)
width 20%
text-align center
color #ffffff
.four_wrap
// _wh(100%, calc(39% - 20px))
margin-top 40px
height 88%
width 50%
padding 0 1%
.scroll-ul_1
width 100%
li
width 100%
line-height 40px
span
_font(16px, 1, #fff,,)
.scroll_th
color #2ef6ff
.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
.scroll_wrap
_wh(100%, 100%)
border 1px solid rgba(8,205,248,0.3)
.scroll_tab_2
_wh(100%, 40px)
border-bottom 1px solid rgba(8,205,248,0.3)
li
float left
width 14%
_font(14px,40px,#78B1DE,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 2px
overflow hidden
box-sizing border-box
.scroll_container_2
width 100%
// height calc(100% - 40px)
// height 230px
overflow hidden
.scroll-ul_2
li
_wh(100%, 44px)
border-bottom 1px solid rgba(8,205,248,0.3)
&:nth-child(even)
background rgba(1,24,52,0.60)
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_2_div
float left
_wh(14%, 44px)
_fj(center)
_font(12px, 44px, #fff,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 2px
overflow hidden
.lbox
.list-con
.li
display flex
color #fff
font-weight bold
font-size 36px
line-height 100px
justify-content space-between
padding 0 20px
span
color #f7b502
margin 0 20px
.li-right
margin-left 20px
</style>