jp-housekeep-manage/pages/tenantList/remoteControl.vue

<template>
	<view>
		<u-navbar title="远程控制"  title-color="#101010" >
			<view class="u-nav-slot" slot="right"  @click="gotoUrl('/pages/tenantList/operationLog')" >
				 操作日志
			</view>
		</u-navbar>
		<!-- 标签 -->
		
		
		<view class="head-head">
			<view class="tabs-box" >
				
				<view class="tabs" :class="'tabs-len-'+merchantList1.length"  v-show="companyList.length>1"
				 :style="{width: companyList.length>3 ? '' : '100%'}">
					<u-tabs-one  v-if="utabsone"
					:list="merchantList1" :is-scroll="false" inactive-color="#999999" active-color="#666666"
					 :current="current" @change="change"></u-tabs-one>
				</view>
				<view class="more" @click="popShow=true" v-if="companyList.length >= 4">
					<u-icon name="arrow-down" color="#fff" size="40"></u-icon>
				</view>
			</view>
			<u-search style="padding:24rpx 24rpx 0 24rpx ;" placeholder="请输入关键字" :show-action="false"		 v-model="keyword"></u-search>
			
		</view>
		<view class="head-head-placeholder " :class="{
			'head-head-placeholder2':companyList.length>1
		}">
			
		</view>

	<!-- 标签弹出层 -->
	<u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
		<view class="popup-tabs">
			<view class="tabs">
				<u-tabs :list="merchantList1" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="more">
				<u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
			</view>
		</view>
		<view class="tabs-options">
			<view class="item" v-for="(item, index) in merchantList2" :key="index"
				@click="merchantChange(item,index)">
				{{item.name}}
			</view>
		</view>
	</u-popup>
		
		<view class="main">
			<view class="switch" 
			v-for="(item,i) in meterList" 
			
			v-show="(keyword==''||(item.name&&item.name.indexOf(keyword)!=-1))"
			
			@click="item.allowSwitch?gotoUrl('/pages/tenantList/switchDetail?id='+item.id):''"
			:key="i"  >
				<view class="switch-name">
					<view class="name">
					<span class="spanClass "  :style="{
					 borderColor:colorList[item.type%7],
				 	background:colorList[item.type%7],
					    fontSize: '24rpx',
						margin:'2rpx 8rpx 2rpx  0',
				 	color:'#fff',
				 }" >{{item.typeN}}</span>	
				 <span class="name2">{{replaceLastTwoWords(item.name)}}</span>
					</view>
					<view class="place">
						{{item.installationAddressSimple}}
					</view>
				</view>
				<view class="switch-icon">
					<view class="icon icon2" v-if="role&&item.allowSwitch" >
						<img src="@/assets/img/switchIcon.png"
						 @tap.stop="switchBtnApi(item,0)" class="img"
						 v-if="item.switchStatus" alt="" ></img >
						<img src="@/assets/img/switchClose.png" 
						 @tap.stop="switchBtnApi(item,1)" class="img"
						v-else alt="" ></img >
						
					</view>
					<view v-else style="    display: flex; flex-direction: column;">
						<template >
							<!-- <span class="spanClass span1" v-if="item.switchStatus">开启</span>
							<span class="spanClass span2" v-else>关闭</span>
							 -->
							<span class="spanClass span1" v-if="item.online">在线</span>
							<span class="spanClass span2" v-else>离线</span>
						</template>
					
					</view>
