jp-housekeep-electric/pages/workOrderManagement/workOrderManagement.vue

<template>
	<view>
		
		<view class="navbar-c">
			<view class="back" @click="toWorkOrderMap">
				<image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>
			</view>
			<view class="title">
				工单管理
			</view>
			<view class="right" >
				故障上报
			</view>
		</view>
		
		<!-- 搜索 -->
		<view class="search-box">
			<u-search placeholder="搜索" bg-color="#fff" height="80" :show-action="true"  v-model="keyword">
				
				
			</u-search>
			
		</view>
		<!-- 我的工单 -->
		<view class="my-work-order">
			<view class="title">
				<view class="name">
					<view class="icon">
						<image class="img" src="@/assets/img/riFill-bar-chart-fill.svg" mode=""></image>
					</view>
					我的工单
				</view>
				<view class="more" @click="toWorkOrderStatistics">
					工单统计<u-icon name="arrow-right" color="#777777"></u-icon>
				</view>
			</view>
			<!-- 分类 -->
			<view class="classify">
				<view class="item item-checked" >
					全部18
					<view class="checked-circle">
						
					</view>
				</view>
				<view class="item">
					待指派 2
				</view>
				<view class="item">
					进行中 3
				</view>
				<view class="item">
					已解决 13
				</view>
			</view>
			<!-- 工单详情 -->
			<view class="work-order">
				<!-- 紧急 -->
				<view class="urgency">
					紧急
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
					</view>
					<view class="item-value value-bold">
						荆鹏集团-荆鹏软件园01
					</view>
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
					</view>
					<view class="item-value value-bold">
						温度过高
					</view>
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
					</view>
					<view class="item-value">
						沙市区江津东路附155号
					</view>
				</view>
				
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
					</view>
					<view class="item-value">
						2024-02-04 20:00:00
					</view>
				</view>
				
				<view class="button">
					<view class="state">
						待指派
					</view>
					<view class="btn">
						<button class="close" @click="closeShow=true">关闭</button>
						<button class="reminder" @click="reminderShow=true">催单</button>
					</view>
				</view>
			</view>
			
			<view class="work-order">
				
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
					</view>
					<view class="item-value value-bold">
						荆鹏集团-荆鹏软件园01
					</view>
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
					</view>
					<view class="item-value value-bold">
						温度过高
					</view>
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
					</view>
					<view class="item-value">
						沙市区江津东路附155号
					</view>
				</view>
				
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
					</view>
					<view class="item-value">
						2024-02-04 20:00:00
					</view>
				</view>
				
				<view class="button">
					<view class="state state2">
						进行中
					</view>
					<view class="btn">
						
						<button class="resolved">确认解决</button>
					</view>
				</view>
			</view>
			
			<view class="work-order">
				
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
					</view>
					<view class="item-value value-bold">
						荆鹏集团-荆鹏软件园01
					</view>
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
					</view>
					<view class="item-value value-bold">
						温度过高
					</view>
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
					</view>
					<view class="item-value">
						沙市区江津东路附155号
					</view>
				</view>
				
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
					</view>
					<view class="item-value">
						2024-02-04 20:00:00
					</view>
				</view>
				
				<view class="button">
					<view class="state state3">
						已解决
					</view>
					<view class="btn">
						
						<button class="view">查看详情</button>
					</view>
				</view>
			</view>
			
			<view class="work-order">
				
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
					</view>
					<view class="item-value value-bold">
						荆鹏集团-荆鹏软件园01
					</view>
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
					</view>
					<view class="item-value value-bold">
						温度过高
					</view>
				</view>
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
					</view>
					<view class="item-value">
						沙市区江津东路附155号
					</view>
				</view>
				
				<view class="order-item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
					</view>
					<view class="item-value">
						2024-02-04 20:00:00
					</view>
				</view>
				
				<view class="button">
					<view class="state state4">
						已关闭
					</view>
					<view class="btn">
						
						<button class="view">查看详情</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 关闭原因 -->
		<u-popup v-model="closeShow" mode="bottom" closeable close-icon-size="24" close-icon-color="#101010" border-radius="24">
					<view class="close-reason">
						<view class="title">
							请选择关闭原因：
						</view>
						<view class="reason-content">
							<view class="reason-item">
								<view class="item-title">
									错误告警
								</view>
								<view class="item-value">
									<label class="radio">
										<radio value="" /><text></text>
									</label>
								</view>
							</view>
							<view class="reason-item">
								<view class="item-title">
									设备已自动恢复
								</view>
								<view class="item-value">
									<label class="radio">
										<radio value="" /><text></text>
									</label>
								</view>
							</view>
							<view class="reason-item">
								<view class="item-title">
									不需要上门解决
								</view>
								<view class="item-value">
									<label class="radio">
										<radio value="" /><text></text>
									</label>
								</view>
							</view>
							<view class="reason-item">
								<view class="item-title">
									平台移桩，可忽视
								</view>
								<view class="item-value">
									<label class="radio">
										<radio value="" /><text></text>
									</label>
								</view>
							</view>
							<view class="reason-item">
								<view class="item-title">
									其他
								</view>
								<view class="item-value">
									<label class="radio">
										<radio value="" /><text></text>
									</label>
								</view>
							</view>
						</view>
						<view class="button-box">
							<button class="think">我在想想</button>
							<button class="confirm" >确认关闭</button>
						</view>
					</view>
				
				
	</u-popup>
		<!-- 催单 -->
		
		<u-popup v-model="reminderShow" mode="bottom" closeable close-icon-size="24" close-icon-color="#101010" border-radius="24">
			<view class="reminder-content">
				<view class="title">
					催单
				</view>
				<view class="content">
					我们已催促平台尽快指派工程师处理工单。
				</view>
				<button class="know" >知道了</button>
			</view>
		</u-popup>
		
		<energyCenterTabbar :current="1"></energyCenterTabbar>
	</view>
