hitap-chat/pages/create/create.vue

<template>
	<view class="create-investigation">
		<top-title title="排查选择" class="custom_bg" :rightWidth='60'>
			<template slot="right">
				<image src="/static/map/daohang.png" class="right-dh" mode="" @click="handleOpenMapNav">
				</image>
			</template>
		</top-title>

		<view class="page-body">
			<!-- <map :latitude="latitude" :longitude="longitude" :markers="markers" /> -->
			<map id="myMap" ref="myMaps" class="map" style="width: 100%; height: 100%" :scale="scale"
				:latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline"
				@regionchange="regionchange" />
			<cover-image class="curCenter" src="../../static/map/d3.png" alt="" srcset="" />
			<cover-view class="location">
				<cover-image src="../../static/map/3746.png" alt="" srcset="" @click="getCurCenter" />
			</cover-view>
		</view>
		<mapNavigation ref="mapNavigation" />
		<view class="page-footer">


			<view class="init-content" v-if="!isChanging">
				<view class="footer-content">
					<text class="title">根据当前定位信息，您要排查的是这条路吗？</text>
					<text class="position-name">{{curSections.name || '未选择'}}</text>
				</view>
				<three class="footer-buttons" first-text="更换" second-text="智能排查" next-text="人工排查" :second-primary="true"
					@first="isChanging = true" @last="nextStep" />
			</view>
			<change :sectionsList="sectionsList" @onSearch="onSearch" @changeCode="changeCode" v-else />
		</view>
	</view>
</template>

<script>
	import TopTitle from "../../components/top-title.vue";
	import Three from "../../components/bottom-button/three.vue";
	import Change from "./Change.vue";
	import {
		locationRequest
	} from '@/libs/util/permission-request.js'
	import {
		wgs84LL2gcjLL2
	} from "@/pages/map/c.js";
	import mapNavigation from "./map-navigation.vue";

	export default {
		components: {
			Change,
			TopTitle,
			Three,
			mapNavigation
		},
		data() {
			return {
				latitude: null, // 默认定在首都
				longitude: null,
				scale: 17, // 默认16
				// markers: [],
				markerHeight: 60,
				isChanging: false,
				res: null,
				sectionsList: [],
				search: '',
				sectionCode: null,
				mapContext: null,
				timer: null,
				// polyline: []
			};
		},
		computed: {
			curSections() {
				return this.sectionsList.find(item => item.sectionCode == this.sectionCode) || {}
			},
			polyline() {
				const arr = this.sectionsList.filter(item => item.type == 1).map(item => ({
					id: item.sectionCode,
					name: item.name,
					arrowLine: true,
					color: item.sectionCode == this.sectionCode ? "#CC2936" : '#4588E6',
					width: 8,
					id: 1,
					points: item.position,
				}))
				return arr
			},
			markers() {
				const sectionsMarker = this.sectionsList.filter(item => item.type == 2).map(item => {
					return {
						id: item.sectionCode,
						latitude: item.position[0].latitude,
						longitude: item.position[0].longitude,
						iconPath: "/static/icon/fill_position.svg",
					}
				})
				return sectionsMarker
			}
		},
		mounted() {
			this.mapContext = uni.createMapContext('myMap', this).$getAppMap()
		},
		methods: {
			handleOpenMapNav() {
				if (!this.sectionCode) return this.$.toast('请选择路段或路口')
				this.$refs.mapNavigation.open({
					name: this.curSections.name,
					latitude: this.curSections.position[
						0].latitude,
					longitude: this.curSections.position[
						0].longitude
				})
			},
			onSearch(value) {
				this.search = value
				this.getList()
			},
			getCurCenter() {
				console.log('回到定位点')
				this.initPage(this.curSections)
			},
			nextStep() {
				if (!this.sectionCode) return this.$.toast('请选择路段或路口')
				this.$.open("/pages/investigation/task" + "?id=" + '' +
					'&sectionId=' + this.sectionCode +
					'&taskName=' + this.curSections.name +
					'&type=' + 'add' +
					'&sectionCode=' + this.sectionCode + '&sectionType=' + this.curSections.type);
			},
			changeCode(code) {
				this.sectionCode = code
				this.isChanging = false
			},
			moveUserToMapViewCenter() {
				// #ifdef APP-PLUS
				this.mapContext.getCurrentCenter((state, point) => {
					if (state == 0) {
						console.log('当前地图中心点', point)
						this.latitude = point.latitude
						this.longitude = point.longitude
						clearTimeout(this.timer)
						this.timer = setTimeout(() => {
							this.getList();
						}, 500)
					}
				})
				// #endif
			},
			regionchange(e) {
				console.log('地图视野变化')
				this.moveUserToMapViewCenter()
			},
			getList() {
				if (!this.longitude || !this.latitude) {
					return
				}
				this.sectionCode = null
				this.sectionsList = []
				const data = {
					x: this.longitude,
					y: this.latitude,
					search: this.search
				};
				this.$.showLoading()
				this.$request
					.globalRequest('/hiddenDanger/highDanger/getNearRoadInfo?pageNum=1&pageSize=10', data, 'POST')
					.then(res => {
						if (res.code === 200) {
							console.log('返回数据', res)
							this.sectionsList = res.result;
							if (this.sectionsList.length) {
								this.sectionCode = this.sectionsList[0].sectionCode
							}
						} else {
							this.$.toast(res.message)
						}
					}).finally(() => {
						this.search = ''
						this.$.hideLoading()
					})
			},
			async initPage() {
				// #ifdef H5
				this.longitude = 120.480677
				this.latitude = 36.147266
				// #endif
				// #ifdef APP-PLUS
				const locationInfo = await locationRequest()
				const [longitude, latitude] = wgs84LL2gcjLL2(locationInfo.longitude, locationInfo.latitude);
				this.longitude = longitude
				this.latitude = latitude
				// #endif
				// #ifdef H5
				this.getList()
				// #endif
				// 当前中心点变化，自动调取接口 见moveUserToMapViewCenter
				// this.getList()
			}
		},
		onLoad() {
			this.initPage()
		}
	}
