机器状态列表页面优化

common/lang/en.js

@@ -122,7 +122,9 @@ export default {
 		wasteWater:'wasteWater',
 		buliao:'one click to complete materials',
 		buliaoT:'implement',
-		suspendBusiness:'Suspend Business'
+		suspendBusiness:'Suspend Business',
+		previousPage:'Previous Page',
+		nextPage:'Next Page',
 	},
 	equipmentStatics:{
 		title:'Machine Sales Ranking',

common/lang/zh.js

@@ -120,7 +120,9 @@ export default {
 		wasteWater:'废水',
 		buliao:'一键补料',
 		buliaoT:'补料',
-		suspendBusiness:'暂停营业'
+		suspendBusiness:'暂停营业',
+		previousPage:'上一页',
+		nextPage:'下一页',
 	},
 	equipmentStatics:{
 		title:'机器销售排行',

flowerShow.vue

@@ -1,345 +0,0 @@
-<template>
-	<view>
-		<view class="search">
-			<view class="search-title">
-				输入机器编码
-			</view>
-			<view class="search-input">
-				<input type="text" placeholder='输入设备编码后6位' v-model="searchClientId" />
-			</view>
-			<view class="search-button">
-				<button type="primary" class="" @click="search()">
-					<p class="">搜索</P>
-				</button>
-			</view>
-		</view>
-		<view class="td-right">
-			<view class="uni-list">
-				<view class="uni-list-cell">
-					<view class="uni-list-cell-left">
-						点击选择机器
-					</view>
-					<view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
-						<picker @change="changeEquipment" :value="index" :range="equipmentNameList">
-							<view class="uni-input">{{equipmentNameList[index]}}</view>
-						</picker>
-					</view>
-				</view>
-				<!-- <view class="uni-list-cell">
-					<view class="uni-list-cell-left">
-						点击选择商品
-					</view>
-					<view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
-						<picker @change="changeProduct" :value="index2" :range="productList">
-							<view class="uni-input">{{productList[index2]}}</view>
-						</picker>
-					</view>
-				</view> -->
-			</view>
-		</view>
-		<!-- <view class="p">
-			<p style="text-align:right" @click=sugarList()>今日做糖列表>>></p>
-		</view> -->
-		<view class="tr">
-			<button type="primary" formType="submit" @click="dosugar()" class="button">
-				<p class="p1">提交</p>
-			</button>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {
-		mapState,
-		mapActions,
-		mapMutations
-	} from 'vuex'
-	export default {
-		data() {
-			return {
-				globalUser: {},
-				index: null,
-				index2: null,
-				equipmentName: null,
-				equipmentNameList: [],
-				products: [],
-				productList: [],
-				productName: null,
-				equipmentId: null,
-				searchClientId:null
-			}
-		},
-		onShow() {
-			this.globalUser = uni.getStorageSync("globalUser");
-			// uni.setNavigationBarTitle({
-			// 	title: this.$t('equipmentStatusList.title')
-			// });
-			// uni.setTabBarItem({
-			// 	index: 3,
-			// 	text: this.$t('tabs.tab4')
-			// });
-			var token = uni.getStorageSync("token");
-			if (token.length > 1) {
-				this.getEquipmentListData();
-			} else {
-				uni.reLaunch({
-					url: '../Login/Login',
-				});
-			}
-
-		},
-		methods: {
-			...mapActions('chart', ['getEquipmentListByUser']),
-			getEquipmentListData() {
-				this.getEquipmentListByUser(this.globalUser)
-					.then(data => {
-						this.merchantList = data;
-						var listName = data[0].equipmentList;
-						var equipmentNameList = [];
-						for (var i = 0; i < listName.length; i++) {
-							equipmentNameList.push("名称:" + listName[i].name + " 编号:" + listName[i].clientId.substring(
-								listName[i].clientId.length - 6, listName[i].clientId.length));
-						}
-						this.equipmentNameList = equipmentNameList;
-						var listId = data[0].id;
-						if (listId != null && listId != '1') {
-							uni.setStorageSync("listName", listName);
-						}
-						uni.stopPullDownRefresh();
-					}, _ => void uni.stopPullDownRefresh());
-			},
-			search(){
-				var clientId = this.searchClientId;
-				var list = uni.getStorageSync("listName");
-				var n = 0;
-				for (var i = 0; i < list.length; i++) {
-					var code = list[i].clientId.substring(list[i].clientId.length - 6, list[i].clientId.length);
-					if(code==clientId){
-						n++;
-						this.index = i;
-						var id = list[i].id;
-						this.getProName(id);
-						this.equipmentId = id;
-						this.productName = null;
-						this.index2 = null;
-						break;
-					}
-				}
-				if(n==0){
-					uni.showModal({
-						title: "提示",
-						content: "找不到该机器",
-						success: (res) => {
-					
-						}
-					})
-				}
-			},
-			sugarList() {
-				uni.navigateTo({
-					url: 'sugarList',
-				});
-			},
-			//改变机器
-			changeEquipment: function(e) {
-				this.index = e.target.value;
-				// console.log("index="+this.index)
-				var list = uni.getStorageSync("listName");
-				this.getProName(list[e.target.value].id);
-				this.equipmentId = list[e.target.value].id;
-				this.productName = null;
-				this.index2 = null;
-				this.searchClientId = null;
-			},
-			changeProduct: function(e) {
-				this.index2 = e.target.value;
-				// console.log("index="+this.index2)
-				var list = this.products;
-				this.productName = list[this.index2].productName;
-			},
-			//获取商品列表
-			getProName(equipmentId) {
-				// console.log("equipmentId="+equipmentId)
-				var token = uni.getStorageSync("token");
-				uni.request({
-					url: this.serverurl + '/TProduct/selectProducts',
-					data: {
-						"equimentId": equipmentId
-					},
-					header: {
-						'token': token
-					},
-					method: "GET",
-					success: (res) => {
-						var listName = res.data.data;
-						this.products = listName;
-						var productList = [];
-						for (var i = 0; i < listName.length; i++) {
-							productList.push(listName[i].productName);
-						}
-						this.productList = productList;
-					},
-				});
-			},
-			dosugar() {
-				uni.showModal({
-					title: "提示",
-					content: "是否远程做糖？",
-					success: (res) => {
-						if (res.confirm) {
-							var that = this;
-							var token = uni.getStorageSync("token");
-							var productName = this.productName;
-							if (productName == null) {
-								return;
-							}
-							var adminId = uni.getStorageSync("globalUser").id;
-							var equipmentId = this.equipmentId;
-							if (equipmentId == null) {
-								return;
-							}
-							uni.request({
-								url: this.serverurl + '/TSugarDo/doSugar',
-								data: {
-									"equipmentId": equipmentId,
-									"adminId": adminId,
-									"productName": productName
-								},
-								header: {
-									'token': token
-								},
-								method: "GET",
-								success: (res) => {
-									var code = res.data.code;
-									if (code == true) {
-										uni.showToast({
-											title: "发送成功",
-											duration: 2000
-										});
-										var sugar = res.data.data;
-										console.log(sugar.no);
-										var no = sugar.no;
-										setTimeout(function() {
-											that.selectSugar(no);
-										}, 7000);
-										// this.selectSugar(sugar.no)
-									} else {
-										uni.showToast({
-											title: res.data.message,
-											duration: 2000
-										});
-									}
-								},
-							});
-						} else if (res.cancel) {}
-
-					}
-				})
-			},
-			selectSugar(no) {
-				var token = uni.getStorageSync("token");
-				uni.request({
-					url: this.serverurl + '/TSugarDo/selectSugarStatus',
-					data: {
-						"no": no
-					},
-					header: {
-						'token': token
-					},
-					method: "GET",
-					success: (res) => {
-						var code = res.data.code;
-						if (code == true) {
-							uni.showModal({
-								title: "提示",
-								content: res.data.message,
-								success: (res) => {
-
-								}
-							})
-
-							// var sugar = res.data.data;
-						} else {
-							uni.showModal({
-								title: "提示",
-								content: res.data.message,
-								confirmText: "重新查询",
-								success: (res) => {
-									if (res.confirm) {
-										this.selectSugar(no);
-									} else if (res.cancel) {}
-								}
-							})
-						}
-					},
-				});
-			}
-		}
-	}
-</script>
-
-<style>
-	.search{
-		width: 100%;
-		padding-top: 10upx;
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-	}
-	.search-title{
-		width: 28%;
-		text-align: center;
-		font-size: 26upx;
-		font-family: "PingFang-SC-Bold";
-	}
-	.search-input{
-		width: 45%;
-		text-align: center;
-		font-size: 26upx;
-		font-family: "PingFang-SC-Bold";
-		box-shadow: 0upx 0upx 20upx #D3D3D3;
-		border-radius: 5upx;
-	}
-	.search-button{
-		width: 20%;
-		padding-left: 7upx;
-		text-align: center;
-	}
-	.tr {
-		padding-top: 15upx;
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		font-size: 48upx;
-		font-family: "PingFang-SC-Bold";
-		position: fixed;
-		bottom: 100upx;
-		width: 100%;
-	}
-
-	.button {
-		margin: auto;
-		width: 60%;
-		height: 100upx;
-	}
-.p2 {
-		font-size: 30upx;
-		/* #ifndef H5 */
-		padding-top: 3upx;
-		/* #endif */
-		position: absolute;
-		/* 水平居中 */
-		left: 50%;
-		-webkit-transform: translateX(-50%);
-		transform: translateX(-50%);
-	}
-	.p1 {
-		font-size: 48upx;
-	}
-
-	.p {
-		align: right;
-		color: #007AFF;
-		padding-top: 30upx;
-	}
-</style>

pages/User/equipmentStatusList.vue

@@ -102,7 +102,7 @@
 				<image class="img" src="../../static/img/green.png"></image>
 				<font class="wenziT">{{$t('equipmentStatusList.green')}}</font>
 			</view>
-			<view class="titlelist" style="position: relative;" v-for="equipment in equipmentList"
+			<view class="titlelist" style="position: relative;" v-for="(equipment, index) in equipmentList"
 				:key="equipment.id">
 				<span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
 				<uni-collapse-item :title="getEquipmentTitle(equipment)">
@@ -111,14 +111,14 @@
 						<view class="swithBox" v-if="equipment.isSleep">
 							<view class="swichFont">{{$t('equipmentStatusList.sleep')}}</view>
 							<view class="switch">
-								<switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
+								<switch style="transform:scale(0.65)" checked @change="change(equipment.id,0,index)" />
 							</view>
 						</view>
 						<view class="swithBox" v-else>
 							<view class="swichFont">{{$t('equipmentStatusList.unsleep')}}</view>
 							<view class="switch">
 								<switch style="transform:scale(0.65)" :checked="sleepChecked"
-									@change="change(equipment.id,1)" />
+									@change="change(equipment.id,1,index)" />
 							</view>
 						</view>
 						<view class="line1"></view>
@@ -308,6 +308,10 @@
 					</view>
 				</uni-collapse-item>
 			</view>
+			<view v-show="btnShow" class="button-container">
+				<button v-show="globalUser.offset != 0" class="left-button" :disabled="isLoading" @click="previousPage">{{$t('equipmentStatusList.previousPage')}}</button>
+				<button v-show="this.globalUser.offset + this.globalUser.limit < this.equipmentTotal" class="right-button" :disabled="isLoading" @click="nextPage">{{$t('equipmentStatusList.nextPage')}}</button>
+			</view>
 		</uni-collapse>
 	</view>
 
@@ -358,28 +362,21 @@
 				editBtn:true,
 				sleepDesc:null,
 				descShow:false,
-				onReach:true,
+				btnShow:false, // 按钮显示
+				equipmentTotal:0, // 设备总数
+				isLoading: false, //是否加载中
 			}
 		},
 		computed: {
 			...mapState(['loginUser']),
 		},
 		onPullDownRefresh() {
-			this.equipmentList = [];
-			this.globalUser.offset = 1;
-			this.globalUser.limit = 20;
 			this.getEquipmentListData();
 		},
