safety-manage-h5/pages/index/index.vue

<template>
	<view class='container'>
		<map name="" id='map' 
		v-if="showMap"
		:style="{'height':((mapheight*2/5)*3)+'rpx'}"
		:longitude='lon'
		:latitude='lat'
		:scale='scale'
		:markers='markers'
		>
		<!-- :markers='markers' -->
		</map>
		<view :style="{'height':((mapheight*2/5)*2)+'rpx'}">
			<view class='topatrol' @click="tourl(0)">检查整改</view>
			<view class="patrol"  :style="{'height':((mapheight*2/5)*2-180)+'rpx'}">
				<view @click='tourl(1)' class='mypatrol'>已检查</view>
				<!-- <view @click='tourl(2)'>开始检查</view> -->
				<view @click='tourl(3)' class='startpatrol'>开始检查</view>
			</view>

		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" @close="cancel">
			<view class="title" style="font-size: 50rpx;text-align: center;padding: 20rpx 0;">选择地点</view>
			<view style="padding: 20rpx;">
				
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="$emit('lower')">
					<view style="margin-bottom:20rpx">当前位置：</view>
					<u-radio-group :borderBottom="true" iconPlacement="right" placement="column"
						@change="e=>{return groupChange(e,'now')}" v-model="nowAdress">
						<u-radio :customStyle="{marginBottom: '12px'}"
							:label="address" :name="address">
						</u-radio>
					</u-radio-group>
					
					<view  style="margin-bottom:20rpx">附近地点：</view>
					<lx-cascade-select ref="caser" :list="nearByList" useName='name' @click="e=>{return groupChange(e,'site')}" />
					
					<!-- <u-radio-group class='radioGroup' :borderBottom="true" iconPlacement="right" placement="column"
						@change="e=>{return groupChange(e,'site')}" v-model="nowAdress">
						<u-radio :customStyle="{marginBottom: '12px'}" v-for="item in nearByList"
							:label="item.name" :name="item.name">
						</u-radio>
						
					</u-radio-group> -->
		
				</scroll-view>
				<!-- <u-gap height="45"></u-gap> -->
				<view class="buttons">
					<u-row>
						<u-col customStyle="padding:0 20rpx 20rpx 10rpx" span="12">
							<u-button @click="toInspection" type="primary" throttleTime="1000">确认</u-button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import lxCascadeSelect from '@/components/lx-cascade-select/lx-cascade-select'
	
	export default{
		components: {
			lxCascadeSelect
		},
		data(){

			return{
				showMap:true,
				mapheight:0,
				lon: 120.12345,
				lat: 30.67890,
				address:'',
				scale: 14,
				site_id:'',
				markers:[{
					id:0,
					latitude:'',
					longitude:'',
					iconPath:'../../static/location.png',
					width:30,
					height:30
				}],
				maskClose:false,
				show:false,
				scrollTop: 0,
				nowAdress:'',
				nearByList:[],
				inspectionObj:{},

			}
		},
		onLoad(){
			let that = this
			// this.getDep()
			that.util.initAddress(function(res) {
				console.log(res)
				that.lat = res.latitude;  // 纬度
				that.lon = res.longitude;  // 经度
				that.address = res.address
				that.markers[0].latitude = res.latitude
				that.markers[0].longitude = res.longitude
				// that.getNearBy()
				// that.$refs.maps.moveto(res.longitude,res.latitude)
			})
			this.mapheight = uni.getSystemInfoSync().windowHeight
		},
		methods:{
			getDep(){
				let that = this
				this.util.request({
					api: '/api/admin/department',
					data: {},
					method: 'GET',
					utilSuccess: function(res) {
						that.depList = res
					},
					utilFail: function(res) {
						that.util.toast(res)
					}
				})
			},
			tourl(type){
				var url = ''
				if(type==0){
					url = '/pages/index/allpatrol?isall=1'
					uni.navigateTo({
						url:url
					})
				}
				if(type==1){
					url = '/pages/index/mypatrol'
					uni.navigateTo({
						url:url
					})
				}
				if(type==2){
					uni.navigateTo({
						url:'/pages/index/patrol?address='+this.address+'&lat='+this.lat+'&lon='+this.lon
					})
					return
				}
				if(type==3){
					uni.navigateTo({
						url:'/pages/index/patrol?&isgoon=1'
					})
					return
				}
				
			},
			cancel(){
				this.show = false
			},
			groupChange(e,type,item){
				console.log(e,type)
				console.log(this.nowAddress)
				if (type == 'now') {
					// this.showSecond = false
					this.$refs.caser.listArray = []
					this.$refs.caser.selectedArray = []
					// this.$refs.caser.listReal = this.nearByList
					this.inspectionObj = {
						address: this.address,
						lat: this.lat,
						lon: this.lon,
					}
				}else{
					this.nowAddress = ''
					this.inspectionObj = {
						name: e[1].name,
						address: e[1].address,
						lat: e[1].lat,
						lon: e[1].lon,
						id: e[1].id
					}
				}
				// if(type=='now'){
				// 	this.inspectionObj = {
				// 		address:this.address,
				// 		lat:this.lat,
				// 		lon:this.lon
				// 	}
				// }
				// if(type=='site'){
				// 	let obj = {}
				// 	this.nearByList.map(item=>{
				// 		if(item.name==e){
				// 			this.inspectionObj = {
				// 				name:item.name,
				// 				address:item.address,
				// 				lat:item.lat,
				// 				lon:item.lon,
				// 				id:item.id
				// 			}
				// 		}
				// 	})
				// }
			},
			toInspection(){
				
				if(!this.inspectionObj.address){
					uni.showToast({
						title: '请先选择地点',
						icon: 'none'
					})
					return
				}
				let obj = this.inspectionObj
				let url = ''
				if(!this.inspectionObj.id){
					url = '/pages/index/patrol?address='+obj.address+'&lat='+obj.lat+'&lon='+obj.lon
				}
				if(this.inspectionObj.id){
					url = '/pages/index/patrol?name='+obj.name+'&site_id='+obj.id+'&address='+obj.address+'&lat='+obj.lat+'&lon='+obj.lon
				}
				console.log(url)
				uni.navigateTo({
					url:url
				})
			},
			contactSite(arr) {
				let tempArr = [],
					newArr = []
				for (let i = 0; i < arr.length; i++) {
					if (tempArr.indexOf(arr[i].type) === -1) {
						newArr.push({
							type: arr[i].type,
							name: arr[i]['type_detail']['value'],
							children: [arr[i]]
						})
						tempArr.push(arr[i].type);
					} else {
						for (let j = 0; j < newArr.length; j++) {
							if (newArr[j].type == arr[i].type) {
								newArr[j].children.push(arr[i])
							}
						}
					}
				}
				return newArr
			},
			getNearBy(){
				let that = this
				console.log(that.lon,that.lat)
				this.util.request({
					// api: '/api/admin/site/nearby',
					api: '/api/admin/site/index',
					data: {
						// lon:that.lon,
						// lat:that.lat
					},
					method: 'GET',
					utilSuccess: function(res) {
						if (res.length == 0) {
							// that.isPoint = false
							// uni.showToast({
							// 	title: '附近暂无站点信息',
							// 	icon: 'none'
							// })
						} else {
							let arr = that.contactSite(res.data)
							console.log("arr", arr)
							that.nearByList = arr
						}
						// if (res.length == 0) {
						// 	// that.isPoint = false
						// 	// uni.showToast({
						// 	// 	title: '附近暂无站点信息',
						// 	// 	icon: 'none'
						// 	// })
						// } else {
						// 	let data = res
						// 	let _marker = []
						// 	for(var m of data){
						// 		_marker.push({
						// 			id:m.id,
						// 			latitude:parseFloat(m.lat),
						// 			longitude:parseFloat(m.lon),
						// 			address:m.address,
						// 			name:m.name,
						// 			iconPath:'../../static/c2.png'
						// 		})
						// 	}
						// 	that.nearByList = data
						// 	// that.markers.push(..._marker)
						// 	that.showMap = true
						// 	console.log(that.markers)
						// }
					},
					utilFail: function(res) {
						that.util.toast(res)
					}
				})
			}
		}
		
	}
</script>

<style scoped>
	.container{
		background-color: #fff;
		/* min-height: 100vh; */
	}
	#map{
		width:750rpx
	}
	.patrol{
		display: flex;
		justify-content: space-around;
		padding: 0 40rpx;
		align-items: center;
		font-size: 36rpx;
	}
	.topatrol{
		height:40rpx;
		font-size:36rpx;
		padding:20rpx;
		color:#007aff
	}
	.patrol view.startpatrol,.patrol view.mypatrol{
		width:250rpx;
		height:250rpx;
		border-radius: 100%;
		background-color: #007aff;
		color:#fff;
		text-align: center;
		line-height: 250rpx;
	}
	.patrol>view.mypatrol{
		background-color: grey;
	}
	.buttons{
		    padding-top: 40rpx;
	}
	.radioGroup{
		max-height: 270rpx;
		overflow-y: auto;
		margin-top: 20rpx;
	}
</style>