water_affairs/pages/facility/my-map.vue

<template>
	<My_listbox ref="box" :pullDown="false"><!-- :latitude="latitude" :longitude="longitude"  -->
		<map name="map" style="width: 100%;height: 100vh;" scale="4" show-location :markers="markers"
			:include-points="markers" @markertap="onMarkerTap" @callouttap='usePort == "h5" ? onMarkerTap() : toDetail()'>
			<cover-view slot="callout">
				<cover-view class="customCallout" v-for="item in markers" :key="item.id" :marker-id="item.id">
					<cover-view class="title">
						设备信息
					</cover-view>
					<cover-view class="rep">
						<cover-view class="row">
							设备名称:<cover-view class="value u-line-1">{{ item.title || ' --' }}</cover-view>
						</cover-view>
						<cover-view class="row">
							设备编号:<cover-view class="value u-line-1">{{ item.serialnumber || ' --' }}</cover-view>
						</cover-view>
						<cover-view class="row ">
							设备状态:<cover-view class="status u-line-1">{{ item.status || ' --' }}</cover-view>
						</cover-view>
						<cover-view class="row" v-for="item1 in information" :key="item1.paramname">
							{{ item1.paramname }}:<cover-view class="value u-line-1">{{ item1.lastvalue + item1.unit ||
								'--' }}</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="botton" hover-class="navigator-hover">
						点击查看详情
					</cover-view>
				</cover-view>
			</cover-view>
		</map>

		<view class="popup" v-if="h5Popup">
			<view class="customCallout" style="padding: 10px;">
				<view class="title">
					设备信息
					<u-icon name="close" @click="h5Popup = false" :size="tovw('16px')" />
				</view>
				<view class="rep">
					<view class="row">
						设备名称:<view class="value u-line-1">{{ facility.title || ' --' }}</view>
					</view>
					<view class="row">
						设备编号:<view class="value u-line-1">{{ facility.serialnumber || ' --' }}</view>
					</view>
					<view class="row">
						设备状态:<view class="status u-line-1">{{ facility.status || ' --' }}</view>
					</view>
					<view class="row" v-for="item1 in information" :key="item1.paramname">
						{{ item1.paramname }}:<view class="value u-line-1">{{ item1.lastvalue + item1.unit || ' --' }}
						</view>
					</view>
				</view>
				<view class="botton" hover-class="navigator-hover" @click="toDetail">
					更多信息
				</view>
			</view>
		</view>
	</My_listbox>
</template>

<script>
export default {
	props: {
		markers: Array,
		tabHeight: {
			type: Number,
			default: 98
		}
	},
	name: 'My-map',
	data() {
		return {
			uninitialized: true,
			information: [],
			facility: {},
			h5Popup: false,
			checkId: 0
		};
	},
	created() {
		this.setLocation();
	},
	methods: {
		init(forcedUpdating = true) {
			this.$refs.box.setHeight("minus", this.tabHeight);
		},
		onMarkerTap(e) {
			this.checkId = e.detail.markerId
			this.h5Popup = this.usePort == 'h5';

			this.information = [];
			this.$Http.basic({
				"id": 20230711165702,
				"content": {
					"w_deviceid": e.detail.markerId
				}
			}).then(res => {
				console.log("设备实时数据查询", res)
				if (this.cutoff(res.msg)) return;
				this.information = res.data;
				if (this.usePort == 'h5') {
					this.facility = this.markers.find(v => v.id == e.detail.markerId);
				}
			})
		},
		async setLocation() {
			return;
			let res = this.location || await this.getLocation();
			this.__proto__.location = res;
			this.latitude = res.latitude;
			this.longitude = res.longitude;
		},
		toDetail() {
			console.log("toDetail")
			if (this.checkId == 0) return;
			wx.navigateTo({
				url: '/pages/facility/detail?id=' + this.checkId,
			})
		}
	},
}
</script>

<style lang="scss" scoped>
page {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}


.popup {
	position: absolute;
	top: 13%;
	right: 12%;
	z-index: 99999;
	padding: 10px;
	box-sizing: border-box;
}

.customCallout {
	width: 178px;
	background: rgba($color: #ffffff, $alpha: .8);
	border-radius: 4px;
	padding: 10rpx;
	box-sizing: border-box;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 22px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #333333;

		.icon {
			margin-right: 5px;
		}
	}

	.rep {
		margin-top: 5px;

		.row {
			display: flex !important;
			line-height: 17px;
			font-size: 12px;
			color: #333333;
			margin-top: 5px;

			.value {
				flex: 1;
				width: 0;
				line-height: 17px;
				font-size: 12px;
				color: #000;
			}

			.status {
				line-height: 17px;
				font-size: 12px;
				color: #3874F6;
			}
		}
	}

	.botton {
		position: relative;
		width: 100%;
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #3874F6;
		background: #EBF2FF;
		border: 1px solid #3874F6;
		border-radius: 4px;
		box-sizing: border-box;
		margin-top: 10px;
		z-index: 99999999999999;
	}
}
</style>