From 4adfa4774e09f3b388335bb8dee5dea518856e5b Mon Sep 17 00:00:00 2001 From: yangdelong <828900aaa> Date: 星期日, 30 五月 2021 19:23:27 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/develop' into develop --- src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue | 115 ++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 76 insertions(+), 39 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 96388b5..45d885a 100644 --- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue +++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue @@ -1,30 +1,58 @@ <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>--> + <!-- <el-form :model="lonlatpos" label-width="60px">--> + <!-- <el-col :span="12">--> + <!-- <el-form-item label="缁忓害:">--> + <!-- <el-input type="text" v-model="lonlatpos.longPos"></el-input>--> + <!-- </el-form-item>--> + <!-- </el-col>--> + <!-- <el-col :span="12">--> + <!-- <el-form-item label="绾害:">--> + <!-- <el-input type="text" v-model="lonlatpos.latPos"></el-input>--> + <!-- </el-form-item>--> + <!-- </el-col>--> + <!-- </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>--> + <el-form :model="lonlatpos" label-width="60px"> + <el-row class="pipe-line-search"> + <el-col :span="12"> <el-form-item label="缁忓害:"> - <el-input v-model="LongLatPos.longPos"></el-input> + <el-input v-model="lonlatpos.longPos"></el-input> </el-form-item> + </el-col> + <el-col :span="12"> <el-form-item label="绾害:"> - <el-input v-model="LongLatPos.latPos"></el-input> + <el-input v-model="lonlatpos.latPos"></el-input> </el-form-item> - </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-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> - <div class="place-bottom" style="text-align: right;margin: 5px"> - <el-button type="primary" @click="confirm">纭</el-button> - </div> + <el-row class="place-bottom" 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/loc.png' +import iconUrl from '../../../../../public/assets/images/map/marker-icon.png' import eventBus from '../../../../eventBus' export default { @@ -32,58 +60,67 @@ data () { return { // 缁忕含搴﹀畾浣� - LongLatPos: { + lonlatpos: { 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.lonlatpos.longPos = parseFloat(e.latlng.lng).toFixed(8) + this.lonlatpos.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: [30, 30], - 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] + // this.lonlatpos.latPos = '' + // this.lonlatpos.longPos = '' + if (this.lonlatpos.latPos !== '' && this.lonlatpos.longPos !== '') { + const as = [this.lonlatpos.latPos, this.lonlatpos.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 = '' + this.lonlatpos.longPos = '' + this.lonlatpos.latPos = '' } } } -- Gitblit v1.8.0