jp-housekeep-manage/components/tree/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>
			   <template v-if="level==0&&showPark">
				   <view class="meter-state" v-if="node.online">
				   				在线
				   </view>
				   <view class="meter-state meter-state2" v-else>
				   				离线
				   </view>
			   </template>
			
			  <view class="meter-number" v-if="(node.level==0&&showPark)||node.level!=0" @click="toElectronicMonitoring(node)">
				{{node.kwh}}度
				<u-icon name="arrow-right" color="#fcfafa"  v-if="node.type==6" size="24"></u-icon>
				<u-icon name="arrow-right" v-else
				color="#d4d4d4" size="24"></u-icon>
				
			  </view>
		  </view>
		 <view class="sum2" v-if="node.level==0&& node.childMeterList && node.childMeterList.length > 0&&showPark" >
			<view class="title">
				一级表计电量
			</view>
			<view class="value" :style="node.childKwh<node.kwh*0.999?'color:red!important':''">
				{{node.childKwh}}度
					
			</view>
		 </view>
		<view class="tags" v-if="level!=0">
			<view class="tagsList">
				<view class="meter-state" v-if="node.online">
								在线
				</view>
				<view class="meter-state meter-state2" v-else>
								离线
				</view>
				<view class="meter-state"
				 :style="{
					 borderColor:colorList[node.type%7],
				 	background:colorList[node.type%7],
				 	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.type==6" class="meter-state"
				 :style="{
					  borderColor:colorList[node.manyType%7],
				 	background:colorList[node.manyType%7],
				 	color:'#fff',
				 }">
					{{node.manyTypeN}}
				</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"
      ></tree-node>
    </view>
  </view>
</template>
 
<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object,
	role:false,
	level:0,
	showPark:false,
	
  },
  data() {
    return {
      isOpen: false,
	   isInit: false,
	   colorList:['',"#52b8aa","#53b56b","#ef8132",
	   "#307af6","#52b8aa","#777777"],
	   
	  
	   
    };
  },
  mounted() {
	console.log("mountedmountedmounted")
	if(this.level==0){
		this.toggle()
	}
  },
  methods: {
	  switchBtn(node,key){
		  this.$emit('switchBtn',node,key)
	  },
	  toElectronicMonitoring(item) {
		  if(item.type!=6){
			  uni.navigateTo({
			  	url: '/pages/equipmentDataMonitoring/electronicMonitoring?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);
			}

			.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;
				}
				
			}
			
		}

		.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>