From 8d755b0755dac542cc092ab8e40e65ba8d664bc6 Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期日, 30 五月 2021 14:53:20 +0800 Subject: [PATCH] 企业应急-事件上报-定位优化 --- src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue | 123 +++++++++++++++++++++++----------------- 1 files changed, 70 insertions(+), 53 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..ca90d4e 100644 --- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue +++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue @@ -1,38 +1,52 @@ <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>--> + <!-- <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="lonlatpos.longPos"></el-input> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="绾害:"> + <el-input v-model="lonlatpos.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> - <div class="place-bottom" style="text-align: right;margin: 5px"> + <el-row class="place-bottom" style="text-align: right;margin: 5px"> <el-button type="primary" @click="confirm" size="small">纭</el-button> - </div> + </el-row> </div> </template> @@ -46,7 +60,7 @@ data () { return { // 缁忕含搴﹀畾浣� - LongLatPos: { + lonlatpos: { longPos: '', latPos: '' }, @@ -54,20 +68,20 @@ } }, 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: [25, 45], - iconAnchor: [15, 15] + iconSize: [26, 40], + iconAnchor: [13, 20] }) }) window.map.addLayer(this.marker) @@ -76,28 +90,31 @@ }, // 閫氳繃鏁版嵁瀹氫綅 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: [30, 40], + iconAnchor: [15, 20] + }) }) - }) - window.map.addLayer(this.marker) - this.LongLatPos.latPos = '' - this.LongLatPos.longPos = '' + window.map.addLayer(this.marker) + } else { + this.$message('璇疯緭鍏ヨ瘑鍙栫粡绾害') + } }, // 鐐瑰嚮纭鎸夐挳浜嬩欢 confirm () { window.mapManager.clearHighlight() 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