停车场，设备列表合并显示（按道闸合并，只应用于荆鹏）

apis/myparkings.js

@@ -41,3 +41,22 @@ export function updateParkingSeat(parkingId,totalCount,idleCount){
 	})
 }
 
+const areaOpts={'0':'大楼院内','2':'大楼前门','1':'创客公寓'}
+
+export function getAreaName(area){
+	return areaOpts[area] || '全部区域' 
+}
+
+export function getAreaOpts(){
+	let optsAry=[]
+	for(let code in areaOpts){
+		optsAry.push({code,name:areaOpts[code]})
+	}
+	
+	return optsAry
+}
+
+
+
+
+

pages/parking/parkingSiteDes.vue

@@ -19,7 +19,7 @@
 		</view>
 		<view class="parking-adr">
 			<view style="padding-left:30rpx;line-height:60rpx;height: 60rpx;position: absolute;z-index: 2;width:100%;background-color: rgba(255,255,255,0.9);">{{parkingSite.address_}}</view>
-			<image src="../../static/img/addrbg.png" style="height: 60rpx;width:100%;position: fixed;z-index: 1;"></image>
+			<image src="../../static/img/addrbg.png" style="height: 60rpx;width:100%;position: relative;z-index: 1;"></image>
 		</view>
 		
 		<view class="li-title">收费规则</view>
@@ -28,16 +28,19 @@
 			<!-- <view style="margin-top:15rpx;"><text space="emsp">  {{chargeRule.oth_rule_txt}}</text></view> -->
 		</view>
 		
-		<view class="li-title">设备列表</view>
+		<view class="li-title" style="display: flex;justify-content: space-between;">
+			<text>设备列表</text>
+			<u-icon name="reload" size="32" color="#55aaff" @click="loadPageData(crtparkId)"></u-icon>
+		</view>
 		<view class="li-con" v-for="(item,index) in devs">
 			<view class="dev-tit">
-				<text>{{item.channel_name}}</text>
-				<u-button type="primary" :custom-style="{height:'60rpx',margin:'0rpx 30rpx'}" :plain="true" @tap="manualPass(item.id,item.channel_name)">手动放行</u-button>
+				<text>{{item.gateName}}</text>
+				<u-button type="primary" :custom-style="{height:'60rpx',margin:'0rpx 30rpx'}" :plain="true" @tap="manualPass(item.onlineDevId,item.gateName)">手动放行</u-button>
 				<!-- <view class="dev-view"><text>查看</text><u-icon name="arrow-right"></u-icon></view> -->
 			</view>
 			<view class="dev-stat">
-				<view><text style="margin-right:10rpx;">闸口状态：{{item.channel_status=='1'?'在线':'离线'}}  </text>
-				<u-icon :name="item.channel_status=='1'?'checkmark-circle-fill':'error-circle-fill'" size="30" :color="item.channel_status=='1'?'#15b53a':'#888888'"></u-icon>
+				<view><text style="margin-right:10rpx;">闸口状态：{{item.gateStatus?'在线':'离线'}}  </text>
+				<u-icon :name="item.channel_status=='1'?'checkmark-circle-fill':'error-circle-fill'" size="30" :color="item.gateStatus?'#15b53a':'#888888'"></u-icon>
 				<!-- <text style="margin:0rpx 10rpx 0rpx 40rpx;">摄像头状态：正常  </text><u-icon name="checkmark-circle-fill" size="30" color="#15b53a"></u-icon> -->
 				</view>
 			</view>
