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

<template>
	<view>
		<u-navbar title="远程控制"  title-color="#101010" >
			<view class="u-nav-slot" slot="right" v-if="0" >
				 操作日志
			</view>
		</u-navbar>
		
	<view class="tabs-box" v-if="!popShow" >
		<view class="tabs1" v-show="tenantList.length>1" :style="{width: tenantList.length>4 ? '' : '100%'}" >
			<u-tabs :list="tenantList1"   inactive-color="#777777" active-color="#333333	" 
			 bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="icon"  @click="popShow=true" v-if="tenantList.length >= 4" >
			<u-icon name="arrow-down" color="#777777" size="28"></u-icon>
		</view>
	</view>
	<!-- 标签弹出层 -->
	<u-popup v-model="popShow"  length="80%"  @close="keyword=''"  duration="10" mode="top" :negative-top="188" border-radius="32">
		<u-navbar title="远程控制"  title-color="#101010" >
			<view class="u-nav-slot" slot="right" v-if="0" >
				 操作日志
			</view>
		</u-navbar>
		<view class="head-head">
			<u-search placeholder="请输入关键字" :show-action="false"		 v-model="keyword"></u-search>
			
		</view>
		<view class="head-head-placeholder ">
			
		</view>
		
		<view class="popup-tabs" v-if="false">
			<view class="tabs1">
				<!-- <u-tabs :list="tenantList1"   inactive-color="#777777" active-color="#333333	"
				 bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
				<u-tabs :list="tenantList1" :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 tenantList"
			v-show="keyword==''||(item.name&&item.name.indexOf(keyword)!=-1)"
			
			 :class="{
			 	'item-index' : item.id==formData.tenantId
			 }"
			 :key="index"
				@click="merchantChange(item,index)">
				{{item.name}}
			</view>
			<u-divider   nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
	</u-popup>
		
		<view class="main">
			<view class="switch" v-for="(item,i) in remoteReadingMeterList" :key="i" >
				<view class="switch-name">
					<view class="name">
						{{item.name}}
					</view>
					<view class="place">
						{{item.installationAddressSimple}}
					</view>
				</view>
				<view class="switch-icon">
					<view class="icon icon2" v-if="role" >
						<img src="@/assets/img/switchIcon.png"
						 @click="switchBtnApi(item,0)" class="img"
						 v-if="item.switchStatus" alt="" ></img >
						<img src="@/assets/img/switchClose.png" 
						 @click="switchBtnApi(item,1)" class="img"
						v-else alt="" ></img >
						
					</view>
					<view v-else style="    display: flex; flex-direction: column;">
						<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>
					</view>
<!-- 					<image class="img" src="@/assets/img/switch-open.png" ></image -->
				</view>
				
			</view>
			
		
		</view>
		<u-divider :isnone="remoteReadingMeterList.length==0"  nonetext="无记录"
			border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tenantList.js'
	
	export default {
		data() {
			return {
				formData:{},
				popShow:false,
				
				tenantList:[],
				tenantList1:[],
				remoteReadingMeterList:[],
				
				list1: [{
					name: '格莱慧'
				}, {
					name: '楚之源'
				}, {
					name: '杜宝银',
					
				}, {
					name: '王玉清',
					
				}, {
					name: '荆州万乘',
					
				}],
				list2: [{
					name: '全部'
				}, {
					name: '一楼大厅'
				}, {
					name: '门房',
					
				}, {
					name: '八楼',
					
				}, {
					name: '九楼',
					
				}],
				current:0,
				current1: 0,
				current2: 0,
				role:false,
				codes:"",
					keyword:'',
			}
		},
		onReady() {
			this.codes =this.carhelp.getPersonInfo().codes;
			this.role=this.codes&&this.codes.indexOf('switch')!=-1;
			
			this.getTenantList()
		},
		methods: {
			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?'开启':'关闭'}"${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.formData.tenantId = this.tenantList1[index].id;
				 this.popShow = false;
				this.merchantChangeApi()
			},
			merchantChange(item, index) {
				// if(this.current==0){
				// 	this.current=1;
				// }
				this.formData.tenantId= item.id;
				
				
				 //this.$forceUpdate()
				
				this.getTenantListSort(this.tenantList)
				this.merchantChangeApi()
				this.popShow = false;
			},
			 
			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;
			},
			merchantChangeApi(){
				this.getTenantMeterList()
			},
			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;
	}
  // 标签
  .tabs-box{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 16rpx 32rpx 16rpx 0;
	  .tabs{
		  width: 96%;
	  }
	  /deep/.u-tabs{
		  background-color: inherit !important
	  }
  }
  .main{
	    padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
        background: inherit;
	  .switch{
		  width: 100%;
		  background-color: #fff;
		  border-radius: 12px;
		  padding: 24rpx 24rpx;
		 
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  margin-top: 24rpx;
	  }
	  .switch-name{
		  margin-right: 2px;
		  .name{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
			  font-weight: bold;
		  }
		  .place{
			  color: rgba(119,119,119,1);
			  font-size: 24rpx;
		  }
	  }
	  .switch-icon{
		  white-space: pre;
		  .img{
			  width: 64rpx;
			  height: 64rpx;
		  }
	  }
  }
  
  // 标签
  .tabs-box{
  	  display: flex;
  	  align-items: center;
  	  justify-content: space-between;
  	  padding: 16rpx 32rpx 16rpx 0;
  	  .tabs{
  		  width: 96%;
  	  }
  }
  .tabs-box{
  	background-color: #fff;
  	  display: flex;
  	  align-items: center;
  	  justify-content: space-between;
  	  padding: 16rpx 32rpx 16rpx 32rpx;
  	  .tabs1{
  		  width: 96%;
  	  }
  }
  
  
  .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{
  	background: #fff;
  	padding:24rpx;
  	position: fixed;
  	    left: 0;
  	    right: 0;
  	    top: 80rpx;
  	    z-index: 991;
  }
  .head-head-placeholder{
  	height: 112rpx;
  	
  }
</style>