aiot-app/pages/maintenance/order/OrderTask.vue

<template>
	<view class="content_box">
		<!-- 站号筛选 -->
		<view class="group-tab-bar rx-sc">
			<view class="group-tab-item" v-for="(tab, idx) in groupTabs" :key="idx"
				:class="{ active: groupId === tab.groupId }" @click="switchGroup(tab.groupId)">
				{{ tab.label }}
			</view>
		</view>
		<view class="list_box marginTop">
			<u-list>
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="card_box" @click="goDetail(item)">
						<view class="item_box flex_between">
							<view class="rx-sc">
								<view class="round">{{Number(index)+1}}</view>
								<view class="orderId">{{item.code}} </view>
							</view>
							<view class="state">
								{{ dict.status[item.orderStatus] }}
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce50 rx-sc">
								<view class="lable">设备名称：</view>
								<view class="deviceName">{{item.deviceName}}</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce50 rx-sc">
								<view class="lable">规则名称：</view>
								<view>{{item.ruleName}}</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce50 rx-sc">
								<view class="lable">截止时间：</view>
								<view>{{item.planFinishTime}}</view>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-list-item v-if="list.length === 0">
					<view style='margin-top: 20vh;'>
						<u-empty iconSize='150' textSize='32' text='暂无工单'>
						</u-empty>
					</view>
				</u-list-item>

			</u-list>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: [String, Number]
			},
			list: {
				type: Array,
				default: () => []
			},
			groupId: {
				type: [String, Number],
				default: null
			}
		},
		data() {
			return {
				groupTabs: [
					{ label: '全部', groupId: null },
					{ label: '5号站', groupId: '2008729845612720129' },
					{ label: '6号站', groupId: '2008729929536548865' },
					{ label: '7号站', groupId: '2008730320160468994' }
				],
				dict: {
					status: {
						0: '待接收',
						2: '执行中',
						3: '已完成'
					},
					//紧急程度
					urgent: {
						1: '普通',
						2: '紧急',
						3: '重要'
					}
				}
			}
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/maintenance/detail/detail?id=${item.id}&planId=${item.planId}&code=${item.code}&&orderType=1`
				})
			},
			switchGroup(groupId) {
				this.$emit('changeGroup', groupId)
			},
			isClass() {
				switch (String(this.type)) {
					case '0':
						return 'd1'
						break
					case '1':
						return 'd2'
						break
					case '3':
						return 'd3'
						break
					default:
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group-tab-bar {
		background: #fff;
		padding: 16rpx 32rpx;
		border-bottom: 2rpx solid #e1e1e1;
		gap: 16rpx;
	}

	.group-tab-item {
		padding: 8rpx 24rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 32rpx;
		background: #f5f5f5;
		white-space: nowrap;

		&.active {
			background: $theme-color;
			color: #fff;
		}
	}

	.marginTop {
		border-top: 20rpx solid $page-bg;
	}

	// .content_box {
	// 	height: 100vh;
	// 	overflow: hidden;
	// 	display: flex;
	// 	flex-direction: column;
	// 	background-color: $page-bg;
	// }

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

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

	.card_box {
		width: 750rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;



			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
			}

			.orderId {
				color: #000;
				font-family: PingFang HK;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 16rpx;
			}

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;
				.lable {
					width: 150rpx;
				}
				
				.deviceName {
					width: calc(750rpx - 150rpx);
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 100%;
			}
		}

		.flex_between {
			display: flex;
			justify-content: space-between;
		}
	}

	.state {
		font-size: 28rpx;
		color: #7f7f7f;
		background: #f1f1f1;
		display: inline;
		padding: 2px 5px;
		border-radius: 10px;
	}
</style>