From a3c9f1ce947494ebe0e985af3cd913bb7d7eeeb1 Mon Sep 17 00:00:00 2001
From: Iruka <1017819588@qq.com>
Date: Wed, 25 Sep 2024 11:36:04 +0800
Subject: [PATCH] .

---
 pages/index.vue | 269 ++++++++++++++++++++++--------------------------
 1 file changed, 122 insertions(+), 147 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 2ff0827..0568bfb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,6 +13,7 @@
 	</uni-nav-bar>
 	<custom-select-land ref="refLand" :data="landList" @select=""></custom-select-land>
 	<view class="content">
+		<!-- 顶部搜索框 -->
 		<view class="header-section">
 			<u-row justify="space-between" gutter="10">
 				<u-col span="8">
@@ -28,6 +29,7 @@
 			</u-row>
 		</view>
 		<view class="content-section">
+			<!-- 统计吸顶效果 -->
 			<view v-if="isSticky" class="grey-box ceiling"
 				:style="[isSticky ? 'position: sticky;':'','z-index: 10','top: 50px']">
 				<u-grid :border="false" col="4">
@@ -81,7 +83,9 @@
 					</u-grid-item>
 				</u-grid>
 			</view>
+			<!-- 列表 -->
 			<view class="grey-box" style="border-radius: 0 0 15px 15px;">
+				<!-- 基站 -->
 				<view class="card">
 					<u-collapse accordion>
 						<u-collapse-item>
@@ -174,6 +178,7 @@
 
 					</u-collapse>
 				</view>
+				<!-- 阀门列表 -->
 				<view class="card">
 					<u-collapse accordion>
 						<u-collapse-item>
@@ -186,6 +191,7 @@
 								</view>
 							</template>
 							<view class="u-collapse-content">
+								<!-- 蝶阀 -->
 								<u-row>
 									<u-col span="4">
 										<view class="fixed">
@@ -205,6 +211,7 @@
 											activeColor="#39ac4f"></u-switch>
 									</u-col>
 								</u-row>
+								<!-- 阀门 -->
 								<view class="card-grey">
 									<view class="card-title">
 										<u-row>
@@ -233,7 +240,7 @@
 									</view>
 									<view class="control">
 										<u-row>
-											<u-col span="3" style=" align-items: flex-end;">
+											<u-col span="3" style=" align-items: flex-end;" @click="showAnglePopupel">
 												<view class="buttons">
 													<view class="btn fixed active">
 														<text>①</text>
@@ -241,60 +248,10 @@
 														<view class="iconfont icon-suoding icon"></view>
 													</view>
 												</view>
-												<u-line-progress height="8" :showText="false" :percentage="60" activeColor="#74ffd4"
-													inactiveColor="#c7c7c7" style="width: 75px;margin-top: 5px;"
-													@click="show = true">
+												<u-line-progress height="8" :showText="false" :percentage="60"
+													activeColor="#74ffd4" inactiveColor="#c7c7c7"
+													style="width: 75px;margin-top: 5px;">
 												</u-line-progress>
-												<view>
-													<u-popup :show="show" :mode="mode">
-														<view class="dialog-container">
-															<view class="dialog-title">
-																<view>1-2</view>
-																<view>①开</view>
-																<view class="close-btn">
-																	<u-icon name="close" color="#333"
-																		size="20"></u-icon>
-																</view>
-															</view>
-															<view class="dialog-body">
-																<view class="grid">
-																	<view class="grid-time">
-																		<view>-</view>
-																	</view>
-																	<view class="grid-time">
-																		<view class="logs-data-box">
-																			<view class="content" style="height: 100%;">
-																				<view>
-																					<view style="text-align: center;">
-																						52%</view>
-																					<view style="width: 100%;">
-																						<u-slider :value="value"
-																							height="100" blockSize="28"
-																							min="0" max="100"
-																							activeColor="#15d99b"
-																							:step="step"
-																							:showValue="false"
-																							@changing="changing"
-																							@change="change"></u-slider>
-																					</view>
-																				</view>
-																			</view>
-																		</view>
-																	</view>
-																	<view class="grid-time">
-																		<view>+</view>
-																	</view>
-																</view>
-																<view class="buttons">
-																	<u-button type="success" size="large"
-																		text="确定"></u-button>
-																	<u-button type="info" size="large"
-																		text="取消"></u-button>
-																</view>
-															</view>
-														</view>
-													</u-popup>
-												</view>
 											</u-col>
 											<u-col span="6">
 												<view class="valve">
@@ -341,7 +298,7 @@
 									<view class="card-title">
 										<u-row>
 											<u-col span="2">
-												<view><text class="font-green">●</text>1-1</view>
+												<view><text class="font-green">●</text>1-2</view>
 											</u-col>
 											<u-col span="5">
 												<view class="fixed">
@@ -420,6 +377,12 @@
 			</view>
 		</view>
 	</view>
+
+	<!-- 弹窗 -->
+	<view>
+		<!-- 角度 -->
+		<angle-progress-bar ref="angleBarRef" mode="bottom" @close="" @confirm="swiperConfirm" />
+	</view>
 </template>
 
 <script>
@@ -432,6 +395,7 @@
 				show: false,
 				landList: [1, 2, 3],
 				value: false,
+				sliderValue: 1,
 			}
 		},
 		onLoad() {
@@ -465,6 +429,15 @@
 				})
 			},
 			toQRCode() {},
+			showAnglePopupel() {
+				this.$refs.angleBarRef.show("1-1", "①开", 10, {
+					// item: e.row,
+					// index: e.index,
+				});
+			},
+			swiperConfirm(e) {
+				console.error("swiperConfirm:", e);
+			},
 		},
 	}
 </script>
