修改

pages/statistics/statistics.vue

@@ -12,13 +12,14 @@
 		<!-- 标签 -->
 		<view class="tabs-box">
 			<view class="tabs">
-				<u-tabs :list="list" :is-scroll="false" active-color="#fff"  inactive-color="#CCE2FF" bg-color="#1677FF" :current="current" @change="change"></u-tabs>
+				<u-tabs :list="list" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF" bg-color="#1677FF"
+					:current="current" @change="change"></u-tabs>
 			</view>
 			<view class="more">
 				<u-icon name="arrow-down" color="#fff" size="40"></u-icon>
 			</view>
 		</view>
-		
+
 		<view class="main">
 			<!-- 统计1 -->
 			<view class="statistics-1">
@@ -36,13 +37,13 @@
 							</view>
 						</view>
 					</view>
-					
-				<!-- 累计 -->
-				<view class="total">
-					本月累计报警 <text class="total-number">12</text> 次
-				</view>
+
+					<!-- 累计 -->
+					<view class="total">
+						本月累计报警 <text class="total-number">12</text> 次
+					</view>
 				</view>
-				
+
 			</view>
 			<!-- 统计2 异常报警记录 -->
 			<view class="statistics-2 statistics">
@@ -122,49 +123,49 @@
 							</view>
 						</view>
 					</view>
-						<!-- 监控信息 -->
-						<view class="infos" >
-							<view class="infos-item">
-								<view class="icon">
-									<img src="../../assets/img/iconPark-electric-wave 1.svg" alt="" />
-								</view>
-								<view class="text">
-									20A
-								</view>
+					<!-- 监控信息 -->
+					<view class="infos">
+						<view class="infos-item">
+							<view class="icon">
+								<img src="../../assets/img/iconPark-electric-wave 1.svg" alt="" />
 							</view>
-							<view class="infos-item">
-								<view class="icon">
-									<img src="../../assets/img/voltage.svg" alt="" />
-								</view>
-								<view class="text">
-									380V
-								</view>
+							<view class="text">
+								20A
 							</view>
-							<view class="infos-item">
-								<view class="icon">
-									<img src="../../assets/img/iconPark-thermometer.svg" alt="" />
-								</view>
-								<view class="text">
-									80℃
-								</view>
+						</view>
+						<view class="infos-item">
+							<view class="icon">
+								<img src="../../assets/img/voltage.svg" alt="" />
 							</view>
-							<view class="infos-item">
-								<view class="icon">
-									<img src="../../assets/img/power.svg" alt="" />
-								</view>
-								<view class="text">
-									80kW
-								</view>
+							<view class="text">
+								380V
 							</view>
-							<view class="infos-item">
-								<view class="icon">
-									<img src="../../assets/img/powerFactor.svg" alt="" />
-								</view>
-								<view class="text">
-									0.98 / 0.97
-								</view>
+						</view>
+						<view class="infos-item">
+							<view class="icon">
+								<img src="../../assets/img/iconPark-thermometer.svg" alt="" />
+							</view>
+							<view class="text">
+								80℃
+							</view>
+						</view>
+						<view class="infos-item">
+							<view class="icon">
+								<img src="../../assets/img/power.svg" alt="" />
+							</view>
+							<view class="text">
+								80kW
 							</view>
 						</view>
+						<view class="infos-item">
+							<view class="icon">
+								<img src="../../assets/img/powerFactor.svg" alt="" />
+							</view>
+							<view class="text">
+								0.98 / 0.97
+							</view>
+						</view>
+					</view>
 				</view>
 			</view>
 			<!--设备状态-->
@@ -176,11 +177,14 @@
 					<view class="text">
 						设备状态
 					</view>
-					
-					
+
+
 				</view>
 				<view class="chat">
-					<image class="chat-img" src="@/assets/img/qmJEzOi@1x.png" mode=""></image>
+					<!-- <image class="chat-img" src="@/assets/img/qmJEzOi@1x.png" mode=""></image> -->
+					<view id="pieEcharts" style="min-height:620rpx;">
+
+					</view>
 				</view>
 			</view>
 			<!-- 故障类型 -->
