<template>
|
<full-page-layout :safety="false" background-color="#f0f8ff">
|
<view class="home-bk-layer"></view>
|
<view class="home-float-layer">
|
<header-page-layout :full="false" ref="page" title="首页" headerColor="#fff" @headerclick="onHeaderClick">
|
<template v-slot:headerright><text class="iconfont icon-out-right"></text></template>
|
|
<view class="home-page-containter" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
|
<view class="user-view-box">
|
<view class="user-card home-card">
|
<view class="left-view">
|
<view class="user-circle"><text class="iconfont icon-worker"></text></view>
|
</view>
|
<view class="right-view">
|
<view class="text-row1 auto-wrap">{{userName}}</view>
|
<view class="text-row2 auto-wrap">{{userAcc}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="blocks-view-box">
|
<view class="home-card item-block-card" v-for="(itema,indexa) in blocks" :key="'item-block-card-'+indexa">
|
<view class="title" v-if="itema.title">{{itema.title}}</view>
|
<view class="items-view">
|
<view class="block-item" v-for="(itemb,indexb) in itema.items" :key="'block-item-'+indexa+'-'+indexb" @tap="onClickBlockItem(itemb.pathName)">
|
<view class="block-item-icon" :style="{color:itemb.color}">
|
<text class="iconfont" :class="[itemb.icon]"></text>
|
</view>
|
<view class="block-item-text">{{itemb.name}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</header-page-layout>
|
</view>
|
</full-page-layout>
|
</template>
|
|
<script>
|
import FullPageLayout from '@/components/FullPageLayout.vue'
|
import HeaderPageLayout from '@/components/HeaderPageLayout.vue'
|
let initInterVal = null;
|
export default {
|
name:'homePage',
|
components:{FullPageLayout,HeaderPageLayout},
|
data(){
|
return {
|
pageBodyHeight:0,
|
userName:'',
|
userAcc:'',
|
blocks:[
|
{
|
title:'入库操作',
|
items:[
|
// {name:'入库组盘',icon:'icon-store_in',pathName:'basein',color:'#1e90ff'},
|
{name:'入库组盘',icon:'icon-store_in',pathName:'group',color:'#1e90ff'},
|
{name:'呼叫AGV',icon:'icon-machine1',pathName:'agvs',color:'#1e90ff'},
|
// {name:'呼叫AGV带零件',icon:'icon-agv',pathName:'agv',color:'#1e90ff'},
|
]
|
},
|
{
|
title:'出库操作',
|
items:[
|
{name:'手工出库',icon:'icon-store_out',pathName:'baseout',color:'#1e90ff'},
|
{name:'出库叫料',icon:'icon-task',pathName:'out',color:'#1e90ff'},
|
// {name:'AGV转运',icon:'icon-task',pathName:'agvtask',color:'#1e90ff'},
|
]
|
},
|
/* {
|
title:'Demo',
|
items:[
|
{name:'单列表',icon:'icon-check-inventory',pathName:'demolist',color:'#1e90ff'},
|
{name:'查询列表',icon:'icon-check-inventory',pathName:'demosearchlist',color:'#1e90ff'},
|
{name:'查询操作列表',icon:'icon-check-inventory',pathName:'demosearchactionlist',color:'#1e90ff'},
|
{name:'单表单',icon:'icon-check-inventory',pathName:'storein',color:'#1e90ff'}
|
]
|
} */
|
]
|
}
|
},
|
methods:{
|
onHeaderClick(type){
|
if (type==='right') {
|
uni.redirectTo({
|
url:this.$config.path.login
|
})
|
}
|
},
|
onClickBlockItem(path){
|
if (path) {
|
uni.navigateTo({
|
url: this.$config.path[path]
|
});
|
} else {
|
uni.showToast({title:'开发中...'})
|
}
|
},
|
startInitInterval(callback){
|
initInterVal = setInterval(()=>{
|
if (this.pageBodyHeight) {
|
this.clearInitInterval()
|
} else {
|
this.pageBodyHeight = this.$refs.page.getBodyHeight()
|
callback && callback()
|
}
|
},200)
|
},
|
clearInitInterval(){
|
try{
|
clearInterval(initInterVal)
|
initInterVal = null
|
}catch(e){
|
//TODO handle the exception
|
}
|
}
|
},
|
onLoad() {
|
let _user = this.$store.getters['user/getUserInfo'];
|
this.userName = _user.name;
|
this.userAcc = _user.account;
|
},
|
onReady() {
|
this.startInitInterval()
|
},
|
onUnload(){
|
this.clearInitInterval()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.home-page{
|
height: 100%;
|
background-color: #f0f8ff;
|
position: relative;
|
}
|
.home-bk-layer,.home-float-layer{
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
}
|
.home-bk-layer{
|
height: 240rpx;
|
border-radius: 0 0 80rpx 80rpx;
|
background-image: linear-gradient(to right, $color-paimary-middle, $color-paimary-darken);
|
z-index: 1;
|
}
|
.home-float-layer{
|
height: 100%;
|
overflow: hidden;
|
z-index: 2;
|
}
|
|
.home-page-containter{
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
.user-view-box{
|
flex-shrink: 0;
|
padding-bottom: 30rpx;
|
}
|
.blocks-view-box{
|
flex-grow: 1;
|
overflow: auto;
|
}
|
}
|
|
.home-card {
|
background-color: #fff;
|
width: 95%;
|
border-radius: 10rpx;
|
margin: 0 auto;
|
box-sizing: border-box;
|
}
|
|
.user-card{
|
display: flex;
|
padding: 30rpx 0;
|
.left-view{
|
width: 180rpx;
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.user-circle{
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 50%;
|
background-image: linear-gradient(to right, $color-paimary-middle, $color-paimary-darken);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 90rpx;
|
color: #fff;
|
}
|
}
|
.right-view{
|
flex-grow: 1;
|
padding-right: 10rpx;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
.text-row1{
|
font-size: 36rpx;
|
font-weight: bold;
|
line-height: 1.3;
|
}
|
.text-row2{
|
padding-top: 10rpx;
|
font-size: 28rpx;
|
line-height: 1.3;
|
}
|
}
|
}
|
|
.item-block-card{
|
margin-bottom: 30rpx;
|
&>.title{
|
padding: 20rpx;
|
font-weight: bold;
|
}
|
.items-view{
|
display: flex;
|
flex-wrap: wrap;
|
padding-bottom: 12rpx;
|
}
|
.block-item{
|
width: 33.33%;
|
box-sizing: border-box;
|
margin-bottom: 20rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.block-item-icon{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 90rpx;
|
}
|
.block-item-text{
|
padding-top: 4rpx;
|
font-size: 24rpx;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
