jp-housekeep-electric/pages/equipmentDataMonitoring/dataMonitoring-map.vue

<template>
	<view>
		<!-- <u-navbar title="设备数据监测"  title-color="#101010" > -->
		<view class="navbar-c">
			<view class="back">
				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
			</view>
			<view class="title">
				设备数据监测<image class="img" src="@/assets/img/refresh-line.svg"></image>
			</view>
			<view class="right" @click="toDataMonitoringList">
				<image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>列表
			</view>
		</view>

		<view class="slot" slot="right">
			<image class="img" src="@/assets/img/riLine-list-check-2.svg" mode=""></image>地图

		</view>
		</u-navbar>
		<view class="dropdown">
			<u-dropdown-change>
				<u-dropdown-item v-model="companyId" :title="device" :options="selectDeviceList"
					@change="deviceChange"></u-dropdown-item>
				<u-dropdown-item v-model="status" :title="state" :options="stateList" @change="stateChange"></u-dropdown-item>
			</u-dropdown-change>
		</view>
		<!-- 地图 -->
		<view class="map">
			<MapEquipment @onMoveStart="moveStart" @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked" @onload="mapdown"
				@clickMap="clickMap"></MapEquipment>

			<!-- 				<image class="img" src="@/assets/img/map.png" mode=""></image -->
			<!-- 标注1 -->
			<view class="location1" v-if="false">
				<image class="img" src="@/assets/img/antFill-alert Copy 1.svg" mode=""></image>
				<view class="corner">

				</view>
			</view>
			<!-- 标注2 -->
			<view class="location2" v-if="false">
				<view class="icon2-left">
					<image class="img1" src="@/assets/img/antFill-alert.svg" mode=""></image>
				</view>
				<view class="icon2-right">

					<view class="corner2-top">
						荆鹏软件园01
					</view>
					<view class="corner2-bottom">
						<image class="img2" src="@/assets/img/antFill-alert(2).svg"></image>正常
					</view>
				</view>
				<view class="corner2"></view>
			</view>


			<view class="card" v-if="deviceList.length>0">
				<swiper v-if="deviceList.length>0" :current="currentIndex" @change="swiperChange"
					slide-change-transition-end='swiperTransitionEnd' @transition="swiperTransition">
					<swiper-item v-for="(item,index) in deviceList" :key="index" style="height: 100%;">
						<view class="item" style="height: 100%; background-color: #ffffff;">
							<view class="title">
								<view class="icon-box">
									<image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
								</view>
								<view class="equipment">
									<view class="name1">
										{{item.name}}
									</view>
									<view class="name2">
										{{item.installationAddressSimple}}
									</view>
								</view>
								<!-- 状态 -->
								<view class="state">
									<view class="state1" v-if="item.temperatureStatus == '1'">
										<view class="icon"></view>
										<view class="text">
											温度正常
										</view>
									</view>
									<view class="state1" v-else>
										<view class="icon icon2"></view>
										<view class="text">
											温度异常
										</view>
									</view>
									<view class="state1" v-if="item.smokeStatus == '1'">
										<view class="icon"></view>
										<view class="text">
											烟感正常
										</view>
									</view>
									<view class="state1" v-else>
										<view class="icon icon2"></view>
										<view class="text">
											烟感异常
										</view>
									</view>
									<view class="state1" v-if="item.online">
										<view class="icon icon4"></view>
										<view class="text">
											设备在线
										</view>
									</view>
									<view class="state1" v-else>
										<view class="icon icon3"></view>
										<view class="text">
											设备离线
										</view>
									</view>
								</view>
							</view>
							<!-- 设备信息 -->
							<view class="infos">
								<view class="infos-item">
									<view class="item-title">
										当前电流：
									</view>
									<view class="item-value">
										{{item.remoteMonitorRecord.dcaTotal.toFixed(2)}}A
									</view>
								</view>
								<view class="infos-item">
									<view class="item-title">
										当前电压：
									</view>
									<view class="item-value">
										{{item.remoteMonitorRecord.dcvTop.toFixed(2)}}V
									</view>
								</view>
								<view class="infos-item">
									<view class="item-title">
										当前温度：
									</view>
									<view class="item-value">
										{{item.remoteMonitorRecord.temperatureTop}}°C
									</view>
								</view>
								<view class="infos-item">
									<view class="item-title">
										当前功率：
									</view>
									<view class="item-value">
										{{item.remoteMonitorRecord.totalPower.toFixed(2)}}kW
									</view>
								</view>
								<view class="infos-item">
									<view class="item-title">
										当前功率因数：
									</view>
									<view class="item-value">
										{{item.remoteMonitorRecord.averPowerFactor.toFixed(2)}}
									</view>
								</view>
								<view class="infos-item">
									<view class="item-title">
										平均功率因数：
									</view>
									<view class="item-value">
										{{item.remoteMonitorRecord.averPowerFactorHistory}}
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

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