@@ -192,11 +196,14 @@
 					<view class="text">
 						设备状态
 					</view>
-					
-					
+
+
 				</view>
 				<view class="chat">
-					<image class="chat-img" src="@/assets/img/AUgyKM0@1x.png" mode=""></image>
+					<!-- <image class="chat-img" src="@/assets/img/AUgyKM0@1x.png" mode=""></image> -->
+					<view id="barEcharts" style="min-height:410rpx;">
+					
+					</view>
 				</view>
 			</view>
 			<!-- 工单处理 -->
@@ -208,42 +215,234 @@
 					<view class="text">
 						设备状态
 					</view>
-					
-					
+
+
 				</view>
 				<view class="chat">
-					<image class="chat-img" src="@/assets/img/AUgyKM1@1x.png" mode=""></image>
+					<!-- <image class="chat-img" src="@/assets/img/AUgyKM1@1x.png" mode=""></image> -->
+					<view id="lineEcharts" style="min-height:410rpx;">
+					
+					</view>
 				</view>
 			</view>
 		</view>
-	
-	
-	<energyCenterTabbar :current="0"></energyCenterTabbar>
+
+
+		<energyCenterTabbar :current="0"></energyCenterTabbar>
 	</view>
 </template>
 
 <script>
-	import  energyCenterTabbar from '@/components/energyCenterTabbar.vue'
+	import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
+	import * as echarts from 'echarts';
+
 	export default {
 		components: {
 			energyCenterTabbar
 		},
 		data() {
 			return {
+				myPieChart: null,
+				myBarChart: null,
+				myLineChart: null,
 				list: [{
 					name: '全部'
 				}, {
 					name: '荆鹏集团'
 				}, {
 					name: '青少年宫',
-					
-				},{
+
+				}, {
 					name: '荆州院子'
-				},],
+				}, ],
 				current: 0
 			}
 		},
+		onReady() {
+			this.getPieCharts();
+			this.getBarCharts();
+			this.getLineCharts();
+		},
 		methods: {
+			getLineCharts() {
+				if (!this.myLineChart) {
+					this.myLineChart = echarts.init(document.getElementById('lineEcharts'));
+				}
+				var option = {
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow'
+						}
+					},
+					legend: {
+						data: ['新增工单', '处理工单', '剩余工单']
+					},
+					grid: {
+						left: '3%',
+						right: '4%',
+						bottom: '3%',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: ['1日', '2日', '3日', '4日', '5日', '6日']
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [
+						{
+							name: '新增工单',
+							type: 'line',
+							data: [2, 1, 0, 1, 3, 0],
+							itemStyle: { color: '#FF3D00' }
+						},
+						{
+							name: '处理工单',
+							type: 'line',
+							data: [3, 1, 1, 0, 2, 1],
+							itemStyle: { color: '#FF7B00' }
+						},
+						{
+							name: '剩余工单',
+							type: 'line',
+							data: [5, 2, 1, 1, 5, 1],
+							itemStyle: { color: '#58A55C' }
+						}
+					]
+				};
+
+				this.myLineChart.setOption(option);
+			},
+			getBarCharts() {
+				if (!this.myBarChart) {
+					this.myBarChart = echarts.init(document.getElementById('barEcharts'));
+				}
+				var option = {
+				  tooltip: {
+				    trigger: 'axis',
+				    axisPointer: {
+				      type: 'shadow'
+				    }
+				  },
+				  legend: {},
+				  grid: {
+				    left: '3%',
+				    right: '4%',
+				    bottom: '3%',
+				    containLabel: true
+				  },
+				  xAxis: [
+				    {
+				      type: 'category',
+				      data: ['一月', '二月', '三月'],
+				      axisTick: {
+				        alignWithLabel: true
+				      }
+				    }
+				  ],
+				  yAxis: [
+				    {
+				      type: 'value'
+				    }
+				  ],
+				  barGap: '0',
+				  series: [
+				    {
+				      name: '温度异常',
+				      type: 'bar',
+				      data: [100, 140, 230],
+				      itemStyle: { color: '#FF3D00' }
+				    },
+				    {
+				      name: '电压异常',
+				      type: 'bar',
+				      data: [150, 100, 200],
+				      itemStyle: { color: '#FF7B00' }
+				    },
+				    {
+				      name: '功率因素异常',
+				      type: 'bar',
+				      data: [50, 80, 100],
+				      itemStyle: { color: '#FFAE00' }
+				    }
+				  ]
+				};
+				
+				this.myBarChart.setOption(option);
+			},
+			getPieCharts() {
+				if (!this.myPieChart) {
+					this.myPieChart = echarts.init(document.getElementById('pieEcharts'));
+				}
+
+				var option = {
+					tooltip: {
+						trigger: 'item',
+					},
+					legend: {
+						top: '0%',
+						left: 'center'
+					},
+					series: [{
+						type: 'pie',
+						top: '10%',
+						radius: ['45%', '60%'],
+						label: {
+							formatter: '{name|{b}}\n{value|{c}}',
+							fontSize: 12,
+							position: 'outer',
+							bleedMargin: 5,
+							rich: {
+								name: {
+									align: 'left'
+								},
+								value: {
+									align: 'left'
+								}
+							}
+						},
+						emphasis: {
+							label: {
+								itemStyle: {
+									shadowBlur: 10,
+									shadowOffsetX: 0,
+									shadowColor: 'rgba(0, 0, 0, 0.5)'
+								}
+							}
+						},
+						data: [{
+								value: 2,
+								name: '温度异常',
+								itemStyle: {color:'#FF4F3F'}
+							},
+							{
+								value: 3,
+								name: '电压异常',
+								itemStyle: {color:'#FF7B00'}
+							},
+							{
+								value: 8,
+								name: '正常运行',
+								itemStyle: {color:'#1677FF'}
+							},
+							{
+								value: 1,
+								name: '功率因素异常',
+								itemStyle: {color:'#F2BD42'}
+							},
+							{
+								value: 1,
+								name: '设备离线',
+								itemStyle: {color:'#C2C2C2'}
+							}
+						]
+					}]
+				};
+
+				this.myPieChart.setOption(option);
+			},
 			change(index) {
 				this.current = index;
 			}
