页面优化及机器睡眠功能

pages/Charts/equipmentStatistics.vue

@@ -1,21 +1,15 @@
+<!-- 机器销售排行 -->
 <template>
 	<view>
 		<view class="head">
-			<view class="">
-				<image class="userFlagimg" src="../../static/img/userFlag.png" mode=""></image>
-			</view>
-			<view class="pname">
-				<font class="wenzi" style="color: #BDD6F3;font-size:28upx">用户：{{pname}}</font>
-			</view>
-			<view class="company">
-				<font style="color: #BDD6F3;font-size:28upx">申泽智能物联</font>
-			</view>
 		</view>
-		<view class="line"></view>
+		<view class="ri">
+			<font class="title">机器销售排行</font>
+		</view>
 		<view class="qiun-columns">
 			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
-				<view class="qiun-title-dot-light">今日销售情况</view>
-				<view style="text-align: center;position: relative;">
+				<view class="qiun-title-dot-light">今日销售排行</view>
+				<view class="shijian" style="text-align: center;position: relative;">
 					<image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
 					<span>{{startDate1}}</span>
 					<image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
@@ -29,8 +23,8 @@
 		<view class="line"></view>
 		<view class="qiun-columns">
 			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
-				<view class="qiun-title-dot-light">本周销售情况</view>
-				<view style="text-align: center;position: relative;">
+				<view class="qiun-title-dot-light">本周销售排行</view>
+				<view class="shijian" style="text-align: center;position: relative;">
 					<image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
 					<span>{{startDate2}} 至 {{endDate2}}</span>
 					<image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
@@ -44,8 +38,8 @@
 		<view class="line"></view>
 		<view class="qiun-columns">
 			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
-				<view class="qiun-title-dot-light">本月销售情况</view>
-				<view style="text-align: center;position: relative;">
+				<view class="qiun-title-dot-light">本月销售排行</view>
+				<view class="shijian" style="text-align: center;position: relative;">
 					<image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
 					<span>{{startDate3}} 至 {{endDate3}}</span>
 					<image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
@@ -59,8 +53,8 @@
 		<view class="line"></view>
 		<view class="qiun-columns">
 			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
-				<view class="qiun-title-dot-light">本年销售情况</view>
-				<view style="text-align: center;position: relative;">
+				<view class="qiun-title-dot-light">本年销售排行</view>
+				<view class="shijian" style="text-align: center;position: relative;">
 					<image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
 					<span>{{startDate4}} 至 {{endDate4}}</span>
 					<image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
@@ -127,7 +121,7 @@
 				console.log("adminId:" + this.adminId)
 				_self = this;
 				//图表中图
-				this.cWidth = uni.upx2px(600);
+				this.cWidth = uni.upx2px(690);
 				this.cHeight = uni.upx2px(430);
 
 				await this.initDateRang(new Date(),'day');
@@ -400,35 +394,16 @@
 		flex-direction: row;
 		background: #206DC3;
 		width: 750upx;
-		height: 60upx;
-	}
-	
-	.company {
-		width: 48%;
-		text-align: right;
-	}
-	
-	.pname {
-		display: flex;
-		flex-direction: row;
-		width: 40%;
-	}
-	
-	.userFlagimg {
-		padding-left: 10upx;
-		padding-top: 10upx;
-		width: 26upx;
-		height: 28upx;
+		height: 180upx;
 	}
-	
-	.wenzi {
-		padding-right: 0upx;
-		/* text-align:right; */
-		white-space: nowrap;
-		overflow: hidden;
-		/* text-overflow: ellipsis; */
+	.title{
+		/* border-left: 10upx solid #0ea391; */
+		color: #363D44;
+		font-size: 62upx;
+		font-family: "PingFang-SC-Bold";
+		text-align: center;
+		margin: auto;
 	}
-	
 	.ri {
 		width: 690upx;
 		height: 180upx;

pages/User/equipmentStatusList.vue

@@ -15,18 +15,31 @@
 									<span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
 									<uni-collapse-item :title="getEquipmentTitle(equipment)">
 										<view style="padding: 20upx;background-color: antiquewhite;">
+											<view class="swithBox" v-if="equipment.isSleep">
+												<view class="swichFont">睡眠状态：机器已睡眠</view>
+												<view class="switch">
+													<switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
+												</view>
+											</view>
+											<view class="swithBox" v-else>
+												<view class="swichFont">睡眠状态：未睡眠</view>
+												<view class="switch">
+													<switch style="transform:scale(0.65)" @change="change(equipment.id,1)" />
+												</view>
+											</view>
+											<view class="line1"></view>
 											<view><span>机器唯一码：</span><span>{{equipment.clientId}}</span></view>
 											<view><span>所在地：</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
 											<view><span>温度：</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
 											<view><span>湿度：</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
 											<view><span>转速：</span><span>{{equipment.furnaceSp?equipment.furnaceSp:''}}</span></view>
-											<view class="" v-if="equipment.hasTodayAlarm">
+											<view  v-if="equipment.hasTodayAlarm">
 												<view><span>报警内容：</span></view>
 												<view v-for="(alarm,index) in equipment.alarmList" :key="index">
 													<view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}}  {{alarm.alarmContent}}</span></view>
 												</view>
 											</view>
-											<view class="" v-else>
+											<view  v-else>
 												<view><span>报警内容：</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}}  {{equipment.alarmContent}}</span></view>
 											</view>
 										</view>
