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

<template>
	<view>
		<u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
			mode="time" :params="params" :noselect="false" @confirm="selector2confirm" @cancel="selector2cancel"
			@reset="selector2reset">
		</u-picker-select>
		
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="title">
				能源管理
			</view>

		</view>
		<!-- 标签 -->
		<view class="tabs-box">
			<view class="tabs" :style="{width: companyList.length>4 ? '' : '100%'}">
				<u-tabs :list="merchantList1" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF"
					bg-color="#1677FF" :current="current" @change="change"></u-tabs>
			</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">
			<!-- 电表运行情况 -->
			<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 class="check-all" @click="toEquipmentConditionMonitoring">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>

				<view class="item">
					<view class="item-progess">
						<view class="img-box">
							<u-circle-progress active-color="#2979ff" :percent="alarmsPercent" width="88">
							</u-circle-progress>
						</view>

					</view>
					<!-- 累计 -->
					<view class="total">
						<view class="total1">
							<view class="normal">
								正常 {{alarmsForm.okNum}} 台
							</view>
							<view class="abnormal">
								异常 {{alarmsForm.errorNum}} 台
							</view>
						</view>
						<view class="total2">
							本月累计触发告警 <text class="total-number">{{alarmsForm.errorMonthNum}}</text> 次


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



			</view>

			<!-- 能源管理 -->
			<view v-show="current!=0&&meterList.length" 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="chart">
					<view class="u-subsection">
						<u-subsection :list="list" :current="homePageManageType" @change="sectionChange"
							font-size="24"></u-subsection>
					</view>
					<view class="chat-box" id="barEcharts">

					</view>
				</view>

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

				</view>
				
				<!-- 电表统计 -->
				<Tree-Body :meterList="meterList" ref="mytree"
				 @query="getHomePageManageChildMeter"
				 ></Tree-Body>
				 
				<view class="meter-statistic" v-if="false">
					<!-- 总计 -->
					<view v-for="(item,i) in meterList" :key="i">
						<view class="sum meter-statistic-main">
							<view class="icon" @click="showBtn(item)" v-if="item.childMeterList&&item.childMeterList.length" >
								<u-icon name="arrow-up" color="#d4d4d4" v-show="ifBtnShow(item)" size="24"></u-icon>
								<u-icon name="arrow-down" color="#d4d4d4"  v-show="!ifBtnShow(item)" size="24"></u-icon>
								
							</view>
							
							<view class="meter-name"  >
								{{item.name}}
							</view>
							<view class="meter-state" v-if="item.online">
								在线
							</view>
							<view class="meter-state2" v-else>
								离线
							</view>
							<view class="meter-number" @click="toElectronicMonitoring(item)">
								{{item.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
							</view>
						</view>
						<view class="sum2">
							<view class="title">
								{{item.name}}用电(未扣除)
							</view>
							<view class="value">
								{{item.childKwh}}度

							</view>
						</view>
						
						<!-- 一级表 -->
						<view class="sum first-level" v-if="item.childMeterList&&item.childMeterList.length"
						v-show="ifBtnShow(item)"  v-for="(item2,j) in item.childMeterList" :key="j" >
							<view  class="first-level-list">
								<view class="icon" @click="showBtn(item2)" v-if="item2.childMeterList&&item2.childMeterList.length" >
									<u-icon name="arrow-up" color="#d4d4d4" v-show="ifBtnShow(item2)" size="24"></u-icon>
									<u-icon name="arrow-down" color="#d4d4d4"  v-show="!ifBtnShow(item2)" size="24"></u-icon>
									
								</view>
								<view class="icon">
									<img src="@/assets/img/switchIcon.png" alt="" />
								</view>
								<view class="meter-name" >
									{{item2.name}}
								</view>
								<view class="meter-state" v-if="item2.online">
									在线
								</view>
								<view class="meter-state2" v-else>
									离线
								</view>
								<view class="meter-number" @click="toElectronicMonitoring(item2)" >
									{{item2.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
								</view>
							</view>
							<!-- 二级表 -->
							<view class="sum second-level"  v-if="item2.childMeterList&&item2.childMeterList.length"
							 v-for="(item3,k) in item2.childMeterList" :key="k"
							 >
								<view   class="first-level-list">
									<view class="icon" @click="showBtn(item3)" v-if="item3.childMeterList&&item3.childMeterList.length" >
										<u-icon name="arrow-up" color="#d4d4d4" v-show="ifBtnShow(item3)" size="24"></u-icon>
										<u-icon name="arrow-down" color="#d4d4d4"  v-show="!ifBtnShow(item3)" size="24"></u-icon>
										
									</view>
									<view class="icon">
										<img src="@/assets/img/switchIcon.png" alt="" />
									</view>
									<view class="meter-name">
										{{item3.name}}
									</view>
									<view class="meter-state" v-if="item3.online">
										在线
									</view>
									<view class="meter-state2" v-else>
										离线
									</view>
									<view class="meter-number" @click="toElectronicMonitoring(item3)">
										{{item3.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
									</view>
								</view>
								<!-- 开关 -->
								<view class="else-switch  " v-if="item3.childMeterList&&item3.childMeterList.length"
							 v-for="(item4,h) in item3.childMeterList" :key="h" >
									<view class="sum item first-level-list">
								
										<view class="icon">
											<img src="@/assets/img/switchIcon.png" alt="" />
											<!-- switchClose -->
										</view>
										<view class="meter-name">
											{{item4.name}}
										</view>
										<view class="meter-state" v-if="item4.online">
											在线
										</view>
										<view class="meter-state2" v-else>
											离线
										</view>
										<view class="meter-number" @click="toElectronicMonitoring(item4)" >
											{{item4.kwh}}度<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
										</view>
									</view>
								
									
								</view>
							</view>
						</view>
						
					</view>
					
					
				</view>

			</view>
			<!-- 用电量 -->
			<view class="statistics-e statistics" v-if="current==0&&kWhList.length != 0">
				<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">
					<view class="electricity">

						<view class="item" v-for="(item, index) in kWhList" :key="index"
							@click="toElectronicMonitoring(item)">
							<view class="item-content">
								<view class="equipment">
									<view class="equipment1 ">
										{{item.name}}
									</view>

									<view class="equipment2">
										{{item.installationAddressSimple}}
									</view>



									<view class="state" v-if="!item.online">
										<!-- <view class="dot off-line"></view> -->
										<view class="text">离线</view>
									</view>

									<view class="state state2" v-else>
										<!-- <view class="dot on-line"></view> -->
										<view class="text">在线</view>
									</view>

								</view>
								<view class="electricity">
									<view class="electricity-item electricity-item-day">

										<view class="date">
											今日
										</view>
										<view class="number">
											{{item.thisDayKwh}}
										</view>
									</view>
									<view class="electricity-item">

										<view class="date">
											本月
										</view>
										<view class="number">
											{{item.thisMonthKwh}}
										</view>
									</view>
									<view class="electricity-item">

										<view class="date">
											上月
										</view>
										<view class="number">
											{{item.lastMonthKwh}}
										</view>
									</view>



								</view>
							</view>

							<view class="more">
								<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
							</view>
						</view>
					</view>

				</view>



			</view>

			<!-- 统计2 异常告警记录 -->
			<view class="statistics-2 statistics" >
				<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/abnormal/abnormalAlarmRecord?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.configName}}
						</view>
						<view class="date">
							{{item.createTime}}
						</view>
					</view>
					<view class="item-value">
						<view class="value-content">
							<view class="value1">
								{{item.meterName}}
							</view>
							<view class="value2">
								{{item.installationAddressSimple}}
							</view>
						</view>
						<!-- 箭头 -->
						<view class="more">
							<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
						</view>

					</view>
				</view>


			</view>



			<!-- 异常设备排名 -->
			<view class="statistics statistics-ranking">
				<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 in 3"
						@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>





		</view>


		<energyCenterTabbar :current="0"></energyCenterTabbar>
	</view>
</template>

<script>
	
	import {
		parseUnixTime,
		beforeTimeStamp,
		getWeek
	} from '@/apis/utils'
	
	import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	import * as echarts from 'echarts';
	import * as API_index from '@/apis/pagejs/index.js'
	import * as API from '@/apis/pagejs/energyManage.js'
	import TreeBody from '@/components/tree/tree-body.vue';

	export default {
		components: {
			energyCenterTabbar,TreeBody
		},
		data() {
			return {
				abnormalRecordsList: [], // 异常告警记录
				queryDate: '',
				queryDateMonth:"",
				alarmsPercent: 0,
				alarmsForm: {
					okNum: 0,
					errorNum: 0,
					errorMonthNum: 0
				}, // 累计报警
				companyId: '', // 商户ID
				pageIndexe: 1, // 设备数据检测
				totalPagee: 1,
				deviceList: [],
				pageIndexp: 1, // 用电量
				totalPagep: 1,
				kWhList: [],
				codes: '', // 判断：reading用电量 detector设备数据检测
				merchantList1: [], // 商户
				merchantList2: [],
				companyList: [],
				popShow: false,
				current: 0,
				myLineChart: null, // 图表
				myBarChart: null,
				myPieChart: null,
				intervalId: null, // 用于存储间隔ID
				intervalReady: true, // 用于存储间隔ID 
				list: [{
						name: '上月',
						value: "2"
					},
					{
						name: '当月',
						value: "1"
					},
					{
						name: '当日',
						value: "4"
					}, {
						name: '当年',

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

						value: "0"
					},
					{
						name: '指定月份',
						value: "10"
					}
				],

				checked: false,
				homePageManageType: 0,
				meterList: [],
				meterListShow:{},
				homePageManageObj: {
					childKwh: 0,
					differenceKwh: 0,
					parkKwh: 0
				},
				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: "全部时间",
					
				},
			}
		},
		onLoad() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
			this.queryDateMonth = year + '-' + month;
			this.endYear = new Date().getFullYear();
			this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
			

			this.getCompanyInfoList();
			this.getHomePageKwh(0);

			
		},
		onReady() {
			// this.current=1
			// this.getHomePageManage()

		},
		beforeDestroy() {
			this.clearTimer(); // 组件销毁前清除定时器
			this.intervalReady = false;
			console.log("组件销毁前清除定时器")
		},
		methods: {
			// 设备数据监测
			getHomePageManageChildMeter(item,bl) {
				if(!bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				
				API.homePageManageChildMeter({
					parentMeterId:item.id,
					queryDate:this.queryDate,
					companyId: this.companyId,
					type: this.list[this.homePageManageType].value
				}).then((response) => {
					if(!bl){
						uni.hideLoading();
					}
					// this.meterList = response.data.meterList;
					// if(!this.meterListShow.id){
					// 	this.meterListShow.id=1
					// 	this.recursionList(this.meterList)
					// }
					
					var childMeterList=response.data.childMeterList
					item.childMeterList=childMeterList
					 
					
					if(!bl){
						for(var i in childMeterList){
							var obj=childMeterList[i]
							this.getHomePageManageChildMeter(obj,true)
						}
					}
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			recursionList(list){
				if(list){
					for(var i in list){
						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();
				} else {
				
					this.homePageManageType = this.clickType;
					if (this.homePageManageType != 5) {
						this.list[5].name = '指定月份';
					}
					this.getHomePageManage();
				}
			},
			selector2cancel() {
				if(this.clickType != -1) {
					this.homePageManageType = this.clickType;
				}
			},
			selector2confirm(e) {
				this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
			
				this.tabsFrom.show2Index = e.year + "-" + e.month
				if (e.day) {
					this.tabsFrom.show2Text += e.day + "日"
					this.tabsFrom.show2Index += '-' + e.day
			
					this.queryDateMethod(this.tabsFrom.show2Index, true)
				} else {
					this.queryDateMethod(this.tabsFrom.show2Index, false)
				}
			},
			queryDateMethod(queryTime, day) {
			
				if (day) {
					this.queryDate = queryTime;
					//this.FormData2.type =day?"9":"10"
					//this.value="-1"
			
				
					//this.getHomePageManage();
				} else {
			
					this.queryDate = queryTime + "-01";
					
					this.homePageManageType = "5";
					this.list[5].name = queryTime;
			
					this.getHomePageManage();
				}
			},
			clearTimer() {
				if (this.intervalId) {
					clearInterval(this.intervalId); // 清除定时器  
					this.intervalId = null; // 重置定时器ID  
				}
			},
			startInterval() {
				this.clearTimer(); // 组件销毁前清除定时器 
				this.intervalId = setInterval(() => {
					// 每隔5秒运行的代码  
					// console.log('这段代码每隔5秒运行一次');
					this.getHomePageKwh(0, true)
				}, 60000);
			},
			merchantChangeApi() {

				this.getDeviceStatus()
				 this.getAbnormalAlarmRecord();
				if (this.companyId) {

					this.getHomePageManage();
				}
			},
			change(index) {
				this.current = index;
				this.companyId = this.merchantList1[index].id;
				this.merchantChangeApi()
			},
			merchantChange(item, index) {
				var m = item;
				var n = this.merchantList1[this.current];
				this.merchantList1[this.current] = m;
				this.merchantList2[index] = n;

				this.companyId = item.id;

				this.merchantChangeApi()
				this.popShow = false;
			},
			// 单位
			getCompanyInfoList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceCompanyList().then((response) => {
					uni.hideLoading();
					var list = response.data.companyInfoList;
					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;
					this.merchantList1 = mList1;
					this.merchantList2 = mList2;
					this.merchantChangeApi()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			sectionChange(index) {
				this.clickType = index;
				this.homePageManageType = index;
				if (index == 5) {
					this.tabsFrom.show2 = true;
					this.params.day = false;
				} else {
					this.list[5].name = '指定月份'
					this.getHomePageManage()
				}
				
				
			},
			// 设备数据监测
			getHomePageManage() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.homePageManage({
					queryDate:this.queryDate,
					companyId: this.companyId,
					type: this.list[this.homePageManageType].value
				}).then((response) => {
					uni.hideLoading();
					this.meterList = response.data.meterList;
					
					
					this.homePageManageObj = response.data;
					this.getBarCharts()
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			
			// 异常告警记录
			getAbnormalAlarmRecord() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.alarmRecord({
					queryDate: this.queryDateMonth,
					configId: '',
					pageIndex: 1,
					pageSize: 3,
					companyId: this.companyId
				}).then((response) => {
					uni.hideLoading();
					this.abnormalRecordsList = response.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 用电量
			getHomePageKwh(pl, interval) {
				this.pageIndexp = this.pageIndexp + pl;
				if (this.pageIndexp > this.totalPagep) {
					this.pageIndexp = 1;
				}

				if (!interval) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				API.homePageKwh({
					pageIndex: this.pageIndexp,
					pageSize: 5,
					companyId: this.companyId
				}).then((response) => {
					if (!interval) {
						uni.hideLoading();
					}
					this.kWhList = response.data.data;
					this.totalPagep = response.data.totalPage;

					if (!interval) {
						this.startInterval(); // 组件挂载后开始间隔  
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},

			// 累计报警
			getDeviceStatus() {
				 
				API.deviceStatus({
					companyId: this.companyId
				}).then((response) => {
					 
					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'),null,{
						width:uni.upx2px(690),height:uni.upx2px(480)
					});
				}
				var thismax=Math.max(this.homePageManageObj.parkKwh,this.homePageManageObj.differenceKwh,this.homePageManageObj.childKwh) 
				
				var option = {
					  
					polar: {
						  center:['35%','50%'],
						radius:[20, '70%']
					},
					angleAxis: {
						max: parseInt(thismax+thismax/10)+3 ,
						startAngle: 75
					},
					 
					 legend: {
						 x:"65%",
						 y: '0',
						  

					    data: ['园区电量', '表计电量', '电损量'],
						orient :'vertical'
					  },
					radiusAxis: {
						type: 'category',
						data: ['']
					},
					tooltip: {},
					series: [
						{
							name:'园区电量',
							type: 'bar',
							data: [
								this.homePageManageObj.parkKwh,
							
							],
							coordinateSystem: 'polar',
							label: {
								show: true,
								position: 'middle',
								formatter: '{c}度'
							}
						},
						{
							name:'表计电量',
							type: 'bar',
							data: [
							
								this.homePageManageObj.childKwh
								
							],
							coordinateSystem: 'polar',
							label: {
								show: true,
								position: 'middle',
								formatter: '{c}度'
							}
						},
						{
							name:'电损量',
							type: 'bar',
							data: [
								
								this.homePageManageObj.differenceKwh
							],
							coordinateSystem: 'polar',
							label: {
								show: true,
								position: 'middle',
								formatter: '{c}度'
							}
						}
					]
				};
				console.log(option)
				this.myBarChart.setOption(option);
			},

			 

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

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

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

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


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

		.tabs {
			width: 88%;
		}

	}

	.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: 24rpx;
			padding: 40rpx;

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

				.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 {
						width: 64rpx;
						height: 36rpx;
						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: 32rpx;
				display: flex;
				align-items: center;

				.item-progess {
					display: flex;
					align-items: center;

					.img {
						width: 88rpx;
						height: 88rpx;
						margin-right: 24rpx;
						vertical-align: middle;
					}


				}


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

					.img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}

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

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

		// 统计3设备实时监控
		.statistics-3 {
			.monitoring-item {
				padding: 16rpx 0;
				border-bottom: 1px solid rgba(245, 245, 245, 1);

				.item-title {
					display: flex;
					align-items: center;

					.text1 {
						color: rgba(51, 51, 51, 1);
					}


				}

				.company-name {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					display: flex;
					align-items: center;

					.state {
						margin-left: 12rpx;
						display: flex;
						align-items: center;
						color: rgba(255, 123, 0, 1);

						text {
							margin-right: 8rpx;
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							border-radius: 999px;
						}

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

				.state {
					margin-left: auto;
					display: flex;

					.state1,
					.state2 {
						display: flex;
						align-items: center;
						margin-left: 24rpx;
					}

					.more {
						margin-left: 8rpx;
					}

					.img {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
						margin-right: 8rpx;
					}
				}


				// 监控信息
				.infos {
					margin-top: 8rpx;

					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.infos-item {
						width: 38%;

						display: flex;
						align-items: center;
						color: rgba(51, 51, 51, 1);
						font-size: 22rpx;
						// margin-right: 16rpx;
						margin-bottom: 8rpx;

						.icon {}
					}

					.text {
						font-weight: bold;
					}
				}

			}
		}

		// 设备状态
		.statistics-4 {

			.chat-img {
				width: 100%;
				height: 620rpx;
			}
		}

		// 故障类型
		.statistics-5,
		.statistics-6 {
			.chat-img {
				width: 100%;
				height: 410rpx;
			}
		}

		// 异常设备排名
		.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;
	}
</style>