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

<template>
	<view>
		
		<view class="navbar-c">
			<view class="back" @click="toStatistics">
				<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">
					工单统计<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">关闭</button>
						<button class="reminder">催单</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>
		
		
		<energyCenterTabbar :current="1"></energyCenterTabbar>
	</view>
</template>

<script>
	import  energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	export default {
		components: {
			energyCenterTabbar
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	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);
		  }
	  }
  }

}


</style>