@@ -829,113 +802,115 @@
 	}
 
 	/* 弹出进度条 */
-	.dialog-container {
-		min-width: 300px;
+	// .dialog-container {
+	// 	min-width: 300px;
 
-		.dialog-title {
-			position: relative;
-			text-align: center;
-			height: 34px;
-			line-height: 34px;
-			border-bottom: 1px solid #ddd;
+	// 	.dialog-title {
+	// 		position: relative;
+	// 		text-align: center;
+	// 		height: 34px;
+	// 		line-height: 34px;
+	// 		border-bottom: 1px solid #ddd;
 
-			&>uni-view {
-				display: inline-block;
-				font-weight: bold;
-				font-size: 16px;
-			}
+	// 		&>uni-view {
+	// 			display: inline-block;
+	// 			font-weight: bold;
+	// 			font-size: 16px;
+	// 		}
 
-			&>uni-view:nth-child(2) {
-				font-size: 14px;
-				color: #5bc724;
-				margin-left: 10px;
-			}
+	// 		&>uni-view:nth-child(2) {
+	// 			font-size: 14px;
+	// 			color: #5bc724;
+	// 			margin-left: 10px;
+	// 		}
 
-			.close-btn {
-				position: absolute;
-				top: 50%;
-				right: 10px;
-				transform: translateY(-50%);
-			}
+	// 		.close-btn {
+	// 			position: absolute;
+	// 			top: 50%;
+	// 			right: 10px;
+	// 			transform: translateY(-50%);
+	// 		}
 
 
-		}
-movable-area {
-		
-		height: 30rpx;
-		width: 210px;
-		margin: auto;
-		border-radius: 5px;
-		background-color: #D8D8D8;
-		overflow: hidden;
-	}
+	// 	}
 
-	movable-view {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		
-		width: 10px;
-		height: 100%;
-		background-color: #15d99b;
-		color: #fff;
-		text-align: center;
-	}
+	// 	movable-area {
 
-	::v-deep .uni-slider-handle-wrapper {
-		height: 30px !important;
-	}
+	// 		height: 30rpx;
+	// 		width: 210px;
+	// 		margin: auto;
+	// 		border-radius: 5px;
+	// 		background-color: #D8D8D8;
+	// 		overflow: hidden;
+	// 	}
+
+	// 	movable-view {
+	// 		display: flex;
+	// 		align-items: center;
+	// 		justify-content: center;
+
+	// 		width: 10px;
+	// 		height: 100%;
+	// 		background-color: #15d99b;
+	// 		color: #fff;
+	// 		text-align: center;
+	// 	}
+
+	// 	::v-deep .uni-slider-handle-wrapper {
+	// 		height: 30px !important;
+	// 	}
 
 
-	::v-deep .uni-slider-thumb {
-		width: 24px !important;
-		height: 24px !important;
-		box-shadow: 0 0 0px 4px #74ffd4 !important;
-		margin-top: -12px !important;
-	}
+	// 	::v-deep .uni-slider-thumb {
+	// 		width: 24px !important;
+	// 		height: 24px !important;
+	// 		box-shadow: 0 0 0px 4px #74ffd4 !important;
+	// 		margin-top: -12px !important;
+	// 	}
 
-	::v-deep uni-slider {
-		margin: 10px 18px 0 18px !important;
-	}
+	// 	::v-deep uni-slider {
+	// 		margin: 10px 18px 0 18px !important;
+	// 	}
 
-	::v-deep uni-slider .uni-slider-tap-area {
-		padding: 0 !important;
-	}
-		.dialog-body {
-			.grid {
-				margin: 20px;
-				display: grid;
-				grid-template-columns: 0.5fr 2fr 0.5fr;
+	// 	::v-deep uni-slider .uni-slider-tap-area {
+	// 		padding: 0 !important;
+	// 	}
 
-				.grid-time:first-child,
-				.grid-time:last-child {
-					display: grid;
-					justify-items: end;
-					align-items: end;
+	// 	.dialog-body {
+	// 		.grid {
+	// 			margin: 20px;
+	// 			display: grid;
+	// 			grid-template-columns: 0.5fr 2fr 0.5fr;
 
-					&>uni-view {
-						width: 35px;
-						height: 30px;
-						background-color: #eaecf0;
-						text-align: center;
-						font-size: 30px;
-						line-height: 26px;
-						color: #564556;
-					}
-				}
+	// 			.grid-time:first-child,
+	// 			.grid-time:last-child {
+	// 				display: grid;
+	// 				justify-items: end;
+	// 				align-items: end;
 
-				.grid-time:last-child {
-					justify-items: left;
+	// 				&>uni-view {
+	// 					width: 35px;
+	// 					height: 30px;
+	// 					background-color: #eaecf0;
+	// 					text-align: center;
+	// 					font-size: 30px;
+	// 					line-height: 26px;
+	// 					color: #564556;
+	// 				}
+	// 			}
 
-				}
-			}
+	// 			.grid-time:last-child {
+	// 				justify-items: left;
 
-			.buttons {
-				margin: 40px 10px 10px;
-				display: flex;
-				justify-content: center;
-				
-			}
-		}
-	}
+	// 			}
+	// 		}
+
+	// 		.buttons {
+	// 			margin: 40px 10px 10px;
+	// 			display: flex;
+	// 			justify-content: center;
+
+	// 		}
+	// 	}
+	// }
 </style>
\ No newline at end of file