-		onReachBottom() {
-			if(this.onReach) {
-				this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
-				this.getEquipmentListData();
-			}
-		},
 		onShow() {
 			this.input = this.input + 1;
 			this.globalUser = uni.getStorageSync("globalUser");
-			this.globalUser.offset = 1;
+			this.globalUser.offset = 0;
 			this.globalUser.limit = 20;
 			uni.setNavigationBarTitle({
 				title: this.$t('equipmentStatusList.title')
@@ -390,9 +387,7 @@
 			});
 			var token = uni.getStorageSync("token");
 			if (token.length > 1) {
-				if(this.equipmentList.length === 0) {
-					this.getEquipmentListData();						
-				}
+				this.getEquipmentListData();
 			} else {
 				uni.reLaunch({
 					url: '../Login/Login',
@@ -409,14 +404,18 @@
 				return equipment.name ? equipment.name : '暂无名称';
 			},
 			getEquipmentListData() {
+				this.isLoading = true;
 				this.getEquipmentListByUser(this.globalUser)
 					.then(data => {
 						this.merchantList = data;
-						if(data[0].equipmentList.length === 0) {
-							this.onReach = false;
+						// this.equipmentList.push(...data[0].equipmentList);
+						this.equipmentList = data[0].equipmentList;
+						this.equipmentTotal = this.merchantList[0].equipmentTotal;
+						if(this.equipmentTotal > this.globalUser.limit) {
+							this.btnShow = true;
 						}
-						this.equipmentList.push(...data[0].equipmentList);
 						console.log(this.equipmentList);
+						this.isLoading = false;
 						var listName = data[0].equipmentList;
 						var times = new Map;
 						if (this.input == 1) {
@@ -433,6 +432,16 @@
 						uni.stopPullDownRefresh();
 					}, _ => void uni.stopPullDownRefresh());
 			},
+			// 点击上一页
+			previousPage() {
+				this.globalUser.offset = this.globalUser.offset - this.globalUser.limit;
+				this.getEquipmentListData();
+			},
+			// 点击下一页
+			nextPage() {
+				this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
+				this.getEquipmentListData();
+			},
 			
 			getValue: function(event) {
 				// 绕过v-model 获取input输入框的值
@@ -584,8 +593,8 @@
 				if (that.timeAll.get(id) != null) {
 					var stamp = Date.parse(new Date());
 					var t = (stamp - that.timeAll.get(id)) / 1000;
-					if (t < 30) {
-						var s = 30 - t;
+					if (t < 15) {
+						var s = 15 - t;
 						uni.showModal({
 							title: that.$t('equipmentStatusList.onoff'),
 							content: that.$t('equipmentStatusList.remainingtime') + s + "s",
@@ -654,7 +663,7 @@
 								});
 							} else if (res.cancel) {
 								that.onffChecked = false;
-								that.getEquipmentListData();
+								// that.getEquipmentListData();
 							}
 						}
 					});
@@ -696,7 +705,7 @@
 									title: that.$t('equipmentStatusList.error'),
 									content: that.$t('equipmentStatusList.kaijierror'),
 									success: function(res) {
-										that.onffChecked = false;
+										that.equipmentList = [];
 										that.getEquipmentListData();
 									}
 								})
@@ -855,9 +864,12 @@
 				})
 
 			},
