TuBaoSoft-Ui-Zd/pages/home/ageStatistics/index.vue

<template>
	<view>
		<view class="charts-box">
			<view style="width: 100%;text-align: center;font-weight: bold;margin: 20rpx auto;">
				<u-divider>
					<text style="font-size: 28rpx;">最大库龄<text style="font-size: 46rpx;">{{data.stockDays}}</text>天</text>
				</u-divider>
			</view>
			<qiun-data-charts type="pie" :chartData="chartData" :inScrollView="true" :canvas2d="true"
				background="none" />
			<view class="ordertop" v-for="(item, index) in lisi" :key="index">
				<view>
					<view class="iconblue"></view>
					<text class="license">提单号：{{item.fMblno}}</text>
					<!-- <view class="various" @click="viewDetails(item)">{{item.fBilltype}}</view> -->
				</view>
				<view class="line">
					<u-line color="#ccc" border-style='dashed' />
				</view>
				<view class="basic">
					<view>客户名称</view>
					<view>{{item.customerName}}</view>
				</view>
				<view class="basic">
					<view>入库日期</view>
					<view>{{item.fBsdate}}</view>
				</view>
				<view class="basic">
					<view>毛重</view>
					<view>{{item.fGrossweight}}吨</view>
				</view>
				<view class="basic">
					<view>品名</view>
					<view>{{item.goodsName}}</view>
				</view>
			</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					series: [{
						data: []
					}]
				},
				nameList:[{
					name:'一周内',
					prop:'stockTotalA'
				},{
					name:'半月内',
					prop:'stockTotalB'
				},{
					name:'一个月内',
					prop:'stockTotalC'
				},{
					name:'两个月内',
					prop:'stockTotalD'
				},{
					name:'三个月内',
					prop:'stockTotalE'
				},{
					name:'六个月内',
					prop:'stockTotalF'
				},{
					name:'六个月以上',
					prop:'stockTotalG'
				}],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				lisi: [],
				total:0,
				data:{},
				form: {
					pageNum: 1,
					pageSize: 10,
				},
			}
		},
		created() {
			this.$u.get('/warehouseBusiness/summary/cycleStockStatistics').then(res=>{
				this.data = res.data
				let data = []
				this.nameList.forEach((item,index) =>{
					data.push({
						name:item.name,
						value:Number(res.data[item.prop])
					})
				})
				this.chartAssignment(data)
			})
			this.lisi=[]
			this.form = {
				pageNum: 1,
				pageSize: 10,
			}
			this.query()
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.lisi.length < this.total) {
				this.form.pageNum++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			chartAssignment(data){
				this.chartData.series[0].data = data
			},
			query(){
				this.$u.get('/warehouseBusiness/summary/stockAfterMonthList',this.form).then(res=>{
					console.log(res)
					this.lisi = this.lisi.concat(res.rows)
					this.total = res.total
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.charts-box {
		width: 100%;
		height: 300px;
	}
	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.basic>view {
		margin-bottom: 10rpx;
	}

	.basic>view:nth-child(1) {
		color: #797979;
	}

	.view {
		width: 96%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between
	}

	.line {
		width: 92%;
		margin: 0 auto;
	}

	.oddnumber {
		width: 96%;
		margin: 20rpx auto;
		margin-bottom: 20rpx;
	}

	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}

	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}

	.search {
		width: 96%;
		margin: 10rpx auto;
	}

	.iconblue {
		width: 10rpx;
		height: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.license {
		float: left;
		font-size: 32rpx;
	}

	.various {
		float: right;
		width: 150rpx;
		border: 2rpx solid #3a63cf;
		text-align: center;
		border-radius: 100rpx;
		color: #1669e6;
	}

	.condition {
		background-color: #1669e6;
		height: 60rpx;
	}

	.conditionone {
		width: 92%;
		height: 44rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		color: #fff;
	}

	.conditionone>view {
		color: #e6e8e8;
	}
</style>