</script>

<style lang="scss" scoped>
	.create-investigation {
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;

		.right-dh {
			display: inline-block;
			width: 30px;
			height: 30px;
		}

		.page-body {
			width: 100%;
			padding-top: calc(var(--status-bar-height) + 88rpx);
			//height     : calc(100vh - var(--status-bar-height) - 88rpx);
			position: relative;
			z-index: 1;
			flex: 1;

			.map {
				width: 100vw;
				height: 100%;
			}

			.curCenter {
				position: absolute;
				width: 30px;
				height: 30px;
				z-index: 9999;
				left: 50%;
				top: 50%;
				transform: translate(-15px, -15px);
				background: transparent;
			}

			.location {
				position: absolute;
				width: 48px;
				height: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 24rpx;
				bottom: 24rpx;
				background: #fff;
				border-radius: 16px;
				z-index: 99999;

				cover-image {
					width: 32px;
					height: 32px;
				}
			}

		}

		.page-footer {
			width: 100vw;
			min-height: 280rpx;
			//z-index: 9999999999999;
			overflow: visible;
			position: relative;


			.init-content {
				background: #ffffff;
				width: calc(100vw - 32rpx);
				margin: 0 auto;

				.footer-content {
					padding: 32rpx 0;
					text-align: center;
					display: block;

					.title {
						text-align: center;
						font-size: 28rpx;
						color: #777777;
					}

					.position-name {
						font-size: 36rpx;
						color: #333333;
						padding: 24rpx 0;
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.footer-buttons {
					width: calc(100% - 72rpx);
					margin-top: 0;
				}
			}
		}
	}
</style>
<style lang="scss">
	.amap-logo,
	.amap-copyright {
		display: none !important;
	}
</style>