用电监测

pages/mine/electronicMonitoring.vue

@@ -0,0 +1,579 @@
+<template>
+	<view>
+
+		<view class="background">
+			<u-navbar back-icon-color="#fff" title="用电监控" title-color="#fff">
+				<view class="u-nav-slot" slot="right">
+					<image class="img" src="../../assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
+				</view>
+			</u-navbar>
+			<!-- 日期 -->
+			<view class="date-box">
+				<view class="item item-today">
+					<view class="date">
+						26
+					</view>
+					<view class="week">
+						今天
+					</view>
+				</view>
+				<view class="item">
+					<view class="date">
+						27
+					</view>
+					<view class="week">
+						周六
+					</view>
+				</view>
+				<view class="item">
+					<view class="date">
+						28
+					</view>
+					<view class="week">
+						周日
+					</view>
+				</view>
+				<view class="item">
+					<view class="date">
+						29
+					</view>
+					<view class="week">
+						周一
+					</view>
+				</view>
+				<view class="item">
+					<view class="date">
+						30
+					</view>
+					<view class="week">
+						周二
+					</view>
+				</view>
+			</view>
+
+		</view>
+		<!-- 用电量 -->
+		<view class="electricity-consumption">
+			<view class="number">
+				1,201,920.1
+			</view>
+			<view class="tab">
+				正向有功电度
+			</view>
+			<view class="tab2">
+				正向无功电度
+			</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.name"
+						:disabled="item.disabled">
+						{{item.name}}
+					</u-radio>
+				</u-radio-group>
+			</view>
+		</view>
+		<!-- 各时段用电量 -->
+		<view class="electricity-chart">
+			<view class="title">
+				<view class="icon">
+
+				</view>
+				<view class="text">
+					各时段用电量 (度)
+
+				</view>
+			</view>
+			<view class="chart">
+				<image class="img" src="../../assets/img/chart@1x.png" mode=""></image>
+			</view>
+		</view>
+		<!-- 异常波动 -->
+		<view class="abnormal">
+			<view class="headline">
+				<view class="title">
+					<view class="icon">
+
+					</view>
+					<view class="text">
+						异常波动
+					</view>
+				</view>
+				<view class="more">
+					查看全部
+					<u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
+				</view>
+			</view>
+
+			<view class="details">
+				<view class="item">
+					<view class="name">
+						温度异常报警
+					</view>
+					<view class="time">
+						2024-01-25 15:00:00
+					</view>
+				</view>
+
+				<view class="item">
+					<view class="name">
+						三厢功率因数异常报警
+					</view>
+					<view class="time">
+						2024-01-05 20:00:00
+					</view>
+				</view>
+			</view>
+
+
+		</view>
+
+		<!-- 能源监测 -->
+		<view class="energy-inspection">
+			<view class="title">
+				<view class="icon">
+
+				</view>
+				<view class="text">
+					能源监测
+
+				</view>
+			</view>
+			<view class="grid">
+				<u-grid :col="3" :border="false">
+					<u-grid-item>
+						<view class="icon icon2">
+							<image class="img" src="@/assets/img/Image@1.png" mode=""></image>
+						</view>
+						<view class="grid-text">三相电流</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon2">
+							<image class="img" src="@/assets/img/Image@2.png" mode=""></image>
+						</view>
+						<view class="grid-text">三相电压</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon3">
+							<image class="img" src="@/assets/img/Image@3.png" mode=""></image>
+						</view>
+						<view class="grid-text">三相温度</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon4">
+							<image class="img" src="@/assets/img/Image@4.png" mode=""></image>
+						</view>
+						<view class="grid-text">三相有功功率</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon5">
+							<image class="img" src="@/assets/img/Image@5.png" mode=""></image>
+						</view>
+						<view class="grid-text">三相功率因数</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon6">
+							<image class="img" src="@/assets/img/Image@5.png" mode=""></image>
+						</view>
+						<view class="grid-text">三相功率因数</view>
+					</u-grid-item>
+				</u-grid>
+			</view>
+		</view>
+		<!-- 数据分析 -->
+		<view class="data-analysis">
+			<view class="title">
+				<view class="icon">
+		
+				</view>
+				<view class="text">
+					能源监测
+		
+				</view>
+			</view>
+			<view class="grid">
+				<u-grid :col="3" :border="false">
+					<u-grid-item>
+						<view class="icon icon7">
+							<image class="img" src="@/assets/img/Image@7.png" mode=""></image>
+						</view>
+						<view class="grid-text">同比分析</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon8">
+							<image class="img" src="@/assets/img/Image@8.png" mode=""></image>
+						</view>
+						<view class="grid-text">环比分析</view>
+					</u-grid-item>	
+				</u-grid>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+						name: '总用电量',
+						disabled: false
+					},
+					{
+						name: '当日用电量',
+						disabled: false
+					},
+					{
+						name: '当月用电量',
+						disabled: false
+					}, {
+						name: '当年用电量',
+						disabled: false
+					}, {
+						name: '去年用电量',
+						disabled: false
+					}, {
+						name: '指定月份',
+						disabled: false
+					}
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				value: 'orange',
+			};
+		},
+		methods: {
+			// 选中某个单选框时，由radio时触发
+			radioChange(e) {
+				// console.log(e);
+			},
+			// 选中任一radio时，由radio-group触发
+			radioGroupChange(e) {
+				// console.log(e);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	page {
+		padding-bottom: 100rpx;
+	}
+
+	.background {
+		background-color: rgba(22, 119, 255, 1);
+		padding-bottom: 100rpx;
+
+
+
+		/deep/.u-navbar {
+			background: none !important;
+
+		}
+
+		/deep/.u-border-bottom:after {
+			border: none;
+		}
+
+		.u-nav-slot {
+			margin-right: 32rpx;
+
+			.img {
+				width: 48rpx;
+				height: 48rpx;
+				vertical-align: middle;
+			}
+		}
+
+
+	}
+
+
+	.background::after {
+		content: '';
+		position: absolute;
+		width: 160%;
+		height: 80px;
+		background-color: rgba(22, 119, 255, 1);
+		left: -30%;
+		border-radius: 0 0 50% 50%;
+
+	}
+
+	// // 日期
+	.date-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin: 24rpx 32rpx;
+
+
+		.item {
+			border-radius: 8px;
+			background-color: rgba(255, 255, 255, 0.1);
+			border: 1px solid rgba(255, 255, 255, 0.15);
+			width: 120rpx;
+			height: 120rpx;
+			color: #fff;
+			text-align: center;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+
+			.date {
+				font-size: 40rpx;
+
+
+			}
+
+		}
+
+		.item-today {
+			background-color: rgba(255, 255, 255, 1);
+
+			.date {
+				color: rgba(22, 119, 255, 1);
+			}
+
+			.week {
+				color: rgba(16, 16, 16, 1);
+			}
+		}
+	}
+
+	// 用电量
+	.electricity-consumption {
+		background-color: #fff;
+		padding: 40rpx 32rpx 0rpx;
+		border-radius: 0px 8px 8px 8px;
+		margin: 24rpx 32rpx 0;
+		position: relative;
+
+		.number {
+			border-radius: 8px;
+			background-color: rgba(238, 238, 238, 1);
+			padding: 26rpx 32rpx;
+			text-align: right;
+			color: rgba(22, 119, 255, 1);
+			font-size: 72rpx;
+		}
+
+		.tab {
+			width: 240rpx;
+			height: 0;
+			border-width: 0px 48rpx 72rpx 0px;
+			border-radius: 8px 8px 0 0;
+			border-style: none solid solid none;
+			border-color: transparent transparent #fff;
+			position: absolute;
+			top: -72rpx;
+			left: 0rpx;
+			right: 0rpx;
+			color: #101010;
+			color: rgba(16, 16, 16, 1);
+			// font-size: 32rpx;
+			text-align: center;
+			line-height: 72rpx;
+			z-index: 999;
+			text-indent: 16rpx;
+		}
+
+		.tab2 {
+			width: 240rpx;
+			height: 0;
+			border-width: 0px 48rpx 72rpx 0px;
+			border-radius: 8px 8px 0 0;
+			border-style: none solid solid none;
+			border-color: transparent transparent #D4DBE4;
+			position: absolute;
+			top: -72rpx;
+			left: 210rpx;
+			right: 0rpx;
+			color: #777777;
+			// font-size: 32rpx;
+			text-align: center;
+			line-height: 72rpx;
+			text-indent: 16rpx;
+		}
+
+		.radio {
+			margin-top: 24rpx;
+
+			/deep/.u-radio__label {
+				font-size: 24rpx
+			}
+
+			/deep/.u-radio {
+				margin-bottom: 16px;
+				width: 200rpx !important;
+			}
+
+		}
+	}
+
+	//各时段用电量
+	.electricity-chart {
+		margin: 24rpx 32rpx;
+		padding: 40rpx 0rpx;
+		background-color: #fff;
+		border-radius: 8px;
+
+		.title {
+			display: flex;
+			align-items: center;
+			padding: 0 32rpx;
+			margin-bottom: 40rpx;
+
+			.icon {
+				width: 36rpx;
+				height: 36rpx;
+				background-color: rgba(22, 119, 255, 1);
+				border: 6px solid rgba(182, 212, 255, 1);
+				border-radius: 100px;
+			}
+
+			.text {
+				color: rgba(51, 51, 51, 1);
+				font-size: 36rpx;
+				margin-left: 16rpx;
+			}
+		}
+
+		.chart {
+			width: 100%;
+			height: 440rpx;
+
+			.img {
+				width: 100%;
+				height: 440rpx;
+			}
+		}
+	}
+
+	// 异常
+	.abnormal {
+		margin: 24rpx 32rpx;
+		padding: 40rpx 32rpx;
+		background-color: #fff;
+		border-radius: 8px;
+
+		.headline {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.title {
+			display: flex;
+			align-items: center;
+
+			.icon {
+				width: 36rpx;
+				height: 36rpx;
+				background-color: rgba(22, 119, 255, 1);
+				border: 6px solid rgba(182, 212, 255, 1);
+				border-radius: 100px;
+			}
+
+			.text {
+				color: rgba(51, 51, 51, 1);
+				font-size: 36rpx;
+				margin-left: 16rpx;
+			}
+		}
+
+		.more {
+			color: #838383;
+			font-size: 24rpx
+		}
+
+		.details {
+			margin-top: 40rpx;
+
+			.item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 32rpx;
+
+				.name {
+					color: rgba(51, 51, 51, 1);
+				}
+
+				.time {
+					color: rgba(119, 119, 119, 1);
+					font-size: 24rpx;
+				}
+			}
+		}
+
+	}
+
+	// 能源监测
+	.energy-inspection,.data-analysis {
+		margin: 24rpx 32rpx;
+		padding: 40rpx 32rpx;
+		background-color: #fff;
+		border-radius: 8px;
+
+		.title {
+			display: flex;
+			align-items: center;
+
+			.icon {
+				width: 36rpx;
+				height: 36rpx;
+				background-color: rgba(22, 119, 255, 1);
+				border: 6px solid rgba(182, 212, 255, 1);
+				border-radius: 100px;
+			}
+
+			.text {
+				color: rgba(51, 51, 51, 1);
+				font-size: 36rpx;
+				margin-left: 16rpx;
+			}
+		}
+
+		.grid {
+			.icon {
+				width: 128rpx;
+				height: 128rpx;
+				border-radius: 12px;
+				background-color: rgba(35, 186, 178, 1);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-bottom: 16rpx;
+
+				.img {
+					width: 80rpx;
+					height: 80rpx;
+				}
+			}
+			.icon2{
+				background-color: rgba(42,186,72,1);
+			}
+			.icon3{
+				background-color: rgba(78,96,246,1);
+			}
+			.icon4{
+				background-color: rgba(22,119,255,1);
+			}
+			.icon5{
+				background-color: rgba(35,186,178,1);
+			}
+			.icon6{
+				background-color: rgba(42,186,72,1);
+			}
+			.icon7{
+				background-color: rgba(22,119,255,1);
+			}
+			.icon8{
+				background-color: rgba(35,186,178,1);
+			}
+
+			.grid-text {
+				color: #333333;
+			}
+		}
+	}
+</style>