wkyy před 1 rokem
rodič
revize
e86a85a2e3

+ 251 - 177
pages/equipmentDataMonitoring/electronicMonitoring.vue

@@ -7,15 +7,14 @@
 			mode="multiSelector"   :default-selector='[0, 1]' :range="multiSelector">
 			</u-picker> -->
 			<u-select v-model="equipmentShow" mode="mutil-column-auto" :list="equipmentList" @confirm="confirm">
-				
+
 			</u-select>
-			
+
 			<!-- 日期选择器 -->
-			<u-picker-select title="日期选择" v-model="tabsFrom.show2"
-			 :defaultTime="tabsFrom.show2Index" :endYear="endYear"
-			 mode="time" :params="params"   @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
-			
-	<!-- 		<u-navbar :background="background" back-icon-color="#fff" title="联通公司" title-color="#fff">
+			<u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
+				mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset"></u-picker-select>
+
+			<!-- 		<u-navbar :background="background" back-icon-color="#fff" title="联通公司" title-color="#fff">
 				<view class="u-nav-slot" slot="right" @click="tabsFrom.show2=true,params.day=true">
 					<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
 				</view>
@@ -25,7 +24,7 @@
 					<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
 				</view>
 				<view class="title" @click="equipmentShow=true">
-					荆鹏软件园01<u-icon  name="arrow-down" color="#fff" size="24"></u-icon>
+					荆鹏软件园01<u-icon name="arrow-down" color="#fff" size="24"></u-icon>
 				</view>
 				<view class="right" @click="tabsFrom.show2=true">
 					<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
@@ -41,7 +40,7 @@
 						今天
 					</view>
 					<view class="dot">
-						
+
 					</view>
 				</view>
 				<view class="item">
@@ -150,7 +149,7 @@
 					</view>
 				</view>
 			</view>
-			
+
 			<view class="radio">
 				<u-radio-group v-model="value" @change="radioGroupChange">
 					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id"
@@ -172,15 +171,18 @@
 				</view>
 			</view>
 			<view class="chart">
-				<image class="img" src="@/assets/img/chart@1x.png" mode=""></image>
+				<!-- <image class="img" src="@/assets/img/chart@1x.png" mode=""></image> -->
+				<view id="barEcharts" style="min-height:440rpx;">
+
+				</view>
 			</view>
 		</view>
 		<!-- 异常波动 -->
-		<view class="abnormal" >
+		<view class="abnormal">
 			<view class="headline">
 				<view class="title">
 					<view class="icon">
-					
+
 					</view>
 					<view class="text">
 						异常告警
@@ -216,7 +218,7 @@
 		</view>
 
 		<!-- 能源监测 -->
-		<view class="energy-inspection"  >
+		<view class="energy-inspection">
 			<view class="title">
 				<view class="icon">
 
@@ -268,14 +270,14 @@
 			</view>
 		</view>
 		<!-- 数据分析 -->
-		<view class="data-analysis"  >
+		<view class="data-analysis">
 			<view class="title">
 				<view class="icon">
-		
+
 				</view>
 				<view class="text">
 					数据分析
-		
+
 				</view>
 			</view>
 			<view class="grid">
@@ -291,7 +293,7 @@
 							<image class="img" src="@/assets/img/Image@8.png" mode=""></image>
 						</view>
 						<view class="grid-text">环比分析</view>
-					</u-grid-item>	
+					</u-grid-item>
 					<u-grid-item>
 						<view class="icon icon9">
 							<image class="img" src="@/assets/img/Image@9.svg" mode=""></image>
@@ -301,72 +303,72 @@
 				</u-grid>
 			</view>
 		</view>
-	  <!-- 创建工单 -->
-	     <view class="create-order">
-	     	<view class="img-box">
-	     		<image class="img" src="@/assets/img/riFill-file-add-fill.svg" mode=""></image>
-	     	</view>
+		<!-- 创建工单 -->
+		<view class="create-order">
+			<view class="img-box">
+				<image class="img" src="@/assets/img/riFill-file-add-fill.svg" mode=""></image>
+			</view>
 			<view class="text">
 				创建工单
 			</view>
