设备展示优化和调整

machineAndCell/cellSearch/cellSearch.vue

@@ -18,7 +18,7 @@
 			<view class="cell-box" v-for="item,index in groupList">
 				<view class="ddflex">
 					<view style="margin-right: 35rpx;">
-						<cell :width="99" :height="197" :soc="index*10" :showsoc="true"></cell>
+						<cell :width="99" :height="197" :soc="item.leaseStatus==1?50:100" :showsoc="false"></cell>
 					</view>
 					<view class="cell-info fflex">
 						<view class="ddflex">

pages/cell/cell.vue

@@ -60,7 +60,7 @@
 			<view class="cell-box" v-for="item,index in groupList">
 				<view class="ddflex">
 					<view style="margin-right: 35rpx;">
-						<cell :width="99" :height="197" :soc="index*10" :showsoc="true"></cell>
+						<cell :width="99" :height="197" :soc="item.leaseStatus==1?50:100" :showsoc="false"></cell>
 					</view>
 					<view class="cell-info fflex">
 						<view class="ddflex">

pages/machineLook/machineLook.css

@@ -4,6 +4,7 @@
 	top: 0;
 	left: 0;
 	right: 0;
+	z-index: 100;
 }
 .top-box{
 	background-color: #fff;
@@ -20,101 +21,128 @@
 	height: 36rpx;
 	margin-left: 15rpx;
 }
