jp-housekeep-manage/components/treeWater/tree-node.vue

<template>
  <view class="tree-node ">
	  <view class=" sum " :class="{
		  node0:level==0
	  }" >
		   <view class="  meter-statistic-main"  >
			  <view class="icon" @click="toggle" v-if="node.childMeterList&&node.childMeterList.length" >
					<u-icon name="arrow-up" color="rgb(164 156 156)" v-show="isOpen" size="24"></u-icon>
					<u-icon name="arrow-down" color="rgb(164 156 156)"  v-show="!isOpen" size="24"></u-icon>
					
				</view>
				<view class="icon"  v-else >
					<u-icon name="arrow-rightward" v-if="level!=0" color="#fcfafa" size="24"></u-icon>
				  
				 </view>
				
			  <view class="meter-name"  :style="level==0||level==1?'font-weight: bold;':''"
			   
			   @click="toggle" >{{replaceLastTwoWords( node.name )}}</view>
			 
			
			  <view class="meter-number" v-if="(node.level==0&&showPark)||node.level!=0"
			 
			   @click="toElectronicMonitoring(node)">
				{{node.consumption}} m³
				
				<u-icon name="arrow-right" 
				color="#d4d4d4" size="24"></u-icon>
				
			  </view>
		  </view>
		  <view class="sum3" v-if="level==0">
			  <template v-if="1" >
					<view class="meter-state" v-if="node.online">
											在线
					 </view>
					
			  </template>
			  <view class="meter-state  supplyType1" v-if="rootnode.supplyType=='1'">
			  			转供水
			   </view>
			   <view class="meter-state  supplyType2" v-if="rootnode.supplyType=='2'">
			   			直供水
			    </view>
			 
		  </view>
		 
		 
		<view class="tags" v-if="level!=0">
			<view class="tagsList">
				<template  v-if="1" >
					<view class="meter-state" v-if="node.online">
									在线
					</view>
					
				</template>
				
				<view class="meter-state " v-if="node.paymentMode"
				 :class="'paymentMode'+node.paymentMode" >{{node.paymentMode==1?'代缴费':''}}{{node.paymentMode==2?'自缴费':''}}</view>
				
				<view class="meter-state"
				 :style="{
					 borderColor:colorList[node.type%colorList.length],
				 	background:colorList[node.type%colorList.length],
				 	color:'#fff',
				 }"
				 
				 >
					{{node.typeN}}
				</view>
				<view class="icon icon2"  :class="{
					icon6:node.type==6,
					iconSwitch1:node.switchStatus,
					iconSwitch0:!node.switchStatus,
				}" v-if="level!=0&&role&&node.type!=6&&node.allowSwitch" >
					
						<img src="@/assets/img/switchIcon.png"
						 @click="switchBtn(node,0)"
						 v-if="node.switchStatus" alt="" />
						<img src="@/assets/img/switchClose.png" 
						 @click="switchBtn(node,1)"
						v-else alt="" />
				
					
					
				</view>
				
				<view v-if="node.tag" class="meter-state" v-for="(item ,i)	in  getTags(node.tag)"
				 :key="i"
				 :style="{
					  borderColor:item.color,
				 	background:item.color,
				 	color:'#fff',
				 }">
					{{item.name}}
				</view>
			</view>
			<view class="operationList">
				
<!-- 				<u-switch size="32" @change="switchBtn(node,$event)"   v-model="node.switchStatus" inactive-color="#ff9900" ></u-switch >-->
			</view>
		</view>
		 
	 </view>
	
    <view class="sum first-level" :class="{
		  'first-level-node0':level==0
	  }"
	 
	 v-if="isOpen && node.childMeterList && node.childMeterList.length > 0">
      <tree-node @query="query" :role="role"
        v-for="(child, index) in node.childMeterList"
        :key="index" @switchBtn="switchBtn" :level="level+1"
        :node="child" :rootnode="rootnode" :childInfo="childInfo"
      ></tree-node>
    </view>
  </view>
</template>
 
