jp-housekeep-manage/pages/statistics/statistics.vue

<template>
	<view>
		<u-popup v-model="popShow1" duration="10" mode="bottom"  border-radius="16">
			
				<view class="popShow1">
					<view class="title">
						{{companyInfo.name}}
					</view>
					<view class="popShowList">
						<scroll-view  scroll-y="true" style="height: 500rpx;" >
						
						<view class="popShowItem" v-for="(item,i) in childCompanyList.list"
						  @click="change3(i)"
						  :class="{
							  index:item.id==childInfo.id
						  }" >
							
							<view class="online" :class="'online'+item.online">
								<view class="name">{{item.name}}</view>
								<view class="onlineChild"  v-if="item.online==0"><view class="dot"></view>离线</view>
								<view class="onlineChild"  v-if="item.online==1"><view class="dot"></view>在线</view>
								<view class="onlineChild"  v-if="item.online==2">【多表】</view>
								<view class="onlineChild"  v-if="item.online==3">【无表】</view>
							</view>
							
							<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
							
							
						</view>
						<u-divider   nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
						
						</scroll-view>
					</view>
				</view>
			
		</u-popup>
		<u-picker-select title="日期选择" :maskCloseAble="true" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
			mode="time" :params="params"  @confirm="selector2confirm" @cancel="selector2cancel"
			@reset="selector2reset">
		</u-picker-select>
		<!-- 
			<u-select title="" v-model="tabsFrom.show1" :defaultValue="[current2]"
			 :list="childCompanyList.list" value-name="id" label-name="name"
				@confirm="selector1confirm"  >
			</u-select>
		 -->
		<!-- 导航栏 -->
		<view class="navbar">
			<view  class="title" v-if="companyInfotype==4">
				能源管理
				<span style="padding-left: 4px;" >
					|
				</span>
				<span style="padding-left: 4px;" >	
					{{datacompanyInfo.name}}
				</span>
			</view>
			<view class="title" v-else>
				能源管理
				<span style="padding-left: 4px;" v-if="companyList.length>1&&current!=0">
					|
				</span>
				<span style="padding-left: 4px;" v-if="companyList.length>1&&current!=0">	
					
					<template v-if="kWhList.length==1">
						{{kWhList[0].name}}
					</template>
					<template v-else>
					<!-- 	{{childList.length==1? : childInfo.name}} -->
						{{companyInfo.name}}
					</template>
				</span>
				<span style="padding-left: 4px;" v-if="companyList.length==1">
					|
				</span>
				<span style="padding-left: 4px;" v-if="companyList.length==1">
					
					<template v-if="kWhList.length==1">
						{{kWhList[0].name}}
					</template>
					<template v-else>
						{{childList.length==1?companyInfo.name : childInfo.name}}
					</template>
				</span>
			
			</view>

		</view>
		<view class="tabs-box tabs-box2" v-if="companyInfotype==4&&readingMeterNum&&monitorMeterNum" >
			
			<view class="tabs2" :class="'tabs-len-2'"  
			 :style="{width: '100%',   }">
				<u-tabs-one    :gutter="32" 
				:list="companyInfotypeList" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF"
					bg-color="#1677FF" :current="1" @change="companyInfotypeChange"></u-tabs-one>
			</view>
		
		</view>
		
		<!-- 标签 -->
		<view class="tabs-box" v-else >
			
			<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" active-color="#fff" inactive-color="#CCE2FF"
					bg-color="#1677FF" :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="main  electronicMonitoring-123" v-show="kWhList.length==1" style="padding:32rpx 0;">
			
			<view class="electronicMonitoring-title3"
			v-if="companyType==5"
			 v-show="childList&&childList.length>1" >
			 <view style="padding:0 32rpx;">
				 <u-tabs-one height="60"  v-if="utabsone&&childList&&childList.length"
				  :currentIndexBl="true" bg-color="#f2f4f6"  key="B"  :showBar="false" 
				  :list="childList" :is-scroll="false" :current="current2" @change="change2"></u-tabs-one>
				 			
			 </view>
				
			</view>
			<view class="electronicMonitoring-title"
			 @click="titleCk"
			 v-else-if="childList&&childList.length>0" >
				
				<view class="view">
					
					{{childListName}}
					<template v-if="kWhList&&kWhList.length==1">
						<view class=" view dotview online0" v-if="!kWhList[0].online">
							<view class="dot online0"></view> 
							<view class="text online0">离线</view>
						</view>
						
						<view class="view dotview online1" v-else>
							 <view class="dot online1"></view>
							<view class="text online1">在线</view>
						</view>
					</template>
					<template v-if="kWhList&&kWhList.length>1">
						
						
						<view class="dotview  view " >
							<!-- <view class="dot on-line"></view> -->
							<view class="text online2">【多表】</view>
						</view>
					</template>
				</view>
				<view v-show="childList.length>1" 
				 style="color: #777777;font-size: 24rpx;display: flex;align-items: center;"
				class="view">
					切换<u-icon name="arrow-down" color="#777777"></u-icon>
				</view>
			</view>
			<electronicMonitoring v-show="kWhList.length" :ref="'refMyEm'+companyId"></electronicMonitoring>
			
			<u-divider  :isnone="kWhList.length==0" nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>
		
		<view class="main current-123" v-show="(kWhList.length!=1)">
			
			<view class="electronicMonitoring-title"
			 @click="titleCk" 
			 v-if="companyType==1"
			 v-show="childList&&childList.length>0" >
			
			
				<view class="view">
					
					{{childListName}}
					<template v-if="kWhList&&kWhList.length>1">
						
						
						<view class="dotview  view " >
							<!-- <view class="dot on-line"></view> -->
							<view class="text online2">【多表】</view>
						</view>
					</template>
				</view>
				<view v-show="childList.length>1"
				 style="color: #777777;font-size: 24rpx;display: flex;align-items: center;"
				class="view">
					切换<u-icon name="arrow-down" color="#777777"></u-icon>
				</view>
			</view>
			<view class="electronicMonitoring-title2"
			v-else
			 v-show="childList&&childList.length>1" >
			 
				<u-tabs-one height="60" :showBar="false"  v-if="utabsone&&childList&&childList.length"
				 :currentIndexBl="true" bg-color="#f2f4f6"  key="A"
				 :list="childList" :is-scroll="false" :current="current2" @change="change2"></u-tabs-one>

			</view>
			
			
			<!-- 电表运行情况 -->
			<view class="statistics-1 statistics point-meteroperation" v-show="anchorpointShow('point-meteroperation')">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						运行电表
					</view>
					<view class="check-all" @click="toEquipmentConditionMonitoring">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>

				<view class="item">
					
					<!-- 累计 -->
					<view class="total">
						<view class="total1">
							<view class="normal">
								正常 <span style="color:#19be6b;margin: 0 8rpx;">{{alarmsForm.okNum}}</span> 台
							</view>
							<view class="abnormal">
								异常 <span style="color:red;margin: 0 8rpx;">{{alarmsForm.errorNum}}</span> 台
							</view>
						</view>
						<view class="total2" v-if="false">
							本月累计触发告警 <text class="total-number">{{alarmsForm.errorMonthNum}}</text> 次


						</view>
					</view>
				</view>



			</view>
			
			<view class=""  v-show="companyId==''&&companyList.length>1&&datacompanyInfo.type=='2'">
				<!-- 电表运行情况 -->
				<view class="statistics-1 statistics" >
					<view class="title">
						<view class="icon">
							<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
						</view>
						<view class="text">
							<!-- 在用园区与产权单位 -->
							园区&产权单位
						</view>
					
					</view>
					<view class=" contractList" >
						<view class="contractListClass" v-for="(item,i) in companyList" :key="i"
						 @click="change(i+1)">
							<view class="contractListClass1">
								{{item.name}}
							</view>
							<view  class="contractListClass2">
								<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
							</view>
						</view>
						 
						
					</view>
				</view>
			</view>
			
			<view class="point-PlatformRevenue"   v-show="anchorpointShow('point-PlatformRevenue')"  >
				<!-- 电表运行情况 -->
				<view class="statistics-1 statistics statistics-3" >
					<view class="title">
						<view class="icon">
							<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
						</view>
						<view class="text">
							{{!companyId?'平台':'园区营增'}}收入（元）
						</view>
					
					</view>
					<view class=" contractList" >
						<view class="content"
						 style="display: flex;justify-content: center;margin: 40px 0;"
						v-if="!getPlatformRevenueReady">
							
							<div class="uni-toast" style="display: flex;font-size: 60rpx;    color: rgb(192, 196, 204);" >
								<i class="uni-icon_toast uni-loading"
							style="
							    width: 80rpx;
							    height: 80rpx;
								
							"
							></i><p class="uni-toast__content">  </p>加载中...</div>
							
						</view>
						<!--  -->
						<view class="contractListClass"  v-for="(item,i) in platformRevenueList"
					
						@click="gotoUrl('/pages/platformRevenueStatistics/platformRevenueStatistics?id='+item.companyId+'&companyId='+companyId)"
						 :key="i"
						>
							<view class="contractListClass1">
								<view class="class1">{{item.companyName}}</view>
								<view class="class2">{{month}}月预计收入</view>
							</view>
							<view  class="contractListClass2">
								{{item.totalFee}}
								<u-icon name="arrow-right"   style="margin-left: 12rpx;" size="24" color="#838383"></u-icon>
							</view>
						</view>
						
						
					</view>
				</view>
			</view>
			
			<view class="">
				<!-- 电表运行情况 -->
				<view class="statistics-1 statistics point-TenantManagement"   v-show="anchorpointShow('point-TenantManagement')">
					<view class="title">
						<view class="icon">
							<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
						</view>
						<view class="text">
							租户管理预警
						</view>
					
					</view>
					<view class=" contractList">
						<view class="contractListClass" @click="gotoUrl('/pages/tenantList/contractList?query=1&companyId='+companyId)">
							<view class="contractListClass1">
								<image class="img" src="@/assets/img/riLine-wallet-2-line.svg"></image>
								账户余额不足 <span class="tenantListNum">{{tenantListNum1}}</span> 家
			
							</view>
							<view  class="contractListClass2">
								<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
							</view>
						</view>
						<view  class="contractListClass" @click="gotoUrl('/pages/tenantList/contractList?query=2&companyId='+companyId)">
							<view class="contractListClass1">
								<!-- <image class="img" src="@/assets/img/riLine-time-line2.svg"></image> -->
								<u-icon name="warning" class="img" size="32" color="#ef8132"></u-icon>
								租赁费催缴提醒 <span  class="tenantListNum">{{tenantListNum2}}</span> 家<span>（即将到期）</span>
								
							</view>
							<view  class="contractListClass2">
								<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
							</view>
						</view>
						<view  class="contractListClass" @click="gotoUrl('/pages/tenantList/contractList?query=3&companyId='+companyId)">
							<view class="contractListClass1">
								<image class="img" src="@/assets/img/riLine-time-line2.svg"></image>
								租赁费催缴提醒 <span  class="tenantListNum">{{tenantListNum3}}</span> 家<span>（已到期）</span>
								
							</view>
							<view  class="contractListClass2">
								<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 统计2 异常告警记录 -->
			<view class="statistics-2 statistics point-Poweroutagereminder"   v-show="anchorpointShow('point-Poweroutagereminder')" >
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						租户断电提醒
					</view>
					<view class="check-all" @click="gotoUrl('/pages/tenantList/remindList?id='+companyId)">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				<u-divider :isnone="abnormalRecordsList.length==0"  nonetext="无记录"
					border-color="#fff"></u-divider>
				<!-- 异常  -->
				<view class="abnormal-item" v-for="(item,index) in abnormalRecordsList"
				:key="index"
			
				>
				<!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
				 -->
					<view class="item-title">
			
						<view class="name">
							{{item.content}}
						</view>
						<view class="date" style="display: flex;    justify-content: space-between;margin-top: 4rpx;">
							<view>{{item.title}}</view>
							<view>{{item.createTime}}</view>
							
						</view>
					</view>
				
				</view>
			
			
			</view>

			<!-- 能源管理 -->
			<view v-show="companyId" class="statistics statistics-manage">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						能源管理
					</view>
					<view class="check-all" @click="toEquipmentElectricity">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				
				<view class="content" 
				 style="display: flex;justify-content: center;margin: 40px 0;"
				v-if="!getHomePageManageshowLoading">
					
					<div class="uni-toast" style="display: flex;font-size: 60rpx;    color: rgb(192, 196, 204);" >
						<i class="uni-icon_toast uni-loading"
					style="
					    width: 80rpx;
					    height: 80rpx;
						
					"
					></i><p class="uni-toast__content">  </p>加载中...</div>
					
				</view>
				<view class="content" v-else-if="getHomePageManageshowLoading&&meterList.length == 0">
					<u-divider :isnone="true"  nonetext="无记录"
						border-color="#fff"></u-divider>
				</view>
				
				<!-- 图表 -->
				<view class="chart" v-show="getHomePageManageshowLoading">
					<view class="u-subsection">
						<u-subsection :list="list" :current="homePageManageType" @change="sectionChange"
							font-size="24"></u-subsection>
							<view style="margin-top: 18rpx;" v-if="homePageManageType==5&&tabsFrom.show2Text">
								指定时间：{{tabsFrom.show2Text}}
							</view>
					</view>
					<view class="incomeExpenditureClass point-Accountant" v-show="anchorpointShow('point-Accountant')" >
						<view class="incomeRow"  >
							<view class="isOpenClass" @click="isOpen1=!isOpen1">
								<view class="isOpenClass1">收支统计</view>
								<view class="isOpenClass2">
								<span class="span">{{isOpen1?'收起':'展开'}}</span> 
								<u-icon name="arrow-up" color="rgb(164 156 156)" v-show="isOpen1" size="24"></u-icon>
								<u-icon name="arrow-down" color="rgb(164 156 156)"  v-show="!isOpen1" size="24"></u-icon>
								
								</view>
							</view>
						</view>
						<view class="incomeRow" v-show="isOpen1" >
							<view class="income1">
								<view  class="income11">
									收入(元)
								</view>
								<view   class="income12">
									{{incomeExpenditureObj.incomeFee}}
									<span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
								</view>
							</view>
							<view class="income1">
								<view  class="income11">
									支出(元)
								</view>
								<view   class="income12">
									{{incomeExpenditureObj.expenditureFee}}
									<span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
								</view>
							</view>
							<view class="income1">
								<view  class="income11">
									营收(元)
								</view>
								<view   class="income12" :style="incomeExpenditureObj.differenceFee>=0?'color:red':'color:#52b8aa'">
									{{incomeExpenditureObj.differenceFee>0?'+':''}}{{incomeExpenditureObj.differenceFee}}
									<span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
								</view>
							</view>
						</view>
						<view class="incomeRow" v-show="isOpen1" >
							<view class="income1">
								<view  class="income11">
									增收电量(度)
								</view>
								<view   class="income12">
									{{incomeExpenditureObj.addKwh}}
									<span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
								</view>
							</view>
							<view class="income1">
								<view  class="income11">
									减支电量(度)
								</view>
								<view   class="income12">
									{{incomeExpenditureObj.minusKwh}}
									<span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
								</view>
							</view>
							<view class="income1">
								<view  class="income11">
									增收减支电量(度)
								</view>
								<view   class="income12" :style="incomeExpenditureObj.addMinusKwh>=0?'color:red':'color:#52b8aa'">
									{{incomeExpenditureObj.addMinusKwh>0?'+':''}}{{incomeExpenditureObj.addMinusKwh}}
									<span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
								</view>
							</view>
						</view>
						<view class="incomeRow" v-show="isOpen1"  >
							
							<view class="income1">
								<view  class="income11">
									营增收入(元)
								</view>
								<view   class="income12" style="color:#52b8aa">
									{{incomeExpenditureObj.totalFee}}
									<span class="income121" v-if="!incomeExpenditureObj.id">加载中...</span>
								</view>
							</view>
						</view>
					
					</view>
					<view class="incomeRow"   v-show="anchorpointShow('point-Electricityconsumptiontype')"  >
						<view class="isOpenClass point-Electricityconsumptiontype" @click="isOpen2=!isOpen2">
							<view class="isOpenClass1">用电类型</view>
							<view class="isOpenClass2">
							<span class="span">{{isOpen2?'收起':'展开'}}</span> 
							<u-icon name="arrow-up" color="rgb(164 156 156)" v-show="isOpen2" size="24"></u-icon>
							<u-icon name="arrow-down" color="rgb(164 156 156)"  v-show="!isOpen2" size="24"></u-icon>
							
							</view>
						</view>
					</view>
					<view class="chat-box " v-show="isOpen2" id="barEcharts-statistics"  >

					</view>
				</view>

				<view class="search" v-if="false">
					<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>
				<view class="incomeExpenditureClass">
					
				
				 <view class="incomeRow"  >
				<view class="isOpenClass point-devices" style="padding: 0 16px;"  v-if="getHomePageManageReady" @click="isOpen3=!isOpen3">
					<view class="isOpenClass1">设备列表</view>
					<view class="isOpenClass2"><span class="span">{{isOpen3?'收起':'展开'}}</span> 
					<u-icon name="arrow-up" color="rgb(164 156 156)" v-show="isOpen3" size="24"></u-icon>
					<u-icon name="arrow-down" color="rgb(164 156 156)"  v-show="!isOpen3" size="24"></u-icon>
					
					</view>
				</view>
				</view>
				</view>
				<!-- 电表统计 -->
				<Tree-Body :meterList="meterList" ref="mytree"
				class="" v-show="isOpen3"
				:showPark="homePageManageObj.showPark"
				:childInfo="childInfo"
				 @query="getHomePageManageChildMeter"
				 v-if="getHomePageManageReady"
				 :role="codes&&codes.indexOf('switch')!=-1"
				  @switchBtn="switchBtnApi"
				 ></Tree-Body>
				 
				

			</view>
			<!-- 用电量 -->
			<view class="statistics-e statistics" v-if="!companyId">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						用电量 (度)
					</view>
					<view class="check-all" @click="toEquipmentElectricity">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				<view class="content"  style="display: flex;justify-content: center;margin: 40px 0;"
				v-if="getHomePageKwhshowLoading">
					
					<div class="uni-toast" style="display: flex;font-size: 60rpx;    color: rgb(192, 196, 204);" >
						<i class="uni-icon_toast uni-loading"
					style="
					    width: 80rpx;
					    height: 80rpx;
						
					"
					></i><p class="uni-toast__content">  </p>加载中...</div>
					
				</view>
				<view class="content" v-else-if="!getHomePageKwhshowLoading&&kWhListHome.length == 0">
					<u-divider :isnone="true"  nonetext="无记录"
						border-color="#fff"></u-divider>
				</view>
				
				<view class="content" v-else >
					<view class="electricity">

						<view class="item" v-for="(item, index) in kWhListHome" :key="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>

				</view>



			</view>

			



			<!-- 异常设备排名 -->
			<view class="statistics statistics-ranking" v-if="false">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						异常设备排名
					</view>
					<view class="check-all">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				<!-- 合计 -->
				<view class="total">
					本年度共有<text> 42</text>次设备异常告警
				</view>
				<view class="ranking-main">
					<view class="item" v-for="(item,i) in 3" :key="i"
						@click="gotoUrl('/pages/equipmentDataMonitoring/electronicMonitoring?id='+'&name=')">
						<view class="ranking">
							1
						</view>

						<view class="name">
							<view class="name1">
								荆鹏软件园01
							</view>
							<view class="name2">
								荆鹏集团
							</view>
						</view>
						<view class="time">
							5次
						</view>
					</view>
				</view>
				<!-- 查看全部排名 -->
				<!-- <view class="check-all" @click="gotoUrl('/pages/abnormal/abnormalDeviceRanking')">
					查看全部排名 <u-icon name="arrow-down" size="24" color="rgba(119,119,119,1)"></u-icon>
				</view> -->
			</view>




			<u-divider   nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>

		<view class="anchorpoint" v-show="anchorpointListNum>3">
			<view class="point" 
			 v-for="(item,i) in anchorpointList" :key="i"
			  @click="anchorpointCk(item)" v-show="anchorpointShow(item.key)"
			  :class="{ 	index: anchorpointIndex==item.key }" v-html="anchorpointHtml(item.name)" >
				
			</view>
		</view>	
		<energyCenterTabbar :current="0"></energyCenterTabbar>
	</view>