-			change(id, code) {
+			change(id, code, index) {
 				var that = this;
+				that.sleepChecked = true;
 				var code1 = code;
+				console.log(index);
+				console.log(code);
 				if (code1 == 1) {
 					uni.showModal({
 						title: that.$t('equipmentStatusList.tip'),
@@ -880,10 +892,12 @@
 									},
 									success: (res) => {
 										var list = res.data.data;
+										that.equipmentList[index].isSleep = true;
 										that.getEquipmentListData();
 									}
 								});
 							} else if (res.cancel) {
+								that.equipmentList[index].isSleep = false;
 								that.sleepChecked = false;
 								that.getEquipmentListData();
 							}
@@ -908,6 +922,7 @@
 						},
 						success: (res) => {
 							var list = res.data.data;
+							that.equipmentList[index].isSleep = false;
 							that.getEquipmentListData();
 						}
 					});
@@ -1082,4 +1097,12 @@
 		height: 3upx;
 		background: #000000;
 	}
+	.button-container {
+	  display: flex;
+	}
+	
+	.left-button,
+	.right-button {
+	  flex: 1;
+	}
 </style>

pages/User/merchantList.vue

@@ -10,6 +10,10 @@
 							<uni-list-item :title="getEquipmentTitle(equipment)" @click="openByEquipment(merchantList[0].name,equipment.id)" />
 						</view>
 					</uni-list>
