RedDragonfly/pages/production/InService.vue

<template>
	<view class="in-service">
		<view class="card" v-for="(v , i) in data" :key="i">
			<uni-badge class="uni-badge-left-margin" :text="i+1" />
			<view class="text service">
				<text>产线名称</text>
				<text class="content">{{v.name}}</text>
			</view>
			<view class="text">
				<text>当前生产油品</text>
				<text class="content product">{{v.typeName}}</text>
			</view>
			<view class="text">
				<text>当前产线负责人</text>
				<text class="content">{{v.charger}}</text>
			</view>
			<view class="text">
				<text>当前作业工人</text>
				<text class="content">{{v.member}}</text>
			</view>
			<view class="text">
				<text>当前开始时间</text>
				<text class="content">{{getTime(v.startTime)}}</text>
			</view>
			<view class="text">
				<text>当前结束时间</text>
				<text class="content">{{v.endTime ? getTime(v.endTime) : '未结束'}}</text>
			</view>
			<view class="text">
				<text>当前作业时长</text>
				<text class="content">{{getJob(v.endTime,v.startTime)}}</text>
			</view>
			<view class="text">
				<text>当前产量</text>
				<view class="yield">
						<text class="content quantity">{{v.number}}箱</text>
						<button class="mini-btn" type="warn" size="mini" @click="goBack(v.name)">历史记录</button>
				</view>
			</view>
			<view class="text">
				<text>状态</text>
				<view class="state">
				<button class="mini-btn" size="mini">{{v.status == 0 ? '正在生产' : v.status == 1 ? '停止生产' : '暂停生产,整型'}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { production } from '../../api/production.js'
	export default {
		data() {
			return {
				data: '',
			};
		},
		async created(){
			uni.showLoading({
				title: '加载中'
			});
			const res = await production({
				// name: ''  // 不传参加载全部
				accessToken:  uni.getStorageSync('tokenInfo'),
				account: uni.getStorageSync('account')
			})
			uni.hideLoading();
			this.data = res.data.list.filter(v => v.status == 0)
		},
		methods:{
			goBack(name){
				uni.navigateTo({
				    url: '/pages/production/history?name='+ name
				});
			},
			
			// 获取时间
			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;
			},
			// 作业时间
			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">
.in-service{
	padding: 0 20rpx;
	.card{
		padding-top: 10rpx;
		border-bottom: 15rpx solid #ebebeb;
		.text{
			padding: 25rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #d9d9d9;
			&.service{
				padding-top: 0;
			}
			&:last-child{
				border-bottom: 0;
			}
			.content{
				color: #737373;
			}
			.product{
				color: #2d76c9;
				width: 50%;
				text-align: right;
			}
			.quantity{
				color: #e40315;
			}
			.yield{
				display: flex;
				align-items: center;
				.mini-btn{
					margin-left: 20rpx;
				}
			}
			.state{
				.mini-btn{
					background-color: #85d691;
					color: #fff;
				}
			}
		}
	}
}
</style>