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

<template>
	<view>
		<u-navbar title="设备状态监测" title-color="#101010"></u-navbar>

		<view class="dropdown">
			<view class="dropdown-item">

				<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>
		<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">
							{{item.name}}
						</view>
						<view class="name2">
							{{item.installationAddressSimple}}
						</view>
					</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 {
				deviceList: [],
				show1: false,
				show2: false,
				device: '变压器智能监控及巡检仪',
				statusName: '全部状态',
				deviceTypeList: [],
				statusList: [{
						value: '',
						label: '全部状态'
					},
					{
						value: '1',
						label: '离线'
					},
					{
						value: '2',
						label: '温度异常'
					},
					{
						value: '3',
						label: '烟感异常'
					},
					{
						value: '4',
						label: '设备异常'
					}
				],
				status: '',
				deviceType: '1'
			}
		},
		onReady() {
			this.getDeviceStatusMonitoring();
			// this.getDeviceTypeList();
		},
		methods: {
			//设备查询
			deviceChange(e) {
				// console.log(e);
				this.deviceType = e[0].value;
				this.device = e[0].label;
				
				this.getDeviceStatusMonitoring();
			},
			//状态查询
			statusChange(e) {
				// console.log(e);
				this.status = e[0].value;
				this.statusName = e[0].label;
				
				this.getDeviceStatusMonitoring();
			},
			getDeviceStatusMonitoring() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceStatusMonitoring({
					pageIndex: 1,
					pageSize: 100,
					deviceType: this.deviceType,
					status: this.status
				}).then((response) => {
					uni.hideLoading();
					this.deviceList = response.data.data;
				}).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>
	.dropdown {
		background-color: #fff;
		position: sticky;
		top: 88rpx;
		z-index: 999;
		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;

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

					.name1 {
						color: rgba(51, 51, 51, 1);
						font-weight: bold;
						max-width: 50%;
						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);
			}
		}
	}
</style>