PowerAnalysis/src/pages/dataAnalysis/posAnalysis/components/posChart.vue

<script setup name="posChart">
import { ref, reactive, shallowRef, defineProps, watch, nextTick, onActivated, defineEmits } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';
import { ElMessage } from 'element-plus';
import request from '@/api/axios.js'
// import stationPosRes from './stationPos.json'
const emits = defineEmits(['rightClick'])
const map = shallowRef(null);
const aMap = ref(null)
const container = ref()
const funMapSet = (callback = (flag) => {}) => {
	AMapLoader.load({
		key:"	540080009cfdae95b6b5a4f47af24f90",             // 申请好的Web端开发者Key，首次调用 load 时必填
		version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
	}).then((AMap)=>{
			aMap.value = AMap;
			map.value = new AMap.Map(container.value,{  //设置地图容器id
					viewMode:"3D",    //是否为3D地图模式
					zoom:9,           //初始化地图级别
					center:[106.065974,37.428168], //初始化地图中心点位置
					layers: [
						// 卫星
						new AMap.TileLayer.Satellite(),
						// 路网
						new AMap.TileLayer.RoadNet()
					]
			});
			callback(true)
	}).catch(e=>{
			console.error(e);
			callback(false)
	})
}
const funStationPos = async () => {
	const res = await request.get('/base/station', {params: {}})
	// const res = stationPosRes
	if(res.code === 200){
		if(res.data && res.data.length){
			map.value.clearMap()
			res.data.forEach(item => {
				const marker = new aMap.value.Marker({
					icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
					position: [Number(item.longitude), Number(item.latitude)],
					anchor:'bottom-center'
				});
				map.value.add(marker)
				// marker.setTitle(item.name);
				// 设置label标签
				// label默认蓝框白底左上角显示，样式className为：amap-marker-label
				marker.setLabel({
					direction:'right',
					offset: new aMap.value.Pixel(10, 0),  //设置文本标注偏移量
					content: `${item.name}`, //设置文本标注内容
				});
			})
			map.value.setFitView()
		}
	}
}

const props = defineProps({
	windList: {
		type: Array,
		default: () => []
	},
	height: {
		type: String,
		default: '100%'
	}
})
/** 右键后对象数据的接收 */
const rightObj = ref(null)
/**监听windList */
watch(() => props.windList, (val) => {
	if(val && val.length){
		map.value.clearMap()
		val.forEach(item => {
			const marker = new aMap.value.Marker({
				icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
				position: [Number(item.longitude), Number(item.latitude)],
				anchor:'bottom-center'
			});
			//创建右键菜单
			const contextMenu = new aMap.value.ContextMenu();
			// {
			// 		"id": "NG01_05",
			// 		"code": "NG01-05",
			// 		"windpowerstationid": "NSS_FDC",
			// 		"longitude": 106.0223579,
			// 		"latitude": 37.74820326,
			// 		"modelid": "UP82",
			// 		"status": "NG01_005",
			// 		"projectid": "NSS01_GC",
			// 		"lineid": "NSS01_XL",
			// 		"firstintegratedtime": "2011-12-01 00:00:00",
			// 		"photo": null,
			// 		"name": "牛首山05号风机",
			// 		"standardid": "NG01_05",
			// 		"prepareId": null,
			// 		"processId": "1077593559936270336",
			// 		"fittingId": "1078321689411977217"
			// }
			/**右键菜单可根据props中传参定义 */
			//右键1
			contextMenu.addItem("功率曲线拟合",  (e) => {
				console.log(rightObj.value)
				// funCombineGet(rightObj.value)
				emits('rightClick', {
					menuIndex: 0,
					current: rightObj.value,
				})
			}, 0);

			//右键2
			contextMenu.addItem("对风偏差分析", () => {
				emits('rightClick', {
					menuIndex: 1,
					current: rightObj.value,
				})
			}, 1);

			//右键2
			contextMenu.addItem("温度与功率分析", () => {
				emits('rightClick', {
					menuIndex: 2,
					current: rightObj.value
				})
			}, 2);
			map.value.add(marker)
			// marker.setTitle(item.name);
			// 设置label标签
			// label默认蓝框白底左上角显示，样式className为：amap-marker-label
			marker.setLabel({
				direction:'right',
				offset: new aMap.value.Pixel(10, 0),  //设置文本标注偏移量
				content: `${item.name}`, //设置文本标注内容
			});
			//绑定鼠标右击事件——弹出右键菜单
			marker.on('rightclick', function (e) {
				rightObj.value = item
				contextMenu.open(map.value, e.lnglat);
			});
		})
		map.value.setFitView()
		setTimeout(() => {
			let zoom = map.value.getZoom()
			if(zoom > 16){
				zoom = 16
				map.value.setZoom(zoom)
			}
		},1000)
	}else{
		funStationPos()
	}
})
//created
onActivated(() => {
	funMapSet(mapStatus => {
		if(!mapStatus){
			ElMessage.error('地图未加载成功, 请刷新重试或检查网络!')
			return false
		}
		funStationPos()
	})
})
</script>
<template>
	<div :style="{height: props.height}">
		<div class="h-full" ref="container">
			<el-empty description="地图未加载成功, 请刷新重试或检查网络!"></el-empty>
		</div>
	</div>
</template>
<style scoped></style>