jp-housekeep-manage/pages/equipmentDataMonitoring/equipmentElectricity.vue

<template>
	<view>
		<view class="navbar-c">
			<view class="back" @click="backStatistics">
				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
			</view>
			<view class="title">
				用电量（度）
				<image class="img" src="@/assets/img/refresh-line.svg" @click="getList(true)"></image>
			</view>

		</view>
		<u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
			mode="time" :params="params" :noselect="false" @confirm="selector2confirm" @cancel="selector2cancel"
			@reset="selector2reset"></u-picker-select>
		<!-- 标签 -->
		<view class="tabs-box"  v-if="companyList.length>1" >
			<view class="tabs" :style="{width: companyList.length>4 ? '' : '100%'}">
				<u-tabs  v-if="utabsone"
				 :list="merchantList1" :is-scroll="false" inactive-color="#999999" active-color="#666666"
					:current="current" @change="change"></u-tabs>
			</view>
			<view class="icon" @click="popShow=true" v-if="companyList.length >= 4">
				<u-icon name="arrow-down" color="#999999"></u-icon>
			</view>
		</view>
		<!-- 标签弹出层 -->
		<u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
			<view class="popup-tabs">
				<view class="tabs">
					<u-tabs :list="merchantList1" :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 merchantList2" :key="index"
					@click="merchantChange(item,index)">
					{{item.name}}
				</view>
			</view>
		</u-popup>

		

		<!-- 全部标签 -->
		<view class="main"   v-show="current==0" >
			<view class="item" v-for="(item, index) in kWhList" :key="item.index" v-if="current==0"
			@click="toElectronicMonitoring(item)">
				<view class="item-content">
					<view class="equipment">
						<view class="equipment1 ">
							{{item.name}}
						</view>
						<view class="equipment2">
							{{item.installationAddressSimple}}
						</view>

						<view class="state" v-if="!item.online">
							<view class="dot off-line"></view>
							<view class="text">离线</view>
						</view>
						<view class="state state2" v-else>
							<view class="dot on-line"></view>
							<view class="text">在线</view>
						</view>
					</view>
					<view class="electricity">
						<view class="electricity-item electricity-item-day">
							<view class="date">
								今日
							</view>
							<view class="number">
								{{item.thisDayKwh}}
							</view>
						</view>
						<view class="electricity-item">
							<view class="date">
								本月
							</view>
							<view class="number">
								{{item.thisMonthKwh}}
							</view>
						</view>
						<view class="electricity-item">
							<view class="date">
								上月
							</view>
							<view class="number">
								{{item.lastMonthKwh}}
							</view>
						</view>
					</view>
				</view>
				<view class="more">
					<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
				</view>
			</view>
			
		</view>
		<u-divider v-show="current==0" :isnone="kWhList.length==0" nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
		
		<!-- 子项标签 -->

		<view class="statistics-manage" v-if="current!=0" >
			

			<!-- 图表 -->
			<view class="chart">
				<view class="u-subsection">
					<u-subsection :list="list"  :current="homePageManageType" @change="sectionChange" font-size="24"></u-subsection>
				</view>
				<view class="chat-box" id="barEcharts"  v-show="!companyType">
				
				</view>
			</view>

			<view class="search" v-if="0">
				<view class="switch">
					<u-switch v-model="checked" size="40"></u-switch><text>只看离线表</text>
				</view>
				<view class="search-box" >
					<input type="text" placeholder="请输入电表查询" />
					<view class="icon">
						<img src="@/assets/img/riLine-search-line 1.svg" alt="" />
					</view>
				</view>

			</view>
			
			<!-- 电表统计 -->
			<Tree-Body :meterList="meterList" ref="mytree"
			 @query="getHomePageManageChildMeter"
			 v-if="getHomePageManageReady"
			 :role="codes&&codes.indexOf('switch')!=-1"
			 @switchBtn="switchBtnApi"
			 ></Tree-Body>
			<!-- 电表统计 -->
			<view class="meter-statistic" v-if="false">
				<!-- 总计 -->
				<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"  >
							{{item.name}}
						</view>
						<view class="meter-state" v-if="item.online">
							在线
						</view>
						<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="sum2">
						<view class="title">
							{{item.name}}用电(未扣除)
						</view>
						<view class="value">
							{{item.childKwh}}度
			
						</view>
					</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="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>

		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import * as API2 from '@/apis/pagejs/energyManage.js'
	import * as echarts from 'echarts';
	import {
		parseUnixTime,
		beforeTimeStamp,
		getWeek
	} from '@/apis/utils'
	import TreeBody from '@/components/tree/tree-body.vue';
	
	
	export default {
		components: {
		  TreeBody
		},
		data() {
			return {
				codes:"",
				getHomePageManageReady:false,
				companyList: [], // 商户
				merchantList1: [],
				merchantList2: [],
				myLineChart: null, // 图表
				myBarChart: null,
				myPieChart: null,
				homePageManageType: 0,
				homePageManageObj: {
					childKwh: 0,
					differenceKwh: 0,
					parkKwh: 0
				},
				meterList: [],
				meterListShow:{},
				queryDate: '',
				kWhList: [], //设备
				companyId: '',
				popShow: false,
				current: 0,
				allKWhList: [],
				companyKwhList: [],
				pageIndex: 1,
				recordsTotal: 0,
				windowHeight: '',
				checked:false,
				list: [{
						name: '上月',
						value: "2"
					},
					{
						name: '当月',
						value: "1"
					},
					{
						name: '当日',
						value: "4"
					}, {
						name: '当年',

						value: "3"
					}, {
						name: '合计',

						value: "0"
					},
					{
						name: '指定月份',
						value: "10"
					}
				],
				endYear: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				value: '2',
				clickType: -1,
				tabsFrom: {
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					
				},
				utabsone:true,
				companyType:false,
			}
		},
		onReady() {
		
			this.endYear = new Date().getFullYear();
			this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
			

			this.getCompanyInfoList();
		},
		onLoad() {
			var getPersonInfoPlus=this.carhelp.getPersonInfoPlus()
			if(getPersonInfoPlus){
				this.companyType=getPersonInfoPlus.wuye
			}
			
		},
		onReachBottom() {
			if (this.kWhList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			switchBtnApiMethod(node,key){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API2.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)
			},
			refreshList() {
				if (this.current != 0) {
					this.getList(true);
				} else {
					this.getCompanyInfoList();
				}
			},
			companyChange(item, index) {
				this.current = index + 1;
				this.companyId = item.id;

				this.getList(true);
			},
			
			getCompanyInfoList() {
				this.companyKwhList = [];

				API.deviceCompanyList().then((response) => {
					var list = response.data.companyInfoList;
					this.companyList = list;

					var mList1 = [];
					var mList2 = [];
					mList1.push({
						id: '',
						name: '全部'
					});

					for (var i = 0; i < list.length; i++) {
						if (i >= 3) {
							mList2.push(list[i]);
						} else {
							mList1.push(list[i]);
						}

						
					}

					this.merchantList1 = mList1;
					this.merchantList2 = mList2;
					this.companyId = mList1[0].id;
					this.getList();

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getList();
			},
			getList(bl) {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.kWhList = [];
					this.pageIndex = 1;
				}
				var data = {
					pageIndex: this.pageIndex,
					pageSize: 20,
					companyId: this.companyId
				};
				API.homePageKwh(data).then((res) => {
					uni.hideLoading();
					this.kWhList = [
						...this.kWhList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			merchantChange(item, index) {
				if(this.current==0){
					this.current=1;
				}
				this.utabsone=false
				var m = item;
				var n = this.merchantList1[this.current];
				this.merchantList1[this.current] = m;
				this.merchantList2[index] = n;
				this.companyId = item.id;
				this.popShow = false;
				this.$nextTick(()=>{
					this.utabsone=true
				})
				//this.getList(true);
				this.merchantChangeApi()
				
			},
			
			
			// 设备数据监测
			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() {
				
				
				this.getHomePageManageReady=false
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API2.homePageManage({
					queryDate:this.queryDate,
					companyId: this.companyId,
					type: this.list[this.homePageManageType].value
				}).then((response) => {
					uni.hideLoading();
					 this.utabsone=true;
					this.getHomePageManageReady=true
					
					this.codes =this.carhelp.getPersonInfo().codes;
					
					this.meterList = response.data.meterList;
					// this.$nextTick(()=>{
					// 	this.$refs.mytree.toggle()
					// })
					
					this.homePageManageObj = response.data;
					if(!this.companyType){
						this.getBarCharts()
						
					}
				
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			sectionChange(index) {
				this.clickType = index;
				this.homePageManageType = index;
				if (index == 5) {
					this.tabsFrom.show2 = true;
					this.params.day = false;
				} else {
					this.list[5].name = '指定月份'
					this.getHomePageManage()
				}
				
				
			},
			recursionList(list){
				if(list){
					for(var i in list){
						var obj=list[i]
					
						this.meterListShow[obj.id]=false
						this.recursionList(obj.childMeterList)
					}
				}
			},
			ifBtnShow(item){
				return this.meterListShow[item.id]
			},
			showBtn(item){
				var key=this.meterListShow[item.id];
				
				this.$set(this.meterListShow,item.id,!key)
				console.log("showBtn,",key)
				this.getHomePageManageChildMeter(item);
				this.$forceUpdate()
			},
			selector2reset(e) {
				console.log(e)
				this.tabsFrom.show2Text = '全部时间'
				this.tabsFrom.show2Index = '';
			
				if (e.day) {
					this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
					
					this.getHomePageManage();
				} else {
				
					this.homePageManageType = this.clickType;
					if (this.homePageManageType != 5) {
						this.list[5].name = '指定月份';
					}
					this.getHomePageManage();
				}
			},
			selector2cancel() {
				if(this.clickType != -1) {
					this.homePageManageType = this.clickType;
				}
			},
			selector2confirm(e) {
				this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
			
				this.tabsFrom.show2Index = e.year + "-" + e.month
				if (e.day) {
					this.tabsFrom.show2Text += e.day + "日"
					this.tabsFrom.show2Index += '-' + e.day
			
					this.queryDateMethod(this.tabsFrom.show2Index, true)
				} else {
					this.queryDateMethod(this.tabsFrom.show2Index, false)
				}
			},
			queryDateMethod(queryTime, day) {
			
				if (day) {
					this.queryDate = queryTime;
					//this.FormData2.type =day?"9":"10"
					//this.value="-1"
			
				
					//this.getHomePageManage();
				} else {
			
					this.queryDate = queryTime + "-01";
					
					this.homePageManageType = "5";
					this.list[5].name = queryTime;
			
					this.getHomePageManage();
				}
			},
			getBarCharts() {
				if (!this.myBarChart) {
					this.myBarChart = echarts.init(document.getElementById('barEcharts'),null,{
						width:uni.upx2px(690),height:uni.upx2px(480)
					});
				}
				var thismax=Math.max(this.homePageManageObj.parkKwh,this.homePageManageObj.differenceKwh,this.homePageManageObj.childKwh) 
				
				var option = {
					  
					polar: {
						  center:['35%','50%'],
						radius:[20, '70%']
					},
					angleAxis: {
						max: parseInt(thismax+thismax/10)+3 ,
						startAngle: 75
					},
					 
					 legend: {
						 x:"65%",
						 y: '0',
						  
			
					    data: ['园区电量', '表计电量', '电损量'],
						orient :'vertical'
					  },
					radiusAxis: {
						type: 'category',
						data: ['']
					},
					tooltip: {},
					series: [
						{
							name:'园区电量',
							type: 'bar',
							data: [
								this.homePageManageObj.parkKwh,
							
							],
							coordinateSystem: 'polar',
							label: {
								show: true,
								position: 'middle',
								formatter: '{c}度'
							}
						},
						{
							name:'表计电量',
							type: 'bar',
							data: [
							
								this.homePageManageObj.childKwh
								
							],
							coordinateSystem: 'polar',
							label: {
								show: true,
								position: 'middle',
								formatter: '{c}度'
							}
						},
						{
							name:'电损量',
							type: 'bar',
							data: [
								
								this.homePageManageObj.differenceKwh
							],
							coordinateSystem: 'polar',
							label: {
								show: true,
								position: 'middle',
								formatter: '{c}度'
							}
						}
					]
				};
				console.log(option)
				this.myBarChart.setOption(option);
			},
			merchantChangeApi() {
			
				this.popShow=false
				  
				if (this.companyId) {
			
					this.getHomePageManage();
				}
			},
			change(index) {
				this.current = index;
				this.companyId = this.merchantList1[index].id;

				this.merchantChangeApi()
			},
			backStatistics() {
				uni.navigateBack()
			},
			toElectronicMonitoring(item) {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item
						.name +
						'&companyId=' + item.companyId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 100rpx;
	}

	.back {
		z-index: 999;
		width: 200rpx;
	}

	/deep/.u-drawer-content {
		margin-top: 88rpx;
	}

	// /deep/.u-tab-item {
	// 	width: 25% !important;
	// 	flex: none !important;
	// }

	.tabs-box {
		background-color: #fff;
		display: flex;
		align-items: center;
		
		padding-right: 32rpx;
		justify-content: space-between;
		border-bottom: 1px solid rgba(232, 232, 232, 1);

		.tabs {
			width: 88%;
		}

		.icon {
			margin-left: auto;
			margin-right: 24rpx;
		}
	}

	.popup-tabs {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		padding-top: 32rpx;

		.tabs {
			width: 88%;
		}
	}

	.tabs-options {
		display: flex;
		padding: 64rpx 32rpx 0;
		flex-wrap: wrap;

		.item {
			width: 25%;
			margin-bottom: 40rpx;
		}
	}

	// 用电量合计
	.total {
		padding: 24rpx 32rpx;
		background: linear-gradient(90deg, rgba(49, 110, 207, 1) 2%, rgba(37, 138, 255, 1) 100%);


		.company {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				color: rgba(255, 255, 255, 1);
				font-size: 36rpx;
				font-weight: bold;
			}

			.amount {
				color: #f2f4f6;
				margin-top: 4rpx;
			}
		}

		.infos {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 4rpx;
			width: 93%;

			.infos-item {

				display: flex;
				width: 33.3%;


				.number {
					color: rgba(255, 255, 255, 1);
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 8rpx;
				}

				.time {
					color: #f2f4f6;

				}
			}
		}

	}



	// 用电量
	.main {
		background-color: #fff;
		padding: 26rpx 32rpx;

		.item:last-of-type {
			border: none;
		}

		.item {
			padding: 16rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid rgba(245, 245, 245, 1);

			.item-content {
				width: 93%;
			}

			.equipment {

				display: flex;
				align-items: center;


				.equipment1 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					max-width: 40%;
					font-weight: bold;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.equipment2 {
					color: rgba(119, 119, 119, 1);
					margin-left: 16rpx;
					max-width: 40%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;






				}
			}

			// 状态
			.state {


				display: flex;
				align-items: center;
				color: rgba(255, 123, 0, 1);
				margin-left: auto;

				.dot {
					margin-right: 8rpx;

					width: 16rpx;
					height: 16rpx;
					background-color: rgba(255, 123, 0, 1);
					border-radius: 999px;
					margin-left: auto;

				}

				.off-line {

					background-color: rgba(255, 123, 0, 1);

				}

				.on-line {
					background-color: rgba(0, 185, 98, 1);
				}
			}

			.state2 {
				color: rgba(0, 185, 98, 1);
			}

			.electricity {
				display: flex;
				justify-content: space-between;
				align-items: center;

				margin-top: 8rpx;
				text-align: center;

				.electricity-item {
					display: flex;
					align-items: center;
					width: 33.3%;

					.number {
						color: rgba(51, 51, 51, 1);

						font-weight: bold;
						font-size: 32rpx;
						margin-left: 8rpx;
					}

					.date {
						color: rgba(119, 119, 119, 1);


					}
				}

			}
		}

	}

	.statistics-manage {
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
		margin: 32rpx;
		padding: 40rpx 0;

		

		.title,
		.chart,
		.search,
		.meter-statistic {
			padding: 0 32rpx;
		}

		// 图表
		.chart {
			

			/deep/.u-subsection {
				padding: 2px;
			}

			/deep/.u-item {
				padding: 0;
				font-size: 24rpx
			}

			.chat-box {
				margin-top: 24rpx;
				width: 100%;
				height: 480rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.search {
			border-top: 1px solid rgba(242, 242, 242, 1);
			border-bottom: 1px solid rgba(242, 242, 242, 1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 32rpx;

			.switch {
				display: flex;
				align-items: center;

				text {
					margin-left: 8rpx;
					color: rgba(51, 51, 51, 1);
				}
			}

			.search-box {
				border-radius: 50px;
				background-color: rgba(242, 244, 246, 1);
				color: rgba(136, 136, 136, 1);
				height: 56rpx;
				line-height: 56rpx;
				padding-left: 16rpx;
				padding-right: 8rpx;
				flex: 1;
				margin-left: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				uni-input {
					height: 56rpx;
					line-height: 56rpx !important;
					font-size: 28rpx;
					width: 75%;
				}

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 64rpx;
					height: 40rpx;
					border-radius: 50px;
					background-color: rgba(22, 119, 255, 1);
				}
			}
		}

	}

	.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;
				border: 1px solid rgba(0, 185, 98, 1);
			}

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

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