@@ -252,221 +451,250 @@
 </script>
 
 <style lang="scss" scoped>
-	page{
+	page {
 		padding-bottom: 200rpx;
 	}
+
 	// 导航栏
-	.navbar{
-		background-color: rgba(22,119,255,1);
+	.navbar {
+		background-color: rgba(22, 119, 255, 1);
 		color: #fff;
 		line-height: 88rpx;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 0 32rpx;
-		color: rgba(255,255,255,1);
+		color: rgba(255, 255, 255, 1);
 		font-size: 36rpx;
-		.img{
+
+		.img {
 			width: 48rpx;
 			height: 48rpx;
 			vertical-align: middle;
 		}
 	}
-  // 标签
-  .tabs-box{
-	  height: 200rpx;
-	  padding-right: 32rpx;
-	  background-color: rgba(22,119,255,1);
-	  display: flex;
-	  align-items: center;
-	  justify-content: space-between;
-	 
-	   
-	  .tabs{
-		  width: 80%;
-	  }
-	  
-  }
-  
-  .main{
-	  border-radius: 16px 16px 0px 0px;
-	  
-	  background: linear-gradient(180deg, rgba(242,244,246,1) 61%,rgba(255,255,255,0) 100%);
-	  margin-top: -24rpx;
-	  padding: 32rpx;
-	  
-	  
-	  .statistics{
-		  border-radius: 8px;
-		  background-color: rgba(255,255,255,1);
-		  box-shadow: 0px 1px 6px 0px rgba(0,59,142,0.05);
-		  margin-top: 24rpx;
-		  padding: 40rpx;
-		  .title{
-		  			  display: flex;
-		  			  align-items: center;
-		  			  margin-bottom: 28rpx;
-		  			  .img{
-		  				  width: 36rpx;
-		  				  height: 36rpx;
-		  				  vertical-align: middle;
-		  			  }
-					  .change-img{
-						  width: 32rpx;
-						  height: 32rpx;
-						  vertical-align: middle;
-					  }
-		  			  .text{
-		  				  color: rgba(16,16,16,1);
-		  				  font-size: 36rpx;
-		  				  margin-left: 16rpx;
-		  				  font-weight: bold;
-		  			  }
-					  .change{
-						  margin-left: 16rpx;
-						  font-size: 24rpx;
-						  color: #838383;
-						  
-					  }
-		  			  .check-all{
-		  				  margin-left: auto;
-		  				  color: rgba(131,131,131,1);
-		  				  font-size: 24rpx;
-		  			  }
-		  }
-	  }
-	  // 统计1
-	  .statistics-1{
-		  display: flex;
-		  align-items: center;
-		  justify-content: space-between;
-		  .item{
-			  width: 330rpx;
-			  padding: 24rpx;
-			  box-shadow: 0px 1px 6px 0px rgba(0,59,142,0.05);
-			  border-radius: 8px;
-			  background-color: rgba(255,255,255,1);
-			  .item-top{
-				  display: flex;
-				  align-items: center;
-
-				  .img{
-					  width: 88rpx;
-					  height: 88rpx;
-					  margin-right: 24rpx;
-					  vertical-align: middle;
-				  }
-				  .number{
-					  color: rgba(51,51,51,1);
-					  font-size: 32rpx;
-					  
-					  .normal{
-						  margin-bottom: 12rpx;
-					  }
-				  }
-			  }
-			  .total{
-				  margin-top: 28rpx;
-				  text-align: center;
-				  color: rgba(119,119,119,1);
-			  }
-			  .total-number{
-				  color: #EE3138;
-				  margin: 0 8rpx;
-			  }
-		  }
-	  }
-	  // 统计2异常报警记录
-	  .statistics-2{
-		  
-		  .abnormal-item{
-			  display: flex;
-			  justify-content: space-between;
-			  align-items: center;
-			  margin-top: 16rpx;
-			  .item-title{
-				
+
+
+	// 标签
+	.tabs-box {
+		height: 200rpx;
+		padding-right: 32rpx;
+		background-color: rgba(22, 119, 255, 1);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.tabs {
+			width: 80%;
+		}
+
+	}
+
+	.main {
+		border-radius: 16px 16px 0px 0px;
+		background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
+		margin-top: -24rpx;
+		padding: 32rpx;
+
+		.statistics {
+			border-radius: 8px;
+			background-color: rgba(255, 255, 255, 1);
+			box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
+			margin-top: 24rpx;
+			padding: 40rpx;
+
+			.title {
 				display: flex;
 				align-items: center;
-				color: rgba(51,51,51,1);
-				  .img{
-					  width: 32rpx;
-					  height: 32rpx;
-					  margin-right: 8rpx;
-				  }
-			  }
-			  .item-value{
-				  color: rgba(51,51,51,1);
-				  font-weight: bold;
-			  }
-		  }
-	  }
-  
-      // 统计3设备实时监控
-	  .statistics-3{
-		  .monitoring-item{
-			  padding: 16rpx 0;
-			  border-bottom: 1px solid rgba(245,245,245,1);
-			  .item-title{
-				  display: flex;
-				  align-items: center;
-				  .text1{
-					  color: rgba(51,51,51,1);
-				  }
-				  .text2{
-					  color: rgba(119,119,119,1);
-					  font-size: 24rpx;
-					  margin-left: 8rpx;
-				  }
-			  }
-			  .state{
-				  margin-left: auto;
-				  display: flex;
-				  .state1,.state2{
-					  display: flex;
-					  align-items: center;
-					  margin-left: 24rpx;
-				  }
-				  .img{
-					  width: 32rpx;
-					  height: 32rpx;
-					  vertical-align: middle;
-					  margin-right: 8rpx;
-				  }
-			  }
-			  // 监控信息
-			  .infos{
-				  margin-top: 8rpx;
-				  
-				  display: flex;
-				  align-items: center;
-				  justify-content: space-between;
-				  
-				  .infos-item{
-					  display: flex;
-					  align-items: center;
-					  
-				  }
-				  .text{
-					  margin-left: 4rpx;
-				  }
-			  }
-		  }
-	  }
-  // 设备状态
-  .statistics-4{
-	  .chat-img{
-		  width: 100%;
-		  height: 620rpx;
-	  }
-  }
-  // 故障类型
-  .statistics-5,.statistics-6{
-	  .chat-img{
-	  		  width: 100%;
-	  		  height: 410rpx;
-	  }
-  }
-  
-  }
-</style>
+				margin-bottom: 28rpx;
+
+				.img {
+					width: 36rpx;
+					height: 36rpx;
+					vertical-align: middle;
+				}
+
+				.change-img {
+					width: 32rpx;
+					height: 32rpx;
+					vertical-align: middle;
+				}
+
+				.text {
+					color: rgba(16, 16, 16, 1);
+					font-size: 36rpx;
+					margin-left: 16rpx;
+					font-weight: bold;
+				}
+
+				.change {
+					margin-left: 16rpx;
+					font-size: 24rpx;
+					color: #838383;
+
+				}
+
+				.check-all {
+					margin-left: auto;
+					color: rgba(131, 131, 131, 1);
+					font-size: 24rpx;
+				}
+			}
+		}
+
+		// 统计1
+		.statistics-1 {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.item {
+				width: 330rpx;
+				padding: 24rpx;
+				box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
+				border-radius: 8px;
+				background-color: rgba(255, 255, 255, 1);
+
+				.item-top {
+					display: flex;
+					align-items: center;
+
+					.img {
+						width: 88rpx;
+						height: 88rpx;
+						margin-right: 24rpx;
+						vertical-align: middle;
+					}
+
+					.number {
+						color: rgba(51, 51, 51, 1);
+						font-size: 32rpx;
+
+						.normal {
+							margin-bottom: 12rpx;
+						}
+					}
+				}
+
+				.total {
+					margin-top: 28rpx;
+					text-align: center;
+					color: rgba(119, 119, 119, 1);
+				}
+
+				.total-number {
+					color: #EE3138;
+					margin: 0 8rpx;
+				}
+			}
+		}
+
+		// 统计2异常报警记录
+		.statistics-2 {
+
+			.abnormal-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 16rpx;
+
+				.item-title {
+
+					display: flex;
+					align-items: center;
+					color: rgba(51, 51, 51, 1);
+
+					.img {
+						width: 32rpx;
+						height: 32rpx;
+						margin-right: 8rpx;
+					}
+				}
+
+				.item-value {
+					color: rgba(51, 51, 51, 1);
+					font-weight: bold;
+				}
+			}
+		}
+
+		// 统计3设备实时监控
+		.statistics-3 {
+			.monitoring-item {
+				padding: 16rpx 0;
+				border-bottom: 1px solid rgba(245, 245, 245, 1);
+
+				.item-title {
+					display: flex;
+					align-items: center;
+
+					.text1 {
+						color: rgba(51, 51, 51, 1);
+					}
+
+					.text2 {
+						color: rgba(119, 119, 119, 1);
+						font-size: 24rpx;
+						margin-left: 8rpx;
+					}
+				}
+
+				.state {
+					margin-left: auto;
+					display: flex;
+
+					.state1,
+					.state2 {
+						display: flex;
+						align-items: center;
+						margin-left: 24rpx;
+					}
+
+					.img {
+						width: 32rpx;
+						height: 32rpx;
+						vertical-align: middle;
+						margin-right: 8rpx;
+					}
+				}
+
+				// 监控信息
+				.infos {
+					margin-top: 8rpx;
+
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					.infos-item {
+						display: flex;
+						align-items: center;
+
+					}
+
+					.text {
+						margin-left: 4rpx;
+					}
+				}
+			}
+		}
+
+		// 设备状态
+		.statistics-4 {
+			.chat-img {
+				width: 100%;
+				height: 620rpx;
+			}
+		}
+
+		// 故障类型
+		.statistics-5,
+		.statistics-6 {
+			.chat-img {
+				width: 100%;
+				height: 410rpx;
+			}
+		}
+
+	}
+</style>