storage-wechat/pages/total/fabricsTotal.vue

<template>
	<view class="personalStat">
		<view class="header-banner">
			<view @click="headerNavType = 1" :class="headerNavType == 1 ? 'active' : ''">
				日概况
			</view>
			<view  @click="headerNavType = 2" :class="headerNavType == 2 ? 'active' : ''">
				月概况
			</view>
			
		</view>
		<commons-select-time :date="req.date" @change="changeTime"></commons-select-time>
		<view class="" v-if="headerNavType === 1">
			
			<!-- 墨水库存汇总 -->
			<view style="margin: 0 30rpx 30rpx;font-size: 12rpx;background:#fff" v-for="(i,index) in issueData" :key="index">
				<view class="form-text">
					<view class="">
						物料名称：{{i.materialName}}
					</view>33333333333333333333333333333333333333333333
					<view class="">
						物料编码：{{i.materialCode}}
					</view>
				</view>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="150rpx" align="left">卷数 {{i.count}}</uni-th>
						<uni-th width="150rpx" align="left">米数 {{i.quantity}}</uni-th>
						<uni-th width="150rpx" align="left">面积 {{i.area}}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(j,jindex) in i.materialList" :key="jindex">
						<uni-td><view  >卷{{jindex + 1}}</view></uni-td>
						<uni-td><view  >{{j.quantity}}</view></uni-td>
						<uni-td><view  >****{{j.rfid.slice(18,24)}}</view></uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<view class="" v-if="headerNavType === 2">
			<view class="explain">
				<view class="title">


					取值说明：<span><uni-icons type="bottom" size="30"></uni-icons> 收起</span>
				</view>
				<view class="text">
					<view>实际使用面积=领料面积-退料面积-修正面积</view>
					<view>面料使用率=排班面积/实际使用面积</view>
					<view>因早晚班原因，时间取值含跨天情况，例：<span>昨日数据</span></view>
					<view>领料面积：昨日7:30————今日7:30领料数据，其中热转的截点是8点</view>
					<view>退料面积：昨日10:00————今日10:00退料数据</view>
					<view>排班面积=当日排班-当日转班+其他环节报废补班（个人报废排班不累加）</view>
					<view><span>特别注明：因转班延误系统将会修正前三天的数据</span></view>
				</view>
			</view>
			<!-- 墨水库存汇总 -->
			<view style="margin: 0 30rpx 30rpx;font-size: 12rpx;background:#fff" v-for="(i,index) in materialReturnData" :key="index">
				<view class="form-text">
					<view class="">
						物料名称：{{i.materialName}}
					</view>
					<view class="">
						物料编码：{{i.materialCode}}
					</view>
				</view>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="150rpx" align="left">卷数 {{i.count}}</uni-th>
						<uni-th width="150rpx" align="left">米数 {{i.quantity}}</uni-th>
						<uni-th width="150rpx" align="left">面积 {{i.area}}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(j,jindex) in i.materialList" :key="jindex">
						<uni-td><view  >卷{{jindex + 1}}</view></uni-td>
						<uni-td><view  >{{j.quantity}}</view></uni-td>
						<uni-td><view  >****{{j.rfid.slice(18,24)}}</view></uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import commonsSelectTime from '../../components/commons-select-time/index2.vue'
	import {format} from '../../util/uitl.js'
	import {
	    getInfo
	} from "@/util/api.js";
	export default {
		components:{
			commonsSelectTime
		},
		data() {
			return {
				headerNavType:1,
				
				req:{
					account:null,
					date:format(new Date()).slice(0,10),
					//date:'2022-10-11'
				},
				issueData:[],
				materialReturnData:[],
				transferInData:[],
				transferOutData:[],
			}
		},
		onLoad(option) {
			const v = this
			uni.getStorage({
				key: 'Authorization',
				success: function (res) {
					//v.req.account = 2207003
					v.req.account = res.data.account
					v.getList()
				}
			});
		},
		methods: {
			changeTime(e){
				this.req.date = e
				this.getList()
			},

			timeChangeFn(){
				console.log(this.req)
			},
			toRouter(url){
				console.log(123123)
				uni.navigateTo({
					url: '/pages' + url
				})
			},
			//出库汇总
			getList(){
				const v = this
				v.$post('/stockWater/issue',v.req).then(res=>{
					v.issueData = res.data
				})
				v.$post('/stockWater/materialReturn',v.req).then(res=>{
					v.materialReturnData = res.data
				})
				v.$post('/stockWater/transferIn',v.req).then(res=>{
					v.transferInData = res.data
				})
				
				v.$post('/stockWater/transferOut',v.req).then(res=>{
					v.transferOutData = res.data
				})
			},
			
			
		},
	}
</script>
<style>
	.personalStat .picker-content{
		text-align: center;
	}
	.personalStat .uni-table-th.table--border{
		border-top: 1px solid #000;
	}
	.personalStat .uni-table-th{
		border-color: black;
		color: #333;
		font-weight: 500;
	}
	.personalStat .uni-table-th,.personalStat  .table--border{
		border-right:none!important;
	}
	.personalStat .uni-date-x--border{
		border:none!important;
	}
</style>
<style lang="less">
	.form-text{
		font-size: 28rpx;
		line-height: 60rpx;
		background-color: #fff;
		padding-left: 20rpx;
	}
	.commons-time-box{
		display: flex;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		margin:30rpx;
		border:1px solid #dcdcdc;
		border-radius: 8rpx;
		.time-box{
			width: 15%;
			text-align: center;
		}
		.time-box-icon{
			width: 10%;
		}
		.time-box.active{
			background-color: #487CFF;
			color: #fff;
		}
	}
	.uni-data-checklist{
		margin-top: 10rpx;
		padding:16rpx 10rpx;
	}
	.uni-table-td{
		font-size: 24rpx!important;
	}
	.uni-data-checklist .checklist-group .checklist-box{
		margin-right: 20rpx!important;
	}
	.personalStat {
		background-color: #f1f1f1;
		min-height: 100vh;
		color: #333;
		.header-banner {
			display: flex;
			justify-content: center;
			border-bottom: 1px solid #dcdcdc;
			
			view {
				width: 40%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				color: #333;
				margin: 0 5%;
			}

			.active {
				color: #487CFF;
				border-bottom: 2px solid #487CFF;
			}
		}

		
	}
</style>