SHZHJCYJPTYWXTAPP/pages/home/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 style="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude" :markers="markets"
					enable-zoom="true" :polygons="polygons" :scale="scale">
				</map>
			</view>

			<!-- 			<view class="item-button-group">
				<view v-for="item in areaList" :key="item.id" class="item-button" @click="onAreaClick(item)">
					<view class="items-line">
						<uni-icons class="input-uni-icon" type="close" size="18" color="coral" />
						<text class="button-text">{{ item.name }}</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>
<!-- <script src="../../static/js/gcoord.global.prod.js" type="module"></script> -->
<script>
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	import http from '@/http/api.js';
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js';
	import {
		oss,
		devUrl,
		prodUrl
	} from '@/common/setting';

	export default {
		components: {

		},
		onLoad(options) {
			this.id = options.id;
			this.baseURL = process.env.NODE_ENV === 'development' ? devUrl : prodUrl;
			let that = this;
			let postData = {};
			postData['id'] = this.id;
			http.request({
				url: '/galaxy-business/map/dangerarea/detail',
				method: 'GET',
				data: postData
			}).then(res => {
				console.log(res)
				if (res.data != null) {
					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'] = '#EE6666';
						p['strokeColor'] = '#FF0000';
						p['fillColor'] = '#F72C5B7D';
					} else {
						p['strokeColor'] = '#FC8452';
						p['fillColor'] = '#FAC8587D';
					}
					that.polygons.push(p);
					let c = gcoord.transform(
						[res.data.centerPointLng, res.data.centerPointLat],
						gcoord.WGS84,
						gcoord.GCJ02
					);
					console.log(c)
					that.latitude = c[1];
					that.longitude = c[0];

					let marketPoints = res.data.rtus.map(item => {
						console.log(JSON.stringify(item))
						let rtu = {};
						rtu['iconPath'] = '/static/images/icon_warning.png';
						rtu['id'] = parseInt(item.id);
						let r = gcoord.transform(
							[parseFloat(item.lng), parseFloat(item.lat)],
							gcoord.WGS84,
							gcoord.GCJ02
						);

						rtu['latitude'] = r[1];
						rtu['longitude'] = r[0];
						rtu['width'] = 20;
						rtu['height'] = 20;
						let label = {};
						label['content'] = item.rtuName;
						label['color'] = '#ff0000';
						label['bgColor'] = '#ffffff';
						label['anchorY'] = -40;
						rtu['label'] = label;
						return rtu;
					});
					that.markets = marketPoints;
					that.scale = 14;
				}
			}).catch(err => {
				console.log(err)
			})
		},
		data() {
			return {
				title: '地图测试',
				id: 0,
				title: 'map',
				areaList: [],
				areaIndex: 0,
				latitude: 40.848119,
				longitude: 111.755426,
				zoom: true,
				scale: 14,
				markets: [],
				polygons: [],
			}
		},
		computed: {

		},
		onShow() {

		},
		created() {

		},
		methods: {
			toOss(path) {
				return oss + path;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onAreaClick(item) {
				let p = {};
				p['points'] = item.data;
				let dashArray = [];
				dashArray.push(10);
				dashArray.push(10);
				p['dashArray'] = dashArray;
				p['strokeColor'] = '#FFF';
				p['fillColor'] = '#A500337D';
				this.polygons = [];
				this.polygons.push(p);
				let center = item.center;
				this.latitude = center[1];
				this.longitude = center[0];
			},
		}
	}
</script>

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