jp-housekeep-manage/pages/equipmentInformation/equipmentConditionMonitoring.vue

<template>
	<view>
		<u-navbar title="设备状态监测" title-color="#101010"></u-navbar>
		<u-select title="" v-model="tabsFrom.show1" :defaultValue="[current2]"
		 :list="childList" value-name="id" label-name="name"
			@confirm="selector1confirm"  >
		</u-select>
		<view class="dropdownMain" >
			<view class="dropdown" >
				
			
			<view class="dropdown-item" @click="show1=true">
		
				<view class="text">
					{{device}}
				</view>
				<view class="item-icon">
					<u-icon name="arrow-down" color="#999999" v-if="show1==false"></u-icon>
					<u-icon name="arrow-up" color="#999999" v-else></u-icon>
				</view>
			</view>
			<view class="dropdown-item" @click="show2=true">
				<view class="text">
					{{statusName}}
				</view>
				<view class="icon">
					<u-icon name="arrow-down" color="#999999" v-if="show2==false"></u-icon>
					<u-icon name="arrow-up" color="#999999" v-else></u-icon>
				</view>
			</view>
		</view>
		<!-- 标签 -->
		<view class="tabs-box" >
			
			<view class="tabs" :class="'tabs-len-'+merchantList1.length"  v-show="companyList.length>1"
			 :style="{width: companyList.length>3 ? '' : '100%'}">
				<u-tabs-one  v-if="utabsone"
				:list="merchantList1" :is-scroll="false" inactive-color="#999999" active-color="#666666"
				 :current="current" @change="change"></u-tabs-one>
			</view>
			<view class="more" @click="popShow=true" v-if="companyList.length >= 4">
				<u-icon name="arrow-down" color="#fff" size="40"></u-icon>
			</view>
		</view>
		<!-- 标签弹出层 -->
		<u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
			<view class="popup-tabs">
				<view class="tabs">
					<u-tabs :list="merchantList1" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="more">
					<u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
				</view>
			</view>
			<view class="tabs-options">
				<view class="item" v-for="(item, index) in merchantList2" :key="index"
					@click="merchantChange(item,index)">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		
		<view class="electronicMonitoring-title"
		 @click="titleCk"
		 v-if="childList&&childList.length>0" >
			<view>
				{{childListName}}
			</view>
			<view v-show="childList.length>1">
				<u-icon name="arrow-down" color="#fff"></u-icon>
			</view>
		</view>
		</view>
		
		<u-select v-model="show1" mode="single-column" :list="deviceTypeList" @confirm="deviceChange"></u-select>

		<u-select v-model="show2" mode="single-column" :list="statusList" @confirm="statusChange"></u-select>

		<view class="main">
			<view class="item" v-for="(item,index) in deviceList" :key="index" @click="toElectronicMonitoring(item)">
				<view class="item-icon" v-if="item.classify == '1'">
					<image class="img" src="@/assets/img/energy1.svg" mode=""></image>
				</view>
				<view class="item-icon" v-if="item.classify == '2'">
					<image class="img" src="@/assets/img/transformer2.svg" mode=""></image>
				</view>
				<view class="item-content">
					<view class="content1">
						<view class="name1">
							{{replaceLastTwoWords(item.name)}}
						</view>
						
					</view>
					<view class="content3">
						{{item.installationAddressSimple}}
					</view>
					<view class="content2">
						<view class="text">
							{{item.deviceTypeN}}
						</view>

						<view class="item-state">
							<view class="dot" :class="item.online ? 'on-line' : 'off-line'">

							</view>
							<view class="text">
								{{item.online ? '在线' : '离线'}}
							</view>
							<view class="more">
								<u-icon name="arrow-right" size="24" color="#acacac"></u-icon>
							</view>
						</view>
					</view>
					
					<view class="content3" v-if="item.classify == '2'">
						<view class="state-item">
							<view class="state-title">
								运行状态：
							</view>
							<view class="state-value" v-if="item.deviceStatus == '1'">
								正常
							</view>
							<view class="state-value2" v-else>
								异常
							</view>
						</view>
						<view class="state-item">
							<view class="state-title">
								温度状态：
							</view>
							<view class="state-value" v-if="item.temperatureStatus == '1'">
								正常
							</view>
							<view class="state-value2" v-else>
								异常
							</view>
						</view>
						<view class="state-item">
							<view class="state-title">
								烟感状态：
							</view>
							<view class="state-value" v-if="item.smokeStatus == '1'">
								正常
							</view>
							<view class="state-value2" v-else>
								异常
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<u-divider :isnone="deviceList.length==0" nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
	
	export default {
		data() {
			return {
				companyList: [], // 商户
				merchantList1: [],
				merchantList2: [],
				
				deviceList: [],
				show1: false,
				show2: false,
				device: '全部设备',
				statusName: '全部状态',
				deviceTypeList: [],
				statusList: [{
						value: '',
						label: '全部状态'
					},
					{
						value: '1',
						label: '离线'
					},
					{
						value: '2',
						label: '温度异常'
					},
					{
						value: '3',
						label: '烟感异常'
					},
					{
						value: '4',
						label: '设备异常'
					}
				],
				tabsFrom: {
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					
				},
				status: '',
				deviceType: '',
				companyId:"",
				pageIndex: 1,
				recordsTotal:0,
				utabsone:true,
				companyType:0,
				incomeExpenditureObj:{},
				opCompanyId: '',
				childList:[],
				companyListMain:[],
				current2:0,
				childInfo:{},
				companyInfo:{},
				popShow: false,
				current: 0,
			}
		},
		computed:{
			childListName(){
				return this.childInfo.name;
			},
			
		},
		onLoad(op) {
			if(op.companyId){
				this.companyId=op.companyId
			}else{
				this.getCompanyInfoList();
			}
			this.getDeviceStatusMonitoring();
		},
		onReady() {
			
			this.getDeviceTypeList();
		},
		onReachBottom() {
			if (this.deviceList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			merchantChangeApi() {
			
				this.popShow=false
				
				//this.getList(true)
				
				this.getDeviceStatusMonitoring(1);
				
			},
			titleCk() {
				if(this.childList.length>1){
					this.tabsFrom.show1 = true
				}
				
			},
			selector1confirm(e) {
				//this.getHomePageKwh()
				
				console.log(e)
				this.companyId=e[0].value
			
				this.current2=e[0].i
				
				this.childInfo=this.childList[this.current2];
				uni.showLoading()
				
				this.merchantChangeApi()
			},
			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()
			},
			merchantChange(item, index) {
				if(this.current==0){
					this.current=1;
				}
				var m = company;
				var n = this.merchantList1[this.current];
				this.merchantList1[this.current] = m;
				this.merchantList2[index] = n;
				//this.$forceUpdate()
				this.utabsone=false
				this.companyId = company.id;
				
				this.companyInfo=company
				
				
				if(company.id!=''){
					this.childList=company.childList;
					if(this.childList&&this.childList.length){
						this.companyId = this.childList[0].id;
						this.childInfo=this.childList[0]
					}else{
						this.childList=[]
						this.companyId =company.id
						this.childInfo=company
					}	
				}else{
					this.companyId =''	
				}
				
				this.merchantChangeApi()
				this.popShow = false;
				
			},
			getCompanyInfoList() {
				this.companyKwhList = [];
			
				API.deviceCompanyList().then((response) => {
					var list = response.data.companyInfoList;
					this.companyListMain=response.data.companyInfoList;
					if(list.length==1&&list[0].childList&&list[0].childList.length){
						list=list[0].childList
						
					}
					
					this.companyList = list;
					
					var mList1 = [];
					var mList2 = [];
					mList1.push({
						id: '',
						name: '全部'
					});
			
					for (var i = 0; i < list.length; i++) {
						if (i >= 3) {
							mList2.push(list[i]);
						} else {
							mList1.push(list[i]);
						}
			
						
					}
			
					this.merchantList1 = mList1;
					this.merchantList2 = mList2;
					this.companyId = mList1[0].id;
					
			
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getDeviceStatusMonitoring();
			},
			//设备查询
			deviceChange(e) {
				// console.log(e);
				this.deviceType = e[0].value;
				this.device = e[0].label;
				
				this.getDeviceStatusMonitoring(1);
			},
			//状态查询
			statusChange(e) {
				// console.log(e);
				this.status = e[0].value;
				this.statusName = e[0].label;
				
				this.getDeviceStatusMonitoring(1);
			},
			getDeviceStatusMonitoring(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.deviceList = [];
					this.pageIndex = 1;
				}
				API.deviceStatusMonitoring({
					pageIndex: this.pageIndex,
					pageSize: 20,
					deviceType: this.deviceType,
					status: this.status,
					companyId:this.companyId,
					classify:"1"
				}).then((response) => {
					uni.hideLoading();
					
					this.deviceList = [
						...this.deviceList,
						...response.data.data
					];
					
					this.recordsTotal = response.data.recordsTotal;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//查询设备类型list
			getDeviceTypeList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.findByName({
					name: '设备类型'
				}).then((res) => {
					uni.hideLoading();
					var list = [];
					list = res.data.map(item => {
						return {
							label: item.name,
							value: item.value
						}
					})
					list.unshift({
						label: '全部设备',
						value: ''
					})
					this.deviceTypeList = list;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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: 100px;
	}
	.dropdownMain {
		position: sticky;
		top: 88rpx;
		background-color: #fff;
		z-index: 999;
	}
	.dropdown {
		
		
		
		
		padding: 18rpx 46rpx;
		display: flex;
		border-bottom: 1px solid rgba(245, 245, 245, 1);

		.dropdown-item {
			width: 50%;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				max-width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.main {
		background-color: #fff;
		padding: 0 32rpx;

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

		.item {
			padding: 32rpx 0;
			display: flex;
			
			border-bottom: 1px solid rgba(245, 245, 245, 1);

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

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

			.item-content {
				flex: 1;
				margin-left: 16rpx;
				.content3 {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
				
				.content1 {
					display: flex;
					align-items: center;

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

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

				.content2 {
					margin-top: 4rpx;

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

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

				}

				.content3 {
					margin-top: 8rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 16rpx;

					.state-item {
						display: flex;

						color: rgba(51, 51, 51, 1);
						font-size: 24rpx;

						.state-value {
							color: #00B962;
						}

						.state-value2 {
							color: #FF6923;
						}
					}
				}
			}
		}

		.item-state {
			margin-left: auto;
			display: flex;
			align-items: center;

			.dot {

				width: 16rpx;
				height: 16rpx;
				border-radius: 999px;


			}

			.text {
				margin: 0 8rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
			}

			.off-line {

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

			}

			.on-line {
				background-color: rgba(0, 185, 98, 1);
			}
		}
	}
	
	.tabs-box {
		background-color: #fff;
		display: flex;
		align-items: center;
		
		padding-right: 32rpx;
		justify-content: space-between;
		border-bottom: 1px solid rgba(232, 232, 232, 1);
	
		.tabs {
			width: 97%;
		}
		.more{
			padding-right: 12rpx;
		}
	
		.icon {
			margin-left: auto;
			margin-right: 24rpx;
		}
	}
	.tabs-len-1{
		
	}
	.tabs-len-2{
		/deep/.u-tab-item {
			// max-width: 39% !important;
			// flex: none !important;
		}
	}
	.tabs-len-3{
		/deep/.u-tab-item {
			max-width: 39% !important;
			flex: none !important;
		}
	}
	.tabs-len-4{
		/deep/.u-tab-item {
			max-width: 26% !important;
			flex: none !important;
		}
	}
	/deep/.u-tab-item:first-child {
		width: 20% !important;
		flex: none !important;
	}
	
	.popup-tabs {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		padding-top: 32rpx;
	
		.tabs {
			width: 88%;
		}
	}
	
	.tabs-options {
		display: flex;
		padding: 64rpx 32rpx 0;
		flex-wrap: wrap;
	
		.item {
			width: 25%;
			margin-bottom: 40rpx;
		}
	}
	.electronicMonitoring-title{
			display: flex;
			    align-items: center;
			padding: 0px 32rpx;
			    justify-content: space-between;
				height: 120rpx;
				font-size: 36rpx;
	background-color: rgba(22,119,255,1);
	color:#fff;
	
	
		}
</style>