<template>
|
<div class="home-page-compontent-d" v-loading="loading">
|
<div class="compontent-header">
|
<span class="pannel-title">今日出库计划</span>
|
<el-link type="primary" @click="onMore">更多</el-link>
|
</div>
|
|
<div class="actual-plan-comparison">
|
<div class="comparison-block">
|
<div class="title">计划出库数量</div>
|
<div class="value">{{totals.planStr}}</div>
|
</div>
|
<div class="comparison-block">
|
<div class="title">实际出库数量</div>
|
<div class="value">{{totals.infactStr}}</div>
|
</div>
|
<div class="comparison-block">
|
<div class="title">实际出库数量</div>
|
<div class="value">{{totals.rate}}</div>
|
</div>
|
</div>
|
|
<el-table :data="list" stripe>
|
<el-table-column prop="MainTaskNo" label="任务号" min-width="150" />
|
<el-table-column prop="SerialNumber" label="序列号" min-width="120" />
|
<el-table-column prop="OrderNo" label="订货号" min-width="120" />
|
<el-table-column prop="OutTaskDetailStateName" label="当前状态" width="100" />
|
</el-table>
|
|
<div class="pagination-row"><el-pagination :pager-count="5" layout="total,prev, pager, next, jumper" :total="total" @current-change="onPageList" /></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name:'homePageCompontentD',
|
data(){
|
return {
|
loading:false,
|
totals:{
|
plan:0,
|
planStr:'0',
|
infact:0,
|
infactStr:'0',
|
rate:'0%'
|
},
|
list:[],
|
total:100,
|
queried:{...this.$config.pagination,...{pageSize:5}}
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
init(){
|
this.loading = true;
|
this.getTotals((f)=>{
|
if (f) {
|
this.newList(false,()=>{
|
this.loading = false;
|
})
|
} else {
|
this.loading = false;
|
}
|
})
|
},
|
getTotals(callback){
|
this.$api.post('HomePageOutTask',{},{block:'home'}).then((d)=>{
|
this.totals.plan = d.PlanOutCount || 0;
|
this.totals.planStr = this.totals.plan.toLocaleString()
|
this.totals.infact = d.PlanOutCompleteCount || 0;
|
this.totals.infactStr = this.totals.infact.toLocaleString()
|
this.totals.rate = this.totals.plan?(Number((this.totals.infact/this.totals.plan*100).toFixed(2))+'%'):'0%'
|
callback && callback(true)
|
}).catch((err)=>{
|
callback && callback(false)
|
})
|
},
|
/* 翻页功能 */
|
onPageList(page){
|
this.queried.page = page;
|
this.getList();
|
},
|
/* 表格刷新至首页 */
|
newList(needLoading=true,callback){
|
this.queried = {...this.$config.pagination,...{pageSize:5}}
|
this.getList(callback,needLoading)
|
},
|
/* 更新数据表 */
|
getList(callback,needLoading=true){
|
if (needLoading) {
|
this.loading=true;
|
}
|
this.$api.post('HomePageOutTaskToDay',this.queried,{block:'home'}).then((d)=>{
|
this.total = d.total || 0;
|
this.list = d.list || []
|
if (needLoading) {
|
this.loading=false;
|
}
|
callback && callback(true)
|
}).catch((err)=>{
|
if (needLoading) {
|
this.loading=false;
|
}
|
callback && callback(false)
|
})
|
},
|
onMore(){
|
this.$router.push('/sub-tasks-output-plan')
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.home-page-compontent-d{
|
padding: 24px;
|
.compontent-header{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.actual-plan-comparison{
|
display: flex;
|
padding: 28px 0;
|
.comparison-block{
|
width: 100px;
|
flex: 1;
|
.title{
|
color: rgba(0, 0, 0, 0.43);
|
padding-left: 20px;
|
}
|
.value{
|
color: rgba(0, 0, 0, 0.65);
|
font-size: 24px;
|
padding-left: 50px;
|
padding-top: 12px;
|
}
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
.home-page-compontent-d{
|
.el-table__header {
|
th {
|
background-color: #fafafa !important;
|
}
|
}
|
}
|
</style>
|