+					<view v-show="btnShow" class="button-container">
+						<button v-show="globalUser.offset != 0" class="left-button" :disabled="isLoading" @click="previousPage">{{$t('equipmentStatusList.previousPage')}}</button>
+						<button v-show="this.globalUser.offset + this.globalUser.limit < this.equipmentTotal" class="right-button" :disabled="isLoading" @click="nextPage">{{$t('equipmentStatusList.nextPage')}}</button>
+					</view>
 				</uni-collapse>
 			</view>
 			<view v-else style="text-align: center;">{{$t('merchantList.data')}}</view>
@@ -54,30 +58,30 @@
 				id: null,
 				pname:null,
 				list: [],
-				onReach:true,
+				btnShow:false, // 按钮显示
+				equipmentTotal:0, // 设备总数
+				isLoading: false, //是否加载中
 			}
 		},
 		computed: {
 			...mapState(['loginUser']),
 		},
-		onReachBottom() {
-			if(this.onReach) {
-				this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
-				this.getEquipmentListData();
-			}
-		},
+		// onReachBottom() {
+		// 	if(this.onReach) {
+		// 		this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
+		// 		this.getEquipmentListData();
+		// 	}
+		// },
 		onShow() {
 			uni.setNavigationBarTitle({title: this.$t('merchantList.title')});
 			uni.setTabBarItem({ index: 1,text: this.$t('tabs.tab2')});
 			this.globalUser = uni.getStorageSync("globalUser");
 			this.id = this.globalUser.id;
-			this.globalUser.offset = 1;
+			this.globalUser.offset = 0;
 			this.globalUser.limit = 20;
 			var token = uni.getStorageSync("token");
 			if (token.length>1) {
-				if(this.equipmentList.length === 0) {
-					this.getEquipmentListData();						
-				}
+				this.getEquipmentListData();						
 			}else{
 				uni.reLaunch({
 					url: '../Login/Login',
@@ -85,9 +89,6 @@
 			}
 		},
 		onPullDownRefresh() {
-			this.equipmentList = [];
-			this.globalUser.offset = 1;
-			this.globalUser.limit = 20;
 			this.getEquipmentListData();
 		},
 		methods: {
@@ -161,13 +162,17 @@
 						this.list = data;
 					}, _ => void uni.stopPullDownRefresh());
 				}else{
+					this.isLoading = true;
 					this.getEquipmentListByUser(this.globalUser)
 					.then(data => {
 						this.merchantList = data;
-						if(data[0].equipmentList.length === 0) {
-							this.onReach = false;
+						this.equipmentList = data[0].equipmentList;
+						this.equipmentTotal = this.merchantList[0].equipmentTotal;
+						if(this.equipmentTotal > this.globalUser.limit) {
+							this.btnShow = true;
 						}
-						this.equipmentList.push(...data[0].equipmentList);
+						console.log(this.equipmentList);
+						this.isLoading = false;
 						var listName = data[0].equipmentList;
 						var listId = data[0].id;
 						if(listId!=null && listId!='1'){
@@ -178,7 +183,17 @@
 					, _ => void uni.stopPullDownRefresh());
 				}
 				
-			}
+			},
+			// 点击上一页
+			previousPage() {
+				this.globalUser.offset = this.globalUser.offset - this.globalUser.limit;
+				this.getEquipmentListData();
+			},
+			// 点击下一页
+			nextPage() {
+				this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
+				this.getEquipmentListData();
+			},
 		}
 	}
 </script>
@@ -189,4 +204,12 @@
 		font-size: 16upx;
 		font-family: "PingFang-SC-Medium";
 	}
+	.button-container {
+	  display: flex;
+	}
+	
+	.left-button,
+	.right-button {
+	  flex: 1;
+	}
 </style>