</template>

<script>
	import  energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	export default {
		components: {
			energyCenterTabbar
		},
		data() {
			return {
				keyword: '',
                closeShow:false,
				reminderShow:false,			}
		},
		methods: {
			toWorkOrderMap() {
				uni.navigateTo({
					url: '/pages/workOrderManagement/workOrderMap'
				})
			},
			toWorkOrderStatistics() {
				uni.navigateTo({
					url: '/pages/workOrderManagement/workOrderStatistics'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		z-index: 999;
		width: 200rpx;
	}
	
	page{
		padding-bottom: 100px;
	}
// 搜索
.search-box{
	padding: 16rpx 32rpx;
	position: sticky;
	top: 88rpx;
	z-index: 999;
	background-color:#F2F4F6;
	/deep/.u-content{
		border-radius: 8px !important;
	};
	/deep/.u-search{
		position: relative
	};

	/deep/.u-action {
		width: 96rpx;
		line-height: 56rpx;
		border-radius: 4px;
		background-color: rgba(22,119,255,1);
		color: rgba(255,255,255,1);
		text-align: center;
		z-index: 9999;
		position: absolute;
		right: 12rpx;
	}
}

// 我的工单
.my-work-order{
	margin-top: 88rpx;
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 32rpx; 
		.name{
			display: flex;
			align-items: center;
			color: rgba(16,16,16,1);
			font-size: 36rpx;
			font-weight: bold;
			.icon{
				width: 36rpx;
				height: 36rpx;
				border-radius: 4px;
				background-color: rgba(22,119,255,1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 12rpx;
				.img{
					width: 28rpx;
					height: 28rpx;
					
				}
			}
		}
		.more{
			color: #777777;
			font-size: 32rpx;
		}
	}
	// 分类
	.classify{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		margin-top: 8rpx;
		.item{
			width: 160rpx;
			line-height: 72rpx;
			border-radius: 8px;
			background-color: rgba(255,255,255,1);
			border: 1px solid rgba(22,119,255,1);
			text-align: center;
			color: rgba(22,119,255,1);
			font-weight: bold;
			overflow: hidden;
		}
		.item-checked{
			background: linear-gradient(180deg, rgba(78,141,246,1) 0%,rgba(22,119,255,1) 100%);
			color: #fff;
			position: relative;
			.checked-circle{
				width: 20rpx;
				height: 20rpx;
				background-color: rgba(255,150,0,1);
				border-radius: 999px;
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

  // 工单详情
  .work-order{
	  border-radius: 8px;
	  background-color: rgba(255,255,255,1);
	  margin: 24rpx 32rpx;
	  padding: 32rpx 24rpx 0;
	  position: relative;
	  // 紧急
	  .urgency{
		  width: 120rpx;
		  line-height: 56rpx;
		  border-radius: 0px 8px 0px 8px;
		  color: rgba(255,255,255,1);
		  font-size: 32rpx;
		  text-align: center;
		  background: linear-gradient(180deg, rgba(255,79,63,1) 0%,rgba(255,124,112,1) 100%);
		  position: absolute;
		  top: 0;
		  right: 0;
		  
	  }
	  .order-item{
		  display: flex;
		  align-items: center;
		  margin-bottom: 16rpx;
		  .item-icon{
			  .img{
				  width: 40rpx;
				  height: 40rpx;
				  vertical-align: middle;
			  }
		  }
		  .item-value{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
			  margin-left: 16rpx;
		  }
		  .value-bold{
			  font-weight: bold;
		  }
	  }
  }
  // 按钮
  .button{
	  margin-top: 32rpx;
	  border-top: 1px solid rgba(232,232,232,1);
	  padding: 20rpx 0;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  .state{
		  color: rgba(255,123,0,1);
	  }
	  .state2{
		  color: rgba(22,119,255,1);
	  }
	  .state3{
		  color: rgba(0,185,98,1);
	  }
	  .state4{
		  color: rgba(119,119,119,1);
	  }
	  .btn{
		  display: flex;
		  .close{
			  border: 1px solid rgba(187,187,187,1);
			  width: 144rpx;
			  height: 64rpx;
			  line-height: 64rpx;
			  border-radius: 4px;
			  background-color: rgba(255,255,255,1);
			  color: rgba(119,119,119,1);
			  margin-right: 24rpx;
			  font-size: 28rpx
		  }
		  .reminder,.resolved{
			  width: 144rpx;
			  height: 64rpx;
			  line-height: 64rpx;
			  border-radius: 4px;
			  color: rgba(255,255,255,1);
			  background-color: rgba(22,119,255,1);
			  font-size: 28rpx
		  }
		  .resolved{
			  width: 176rpx;
		  }
		  .view{
			  width: 176rpx;
			  height: 64rpx;
			  line-height: 64rpx;
			  border-radius: 4px;
			  background-color: rgba(255,255,255,1);
			  color: rgba(119,119,119,1);	
			  font-size: 28rpx;
			  border: 1px solid rgba(187,187,187,1);
		  }
	  }
  }

}

//关闭原因
.close-reason{
	padding: 32rpx;
	.title{
		color: rgba(16,16,16,1);
		font-size: 36rpx;
		font-weight: bold;
	}
	.reason-content{
		margin-top: 60rpx;
		.reason-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 56rpx;
			.item-title{
				color: rgba(16,16,16,1);
				font-size: 32rpx;
			}
		}
	}
	.button-box{
		display: flex;
		.think{
			width: 328rpx;
			
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 4px;
			background-color: rgba(222,225,228,1);
			color: rgba(51,51,51,1);
			
		}
		.confirm{
			width: 328rpx;
			
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 4px;
			background-color: rgba(255,68,68,1);
			color: rgba(255,255,255,1);
		}
	}
}

// 催单
.reminder-content{
	padding: 32rpx;
	text-align: center;
	.title{
		color: rgba(16,16,16,1);
		font-size: 36rpx;
		font-weight: bold;
	}
	.content{
		color: rgba(16,16,16,1);
		font-size: 32rpx;
		margin-top: 40rpx;
	}
	.know{
		width: 100%;
		line-height: 80rpx;
		border-radius: 4px;
		background-color: rgba(22,119,255,1);
		color: rgba(255,255,255,1);
		font-size: 32rpx;
		margin-top: 84rpx;
	}
}


</style>