展开样式

pages/waterandfernew/details.vue

@@ -41,120 +41,126 @@
 							@touchend="touchEndLineA($event)"></canvas>
 					</view>
 				</view>
-				<view class="readmore" @click="show=false">
+				<view class="readmoreHIs" @click="show=false">
 					收起详情<u-icon name="arrow-up" color="#14A478" size="28"></u-icon>
 				</view>
 			</view>
 		</view>
-		<!-- 历史记录弹框 -->
-		<u-tabs :list="list" active-color="#14A478" bar-width="100" :is-scroll="false" :current="current"
-			@change="change"></u-tabs>
-		<!-- 设备图 -->
-		<view class="devicePhoto" v-if="current == 0">
-			<view class="titleBox">
-				<u-alert-tips type="primary" :title-style="alertTipColor" title="点击按钮可对应控制阀门开关"
-					:show-icon="true"></u-alert-tips>
-				<view class="btn" @click="statusPanel=true">控制面板</view>
-				<u-popup v-model="statusPanel" mode="bottom">
-					<view class="consoleBox">
-						<view class="swichBox">
-							<u-row :gutter="16" justify="space-between">
-								<u-col span="6" v-for="(item, index) in buttonList" v-if="(index + 1) % 2 == 1">
-									<view class="preSwich">
-										<view>肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}</view>
-										<u-switch v-model="item.off" active-color="#14A478" inactive-color="#AEB4C2"
-											:loading="item.disabled"
-											@change="switchchange($event, item.number, item, index, true)"></u-switch>
-									</view>
-								</u-col>
-								<u-col span="6" v-for="(item, index) in facilityvalve"
-									v-if="index > buttonList.length - 1">
-									<view class="preSwich">
-										<view>{{item.name}}</view>
-										<u-switch v-model="item.off" active-color="#14A478" inactive-color="#AEB4C2"
-											:loading="item.disabled"
-											@change="switchchange($event, item.number, item, index)"></u-switch>
-									</view>
-								</u-col>
-							</u-row>
+		<view class="" v-if="!show">
+			<!-- 历史记录弹框 -->
+			<u-tabs :list="list" active-color="#14A478" bar-width="100" :is-scroll="false" :current="current"
+				@change="change"></u-tabs>
+			<!-- 设备图 -->
+			<view class="devicePhoto" v-if="current == 0">
+				<view class="titleBox">
+					<u-alert-tips type="primary" :title-style="alertTipColor" title="点击按钮可对应控制阀门开关"
+						:show-icon="true"></u-alert-tips>
+					<view class="btn" @click="statusPanel=true">控制面板</view>
+					<u-popup v-model="statusPanel" mode="bottom">
+						<view class="consoleBox">
+							<view class="swichBox">
+								<u-row :gutter="16" justify="space-between">
+									<u-col span="6" v-for="(item, index) in buttonList" v-if="(index + 1) % 2 == 1">
+										<view class="preSwich">
+											<view>肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}</view>
+											<u-switch v-model="item.off" active-color="#14A478" inactive-color="#AEB4C2"
+												:loading="item.disabled"
+												@change="switchchange($event, item.number, item, index, true)"></u-switch>
+										</view>
+									</u-col>
+									<u-col span="6" v-for="(item, index) in facilityvalve"
+										v-if="index > buttonList.length - 1">
+										<view class="preSwich">
+											<view>{{item.name}}</view>
+											<u-switch v-model="item.off" active-color="#14A478" inactive-color="#AEB4C2"
+												:loading="item.disabled"
+												@change="switchchange($event, item.number, item, index)"></u-switch>
+										</view>
+									</u-col>
+								</u-row>
+							</view>
+							<u-button type="success" @click="statusPanel=false">确定</u-button>
 						</view>
-						<u-button type="success" @click="statusPanel=false">确定</u-button>
-					</view>
-				</u-popup>
-			</view>
-			<view class="main">
-				<image class="mainContent" src="../../static/images/waterandfernew/main.png"></image>
-				<view class="sourceBox">
-					<view class="smallBox">
-						水源
-					</view>
+					</u-popup>
 				</view>
-				<!-- 桶 -->
-				<view class="colList">
-					<view class="preClo" v-for="(fei, index) in Array(feiNum / 2)" :key="`fei${index}`">
-						<view>
-							肥料{{ index + 1 }}
+				<view class="main">
+					<image class="mainContent" src="../../static/images/waterandfernew/main.png"></image>
+					<view class="sourceBox">
+						<view class="smallBox">
+							水源
 						</view>