<!-- 					<image class="img" src="@/assets/img/switch-open.png" ></image -->
				</view>
				
			</view>
			
		
		</view>
		<u-divider :isnone="meterList.length==0"  nonetext="无记录"
			border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tenantList.js'
	import * as API_meterTimer from '@/apis/pagejs/meterTimer.js'
	import * as API_energyManage from '@/apis/pagejs/energyManage.js'
	export default {
		data() {
			return {
				formData:{},
				popShow:false,
				meterList:[],
				tenantList:[],
				tenantList1:[],
				remoteReadingMeterList:[],
				
				list1: [{
					name: '格莱慧'
				}, {
					name: '楚之源'
				}, {
					name: '杜宝银',
					
				}, {
					name: '王玉清',
					
				}, {
					name: '荆州万乘',
					
				}],
				list2: [{
					name: '全部'
				}, {
					name: '一楼大厅'
				}, {
					name: '门房',
					
				}, {
					name: '八楼',
					
				}, {
					name: '九楼',
					
				}],
				merchantList1: [], // 商户
				merchantList2: [],
				companyList: [],
				current:0,
				current1: 0,
				current2: 0,
				role:false,
				codes:"",
				companyId:"",
				utabsone:true,
					keyword:'',
				colorList:['',"#52b8aa","#53b56b","#ef8132",
					"#307af6","#5cb657","#777777"],
			}
		},
		onReady() {
			this.codes =this.carhelp.getPersonInfo().codes;
			this.role=this.codes&&this.codes.indexOf('switch')!=-1;
			
			//this.getTenantList()
			this.getHaveMeterList()
			this.getCompanyInfoList();
		},
		methods: {
			
			getHaveMeterList(){
				
				
				var data = {
					companyId:this.companyId,
					queryForm:"property",
					
				};
				API_meterTimer.haveMeterList(data).then((response) => {
					
					//var MeterList=response.data.switchRecordList.data
					var meterList = response.data.remoteReadingMeterList;
					meterList=meterList.sort((item1,item2)=>{
						if(item1.sortNo==item2.sortNo){
							return item1.level>item2.level?1:-1
						}
						return item1.sortNo>item2.sortNo?1:-1
						
					})
					this.meterList=meterList
					//this.recordsTotal = response.data.switchRecordList.recordsTotal;
				
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			switchBtnApiMethod(node,key){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.remoteSwitch({
					meterId:node.id,
					enabled:key
				}).then((res) => {
					uni.hideLoading();
					node.switchStatus=key
					
				}).catch(error => {
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			switchBtnApi(node,key){
				uni.showModal({
					confirmColor:`${key?'#3CC51F':'red'}`,
					confirmText:`${key?'开启':'关闭'}`,
					content: `确认是否要"${key?'开启':'关闭'}"${this.replaceLastTwoWords(node.name)}`,
					title: "提示",
					success:res=> {
						if(res.confirm){
							this.switchBtnApiMethod(node,key);
						}
					}
				})
				console.log(node,key)
			},
			getTenantMeterList(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.tenantMeterList(this.formData).then((response) => {
					uni.hideLoading();
					//this.list=response.data.data;
					this.remoteReadingMeterList=response.data.remoteReadingMeterList
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			change(index) {
				
				this.current = index;
				this.companyId = this.merchantList1[index].id;
				// this.companyIdSet(this.companyId)
				 this.popShow = false;
				this.merchantChangeApi()
			},
			merchantChange(item, index) {
				if(this.current==0){
					this.current=1;
				}
				this.utabsone=false
				var m = item;
				var n = this.merchantList1[this.current];
				this.merchantList1[this.current] = m;
				this.merchantList2[index] = n;
				this.companyId = item.id;
			 
				this.popShow = false;
				this.$nextTick(()=>{
					this.utabsone=true
				})
				//this.getList(true);
				this.merchantChangeApi()
			},
			 
			getTenantList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.tenantList().then((response) => {
					uni.hideLoading();
					
					
					var list=response.data.tenantInfoList;
					this.formData.tenantId=list[0].id
					
					this.getTenantListSort(list)
					this.merchantChangeApi()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getTenantListSort(list){
				for(var i  in list){
					var obj=list[i]
					if(this.formData.tenantId==obj.id){
						var obj1=list[this.current];
						list[this.current]=obj;
						list[i]=obj1;
					}
				}
				
				
				this.tenantList=list;
				var mList1 = [];
				 
				for (var i = 0; i < list.length; i++) {
					if (i >= 4) {
					
					} else {
						mList1.push(list[i]);
					}
				}
				this.tenantList1 = mList1;
			},
			getCompanyInfoList() {
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				API_energyManage.deviceCompanyList().then((response) => {
					//uni.hideLoading();
					var list = response.data.companyInfoList;
					
					var mList1 = [];
					var mList2 = [];
			
					mList1.push({
						id: '',
						name: '全部'
					});
					for (var i = 0; i < list.length; i++) {
						if (i >= 3) {
							mList2.push(list[i]);
						} else {
							mList1.push(list[i]);
						}
					}
			
					this.companyList = list;
					// if(list.length==1){
					// 	this.companyId=list[0].id
					// 	this.companyIdSet(this.companyId)
					
					// }else{
					// 	this.getHomePageKwh('')
					// }
					this.merchantList1 = mList1;
					this.merchantList2 = mList2;
					//this.merchantChangeApi()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			merchantChangeApi(){
				// this.getTenantMeterList()
				this.getHaveMeterList()
			},
			change1(index) {
				this.current1 = index;
			},
			change2(index) {
				this.current2 = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		//background: url('@/assets/img/controlCover.png') center  fixed ;
		//background-size:cover;
	}
	
	.u-nav-slot {
		margin-right: 32rpx;
	}
  // 标签

  .main{
	    padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
        background: inherit;
	  .switch{
		  width: 100%;
		  background-color: #fff;
		  border-radius: 4px;
		  padding: 24rpx 24rpx;
		 
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  margin: 18rpx 0;
	  }
	  .switch-name{
		  margin-right: 2px;
		      width: 85%;
		  .name{
			  
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
			     
			  font-weight: bold;
			    
			 display: flex;
			align-items: center;
		  }
		 .name2{
			  overflow: hidden;
			  white-space: nowrap;
			  text-overflow: ellipsis;
			   width: 552rpx;
		  }
		  .place{
			  margin-top: 12rpx;
			  color: rgba(119,119,119,1);
			  font-size: 24rpx;
		  }
	  }
	  .switch-icon{
		  white-space: pre;
		  .img{
			  width: 64rpx;
			  height: 64rpx;
		  }
	  }
  }
  
 
  
  
  .popup-tabs {
  	background-color: #fff;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	padding-top: 32rpx;
  	padding-right: 32rpx;
  	color: rgba(51, 51, 51, 1);
  	font-size: 32rpx;
  
  	.tabs1 {
  		width: 88%;
  
  	}
  }
  
  /deep/.u-tab-item {
  	width: 25% !important;
  	flex: none !important;
  }
  
	.tabs-options {
		//display: flex;
		padding: 24rpx 32rpx ;
		flex-wrap: wrap;
	
		.item {
			//width: 25%;
			color:rgb(119, 119, 119);
			margin-bottom: 24rpx;
			font-size: 32rpx;
		}
		.item-index{
			    color: rgb(51, 51, 51);
				font-weight: bold;
		}
	}
  .spanClass{
	  margin: 2px 0;
	  padding: 2rpx 8rpx;
	  border:  1px solid #00b962;
	  color:  #00b962;
	  border-radius: 3px;
	  white-space: pre;
  }
  .span2{
	   border:  1px solid #ff7b00;
	    color: #ff7b00;
  }
  .head-head{
	  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  	background: #fff;
  	padding:24rpx 0;
  	position: fixed;
  	    left: 0;
  	    right: 0;
  	    top: 80rpx;
  	    z-index: 991;
  }
  .head-head-placeholder{
  	height: 138rpx;
  	
  }
  .head-head-placeholder2{
  	height: 212rpx;
  	
  }
  
  // 标签

 
 
  .tabs-box {
  	background-color: #fff;
  	display: flex;
  	align-items: center;
  	
  	padding-right: 32rpx;
  	justify-content: space-between;
  	border-bottom: 1px solid rgba(232, 232, 232, 1);
  
  	.tabs {
  		width: 97%;
  	}
  	.more{
  		padding-right: 12rpx;
  	}
  
  	.icon {
  		margin-left: auto;
  		margin-right: 24rpx;
  	}
  }
  .tabs-len-1{
  	
  }
  .tabs-len-2{
  	/deep/.u-tab-item {
  		// max-width: 39% !important;
  		// flex: none !important;
  	}
  }
  .tabs-len-3{
  	/deep/.u-tab-item {
  		max-width: 39% !important;
  		flex: none !important;
  	}
  }
  .tabs-len-4{
  	/deep/.u-tab-item {
  		max-width: 26% !important;
  		flex: none !important;
  	}
  }
  /deep/.u-tab-item:first-child {
  	width: 20% !important;
  	flex: none !important;
  }
</style>