@@ -67,6 +70,7 @@
 	export default {
 		data() {
 			return {
+				crtparkId:null,
 				showModal:false,
 				modalTitle:'放行说明',
 				passNote:'',
@@ -85,6 +89,7 @@
 		},
 		onLoad(opt){
 			this.loadPageData(opt.park_id);
+			this.crtparkId=opt.park_id
 		},
 		methods: {
 			editParking(){
@@ -130,7 +135,7 @@
 					this.closeEditModal()
 				})
 			},
-			manualPass(channelId,channelName){
+			manualPass(channelId,gateName){
 				if(this.opening){
 					uni.showToast({
 						title:'开门中，勿重复操作',
@@ -138,7 +143,7 @@
 					})
 					return;
 				}
-				this.modalTitle=channelName+"放行";
+				this.modalTitle=gateName+"放行";
 				this.showModal=true;
 				this.openingChannel=channelId;
 			},
@@ -184,7 +189,7 @@
 					title:'加载中...'
 				});
 				api.loadParkingCompose(id).then(resp => {
-					console.log(resp);
+					//console.log(resp);
 					uni.hideLoading();
 					if(!resp.success){
 						uni.showToast({
@@ -214,12 +219,81 @@
 					this.chargeRule['rule_txt']=`燃油车\n 免费时长：${this.chargeRule.free_duration}分钟，每小时费用：${this.chargeRule.hour_cost}元，${othRuleTxt.ryc.join('，')} \n新能源车\n 免费时长：${this.chargeRule.new_energy_free_duration}分钟，每小时费用：${this.chargeRule.new_energy_hour_cost}元，${othRuleTxt.xny.join('，')} \n每日封顶费用：${this.chargeRule.day_capping_cost}元`;
 					
 					//this.chargeRule['oth_rule_txt']=othRuleTxt.join(' ');
-					this.devs=resp.data.devs;
+					console.log(resp.data.devs)
+					this.devs=this.processDevDatas(resp.data.devs,id);  //resp.data.devs
+					console.log(this.devs)
 					
 				}).catch(error => {
 					uni.hideLoading();
 				});
+			},
+			
+			//设备（通道设备-摄像头），分级显示（停车场-区域-出口、入口），根据所属道闸合并显示
+			/*
+			{
+				area:{
+					'areaName':xxx,
+					 'gate':{
+						channelFlag:{
+							'gateName':xxx,
+							'gateStatus':xxx ,   //[true:online ,false:offline]
+							'onlineDevId':'',
+							'channels':[]
+						}
+					}
+				}
+			}*/
+			processDevDatas(devs,parkId){
+				if(!devs){
+					return []
+				}
+				
+				if(parkId!='1'){ //非荆鹏停车场
+					devs.forEach(dev=>{
+						dev['gateName']=dev['channel_name']
+						dev['gateStatus']=dev['channel_status']=='1'
+						dev['onlineDevId']=dev['id']
+					}) 
+					
+					return devs
+				}
+				
+				//荆鹏停车场(按道闸合并处理)
+				
+				let glbDev={},areaKey=null,gateNameStr=null
+				devs.forEach(dev=>{                  //dev.area=['0','1','2',null]  大楼院内(0)、公寓（1）、大楼前门(2)、全部区域(null)
+					if(!dev.channel_flag){
+						dev.channel_flag='1'
+					}
+					areaKey=dev.area || 'all'
+					if(!glbDev[areaKey]){            //按区域分组
+						glbDev[areaKey]={'areaName':api.getAreaName(areaKey),'gate':{}}   //gate 道闸下的通道设备
+					}
+					if(!glbDev[areaKey]['gate'][dev.channel_flag]){  //按所属道闸合并显示,道闸名=区域名+道闸序号+'入口/出口'
+						gateNameStr=`${glbDev[areaKey]['areaName']}道闸${dev.channel_flag||'1'}`
+						gateNameStr=gateNameStr.replace('全部区域','')
+						glbDev[areaKey]['gate'][dev.channel_flag]={'gateName':gateNameStr,'gateStatus':false,'onlineDevId':null, 'channels':[]}
+					}
+					glbDev[areaKey]['gate'][dev.channel_flag]['channels'].push(dev)
+					if(dev.channel_status=="1"){
+						glbDev[areaKey]['gate'][dev.channel_flag]['gateStatus']=true
+						glbDev[areaKey]['gate'][dev.channel_flag]['onlineDevId']=dev.id
+					}
+					
+				})
+				//console.log(glbDev)
+				let gateAry=[]
+				for(let are in glbDev){
+					for(let gateIdx in glbDev[are]['gate']){
+						gateAry.push(glbDev[are]['gate'][gateIdx])
+					}
+				}
+				
+				return gateAry
+				
 			}
+			
+			
 		}
 	}
 </script>