-/* 搜索 */
-.search-box{
+.tab-box{
+	background-color: #fff;
 	padding: 30rpx;
+	z-index: 100;
 }
-.search-saoma{
-	width: 40rpx;
-	height: 40rpx;
-	margin-right: 45rpx;
+.tab-item{
+	text-align: center;
+	font-size: 28rpx;
+	line-height: 41rpx;
 }
-.search-input{
-	height: 76rpx;
-	line-height: 76rpx;
-	background: #F8F8F8;
-	border-radius: 20rpx 20rpx 20rpx 20rpx;
+.tab-item image{
+	visibility: hidden;
+}
+.tab-item-active{
+	color: #EB5C20;
+}
+.tab-item-active image{
+	visibility: visible;
+}
+.tab-active-icon{
+	width: 32rpx;
+	height: 10rpx;
+	margin-top: 10rpx;
+	margin: auto;
+}
+.saoma{
+	width: 39rpx;
+	height: 36rpx;
+	margin-left: 60rpx;
+	margin-bottom: 10rpx;
+}
+.sousuo{
+	width: 36rpx;
+	height: 36rpx;
+	margin-left: 50rpx;
+	margin-bottom: 10rpx;
+}
+
+.state-box{
+	margin: 30rpx;
+	justify-content: space-between;
+}
+.state-item{
+	width: 335rpx;
+	padding: 12rpx 20rpx;
+	background: #FFFFFF;
+	border-radius: 10rpx 10rpx 10rpx 10rpx;
 	opacity: 1;
-	padding: 0 16rpx 0 30rpx;
+	box-sizing: border-box;
 }
-.search-input-icon{
+.icon{
 	width: 26rpx;
 	height: 26rpx;
+	background: #EB5C20;
+	border-radius: 5rpx 5rpx 5rpx 5rpx;
+	opacity: 1;
 	margin-right: 10rpx;
 }
-.search-btn{
-	width: 96rpx;
-	height: 47rpx;
+.state-label{
+	line-height: 41rpx;
+	font-size: 28rpx;
+	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+	font-weight: 500;
+	color: #242323;
+	line-height: 35rpx;
+}
+.state-data{
+	margin-left: 36rpx;
+	justify-content: space-between;
 	line-height: 47rpx;
-	background: #EB5C20;
-	border-radius: 24rpx 24rpx 24rpx 24rpx;
-	opacity: 1;
-	font-size: 22rpx;
-	font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
-	font-weight: normal;
-	color: #FFFFFF;
-	text-align: center;
-	margin-left: 10rpx;
+	font-size: 32rpx;
+	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+	font-weight: 500;
+	color: #242323;
 }
 
-/* 机柜 */
-.machine-item{
+/* 电池 */
+.cell-box{
 	margin: 30rpx;
-	padding:23rpx 30rpx 38rpx;
 	background: #FFFFFF;
 	border-radius: 20rpx 20rpx 20rpx 20rpx;
 	opacity: 1;
+	padding: 30rpx;
 }
-.machine-title{
-	line-height: 47rpx;
-	font-size: 32rpx;
+.cell-title{
+	width: 157rpx;
+	line-height: 54rpx;
+	font-size: 36rpx;
 	font-family: Source Han Sans CN-Bold, Source Han Sans CN;
 	font-weight: bold;
-	color: #333333;
+	color: #242323;
 }
-.state{
-	line-height: 36rpx;
+.cell-state{
+	line-height: 33rpx;
+	background: #EB5C20;
 	border-radius: 5rpx 5rpx 5rpx 5rpx;
 	opacity: 1;
-	border: 2rpx solid #0FCB27;
-	color: #0FCB27;
+	font-size: 22rpx;
+	font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
+	font-weight: normal;
+	color: #FFFFFF;
+	padding: 0 10rpx;
 	text-align: center;
 	margin-left: 20rpx;
-	padding: 0 15rpx;
 }
-.machine-number{
+.cell-info{
+	font-size: 28rpx;
+	font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
+	font-weight: normal;
+	color: #666464;
+	line-height: 41rpx;
+}
+.cell-option{
+	margin-top: 20rpx;
+	border-top: 1rpx solid #E6E6E6;
+	padding: 30rpx 0 0;
 	line-height: 41rpx;
 	font-size: 28rpx;
 	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
 	font-weight: 500;
-	color: #666464;
-	margin-top: 7rpx;
-}
-.machine-info{
-	line-height: 36rpx;
-	background: #f8f8f8;
-	border-radius: 8rpx 8rpx 8rpx 8rpx;
-	padding: 20rpx;
-	font-size: 24rpx;
-	color: #666464;
-	font-weight: 500;
-	margin-top: 11rpx;
-}
-.margin-r40{
-	margin-right: 40rpx;
-}
-.address-box{
-	margin: 32rpx 0rpx 0;
-}
-.address-icon{
-	width: 26rpx;
-	height: 26rpx;
-	margin-right: 10rpx;
-}
-.daohang{
-	width: 50rpx;
-	height: 50rpx;
-	margin-left: 10rpx;
+	color: #333333;
+	text-align: center;
 }
 
 /* 弹窗 */

pages/machineLook/machineLook.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view style="overflow: hidden;">
 		<view class="top-box">
 			<view class="top-title ddflex">
 				<view :style="'height: '+ systems.navigationHeight+'rpx;padding-top:' + systems.ktxStatusHeight + 'rpx;'" class="ddflex" @click="goback">
@@ -11,46 +11,95 @@
 				</view>
 				<view v-else :style="'height: '+ systems.navigationHeight + 'rpx;padding-top:' + systems.ktxStatusHeight + 'rpx;'+'line-height: '+ systems.navigationHeight + 'rpx;'">设备</view>
 			</view>
-			<view class="search-box ddflex">
-				<image class="search-saoma" src="../../static/pages/images/saoma.png" @click="saomaFn()"></image>
-				<view class="search-input ddflex fflex">
-					<image class="search-input-icon" src="../../static/pages/images/search.png"></image>
-					<input class="fflex" v-model="searchValue" confirm-type="search" @confirm="searchFn"  placeholder="请输入编号查询"/>
-					<view class="search-btn" @click="searchFn">搜索</view>
+			<view class="tab-box ddflex">
+				<view class="fflex ddflex">
+					<view :class="'tab-item fflex '+(queryType==''?'tab-item-active':'')" @click="queryTypeChange(-1)">
+						<view>全部</view>
+						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
+					</view>
+					<view :class="'tab-item fflex '+(queryType==2?'tab-item-active':'')" @click="queryTypeChange(2)">
+						<view>未租</view>
+						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
+					</view>
+					<view :class="'tab-item fflex '+(queryType==1?'tab-item-active':'')" @click="queryTypeChange(1)">
+						<view>已租</view>
+						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
+					</view>
+				</view>
+				<view class="ddflex">
+					<image class="saoma" src="../../static/pages/images/saoma.png" @click="saomaFn()"></image>
+					<image class="sousuo" src="../../static/pages/images/search.png" @click="jumpUrl('/machineAndCell/cellSearch/cellSearch?storeId='+actMerchant.id+'&type='+queryType)"></image>
 				</view>
 			</view>
 		</view>
 		
-		<view :style="'height: '+ (systems.navigationHeight+systems.ktxStatusHeight+134) + 'rpx;'"></view>
+		<view :style="'height: '+ (systems.navigationHeight+systems.ktxStatusHeight+106) + 'rpx;'"></view>
 		
-		<!-- 机柜 -->
-		<view class="machine-item" v-for="item,index in groupList" @click="jumpUrl('/machineAndCell/machineInfo/machineInfo?id='+item.devId)">
-			<view class="ddflex" style="justify-content: space-between;">
-				<view class="machine-title fflex tover">{{item.devName}}</view>
-				<!-- <view class="state">在线</view> -->
+		<view class="ddflex state-box">
+			<view class="state-item">
+				<view class="ddflex">
+					<view class="icon"></view>
+					<view class="state-label">租赁中</view>
+				</view>
+				<view class="ddflex state-data">
+					<view>{{count.leaseCount?count.leaseCount:0}}</view>
+					<view>{{getP(1)}}%</view>
+				</view>
 			</view>
-			<view class="machine-number">机柜编号：{{item.devId}}</view>
-			<view class="machine-info ddflex">
+			<view class="state-item">
 				<view class="ddflex">
-					<view class="margin-r40">温度：{{item.cabTemp?item.cabTemp:0}}℃</view>
-					<view class="margin-r40">仓门数：{{item.doorCount?item.doorCount:0}}</view>
-					<view class="margin-r40">电池数：{{item.batNum?item.batNum:0}}</view>
+					<view class="icon" style="background: #0FCB27;"></view>
+					<view class="state-label">空闲</view>
 				</view>
-				<view class="fflex tover" style="color: #2A82E4;text-align: right;">
-					{{item.storeName?item.storeName:''}}
+				<view class="ddflex fflex state-data">
+					<view>{{count.noLeaseCount?count.noLeaseCount:0}}</view>
+					<view>{{getP(2)}}%</view>
 				</view>
 			</view>
-			<view class="address-box ddflex">
-				<image class="address-icon" src="../../static/pages/images/address-icon.png"></image>
-				<view class="fflex tover">{{item.address}}</view>
-				<image @click.stop="toLocation(item)" class="daohang" src="../../static/pages/images/daohang.png"></image>
+		</view>
+		
+		<!-- 电池 -->
+		<view>
+			<view class="cell-box" v-for="item,index in groupList">
+				<view class="ddflex">
+					<view style="margin-right: 35rpx;">
+						<cell :width="99" :height="197" :soc="item.leaseStatus==1?50:100" :showsoc="false"></cell>
+					</view>
+					<view class="cell-info fflex">
+						<view class="ddflex">
+							<view class="cell-title">{{item.model}}</view>
+							<view class="cell-state" :style="item.leaseStatus==1?'':'background-color: #0FCB27;'">{{item.leaseStatus==1?'已租':'空闲'}}</view>
+						</view>
+						<view class="cell-info  ddflex">
+							<view>电池Id：</view>
+							<view>{{item.batteryId}}</view>
+						</view>
+						<view class="cell-info  ddflex">
+							<view>设备编号：</view>
+							<view>{{item.number}}</view>
+						</view>
+						<view class="cell-info ddflex">
+							<view>门店：</view>
+							<view>{{item.storeName}}</view>
+						</view>
+						<view class="cell-info ddflex">
+							<view>到期时间：</view>
+							<view>{{item.blockDate}}</view>
+						</view>
+					</view>
+				</view>
+				<view class="cell-option ddflex">
+					<view class="fflex" @click="jumpUrl('/machineAndCell/map/map?id='+item.batteryId)">定位</view>
+					<view class="fflex" @click="jumpUrl('/machineAndCell/BMS/BMS?id='+item.batteryId)">BMS</view>
+					<view class="fflex" @click="jumpUrl('/machineAndCell/cellDetail/cellDetail?id='+item.batteryId)">详情</view>
+				</view>
 			</view>
 		</view>
 		
 		<view v-if="groupList.length==0">
 			<view class="nodata">
 				<image :src="picUrlss+'empty.png'"></image>
-				<text>暂无设备~</text>
+				<text>暂无电池~</text>
 			</view>
 		</view>
 		
@@ -76,10 +125,12 @@
 <script>
 	const app = getApp();
 	const req = require("../../utils/request.js");
+	import cell from "../../components/cell/index";
 	import leftPop from "../../components/left-pop/index";
 
 	export default {
 		components: {
+			cell,
 			leftPop
 		},
 		props: {},
@@ -101,6 +152,8 @@
 				searchValue:'',
 				isQuerying:false,//正在查询数据
 				
+				queryType:'',
+				
 				merchantList: [],
 				merchantPage: 1,
 				merchantLimit: 10,
@@ -108,7 +161,9 @@
 				actMerchant:null,//当前门店
 				
 				merchantId:null,
-				storeId:null
+				storeId:null,
+				
+				count:{}
 			}
 		},
 		onLoad(options) {
@@ -124,6 +179,7 @@
 						id:this.storeId
 					}
 					this.getMachineList()
+					this.getTopNum()
 				}
 			}else{
 				this.getMachineList()
@@ -150,6 +206,23 @@
 					})
 				}
 			},
+			getP(type){
+				let p = 0
+				console.log('111')
+				if(type==1){
+					if(this.count.leaseCount == 0 || this.count.leaseCount == undefined){}
+					else{
+						return (this.count.leaseCount/(this.count.leaseCount+(this.count.noLeaseCount?this.count.noLeaseCount:0))).toFixed(4)*100
+					}
+				}
+				if(type==2){
+					if(this.count.noLeaseCount == 0 || this.count.noLeaseCount == undefined){}
+					else{
+						return (this.count.noLeaseCount/(this.count.leaseCount+(this.count.noLeaseCount?this.count.noLeaseCount:0))).toFixed(4)*100
+					}
+				}
+				return p*100
+			},
 			jumpUrl(url){
 				if(req.isLogins(true)){
 					uni.navigateTo({
@@ -157,6 +230,12 @@
 					})
 				}
 			},
+			queryTypeChange(val) {
+				if (this.queryType == val) return false
+				this.queryType = val
+				this.queryType = val==-1?'':val
+				this.getMachineList()
+			},
 			// 弹窗弹出
 			openPop(item) {
 				this.tempData = JSON.parse(JSON.stringify(item))
@@ -170,7 +249,18 @@
 				this.closePop()
 				this.getMachineList()
 			},
-			// 获取机柜列表
+			// 电池数量
+			getTopNum(){
+				console.log('getTopNum')
+				req.getRequest(
+					'/admin/v2/battery/count',
+					{storeId:this.actMerchant.id},
+					data => {
+						this.count = data
+					}
+				)
+			},
+			// 获取电池列表
 			getMachineList(isPage){
 				if(!this.actMerchant||!this.actMerchant.id) return
 				if(this.isQuerying) return
@@ -183,11 +273,14 @@
 					limit: this.limit,
 				}
 				if(this.searchValue){
-					queryParams.devId=this.searchValue
+					queryParams.number=this.searchValue
+				}
+				if(this.queryType){
+					queryParams.type = this.queryType
 				}
 				queryParams.storeId = this.actMerchant.id
 				req.getRequest(
-					'/admin/v2/cab/page',
+					'/admin/v2/battery/page',
 					queryParams,
 					data => {
 						if (data != null && data.list.length > 0) {
@@ -272,8 +365,7 @@
 						console.log('条码类型：' + res.scanType);
 						console.log('条码内容：' + res.result);
 						// did设备id
-						this.searchValue = res.result
-						this.searchFn()
+						this.jumpUrl('/machineAndCell/cellSearch/cellSearch?storeId='+this.actMerchant.id+'&searchValue='+res.result+'&type='+this.queryType)
 					}
 				});
 			}