-						<image src="../../static/images/waterandfernew/col.png"></image>
 					</view>
-				</view>
-				<!-- 电风扇 -->
-				<view class="fengBox">
-					<view class="relativeBox">
-						<image src="../../static/images/waterandfernew/fengmain.png"></image>
-						<image :class="feiBeng ? 'circleAnm' : ''"
-							src="../../static/images/waterandfernew/fengleafs.png"></image>
+					<!-- 桶 -->
+					<view class="colList">
+						<view class="preClo" v-for="(fei, index) in Array(feiNum / 2)" :key="`fei${index}`">
+							<view>
+								肥料{{ index + 1 }}
+							</view>
+							<image src="../../static/images/waterandfernew/col.png"></image>
+						</view>
 					</view>
-				</view>
-				<!-- 水管控制阀 -->
-				<view class="benList">
-					<view class="preBen" v-for="item, index in buttonList" v-if="(index + 1) % 2 == 1"
-						@click="switchchange(!item.off, item.number, item, index, true)">
-						<image class="daoguan" src="../../static/images/waterandfernew/bottom.png"
-							v-if="(index + 1) % 2 < 4"></image>
-						<view class="info">
-							肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}开关
+					<!-- 电风扇 -->
+					<view class="fengBox">
+						<view class="relativeBox">
+							<image src="../../static/images/waterandfernew/fengmain.png"></image>
+							<image :class="feiBeng ? 'circleAnm' : ''"
+								src="../../static/images/waterandfernew/fengleafs.png"></image>
 						</view>
-						<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png"></image>
-						<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
 					</view>
-					<view class="preBen" v-for="item, index in facilityvalve" v-if="index > buttonList.length - 1"
-						@click="switchchange(!item.off, item.number, item, index)">
-						<image class="daoguan" src="../../static/images/waterandfernew/bottom.png"
-							v-if="(index-buttonList.length + buttonList.length/2) < 4"></image>
-						<view class="info">
-							{{item.name}}
+					<!-- 水管控制阀 -->
+					<view class="benList">
+						<view class="preBen" v-for="item, index in buttonList" v-if="(index + 1) % 2 == 1"
+							@click="switchchange(!item.off, item.number, item, index, true)">
+							<image class="daoguan" src="../../static/images/waterandfernew/bottom.png"
+								v-if="(index + 1) % 2 < 4"></image>
+							<view class="info">
+								肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}开关
+							</view>
+							<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png">
+							</image>
+							<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
+						</view>
+						<view class="preBen" v-for="item, index in facilityvalve" v-if="index > buttonList.length - 1"
+							@click="switchchange(!item.off, item.number, item, index)">
+							<image class="daoguan" src="../../static/images/waterandfernew/bottom.png"
+								v-if="(index-buttonList.length + buttonList.length/2) < 4"></image>
+							<view class="info">
+								{{item.name}}
+							</view>
+							<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png">
+							</image>
+							<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
 						</view>
-						<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png"></image>
-						<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
 					</view>
 				</view>
 			</view>
-		</view>
-		<!-- 操作记录 -->
-		<view class="consoleList" v-else>
-			<view class="histimeBox">
-				<u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
-				<view class="time" @click="consoleshow = true">{{consoleTime.startDate ? consoleTime.startDate : '开始'}}
+			<!-- 操作记录 -->
+			<view class="consoleList" v-else>
+				<view class="histimeBox">
+					<u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
+					<view class="time" @click="consoleshow = true">
+						{{consoleTime.startDate ? consoleTime.startDate : '开始'}}
+					</view>
+					<view class="">至</view>
+					<view class="time" @click="consoleshow = true">{{consoleTime.endDate ? consoleTime.endDate : '结束'}}
+					</view>
+					<u-icon name="close-circle" color="#C1C1C1" size="28" @click="clearContime"
+						v-if="consoleTime.startDate"></u-icon>
 				</view>
-				<view class="">至</view>
-				<view class="time" @click="consoleshow = true">{{consoleTime.endDate ? consoleTime.endDate : '结束'}}
+				<u-calendar v-model="consoleshow" mode="range" @change="changeConsoleDate"></u-calendar>
+				<view class="tableList tableTitle">
+					<view>设备名称</view>
+					<view>操作内容</view>
+					<view>操作时间</view>
 				</view>
