aiot-app/pages/pda/workOrder/extrusionMolding/index.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="title" background-color="#157A2C"
			color="#fff" @clickLeft="back"></uni-nav-bar>


		<view class="top-wrapper cx">
			<stepsNav :stepsList="stepsList"></stepsNav>

			<view class="tab_box rx-sc">
				<view class="tab_item" :class="{active: tabType == 1}" @click="handTab(1)">基本信息</view>
				<view class="tab_item" :class="{active: tabType == 2}" @click="handTab(2)">生产明细</view>
			</view>

		</view>

		<view class="list_box">

			<u-list @scrolltolower="scrolltolower" key="info" v-if="tabType == 1">
				<view class="item_list rx-bc">
					<text class="lable">生产工单号</text>
					<text>21122403906633005</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">计划编号</text>
					<text>211224039</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">工艺路线版本</text>
					<text>2.0</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">产品编码</text>
					<text>W05363955011</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">产品名称</text>
					<text>木工刀</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">牌号</text>
					<text>H25.5</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">型号</text>
					<text>H25.5</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">要求成型数量</text>
					<text>1000 PCS</text>
				</view>



				<view class="item_list rx-bc">
					<text class="lable">要求成型重量</text>
					<text>850.5 KG</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">已完成生产数量</text>
					<text>293 PCS</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">已完成生产重量</text>
					<text>85.5 KG</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">计划开始时间</text>
					<text>2023/08/10 02:00:00</text>
				</view>



			</u-list>

			<u-list @scrolltolower="scrolltolower" key="detail" v-if="tabType == 2">
				<view v-for="(item,index) in detailList" :key="index" class="detail-list">
					<view class="name">{{item.name}}</view>
					<view class="list rx-bc" v-for="(it, idx) in item.list">
						<view class="title rx-sc">
							<image v-if="it.state == 1" class="icon" src="~@/static/pda/layers.svg"></image>
							<image v-if="it.state == 2" class="icon" src="~@/static/pda/check-square.svg"></image>
							<image v-if="it.state == 3" class="icon" src="~@/static/pda/target.svg"></image>

							{{it.title}}
						</view>

						<view class="rx-ec">
						{{it.num}}
						<image  class="arrow_right2" src="~@/static/pda/arrow_right2.svg"></image>
						</view>
					</view>
				</view>
			</u-list>

		</view>

		<view class="bottom-wrapper">
			<bottomOperate state='1'></bottomOperate>
		</view>

	</view>
</template>

<script>
	import bottomOperate from '../../components/bottomOperate.vue'
	import stepsNav from '../../components/stepsNav.vue'
	
		import { getTaskInstanceList } from '@/api/pda/workOrder.js'
	export default {
		components: {
			bottomOperate,
			stepsNav
		},
		data() {
			return {
				title: '',
				tabType: 1,
				id: null,
				
				stepsList: [],

				detailList: [{
						name: '挤压成型',
						list: [{
								state: 1,
								title: '待投料数量',
								num: 333
							},

							{
								state: 2,
								title: '已报工数量',
								num: 666
							}
						]
					},

					{
						name: '自然干燥',
						list: [{
								state: 3,
								title: '生产中数量',
								num: 555
							},

							{
								state: 2,
								title: '已报工数量',
								num: 666
							}
						]
					}
				]
			}
		},

		onLoad(options) {
			this.title = options.title
			
			this.id = options.id
			this.getSteps()

		},

		methods: {
			scrolltolower() {},

			handTab(type) {
				if (type != this.tabType) {
					this.tabType = type
				}
			},
			
			getSteps() {
				getTaskInstanceList(this.id).then(res => {
					this.stepsList = res
					if(!this.title && this.stepsList.length) {
					this.title = this.stepsList[0].taskTypeName
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}

	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		background: #fff;
		align-items: center;
	}

	.tab_box {
		width: 100%;
		height: 68rpx;


		.tab_item {
			height: 68rpx;
			line-height: 68rpx;
			padding: 0 20rpx;
			font-size: 32rpx;
			color: #979C9E;

		}

		.active {
			box-sizing: border-box;
			border-bottom: 6rpx solid $theme-color;
			color: $theme-color;
		}


	}

	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 4rpx 0;

		.u-list {
			height: 100% !important;
		}

		.item_list {

			width: 100%;
			height: 80rpx;
			box-sizing: border-box;
			padding: 0 32rpx;
			font-size: 32rpx;
			color: #979C9E;
			font-weight: 400;
			border-bottom: 1rpx solid #E3E5E5;



			.lable {
				color: #090A0A;
				font-weight: 500;
			}
		}


		.detail-list {
			line-height: 80rpx;

			.name {
				color: #090A0A;
				font-size: 32rpx;
				font-weight: 600;
				padding: 0 32rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E3E5E5;
			}

			.list {
				padding: 0 32rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E3E5E5;

				.title {
					font-weight: 400;
					color: #090A0A;

				}

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
				
				.arrow_right2{
					width: 12rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}

		}
	}


	.bottom-wrapper {}
</style>