mes_mobile/pages/index/materialYield.vue

<template>
	<!-- 工单出材率 -->
	<view class="page_padding font13">
		<view v-for="(item,index) in list" :key="index" class="detail_list contentboxsty" @click="toDetail(498)">
			<view class="list_top">
				<view class="top_left">
					工单号：{{item.name}}
				</view>
				<view class="top_right">
					工单详情 <text class="arrow iconfont icon-gengduo"></text>
				</view>
			</view>
			<view class="list_content font13">
				<view class="list_centre">
					<view class="list_row">						
						<view class="centre_left">
							<text class="name">加工规格</text>
							<text class="text">{{item.specs}}</text>
						</view>
					</view>
					<view class="list_row">
						<view class="centre_left">
							<text class="name">算法出材率</text>
							<text class="text">{{item.algorithm}}%</text>
						</view>
					</view>
				</view>
				<view class="list_below">
					<view class="below_left">
						<view class="circle-progress">
							<view class="progressBg">
								<view class="progressBox">
									<view class="percentage font22">
										{{item.algorithm}}%
									</view>
									<view class="title font12">
										出材率
									</view>
								</view>
							</view>
							<view class="circle-progress__bar" :style="'--progress:'+item.algorithm+'%'"></view>
						</view>
					</view>
				</view>
				<view class="card_right">
					<view class="status">生产中</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					name:'SO202401111004',
					algorithm:'51.5',
					reality:'81.4',
					state:'生产中',
					specs:'4*9*3.66',
					time:'jan-11 10:05',
					timeConsuming:'3.5H',
					number:'12.66m³'
				},{
					name:'SO202401111004',
					algorithm:'81.5',
					reality:'81.4',
					state:'生产中',
					specs:'4*9*3.66',
					time:'jan-11 10:05',
					timeConsuming:'3.5H',
					number:'12.66m³'
				},{
					name:'SO202401111004',
					algorithm:'61.5',
					reality:'81.4',
					state:'生产中',
					specs:'4*9*3.66',
					time:'jan-11 10:05',
					timeConsuming:'3.5H',
					number:'12.66m³'
				},{
					name:'SO202401111004',
					algorithm:'81.5',
					reality:'81.4',
					state:'生产中',
					specs:'4*9*3.66',
					time:'jan-11 10:05',
					timeConsuming:'3.5H',
					number:'12.66m³'
				}]
			}
		},
		methods: {
			toDetail(id){
				uni.navigateTo({
					url:'/pages/production/productionDetail?id='+id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.detail_list{
	.list_centre{
		.list_row{display: flex;padding-bottom: 12px;
			.centre_left{
				flex: 1;
				.name{width:80px;display: inline-block;font-weight: bold;}
			}
		}
	}
	.list_below{display: flex;text-align: center;padding: 10px 0;
		.below_left{flex: 1;display: flex;align-items: center;justify-content: center;}
		.percentage{color: $uni-text-color-inverse;}
	}
}
</style>