<script>
	import MapEquipment from '@/components/Map-equipment.vue';
	import * as API from '@/apis/pagejs/index.js'
	import * as WxJsApi from '@/apis/utils/wxJsApi.js'

	export default {
		components: {
			MapEquipment,

		},
		data() {
			return {
				currentIndex: 0,
				show2: false, // 状态选择
				state: '全部状态',
				stateList: [{
						label: '全部状态',
						value: ''
					},
					{
						label: '设备正常',
						value: '0'
					},
					{
						label: '设备离线',
						value: '1'
					},
					{
						label: '温度异常',
						value: '2'
					},
					{
						label: '烟感异常',
						value: '3'
					},
					{
						label: '设备异常',
						value: '4'
					}
				],
				show1: false, // 设备选择
				device: '全部设备',
				selectDeviceList: [],
				deviceList: [],
				pageIndex: 1,
				companyId: '',
				status: '',
				latitude: "",
				longitude: "",
				message: '',
				value1: '',
				value2: '',
				options1: [{
						label: '荆鹏集团',
						value: 1,
					},
					{
						label: '青少年宫',
						value: 2,
					},
					{
						label: '荆州院子',
						value: 3,
					},

				],
				options2: [{
						label: '设备离线',
						value: 1,
					},
					{
						label: '温度异常',
						value: 2,
					},
					{
						label: '电压异常',
						value: 3,
					},
					{
						label: '功率因数异常',
						value: 4,
					},
				],
			}
		},
		onReady() {
			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})

			this.$refs.amap.init();
			this.getList();
			this.getAlarmConfiguration();
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.amap.init();
				this.getList();
			})
		},
		watch: {
			companyId(newval) {
				for (var i = 0; i < this.selectDeviceList.length; i++) {
					if (this.selectDeviceList[i].value == this.companyId) {
						this.device = this.selectDeviceList[i].label
					}
				}
			},
			status(newval) {
				for (var i = 0; i < this.stateList.length; i++) {
					if (this.stateList[i].value == this.status) {
						this.state = this.stateList[i].label
					}
				}
			}
		},
		methods: {
			swiperTransitionEnd(e) {
				// console.log(e)
			},
			swiperTransition(e) {
				// console.log(e)
			},
			swiperChange(e) {
				console.log(e)
				this.currentIndex = e.detail.current;
				let bounds = this.$refs.amap.logMapInfo();
				this.$refs.amap.updateIcon(this.deviceList[this.currentIndex]);
			},
			// 状态查询
			stateChange(e) {
				this.getList();
			},
			// 设备查询
			deviceChange(e) {
				this.getList();
			},
			// 异常查询条件
			getAlarmConfiguration() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.alarmConfiguration().then((response) => {
					uni.hideLoading();
					var list2 = [];

					if (response.data.companyInfoList && response.data.companyInfoList.length != 0) {
						list2 = response.data.companyInfoList.map(item => {
							return {
								label: item.name,
								value: item.id
							}
						});
					}
					list2.unshift({
						value: '',
						label: '全部设备'
					});

					this.selectDeviceList = list2;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//设备list
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
					pageIndex: this.pageIndex,
					pageSize: 1000,
					companyId: this.companyId,
					status: this.status
				};
				API.homePageDeviceData(data).then((res) => {
					uni.hideLoading()
					var list = res.data.data;
					this.deviceList = list;
					this.$refs.amap.setList(list);
					
					if (list.length != 0) {
						this.$refs.amap.updateIcon(list[this.currentIndex]);
					}
					this.$forceUpdate();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toDataMonitoringList() {
				uni.navigateBack()
			},
			clickMap(obj) {
				//this.show = false;
				console.log(obj)
				if (obj == null || obj.type == null) return;
				if (obj.type == 'charger') {
					if (obj.obj != null) {

						let index = this.deviceList.findIndex(item => item.id == obj.obj.id);
						this.currentIndex = index;
						//('find Index'+index);
						this.$refs.amap.updateIcon(obj.obj);
					}

				}
			},
			mapdown() {
				//this.isReady = true;
				//this.$refs.amap.getLocation ();
				//let state = {};
				uni.getSystemInfo({
					success: (res) => {

						let scrollH = res.windowHeight; // - uni.upx2px(88) - navbarH
						let scrollW = res.windowWidth;
						this.$refs.amap.setMyStyle("height:" + (scrollH - 88 - 50) + "px;width:" + scrollW +
							"px;");

						// this.$refs.amap.setList([{
						// 		name: "amap1",
						// 		status: 1,
						// 		longitude: 112.276527,
						// 		latitude: 30.306427,
						// 	},
						// 	{
						// 		name: "amap2",
						// 		status: 1,
						// 		longitude: 112.276663,
						// 		latitude: 30.307215,
						// 	}

						// ])
					}
				})

			},
			moveEnd(e) {
				//('moveEnd')
				//this.close_all();
				let posCenter = this.$refs.amap.logMapInfo();
				////('posCenter'+JSON.stringify(posCenter))
				
				if (this.latitude == e.center.lat && this.longitude == e.center.lng) {
					return
				}
				this.latitude = e.center.lat;
				this.longitude = e.center.lng;
			},
			moveStart(e) {
				//this.close_all();
			},
			onClicked(e) {
				console.log(e)
				//this.close_all();
				////('onClicked e'+JSON.stringify(e))
			},
		}
	}
</script>

<style lang="scss" scoped>
	// .chargerCard {
	// 	z-index: 999;
	// 	background-color: #fff;
	// 	margin: 0 24rpx;
	// 	border-radius: 16rpx;
	// 	// overflow: hidden;
	// 	bottom: 68px;
	// 	left: 0;
	// 	right: 0;
	// 	position: fixed;
	// 	// height: 380rpx;



	// 	// @include themeify{
	// 	// 	height:themed('cardHeight'); 
	// 	// } 

	// }

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

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

	.dropdown {
		background-color: #fff;

		//  position: sticky;
		//   top: 0;
		// z-index: 999;
	}

	// 地图
	.map {
		position: relative;

		.img {
			width: 100%;
			height: 100vh;
		}

		::v-deep.location1 {
			width: 36px;
			height: 36px;

			text-align: center;
			border: 2px solid #FF3D00;
			border-radius: 999px;
			display: flex;
			align-items: center;
			justify-content: center;
			//position: relative;
			background: white;

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

			.corner {
				width: 0;
				height: 0;
				position: absolute;
				top: 78rpx;
				left: 0;
				right: 0;
				margin: auto;
				border-bottom: 8rpx solid transparent;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
				border-top: 12rpx solid #FF3D00;
			}
		}

		::v-deep.location2 {
			width: 280rpx;
			border-radius: 50px;
			background-color: #27B148;
			display: flex;
			// position: absolute;
			// top: 370rpx;
			// left: 280rpx;

			.icon2-left {
				width: 72rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border: 1px solid rgba(0, 185, 98, 100);
				border-radius: 999px;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;

				.img1 {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.icon2-right {
				color: #ffffff;
				line-height: 36rpx;
				padding-left: 8rpx;
				font-size: 28rpx;

				.corner2-top {
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					width: 200rpx;
					text-overflow: ellipsis;
				}

				.corner2-bottom {
					font-size: 24rpx;

					.img2 {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.corner2 {
				width: 0;
				height: 0;
				position: absolute;
				top: 72rpx;
				left: 0;
				right: 0;
				margin: auto;
				border-bottom: 6px solid transparent;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 8px solid #27B148;

			}
		}

		// 卡片
		.card {
			border-radius: 8px;
			border: 1px solid rgba(232, 232, 232, 1);
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
			background-color: rgba(255, 255, 255, 1);
			position: fixed;
			left: 24rpx;
			right: 24rpx;
			bottom: 0rpx;

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

				.title {
					display: flex;
					align-items: flex-start;

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

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

					.equipment {
						margin-left: 16rpx;

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

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

					// 状态
					.state {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: flex-end;
						margin-left: auto;
						flex: 1;

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

							.icon {
								width: 16rpx;
								height: 16rpx;
								border-radius: 99px;
								background-color: rgba(22, 119, 255, 1);
								margin-right: 8rpx;
							}

							.icon2 {
								background-color: #FF4F3F;
							}
							
							.icon3 {
								background-color: #C2C2C2;
							}
							.icon4{
								background-color: rgba(0,185,98,1);
							}
						}
					}
				}

				// 设备信息
				.infos {
					margin-top: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					font-size: 24rpx;

					.infos-item {

						display: flex;
						margin-bottom: 16rpx;

						.warning {
							color: rgba(255, 61, 0, 1);
						}
					}
				}
			}
		}
	}
</style>