图表

pages/abnormal/abnormalAlarmDetails.vue

@@ -52,7 +52,10 @@
 						2月4日温度监控
 					</view>
 					<view class="chat">
-						<image class="img" src="@/assets/img/recordChat.png" mode=""></image>
+						<view id="lineEcharts" style="min-height:400rpx;">
+						
+						</view>
+						<!-- <image class="img" src="@/assets/img/recordChat.png" mode=""></image> -->
 					</view>
 				</view>
 			</view>
@@ -93,15 +96,81 @@
 </template>
 
 <script>
+	import * as echarts from 'echarts';
+	
 	export default {
 		data() {
 			return {
 				closeShow: false,
 				reasonList: ['错误告警','设备已自动恢复','不需要上门解决','平台移桩，可忽视','其他'],
-				current: 0
+				current: 0,
+				myLineChart: null
 			}
 		},
+		onReady() {
+			this.getLineCharts();
+		},
 		methods: {
+			getLineCharts() {
+				if (!this.myLineChart) {
+					this.myLineChart = echarts.init(document.getElementById('lineEcharts'), null, {
+						width: uni.upx2px(686),
+						height: uni.upx2px(400)
+					});
+				}
+				this.myLineChart.clear();
+				
+				var data1 = ['0-2点', '3-4点', '5-6点', '7-8点', '9-10点', '11-12点', '13-14点', '15-16点',
+					'17-18点', '19-20点', '21-22点', '23-24点'
+				];
+				var data2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+				
+				var option = {
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow'
+						}
+					},
+					legend: {
+						show: false
+					},
+					grid: {
+						top: '6%',
+						left: '3%',
+						right: '8%',
+						bottom: '8%',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: data1,
+						axisLabel: {
+							rotate: 40,
+							interval: 0,
+							textStyle: {
+								color: "#333"
+							}
+						},
+					},
+					yAxis: {
+						type: 'value',
+						axisLabel: {
+							formatter: '{value} °C'
+						}
+					},
+					series: [{
+						name: '温度',
+						type: 'line',
+						data: data2,
+						itemStyle: {
+							color: '#F39423'
+						}
+					}]
+				};
+			
+				this.myLineChart.setOption(option);
+			},
 			reasonClick(item,index) {
 				this.current = index;
 			},

pages/equipmentDataMonitoring/electronicMonitoring.vue

@@ -27,7 +27,7 @@
 				</view>
 			</view>
 		</view>
-		
+
 		<!-- 用电量 -->
 		<view class="electricity-consumption">
 			<view class="title">
@@ -113,10 +113,10 @@
 		<view class="electricity-chart">
 			<view class="title">
 				<view class="icon">
-				
+
 				</view>
 				<view class="text">
-					 各时段用电量 (度)
+					各时段用电量 (度)
 
 				</view>
 				<view class="more" @click="tabsFrom.show2=true,params.day=true">
@@ -124,17 +124,14 @@
 				</view>
 			</view>
 			<view class="chart">
-				<!-- <image class="img" src="@/assets/img/chart@1x.png" mode=""></image> -->
 				<view id="barEcharts" style="min-height:440rpx;">
 
 				</view>
-				<view style="
-				text-align: center;
-					background: white;" ></view>
+				<view style="text-align: center;background: white;">当日电量合计：{{sumQuantity}}度</view>
 			</view>
 		</view>
 		<!-- 异常波动 -->
-		<view class="abnormal"  v-if="false">
+		<view class="abnormal" v-if="false">
 			<view class="headline">
 				<view class="title">
 					<view class="icon">
@@ -174,7 +171,7 @@
 		</view>
 
 		<!-- 能源监测 -->
-		<view class="energy-inspection" v-if="false" >
+		<view class="energy-inspection" v-if="false">
 			<view class="title">
 				<view class="icon">
 
@@ -226,7 +223,7 @@
 			</view>
 		</view>
 		<!-- 数据分析 -->
-		<view class="data-analysis"  v-if="false">
+		<view class="data-analysis" v-if="false">
 			<view class="title">
 				<view class="icon">
 
@@ -286,7 +283,7 @@
 					</view>
 				</view>
 				<view class="border">
-					
+
 				</view>
 				<view class="item">
 					<view class="item-title">
@@ -297,7 +294,7 @@
 					</view>
 				</view>
 				<view class="border">
-					
+
 				</view>
 				<view class="item">
 					<view class="item-title">
