SHZHJCYJPTYWXTAPP/pages/yjxt/dangerarea/dangerareamap.vue

<!--
 * @Title: 
 * @Description: 危险区地图
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="myMap" :style="mapStyles" :latitude="latitude" :longitude="longitude" :markers="markets"
					enable-zoom="true" :polygons="polygons" :polyline="polylines" :scale="scale">
				</map>
			</view>
			<view :style="dataStyles">
				<uni-collapse @change="searchAreaStatus">
					<uni-collapse-item :show-animation="true" :open="true">
						<template v-slot:title>
							<view class="view-flex-block-center" style="height: 40px;width: 100%;">
								<view class="view-flex-inline-center">
									<text v-if="showSearch" style="color: coral;font-size: 1rem;">点击全屏地图</text>
									<text v-else style="color: coral;font-size: 1rem;">点击还原</text>
								</view>
							</view>
						</template>
					</uni-collapse-item>
				</uni-collapse>
				<view v-if="showSearch">
					<view class="view-flex-inline" style="color: gray;margin-left: 10px;">图层: </view>
					<view class="view-flex-inline" style="margin-top: 5px;padding-left: 10px;">
						<uni-data-checkbox :multiple="true" mode="button" v-model="mapCheck" :localdata="mapItems"
							@change="mapChange"></uni-data-checkbox>
					</view>
					<view class="view-flex-inline" style="color: gray;margin-left: 10px;">关联转移路线: </view>
					<view class="view-flex-inline" style="margin-top: 5px;">
						<view v-for="leaveline in leaveLines" :key="leaveline.id"
							class="view-flex-block-center view-border" style="border-radius: 5px; margin-left: 10px;"
							@click="onYjDangerAreaLinkLineClick(leaveline)">
							<view class="view-btn-text text-under-line"
								style="color: deepskyblue;font-size: 0.7rem;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;">
								{{leaveline.leaveLineName}}
							</view>
						</view>
					</view>
					<view class="view-flex-inline" style="color: gray;margin-left: 10px;margin-top: 5px;">关联站点: </view>
					<view class="view-flex-inline" style="margin-top: 5px;">
						<view v-for="rtu in rtuPoints" :key="rtu.id" class="view-flex-block-center view-border"
							style="border-radius: 5px; margin-left: 10px;" @click="onYjDangerAreaLinkRtuClick(rtu)">
							<view class="view-btn-text text-under-line"
								style="color: deepskyblue;font-size: 0.7rem;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;">
								{{rtu.stName}}
							</view>
						</view>
					</view>
					<view class="view-flex-inline" style="color: gray;margin-left: 10px;margin-top: 5px;">关联家庭户: </view>
					<view class="view-flex-inline" style="margin-top: 5px;">
						<view v-if="data.familyCount>0" class="view-flex-block-center view-border"
							style="border-radius: 5px; margin-left: 10px;" @click="onYjDangerAreaLinkFamilyClick()">
							<view class="view-btn-text text-under-line"
								style="color: deepskyblue;font-size: 0.7rem;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;">
								共有{{data.familyCount}}户
							</view>
						</view>
						<view v-else>
							<view style="color: deepskyblue;font-size: 0.7rem;padding-left: 10px;">暂无关联家庭户</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	import http from '@/http/api.js';
	import {
		devUrl,
		prodUrl
	} from '@/common/setting';
	export default {
		components: {},
		data() {
			return {
				title: '',
				id: 0,
				showSearch: true,
				areaList: [],
				areaIndex: 0,
				latitude: 40.848119,
				longitude: 111.755426,
				zoom: true,
				scale: 13,
				dangerAreaPoints: [],
				markets: [],
				polygons: [],
				polylines: [],
				mapStyles: {
					width: '100%',
					height: '600px'
				},
				dataStyles: {
					width: '100%',
					height: '300px',
				},
				data: {},
				mapCheck: [0],
				mapItems: [{
						text: '危险区',
						value: 0
					},
					{
						text: '转移路线',
						value: 1
					},
					{
						text: '站点',
						value: 2
					},
					{
						text: '家庭户',
						value: 3
					}
				],
				leaveLines: [],
				rtuPoints: [],
				familyPoints: [],
				mapContext: null,
				dangerStatus: '1',
				isShowDangerArea: true,
				isShowLine: false,
				isShowSite: false,
				isShowFamily: false
			}
		},
		computed: {},
		onShow() {

		},
		onLoad(options) {
			//this.mapContext = uni.createMapContext('myMap', this);
			this.mapStyles.height = (uni.getWindowInfo().windowHeight - 50 - 300) + "px";
			this.id = options.id;
			this.baseURL = process.env.NODE_ENV === 'development' ? devUrl : prodUrl;
			this.getDetail();
		},
		onReady() {
			//console.log("onReady" + JSON.stringify(uni.getWindowInfo()))
			//this.mapStyles.height = (uni.getWindowInfo().windowHeight - 75 - 20) + "px";
			this.mapContext = uni.createMapContext('myMap', this);
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchAreaStatus(e) {
				if (e.length > 0) {
					this.showSearch = true;
					this.mapStyles.height = (uni.getWindowInfo().windowHeight - 50 - 300) + "px";
					this.dataStyles.height = "300px";
				} else {
					this.showSearch = false;
					this.mapStyles.height = (uni.getWindowInfo().windowHeight - 50 - 50) + "px";
					this.dataStyles.height = "50px";
				}
			},
			getDetail() {
				let that = this;
				let postData = {};
				postData['id'] = this.id;
				http.request({
					url: '/galaxy-business/map/dangerarea/detail',
					method: 'GET',
					data: postData
				}).then(res => {
					if (res.data != null) {
						that.data = res.data;
						that.title = res.data.dangerAreaName;
						that.leaveLines = res.data.leaveLines;
						that.rtuPoints = res.data.rtus;
						that.familyPoints = res.data.familyPoints;
						that.dangerStatus = res.data.dangerStatus;
						that.dangerAreaPoints = res.data.points;
						let p = {};
						let ps = res.data.points.map(item => {
							let l = gcoord.transform(
								[item.pointLng, item.pointLat],
								gcoord.WGS84,
								gcoord.GCJ02
							);
							return {
								latitude: l[1],
								longitude: l[0],
							}
						})
						p['points'] = ps;
						let dashArray = [];
						dashArray.push(4);
						dashArray.push(10);
						p['dashArray'] = dashArray;
						if (res.data.dangerStatus == '1') {
							p['strokeColor'] = '#FF0000';
							p['fillColor'] = '#F72C5B7D';
						} else {
							p['strokeColor'] = '#FC8452';
							p['fillColor'] = '#FAC8587D';
						}
						that.polygons.push(p);


						// let marketPoints = res.data.rtus.map(item => {
						// 	let rtu = {};
						// 	rtu['iconPath'] = '/static/images/icon_warning.png';
						// 	rtu['id'] = parseInt(item.id);
						// 	let r = gcoord.transform(
						// 		[item.stLong, item.stLat],
						// 		gcoord.WGS84,
						// 		gcoord.GCJ02
						// 	);
						// 	rtu['latitude'] = r[1];
						// 	rtu['longitude'] = r[0];
						// 	rtu['width'] = 20;
						// 	rtu['height'] = 20;
						// 	let label = {};
						// 	label['content'] = item.stName;
						// 	label['color'] = '#000000';
						// 	label['bgColor'] = '#ffffff';
						// 	label['anchorY'] = -40;
						// 	label['borderWidth'] = 1;
						// 	label['borderColor'] = '#ff0000';
						// 	label['padding'] = 4;
						// 	rtu['label'] = label;
						// 	return rtu;
						// });
						// that.markets = marketPoints;


						let c = gcoord.transform(
							[res.data.centerPointLng, res.data.centerPointLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						that.latitude = c[1];
						that.longitude = c[0];
					}
				}).catch(err => {
					console.log(err)
				})
			},
			mapChange(e) {
				let selectDangerArea = false;
				let selectLine = false;
				let selectSite = false;
				let selectFamily = false;
				for (let i = 0; i < this.mapCheck.length; i++) {
					let value = this.mapCheck[i];
					if (value == 0) {
						selectDangerArea = true;
					} else if (value == 1) {
						selectLine = true;
					} else if (value == 2) {
						selectSite = true;
					} else if (value == 3) {
						selectFamily = true;
					}
				}
				if (selectDangerArea) {
					if (!this.isShowDangerArea) {
						let p = {};
						let ps = this.dangerAreaPoints.map(item => {
							let l = gcoord.transform(
								[item.pointLng, item.pointLat],
								gcoord.WGS84,
								gcoord.GCJ02
							);
							return {
								latitude: l[1],
								longitude: l[0],
							}
						})
						p['points'] = ps;
						let dashArray = [];
						dashArray.push(4);
						dashArray.push(10);
						p['dashArray'] = dashArray;
						if (this.dangerStatus == '1') {
							p['strokeColor'] = '#FF0000';
							p['fillColor'] = '#F72C5B7D';
						} else {
							p['strokeColor'] = '#FC8452';
							p['fillColor'] = '#FAC8587D';
						}
						this.polygons.push(p);
						this.isShowDangerArea = true;
					}
				} else {
					this.polygons = [];
					this.isShowDangerArea = false;
				}
				if (selectLine) {
					if (!this.isShowLine) {
						if (this.leaveLines != undefined && this.leaveLines != null && this.leaveLines.length > 0) {
							let line = this.leaveLines[0];
							this.getYjDangerAreaLineDetail(line);
						}
						this.isShowLine = true;
					}
				} else {
					this.polylines = [];
					this.isShowLine = false;
				}
				let rtus = [];
				if (selectSite) {
					rtus = this.rtuPoints.map(item => {
						let rtu = {};
						rtu['iconPath'] = '/static/images/icon_warning.png';
						rtu['id'] = parseInt(item.id);
						let r = gcoord.transform(
							[item.stLong, item.stLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						rtu['latitude'] = r[1];
						rtu['longitude'] = r[0];
						rtu['width'] = 20;
						rtu['height'] = 20;
						let label = {};
						label['content'] = item.stName;
						label['color'] = '#000000';
						label['bgColor'] = '#ffffff';
						label['anchorY'] = -40;
						label['borderWidth'] = 1;
						label['borderColor'] = '#ff0000';
						label['padding'] = 4;
						rtu['label'] = label;
						return rtu;
					});

					this.isShowSite = true;
				} else {
					this.isShowSite = false;
				}
				let familys = [];
				if (selectFamily) {
					familys = this.familyPoints.map(item => {
						let rtu = {};
						rtu['iconPath'] = '/static/images/home.png';
						rtu['id'] = parseInt(item.id);
						let r = gcoord.transform(
							[item.longitude, item.latitude],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						rtu['latitude'] = r[1];
						rtu['longitude'] = r[0];
						rtu['width'] = 20;
						rtu['height'] = 20;
						let label = {};
						label['content'] = item.personName;
						label['color'] = '#000000';
						label['bgColor'] = '#ffffff';
						label['anchorY'] = -40;
						label['borderWidth'] = 1;
						label['borderColor'] = '#ff0000';
						label['padding'] = 4;
						rtu['label'] = label;
						return rtu;
					});

					this.isShowFamily = true;
				} else {
					this.isShowFamily = false;
				}
				let markets = rtus.concat(familys)
				console.log(JSON.stringify(markets))
				this.markets = markets;
			},
			onYjDangerAreaLinkLineClick(line) {
				let that = this;
				if (this.isShowLine) {
					this.$nextTick(() => {
						that.getYjDangerAreaLineDetail(line);
					})
				}
			},
			getYjDangerAreaLineDetail(line) {
				let that = this;
				let postData = {};
				postData['id'] =line.id;
				http.request({
					url: '/galaxy-business/map/leaveline/detail',
					method: 'GET',
					data: postData
				}).then(res => {
					if (res.data != null) {
						that.polylines = [];
						let p = {};
						let ps = res.data.points.map(item => {
							let l = gcoord.transform(
								[item.pointLng, item.pointLat],
								gcoord.WGS84,
								gcoord.GCJ02
							);
							return {
								latitude: l[1],
								longitude: l[0],
							}
						})
						p['points'] = ps;
						if (that.dangerStatus == '1') {
							p['color'] = '#FAC858FF';
						} else {
							p['color'] = '#F72C5BFF';
						}
						p['width'] = 4;
						that.polylines.push(p);
						let c = gcoord.transform(
							[line.centerPointLng, line.centerPointLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						that.mapContext.moveToLocation({
							longitude: c[0],
							latitude: c[1],
							success: (res) => {

							}
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onYjDangerAreaLinkRtuClick(rtu) {
				let c = gcoord.transform(
					[rtu.stLong, rtu.stLat],
					gcoord.WGS84,
					gcoord.GCJ02
				);
				let lat = c[1];
				let long = c[0];
				this.mapContext.moveToLocation({
					longitude: long,
					latitude: lat,
					success: (res) => {

					}
				});
			},
			onYjDangerAreaLinkFamilyClick() {
				let f = this.familyPoints[0];
				let c = gcoord.transform(
					[f.longitude, f.latitude],
					gcoord.WGS84,
					gcoord.GCJ02
				);
				this.mapContext.moveToLocation({
					longitude: c[0],
					latitude: c[1],
					success: (res) => {

					}
				});
				// let includePoints = this.familyPoints.map(item => {
				// 	let p = {};
				// 	let r = gcoord.transform(
				// 		[item.longitude, item.latitude],
				// 		gcoord.WGS84,
				// 		gcoord.GCJ02
				// 	);
				// 	p['latitude'] = r[1];
				// 	p['longitude'] = r[0];
				// 	return p;
				// });
				// this.mapContext.includePoints({
				// 	points: includePoints
				// });
			}
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
	.uni-body {
		font-size: 0.7rem;
	}
</style>