RedDragonfly/pages/production/history.vue

<template>
	<view class="history">
		<view class="header">
			<uni-datetime-picker type="date" :clear-icon="false" v-model="BeginSingle"
				@change='change1' />
			至
			<uni-datetime-picker type="date" :clear-icon="false" v-model="FinishSingle"
				@change='change2' />
		</view>
		<view class="main">
			<view class="wu" v-if="wu">
				暂无数据
			</view>
			<view class="card" v-for="(v, i) in data" :key="i">
				<view class="content">
					<view class="text1">产线名称</view>
					<view class="text2">{{v.name}}</view>
				</view>
				<view class="content">
					<view class="text1">生产油品</view>
					<view class="text2">{{v.typeName}}</view>
				</view>
				<view class="content">
					<view class="text1">产线负责人</view>
					<view class="text2">{{v.charger}}</view>
				</view>
				<view class="content">
					<view class="text1">作业工人</view>
					<view class="text2">{{v.member}}</view>
				</view>
				<view class="content">
					<view class="text1">开始时间</view>
					<view class="text2">{{getTime(v.startTime)}}</view>
				</view>
				<view class="content">
					<view class="text1">结束时间</view>
					<view class="text2">{{getTime(v.endTime) || '未结束'}}</view>
				</view>
				<view class="content">
					<view class="text1">作业时间</view>
					<view class="text2">{{getJob(v.endTime,v.startTime)}}</view>
				</view>
				<view class="content">
					<view class="text1">产量</view>
					<view class="text2">{{v.number}}</view>
				</view>
				<view class="content">
					<view class="text1">剔除量</view>
					<view class="text2">{{v.reject}}</view>
				</view>
			</view>
		</view>
		<view class="filter">
			<text>总产量: {{TotalOutput}} 总剔除量: {{TotalelIminate || 0}}</text>
		</view>
	</view>
</template>

<script>
	import {
		history
	} from '../../api/production.js'
	export default {
		data() {
			return {
				wu: false,
				name: '', // 标题
				TotalOutput: 0, // 总产量
				TotalelIminate: 0, // 总剔除量
				data: [],
				BeginSingle: '', // 开始时间
				FinishSingle: '', // 结束时间
			};
		},
		onLoad(options) {
			this.BeginSingle = this.getTime1()
			this.FinishSingle = this.getTime1()
			this.name = options.name
			if (this.name) {
				uni.setNavigationBarTitle({
					title: this.name,
				});
				this.getData()
			}
		},
		methods: {
			async getData() {
				uni.showLoading({
					title: '加载中'
				});
				const res = await history({
					name: this.name,
					startTime: this.BeginSingle,
					endTime: this.FinishSingle,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				uni.hideLoading();
				this.data = res.data.list
				console.log(this.data);
				if(this.data.length === 0){
					this.wu = true
				}
				this.TotalOutput = res.data.outputNumber
				this.TotalelIminate = res.data.rejectNumber
			},
			// 切换时间
			change1(e){
				this.BeginSingle = e
				console.log(this.BeginSingle);
				this.getData()
			},
			change2(e){
				this.FinishSingle = e
				console.log(this.FinishSingle);
				this.getData()
			},
			// 获取时间
			getTime(time = new Date()) {
				let date = new Date(time);
				let	year = date.getFullYear();
				let	month = date.getMonth() + 1;
				let	day = date.getDate();
				let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
				let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
					month >= 1 && month <= 9 ? (month = "0" + month) : "";
					day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '-' + month + '-' + day + ' ' + hour + ':'+ minute;
				return timer;
			},
			getTime1(){
				let date = new Date();
				let	year = date.getFullYear();
				let	month = date.getMonth() + 1;
				let	day = date.getDate();
					month >= 1 && month <= 9 ? (month = "0" + month) : "";
					day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '-' + month + '-' + day;
				return timer;
			},
			// 作业时间
			getJob(endTime,startTime){
					let EndTIME = endTime ? new Date(endTime).getTime() : new Date().getTime(); // 截止时间
				    let NowTime = new Date(startTime).getTime(); // 开始时间
				    let usedTime = EndTIME - NowTime; // 相差的毫秒数
				    let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
				    let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
				    let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
				    let leavel2 = leavel % (3600 * 1000); // 计算剩余小时后剩余的毫秒数
				    let minutes = Math.floor(leavel2 / (60 * 1000)); // 计算剩余的分钟数
				    return days + '天' + hours + '小时' + minutes + '分钟';
			}
			
		}
	}
</script>

<style lang="scss">
	.history {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.header {
			padding: 20rpx;
			display: flex;
			align-items: center;
		}

		.filter {
			height: 100rpx;
			border-top: 8px solid #ebebeb;
			text-align: center;

			text {
				height: 100%;
				line-height: 100rpx;
				color: #e40315;
			}
		}

		.main {
			flex: 1;
			overflow-y: scroll;
			.wu{
				text-align: center;
			}
			.card {
				padding: 0 50rpx;
				border-bottom: 1rpx solid #ebebeb;

				.content {
					padding: 30rpx 0;
					display: flex;

					.text1 {
						width: 25%;
						text-align: right;
						margin-right: 40rpx;
					}

					&:nth-child(2) {
						.text2 {
							color: #2b70d4;
						}
					}
				}
			}
		}
	}
</style>