zhgdyunapp_vue3/pages/videoManage/videoManage.vue

<template>
	<view class="videoPage">
		<headers>
			<image @click="goBack" src="../../static/logo.png" class="backImg" v-show="showMapBack"></image>
			<view class="headerName">
				{{backArr.length>0?[backArr.length-1].name:'集团'}}
			</view>
		</headers>
		<!-- @markertap="markertap" -->
		<!-- @updated='mapUpdated'         :latitude="latitude"
			:longitude="longitude"-->
		<map  class="map" style="height: 500px;"
			scale="3"		
			:markers="markers"
			:show-location="true"
			>
			</map>
	</view>
</template>

<script>
	// import amap from '../../static/js/amap-wx.js'
	import headers from '../../components/headers/headers.vue'
	export default {
		components:{headers},
		data() {
			return {
				mapData: [],
				backArr: [],
				searchsn:'',
				latitude:'22.720017',
				longitude:'114.171091',
				markers:[],
				mobileTopHeight:10,
				userInfo:null,
				showMapBack:false,
				// mapObj:null
			};
		},
		mounted() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			
			this.initMap()
			this.initData(true);
		},
		methods:{
			initMap(){
				// this.mapObj = new amap.AMapWX({	
				// 	key: '78f31be3debf6947dca6e092e56a22b4'  //该key 是在高德中申请的微信小程序key
				// });
			 //   amapPluginInstance.getPoiAround({
				//   success: function(data){
				// 	//成功回调
				//   },
				//   fail: function(info){
				// 	//失败回调
				// 	console.log(info)
				//   }
				// })
			},
			goBack() {
				if(this.backArr.length==1){
					this.backArr=[]
				}else{
					this.backArr=this.backArr.splice(0, this.backArr.length-1);
				}
				this.initData()
			},
			initData(type) {
				var that = this
				if(this.backArr.length>0){
					this.searchsn=this.backArr[this.backArr.length-1].sn
				}else{
					switch (that.userInfo.accountType) {
						case 2:
							this.searchsn=that.userInfo.headquartersSn
							break;
						case 3:
							this.searchsn=that.userInfo.sn
							break;
						case 4:
							this.searchsn=that.userInfo.sn
							break;
						case 5:
							this.searchsn=that.userInfo.sn
							break;
					}
				}
				if((this.backArr.length==0&&that.userInfo.accountType==2) || 
				(this.backArr.length==1&&that.userInfo.accountType==3) || 
				(this.backArr.length==2&&that.userInfo.accountType==4||that.userInfo.accountType==5)){
					this.showMapBack=false
				}else{
					this.showMapBack=true
				}
				if(that.userInfo.accountType==5){
					this.getProjectDetail()
				}else{
					this.loadData(type);
				}
				
			},
			//获取所有企业下区域数据
			loadData(type) {
				//type：true代表第一调用
				var that = this
				this.sendRequest({
					url: "xmgl/company/getComapnyStatisticsList",
					data: {sn: this.searchsn},
					method: "POST",
					success(res){
						that.mapData = res.result.companyList?res.result.companyList:res.result.projectList
						if(type){
							// this.showMapBack=false
							that.backArr=[]
							// if(that.userInfo.accountType==4){
								if(res.result.parentCompany){
									that.backArr.push({name:res.result.parentCompany.companyName,sn:res.result.parentCompany.companySn})
								}
							// }
							// if(that.userInfo.accountType==3||that.userInfo.accountType==4){
								if(res.result.companyInfo){
									that.backArr.push({name:res.result.companyInfo.companyName,sn:res.result.companyInfo.companySn})
								}
							// }
							// console.log('that.userInfo',this)
							// debugger
							if((that.backArr.length==0&&that.userInfo.accountType==2) || 
							(that.backArr.length==1&&that.userInfo.accountType==3) || 
							(that.backArr.length==2&&that.userInfo.accountType==4)){
								that.showMapBack=false
							}else{
								that.showMapBack=true
							}
						}
						if(that.mapData.length>0){
							that.markers = []
							for (let i = 0; i < that.mapData.length; i++) {
								var item = that.mapData[i]
								var json = {
									latitude:item.latitude,
									longitude:item.longitude,
									iconPath:'/static/logo.png',
									label:{
										content:item.name,
										color:'#fff',
										fontSize: 16,
										borderRadius: 3,
										padding: 5,
										bgColor:'#5181F6',
										textAlign:'center',
										x: 80,
										y: 80
									}
								}
								// if(i==0){
								// 	this.latitude=item.latitude
								// 	this.longitude=item.longitude
								// }
								that.markers.push(json)
							}
							// that.mapObj.setFitView();
						}else{
							// this.$message('该区域下没有数据！')
						}
					}
				})
			},
			//获取项目详细
			getProjectDetail(){
				this.sendRequest({
					url: "xmgl/project/getProjectInfoBySn",
					data: {projectSn: this.searchsn},
					method: "POST",
					success(res){
						// this.mapData=[res.result]
						// this.mapObj.clearMap()
						// this.setAreaMarker()
					}
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
.videoPage{
	width: 100%;
	height: 100%;
}
.map{
	width: 100%;
	height: 100%;
}
</style>