@@ -309,69 +306,69 @@
 				</view>
 			</view>
 		</view>
-          <!-- 设备信息弹窗 -->
-		
-			<view class="equipment-popup">
-					<u-popup v-model="equipmentInfosShow" mode="bottom" border-radius="12">
-						<view class="content">
-							<view class="headline">
-								设备信息
+		<!-- 设备信息弹窗 -->
+
+		<view class="equipment-popup">
+			<u-popup v-model="equipmentInfosShow" mode="bottom" border-radius="12">
+				<view class="content">
+					<view class="headline">
+						设备信息
+					</view>
+					<view class="infos">
+						<view class="item">
+							<view class="item-title">
+								类型
+							</view>
+							<view class="item-value">
+								变压器
+							</view>
+						</view>
+						<view class="item">
+							<view class="item-title">
+								编号
+							</view>
+							<view class="item-value">
+								SN9015001
+							</view>
+						</view>
+						<view class="item">
+							<view class="item-title">
+								所属公司
+							</view>
+							<view class="item-value">
+								荆鹏集团
+							</view>
+						</view>
+						<view class="item">
+							<view class="item-title">
+								地址
+							</view>
+							<view class="item-value">
+								荆州市沙市区江津东路155号
+							</view>
+						</view>
+						<view class="item">
+							<view class="item-title">
+								上线时间
 							</view>
-							<view class="infos">
-								<view class="item" >
-									<view class="item-title">
-										类型
-									</view>
-									<view class="item-value">
-										变压器
-									</view>
-								</view>
-								<view class="item" >
-									<view class="item-title">
-										编号
-									</view>
-									<view class="item-value">
-										SN9015001
-									</view>
-								</view>
-								<view class="item" >
-									<view class="item-title">
-										所属公司
-									</view>
-									<view class="item-value">
-										荆鹏集团
-									</view>
-								</view>
-								<view class="item" >
-									<view class="item-title">
-										地址
-									</view>
-									<view class="item-value">
-										荆州市沙市区江津东路155号
-									</view>
-								</view>
-								<view class="item" >
-									<view class="item-title">
-										上线时间
-									</view>
-									<view class="item-value">
-										2024-01-01
-									</view>
-								</view>
-								<view class="item" >
-									<view class="item-title">
-										上次故障时间
-									</view>
-									<view class="item-value">
-										2024-02-14
-									</view>
-								</view>
+							<view class="item-value">
+								2024-01-01
 							</view>
-							<button class="get" @click="equipmentInfosShow=false">知道了</button>
 						</view>
-					</u-popup>
-					
+						<view class="item">
+							<view class="item-title">
+								上次故障时间
+							</view>
+							<view class="item-value">
+								2024-02-14
+							</view>
+						</view>
+					</view>
+					<button class="get" @click="equipmentInfosShow=false">知道了</button>
 				</view>
+			</u-popup>
+
+		</view>
 		<!-- 故障上报 -->
 		<view class="create-order" v-if="false">
 			<view class="img-box">