<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object,
	role:false,
	level:0,
	showPark:false,
	 rootnode: Object, //根节点
	  childInfo: Object, //公司属性
	
  },
  data() {
    return {
      isOpen: false,
	   isInit: false,
	   colorList:['#9C27B0',"#52b8aa","#53b56b","#ef8132",
	   "#307af6","#52b8aa","#777777",'#f44336','#e91e63','#009688','#607d8b','#795548'],
	   
	  
	   
    };
  },
  mounted() {
	//console.log("mountedmountedmounted")
	if(this.level==0){
		this.toggle()
	}
  },
  methods: {
	  getTags(tag){
		  if(!tag){
			  return []
		  }
		  var sz=[]
		  var str1=tag.split(',')
		  for(var i in str1){
			  if(str1[i].indexOf('#')>-1){
				  var str2=str1[i].split('#');
				  console.log(str2[1],typeof(str2[1]))
				   var num =parseInt(str2[1])
				  if(!isNaN(num)){
					  
					 sz.push({
					 				  name:str2[0],
					 				  color:this.colorList[num%this.colorList.length]
					 }) 
				  }else{
					 sz.push({
					 				  name:str2[0],
					 				  color:'#'+str2[1]
					 }) 
				  }
				  
			  }
			 
		  }
		  return sz
	  },
	  switchBtn(node,key){
		  this.$emit('switchBtn',node,key)
	  },
	  toElectronicMonitoring(item) {
		  if(item.type!=6){
			 
		  }
		  uni.navigateTo({
		  	url: '/pages/equipmentDataMonitoring/electronicMonitoringWater?id=' + item.id + '&name=' + item
		  		.name +
		  		'&companyId=' + item.companyId
		  })
	  
	  },
	  query(item){
		   this.$emit('query',item)
	  },
    toggle() {
      this.isOpen = !this.isOpen;
	  if(!this.isInit){
		  this.isInit=true;
		  this.$emit('query',this.node)
		  
	  }
    }
  }
};
</script>
 
<style  lang="scss" scoped>
.tree-node {
  margin-top: 24rpx;
 ;
}
.meter-statistic-node {
		//margin-top: 32rpx;
		//padding-top: 12rpx;
		padding-bottom: 20px;
		 background-color: #fcfafa;
		.meter-statistic-main{
			display: flex;
			align-items: center;
		}
		.sum {
			
			.meter-name {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				
				
			}

			.icon {
				margin-right: 16rpx;
				
				
				img {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}
			}
			.icon2 {
				   
				padding: 2rpx 20rpx;
				margin-right: 8rpx;
				border-radius: 8rpx;
				    display: flex;
				    align-items: center;
				
				
			}
			.iconSwitch1{
				background: #307af7;
				border: 1px solid #307af7;
			}
			.iconSwitch0{
				background: #e1e6ee;
					border: 1px solid #bfc4cd;
			}
			.icon6{
				//width: 40rpx;
			}
			.meter-state {
				margin:0 8rpx;
				//width: 64rpx;
				min-height: 40rpx;
				//line-height: 36rpx;
				//border-radius: 8rpx;
				border-radius: 4px; 
				background-color: #fcfafa;;
				color: rgba(0, 185, 98, 1);
				font-size: 22rpx;
				text-align: center;
				padding: 0 8rpx;
				border: 1px solid rgba(0, 185, 98, 1);
				white-space: pre;
				display: flex;
				align-items: center;
			}

			.meter-state2 {
				border: 1px solid rgba(255, 123, 0, 1);
				color: rgba(255, 123, 0, 1);
			}
			.paymentMode1{
				color: rgba(255,255,255,1);
				background-color:  rgba(22,119,255,1);
				border: 1px solid  rgba(22,119,255,1);
			}
			.paymentMode2{
				color: rgba(255,255,255,1);
				background-color: rgba(129,97,255,1);
				border: 1px solid rgba(129,97,255,1);
			}
			.supplyType1{
				border: 1px solid rgba(255, 123, 0, 1);
				color: rgba(255, 123, 0, 1);
			}
			.supplyType2{
				
			}
			.meter-number {
				margin-left: auto;
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				    white-space: pre;
				/deep/.u-icon--right {
					margin:0 8rpx;
				}
			}
			.tags{
				display: flex;
				padding: 0rpx 32rpx;
				margin-top: 8rpx;
				justify-content: space-between;
				.tagsList{
					display: flex;
					    flex-wrap: wrap;
						.meter-state{
							margin-bottom: 4rpx;
						}
				}
				.operationList{
					display: flex;
				}
				
			}
			
		}
		
		.sum3 {
			padding: 0 40rpx;
			margin-top: 8rpx;
			display: flex;
			align-items: center;
		
		
			.title {
				color: rgba(119, 119, 119, 1);
			}
		
			.value {
				color: rgba(119, 119, 119, 1);
			}
		}
		
		.sum2 {
			padding: 0 40rpx;
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				color: rgba(119, 119, 119, 1);
			}

			.value {
				color: rgba(119, 119, 119, 1);
			}
		}

		.first-level-list{
			width: 100%;
			display: flex;
			align-items: center;
		}
		// 一级表
		.first-level {
			padding-left: 32rpx;
			margin-top: 20rpx;

			.meter-name {
				font-size: 32rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		// 二级表
		.second-level {
			padding-left: 64rpx;
			margin-top: 20rpx;

			.meter-name {
				font-size: 24rpx;
				  
			}
		}

		.else-switch {
			padding-left: 144rpx;

			.meter-name {
				font-size: 24rpx
			}

			.item {
				margin-top: 24rpx;
			}
		}
		
		.node0{
			padding:24rpx;
			
			background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(93,160,255,1) 100%);
			.meter-name,.meter-number,/deep/.u-iconfont,.title,.value{
				color:#fff !important;
			}
			
			
		}
		.first-level-node0{
			padding-left: 16rpx;
		}
	}
	
</style>