</template>

<script>
	
	import {
		parseUnixTime,
		beforeTimeStamp,
		getWeek,newDate
	} from '@/apis/utils'

	import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	import electronicMonitoring from '@/pages/equipmentDataMonitoring/electronicMonitoring.vue'
	
	
	import * as echarts from 'echarts';
	import * as API_index from '@/apis/pagejs/index.js'
	import * as API_tenantList from '@/apis/pagejs/tenantList.js'
	
	import * as API from '@/apis/pagejs/energyManage.js'
	import TreeBody from '@/components/tree/tree-body.vue';

	export default {
		components: {
			energyCenterTabbar,TreeBody,electronicMonitoring
		},
		data() {
			return {
				abnormalRecordsList: [], 
				queryDate: '',
				 
				alarmsPercent: 0,
				alarmsForm: {
					okNum: 0,
					errorNum: 0,
					errorMonthNum: 0
				}, // 累计报警
				companyId: '', // 商户ID
				pageIndexe: 1, // 设备数据检测
				totalPagee: 1,
				deviceList: [],
				pageIndexp: 1, // 用电量
				totalPagep: 1,
				kWhList: [],
				kWhListHome: [],
				codes: '', // 判断：reading用电量 detector设备数据检测
				merchantList1: [], // 商户
				merchantList2: [],
				companyListMain: [],
				companyList: [],
				datacompanyInfo:{},
				companyInfotypeCurrent:1,
				companyInfotypeList:[
					{
						name: '变压器巡检仪'
					},
					{
						name: '费控电表计量仪'
					}
				],
				popShow: false,
				popShowtest: true,
				current: 0,
				current2: 0,
				myLineChart: null, // 图表
				myBarChart: null,
				myPieChart: null,
				intervalId: null, // 用于存储间隔ID
				intervalReady: false, // 用于存储间隔ID 
				list: [{
						name: '上月',
						value: "2"
					},
					{
						name: '当月',
						value: "1"
					},
					{
						name: '今日',
						value: "4"
					}, {
						name: '当年',

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

						value: "0"
					},
					{
						name: '指定时间',
						value: "10"
					}
				],

				checked: false,
				homePageManageType: 2,
				meterList: [],
				showPark:false,
				meterListShow:{},
				homePageManageObj: {
					chargeKwh: 0,
					lostKwh: 0,
					parkKwh: 0,
					freeKwh:0,
					publicKwh:0,
				},
				endYear: '',
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				value: '2',
				clickType: -1,
				tabsFrom: {
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部类型",
					show2Text: "",
					
				},
				getHomePageManageReady:false,
				
				utabsone:true,
				
				incomeExpenditureObj:{},
				getHomePageKwhshowLoading:false,
				getHomePageManageshowLoading:false,
				companyInfotype:0,
				readingMeterNum:0, //计量仪
				monitorMeterNum:0, //巡检仪
				tenantListNum0:0,
				tenantListNum1:0,
				tenantListNum2:0,
				tenantListNum3:0,
				childList:[],
				childInfo:{},
				companyInfo:{},
				month:0,
				platformRevenueList:[],
				getPlatformRevenueReady:false,
				anchorpointIndex:"",
				anchorpointNum:0,
				isOpen1:true,
				isOpen2:true,
				isOpen3:true,
				anchorpointList:[
					{
						key:"point-meteroperation",name:"运行电表"
					},
					{
						key:"point-PlatformRevenue",name:"收入统计"
					},
					
					{
						key:"point-TenantManagement",name:"租户管理"
					},
					{
						key:"point-Poweroutagereminder",name:"断电提醒"
					},
					{
						key:"point-Accountant",name:"收支统计"
					},{
						key:"point-Electricityconsumptiontype",name:"用电类型"
					},{
						key:"point-devices",name:"设备列表"
					}
				],
				childCompanyList:{
					id:"",
					list:[]
				},
				popShow1:false,
				userInfo:{},
			}
		},
		onLoad() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
			 this.month=date.getMonth() + 1
			this.endYear = new Date().getFullYear();
			this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
			this.datacompanyInfo=this.carhelp.getPersonInfoPlus().companyInfo
			this.userInfo=this.carhelp.getPersonInfo()
			
			this.getfindByOpenId();
			this.getCompanyInfoList();
			
		},
		onReady() {
			

		},
		onUnload(){
			this.clearTimer(); // 组件销毁前清除定时器
			
			//console.log("组件销毁前清除定时器")
		},
		
		beforeDestroy() {
			this.clearTimer(); // 组件销毁前清除定时器
			
			//console.log("组件销毁前清除定时器")
		},
		
		
		onHide(){
			this.intervalReady=false
			this.clearTimer(); 
		},
		onShow(){
			if(!this.intervalReady&&this.companyList.length>1){
				this.startInterval();
			}
		},
		computed:{
			anchorpointListNum(){
				var num=0;
				this.anchorpointList.forEach((item)=>{
					if(this.anchorpointShow(item.key)){
						num+=1;
					}
				})
				return num
			},
			incomeExpenditureBl(){
				return this.childInfo.type!=4&&(this.childInfo.styleTemplate==1)&&!this.userInfo.authorizedMeterEnabled
			},
			childListName(){
				return this.childInfo.name;
			},
			companyType(){
				
				
				return this.companyInfo.type;
			}
		},
		onPageScroll(e) {
			this.anchorpointNum=e.scrollTop
			
		},
		methods: {
			anchorpointShow(key){
				
				if(key=='point-meteroperation'){
					return true
				}
				if(key=='point-PlatformRevenue'){
					return this.getPlatformRevenueBl()
				}
				if(this.companyId&&(this.kWhList.length!=1)){
					if(key=='point-meteroperation'||key=='point-devices'){
						return true
					}
					if(key=='point-TenantManagement'||key=='point-Poweroutagereminder'){
						return this.companyId&&this.codes&&this.codes.indexOf('property')!=-1&&(this.tenantListNum0)
					}
					if(key=='point-Accountant'||key=='point-Electricityconsumptiontype'){
						return this.incomeExpenditureBl
					}
				}
				
				
				return false
			},
			anchorpointHtml(str){
				 if (!str || str.length === 0) {  
				        return str; // 如果字符串为空或未定义，则直接返回  
				    }  
				  
				    let result = '';  
				    for (let i = 0; i < str.length; i += 2) {  
				        result += str.substr(i, 2) + (i < str.length - 2 ? '<br/>' : '');  
				    }  
				  
				    return result;  
			},
			anchorpointCk(item){
				this.anchorpointIndex=item.key
				//const info = uni.getSystemInfoSync();
				let that = this;
				    uni.createSelectorQuery().select("."+item.key).boundingClientRect(function(res){//定位到你要的class的位置
				      //  console.log("标签获取====>",item.key+JSON.stringify(res),info.windowHeight)
						var  num=that.anchorpointNum+res.top-70
				        uni.pageScrollTo({
				            scrollTop:num,
				            duration: 300
				        });
				    }).exec()
			},
			titleCk() {
				if(this.childCompanyList.id==this.companyInfo.id){
					this.popShow1 = true
				}else{
					this.getChildCompanyList()
				}
				
			},
			getChildCompanyList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.childCompanyList({
					companyId:this.companyInfo.id
				}).then((response) => {
					uni.hideLoading();
					this.childCompanyList={
						id:this.companyInfo.id,
						list:response.data.companyInfoList
					}
					this.popShow1 = true
					//this.getTenantListReady=true
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			stateBl(timekey,day){
				var get=newDate(timekey)
				var time=new Date()
				if(!day){
					 
					return time>get;
				}else{
					
					var get2=newDate(timekey)
					get2.setDate(get2.getDate() - day)
					//console.log(timekey)
					return get2<time&&get>time;
				}
			},
			selectTypeMethod(tenant,selectType){
				var selectType1=this.selectType;
				if(selectType){
					selectType1=selectType;
				}
				
				// if(){
					
				// }
				if(true){
					var bl=false;
					for(var j in tenant.tenantContractList){
						
						
						var tenant1=tenant.tenantContractList[j]
						////console.log(tenant1.autoDeductFee)
						if(tenant1.autoDeductFee!=true){
							continue; 
						}
						if(selectType1==0){
							return true
						}
						if(selectType1==1){
							return tenant.balance<tenant.minBalance
						}
						for(var k in tenant1.contractItemList){
							
							var item=tenant1.contractItemList[k]
							////console.log(item.prepaidEndTime)
							
							if(item.paymentMethod==1&&item.name!='电费'){
								
								if(selectType1==2){
									if(item.prepaidEndTime&&this.stateBl(item.prepaidEndTime,30)){
										bl=true;
									}
								}
								if(selectType1==3){
									if(item.prepaidEndTime&&this.stateBl(item.prepaidEndTime)){
										bl=true;
									}
									if(item.prepaidEndTime==null){
										bl=true;
									}
								}
								
							}
						}
						
					}
					return bl
				}
			},
			getTenantList(companyId){
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				this.tenantListNum1=0
				this.tenantListNum2=0
				this.tenantListNum3=0
				API_tenantList.tenantContractList({
					companyId:companyId
				}).then((response) => {
					uni.hideLoading();
					if(this.companyId!=companyId){
											 return
					}
					//this.getTenantListReady=true
					var tenantList=response.data.tenantInfoList;
					this.tenantListNum0=tenantList.length
				
					for(var i in tenantList){
						var obj=tenantList[i]
						if(this.selectTypeMethod(obj,1)){
							this.tenantListNum1++;
						}
						
						
						if(this.selectTypeMethod(obj,2)){
							this.tenantListNum2++;
						}
						if(this.selectTypeMethod(obj,3)){
							this.tenantListNum3++;
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//绑定权限
			getfindByOpenId() {
			
				API_index.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					
					if(response.data&&response.data.companyInfo){
						this.datacompanyInfo=response.data.companyInfo
						this.companyInfotype = response.data.companyInfo.type;
						if(this.companyInfotype==4){
							this.getFindMeterList()
						}
						
						
					}
					if(response.data){
						var token = response ? response.data.token : '';
						this.carhelp.setPersonInfo(response.data.regUser );
						
						this.carhelp.setToken(token);
						this.carhelp.setPersonInfoPlus(response.data);
						
						this.codes =response.data.regUser.codes
						if(this.companyId&&this.codes&&this.codes.indexOf('property')!=-1){
							this.getTenantList(this.companyId)
						}
						
					}
					this.userInfo=this.carhelp.getPersonInfo()
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getFindMeterList(){
				
				API.findMeterList().then((response) => {
					//readingMeterNum 计量仪					//monitorMeterNum 巡检仪
					this.readingMeterNum=response.data.readingMeterNum
					this.monitorMeterNum=response.data.monitorMeterNum
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		
			switchBtnApiMethod(node,key){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.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)
			},
			getIncomeExpenditure(companyId){
				
				API.incomeExpenditure({
					//parentMeterId:item.id,
					queryDate:this.queryDate,
					companyId: companyId,
					type: this.list[this.homePageManageType].value
				}).then((response) => {
					
					if(this.companyId!=companyId){
						return
					}
					this.incomeExpenditureObj=response.data
					this.incomeExpenditureObj.id=1
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 设备数据监测
			getHomePageManageChildMeter(item,bl,companyId) {
				if(!companyId){
					companyId=this.companyId
				}
				if(!bl){
					// uni.showLoading({
					// 	title: "加载中",
					// 	mask: true,
					// })
				}
				
				API.homePageManageChildMeter({
					parentMeterId:item.id,
					queryDate:this.queryDate,
					companyId: 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)
					// }
					if(this.companyId!=companyId){
							return
					}
					
					var childMeterList=response.data.childMeterList
					item.childMeterList=childMeterList
					 
					
					if(!bl){
						for(var i in childMeterList){
							var obj=childMeterList[i]
							this.getHomePageManageChildMeter(obj,true,this.companyId)
						}
					}
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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.$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(0,this.companyId);
				} else {
				
					this.homePageManageType = this.clickType;
					if (this.homePageManageType != 5) {
						this.list[5].name = '指定时间';
					}
					this.getHomePageManage(0,this.companyId);
				}
			},
			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) {
				this.homePageManageType = "5";
				
				if (day) {
					this.queryDate = queryTime;
					this.list[5].value = '9';
				} else {
			
					this.queryDate = queryTime + "-01";
					
					
					this.list[5].value = '10';
				}
				//this.list[5].name = queryTime;
				this.getHomePageManage(0,this.companyId);
			},
			clearTimer() {
				if (this.intervalId) {
					clearInterval(this.intervalId); // 清除定时器  
					this.intervalId = null; // 重置定时器ID  
				}
			},
			startInterval() {
				this.clearTimer(); // 组件销毁前清除定时器 
				
				
				this.intervalId = setInterval(() => {
				
					this.getHomePageKwh('', true)
				}, 60000);
			},
			merchantChangeApi() {
				
				this.popShow=false
				this.getHomePageManageshowLoading=false;
				this.meterList=[]
				if (this.companyId) {
					
					if(this.companyId&&this.codes&&this.codes.indexOf('property')!=-1){
						this.getTenantList(this.companyId)
					}
					this.getHomePageKwh(this.companyId,true)
					this.getAbnormalAlarmRecord(this.companyId);
					
				}else{
					this.kWhList=[]
					
					
					
				}
				this.getPlatformRevenue(this.companyId)
				this.getDeviceStatus(this.companyId)
			},
			companyInfotypeChange(index){
				if(index!=this.companyInfotypeCurrent){
					var url=""
					if(process.car.NODE_ENV=='dev'){
						
						url='http://localhost:8081/#/'
					
					}else if(process.car.NODE_ENV=='test'){
						
						url='https://dgj.hbjp.com.cn/charging-prod/jp-housekeep-electric-test/#/'
					
					}else{
						url='https://dgj.hbjp.com.cn/charging-prod/jp-housekeep-electric/#/'
					
					}
					
					window.location.href=url+"pages/statistics/statistics"
				}
			},
			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()
			},
			change2(index) {
			
				this.current2=index;
				
				this.companyId = this.childList[this.current2].id;
			
				this.childInfo=this.childList[this.current2]
				
				this.merchantChangeApi()
			},
			change3(index) {
			
				//this.current2=index;
				
				this.companyId = this.childCompanyList.list[index].id;
			
				this.childInfo=this.childCompanyList.list[index]
				this.popShow1=false;
				this.merchantChangeApi()
			},
			merchantChange(company, 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;
			},
			
			getCompanyInfoList() {
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				API.deviceCompanyList().then((response) => {
					//uni.hideLoading();
					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
						
					}
					
					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.companyList = list;
					
					
					if(this.companyList&&this.companyList.length&&this.companyList.length==1){
						
						this.childList=list[0].childList
						if(!this.childList){
							this.childList=[]
						}
						// this.childList=[
							
						// 	...list[0].childList,
						// 	{
						// 		name:'创客公寓',
						// 		id:''
						// 	},
						// 	{
						// 		name:'创客公寓',
						// 		id:''
						// 	}
						// ]
					}
					
					if(this.companyList.length==1&&this.childList.length==0){
						this.companyId=this.companyList[0].id
						
						this.childInfo=this.companyList[0]
						this.companyInfo=this.companyList[0]
					}else if(this.companyList.length==1){
						this.companyId=this.childList[0].id
						
						this.childInfo=this.childList[0]
						this.companyInfo=this.companyList[0]
						
						 
					
					}else{
						this.getHomePageKwh('')
					}
					this.merchantList1 = mList1;
					this.merchantList2 = mList2;
					this.merchantChangeApi()
				}).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(0,this.companyId)
				}
				
				
			},
			
			getHomePageManage(bl,companyId) {
				if(this.myBarChart){
					this.myBarChart.clear()
				}
				this.getHomePageManageReady=false
				if(bl){
					this.getHomePageManageshowLoading=false
					
				}else{
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				
				this.incomeExpenditureObj={}
				var type=this.list[this.homePageManageType].value
				
				API.homePageManage({
					queryDate:this.queryDate,
					companyId: companyId ,
					type: type
				}).then((response) => {
					this.getHomePageManageReady=true
					if(bl){
						
						this.getHomePageManageshowLoading=true
					}else{
						uni.hideLoading();
					}
					
					if(this.companyId!=companyId){
						return
					}
					
					
					this.meterList = response.data.meterList;
					////console.log(this.meterList)
					this.homePageManageObj = response.data;
					//this.$forceUpdate()
					if(this.incomeExpenditureBl){
						//&&this.homePageManageObj.showPark
						this.myBarChart=null;
						this.$nextTick(()=>{
								this.getBarCharts()
						})
						
						this.getIncomeExpenditure(this.companyId);
					}
					
					
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			
			// 报警
			getAbnormalAlarmRecord(companyId) {
				if(this.companyId&&this.codes&&this.codes.indexOf('property')!=-1){
					
				}else{
					return
				}
				API.remindList({
				 
					configId: '',
					pageIndex: 1,
					pageSize: 3,
					companyId: companyId
				}).then((response) => {
					if(this.companyId!=companyId){
						return 
					}
					this.abnormalRecordsList = response.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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()
			},
			// 用电量
			getHomePageKwh( companyId,interval) {
				
				

				if (!interval) {
					// uni.showLoading({
					// 	title: "加载中",
					// 	mask: true,
					// })
					this.getHomePageKwhshowLoading=true;
				}
				API.homePageKwh({
					pageIndex: 1,
					pageSize: 5,
					companyId:companyId
				}).then((response) => {
					if (!interval) {
						//uni.hideLoading();
						this.getHomePageKwhshowLoading=false;
					}
					if(this.companyId!=companyId){
						return
					}
					if(companyId){
						this.kWhList = response.data.data;
						
						if(this.kWhList.length==1){
							
							var item=this.kWhList[0];
							this.$refs['refMyEm'+companyId].init({
								id:item.id,
								name:item.name,
								companyId:item.companyId,
								
								ref:1,
							})
							setTimeout(()=>{
								this.$nextTick(()=>{
									this.utabsone=true
								})
							},200)
							
						}else{
							this.getHomePageManage(1,this.companyId)
							
							this.getAbnormalAlarmRecord(this.companyId);
						}
					}else{
						
						this.kWhListHome= response.data.data;
						if (!interval) {
							this.startInterval(); // 组件挂载后开始间隔  
						}else{
							this.intervalReady=true
						}
						setTimeout(()=>{
							this.$nextTick(()=>{
								this.utabsone=true
							})
						},200)
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getPlatformRevenueBl(){
				
				return  this.datacompanyInfo.type=='2'
			},
			getPlatformRevenue(companyId){
				if(this.getPlatformRevenueBl()){
					
				}else{
					
					return
				}
				this.platformRevenueList=[]
				this.getPlatformRevenueReady=false
				var queryDate =parseUnixTime(new Date(), '{y}-{m}-1');
				API.platformRevenue({
					queryDate:queryDate,
					companyId:companyId
				}).then((response) => {
					if(companyId!=this.companyId){
						return
					}
					this.getPlatformRevenueReady=true
					this.platformRevenueList=response.data.incomeList
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 累计报警
			getDeviceStatus(companyId) {
				 this.alarmsForm ={
					 okNum:0,errorNum:0
				 }
				API.deviceStatus({
					companyId: companyId
				}).then((response) => {
					 
					 if(this.companyId!=companyId){
						 return
					 }
					 setTimeout(()=>{
					 	this.$nextTick(()=>{
					 		this.utabsone=true
					 	})
					 },200)
					this.alarmsForm = response.data;
					if (this.alarmsForm.okNum != 0) {
						
					}
					this.alarmsPercent = this.alarmsForm.okNum / (this.alarmsForm.okNum + this.alarmsForm
						.errorNum) * 100;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},

			// 故障类型
			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);
			},

			 

			toDataMonitoringList() {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/dataMonitoring-list'
				})
			},
			toEquipmentConditionMonitoring() {
				uni.navigateTo({
					url: '/pages/equipmentInformation/equipmentConditionMonitoring?companyId='+this.companyId
				})
			},
			toWorkOrderManagement() {
				
				uni.navigateTo({
					url: '/pages/workOrderManagement/workOrderManagement'
				})
			},
			toEquipmentElectricity() {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/equipmentElectricity?companyId=' + this.companyId
				})
			},
			toElectronicMonitoring(item) {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item
						.name +
						'&companyId=' + item.companyId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.incomeExpenditureClass{
		   
		    width: 100%;
			//padding:16rpx 0;
			.incomeRow{
				display: flex;
				justify-content: space-evenly;
			}
			.income1:last-child{
				.income11,.income12{
					    border-right: 1px solid #c5c3c3;
				
				}
				
			}
		.income1{
			.income121{
				font-size: 24rpx;
					color:#c5c3c3;
			}
			    width: 100%;
			 text-align: center;
			.income11{
				padding:6rpx 0;
				background-color: #1677FF ;
				color:#fff;
				font-size: 26rpx;
				white-space: pre;
				border-top: 1px solid #c5c3c3;
				border-left: 1px solid #c5c3c3;

			}
			
			.income12{
				padding:6rpx 0;
				border-top: 1px solid #c5c3c3;
				border-bottom: 1px solid #c5c3c3;
				border-left: 1px solid #c5c3c3;
				font-size: 40rpx;
				line-height: 56rpx;

			}
			
		}
		
		
	}
	

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

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

		.tabs {
			width: 88%;

		}
	}
	// /deep/.u-tab-item {
	// 	width: 25% !important;
	// 	flex: none !important;
	// }
	.tabs-box{
		.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;
			}
		}
		.tabs{
			/deep/.u-tab-item:first-child {
				width: 20% !important;
				flex: none !important;
			}
			
		}
	}
	// /deep/.u-tab-item2 {
	// 	width: 33% !important;
	// 	flex: none !important;
	// }

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

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

	// 导航栏
	.navbar {
		
		
		background-color: rgba(22, 119, 255, 1);
		color: #fff;
		line-height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999999;
		    font-weight: bold;
			.title{
				    overflow: hidden;
				    white-space: nowrap;
				    text-overflow: ellipsis;
			}
		.img {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}
	}


	// 标签
	.tabs-box {
		padding: 32rpx 0;
		margin-top: 66rpx;
		padding-right: 32rpx;
		background-color: rgba(22, 119, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tabs {
			width: 97%;
		}
		.more{
			padding-right: 12rpx;
		}

	}

	.main {
		border-radius: 16px 16px 0px 0px;
		background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
		margin-top: -24rpx;
		padding: 32rpx;

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

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.img {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					border-radius: 999px;

				}

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

					.change-img {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}

					text {

						margin-left: 8rpx;
					}
				}


				.text {
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					margin-left: 16rpx;
					font-weight: bold;
				}

				.change {
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #838383;

				}

				.check-all {
					margin-left: auto;
					color: rgba(131, 131, 131, 1);
					font-size: 24rpx;
				}
			}
		}

		// 用电量
		.statistics-e {
			padding: 40rpx;


			.electricity {
				background-color: #fff;

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

				.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 {
						white-space: pre;
						//width: 64rpx;
						//height: 36rpx;
						padding: 0 4rpx;
						line-height: 36rpx;
						border-radius: 8rpx;
						font-size: 22rpx;
						text-align: center;
						border: 1px solid rgba(255, 123, 0, 1);
						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;

						// }


					}

					.state2 {
						border: 1px solid rgba(0, 185, 98, 1);
						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%;
							height: 40rpx;
							line-height: 40rpx;

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

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

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

								font-size: 24rpx;
							}
						}

					}
				}
			}
		}

		// 统计1
		.statistics-1 {
			background-color: rgba(255, 255, 255, 1);
			width: 100%;
			padding: 24rpx;
			box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
			border-radius: 8px;
			margin-bottom: 24rpx;


			.item {

				margin-top: 24rpx;
				display: flex;
				align-items: center;

				.item-progess {
					
				
				}


				.total {
					margin-left: 24rpx;

					color: rgba(119, 119, 119, 1);

					.total1 {
						display: flex;
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
						font-weight: bold;

						.normal {
							margin-bottom: 12rpx;
						}
					}

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

					}

					.abnormal {
						margin-left: 24rpx;
					}
				}

				.total-number {
					color: rgba(255, 123, 0, 1);
					margin: 0 8rpx;
					font-weight: bold;
				}
			}
		}

		// 统计2异常报警记录
		.statistics-2 {
			.abnormal-item:last-of-type {
				border-bottom: none !important;
				padding-bottom: 0;
			}

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


				.item-title {


					color: rgba(51, 51, 51, 1);
					    width: 100%;
					.img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}

					.name {
						color: rgba(51, 51, 51, 1);
						font-weight: bold;
						    overflow: hidden;
						    white-space: nowrap;
						    text-overflow: ellipsis;
					}

					.date {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
					}
				}

				.item-value {
					text-align: right;
					display: flex;
					align-items: center;

					.more {
						margin-left: 8rpx;
					}

					.value1 {
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}

					.value2 {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
					}
				}
			}
		}

	
		.statistics-3 {
			
		}

		
		.statistics-4 {

			
		}

		 

		// 异常设备排名
		.statistics-ranking {
			.total {
				color: rgba(16, 16, 16, 1);
				padding-left: 52rpx;

				text {
					color: #1677FF;
					padding: 0 8rpx;
				}
			}

			.ranking-main {
				margin-top: 40rpx;
				border-radius: 16px;
				background-color: #fff;

				.item:last-of-type {
					margin-bottom: 0;
				}

				.item {
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;

					.ranking {
						color: rgba(16, 16, 16, 1);
						font-weight: bold;
					}

					.icon {
						width: 72rpx;
						height: 72rpx;
						border-radius: 4px;
						background-color: rgba(219, 234, 255, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 24rpx;

						.img {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.name {
						margin-left: 16rpx;

						.name1 {
							color: rgba(51, 51, 51, 1);
							font-weight: bold;
						}

						.name2 {
							color: rgba(119, 119, 119, 1);
							font-size: 24rpx;
							margin-top: 4rpx;
						}
					}

					.time {
						color: rgba(16, 16, 16, 1);
						margin-left: auto;
						font-weight: bold;
					}
				}


			}

			// 查看全部排名
			.check-all {
				text-align: center;
				color: rgba(119, 119, 119, 1);
				font-size: 12px;
			}
		}

		// 能源管理
		.statistics-manage {
			padding: 40rpx 0;

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

			// 图表
			.chart {
				padding-top: 32rpx;
				border-top: 1px solid rgba(242, 242, 242, 1);

				/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 {
				padding-left: 16rpx;
				margin-top: 20rpx;
				
				.meter-name {
					font-size: 28rpx
				}
			}
			.first-level-list{
				width: 100%;
				display: flex;
				align-items: center;
			}
			// 二级表
			.second-level {
				padding-left: 32rpx;
				margin-top: 20rpx;

				.meter-name {
					font-size: 24rpx
				}
			}

			.else-switch {
				padding-left: 72rpx;

				.meter-name {
					font-size: 24rpx
				}

				.item {
					margin-top: 24rpx;
				}
			}
		}


	}

	/deep/.u-drawer {
		z-index: 999 !important;
	}
	
	.contractList{
		    font-weight: bold;
		.contractListClass{
			display: flex;
			  margin-top:16rpx;
			    justify-content: space-between;
				color: rgba(51,51,51,1);

			.img{
				width: 32rpx;
				height: 32rpx;
				margin-right:  18rpx;
			}
			.contractListClass1{
				    display: flex;
				    align-items: center;
			}
			.tenantListNum{
				margin: 0 8rpx;
				color:#FF7B00 ;
			}
			
		}
	}
	
	.statistics-3 {
		.contractListClass{
			.contractListClass1{
				    display: block;
					.class1{
						font-size: 28rpx;
						color: rgba(51,51,51,1);
					}
					.class2{
						font-size: 24rpx;
						color: rgba(119,119,119,1);
			
					}
			}
			.contractListClass2{
				font-size: 40rpx;
				color: rgba(16,16,16,1);
				font-weight: bold;
				
				display: flex;
				align-items: center;
			}
		}
		
		   
	}
	
	
	.statistics-4 {
	
		
	}
	.electronicMonitoring-title2{
		margin-bottom: 16rpx;
	}
	.electronicMonitoring-title3{
		
	}
	.electronicMonitoring-title{
		display: flex;
		margin: 0px 32rpx;
		// background: #fff;
		// border: 1px solid #bbbbbb;
		border-radius: 4px;
		padding: 4px;
		//background: linear-gradient(180deg, #bbd8ff 0%, white 63%);
		   justify-content: space-between;
		 font-size:32rpx;
		 font-weight: bold;
		 .view{
			display: flex;
			 justify-content: space-between;
			 	margin-right: 12rpx;
		 }
		 // 状态
		 .state {
		 	white-space: pre;
		 	//width: 64rpx;
		 	//height: 36rpx;
		 	padding: 0 4rpx;
		 	line-height: 36rpx;
		 	border-radius: 8rpx;
		 	font-size: 22rpx;
		 	text-align: center;
		 	border: 1px solid rgba(255, 123, 0, 1);
		 	color: rgba(255, 123, 0, 1);
		 
		 
		 	// .dot {
		 	// 	margin-right: 8rpx;
		 
		 	// 	width: 16rpx;
		 	// 	height: 16rpx;
		 	// 	background-color: rgba(255, 123, 0, 1);
		 	// 	border-radius: 999px;
		 	// 	margin-left: auto;
		 
		 	// }
		 
		 
		 }
		 
		 .state2 {
		 	border: 1px solid rgba(0, 185, 98, 1);
		 	color: rgba(0, 185, 98, 1);
		 }
	}
	.current-123{
		.electronicMonitoring-title{
			margin: 8rpx 0rpx 32rpx 0;
		}
	}
	.electronicMonitoring-123{
		
	}
	
	.anchorpoint{
		.index{
			color: rgba(22,119,255,1);

		}
		background-color: rgba(0,0,0,0.25);
		margin-top: 20rpx;
		display: flex;
		
		/* text-decoration: underline; */
		//	z-index: 999;
			
		text-align: center;
		position: fixed;
		/* top: 40px; */
		top: 200rpx;
		right: 0px;
			
		
		font-size: 24rpx;
		//background: linear-gradient(95deg, #FF9800, #FF5722);
		//box-shadow: 0 4rpx 24rpx 0 #FF5722;
		//padding-top: 8px;
		color: #fff;
		border-radius: 25px;
		
		    flex-direction: column;
		    align-items: flex-end;
			.point{
				padding: 16rpx;
			}
			.point:last-child{
				padding-bottom:  36rpx;;
				
			}
			.point:first-child{
				padding-top:  36rpx;
			}
	}
	
	.isOpenClass{
		display: flex;
		    width: 100%;
			    justify-content: space-between;
				margin: 12rpx 0;
				align-items: center;
		.isOpenClass1{
			font-size: 28rpx;
			font-weight: bold;
			padding-bottom:  8rpx;
			color: rgba(51,51,51,1);

		}
		.isOpenClass2{
			font-size: 24rpx;
			color: rgba(131,131,131,1);
			.span{
				margin-right: 8rpx;
			}
		}
	}
	.popShow1{
		background-color: #f2f4f6;
		padding: 32rpx;
		.popShowList{
			border-radius: 8px;
			padding:0 10rpx;
			background-color: #FFF;
		}
		.title{
			text-align: center;
			font-size: 44rpx;
			padding: 20rpx;
			font-weight: bold;
		}
		.popShowItem:first-child{
			padding-top:  38rpx;
		}
		.popShowItem{
			
			font-size: 32rpx;
			    display: flex;
				margin:  24rpx;
				justify-content: space-between;
		}
		
		.onlineChild{
			 margin:0 8rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
		}
		   
		.online{
			display: flex;
			
			
			 .name{
			 	color: #777777 ;
			 	
			 }
		}
		.index{
			.name{
				color: #1677ff;
				font-weight: bold;
			}
		}
		
	}
	.online0{
		color: #ff7b00;
	}
	.online2{
		color: #009688;
	}
	.online3{
		color: #9E9E9E;
	}
	.online1{
		color: #00b962;
		.dot{
			 background-color: #00b962;
		}
	}
	.dotview{
		display: flex;
		font-size: 28rpx;
		align-items: center;
		 margin:0 8rpx;
		.text{
			font-size: 28rpx;
			font-weight: 400;
		}
	}
	.dot{
		    margin:0 8rpx;
		    width: 16rpx;
		    height:16rpx;
		    background-color: #ff7b00;
		    border-radius: 999px;
		    margin-left: auto;
	}
</style>