<template> <section class="staffBoxFlexRow areaInfoBox"> <div class="staffTitle"> <strong>鍦扮悊浣嶇疆</strong> <span class="staffTitletips">閫夊畾浣嶇疆鍚�,绯荤粺灏嗚嚜鍔ㄦ妸"鍚嶇О"銆�"鐪佸競鍖�"銆�"璇︾粏鍦板潃"銆�""缁忕含搴�"淇℃伅鍒嗗埆甯﹀叆鑷�"椹诲嫟鐐瑰悕绉�"銆�"椹诲嫟鐐圭渷甯傚尯"銆�"椹诲嫟鐐硅缁嗗湴鍧€"銆�"椹诲嫟鐐圭粡绾害" </span> <el-button type="primary" @click="onSave">纭畾</el-button> </div> <div class="staffContext"> <el-form ref="form" label-width="100px"> <!-- <el-row :gutter="50"> <el-col :span="12"> <el-form-item label="瀹氫綅鍧愭爣锛�" prop="xy"> <el-input v-model="formList.xy" /> </el-form-item> </el-col> </el-row> --> <!-- <el-row :gutter="50"> <el-col :span="6"> <el-form-item label="缁忓害鍧愭爣锛�" prop=""> <span class="labelvalue">{{longitude }}</span> <el-button type="primary" class="copyTextlong" @click="onCopylong" style="width: 100px;">澶嶅埗</el-button> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="绾害鍧愭爣锛�" prop=""> <span class="labelvalue">{{latitude }}</span> <el-button type="primary" class="copyTextlat" @click="onCopylat" style="width: 100px;">澶嶅埗</el-button> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="浣嶇疆锛�" prop=""> <span class="labelvalue">{{address }}</span> <el-button type="primary" class="copyTextaddress" @click="onCopyaddress" style="width: 100px;">澶嶅埗</el-button> </el-form-item> </el-col> </el-row> --> <div class="infoBox"><strong>缁忕含鍧愭爣:</strong><span v-if="longitude"> [{{ longitude }}, {{ latitude }}] </span><strong>浣嶇疆:</strong> {{ address }} <strong>鍚嶇О锛�</strong>{{ attendanceSiteName }} <strong>鐪佸競鍖猴細</strong>{{ district }}</div> <el-row> <el-col :span="12"> <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" placeholder="璇疯緭鍏ユ悳绱㈠湴鍧€" ></el-amap-search-box> </el-col> </el-row> <el-row style="width:100%;height: 650px"> <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :events="events" ref="map" > <el-amap-marker v-for="(marker,index) in markers" :key ="'marker'+index" :position ="marker" > </el-amap-marker> </el-amap> </el-row> </el-form> </div> </section> </template> <script> // import cityOptions from '@/assets/js/cityData.js' // import {employessBaseInfoApi,staffDetailInfoApi} from "@/api/staffApi.js" import VueAMap from "vue-amap"; let amapManager = new VueAMap.AMapManager(); import Clipboard from 'clipboard'; let Geocoder; export default { name: "fence-manage", data() { let self = this; return { district:'',//鐪佸競鍖� attendanceSiteName:'', searchValue:'', userInfo: {}, formList: { xy:'', address:'' }, longitude:'0', latitude:'0', // cityOptions:cityOptions, amapManager, zoom: 15, center: [116.400128, 39.947276], address: "", // 鍦板潃 lng: 0, // 缁忓害 lat: 0, // 缁村害 xy: "", //缁忕含鍚堝苟 searchOption: { city: "", citylimit: false, }, markers: [], events: { init:(o)=> { // debugger console.log(o) // o 鏄珮寰峰湴鍥惧畾浣嶆彃浠跺疄渚� // o.getCurrentPosition((status, result) => { // console.log('55',result) // if (result && result.position) { // self.lng = result.position.lng; // self.lat = result.position.lat; // self.center = [self.lng, self.lat]; // self.loaded = true; // self.$nextTick(); // } // }); }, click(e) { let { lng, lat } = e.lnglat; self.lng = lng; self.lat = lat; self.formList.xy = self.lng + "," + self.lat; self.longitude=self.lng; self.latitude=self.lat; // 杩欓噷閫氳繃楂樺痉 SDK 瀹屾垚銆� var geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all", }); geocoder.getAddress([lng, lat], function(status, result) { // debugger if (status === "complete" && result.info === "OK") { if (result && result.regeocode) { console.log(result) self.address = result.regeocode.formattedAddress; self.attendanceSiteName = result.regeocode.pois[0].name; let city='' if(result.regeocode.addressComponent.city==''){ city='甯傝緰鍖�' if(result.regeocode.addressComponent.province.indexOf('閲嶅簡甯�')>-1&&result.regeocode.addressComponent.district.indexOf('鍘�')>-1){ city='鍘�' } }else{ city=result.regeocode.addressComponent.city } self.district = result.regeocode.addressComponent.province + city + result.regeocode.addressComponent.district; self.$nextTick(); self.markers = []; //鏍囪鐐瑰厛娓呯┖ self.markers.push([lng,lat]) } } }); }, }, // 褰撳墠鍦板浘闇€瑕佺殑鎷撳睍鎻掍欢闇€鍦ㄨ鍐呭涓嬫斁缃� Geocoder涓洪€氳繃鍧愭爣鑾峰彇鍦板潃淇℃伅 plugin: [{ pName: 'Geocoder', events: { init(o) { Geocoder = o } }, } ] }; }, mounted() { console.log(this.$route.query) if(this.$route.query){ this.longitude=this.$route.query.longitude&&this.$route.query.longitude this.latitude=this.$route.query.latitude&&this.$route.query.latitude this.address=this.$route.query.address&&this.$route.query.address this.attendanceSiteName=this.$route.query.attendanceSiteName&&this.$route.query.attendanceSiteName this.district=this.$route.query.district&&this.$route.query.district if(this.$route.query.longitude){ this.markers=[] this.center=[this.longitude,this.latitude]//灞呬腑鍦板浘浣嶇疆 this.markers.push([this.longitude,this.latitude]) } // if(this.$route.query.attendanceSiteName){ // document.querySelector(".search-box-wrapper input").value=this.attendanceSiteName // } } }, methods: { onSave(){ if(!this.longitude){ this.$message({type: "warning",message: "璇锋悳绱紝鍐嶇偣鍑荤‘瀹�"}); return } window.parent.postMessage({longitude:this.longitude,latitude:this.latitude,address:this.address,attendanceSiteName:this.attendanceSiteName,district:this.district},'*') }, onCopylong(){ console.log(this.longitude) if(!this.longitude){ this.$message({type: "warning",message: "璇锋悳绱紝鍐嶇偣鍑诲鍒�"}); return } let link=JSON.stringify(this.longitude) this.$nextTick(()=>{ let clipboard=new Clipboard('.copyTextlong', { text: function () { return link } }); clipboard.on("success", e => { this.$message({ type: "success", message: "澶嶅埗鎴愬姛" }); clipboard.destroy(); // 閲婃斁鍐呭瓨 }); clipboard.on("error", e => { this.$message({ type: "warning", message: "璇ユ祻瑙堝櫒涓嶆敮鎸佽嚜鍔ㄥ鍒�!" }); // 涓嶆敮鎸佸鍒� clipboard.destroy(); // 閲婃斁鍐呭瓨 }); }); }, onCopylat(){ console.log(this.latitude) if(!this.latitude){ this.$message({type: "warning",message: "璇锋悳绱紝鍐嶇偣鍑诲鍒�"}); return } let link=JSON.stringify(this.latitude) this.$nextTick(()=>{ let clipboard=new Clipboard('.copyTextlat', { text: function () { return link } }); clipboard.on("success", e => { this.$message({ type: "success", message: "澶嶅埗鎴愬姛" }); clipboard.destroy(); // 閲婃斁鍐呭瓨 }); clipboard.on("error", e => { this.$message({ type: "warning", message: "璇ユ祻瑙堝櫒涓嶆敮鎸佽嚜鍔ㄥ鍒�!" }); // 涓嶆敮鎸佸鍒� clipboard.destroy(); // 閲婃斁鍐呭瓨 }); }); }, onCopyaddress(){ console.log(this.address) if(!this.address){ this.$message({type: "warning",message: "璇锋悳绱紝鍐嶇偣鍑诲鍒�"}); return } let link=JSON.stringify(this.address) this.$nextTick(()=>{ let clipboard=new Clipboard('.copyTextaddress', { text: function () { return link } }); clipboard.on("success", e => { this.$message({ type: "success", message: "澶嶅埗鎴愬姛" }); clipboard.destroy(); // 閲婃斁鍐呭瓨 }); clipboard.on("error", e => { this.$message({ type: "warning", message: "璇ユ祻瑙堝櫒涓嶆敮鎸佽嚜鍔ㄥ鍒�!" }); // 涓嶆敮鎸佸鍒� clipboard.destroy(); // 閲婃斁鍐呭瓨 }); }); }, getRefVal(val) { console.log('22',val); this.formList = val; if(this.formList.longitude){ let lgat=this.formList.longitude+","+this.formList.latitude this.$set(this.formList,'xy',lgat) let centerArr=[this.formList.longitude,this.formList.latitude] this.center=[centerArr[0],centerArr[1]] } }, // 鎼滅储 onSearchResult(pois) { this.attendanceSiteName=document.querySelector(".search-box-wrapper input").value console.log(pois); let latSum = 0; let lngSum = 0; if (pois.length > 0) { pois.forEach((poi) => { let { lng, lat } = poi; lngSum += lng; latSum += lat; this.address=pois[0].address }); let center = { lng: lngSum / pois.length, lat: latSum / pois.length, }; this.center = [center.lng, center.lat]; this.markers = []; //鏍囪鐐瑰厛娓呯┖ this.markers.push([pois[0].lng,pois[0].lat]) this.formList.xy = pois[0].lng + "," + pois[0].lat; this.longitude=pois[0].lng; this.latitude=pois[0].lat; this.$nextTick(()=>{ this.$refs.map.$$getInstance().setFitView()//灞呬腑鍦板浘浣嶇疆 }) let self=this; // 杩欓噷閫氳繃楂樺痉 SDK 瀹屾垚銆� var geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all", }); geocoder.getAddress([this.longitude, this.latitude], function(status, result) { // debugger if (status === "complete" && result.info === "OK") { if (result && result.regeocode) { console.log(result) let city='' if(result.regeocode.addressComponent.city==''){ city='甯傝緰鍖�' if(result.regeocode.addressComponent.province.indexOf('閲嶅簡甯�')>-1&&result.regeocode.addressComponent.district.indexOf('鍘�')>-1){ city='鍘�' } }else{ city=result.regeocode.addressComponent.city } self.district = result.regeocode.addressComponent.province + city + result.regeocode.addressComponent.district; } } }); } }, }, }; </script> <style lang="scss"> .staffBoxFlexRow { display: flex; flex-direction: column; padding: 20px; .staffTitle { display: flex; justify-content: space-between; border-bottom: 1px solid #ebebeb; padding: 5px 0; margin-bottom: 10px; clear: both; align-items: center; strong { color: #000; font-weight: normal; } .staffTitletips{ color: red;flex:1;margin-left:30px;font-weight: bold; } em { margin-right: 20px; i { color: #2e8ad7; margin-right: 20px; cursor: pointer; } } } .el-form { .el-input { width: 300px; } .el-textarea { width: 300px; } } .el-form-item { display: flex; flex-direction: row; .el-form-item__label { text-align: left; } .el-form-item__content { margin: 0 !important; display: flex; flex-direction: row; .el-cascader { margin-bottom: 10px; } } } .labelvalue{width: 100px;} .infoBox{ padding: 10px 10px 20px; font-size: 16px; strong{font-weight: bold;margin-left: 20px;} } } </style> <style lang="scss"> .areaInfoBox { .search-box { border: 1px solid #eee; position: absolute; top: 5px; left: 5px; } } </style>