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

<template>
  <view class="tree-node ">
	  <view class=" sum meter-statistic-main" >
		  <view class="icon" @click="toggle" v-if="node.childMeterList&&node.childMeterList.length" >
		    	<u-icon name="arrow-up" color="#333333" v-show="isOpen" size="24"></u-icon>
		    	<u-icon name="arrow-down" color="#333333"  v-show="!isOpen" size="24"></u-icon>
		    	
		    </view>
		    <view class="icon" v-if="node.level!=0" >
		    	<img src="@/assets/img/switchIcon.png" alt="" />
		    </view>
		  <view class="meter-name"  >{{ node.name }}</view>
		  <view class="meter-state" v-if="node.online">
		  	在线
		  </view>
		  <view class="meter-state meter-state2" v-else>
		  	离线
		  </view>
		  <view class="meter-number" @click="toElectronicMonitoring(node)">
		  	{{node.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
		  </view>
	  </view>
	 <view class="sum2" v-if="node.level==0" >
	 	<view class="title">
	 		一级表合计用电(未扣除)
	 	</view>
	 	<view class="value">
	 		{{node.childKwh}}度
	 			
	 	</view>
	 </view>
	
    <view class="sum first-level"  v-if="isOpen && node.childMeterList && node.childMeterList.length > 0">
      <tree-node @query="query"
        v-for="(child, index) in node.childMeterList"
        :key="index"
        :node="child"
      ></tree-node>
    </view>
  </view>
</template>
 
<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object,
	
  },
  data() {
    return {
      isOpen: false,
	   isInit: false
    };
  },
  mounted() {
	console.log("mountedmountedmounted")
	if(this.node.level==0){
		this.toggle()
	}
  },
  methods: {
	  toElectronicMonitoring(item) {
	  	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 {
		margin-top: 32rpx;
		.meter-statistic-main{
			display: flex;
			align-items: center;
		}
		.sum {
			
			.meter-name {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				margin-left: 8rpx;
				font-weight: bold;
			}

			.icon {
				margin-right: 8rpx;

				img {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}

			.meter-state {
				margin-left: 8rpx;
				width: 64rpx;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 4px;
				background-color: rgba(255, 255, 255, 1);
				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;
			}

			.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-left: 8rpx;
				}
			}
		}

		.sum2 {
			padding: 0 32rpx;
			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: 28rpx
			}
		}

		// 二级表
		.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;
			}
		}
	}
</style>