<template>
|
<div class="home-index-module-a-compontent">
|
<div class="card-item stylea">
|
<div class="card-row1">
|
<div class="card-icon-frame">
|
<div class="card-icon-box">
|
<div class="card-icon-circle"></div>
|
<div class="card-icon-font">
|
<a-icon type="export" />
|
</div>
|
</div>
|
</div>
|
<div class="crad-num">{{count.out}}</div>
|
</div>
|
<div class="card-row2">出库任务量</div>
|
</div>
|
<div class="divider"></div>
|
<div class="card-item styleb">
|
<div class="card-row1">
|
<div class="card-icon-frame">
|
<div class="card-icon-box">
|
<div class="card-icon-circle"></div>
|
<div class="card-icon-font">
|
<a-icon type="import" />
|
</div>
|
</div>
|
</div>
|
<div class="crad-num">{{count.in}}</div>
|
</div>
|
<div class="card-row2">入库任务量</div>
|
</div>
|
<div class="divider"></div>
|
<div class="card-item stylea">
|
<div class="card-row1">
|
<div class="card-icon-frame">
|
<div class="card-icon-box">
|
<div class="card-icon-circle"></div>
|
<div class="card-icon-font">
|
<a-icon type="export" />
|
</div>
|
</div>
|
</div>
|
<div class="crad-num">{{count.move}}</div>
|
</div>
|
<div class="card-row2">移库任务量</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { GeInOutTotalNumber} from '@/api/modular/system/homeManage'
|
export default {
|
name:'homeIndexModuleACompontent',
|
data(){
|
return {
|
count:{
|
in:0,
|
out:0,
|
move:0
|
}
|
}
|
},
|
methods:{
|
init(){
|
this.getData()
|
},
|
getData(callback){
|
GeInOutTotalNumber().then((d)=>{
|
this.count.in = d.data.rukuNum || 0
|
this.count.out = d.data.chukuNum || 0
|
this.count.move = d.data.yikuNum || 0
|
callback && callback(true)
|
}).catch(()=>{
|
callback && callback(false)
|
})
|
}
|
},
|
mounted(){
|
this.init()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.home-index-module-a-compontent{
|
display: flex;
|
.divider{
|
width:24px;
|
flex-shrink: 0;
|
}
|
.card-item{
|
width: 1px;
|
flex-grow: 1;
|
height:120px;
|
border-radius: 6px;
|
&.stylea{
|
background-image: linear-gradient(115.159deg, rgb(252, 198, 135) 0%, rgb(249, 211, 34) 1%, rgb(248, 56, 0) 99%, rgb(242, 134, 160) 100%);
|
}
|
&.styleb{
|
background-image: linear-gradient(115.159deg, rgb(127, 254, 216) 0%, rgb(54, 208, 220) 0%, rgb(90, 134, 229) 100%, rgb(9, 189, 254) 100%);
|
}
|
.card-row1{
|
width:100%;
|
display: flex;
|
.card-icon-frame{
|
flex-shrink: 0;
|
padding:16px 10px 0 16px;
|
.card-icon-box{
|
width: 60px;
|
height: 60px;
|
position: relative;
|
}
|
.card-icon-circle,.card-icon-font{
|
position: absolute;
|
top:0;
|
left:0;
|
width: 100%;
|
height: 100%;
|
}
|
.card-icon-circle{
|
z-index: 10;
|
border-radius: 50%;
|
opacity: 0.1;
|
background-color: #fff;
|
}
|
.card-icon-font{
|
z-index: 20;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color:#fff;
|
font-size: 32px;
|
}
|
}
|
.crad-num{
|
flex-grow: 1;
|
display: flex;
|
white-space:nowrap;
|
align-items: center;
|
color: #fff;
|
justify-content: flex-end;
|
padding-right: 16px;
|
font-size: 28px;
|
font-weight: 700;
|
overflow: hidden;
|
}
|
}
|
.card-row2{
|
color:#fff;
|
font-size: 20px;
|
font-weight: 400;
|
padding-right: 16px;
|
text-align: right;
|
white-space:nowrap;
|
overflow: hidden;
|
}
|
}
|
}
|
</style>
|