@@ -49,6 +62,19 @@
 				<span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
 				<uni-collapse-item :title="getEquipmentTitle(equipment)">
 					<view style="padding: 20upx;background-color: antiquewhite;">
+						<view class="swithBox" v-if="equipment.isSleep">
+							<view class="swichFont">睡眠状态：机器已睡眠</view>
+							<view class="switch">
+								<switch style="transform:scale(0.65)"  checked @change="change(equipment.id,0)" />
+							</view>
+						</view>
+						<view class="swithBox" v-else>
+							<view class="swichFont">睡眠状态：未睡眠</view>
+							<view class="switch">
+								<switch style="transform:scale(0.65)" @change="change(equipment.id,1)" />
+							</view>
+						</view>
+						<view class="line1"></view>
 						<view><span>机器唯一码：</span><span>{{equipment.clientId}}</span></view>
 						<view><span>所在地：</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
 						<view><span>温度：</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
@@ -103,6 +129,7 @@
 		},
 		onLoad(state){
 			this.getEquipmentListData();
+			
 		},
 		onPullDownRefresh() {
 			this.getEquipmentListData();
@@ -130,7 +157,24 @@
 					uni.stopPullDownRefresh();
 				}
 				, _ => void uni.stopPullDownRefresh());
-			}
+			},
+			change(id,code){
+				var serverurl = this.serverurl;
+				var code = code;
+				var equipmentId = id;
+				uni.request({
+					url: serverurl + '/TEquipment/sleep',
+					data: {
+						"adminId": code,
+						"equipmentId": equipmentId
+					},
+					method: "POST",
+					success: (res) => {
+						var list = res.data.data;
+						this.getEquipmentListData();
+					}
+				});
+			},
 		}
     }
 </script>
@@ -178,4 +222,23 @@
 		font-size: 16upx;
 		font-family: "PingFang-SC-Medium";
 	}
+	.swithBox{
+		display: flex;
+		flex-direction: row;
+		padding-bottom: 15upx;
+		padding-top: 5upx;
+	}
+	.switch{
+		width: 44upx;
+		height: 22upx;
+	}
+	.swichFont{
+		width: 85%;
+		padding-top: 12upx;
+	}
+	.line1{
+		width: 100%;
+		height: 3upx;
+		background: #000000;
+	}
 </style>

pages/User/user.vue

@@ -195,23 +195,74 @@
 		justify-content: flex-end;
 		width: 15%;
 	}
-
+	.tuichu{
+		width: 100upx;
+		height: 64upx;
+		padding-top: 30upx;
+		/* padding-right: 30upx; */
+		text-align: center;
+		margin:0 auto;
+	}
 	.settings {
-		width: 140upx;
-		height: 70upx;
+		width: 100upx;
+		height: 64upx;
 		border-radius: 10upx;
 		background: #D6101F;
-		padding-top: 5upx;
+		/* padding-right: 50upx; */
+		/* padding-top: 5upx; */
+		text-align: center;
+		margin:0 auto;
+	}
+	.p3{
+		/* #ifdef H5 */
+		top: -13%;
+		/* #endif */
+		font-size: 32upx;
+		color: #FFFFFF;
+		font-weight: bold;
+		width: 100upx;
+		height: 64upx;
+		/* #ifndef H5 */
+		padding-top: 3upx;
+		/* #endif */
+		position:absolute;
+		/* 水平居中 */
+		left:50%;
+		-webkit-transform:translateX(-50%);
+		transform:translateX(-50%);
+	}
+	.centerY{
+		position:absolute;
+		top:50%;
+		-webkit-transform:translateY(-50%);
+		transform:translateY(-50%);
+	}
+	.button2{
+		padding-right: 50upx;
+		padding-top: 3upx;
 	}
-
 	.button {
-		padding: 5upx 10upx 10upx 0upx;
+		/* padding: 5upx 10upx 10upx 0upx; */
 		width: 80upx;
 		height: 60upx;
+		border-radius: 10upx;
 	}
-	.button2{
-		padding-right: 50upx;
+	.p {
+		/* #ifdef H5 */
+		top: -13%;
+		/* #endif */
+		width: 80upx;
+		height: 60upx;
+		font-size: 30upx;
+		/* #ifndef H5 */
 		padding-top: 3upx;
+		/* #endif */
+		
+		position:absolute;
+		/* 水平居中 */
+		left:50%;
+		-webkit-transform:translateX(-50%);
+		transform:translateX(-50%);
 	}
 	.input {
 		/* padding: 10upx 20upx 10upx 0upx; */
@@ -223,10 +274,6 @@
 		box-shadow:0upx 0upx   20upx #D3D3D3;
 		border-radius: 5upx;
 	}
-	.tuichu{
-		padding-top: 30upx;
-		padding-right: 30upx;
-	}
 	.xiugai{
 		width: 92%;
 		border-left: 20upx;
@@ -254,11 +301,6 @@
 		padding-left: 30upx;
 	}
 
-	.p {
-		width: 80upx;
-		height: 50upx;
-	}
-
 	.p2 {
 		color: #DD524D;
 		display: none;
@@ -266,12 +308,4 @@
 		height: 50upx;
 		border: 1px;
 	}
-	.p3{
-		font-size: 32upx;
-		padding-left: 5upx;
-		color: #FFFFFF;
-		font-weight: bold;
-		width: 64upx;
-		height: 33upx;
-	}
 </style>