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

<template>
	<view>
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="title">
				能源中心
			</view>
			<view class="icon" @click="toDataMonitoringList" v-if="codes.indexOf('detector') != -1">
				<image class="img" src="@/assets/img/riLine-equalizer-line.svg" mode=""></image>
			</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">
			<!-- 统计1 -->
			<view class="statistics-1">
				<view class="item" @click="toEquipmentConditionMonitoring()">
					<view class="item-top">
						<view class="img-box">
							<u-circle-progress active-color="#2979ff" :percent="alarmsPercent" width="88">
							</u-circle-progress>
						</view>
						<view class="number">
							<view class="normal">
								正常：{{alarmsForm.okNum}}台
							</view>
							<view class="abnormal">
								异常：{{alarmsForm.errorNum}}台
							</view>
						</view>
					</view>
					<!-- 累计 -->
					<view class="total">
						本月累计报警 <text class="total-number">{{alarmsForm.errorMonthNum}}</text> 次
					</view>
				</view>

				<view class="item" @click="toWorkOrderManagement()">
					<view class="item-top">
						<view class="img-box">
							<u-circle-progress active-color="#2979ff" :percent="0" width="88">
							</u-circle-progress>
						</view>
						<view class="number">
							<view class="normal">
								未处理：0
							</view>
							<view class="abnormal">
								已处理：0
							</view>
						</view>
					</view>
					<!-- 累计 -->
					<view class="total">
						本月累计工单 <text class="total-number">0</text> 条
					</view>
				</view>

			</view>
			<!-- 用电量 -->
			<view class="statistics-e statistics" v-if="codes.indexOf('reading') != -1 && 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="change" @click="getPowerConsumption(1)">
						<image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
						<text>换一批</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" v-if="abnormalRecordsList.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="gotoUrl('/pages/abnormal/abnormalAlarmRecord?id='+companyId)">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				<!-- 异常  -->
				<view class="abnormal-item" v-for="(item, index) in abnormalRecordsList" :key="index"
					@click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)">
					<view class="item-title">
						<!-- <image class="img" src="@/assets/img/riFill-error-warning-fill 1.svg"></image> -->
						<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>
			<!-- 统计3 设备数据监测-->
			<view class="statistics-3 statistics" v-if="codes.indexOf('detector')!=-1 && deviceList.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="change" @click="getEquipmentDataMonitoring(1)">
						<image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
						<text>换一批</text>
					</view>
					<view class="check-all" @click="toDataMonitoringList">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				<view class="monitoring-item" v-for="(item, index) in deviceList" :key="index"
					@click="toElectronicMonitoring(item)">
					<view class="item-title">
						<view class="text1">
							{{item.name}}
						</view>

						<view class="state">
							<view class="state1">
								<view class="icon">
									<image class="img" src="@/assets/img/antFill-alert.svg" mode=""></image>
								</view>
								{{item.temperatureStatus=='1' ? '正常' : '异常'}}
							</view>
							<view class="state2">
								<view class="icon">
									<image class="img" src="@/assets/img/smoke.svg" mode=""></image>
								</view>
								{{item.smokeStatus=='1' ? '正常' : '异常'}}
							</view>
							<!-- 箭头 -->
							<view class="more">
								<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
							</view>

						</view>
					</view>
					<view class="company-name">
						{{item.installationAddressSimple}}
						<!-- 离线 -->
						<view class="state" v-if="!item.online">
							<text class="off-line"></text>离线
						</view>
						<!-- 在线 -->
						<view class="state state2" v-else>
							<text class="on-line"></text>在线
						</view>
					</view>
					<!-- 监控信息 -->
					<view class="infos" v-if="item.remoteMonitorRecord != null">
						<view class="infos-item">
							<view class="icon">
								当前电流：
								<!-- <img src="../../assets/img/iconPark-electric-wave 1.svg" alt="" /> -->
							</view>
							<view class="text">
								{{item.remoteMonitorRecord.dcaTotal.toFixed(2)}}A
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								当前电压：
								<!-- <img src="../../assets/img/voltage.svg" alt="" /> -->
							</view>
							<view class="text">
								{{item.remoteMonitorRecord.dcvTop.toFixed(2)}}V
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								当前温度：
								<!-- <img src="../../assets/img/iconPark-thermometer.svg" alt="" /> -->
							</view>
							<view class="text">
								{{item.remoteMonitorRecord.temperatureTop}}℃
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								当前功率：
								<!-- <img src="../../assets/img/power.svg" alt="" /> -->
							</view>
							<view class="text">
								{{(item.remoteMonitorRecord.totalPower).toFixed(2)}}kW
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								当前功率因数：
								<!-- <img src="../../assets/img/powerFactor.svg" alt="" /> -->
							</view>
							<view class="text">
								{{item.remoteMonitorRecord.dcfTop.toFixed(2)}}
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								平均功率因数：

							</view>
							<view class="text">
								{{item.remoteMonitorRecord.averPowerFactor.toFixed(2)}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!--设备状态-->
			<view class="statistics-4 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="chat">
					<view id="pieEcharts" style="min-height:620rpx;">

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

			<!-- 故障类型 -->
			<view class="statistics-5 statistics" 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>
				<view class="chat">
					<view id="barEcharts" style="min-height:410rpx;">

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

			<!-- 工单处理 -->
			<view class="statistics-6 statistics" 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>
				<view class="chat">
					<view id="lineEcharts" style="min-height:410rpx;">

					</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>
				<!-- 合计 -->
				<view class="total">
					本年度共有<text> 42</text>次设备异常告警
				</view>
				<view class="ranking-main">
					<view class="item" @click="gotoUrl('/pages/equipmentDataMonitoring/electronicMonitoring?id='+'&name=')">
						<view class="ranking">
							1
						</view>
						<view class="icon">
							<image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
						</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 energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	import * as echarts from 'echarts';
	import * as API from '@/apis/pagejs/index.js'

	export default {
		components: {
			energyCenterTabbar
		},
		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: [],
				codes: '', // 判断：reading用电量 detector设备数据检测
				merchantList1: [], // 商户
				merchantList2: [],
				companyList: [],
				popShow: false,
				current: 0,
				myLineChart: null, // 图表
				myBarChart: null,
				myPieChart: null,
				intervalId: null, // 用于存储间隔ID
				intervalReady: true, // 用于存储间隔ID 
			}
		},
		onLoad() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
			this.queryDate = year + '-' + month;

			this.getPowerConsumption(0);
			this.getEquipmentDataMonitoring(0);
			this.getCompanyInfoList();
			this.getAccumulatedAlarms();
			this.getAbnormalAlarmRecord();
		},
		onReady() {
			this.getfindByOpenId();
			this.getHomePageDeviceStatus();
			// this.getBarCharts();
			// this.getLineCharts();
		},
		beforeDestroy() {
			this.clearTimer(); // 组件销毁前清除定时器
			this.intervalReady = false;
			console.log("组件销毁前清除定时器")
		},
		methods: {
			clearTimer() {
				if (this.intervalId) {
					clearInterval(this.intervalId); // 清除定时器  
					this.intervalId = null; // 重置定时器ID  
				}
			},
			startInterval() {
				this.clearTimer(); // 组件销毁前清除定时器 
				this.intervalId = setInterval(() => {
					// 每隔5秒运行的代码  
					// console.log('这段代码每隔5秒运行一次');
					this.getPowerConsumption(0, true)
				}, 60000);
			},
			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.getPowerConsumption(0);
				this.getEquipmentDataMonitoring(0);
				this.getAccumulatedAlarms();
				this.getHomePageDeviceStatus();
				this.getAbnormalAlarmRecord();

				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;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 商户ID
			getfindByOpenId() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.codes = response.data.regUser.codes;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 设备数据监测
			getEquipmentDataMonitoring(pl) {
				this.pageIndexe = this.pageIndexe + pl;
				if (this.pageIndexe > this.totalPagee) {
					this.pageIndexe = 1;
				}

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.homePageDeviceData({
					pageIndex: this.pageIndexe,
					pageSize: 5,
					companyId: this.companyId
				}).then((response) => {
					uni.hideLoading();
					this.deviceList = response.data.data;
					this.totalPagee = response.data.totalPage;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 异常告警记录
			getAbnormalAlarmRecord() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.alarmRecord({
					queryDate: this.queryDate,
					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"
					})
				})
			},
			// 用电量
			getPowerConsumption(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"
					})
				})
			},
			// 累计工单
			getAccumulatedWorkOrders() {

			},
			// 累计报警
			getAccumulatedAlarms() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceStatus({
					companyId: this.companyId
				}).then((response) => {
					uni.hideLoading();
					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"
					})
				})
			},
			// 工单处理
			getLineCharts() {
				if (!this.myLineChart) {
					this.myLineChart = echarts.init(document.getElementById('lineEcharts'));
				}
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['新增工单', '处理工单', '剩余工单']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['1日', '2日', '3日', '4日', '5日', '6日']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '新增工单',
							type: 'line',
							data: [2, 1, 0, 1, 3, 0],
							itemStyle: {
								color: '#FF3D00'
							}
						},
						{
							name: '处理工单',
							type: 'line',
							data: [3, 1, 1, 0, 2, 1],
							itemStyle: {
								color: '#FF7B00'
							}
						},
						{
							name: '剩余工单',
							type: 'line',
							data: [5, 2, 1, 1, 5, 1],
							itemStyle: {
								color: '#58A55C'
							}
						}
					]
				};

				this.myLineChart.setOption(option);
			},
			// 故障类型
			getBarCharts() {
				if (!this.myBarChart) {
					this.myBarChart = echarts.init(document.getElementById('barEcharts'));
				}
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['一月', '二月', '三月']
					}],
					yAxis: [{
						type: 'value'
					}],
					barGap: '0',
					series: [{
							name: '温度异常',
							type: 'bar',
							data: [100, 140, 230],
							itemStyle: {
								color: '#FF3D00'
							}
						},
						{
							name: '电压异常',
							type: 'bar',
							data: [150, 100, 200],
							itemStyle: {
								color: '#FF7B00'
							}
						},
						{
							name: '功率因素异常',
							type: 'bar',
							data: [50, 80, 100],
							itemStyle: {
								color: '#FFAE00'
							}
						}
					]
				};

				this.myBarChart.setOption(option);
			},
			// 设备状态
			getHomePageDeviceStatus() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.homePageDeviceStatus({
					companyId: this.companyId
				}).then((response) => {
					uni.hideLoading();
					var list = response.data;
					this.getPieCharts(list);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getPieCharts(list) {
				if (!this.myPieChart) {
					this.myPieChart = echarts.init(document.getElementById('pieEcharts'), null, {
						// width: uni.upx2px(700),
						height: uni.upx2px(620)
					});
				}
				this.myPieChart.clear();

				var data = [{
						value: 1,
						name: '温度异常',
						itemStyle: {
							color: '#FF4F3F'
						}
					},
					{
						value: 1,
						name: '烟感异常',
						itemStyle: {
							color: '#FF7B00'
						}
					},
					{
						value: 1,
						name: '正常运行',
						itemStyle: {
							color: '#1677FF'
						}
					},
					{
						value: 1,
						name: '设备异常',
						itemStyle: {
							color: '#F2BD42'
						}
					},
					{
						value: 1,
						name: '设备离线',
						itemStyle: {
							color: '#C2C2C2'
						}
					},
				];
				var data2 = [];
				if (list) {
					data[0].value = list.errorTemperatureNum; //温度异常
					data[1].value = list.errorSmokeNum; //烟感异常
					data[2].value = list.okNum; //正常运行
					data[3].value = list.errorDeviceNum; //设备异常
					data[4].value = list.errorOnlineNum; //设备离线

					for (var i = 0; i < data.length; i++) {
						if (data[i].value != 0) {
							data2.push(data[i]);
						}
					}
				}

				var option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						left: 'center'
					},
					series: [{
						type: 'pie',
						top: '6%',
						// left: '3%',
						// right: '8%',
						bottom: '8%',
						radius: ['45%', '60%'],
						label: {
							formatter: '{name|{b}}\n{value|{c}}',
							fontSize: 12,
							position: 'outer',
							bleedMargin: 5,
							rich: {
								name: {
									align: 'left'
								},
								value: {
									align: 'left'
								}
							}
						},
						emphasis: {
							label: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						},
						data: data2
					}]
				};

				this.myPieChart.setOption(option);
			},
			change(index) {
				this.current = index;
				this.companyId = this.merchantList1[index].id;
				this.getPowerConsumption(0);
				this.getEquipmentDataMonitoring(0);
				this.getAccumulatedAlarms();
				this.getHomePageDeviceStatus();
				this.getAbnormalAlarmRecord();
			},
			toDataMonitoringList() {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/dataMonitoring-list'
				})
			},
			toEquipmentConditionMonitoring() {
				uni.navigateTo({
					url: '/pages/equipmentConditionMonitoring/equipmentConditionMonitoring'
				})
			},
			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-top: 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;
				}

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

					.item-content {
						width: 93%;
					}

					.equipment {

						display: flex;
						align-items: center;


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

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

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






						}
					}

					// 状态
					.state {


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

						.dot {
							margin-right: 8rpx;

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

						}

						.off-line {

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

						}

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

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

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

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

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

							width: 33.3%;
							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 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				width: 330rpx;
				padding: 24rpx;
				box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
				border-radius: 8px;
				background-color: rgba(255, 255, 255, 1);

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

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

					.number {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;

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

				.total {
					margin-top: 28rpx;
					text-align: center;
					color: rgba(119, 119, 119, 1);
				}

				.total-number {
					color: #EE3138;
					margin: 0 8rpx;
				}
			}
		}

		// 统计2异常报警记录
		.statistics-2 {

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

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

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

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

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

	/deep/.u-drawer {
		z-index: 999 !important;
	}
</style>