@@ -396,7 +393,8 @@
 	export default {
 		data() {
 			return {
-				equipmentInfosShow:false,
+				sumQuantity: 0,
+				equipmentInfosShow: false,
 				kWhList: [],
 				queryDay: '',
 				showTop: [0, 0, 0, 0, 0, 0, 0, 0],
@@ -409,7 +407,7 @@
 					queryDate: '',
 					meterId: ''
 				},
-				myBarChart: null,
+				myChart: null,
 				endYear: '',
 				equipmentShow: false,
 				multiSelector: [
@@ -510,7 +508,7 @@
 					name: '指定月份',
 					disabled: false
 				}],
-				value: '2',
+				value: '2'
 			};
 		},
 		onLoad(op) {
@@ -663,18 +661,21 @@
 				this.myChart.clear();
 
 				var data1 = ['0-2点', '3-4点', '5-6点', '7-8点', '9-10点', '11-12点', '13-14点', '15-16点',
-					'17-18点', '19-20点', '21-22点', '23-24点'];
+					'17-18点', '19-20点', '21-22点', '23-24点'
+				];
 				var data2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-				if(list) {
+				var sumQuantity = 0;
+				if (list) {
 					data1 = [];
 					data2 = [];
 					for (var i in list) {
-						data1.push(i)
-						data2.push(list[i])
+						data1.push(i);
+						data2.push(list[i]);
+						sumQuantity += list[i];
 					}
 				}
-
-				var headitemby = ""
+				this.sumQuantity = sumQuantity.toFixed(2);
+				var headitemby = "";
 				var showkey = "";
 				var option = {
 					tooltip: {
@@ -764,12 +765,12 @@
 
 	.navbar-c {
 		background-color: rgba(22, 119, 255, 1);
-        position: fixed;
+		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		z-index: 999;
-		
+
 		.back {
 			z-index: 999;
 			width: 200rpx;
@@ -983,14 +984,14 @@
 		padding: 40rpx 0rpx;
 		background-color: #fff;
 		border-radius: 8px;
-	
+
 		.title {
 			display: flex;
 			align-items: center;
 			// justify-content: space-between;
 			padding: 0 12rpx;
 			margin-bottom: 40rpx;
-	
+
 			.icon {
 				width: 36rpx;
 				height: 36rpx;
@@ -998,29 +999,30 @@
 				border: 6px solid rgba(22, 119, 255, 1);
 				border-radius: 100px;
 			}
-	
+
 			.text {
-				
+
 				color: rgba(51, 51, 51, 1);
 				font-size: 36rpx;
 				margin-left: 16rpx;
 			}
-			.more{
+
+			.more {
 				margin-left: auto;
 			}
 		}
-	
+
 		.chart {
 			width: 100%;
 			height: 440rpx;
-	
+
 			.img {
 				width: 100%;
 				height: 440rpx;
 			}
 		}
 	}
-	
+
 	.equipment-information {
 		margin: 24rpx 32rpx;
 		padding: 40rpx 0rpx;
@@ -1070,26 +1072,31 @@
 				height: 440rpx;
 			}
 		}
-		.infos{
+
+		.infos {
 			padding: 0 32rpx;
 			display: flex;
 			justify-content: space-between;
 			text-align: center;
-			.border{
+
+			.border {
 				margin: auto 0;
 				height: 70rpx;
 				width: 2rpx;
-				background-color: rgba(204,204,204,1);;
+				background-color: rgba(204, 204, 204, 1);
+				;
 			}
-			.item-title{
-				color: rgba(119,119,119,1);
+
+			.item-title {
+				color: rgba(119, 119, 119, 1);
 			}
-			.item-value{
-				color: rgba(16,16,16,1);
+
+			.item-value {
+				color: rgba(16, 16, 16, 1);
 				font-size: 32rpx;
 				margin-top: 16rpx;
 			}
-			
+
 		}
 	}
 
@@ -1237,51 +1244,58 @@
 	}
 
 
-// 设备信息弹窗
-.equipment-popup{
-	
-	.content{
-		
-		padding: 32rpx;
-		.headline{
-			color: rgba(16,16,16,1);
-			font-size: 36rpx;
-			text-align: center;
-			font-weight: bold;
-		}
-		.infos{
-			padding-bottom: 100rpx;
-			.item:last-of-type{
-				border: none;
+	// 设备信息弹窗
+	.equipment-popup {
+
+		.content {
+
+			padding: 32rpx;
+
+			.headline {
+				color: rgba(16, 16, 16, 1);
+				font-size: 36rpx;
+				text-align: center;
+				font-weight: bold;
 			}
-			.item{
-				display: flex;
-				align-items: center;
-				height: 80rpx;
-				line-height: 80rpx;
-				border-bottom: 1px solid #cccccc;
-				.item-title{
-					color: rgba(51,51,51,1);
-					width: 200rpx;
+
+			.infos {
+				padding-bottom: 100rpx;
+
+				.item:last-of-type {
+					border: none;
 				}
-				.item-value{
-					color: #666666;
-					flex: 1;
-					margin-left: 16rpx;
+
+				.item {
+					display: flex;
+					align-items: center;
+					height: 80rpx;
+					line-height: 80rpx;
+					border-bottom: 1px solid #cccccc;
+
+					.item-title {
+						color: rgba(51, 51, 51, 1);
+						width: 200rpx;
+					}
+
+					.item-value {
+						color: #666666;
+						flex: 1;
+						margin-left: 16rpx;
+					}
 				}
+
+			}
+
+			.get {
+				height: 80rpx;
+				line-height: 80rpx;
+				border-radius: 4px;
+				background-color: rgba(22, 119, 255, 1);
+				color: rgba(255, 255, 255, 1);
+				font-size: 32rpx;
 			}
-			
-		}
-		.get{
-			height: 80rpx;
-			line-height: 80rpx;
-			border-radius: 4px;
-			background-color: rgba(22,119,255,1);
-			color: rgba(255,255,255,1);
-			font-size: 32rpx;
 		}
 	}
-}
 
 
 
@@ -1291,7 +1305,7 @@
 		width: 120rpx;
 		height: 120rpx;
 		border-radius: 20px;
-		background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
+		background: linear-gradient(180.29deg, rgba(255, 124, 112, 1) 0.9%, rgba(255, 79, 63, 1) 100.4%);
 		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
 		text-align: center;
 		display: flex;

pages/statistics/statistics.vue

@@ -151,7 +151,7 @@
 				</view>
 			</view>
 			<!-- 统计2 异常告警记录 -->
-			<view class="statistics-2 statistics">
+			<view class="statistics-2 statistics" v-if="false">
 				<view class="title">
 					<view class="icon">
 						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
@@ -402,7 +402,10 @@
 				merchantList2: [],
 				companyList: [],
 				popShow: false,
-				current: 0
+				current: 0,
+				myLineChart: null,
+				myBarChart: null,
+				myPieChart: null
 			}
 		},
 		onLoad() {

pages/workOrderManagement/workOrderManagement.vue

@@ -8,7 +8,7 @@
 			<view class="title">
 				工单管理
 			</view>
-			<view class="right">
+			<view class="right" @click="gotoUrl('/pages/workOrderManagement/faultReport')">
 				故障上报
 			</view>
 		</view>
@@ -329,9 +329,15 @@
 </script>
 
 <style lang="scss" scoped>
-	.back {
-		z-index: 999;
-		width: 200rpx;
+	.navbar-c {
+		.back {
+			z-index: 999;
+			width: 200rpx;
+		}
+		.right {
+			z-index: 999;
+			// width: 200rpx;
+		}
 	}
 
 	page {

pages/workOrderManagement/workOrderStatistics.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
-		<u-navbar title="工单统计"  title-color="#fff" :background="background"  back-icon-color="#ffffff" ></u-navbar>
-		
+		<u-navbar title="工单统计" title-color="#fff" :background="background" back-icon-color="#ffffff"></u-navbar>
+
 		<view class="main">
 			<!-- 标签 -->
 			<view class="tabs">
@@ -24,7 +24,7 @@
 					数据统计
 				</view>
 				<view class="state">
-					<view class="state-item state1" >
+					<view class="state-item state1">
 						<view class="state-classify">
 							待指派
 						</view>
@@ -32,7 +32,7 @@
 							2
 						</view>
 					</view>
-					<view class="state-item state2" >
+					<view class="state-item state2">
 						<view class="state-classify">
 							进行中
 						</view>
@@ -40,7 +40,7 @@
 							3
 						</view>
 					</view>
-					<view class="state-item state3" >
+					<view class="state-item state3">
 						<view class="state-classify">
 							已解决
 						</view>
@@ -48,7 +48,7 @@
 							33
 						</view>
 					</view>
-					<view class="state-item state4" >
+					<view class="state-item state4">
 						<view class="state-classify">
 							已关闭
 						</view>
@@ -66,12 +66,12 @@
 				<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>
+							<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">
 							待指派
@@ -80,11 +80,11 @@
 					<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 class="u-progress-content">
+
+									<text class='u-progress-info2'>15%</text>
+								</view>
+							</u-circle-progress>
 						</view>
 						<view class="state">
 							进行中
@@ -93,11 +93,11 @@
 					<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 class="u-progress-content">
+
+									<text class='u-progress-info3'>73%</text>
+								</view>
+							</u-circle-progress>
 						</view>
 						<view class="state">
 							已解决
@@ -105,7 +105,7 @@
 					</view>
 				</view>
 			</view>
-			
+
 		</view>
 		<!-- 每月工单数量 -->
 		<view class="workOrder-amount">
@@ -113,166 +113,256 @@
 				每月工单数量
 			</view>
 			<view class="chat">
-				
-				<image class="chat-img" src="@/assets/img/AUgyKM0@1x2.png" mode=""></image>
-				
+				<view id="barEcharts" style="min-height:692rpx;">
+
+				</view>
+				<!-- <image class="chat-img" src="@/assets/img/AUgyKM0@1x2.png" mode=""></image> -->
+
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	import * as echarts from 'echarts';
+
 	export default {
 		data() {
 			return {
-				background:{
-					backgroundColor:'#1677FF'
+				myChart: null,
+				background: {
+					backgroundColor: '#1677FF'
 				}
 			}
 		},
+		onReady() {
+			this.getBarCharts();
+		},
 		methods: {
-			
+			getBarCharts(list) {
+				if (!this.myChart) {
+					this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
+						width: uni.upx2px(700),
+						height: uni.upx2px(692)
+					});
+				}
+				this.myChart.clear();
+
+				var data1 = ['1月','2月','3月','4月','5月','6月'];
+				var dataX = [2,1,0,1,3,0];
+				var dataC = [3,1,1,0,2,1];
+				var dataS = [5,2,1,1,5,1];
+				
+				var option = {
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow'
+						}
+					},
+					legend: {},
+					grid: {
+						top: '6%',
+						left: '3%',
+						right: '8%',
+						bottom: '8%',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'value'
+					},
+					yAxis: {
+						type: 'category',
+						data: data1
+					},
+					barGap: '0',
+					series: [{
+							name: '新增工单',
+							type: 'bar',
+							data: dataX
+						},
+						{
+							name: '处理工单',
+							type: 'bar',
+							data: dataC
+						},
+						{
+							name: '剩余工单',
+							type: 'bar',
+							data: dataS
+						}
+					]
+				}
+				console.log(option)
+				this.myChart.setOption(option);
+			},
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	page{
+	page {
 		padding-bottom: 100rpx;
 	}
-	/deep/.uicon-nav-back{
+
+	/deep/.uicon-nav-back {
 		color: #FFF !important;
-		
+
 	}
-	.main{
-		background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
+
+	.main {
+		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(22, 119, 255, 0) 100%);
 		height: 720rpx;
+
 		// 标签
-		.tabs{
+		.tabs {
 			display: flex;
 			justify-content: space-between;
 			padding: 24rpx 32rpx;
-			.tabs-item{
+
+			.tabs-item {
 				width: 144rpx;
 				line-height: 56rpx;
 				text-align: center;
-				color: rgba(255,255,255,0.6);
+				color: rgba(255, 255, 255, 0.6);
 			}
-			.item-checked{
-				border: 1px solid rgba(255,255,255,1);
-				color: rgba(255,255,255,1);
+
+			.item-checked {
+				border: 1px solid rgba(255, 255, 255, 1);
+				color: rgba(255, 255, 255, 1);
 				border-radius: 50px;
 			}
 		}
+
 		// 数据统计
-		.data-statistics{
+		.data-statistics {
 			margin: 24rpx 32rpx;
 			border-radius: 8px;
-			background-color: rgba(255,255,255,1);
+			background-color: rgba(255, 255, 255, 1);
 			padding: 24rpx;
-			.title{
-				color: rgba(16,16,16,1);
+
+			.title {
+				color: rgba(16, 16, 16, 1);
 				font-size: 36rpx;
 				font-weight: bold;
 			}
-			.state{
+
+			.state {
 				display: flex;
 				justify-content: space-between;
 				margin-top: 24rpx;
-				.state-item{
+
+				.state-item {
 					width: 144rpx;
 					height: 144rpx;
 					border-radius: 8px;
-					color: rgba(255,255,255,1);
+					color: rgba(255, 255, 255, 1);
 					text-align: center;
 					padding: 24rpx;
 					font-weight: bold;
-					.state-classify{
-						
+
+					.state-classify {
+
 						font-size: 32rpx;
 					}
-					.state-number{
+
+					.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%);
+
+				.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%);
+
+				.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%);
+
+				.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%);
+
+				.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;
-				
+
+		// 工单状态
+		.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;
 			}
-			.u-progress-info3{
-				color:#18C272;
-				
-				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{
+	.workOrder-amount {
 		border-radius: 8px;
-		background-color: rgba(255,255,255,1);
+		background-color: rgba(255, 255, 255, 1);
 		margin: 24rpx 32rpx;
 		padding: 24rpx 0;
-		.title{
-			color: rgba(16,16,16,1);
+
+		.title {
+			color: rgba(16, 16, 16, 1);
 			font-size: 36rpx;
 			font-weight: bold;
 			padding: 0 24rpx;
 		}
-		.chat{
+
+		.chat {
 			width: 100%;
 			height: 692rpx;
 			margin-top: 54rpx;
-			.chat-img{
+
+			.chat-img {
 				width: 100%;
 				height: 100%;
 			}
 		}
 	}
-</style>
+</style>