IOT/SourceCode/ui/fbs-ui_app2/pages_map/map.vue

<template>
	<view>
		<view class="map-box"><map scale="12" class="map" :latitude="latitude" :longitude="longitude" @markertap="markerClick"  :markers="markers"  style=""></map></view>
		<view v-if="showMarkerWindow" class="marker-info">
			<view class="close-btn" @click="showMarkerWindow = false"><image src="/static/image/close.png"></image></view>
			<scroll-view scroll-y="true" style="height: 100%;">
				<u-cell-group>
					<u-cell :title="targetInfo.name" :label="targetInfo.address"></u-cell>
					<u-cell title="联系人" :label="targetInfo.corporation_name" :value="targetInfo.phone"></u-cell>
					<u-cell title="油烟" :label="targetInfo.smoke" :value="'超标：' + targetInfo.smoke_over"></u-cell>
					<u-cell title="颗粒物" :label="targetInfo.voc_density" :value="'超标：' + targetInfo.voc_over"></u-cell>
				</u-cell-group>
			</scroll-view>
		</view>
		<tabbar :currentTab="1"></tabbar>
	</view>
</template>

<script>
import api from "@/common/api.js";
import { log } from "@/utils/base.js";
import tabbar from "@/components/tabbar";
export default {
	components: {
		tabbar,
	},
	data() {
		return {
			markerId: 0,
			latitude: 31.98774,
			longitude: 118.810091,
			data: [],
			markers: [
				// {
				// 	latitude: 39.909,
				// 	longitude: 116.39742,
				// 	width: 30,
				// 	height: 30,
				// 	iconPath: "/static/image/blue-location.png",
				// },
			],
			search: {
				pageIndex: 1,
				pageSize: 10000,
				params: {
					org_id: "",
				},
			},
			targetInfo: {},
			showMarkerWindow: false,
		};
	},
	onLoad(opt) {
		this.id = opt.id ? decodeURIComponent(opt.id) : "";
		const title = opt.name ? decodeURIComponent(opt.name) : "";
		if (title) {
			uni.setNavigationBarTitle({
				title: `在线监测 — ${title}`,
			});
		}
	},
	mounted() {
		this.getOrg();
	},
	methods: {
		getOrg() {
			api.getOrgList().then(({ data }) => {
				this.search.params.org_id = data[0].key;
				this.getInfo();
			});
		},
		getInfo() {
			api.getCompanyListByOrg(this.search).then(({ rows, total }) => {
				this.data = rows;
				if (rows && rows.length) {
					let row = undefined;
					rows.forEach(v => {
						if (v.company_id == this.id) {
							row = v;
						}
						const mark = {
							id: v.company_id,
							latitude: v.latitude,
							longitude: v.longitude,
							width: 30,
							height: 30,
							iconPath: v.run_state == 0 ? "/static/image/blue-location.png" : "/static/image/red-location.png",
							// customCallout: {
							// 	anchorX: -1,
							// 	anchorY: 46,
							// 	display: "ALWAYS",
							// },
						};
						this.markers.push(mark);
					});
					row = row || rows[0];
					if (row) {
						this.latitude = row.latitude;
						this.longitude = row.longitude;
					}
				}
			});
		},
		markerClick(e) {
			//console.log(e);
			this.showMarkerWindow = false;
			this.markerId = e.detail.markerId;
			var item = this.data.find(v => v.company_id == this.markerId);
			//console.log(item);
			if (item) {
				this.getTargetInfo(item);
			} else {
				uni.showToast({
					title: "暂未有该商户信息",
				});
			}
		},
		getTargetInfo(item) {
			this.targetInfo.name = item.name;
			this.targetInfo.address = item.address;
			this.targetInfo.corporation_name = item.corporation_name;
			this.targetInfo.phone = item.phone;
			this.targetInfo.smoke = item.smoke;
			this.targetInfo.smoke_over = item.smoke_over;
			this.targetInfo.voc_density = item.voc_density;
			this.targetInfo.voc_over = item.voc_over;
			this.showMarkerWindow = true;
		},
	},
};
</script>

<style lang="scss">
.map-box {
	width: 100%;
	height: calc(100vh - 94px);
	overflow: hidden;

	.map {
		width: 100%;
		height: calc(100vh - 72px);
	}
}
// #ifndef H5
.map-box {
	height: calc(100vh - 44px);

	.map {
		height: calc(100vh - 22px);
	}
}

// #endif
// #ifdef H5
.map-box {
	height: calc(100vh - 94px);

	.map {
		height: calc(100vh - 72px);
	}
}
// #endif
.marker-info {
	background: #fff;
	height: 265px;
	width: calc(100vw - 30px);
	position: absolute;
	bottom: 50px;
	display: flex;
	flex-direction: column;
	padding: 15px;
	border-radius: 10px 10px 0 0;
	border-top: 5px solid $uni-color-primary;
	border-bottom: none;
	background-color: #f5f5f5;
	.close-btn {
		position: absolute;
		right: 5px;
		top: 5px;
		width: 30px;
		height: 30px;
		cursor: pointer;
		background-color: $uni-color-primary;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		z-index: 1000;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>