~xingchuan/SewerAndRainNetwork.git

			@@ -1,128 +1,127 @@
			<template>
			<div class="location-lon-and-lat">
			<el-row class="place-box">
			<div class="place-left">
			<el-form :model="LongLatPos" label-width="90px">
			<el-row style="display: flex;align-items: center">
			<el-form-item label="经度:" style="display: inline-block">
			<el-col :span="20">
			<el-input v-model="LongLatPos.longPos"></el-input>
			</el-col>
			</el-form-item>
			<el-col :span="4">
			<el-button type="primary" size="small" @click="mapPoints">点击定位</el-button>
			</el-col>
			</el-row>
			<el-row style="display: flex;align-items: center">
			<el-form-item label="纬度:">
			<el-col :span="20">
			<el-input v-model="LongLatPos.latPos"></el-input>
			</el-col>
			</el-form-item>
			<el-col :span="4">
			<el-button type="primary" size="small" @click="dataPoints">数据定位</el-button>
			</el-col>
			</el-row>
			</el-form>
			</div>
			<!-- <div class="place-right">-->
			<!-- <el-button type="primary" size="small" @click="mapPoints">点击定位</el-button>-->
			<!-- <el-button type="primary" size="small" @click="dataPoints">数据定位</el-button>-->
			<!-- </div>-->
			</el-row>
			<div class="place-bottom" style="text-align: right;margin: 5px">
			<el-button type="primary" @click="confirm" size="small">确认</el-button>
			</div>
			</div>
			<div class="location-lon-and-lat">
			<el-form :model="positionLocationForm" label-width="60px">
			<el-row class="pipe-line-search">
			<el-col :span="12">
			<el-form-item label="经度:">
			<el-input v-model="positionLocationForm.longPos"></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="纬度:">
			<el-input v-model="positionLocationForm.latPos"></el-input>
			</el-form-item>
			</el-col>
			</el-row>
			</el-form>
			<el-row>
			<el-col :span="12" style="text-align: center;margin: 5px 0">
			<el-button type="primary" size="small" @click="mapPoints">精确定位</el-button>
			</el-col>
			<el-col :span="12" style="text-align: center;margin: 5px 0">
			<el-button type="primary" size="small" @click="dataPoints">位置拾取</el-button>
			</el-col>
			</el-row>
			<el-row style="text-align: right;margin: 5px">
			<el-button type="primary" @click="confirm" size="small">确认</el-button>
			</el-row>
			</div>
			</template>

			<script>
			import { pulseEffect } from '../../../../utils/utils'
			import iconUrl from '../../../../../public/assets/images/map/marker-icon.png'
			import eventBus from '../../../../eventBus'
			import { publicLocationStore } from './ReportLocation'

			export default {
			name: 'ReportLocationPoint',
			data () {
			return {
			// 经纬度定位
			LongLatPos: {
			positionLocationForm: {
			longPos: '',
			latPos: ''
			},
			marker: null
			marker: window.L.layerGroup().addTo(window.map),
			layersGroupArrList: []
			}
			},
			methods: {
			// 点击定位
			// 精确定位
			mapPoints () {
			window.map.on('click', (e) => {
			this.LongLatPos.longPos = parseFloat(e.latlng.lng).toFixed(6)
			this.LongLatPos.latPos = parseFloat(e.latlng.lat).toFixed(6)
			const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
			this.positionLocationForm.longPos = parseFloat(e.latlng.lng).toFixed(8)
			this.positionLocationForm.latPos = parseFloat(e.latlng.lat).toFixed(8)
			const as = [e.latlng.lat, e.latlng.lng]
			// console.log(as)
			window.map.setView(as, 17)
			pulseEffect(as)
			this.marker = window.L.marker(as, {
			icon: window.L.icon({
			iconUrl: iconUrl,
			iconSize: [25, 45],
			iconAnchor: [15, 15]
			iconSize: [26, 40],
			iconAnchor: [13, 20]
			})
			})
			// 添加点数据
			window.map.addLayer(this.marker)
			this.layersGroupArrList.push(this.marker)
			// 事件结束关闭点击事件
			window.map.off('click')
			})
			},
			// 通过数据定位
			dataPoints () {
			const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
			// console.log(as)
			window.map.setView(as, 17)
			pulseEffect(as)
			this.marker = window.L.marker(as, {
			icon: window.L.icon({
			iconUrl: iconUrl,
			iconSize: [30, 30],
			iconAnchor: [15, 15]
			if (this.positionLocationForm.latPos !== '' && this.positionLocationForm.longPos !== '') {
			const as = [this.positionLocationForm.latPos, this.positionLocationForm.longPos]
			window.map.setView(as, 17)
			pulseEffect(as)
			this.marker = window.L.marker(as, {
			icon: window.L.icon({
			iconUrl: iconUrl,
			iconSize: [26, 40],
			iconAnchor: [13, 20]
			})
			})
			})
			window.map.addLayer(this.marker)
			this.LongLatPos.latPos = ''
			this.LongLatPos.longPos = ''
			window.map.addLayer(this.marker)
			this.layersGroupArrList.push(this.marker)
			} else {
			this.$message('请输入识取经纬度')
			}
			},
			// 点击确认按钮事件
			confirm () {
			// 循环数据清除图层添加的点数据
			for (let i = 0; i < this.layersGroupArrList.length; i++) {
			window.map.removeLayer(this.layersGroupArrList[i])
			}
			window.mapManager.clearHighlight()
			window.map.removeLayer(this.marker)
			// window.map.removeLayer(this.marker)
			eventBus.$emit('location-setChange', true)
			this.LongLatPos.longPos = ''
			this.LongLatPos.latPos = ''
			// 事件上报位置信息存储数据库
			const data = {
			ID: '',
			EventID: '',
			EventPipeline: '',
			EventPipeSeg: '',
			EventAffType: '',
			EventAffCode: '',
			EventAffPointNum: '',
			EventPosX: this.positionLocationForm.longPos,
			EventPosY: this.positionLocationForm.latPos,
			AcquisitionPeople: '',
			AcquisitionDate: ''
			}
			// 通过方法存储数据进行数据库存储数据
			publicLocationStore(data)
			// 确定点数据位置信息进行数据的置空
			this.positionLocationForm.longPos = ''
			this.positionLocationForm.latPos = ''
			}
			}
			}
			</script>

			<style lang="less" scoped>
			.place-box {
			display: flex;
			align-items: center;
			justify-content: space-around;
			}

			.place {
			text-align: center;

			.place-top {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.place-right {
			.el-button {
			margin: 15px;
			}
			}
			}
			}
			</style>