243 lines
7.7 KiB
Vue
243 lines
7.7 KiB
Vue
<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.title }}</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,
|
|
selSecArr: this.$store.getters.selSecArr
|
|
}
|
|
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.content
|
|
this.pointUse = res.content[0].pointUse
|
|
this.toDayInAndOut = res.content[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);
|
|
overflow hidden
|
|
.scroll-ul_1 li
|
|
height 30px !important
|
|
// line-height 30px !important
|
|
.scroll-ul_2 li
|
|
height 30px !important
|
|
// line-height 30px !important
|
|
</style>
|