平台收入统计 节省公用电费收入 用电量分析

pages.json

@@ -435,6 +435,30 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/platformRevenueStatistics/platformRevenueStatistics",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/saveUtilityIncome/saveUtilityIncome",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/electricityConsumptionAnalysis/electricityConsumptionAnalysis",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
       
        

pages/electricityConsumptionAnalysis/electricityConsumptionAnalysis.vue

@@ -0,0 +1,160 @@
+<template>
+	<view>
+		<u-navbar title="用电量分析" title-color="#101010"></u-navbar>
+		<view class="background">
+			<!-- 选择电表 -->
+			<view class="unit">
+				<view class="title">
+					选择查询电表
+				</view>
+				<view class="value">
+					<view class="text">
+						荆鹏软件园-AB栋-电梯电表
+					</view>
+					<view class="icon">
+						<u-icon name="arrow-down" color="#999999" size="32" ></u-icon>
+					</view>
+				</view>
+			</view>
+			
+			<view class="main">
+				<view class="title">
+					<view class="icon">
+						
+					</view>
+					<view class="text">
+						各时段平均用电量 (度)
+					</view>
+					<view class="date" @click="timeShow=true">
+						<text>2024年5月</text><u-icon name="arrow-down" ></u-icon>
+					</view>
+				</view>
+				<!-- 图表 -->
+				<view class="chart">
+					<img src="@/assets/img/chart@1x.png" alt="" />
+				</view>
+				<view class="total">
+					5月每日平均用电量: 21.08度
+				</view>
+				<!-- 备注 -->
+				<view class="remark">
+					<p>备注说明：</p>
+					
+					电表设备的各时段平均用电量，采集自设备不断电状态下一个月内的每日各时段用电量平均值，作为平均用电量数据基准，以此作为智能停电节省电费的数据支撑。
+
+				</view>
+			</view>
+		</view>
+		<u-picker v-model="timeShow" mode="time"></u-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				timeShow:false,
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+	page{
+		padding-bottom: 100px;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.background {
+		background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
+		padding: 32rpx 0;
+		height: 720rpx;
+
+		.unit {
+			background-color: #fff;
+			margin: 0 32rpx;
+			border-radius: 8px;
+			padding: 32rpx;
+
+			.title {
+				color: rgba(153, 153, 153, 1);
+			}
+
+			.value {
+				color: rgba(51, 51, 51, 1);
+				font-size: 40rpx;
+				margin-top: 16rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				font-weight: bold;
+			}
+		}
+	  
+	  .main{
+		  background-color: #fff;
+		  border-radius: 8px;
+		  padding: 32rpx ;
+		  margin: 32rpx;
+		  .title{
+			  display: flex;
+			      align-items: center;
+			      
+			      margin-bottom: 20px;
+			  .icon{
+				      width: 36rpx;
+				      height: 36rpx;
+				      background-color: #b6d4ff;
+				      border: 6px solid #1677ff;
+				      border-radius: 100px;
+			  }
+			  .text{
+				      color: #333333;
+				      font-size: 36rpx;
+				      margin-left: 16rpx;
+				      font-weight: bold;
+			  }
+			  .date{
+				  margin-left: auto;
+				      border: 1px solid #bbbbbb;
+				      border-radius: 4px;
+				      padding: 4px;
+				      font-size: 12px;
+					  text{
+						  margin-right: 8rpx;
+					  }
+			  }
+		  }
+		  // 图标
+		  .chart{
+			  img{
+				  width: 100%;
+				  height: 440rpx;
+			  }
+		  }
+	  }
+      
+	  .total{
+		  color: rgba(51,51,51,1);
+		  text-align: center;
+		  font-weight: bold;
+	  }
+	
+
+		// 备注
+		.remark {
+			padding: 40rpx 24rpx;
+			margin-top: 24rpx;
+			border-radius: 8px;
+			background-color: rgba(242, 244, 246, 1);
+			color: rgba(16, 16, 16, 1);
+			font-size: 24rpx;
+			line-height: 34rpx;
+
+		}
+	}
+</style>

pages/platformRevenueStatistics/platformRevenueStatistics.vue

@@ -0,0 +1,160 @@
+<template>
+	<view>
+		<u-navbar title="平台收入统计" title-color="#101010"></u-navbar>
+		<!-- 标签 -->
+		<view class="tabs">
+			<u-picker v-model="tabShow1" mode="selector" :default-selector="[0]" :range="selector"></u-picker>
+		   <u-picker v-model="tabShow2" mode="time"></u-picker>
+			<view class="tabsItem" @click="tabShow1=!tabShow1" >荆鹏软件园 <u-icon
+					name="arrow-up" v-if="tabShow1" ></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
+			<view class="tabsItem" @click="tabShow2=!tabShow2" >2024-06 <u-icon
+					name="arrow-up" v-if="tabShow2"> 2024-06</u-icon><u-icon v-else  name="arrow-down"></u-icon></view>
+		</view>
+		<!-- 统计 -->
+		<view class="statistics">
+			<view class="statistics-total">
+				<view class="total-title">
+					6月预计收入
+				</view>
+				<view class="total-number">
+					324.75元
+				</view>
+			</view>
+			
+			<view class="statistics-group">
+				<view class="statistics-item" v-for="item in 3" >
+					<view class="content">
+						<!-- 收入 -->
+						<view class="income">
+							<view class="income-title">
+								线损电费收入
+							</view>
+							<view class="income-number">
+								108.25元
+							</view>
+						</view>
+						<!-- 电量 -->
+						<view class="electric-quantity">
+							<view class="electric-quantity-title">
+								线损电量
+							</view>
+							<view class="electric-quantity-number">
+								125.33度
+							</view>
+						</view>
+					</view>
+					<view class="icon">
+						<u-icon name="arrow-right" color="#acacac" size="24" ></u-icon>
+					</view>
+				</view>
+			</view>
+			
+		</view>
+		<!-- 图表 -->
+		<view class="chart">
+			<img src="@/assets/img/incomeChart1@3x.png" alt="" />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabShow1:false,
+				tabShow2:false,
+				selector: [1, 2, 3],
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+	page{
+		padding-bottom: 100px;
+		background-color: #fff;
+	}
+</style>
+<style lang="scss" scoped>
+	// 标签
+	.tabs {
+	
+		height: 96rpx;
+		line-height: 96rpx;
+		background-color: #fff;
+		border-top: 1px solid rgba(241, 241, 241, 1);
+		display: flex;
+		justify-content: space-around;
+	
+	}
+
+     // 统计
+	 .statistics{
+		 .statistics-total{
+			 display: flex;
+			 align-items: center;
+			 justify-content: space-between;
+			 padding: 36rpx 32rpx;
+			 background-color: rgba(22,119,255,1);
+			 color: rgba(255,255,255,1);
+			 font-size:40rpx;
+			 font-weight: bold;
+		 }
+		 
+		 .statistics-group{
+			 .statistics-item{
+				 padding: 24rpx 32rpx;
+				 display: flex;
+				 align-items: center;
+				 justify-content: space-between;
+				 border-bottom: 1px solid rgba(245,245,245,1);
+				 
+				 .content{
+					 flex: 0.99;
+					 // 收入
+					 .income{
+						 display: flex;
+						 align-items: center;
+						 justify-content: space-between;
+						 font-size: 32rpx;
+						 font-weight: bold;
+						 .income-title{
+							 color: rgba(51,51,51,1);
+							 
+						 }
+						 .income-number{
+							 color: rgba(22,119,255,1);
+							 
+						 }
+					 }
+					 // 电量
+					 .electric-quantity{
+						 display: flex;
+						 align-items: center;
+						 justify-content: space-between;
+						 font-size: 24rpx;
+						 color: rgba(119,119,119,1);
+						
+					 }
+					 
+				 }
+			 }
+			 
+		 }
+	 }
+
+ // 图表
+ .chart{
+	 margin-top: 40rpx;
+	 padding: 0 15rpx;
+	 img{
+		 width: 100%;
+		 height: 600rpx;
+	 }
+ }
+
+
+</style>

pages/saveUtilityIncome/saveUtilityIncome.vue

@@ -0,0 +1,293 @@
+<template>
+	<view>
+		<u-navbar title="节省公用电费收入" title-color="#101010"></u-navbar>
+		<!-- 标签 -->
+		<view class="tabs">
+			<u-picker v-model="tabShow1" mode="selector" :default-selector="[0]" :range="selector"></u-picker>
+			<u-picker v-model="tabShow2" mode="time"></u-picker>
+			<view class="tabsItem" @click="tabShow1=!tabShow1">AB栋 <u-icon name="arrow-up"
+					v-if="tabShow1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
+			<view class="tabsItem" @click="tabShow2=!tabShow2">2024-06 <u-icon name="arrow-up" v-if="tabShow2">
+					2024-06</u-icon><u-icon v-else name="arrow-down"></u-icon></view>
+		</view>
+		<!-- 统计 -->
+		<view class="statistics">
+			<view class="total-group">
+				<view class="statistics-total1">
+					<view class="total-title">
+						节省电费
+					</view>
+					<view class="total-number">
+						108.25元
+					</view>
+				</view>
+				<view class="statistics-total2">
+					<view class="total-title">
+						节省电量
+					</view>
+					<view class="total-number">
+						125.33度
+					</view>
+				</view>
+			</view>
+
+
+
+
+			<view class="statistics-group">
+				<view class="statistics-item">
+					<view class="item-top">
+						<view class="content">
+							<!-- 电费 -->
+							<view class="electricity">
+								<view class="electricity-title">
+									电梯电表节省电费
+								</view>
+								<view class="electricity-number">
+									108.25元
+								</view>
+							</view>
+							<!-- 节省度数 -->
+							<view class="electric-quantity">
+								<view class="electric-quantity-title">
+									节省度数
+								</view>
+								<view class="electric-quantity-number">
+									125.33度
+								</view>
+							</view>
+						</view>
+
+						<view class="icon" @click="detail=!detail" >
+							
+							<u-icon name="arrow-up" v-if="detail"   color="#acacac" size="24"></u-icon>
+						<u-icon name="arrow-down" v-else color="#acacac" size="24"></u-icon>
+						</view>
+					</view>
+
+
+                <!-- 详情 -->
+					<view class="detail" v-if="detail">
+						<view class="item" v-for="item in 3" >
+							<!-- 时间段 -->
+							<view class="time-slot">
+								<view class="title">
+									06-30 21:00-24:00
+								</view>
+								<view class="value">
+									0.5元
+								</view>
+							</view>
+							<!-- 总计 -->
+							<view class="total">
+								<view class="total-time">
+									3小时
+								</view>
+								<view class="total-degrees">
+									1度
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view class="statistics-item" v-for="item in 8" >
+					<view class="item-top">
+						<view class="content">
+							<!-- 电费 -->
+							<view class="electricity">
+								<view class="electricity-title">
+									电梯电表节省电费
+								</view>
+								<view class="electricity-number">
+									108.25元
+								</view>
+							</view>
+							<!-- 节省度数 -->
+							<view class="electric-quantity">
+								<view class="electric-quantity-title">
+									节省度数
+								</view>
+								<view class="electric-quantity-number">
+									125.33度
+								</view>
+							</view>
+						</view>
+
+						<view class="icon" @click="detail=!detail" >
+							
+							<u-icon name="arrow-up" v-if="detail"   color="#acacac" size="24"></u-icon>
+						<u-icon name="arrow-down" v-else color="#acacac" size="24"></u-icon>
+						</view>
+					</view>
+
+				</view>
+
+			</view>
+
+		</view>
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabShow1: false,
+				tabShow2: false,
+				detail:true,
+				selector: [1, 2, 3],
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+	page {
+		padding-bottom: 100px;
+		background-color: #fff;
+	}
+</style>
+<style lang="scss" scoped>
+	// 标签
+	.tabs {
+
+		height: 96rpx;
+		line-height: 96rpx;
+		background-color: #fff;
+		border-top: 1px solid rgba(241, 241, 241, 1);
+		display: flex;
+		justify-content: space-around;
+
+	}
+
+	// 统计
+	.statistics {
+
+		.total-group {
+			background-color: rgba(22, 119, 255, 1);
+			padding: 24rpx 32rpx
+		}
+
+		.statistics-total1 {
+
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+
+			color: rgba(255, 255, 255, 1);
+			font-size: 32rpx;
+			font-weight: bold;
+			margin-bottom: 4rpx;
+		}
+
+		.statistics-total2 {
+
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+
+			color: rgba(255, 255, 255, 1);
+			font-size: 24rpx;
+			font-weight: bold;
+
+		}
+
+
+		.statistics-group {
+
+			.statistics-item {
+
+
+				border-bottom: 1px solid rgba(245, 245, 245, 1);
+
+				.item-top {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 24rpx 32rpx;
+				}
+
+				.content {
+					flex: 0.99;
+
+					// 电费
+					.electricity {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						font-size: 32rpx;
+						font-weight: bold;
+
+						.electricity-title {
+							color: rgba(51, 51, 51, 1);
+
+						}
+
+						.electricity-number {
+							color: rgba(22, 119, 255, 1);
+
+						}
+					}
+
+					// 电量
+					.electric-quantity {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						font-size: 24rpx;
+						color: rgba(119, 119, 119, 1);
+
+					}
+
+				}
+			}
+
+		}
+
+		.detail {
+			background-color: rgba(242, 242, 242, 1);
+
+			.item {
+				padding: 24rpx 48rpx 24rpx 76rpx;
+				border-bottom: 1px solid rgba(234,234,234,1);
+				// 时间段
+				.time-slot{
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					font-size: 32rpx;
+					font-weight: bold;
+					.title{
+						color: rgba(51,51,51,1);
+						
+					}
+					.value{
+						color: rgba(22,119,255,1);
+					}
+				}
+				// 总计
+				.total{
+					font-size: 24rpx;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					.total-time{
+						color: rgba(119,119,119,1);
+						
+					}
+					.total-degrees{
+						color: rgba(119,119,119,1);
+					}
+				}
+			}
+		}
+	}
+</style>