-	     </view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import * as echarts from 'echarts';
+
 	export default {
 		data() {
 			return {
-				endYear:'',
-				equipmentShow:false,
+				myBarChart: null,
+				endYear: '',
+				equipmentShow: false,
 				multiSelector: [
-									['荆鹏集团', '玉桥公园', '全季酒店'], 
-									[ '荆鹏软件园01','青少年宫02','御河社区03','荆州院子04']
-								],
-								equipmentList: [
-													{
-														value: 1,
-														label: '荆鹏集团',
-														children: [
-															{
-																value: 2,
-																label: '荆鹏集团01',
-																
-															},
-															{
-																value: 3,
-																label: '荆鹏集团02',
-																
-															},
-															{
-																value: 4,
-																label: '荆鹏集团03',
-																
-															}
-														]
-													},
-													{
-														value: 5,
-														label: '荆州院子',
-														children: [
-															{
-																value: 6,
-																label: '荆州院子01',
-																
-															},
-															{
-																value: 7,
-																label: '荆州院子02',
-																
-															},
-															{
-																value: 8,
-																label: '荆州院子03',
-																
-															}
-														]
-													}
-												],
+					['荆鹏集团', '玉桥公园', '全季酒店'],
+					['荆鹏软件园01', '青少年宫02', '御河社区03', '荆州院子04']
+				],
+				equipmentList: [{
+						value: 1,
+						label: '荆鹏集团',
+						children: [{
+								value: 2,
+								label: '荆鹏集团01',
+
+							},
+							{
+								value: 3,
+								label: '荆鹏集团02',
+
+							},
+							{
+								value: 4,
+								label: '荆鹏集团03',
+
+							}
+						]
+					},
+					{
+						value: 5,
+						label: '荆州院子',
+						children: [{
+								value: 6,
+								label: '荆州院子01',
+
+							},
+							{
+								value: 7,
+								label: '荆州院子02',
+
+							},
+							{
+								value: 8,
+								label: '荆州院子03',
+
+							}
+						]
+					}
+				],
 				params: {
 					year: true,
 					month: true,
@@ -377,91 +379,139 @@
 				},
 				tabsFrom: {
 					show1: false,
-					show1Index:0,
-					show2Index:'',
+					show1Index: 0,
+					show2Index: '',
 					show2: false,
 					show1Text: "全部类型",
 					show2Text: "全部时间",
-					selector1:[
+					selector1: [{
+							label: '全部类型',
+							value: '',
+						},
 						{
-								label: '全部类型',
-								value: '',
-							},
+							label: '线上充值',
+							value: '1',
+						},
 						{
-								label: '线上充值',
-								value: '1',
-							},
-							{
-								label: '线下充值',
-								value: '2',
-							},
+							label: '线下充值',
+							value: '2',
+						},
 					]
 				},
 				background: {
 					backgroundColor: '#1677FF',
 				},
 				list: [{
-						id:0,
+						id: 0,
 						name: '本月用电量',
 						disabled: false
 					},
 					{
-						id:1,
+						id: 1,
 						name: '上月用电量',
 						disabled: false
 					},
 					{
-						id:2,
+						id: 2,
 						name: '本年用电量',
 						disabled: false
 					}, {
-						id:3,
+						id: 3,
 						name: '上年用电量',
 						disabled: false
 					}, {
-						id:4,
+						id: 4,
 						name: '总用电量',
 						disabled: false
 					}, {
-						id:5,
+						id: 5,
 						name: '指定月份',
 						disabled: false
 					}
 				],
-				
+
 				value: '本月用电量',
 			};
 		},
 		onLoad() {
-			this.endYear=new Date().getFullYear()
-			
+			this.endYear = new Date().getFullYear()
+
+		},
+		onReady() {
+			this.getBarCharts();
 		},
 		methods: {
-			selector2confirm(e){
-				this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
-				
-				this.tabsFrom.show2Index=e.year+"-"+e.month
-				if(e.day){
-					this.tabsFrom.show2Text+=e.day+"日"
-					this.tabsFrom.show2Index+='-'+e.day	
+			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: ['0-2点', '3-4点', '5-6点', '7-8点', '9-10点', '11-12点', '13-14点', '15-16点',
+							'17-18点', '19-20点', '21-22点', '23-24点'
+						],
+						axisLabel: {
+							interval: 0,
+							rotate: 45
+						},
+					}],
+					yAxis: [{
+						type: 'value'
+					}],
+					series: [{
+						type: 'bar',
+						data: [2, 8, 7, 10, 40, 48, 56, 61, 59, 36, 8, 4],
+						label: {
+							show: true,
+							position: 'top',
+							color: '#5C7BD9'
+						},
+					}]
+				};
+
+				this.myBarChart.setOption(option);
+
+
+			},
+			selector2confirm(e) {
+				this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
+
+				this.tabsFrom.show2Index = e.year + "-" + e.month
+				if (e.day) {
+					this.tabsFrom.show2Text += e.day + "日"
+					this.tabsFrom.show2Index += '-' + e.day
 				}
 			},
