多仓库
This commit is contained in:
240
src/pages/ccjk/screen02.vue
Normal file
240
src/pages/ccjk/screen02.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="box relative">
|
||||
<t-header type="1" title1="仓储监控" title2="WMS仓储看板"></t-header>
|
||||
<div class="box body_container">
|
||||
<div class="acon" v-for="(e, i) in resDataArr" :key="i">
|
||||
<div class="relative b_title">
|
||||
<span class="absolute sj_icon"></span>
|
||||
<p>{{ e.storsName }}</p>
|
||||
</div>
|
||||
<div class="zd-row wraper_1 mgb8">
|
||||
<div class="box zd-col-7 mgr8">
|
||||
<div class="relative wraper_2 mgb8">
|
||||
<div class="absolute bg_j bg_j_1"></div>
|
||||
<div class="absolute bg_j bg_j_2"></div>
|
||||
<div class="absolute bg_j bg_j_3"></div>
|
||||
<div class="absolute bg_j bg_j_4"></div>
|
||||
<p class="title">货位使用</p>
|
||||
<div class="zd-row wraper_4">
|
||||
<div class="box percent_item">
|
||||
<p>{{ e.pointUse.use_percentage }}</p>
|
||||
</div>
|
||||
<div class="box zd-col-16 zd-row flexcol jccenter">
|
||||
<div class="zd-row mgb8">
|
||||
<p class="zd-col-8 item_label">总货位数</p>
|
||||
<p class="zd-col-16 item_value">{{ e.pointUse.total_qty }}<span class="item_unit">个</span></p>
|
||||
</div>
|
||||
<div class="zd-row mgb8">
|
||||
<p class="zd-col-8 item_label">已用货位</p>
|
||||
<p class="zd-col-16 item_value">{{ e.pointUse.use_qty }}<span class="item_unit">个</span></p>
|
||||
</div>
|
||||
<div class="zd-row">
|
||||
<p class="zd-col-8 item_label">空余货位</p>
|
||||
<p class="zd-col-16 item_value">{{ e.pointUse.emp_qty }}<span class="item_unit">个</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative wraper_2">
|
||||
<div class="absolute bg_j bg_j_1"></div>
|
||||
<div class="absolute bg_j bg_j_2"></div>
|
||||
<div class="absolute bg_j bg_j_3"></div>
|
||||
<div class="absolute bg_j bg_j_4"></div>
|
||||
<p class="title">今日出入库</p>
|
||||
<div class="wraper_4 zd-row flexcol jccenter">
|
||||
<div class="zd-row flexstart mgb8">
|
||||
<div class="zd-col-3 item_label">入库</div>
|
||||
<div class="zd-col-21">
|
||||
<div class="percent_line">
|
||||
<!-- <div class="percent_i" :style="{'width': inw}"></div> -->
|
||||
<div class="percent_i" :style="{'width': getPercentage(e.toDayInAndOut.in.vehicle_qty, e.toDayInAndOut.in.total_qty)}"></div>
|
||||
</div>
|
||||
<div class="zd-row">
|
||||
<!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ inqty1 }}</span></p> -->
|
||||
<p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.in.total_qty }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zd-row flexstart">
|
||||
<div class="zd-col-3 item_label">出库</div>
|
||||
<div class="zd-col-21">
|
||||
<div class="percent_line percent_line_c">
|
||||
<!-- <div class="percent_i percent_i_c" :style="{'width': outw}"></div> -->
|
||||
<div class="percent_i percent_i_c" :style="{'width': getPercentage(e.toDayInAndOut.out.vehicle_qty, e.toDayInAndOut.out.total_qty)}"></div>
|
||||
</div>
|
||||
<div class="zd-row">
|
||||
<!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ outqty1 }}</span></p> -->
|
||||
<p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.out.total_qty }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<sec-two :weobj="e"></sec-two>
|
||||
<sec-three :weobj="e"></sec-three>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
import SecTwo from './secTwo.vue'
|
||||
import SecThree from './secThree.vue'
|
||||
// import { synthesizeInfo } from '@js/getData2.js'
|
||||
import { synthesizeInfo } from '@js/mork02.js'
|
||||
export default {
|
||||
components: {
|
||||
THeader,
|
||||
SecTwo,
|
||||
SecThree
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
intervalId: null,
|
||||
materList: [],
|
||||
historyList: [],
|
||||
pointUse: {}, // 料箱货位使用
|
||||
toDayInAndOut: {}, // 料箱今日出入库
|
||||
inw: '0',
|
||||
inqty1: '0',
|
||||
outw: '0',
|
||||
outqty1: '0',
|
||||
resDataArr: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
let obj = {
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime,
|
||||
setJxtTime: this.$store.getters.setJxtTime,
|
||||
pageNo: this.$store.getters.pageNo,
|
||||
iskb: '02',
|
||||
secCode: this.$store.getters.secCode
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
this._synthesizeInfo()
|
||||
this.timerFun(this._synthesizeInfo, this.interTime)()
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
destroyed () {
|
||||
// if (this.intervalId !== null) {
|
||||
// clearTimeout(this.intervalId)
|
||||
// this.intervalId = null
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
getPercentage (part, whole) {
|
||||
if (Number(whole) === 0) {
|
||||
return 0
|
||||
}
|
||||
const percentage = (part / whole * 100).toFixed(2)
|
||||
return `${percentage}%`
|
||||
},
|
||||
timerFun (f, time) {
|
||||
let _this = this
|
||||
return function backFun () {
|
||||
clearTimeout(_this.intervalId)
|
||||
_this.intervalId = setTimeout(function () {
|
||||
f()
|
||||
backFun()
|
||||
}, time)
|
||||
}
|
||||
},
|
||||
async _synthesizeInfo () {
|
||||
let res = await synthesizeInfo(this.$store.getters.secCode)
|
||||
this.resDataArr = res.data
|
||||
this.pointUse = res.data[0].pointUse
|
||||
this.toDayInAndOut = res.data[0].toDayInAndOut
|
||||
this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
|
||||
this.inqty1 = this.toDayInAndOut.in.total_qty
|
||||
this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
|
||||
this.outqty1 = this.toDayInAndOut.out.total_qty
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import './style.stylus'
|
||||
.acon
|
||||
height 40%
|
||||
.body_container
|
||||
padding-top 38px
|
||||
.mgr8
|
||||
margin-right 8px
|
||||
.mgb8
|
||||
margin-bottom 8px
|
||||
.wraper_1
|
||||
width 100%
|
||||
// height calc(50% - 28px)
|
||||
height calc(100% - 28px)
|
||||
.wraper_2
|
||||
height calc(50% - 4px)
|
||||
padding 4px 10px
|
||||
background-color rgba(15, 45, 115, 60%)
|
||||
.wraper_3
|
||||
height 100%
|
||||
.wraper_5
|
||||
height calc(100% - 4px)
|
||||
padding 4px 10px
|
||||
background-color rgba(15, 45, 115, 60%)
|
||||
.wraper_6
|
||||
height calc(100% - 4px)
|
||||
background-color rgba(15, 45, 115, 60%)
|
||||
.title
|
||||
font-size 14px
|
||||
line-height 16px
|
||||
color #fff
|
||||
// margin-left 14px
|
||||
.wraper_4
|
||||
width 100%
|
||||
height calc(100% - 16px)
|
||||
.percent_item
|
||||
width 76px
|
||||
background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
|
||||
p
|
||||
font-size 15px
|
||||
line-height 76px
|
||||
color #fff
|
||||
text-align center
|
||||
.font_1
|
||||
font-size 13px
|
||||
.font_2
|
||||
font-size 12px
|
||||
text-align left
|
||||
white-space nowrap
|
||||
.c_y
|
||||
color #f4ab00
|
||||
.mgl8
|
||||
margin-left 8px
|
||||
.scroll_tab_2 li
|
||||
width 20%
|
||||
&:nth-child(1)
|
||||
width 20%
|
||||
.scroll_tab_3 li
|
||||
width 11%
|
||||
&:nth-child(1)
|
||||
width 11%
|
||||
.scroll-ul_1_div
|
||||
width 20% !important
|
||||
height 30px !important
|
||||
.scroll-ul_2 .scroll-ul_1_div
|
||||
width 11% !important
|
||||
height 30px !important
|
||||
&:nth-child(1)
|
||||
width 11%
|
||||
.scroll_container_0
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
.scroll-ul_1 li
|
||||
height 30px !important
|
||||
// line-height 30px !important
|
||||
.scroll-ul_2 li
|
||||
height 30px !important
|
||||
// line-height 30px !important
|
||||
</style>
|
||||
Reference in New Issue
Block a user