zhgdyunapp/components/levitatedsphere/levitatedsphere.vue

<template>
	<cover-view class="holdon" v-if="accountType == 6 && moduleInfo.moduleId">
		<image class="ball" ref='imgWidth' @click="goNavigateTo()"
			:style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')+';transform: translate(-'+(x+'%') +',-' +(y+'%') +');'"
			@touchstart="drag_start" @touchmove.prevent="drag_hmove" src="@/static/rescue-phone.png" mode="aspectFit">
		</image>
	</cover-view>
	<!-- <cover-view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" direction="all" out-of-bounds>
			</movable-view>
		</movable-area>
	</cover-view> -->
	
</template>
<script>
	import {
		emergencyRecordAdd,
		emergencyRecordSendNotice,
		emergencyRecordEdit
	} from "@/api/index.js"
	export default {
		props: {
			x: {
				type: Number,
				default: 0
			},
			y: {
				type: Number,
				default: 0
			},
			image: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
				projectSn: "",
				workerInfoId: "",
				id: "",
				emergencyInfo: {
					emergencyTypeId: "",
					emergencyDetail: "",
					livePicture: "",
					liveVideoSituation: "",
					incidentSite: "",
					longitude: "",
					latitude: "",
				},
				accountType: '',
				pyType: 1,
				imgWidth: 0,
				imgHeight: 0,
				moduleInfo:{},
			}
		},
		mounted() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
			this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn;
			this.workerInfoId = JSON.parse(uni.getStorageSync('userInfo')).workerId;
			this.accountType = JSON.parse(uni.getStorageSync('userInfo')).accountType;
			// this.moduleInfo = JSON.parse(uni.getStorageSync('moduleInfo'));
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
			this.moduleFn(curRoute)
			console.log(111111111,curRoute)
			console.log(JSON.parse(uni.getStorageSync('userInfo')));

			this.$nextTick(() => {
				if (this.accountType == 6) {
					// #ifdef H5
					this.imgWidth = document.querySelector('.ball').clientWidth;
					this.imgHeight = document.querySelector('.ball').clientHeight;
					// #endif

					// #ifdef APP-PLUS
					const query = uni.createSelectorQuery().in(this);
					query.select('.ball').boundingClientRect(data => {
						console.log(111111111111, data);
						this.imgWidth = data.width;
						this.imgHeight = data.height;
					}).exec();
					// #endif
				}
			})

		},
		methods: {
			moduleFn(curRoute){
				this.moduleInfo = uni.getStorageSync('moduleInfo') && JSON.parse(uni.getStorageSync('moduleInfo'));
				
				if(curRoute == "pages/projectEnd/projectIndex/projectIndex" && !this.moduleInfo){
					// console.log(22222222222222)
					setTimeout(() => {
						this.moduleFn(curRoute);
					}, 1000)
				}
			},
			drag_start(event) {
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < this.imgWidth) {
					tag[0].clientX = this.imgWidth;
				}
				if (tag[0].clientY < this.imgHeight) {
					tag[0].clientY = this.imgHeight;
				}
				if (tag[0].clientX > this.windowWidth) {
					tag[0].clientX = this.windowWidth
				}
				if (tag[0].clientY > this.windowHeight) {
					tag[0].clientY = this.windowHeight
				}
				this.moveX = tag[0].clientX;
				this.moveY = tag[0].clientY;
			},
			orientation() {
				uni.showModal({
					title: '提示',
					content: '请打开定位服务',
					success: ({
						confirm,
						cancel
					}) => {

						if (confirm) {
							// android平台
							if (uni.getSystemInfoSync().platform == 'android') {
								var Intent = plus.android.importClass('android.content.Intent');
								var Settings = plus.android.importClass('android.provider.Settings');
								var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
								var main = plus.android.runtimeMainActivity();
								main.startActivity(intent); // 打开系统设置GPS服务页面
							}

							// ios平台
							if (uni.getSystemInfoSync().platform == 'ios') {
								var UIApplication = plus.ios.import("UIApplication");
								var application2 = UIApplication.sharedApplication();
								var NSURL2 = plus.ios.import("NSURL");
								var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION");
								application2.openURL(setting2);
								plus.ios.deleteObject(setting2);
								plus.ios.deleteObject(NSURL2);
								plus.ios.deleteObject(application2);
							}
						}

						// 用户取消前往开启定位服务
						if (cancel) {
							// do sth...
						}
					}
				});
			},
			goNavigateTo() {
				const that = this;
				// 定位开启状态 true=开启，false=未开启
				let bool = false

				// android平台
				if (uni.getSystemInfoSync().platform == 'android') {
					var context = plus.android.importClass("android.content.Context");
					var locationManager = plus.android.importClass("android.location.LocationManager");
					var main = plus.android.runtimeMainActivity();
					var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
					bool = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)
				}

				// ios平台
				if (uni.getSystemInfoSync().platform == 'ios') {
					var cllocationManger = plus.ios.import("CLLocationManager");
					var enable = cllocationManger.locationServicesEnabled();
					var status = cllocationManger.authorizationStatus();
					plus.ios.deleteObject(cllocationManger);
					bool = enable && status != 2
				}
				// 未开启定位功能
				if (bool === false) {
					this.orientation();
					return
				}

				uni.showModal({
					title: '提示信息',
					content: '是否快速报警？',
					cancelText: "取消",
					confirmText: "确认",
					success: function(res) {
						if (res.confirm) {
							// uni.navigateTo({
							// 	url: `${url}?id=${that.id}`,
							// });
							emergencyRecordAdd({
								projectSn: that.projectSn,
								emergencyTypeId: -1,
								alarmPersonId: that.workerInfoId,
							}).then(result => {
								if (result.code == 200) {
									// uni.showToast({
									// 	title: "登录成功"
									// })
									that.id = result.result.id;
									console.log(result);
									uni.showLoading({
										title: "报警中..."
									})
									uni.getLocation({
										type: 'gcj02',
										// type: 'wgs84',
										geocode: true, //设置该参数为true可直接获取经纬度及城市信息
										isHighAccuracy: "true",
										accuracy: "best", // 精度值为20m
										success: function(res) {
											console.log(res)
											// const latitude = parseFloat(res.latitude);
											// const longitude = parseFloat(res.longitude);
											that.emergencyInfo.longitude = parseFloat(res
												.longitude);
											that.emergencyInfo.latitude = parseFloat(res
												.latitude);
											that.addressList = [
												res.address.province,
												res.address.city,
												res.address.district,
												res.address.street,
												res.address.poiName,
											]
											that.emergencyInfo.incidentSite = that
												.addressList.map(
													item => item).join('')

											console.log(111111111);
											console.log(that.emergencyInfo.longitude, that
												.emergencyInfo.latitude);

											emergencyRecordEdit({
												id: that.id,
												projectSn: that.projectSn,
												incidentSite: that.emergencyInfo
													.incidentSite,
												longitude: that.emergencyInfo
													.longitude,
												latitude: that.emergencyInfo
													.latitude,
											}).then(result => {
												if (result.code == 200) {
													uni.showToast({
														title: result
															.message,
													})
													emergencyRecordSendNotice({
														projectSn: that
															.projectSn,
														incidentSite: that
															.emergencyInfo
															.incidentSite,
														id: that.id,
													}).then(result => {
														if (result.code ==
															200) {
															uni
																.hideLoading(); //关闭提示
														} else {
															uni.showToast({
																title: result
																	.message,
																icon: "none"
															})
														}
													})
												} else {
													uni.showToast({
														title: result
															.message,
														icon: "none"
													})
													uni.hideLoading(); //关闭提示
												}
											})

											// that.addrDel = res;
										},
										fail: function() {
											uni.showToast({
												title: '获取地址失败，将导致部分功能不可用',
												icon: 'none'
											});
										}
									});
								} else {
									uni.showToast({
										title: result.message,
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');

						}
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.holdon /deep/ .uni-cover-view{
		visibility: initial;
	}
	// .movable-area {
	// 	position: absolute;
	// 	width: 100vw;
	// 	height: 100vh;
	// 	top: 0;
	// 	z-index: 99999;

	// 	.movable-view {
	// 		width: 80rpx;
	// 		height: 80rpx;
	// 		background-color: #D81E06;
	// 		border-radius: 50%;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		background-image: url('@/static/rescue-phone.png');
	// 		align-items: center;
	// 		background-repeat: no-repeat;
	// 		background-size: 70% 70%;
	// 		background-position: 50% 50%;
	// 	}
	// }

	.holdon {
		// width: 100%;
		// height: 100%;
	}

	.ball {
		width: 60rpx;
		height: 60rpx;
		padding: 12rpx;
		// background:linear-gradient(to bottom, #F8F8FF,#87CEFA);
		background-color: #D81E06;
		border-radius: 50%;
		// box-shadow: 0 0 15rpx #87CEFA;
		color: #fff;
		// font-size: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed !important;
		z-index: 1000000;
	}
</style>