优化树形图

components/tree/tree-body.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="meter-statistic"  >
+    <tree-node  v-for="(item,i) in meterList"
+	  :ref="'tree-node'+i"
+	   @query="query"
+	 :key="i" :node="item" ></tree-node>
+  </view>
+</template>
+ 
+<script>
+import TreeNode from './tree-node.vue';
+ 
+export default {
+  components: {
+    TreeNode
+  },
+  props: {
+  	meterList:{
+			type: Array,
+			default() {
+				return [];
+			}
+	},
+  	elderStatus: false
+  },
+  methods:{
+	  toggle(){
+		  // for(var i in this.meterList){
+			 // this.$nextTick(()=>{
+				//  this.$refs['tree-node'+i].toggle()
+				 
+			 // })
+			  
+		  // }
+		 
+		  
+	  },
+	  query(item){
+	  		   this.$emit('query',item)
+	  },
+  },
+  data() {
+    return {
+      treeData: {
+        name: 'Root',
+        children: [
+          {
+            name: 'Child 1',
+            children: [
+              { name: 'Grandchild 1.1' },
+              { name: 'Grandchild 1.2' }
+            ]
+          },
+          {
+            name: 'Child 2',
+            children: [
+              { name: 'Grandchild 2.1' },
+              { name: 'Grandchild 2.2' }
+            ]
+          }
+        ]
+      }
+    };
+  }
+};
+</script>

components/tree/tree-node.vue

@@ -0,0 +1,198 @@
+<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>

pages/equipmentDataMonitoring/equipmentElectricity.vue

@@ -127,138 +127,127 @@
 				</view>
 
 			</view>
+			
+			<!-- 电表统计 -->
+			<Tree-Body :meterList="meterList" ref="mytree"
+			 @query="getHomePageManageChildMeter"
+			 ></Tree-Body>
 			<!-- 电表统计 -->
-			<view class="meter-statistic">
+			<view class="meter-statistic" v-if="false">
 				<!-- 总计 -->
-				<view class="sum">
-					<view class="icon">
-						<u-icon name="arrow-up" color="#d4d4d4" size="24"></u-icon>
-					</view>
-					<view class="meter-name">
-						荆鹏软件园总表
-					</view>
-					<view class="meter-state">
-						在线
-					</view>
-					<view class="meter-number">
-						5610.39度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
-					</view>
-				</view>
-				<view class="sum2">
-					<view class="title">
-						一级表合计用电(未扣除)
-					</view>
-					<view class="value">
-						5608.39度
-
-					</view>
-				</view>
-				<!-- 一级表 -->
-				<view class="sum first-level">
-					<view class="icon">
-						<u-icon name="arrow-up" color="#d4d4d4" size="24"></u-icon>
-					</view>
-					<view class="icon">
-						<img src="@/assets/img/switchIcon.png" alt="" />
-					</view>
-					<view class="meter-name">
-						一级表a
-					</view>
-					<view class="meter-state">
-						在线
-					</view>
-					<view class="meter-number">
-						2805.39度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
-					</view>
-				</view>
-				<!-- 二级表 -->
-				<view class="sum second-level">
-					<view class="icon">
-						<u-icon name="arrow-up" color="#d4d4d4" size="24"></u-icon>
-					</view>
-					<view class="icon">
-						<img src="@/assets/img/switchIcon.png" alt="" />
-					</view>
-					<view class="meter-name">
-						二级表a
-					</view>
-					<view class="meter-state">
-						在线
-					</view>
-					<view class="meter-number">
-						2805.39度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
-					</view>
-				</view>
-				<!-- 开关 -->
-				<view class="else-switch">
-					<view class="sum item">
-
-						<view class="icon">
-							<img src="@/assets/img/switchIcon.png" alt="" />
+				<view v-for="(item,i) in meterList" :key="i">
+					<view class="sum meter-statistic-main">
+						<view class="icon" @click="showBtn(item)" v-if="item.childMeterList&&item.childMeterList.length" >
+							<u-icon name="arrow-up" color="#d4d4d4" v-show="ifBtnShow(item)" size="24"></u-icon>
+							<u-icon name="arrow-down" color="#d4d4d4"  v-show="!ifBtnShow(item)" size="24"></u-icon>
+							
 						</view>
-						<view class="meter-name">
-							空调开关
+						
+						<view class="meter-name"  >
+							{{item.name}}
 						</view>
-						<view class="meter-state">
+						<view class="meter-state" v-if="item.online">
 							在线
 						</view>
