添加兼容H5弹窗

pages/index/modules/my-map.vue

@@ -1,7 +1,59 @@
 <template>
-	<view>
-		<map name="map" style="width: 100%;height: 100vh;" subkey="UVVBZ-UOGWZ-ZUWXC-TJQMT-TUWLO-IVFTN" layer-style="1" show-location
-			enable-poi></map>
+	<view class="container"><!-- enable-poi layer-style="1" subkey="UVVBZ-UOGWZ-ZUWXC-TJQMT-TUWLO-IVFTN" -->
+		<map name="map" style="width: 100%;height: 100vh;" scale="10" :latitude="latitude" :longitude="longitude"
+			show-location :markers="markers" @markertap="onMarkerTap">
+			<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">
+					更多信息
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -11,13 +63,69 @@ export default {
 	data() {
 		return {
 			//subkey: 'GUCBZ-FWJCQ-AOQ5J-BUCCC-V7MJV-2QBDD',微信小程序个性化样式KEY
+			latitude: 30.746129,
+			longitude: 120.755486,
+			markers: [],
+			information: [],
+			facility: {},
+			h5Popup: false,
 		};
 	},
 	created() {
-		// #ifdef H5
-		console.log("H5")
-		// #endif
-	}
+		this.setLocation();
+		this.getList()
+	},
+	methods: {
+		getList() {
+			this.$Http.basic({
+				"id": 20230711144102,
+				"content": {
+					"pageNumber": 1,
+					"pageSize": 9999,
+					"where": {
+						"condition": "",
+						"areaname": ""
+					}
+				}
+			}).then(res => {
+				console.log("设备列表", res)
+				if (this.cutoff(res.msg)) return;
+				this.markers = res.data.filter(v => v.latitude).map(v => {
+					v.id = v.w_deviceid - 0;
+					v.title = v.devicename;
+					if (this.usePort == 'h5') v.iconPath = require("../../../static/img/icon.png");
+					v.customCallout = { display: 'BYCLICK', anchorY: -10 }
+					return v
+				});
+			})
+		},
+		onMarkerTap(e) {
+			console.log("单击标点", e)
+			this.h5Popup = true;
+			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);
+					console.log(this.facility)
+				}
+			})
+		},
+		async setLocation() {
+			let res = this.location || await this.getLocation();
+			this.__proto__.location = res;
+			this.latitude = res.latitude;
+			this.longitude = res.longitude;
+			console.log("地图", res)
+		}
+	},
 }
 </script>
 
@@ -27,4 +135,81 @@ page {
 	height: 100vh;
 	overflow: hidden;
 }
+
+.container {
+	position: relative;
+
+	.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 {
+		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;
+
+	}
+}
 </style>