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

<template>
	<view>
		<u-navbar title="工单统计"  title-color="#fff" :background="background"  back-icon-color="#ffffff" ></u-navbar>
		
		<view class="main">
			<!-- 标签 -->
			<view class="tabs">
				<view class="tabs-item item-checked">
					当天
				</view>
				<view class="tabs-item">
					一周
				</view>
				<view class="tabs-item">
					当天
				</view>
				<view class="tabs-item">
					自定义
				</view>
			</view>
			<!-- 数据统计 -->
			<view class="data-statistics">
				<view class="title">
					数据统计
				</view>
				<view class="state">
					<view class="state-item state1" >
						<view class="state-classify">
							待指派
						</view>
						<view class="state-number">
							2
						</view>
					</view>
					<view class="state-item state2" >
						<view class="state-classify">
							进行中
						</view>
						<view class="state-number">
							3
						</view>
					</view>
					<view class="state-item state3" >
						<view class="state-classify">
							已解决
						</view>
						<view class="state-number">
							33
						</view>
					</view>
					<view class="state-item state4" >
						<view class="state-classify">
							已关闭
						</view>
						<view class="state-number">
							34
						</view>
					</view>
				</view>
			</view>
			<!-- 工单状态 -->
			<view class="workOrder-state">
				<view class="title">
					工单状态
				</view>
				<view class="progress">
					<view class="progress-item">
						<view class="circle-progress">
							<u-circle-progress active-color="#FF7B00" width="136" :percent="12" >
									<view class="u-progress-content">
										
										<text class='u-progress-info1'>12%</text>
									</view>
								</u-circle-progress>
						</view>
						<view class="state">
							待指派
						</view>
					</view>
					<view class="progress-item">
						<view class="circle-progress">
							<u-circle-progress active-color="#008FA9" width="136" :percent="15">
									<view class="u-progress-content">
										
										<text class='u-progress-info2'>15%</text>
									</view>
								</u-circle-progress>
						</view>
						<view class="state">
							进行中
						</view>
					</view>
					<view class="progress-item">
						<view class="circle-progress">
							<u-circle-progress active-color="#18C272" width="136" :percent="73">
									<view class="u-progress-content">
										
										<text class='u-progress-info3'>73%</text>
									</view>
								</u-circle-progress>
						</view>
						<view class="state">
							已解决
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 每月工单数量 -->
		<view class="workOrder-amount">
			<view class="title">
				每月工单数量
			</view>
			<view class="chat">
				
				<image class="chat-img" src="@/assets/img/AUgyKM0@1x2.png" mode=""></image>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor:'#1677FF'
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100rpx;
	}
	/deep/.uicon-nav-back{
		color: #FFF !important;
		
	}
	.main{
		background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
		height: 720rpx;
		// 标签
		.tabs{
			display: flex;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			.tabs-item{
				width: 144rpx;
				line-height: 56rpx;
				text-align: center;
				color: rgba(255,255,255,0.6);
			}
			.item-checked{
				border: 1px solid rgba(255,255,255,1);
				color: rgba(255,255,255,1);
				border-radius: 50px;
			}
		}
		// 数据统计
		.data-statistics{
			margin: 24rpx 32rpx;
			border-radius: 8px;
			background-color: rgba(255,255,255,1);
			padding: 24rpx;
			.title{
				color: rgba(16,16,16,1);
				font-size: 36rpx;
				font-weight: bold;
			}
			.state{
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;
				.state-item{
					width: 72px;
					height: 72px;
					border-radius: 8px;
					color: rgba(255,255,255,1);
					text-align: center;
					padding: 24rpx;
					font-weight: bold;
					.state-classify{
						
						font-size: 32rpx;
					}
					.state-number{
						margin-top: 8rpx;
						font-size: 40rpx;
					}
				}
				.state1{
					background: linear-gradient(180deg, rgba(255,174,0,1) 0%,rgba(255,123,0,1) 100%);
				}
				.state2{
					background: linear-gradient(178.54deg, rgba(50,204,213,1) 0%,rgba(0,143,169,1) 99.73%);
				}
				.state3{
					background: linear-gradient(180deg, rgba(24,194,114,1) 0%,rgba(0,148,79,1) 100%);
				}
				.state4{
					background: linear-gradient(180deg, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
				}
			}
		}
	
	  // 工单状态
	.workOrder-state{
		border-radius: 8px;
		background-color: rgba(255,255,255,1);
		margin: 24rpx 32rpx;
		padding: 24rpx;
		.title{
			color: rgba(16,16,16,1);
			font-size: 36rpx;
			font-weight: bold;
		}
		.progress{
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			.progress-item{
				text-align: center;
				.state{
					color: rgba(51,51,51,1);
					margin-top: 16rpx;
				}
			}
			.u-progress-info1{
				color:#FF7B00;
				
				font-weight: bold;
			}
			.u-progress-info2{
				color:#008FA9;
				
				font-weight: bold;
			}
			.u-progress-info3{
				color:#18C272;
				
				font-weight: bold;
			}
		}
	}
	
	
	}
	// 每月工单数量
.workOrder-amount{
		border-radius: 8px;
		background-color: rgba(255,255,255,1);
		margin: 24rpx 32rpx;
		padding: 24rpx 0;
		.title{
			color: rgba(16,16,16,1);
			font-size: 36rpx;
			font-weight: bold;
			padding: 0 24rpx;
		}
		.chat{
			width: 100%;
			height: 692rpx;
			margin-top: 54rpx;
			.chat-img{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>