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-select title="" v-model="tabsFrom.show1" :defaultValue="[current2]"
		 :list="childList" value-name="id" label-name="name"
			@confirm="selector1confirm"  >
		</u-select>
		
		<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" >
			
			<view class="tabs" :class="'tabs-len-'+merchantList1.length"  v-show="companyList.length>1"
			 :style="{width: companyList.length>3 ? '' : '100%'}">
				<u-tabs-one  v-if="utabsone"
				:list="merchantList1" :is-scroll="false" inactive-color="#999999" active-color="#666666"
				 :current="current" @change="change"></u-tabs-one>
			</view>
			<view class="more" @click="popShow=true" v-if="companyList.length >= 4">
				<u-icon name="arrow-down" color="#fff" size="40"></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="electronicMonitoring-title"
		 @click="titleCk"
		 v-if="childList&&childList.length>0" >
			<view>
				{{childListName}}
			</view>
			<view v-show="childList.length>1">
				<u-icon name="arrow-down" color="#fff"></u-icon>
			</view>
		</view>

		<!-- 全部标签 -->
		<view class="main"    >
			
			
			
			<view class="item" v-for="(item, index) in kWhList" :key="item.index" 
			@click="toElectronicMonitoring(item)">
				<view class="item-content">
					<view class="equipment">
						<view class="equipment1 ">
							{{replaceLastTwoWords(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  :isnone="kWhList.length==0" nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
		
		
	</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';
	
	import electronicMonitoring from '@/pages/equipmentDataMonitoring/electronicMonitoring.vue'
	
	
	export default {
		components: {
		  TreeBody,electronicMonitoring
		},
		data() {
			return {
				codes:"",
				getHomePageManageReady:false,
				getHomePageManageshowLoading:false,
				companyList: [], // 商户
				merchantList1: [],
				merchantList2: [],
				myLineChart: null, // 图表
				myBarChart: null,
				myPieChart: null,
				homePageManageType: 2,
				homePageManageObj: {
					chargeKwh: 0,
					lostKwh: 0,
					parkKwh: 0,
					freeKwh:0,
					publicKwh: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:0,
				incomeExpenditureObj:{},
				opCompanyId: '',
				childList:[],
				companyListMain:[],
				current2:0,
				childInfo:{},
				companyInfo:{}
			}
		},
		onReady() {
		
			
			
		},
		computed:{
			childListName(){
				return this.childInfo.name;
			},
			companyType(){
				return this.companyInfo.type;
			}
		},
		onLoad(op) {
			this.endYear = new Date().getFullYear();
			this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
			
			
			if(op.companyId){
				this.opCompanyId=op.companyId
				this.companyId=op.companyId
				
			} 
			else{
				this.getCompanyInfoList();
			}
			this.getList();
			
		},
		onReachBottom() {
			if (this.kWhList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
	
		methods: {
			titleCk() {
				if(this.childList.length>1){
					this.tabsFrom.show1 = true
				}
				
			},
			selector1confirm(e) {
				//this.getHomePageKwh()
				
				console.log(e)
				this.companyId=e[0].value
			
				this.current2=e[0].i
				
				this.childInfo=this.childList[this.current2];
				uni.showLoading()
				
				this.merchantChangeApi()
			},
			companyIdSet(val,item){
				
				this.companyType= 0
				if(val&&item){
					this.companyType= item.type
				}else{
					if(!val){
						
					}else{
						var bl=false
						this.companyList.find(item=>{
							
							if(item.id==val){
							
								this.companyType= item.type;
							}
						})
						
					}
				}
				
			},
			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?'开启':'关闭'}"${this.replaceLastTwoWords(node.name)}`,
					title: "提示",
					success:res=> {
						if(res.confirm){
							this.switchBtnApiMethod(node,key);
						}
					}
				})
				console.log(node,key)
			},
			refreshList() {
				// if (this.current != 0) {
					
				// } else {
				// 	this.getCompanyInfoList();
				// }
				this.getList(true);
			},
			companyChange(item, index) {
				this.current = index + 1;
				this.companyId = item.id;
				//this.companyIdSet(this.companyId)
				this.getList(true);
			},
			
			getCompanyInfoList() {
				this.companyKwhList = [];

				API.deviceCompanyList().then((response) => {
					var list = response.data.companyInfoList;
					this.companyListMain=response.data.companyInfoList;
					if(list.length==1&&list[0].childList&&list[0].childList.length){
						list=list[0].childList
						
					}
					
					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.companyIdSet(this.companyId)
					//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"
					})
				})
			},
			getHomePageKwh(companyId) {
				
				
			},
			merchantChange(item, index) {
				if(this.current==0){
					this.current=1;
				}
				var m = company;
				var n = this.merchantList1[this.current];
				this.merchantList1[this.current] = m;
				this.merchantList2[index] = n;
				//this.$forceUpdate()
				this.utabsone=false
				this.companyId = company.id;
				
				this.companyInfo=company
				
				
				if(company.id!=''){
					this.childList=company.childList;
					if(this.childList&&this.childList.length){
						this.companyId = this.childList[0].id;
						this.childInfo=this.childList[0]
					}else{
						this.childList=[]
						this.companyId =company.id
						this.childInfo=company
					}	
				}else{
					this.companyId =''	
				}
				
				this.merchantChangeApi()
				this.popShow = false;
				
			},
			
			
			// 设备数据监测
			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"
					})
				})
			},
			getIncomeExpenditure(){
				
				API2.incomeExpenditure({
					//parentMeterId:item.id,
					queryDate:this.queryDate,
					companyId: this.companyId,
					type: this.list[this.homePageManageType].value
				}).then((response) => {
					
					this.incomeExpenditureObj=response.data
					this.incomeExpenditureObj.id=1
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 设备数据监测
			
			// 设备数据监测
			getHomePageManage(bl) {
				
				this.getHomePageManageReady=false
				if(bl){
					this.getHomePageManageshowLoading=false
					
				}else{
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				this.incomeExpenditureObj={}
				API2.homePageManage({
					queryDate:this.queryDate,
					companyId: this.companyId,
					type: this.list[this.homePageManageType].value
				}).then((response) => {
					//uni.hideLoading();
					
					this.getHomePageManageReady=true
					if(bl){
						
						this.getHomePageManageshowLoading=true
					}else{
						uni.hideLoading();
					}
					
					 this.utabsone=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!=4&&this.homePageManageObj.showPark){
						this.$nextTick(()=>{
							this.myBarChart=null;
								this.getBarCharts()
						})
						
						this.getIncomeExpenditure();
					}
				
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			sectionChange(index) {
				this.clickType = this.homePageManageType;
				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;
					
				} 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-statistics'),null,{
						width:uni.upx2px(620),height:uni.upx2px(740)
					});
				}
				this.myBarChart.clear()
				var data=[
					
					
					{
						name:"总表电量",
						key:"parkKwh",
						color:"#307af6"
					},
					{
						name:"计费电量",
						key:"chargeKwh",
						color:"#52b8aa"
					},
					{
						name:"自用电量",
						key:"freeKwh",
						color:"#53b56b"
					},
					{
						name:"公用电量",
						key:"publicKwh",
						color:"#ef8132"
					},
					{
						name:"电损量",
						key:"lostKwh",
						color:"#dc4441"
					}
				]
				var dataName=[]
				var dataSeries=[]
				for(var i in data){
					var it=data[i]
					dataName.push(it.name)
					dataSeries.push({})
				}
				for(var i in data){
						var it=data[i]
						dataSeries[data.length-i-1]={
							name:it.name,
							type: 'bar',
							itemStyle:{
								color:it.color
							},
							data: [
								
								this.homePageManageObj[it.key]
							],
							coordinateSystem: 'polar',
							label: {
								show: true,
								position: 'start',
								formatter: '{c}度'
							}
						}
						
					}
					
					
					
				
				
				
				
				var option = {
					  
					polar: {
						  center:['50%','58%'],
						radius:[25, '80%']
					},
					angleAxis: {
						
						startAngle: 75,
						 label: {
						             rotate: 45, // 旋转标签，使得重叠的概率降低
						         //    margin: 5    // 设置标签与轴线之间的距离，增加空间
						         }
					},
					 
					 legend: {
						itemGap:5,
						  

					    data: dataName,
						//orient :'vertical'
					  },
					radiusAxis: {
						type: 'category',
						data: ['']
					},
					tooltip: {},
					
					series: dataSeries
				};
				console.log(option)
				this.myBarChart.setOption(option);
			},
			merchantChangeApi() {
			
				this.popShow=false
				
				this.getList(true)
				
			},
			change(index) {
				this.current = index;
				this.current2=0;
				this.childList=[]
				var company= this.merchantList1[index]
				if(company.id!=''){
					this.childList=company.childList;
					if(this.childList&&this.childList.length){
						this.companyId = this.childList[0].id;
						this.childInfo=this.childList[0]
					}else{
						this.childList=[]
						this.companyId =company.id
						this.childInfo=company
					}
					
					
				}else{
					this.companyId =''
					
				}
				this.companyInfo=company;
				
				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>
	.incomeExpenditureClass{
		    display: flex;
		    justify-content: space-evenly;
		    width: 100%;
			padding:32rpx 0;
			.income1:last-child{
				.income11,.income12{
					    border-right: 1px solid #c5c3c3;
				
				}
			}
		.income1{
			.income121{
				font-size: 24rpx;
					color:#c5c3c3;
			}
			    width: 33.33%;
			 text-align: center;
			.income11{
				padding:12rpx 0;
				background-color: #1677FF ;
				color:#fff;
				// font-size: 36rpx;
				font-size: 32rpx;
				border-top: 1px solid #c5c3c3;
				border-left: 1px solid #c5c3c3;
	
			}
			
			.income12{
				padding:12rpx 0;
				border-top: 1px solid #c5c3c3;
				border-bottom: 1px solid #c5c3c3;
				border-left: 1px solid #c5c3c3;
				font-size: 40rpx;
			}
			
		}
		
	}
	
	

	.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: 97%;
		}
		.more{
			padding-right: 12rpx;
		}

		.icon {
			margin-left: auto;
			margin-right: 24rpx;
		}
	}
	.tabs-len-1{
		
	}
	.tabs-len-2{
		/deep/.u-tab-item {
			// max-width: 39% !important;
			// flex: none !important;
		}
	}
	.tabs-len-3{
		/deep/.u-tab-item {
			max-width: 39% !important;
			flex: none !important;
		}
	}
	.tabs-len-4{
		/deep/.u-tab-item {
			max-width: 26% !important;
			flex: none !important;
		}
	}
	/deep/.u-tab-item:first-child {
		width: 20% !important;
		flex: none !important;
	}
	
	.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;
			}
		}
	}
	.electronicMonitoring-title{
		display: flex;
		    align-items: center;
		padding: 0px 32rpx;
		    justify-content: space-between;
			height: 120rpx;
			font-size: 36rpx;
background: linear-gradient(88.25deg, rgba(31,85,255,1) 0.65%,rgba(39,171,255,1) 99.34%);
			
color:#fff;


	}
</style>