From d4fca49a4b70fe60c730d7e32e2035153a91fcc5 Mon Sep 17 00:00:00 2001 From: seatonwan9 <seatonwan9@163.com> Date: 星期一, 31 五月 2021 17:13:14 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue | 159 ++++++++++++++++++++++++++-------------------------- 1 files changed, 79 insertions(+), 80 deletions(-) diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue index 58c1bc9..0d4f60e 100644 --- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue +++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue @@ -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> -- Gitblit v1.8.0