-						<view class="meter-number">
-							2805.39度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
+						<view class="meter-state meter-state2" v-else>
+							离线
+						</view>
+						<view class="meter-number" @click="toElectronicMonitoring(item)">
+							{{item.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
 						</view>
 					</view>
-
-					<view class="sum item">
-
-						<view class="icon">
-							<img src="@/assets/img/switchIcon.png" alt="" />
+					<view class="sum2">
+						<view class="title">
+							{{item.name}}用电(未扣除)
 						</view>
-						<view class="meter-name">
-							灯控开关
+						<view class="value">
+							{{item.childKwh}}度
+			
 						</view>
-						<view class="meter-state">
-							在线
+					</view>
+					
+					<!-- 一级表 -->
+					<view class="sum first-level" v-if="item.childMeterList&&item.childMeterList.length"
+					v-show="ifBtnShow(item)"  v-for="(item2,j) in item.childMeterList" :key="j" >
+						<view  class="first-level-list">
+							<view class="icon" @click="showBtn(item2)" v-if="item2.childMeterList&&item2.childMeterList.length" >
+								<u-icon name="arrow-up" color="#d4d4d4" v-show="ifBtnShow(item2)" size="24"></u-icon>
+								<u-icon name="arrow-down" color="#d4d4d4"  v-show="!ifBtnShow(item2)" size="24"></u-icon>
+								
+							</view>
+							<view class="icon">
+								<img src="@/assets/img/switchIcon.png" alt="" />
+							</view>
+							<view class="meter-name" >
+								{{item2.name}}
+							</view>
+							<view class="meter-state" v-if="item2.online">
+								在线
+							</view>
+							<view class="meter-state meter-state2" v-else>
+								离线
+							</view>
+							<view class="meter-number" @click="toElectronicMonitoring(item2)" >
+								{{item2.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
+							</view>
 						</view>
-						<view class="meter-number">
-							2805.39度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
+						<!-- 二级表 -->
+						<view class="sum second-level"  v-if="item2.childMeterList&&item2.childMeterList.length"
+						 v-show="ifBtnShow(item2)" v-for="(item3,k) in item2.childMeterList" :key="k"
+						 >
+							<view   class="first-level-list">
+								<view class="icon" @click="showBtn(item3)" v-if="item3.childMeterList&&item3.childMeterList.length" >
+									<u-icon name="arrow-up" color="#d4d4d4" v-show="ifBtnShow(item3)" size="24"></u-icon>
+									<u-icon name="arrow-down" color="#d4d4d4"  v-show="!ifBtnShow(item3)" size="24"></u-icon>
+									
+								</view>
+								<view class="icon">
+									<img src="@/assets/img/switchIcon.png" alt="" />
+								</view>
+								<view class="meter-name">
+									{{item3.name}}
+								</view>
+								<view class="meter-state" v-if="item3.online">
+									在线
+								</view>
+								<view class=" meter-state meter-state2" v-else>
+									离线
+								</view>
+								<view class="meter-number" @click="toElectronicMonitoring(item3)">
+									{{item3.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
+								</view>
+							</view>
+							<!-- 开关 -->
+							<view class="else-switch  " v-if="item3.childMeterList&&item3.childMeterList.length"
+						 v-show="ifBtnShow(item3)" v-for="(item4,h) in item3.childMeterList" :key="h" >
+								<view class="sum item first-level-list">
+							
+									<view class="icon">
+										<img src="@/assets/img/switchIcon.png" alt="" />
+										<!-- switchClose -->
+									</view>
+									<view class="meter-name">
+										{{item4.name}}
+									</view>
+									<view class="meter-state" v-if="item4.online">
+										在线
+									</view>
+									<view class=" meter-state meter-state2" v-else>
+										离线
+									</view>
+									<view class="meter-number" @click="toElectronicMonitoring(item4)" >
+										{{item4.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
+									</view>
+								</view>
+							
+								
+							</view>
 						</view>
 					</view>
+					
 				</view>
-
-				<view class="sum second-level">
-					<view class="icon">
-						<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
-					</view>
-					<view class="icon">
-						<img src="@/assets/img/switchIcon.png" alt="" />
-					</view>
-					<view class="meter-name">
-						二级表a
-					</view>
-					<view class="meter-state meter-state2">
-						离线
-					</view>
-					<view class="meter-number">
-						2805.39度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
-					</view>
-				</view>
-
-				<view class="sum first-level">
-					<view class="icon">
-						<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
-					</view>
-					<view class="icon">
-						<img src="@/assets/img/switchIcon.png" alt="" />
-					</view>
-					<view class="meter-name">
-						一级表a
-					</view>
-					<view class="meter-state">
-						在线
-					</view>
-					<view class="meter-number">
-						2805.39度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
-					</view>
-				</view>
+				
+				
 			</view>
 
 		</view>
@@ -275,9 +264,13 @@
 		beforeTimeStamp,
 		getWeek
 	} from '@/apis/utils'
+	import TreeBody from '@/components/tree/tree-body.vue';
 	
 	
 	export default {
+		components: {
+		  TreeBody
+		},
 		data() {
 			return {
 				companyList: [], // 商户
@@ -353,12 +346,7 @@
 			}
 		},
 		onReady() {
-			uni.getSystemInfo({
-				success: function(res) {
-					this.windowHeight = res.windowHeight
-					// console.log(this.windowHeight)
-				}
-			});
+		
 			this.endYear = new Date().getFullYear();
 			this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
 			
@@ -466,6 +454,49 @@
 				
 			},
 			// 设备数据监测
+			getHomePageManageChildMeter(item,bl) {
+				if(!bl){
+					uni.showLoading({
+						title: "加载中",
+						mask: true,
+					})
+				}
+				
+				API2.homePageManageChildMeter({
+					parentMeterId:item.id,
+					queryDate:this.queryDate,
+					companyId: this.companyId,
+					type: this.list[this.homePageManageType].value
+				}).then((response) => {
+					if(!bl){
+						uni.hideLoading();
+					}
+					// this.meterList = response.data.meterList;
+					// if(!this.meterListShow.id){
+					// 	this.meterListShow.id=1
+					// 	this.recursionList(this.meterList)
+					// }
+					
+					var childMeterList=response.data.childMeterList
+					item.childMeterList=childMeterList
+					 
+					
+					if(!bl){
+						for(var i in childMeterList){
+							var obj=childMeterList[i]
+							this.getHomePageManageChildMeter(obj,true)
+						}
+					}
+					
+					
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+			// 设备数据监测
 			getHomePageManage() {
 				
 				uni.showLoading({
@@ -479,10 +510,9 @@
 				}).then((response) => {
 					uni.hideLoading();
 					this.meterList = response.data.meterList;
-					if(!this.meterListShow.id){
-						this.meterListShow.id=1
-						this.recursionList(this.meterList)
-					}
+					// this.$nextTick(()=>{
+					// 	this.$refs.mytree.toggle()
+					// })
 					
 					this.homePageManageObj = response.data;
 					this.getBarCharts()
@@ -525,7 +555,7 @@
 				
 				this.$set(this.meterListShow,item.id,!key)
 				console.log("showBtn,",key)
-				
+				this.getHomePageManageChildMeter(item);
 				this.$forceUpdate()
 			},
 			selector2reset(e) {
@@ -1027,11 +1057,12 @@
 
 	.meter-statistic {
 		margin-top: 32rpx;
-
-		.sum {
+		.meter-statistic-main{
 			display: flex;
 			align-items: center;
-
+		}
+		.sum {
+			
 			.meter-name {
 				color: rgba(51, 51, 51, 1);
 				font-size: 32rpx;
@@ -1094,6 +1125,11 @@
 			}
 		}
 
+		.first-level-list{
+			width: 100%;
+			display: flex;
+			align-items: center;
+		}
 		// 一级表
 		.first-level {
 			padding-left: 32rpx;

pages/statistics/statistics.vue

@@ -122,9 +122,14 @@
 						</view>
 					</view>
 
-				</view>
-				<!-- 电表统计 -->
-				<view class="meter-statistic">
+				</view>
+				
+				<!-- 电表统计 -->
+				<Tree-Body :meterList="meterList" ref="mytree"
+				 @query="getHomePageManageChildMeter"
+				 ></Tree-Body>
+				 
+				<view class="meter-statistic" v-if="false">
 					<!-- 总计 -->
 					<view v-for="(item,i) in meterList" :key="i">
 						<view class="sum meter-statistic-main">
@@ -239,11 +244,6 @@
 					</view>
 					
 					
-					
-
-					
-
-					
 				</view>
 
 			</view>
@@ -452,10 +452,11 @@
 	import * as echarts from 'echarts';
 	import * as API_index from '@/apis/pagejs/index.js'
 	import * as API from '@/apis/pagejs/energyManage.js'
+	import TreeBody from '@/components/tree/tree-body.vue';
 
 	export default {
 		components: {
-			energyCenterTabbar
+			energyCenterTabbar,TreeBody
 		},
 		data() {
 			return {
@@ -568,6 +569,49 @@
 			console.log("组件销毁前清除定时器")
 		},
 		methods: {
+			// 设备数据监测
+			getHomePageManageChildMeter(item,bl) {
+				if(!bl){
+					uni.showLoading({
+						title: "加载中",
+						mask: true,
+					})
+				}
+				
+				API.homePageManageChildMeter({
+					parentMeterId:item.id,
+					queryDate:this.queryDate,
+					companyId: this.companyId,
+					type: this.list[this.homePageManageType].value
+				}).then((response) => {
+					if(!bl){
+						uni.hideLoading();
+					}
+					// this.meterList = response.data.meterList;
+					// if(!this.meterListShow.id){
+					// 	this.meterListShow.id=1
+					// 	this.recursionList(this.meterList)
+					// }
+					
+					var childMeterList=response.data.childMeterList
+					item.childMeterList=childMeterList
+					 
+					
+					if(!bl){
+						for(var i in childMeterList){
+							var obj=childMeterList[i]
+							this.getHomePageManageChildMeter(obj,true)
+						}
+					}
+					
+					
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
 			recursionList(list){
 				if(list){
 					for(var i in list){
@@ -745,10 +789,7 @@
 				}).then((response) => {
 					uni.hideLoading();
 					this.meterList = response.data.meterList;
-					if(!this.meterListShow.id){
-						this.meterListShow.id=1
-						this.recursionList(this.meterList)
-					}
+					
 					
 					this.homePageManageObj = response.data;
 					this.getBarCharts()