-				<u-icon name="close-circle" color="#C1C1C1" size="28" @click="clearContime"
-					v-if="consoleTime.startDate"></u-icon>
-			</view>
-			<u-calendar v-model="consoleshow" mode="range" @change="changeConsoleDate"></u-calendar>
-			<view class="tableList tableTitle">
-				<view>设备名称</view>
-				<view>操作内容</view>
-				<view>操作时间</view>
-			</view>
-			<view class="tableList" v-for="(item, index) in tableData" :key="item.uptime + index">
-				<view>{{item.device_name}}</view>
-				<view>{{item.operation_content}}</view>
-				<view>{{item.uptime}}</view>
+				<view class="tableList" v-for="(item, index) in tableData" :key="item.uptime + index">
+					<view>{{item.device_name}}</view>
+					<view>{{item.operation_content}}</view>
+					<view>{{item.uptime}}</view>
+				</view>
+				<u-loadmore :status="status" />
 			</view>
-			<u-loadmore :status="status" />
+
 		</view>
 	</view>
 </template>
@@ -287,17 +293,17 @@
 			// 时间戳转换
 			timestampToDateTime(timestamp, isTime) {
 				var date = new Date(timestamp * 1000); // 将时间戳转换为毫秒并创建一个日期对象
-				  var year = date.getFullYear(); // 获取年份
-				  var month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，并补零
-				  var day = ('0' + date.getDate()).slice(-2); // 获取日期，并补零
-				  var hours = ('0' + date.getHours()).slice(-2); // 获取小时，并补零
-				  var minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并补零
-				  var seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒数，并补零
-				  if(isTime) {
-					return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; 
-				  } else {
-					return `${year}-${month}-${day}`; 
-				  }
+				var year = date.getFullYear(); // 获取年份
+				var month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，并补零
+				var day = ('0' + date.getDate()).slice(-2); // 获取日期，并补零
+				var hours = ('0' + date.getHours()).slice(-2); // 获取小时，并补零
+				var minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并补零
+				var seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒数，并补零
+				if (isTime) {
+					return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+				} else {
+					return `${year}-${month}-${day}`;
+				}
 			},
 			// 历史数据
 			async getHistoryData() {
@@ -311,11 +317,13 @@
 				var currentDate = new Date();
 				// 设置时间为 0 点
 				currentDate.setHours(0, 0, 0, 0);
-				let begin = historyTime.startDate ? (new Date(historyTime.startDate).getTime() / 1000) - 8*3600 : (Math.floor(currentDate.getTime() / 1000));
-				
+				let begin = historyTime.startDate ? (new Date(historyTime.startDate).getTime() / 1000) - 8 * 3600 : (
+					Math.floor(currentDate.getTime() / 1000));
+
 				// 设置时间为 24 点
 				currentDate.setHours(24, 0, 0, 0);
-				let end = historyTime.endDate ? (new Date(historyTime.endDate).getTime() / 1000) - 8*3600 : (Math.floor(currentDate.getTime() / 1000));
+				let end = historyTime.endDate ? (new Date(historyTime.endDate).getTime() / 1000) - 8 * 3600 : (Math
+					.floor(currentDate.getTime() / 1000));
 				//折线图数据
 				let res = await this.$myRequest({
 					url: "/api/api_gateway?method=weather.weather.sf_data_chart",
@@ -692,6 +700,7 @@
 		position: relative;
 		width: 100%;
 		height: 100vh;
+		overflow: auto;
 	}
 
 	.bigBox {
@@ -699,7 +708,6 @@
 	}
 
 	.bigOpen {
-		overflow: hidden;
 		height: 100vh;
 	}
 
@@ -820,11 +828,15 @@
 	}
 
 	.hisBox {
+		position: relative;
+		width: 100vw;
 		padding-bottom: 100rpx;
+		box-sizing: border-box;
+		overflow-y: scroll;
 
 		.axiosBox {
+			position: relative;
 			padding: 48rpx 32rpx;
-
 			.title {
 				color: #333333;
 				font-size: 28rpx;
@@ -832,18 +844,25 @@
 			}
 
 			.chartBox {
+				position: relative;
 				margin-top: 32rpx;
-				height: 700rpx;
+				height: 800rpx;
+				overflow: hidden;
 
 				#canvasColumnA {
 					width: 100%;
-					height: 700rpx;
+					height: 800rpx;
 				}
 			}
 		}
 
-		.readmore {
+		.readmoreHIs {
+			position: absolute;
+			bottom: 60rpx;
+			left: 50%;
+			transform: translate(-50%);
 			color: #14A478;
+			z-index: 5;
 		}
 	}