-			selector2reset(e){
+			selector2reset(e) {
 				console.log(e)
-				this.tabsFrom.show2Text='全部时间'
-				this.tabsFrom.show2Index='';
+				this.tabsFrom.show2Text = '全部时间'
+				this.tabsFrom.show2Index = '';
 			},
 			// 选中某个单选框时,由radio时触发
 			radioChange(e) {
-				 //console.log(e);
+				//console.log(e);
 			},
 			// 选中任一radio时,由radio-group触发
 			radioGroupChange(e) {
-				 console.log(e);
-				 if(e==5){
-					 this.tabsFrom.show2=true
-					 this.params.day=false
-				 }
+				console.log(e);
+				if (e == 5) {
+					this.tabsFrom.show2 = true
+					this.params.day = false
+				}
 			}
 		}
 	};
@@ -472,24 +522,28 @@
 	page {
 		padding-bottom: 184rpx;
 	}
-	.navbar-c{
-		background-color: rgba(22,119,255,1);
-		.title{
+
+	.navbar-c {
+		background-color: rgba(22, 119, 255, 1);
+
+		.title {
 			color: #fff;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 		}
-		.right{
-			.img{
+
+		.right {
+			.img {
 				width: 48rpx;
 				height: 48rpx;
 			}
 		}
 	}
-	/deep/.uicon-nav-back{
+
+	/deep/.uicon-nav-back {
 		color: #fff !important;
-		
+
 	}
 
 	.background {
@@ -557,7 +611,8 @@
 
 		.item-today {
 			background-color: rgba(255, 255, 255, 1);
-            position: relative;
+			position: relative;
+
 			.date {
 				color: rgba(22, 119, 255, 1);
 			}
@@ -565,10 +620,11 @@
 			.week {
 				color: rgba(16, 16, 16, 1);
 			}
-			.dot{
+
+			.dot {
 				width: 10rpx;
 				height: 10rpx;
-				background-color: rgba(255,150,0,1);
+				background-color: rgba(255, 150, 0, 1);
 				border-radius: 999px;
 				position: absolute;
 				bottom: -5rpx;
@@ -585,35 +641,41 @@
 		border-radius: 8px;
 		margin: -88rpx 32rpx 0;
 		position: relative;
-        .title{
-			color: rgba(16,16,16,1);
+
+		.title {
+			color: rgba(16, 16, 16, 1);
 			font-size: 36rpx;
-			
+
 		}
-		.degree{
+
+		.degree {
 			display: flex;
 			margin-top: 32rpx;
-			.item{
+
+			.item {
 				margin-right: 6rpx;
 				text-align: center;
-				.item-text{
-					color: rgba(16,16,16,1);
+
+				.item-text {
+					color: rgba(16, 16, 16, 1);
 				}
-				.item-number{
+
+				.item-number {
 					margin-top: 24rpx;
 					width: 72rpx;
 					height: 96rpx;
-					background-color: rgba(16,16,16,1);
+					background-color: rgba(16, 16, 16, 1);
 					color: #fff;
 					font-size: 72rpx;
-					
+
 				}
-				.decimal{
+
+				.decimal {
 					background-color: #900005;
 				}
 			}
 		}
-		
+
 
 		// .tab {
 		// 	width: 240rpx;
@@ -712,7 +774,7 @@
 		padding: 40rpx 32rpx;
 		background-color: #fff;
 		border-radius: 8px;
-      
+
 		.headline {
 			display: flex;
 			align-items: center;
@@ -722,7 +784,8 @@
 		.title {
 			display: flex;
 			align-items: center;
-font-weight: bold;
+			font-weight: bold;
+
 			.icon {
 				width: 36rpx;
 				height: 36rpx;
@@ -766,7 +829,8 @@ font-weight: bold;
 	}
 
 	// 能源监测
-	.energy-inspection,.data-analysis {
+	.energy-inspection,
+	.data-analysis {
 		margin: 24rpx 32rpx;
 		padding: 40rpx 32rpx;
 		background-color: #fff;
@@ -775,7 +839,8 @@ font-weight: bold;
 		.title {
 			display: flex;
 			align-items: center;
-            font-weight: bold;
+			font-weight: bold;
+
 			.icon {
 				width: 36rpx;
 				height: 36rpx;
@@ -807,29 +872,37 @@ font-weight: bold;
 					height: 80rpx;
 				}
 			}
-			.icon2{
-				background-color: rgba(42,186,72,1);
+
+			.icon2 {
+				background-color: rgba(42, 186, 72, 1);
 			}
-			.icon3{
-				background-color: rgba(78,96,246,1);
+
+			.icon3 {
+				background-color: rgba(78, 96, 246, 1);
 			}
-			.icon4{
-				background-color: rgba(22,119,255,1);
+
+			.icon4 {
+				background-color: rgba(22, 119, 255, 1);
 			}
-			.icon5{
-				background-color: rgba(35,186,178,1);
+
+			.icon5 {
+				background-color: rgba(35, 186, 178, 1);
 			}
-			.icon6{
-				background-color: rgba(42,186,72,1);
+
+			.icon6 {
+				background-color: rgba(42, 186, 72, 1);
 			}
-			.icon7{
-				background-color: rgba(22,119,255,1);
+
+			.icon7 {
+				background-color: rgba(22, 119, 255, 1);
 			}
-			.icon8{
-				background-color: rgba(35,186,178,1);
+
+			.icon8 {
+				background-color: rgba(35, 186, 178, 1);
 			}
-			.icon9{
-				background-color: rgba(42,186,72,1);
+
+			.icon9 {
+				background-color: rgba(42, 186, 72, 1);
 			}
 
 			.grid-text {
@@ -838,29 +911,30 @@ font-weight: bold;
 		}
 	}
 
-   // 创建工单
-   .create-order{
-	   width: 120rpx;
-	   height: 120rpx;
-	   border-radius: 20px;
-	   background: linear-gradient(180deg, rgba(121,172,255,1) 0%,rgba(57,132,255,1) 100%);
-	   box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
-	   text-align: center;
-	   display: flex;
-	   flex-direction: column;
-	   justify-content: center;
-	   align-items: center;
-	   position: fixed;
-	   right: 32rpx;
-	   bottom: 64rpx;
-	   .img{
-		   width: 56rpx;
-		   height: 56rpx;
-	   }
-	   .text{
-		   color: rgba(255,255,255,1);
-		   font-size: 22rpx;
-	   }
-   }
+	// 创建工单
+	.create-order {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 20px;
+		background: linear-gradient(180deg, rgba(121, 172, 255, 1) 0%, rgba(57, 132, 255, 1) 100%);
+		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: fixed;
+		right: 32rpx;
+		bottom: 64rpx;
+
+		.img {
+			width: 56rpx;
+			height: 56rpx;
+		}
 
+		.text {
+			color: rgba(255, 255, 255, 1);
+			font-size: 22rpx;
+		}
+	}
 </style>

+ 99 - 63
pages/statistics/statistics.vue

@@ -23,10 +23,11 @@
 		<view class="main">
 			<!-- 统计1 -->
 			<view class="statistics-1">
-				<view class="item" v-for="item in 2">
+				<view class="item">
 					<view class="item-top">
 						<view class="img-box">
-							<image class="img" src="@/assets/img/annular.png" mode=""></image>
+							<u-circle-progress active-color="#2979ff" :percent="8/15*100" width="88">
+							</u-circle-progress>
 						</view>
 						<view class="number">
 							<view class="normal">
@@ -44,6 +45,28 @@
 					</view>
 				</view>
 
+				<view class="item">
+					<view class="item-top">
+						<view class="img-box">
+							<!-- <image class="img" src="@/assets/img/annular.png" mode=""></image> -->
+							<u-circle-progress active-color="#2979ff" :percent="12/20*100" width="88">
+							</u-circle-progress>
+						</view>
+						<view class="number">
+							<view class="normal">
+								未处理:8
+							</view>
+							<view class="abnormal">
+								已处理:12
+							</view>
+						</view>
+					</view>
+					<!-- 累计 -->
+					<view class="total">
+						本月累计工单 <text class="total-number">20</text> 条
+					</view>
+				</view>
+
 			</view>
 			<!-- 统计2 异常报警记录 -->
 			<view class="statistics-2 statistics">
@@ -202,7 +225,7 @@
 				<view class="chat">
 					<!-- <image class="chat-img" src="@/assets/img/AUgyKM0@1x.png" mode=""></image> -->
 					<view id="barEcharts" style="min-height:410rpx;">
-					
+
 					</view>
 				</view>
 			</view>
@@ -221,7 +244,7 @@
 				<view class="chat">
 					<!-- <image class="chat-img" src="@/assets/img/AUgyKM1@1x.png" mode=""></image> -->
 					<view id="lineEcharts" style="min-height:410rpx;">
-					
+
 					</view>
 				</view>
 			</view>
@@ -291,24 +314,29 @@
 					yAxis: {
 						type: 'value'
 					},
-					series: [
-						{
+					series: [{
 							name: '新增工单',
 							type: 'line',
 							data: [2, 1, 0, 1, 3, 0],
-							itemStyle: { color: '#FF3D00' }
+							itemStyle: {
+								color: '#FF3D00'
+							}
 						},
 						{
 							name: '处理工单',
 							type: 'line',
 							data: [3, 1, 1, 0, 2, 1],
-							itemStyle: { color: '#FF7B00' }
+							itemStyle: {
+								color: '#FF7B00'
+							}
 						},
 						{
 							name: '剩余工单',
 							type: 'line',
 							data: [5, 2, 1, 1, 5, 1],
-							itemStyle: { color: '#58A55C' }
+							itemStyle: {
+								color: '#58A55C'
+							}
 						}
 					]
 				};
@@ -320,56 +348,54 @@
 					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' }
-				    }
-				  ]
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow'
+						}
+					},
+					legend: {},
+					grid: {
+						left: '3%',
+						right: '4%',
+						bottom: '3%',
+						containLabel: true
+					},
+					xAxis: [{
+						type: 'category',
+						data: ['一月', '二月', '三月']
+					}],
+					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() {
@@ -415,27 +441,37 @@
 						data: [{
 								value: 2,
 								name: '温度异常',
-								itemStyle: {color:'#FF4F3F'}
+								itemStyle: {
+									color: '#FF4F3F'
+								}
 							},
 							{
 								value: 3,
 								name: '电压异常',
-								itemStyle: {color:'#FF7B00'}
+								itemStyle: {
+									color: '#FF7B00'
+								}
 							},
 							{
 								value: 8,
 								name: '正常运行',
-								itemStyle: {color:'#1677FF'}
+								itemStyle: {
+									color: '#1677FF'
+								}
 							},
 							{
 								value: 1,
 								name: '功率因素异常',
-								itemStyle: {color:'#F2BD42'}
+								itemStyle: {
+									color: '#F2BD42'
+								}
 							},
 							{
 								value: 1,
 								name: '设备离线',
-								itemStyle: {color:'#C2C2C2'}
+								itemStyle: {
+									color: '#C2C2C2'
+								}
 							}
 						]
 					}]