fix

virgo.wzfrontend/console/package-lock.json

@@ -15,6 +15,11 @@
 				"js-message": "1.0.7"
 			}
 		},
+		"@amap/amap-jsapi-loader": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+			"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+		},
 		"@ampproject/remapping": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -13743,21 +13748,6 @@
 				"picocolors": "^1.0.0"
 			}
 		},
-		"uppercamelcase": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
-			"integrity": "sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==",
-			"requires": {
-				"camelcase": "^1.2.1"
-			},
-			"dependencies": {
-				"camelcase": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz",
-					"integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g=="
-				}
-			}
-		},
 		"uri-js": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
@@ -13892,14 +13882,6 @@
 				"csstype": "^3.1.0"
 			}
 		},
-		"vue-amap": {
-			"version": "0.5.10",
-			"resolved": "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz",
-			"integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
-			"requires": {
-				"uppercamelcase": "^1.1.0"
-			}
-		},
 		"vue-eslint-parser": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",

virgo.wzfrontend/console/package.json

@@ -8,6 +8,7 @@
 		"lint": "vue-cli-service lint"
 	},
 	"dependencies": {
+		"@amap/amap-jsapi-loader": "^1.0.1",
 		"@babel/polyfill": "^7.12.1",
 		"core-js": "^3.3.2",
 		"dayjs": "^1.11.11",
@@ -18,7 +19,6 @@
 		"svg-sprite-loader": "^6.0.11",
 		"terser-webpack-plugin": "^3.0.1",
 		"vue": "^2.6.10",
-		"vue-amap": "^0.5.10",
 		"vue-router": "^3.1.3",
 		"vuex": "^3.0.1"
 	},

virgo.wzfrontend/console/src/components/work/common/amap.vue

@@ -0,0 +1,149 @@
+<template>
+	<div class="hui-flex hui-dialog">
+		<div class="hui-flex-box hui-dialog-content" style="padding: 0;padding-bottom: 20px;">
+			<div class="map">
+				<div class="map-input">
+					<input type="text" placeholder="请输入地理位置" v-model="input" id="tipinput" />
+				</div>
+				<div ref="gaode_Map" id="gaode_Map"></div>
+			</div>
+		</div>
+		<div class="hui-dialog-submit">
+			<el-button size="medium" @click="$emit('callback')">取 消</el-button>
+			<el-button size="medium" type="primary" @click="submit">保 存</el-button>
+		</div>
+	</div>
+</template>
+<script>
+	import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
+	window._AMapSecurityConfig = {
+		// 设置安全密钥
+		securityJsCode: "3e392dc7eb2cf2c04b1b8899776e8905",
+	};
+	export default {
+		props: ['coordinates'],
+		data() {
+			return {
+				map: {},
+				input: '',
+				markers: [],
+				address: [116.397428, 39.90923],
+				visible: false
+			}
+		},
+		created() {
+			if (this.coordinates) this.address = this.coordinates.split(',');
+		},
+		mounted() {
+			this.initMap();
+		},
+		beforeDestroy() {
+			this.map && this.map.destroy();
+		},
+		methods: {
+			initMap() {
+				AMapLoader.load({
+					key: "880f8193c52d9dee80cd82212d9508cf", // 申请好的Web端开发者Key，首次调用 load 时必填
+					version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+					plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
+				}).then((AMap) => {
+					this.map = new AMap.Map("gaode_Map", {
+						// 设置地图容器id
+						viewMode: "3D", //  是否为3D地图模式
+						zoom: 18, // 初始化地图级别
+						center: this.address, //中心点坐标
+						resizeEnable: true,
+					});
+					this.setMarker();
+					this.searchMap();
+					// 监听鼠标点击事件
+					this.map.on("click", this.clickMapHandler);
+				}).catch((e) => {});
+			},
+			searchMap() {
+				// 搜索框自动完成类
+				let auto = new AMap.AutoComplete({
+					input: "tipinput", // 使用联想输入的input的id
+				});
+				//构造地点查询类
+				let placeSearch = new AMap.PlaceSearch({
+					map: this.map,
+				});
+				// 当选中某条搜索记录时触发
+				auto.on("select", e => {
+					if (e.poi.location) {
+						placeSearch.setCity(e.poi.adcode);
+						placeSearch.search(e.poi.name);
+						this.address = [e.poi.location.lng, e.poi.location.lat];
+						this.setMarker();
+					} else {
+						this.$message.error("查询地址失败，请重新输入地址");
+					}
+				});
+			},
+			// 点击地图事件获取经纬度，并添加标记
+			clickMapHandler(e) {
+				this.address = [e.lnglat.getLng(), e.lnglat.getLat()];
+				this.setMarker();
+			},
+			//  添加标记
+			setMarker() {
+				this.removeMarker();
+				let marker = new AMap.Marker({
+					position: this.address,
+				});
+				marker.setMap(this.map);
+				this.markers.push(marker);
+			},
+			// 删除之前后的标记点
+			removeMarker() {
+				if (this.markers) {
+					this.map.remove(this.markers);
+				}
+			},
+			submit() {
+				this.$emit('callback', 'set', this.address);
+			}
+		}
+	}
+</script>
+
+
+<style lang="scss">
+	.map {
+		width: 100%;
+		height: 100%;
+		position: relative;
+
+		#gaode_Map {
+			overflow: hidden;
+			width: 100%;
+			height: 100%;
+		}
+
+		.map-input {
+			position: absolute;
+			top: 20px;
+			left: 20px;
+			width: 300px;
+			z-index: 998;
+			background: #fff;
+			color: #000;
+			box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
+			border-radius: 3px;
+
+			input {
+				width: 100%;
+				height: 100%;
+				height: 38px;
+				line-height: 38px;
+				padding: 0 10px;
+			}
+		}
+	}
+
+	.amap-sug-result {
+		color: #000;
+		z-index: 9999;
+	}
+</style>

virgo.wzfrontend/console/src/components/work/common/selectLocation.vue

@@ -0,0 +1,77 @@
+<template>
+	<div class="set-map">
+		<div class="map-button">
+			<el-button size="medium" @click="visible = true" v-if="type === 'insert'">
+				<i class="el-icon-setting"></i>设置地图位置
+			</el-button>
+			<div class="tips">
+				<i :class="address?'el-icon-success':'el-icon-warning'"></i>
+				<span>{{!address?'未设置':'已设置'}}</span>
+			</div>
+		</div>
+		<el-dialog title="选择位置" :visible.sync="visible" width="900px" :append-to-body="true">
+			<amap v-if="visible" :coordinates="coordinates" @callback="callback"></amap>
+		</el-dialog>
+	</div>
+
+</template>
+<script>
+	import amap from '@/components/work/common/amap'
+	export default {
+		props: ['type', 'coordinates'],
+		data() {
+			return {
+				visible: false,
+				address: ''
+			}
+		},
+		created() {
+			this.address = this.coordinates;
+		},
+		methods: {
+			callback(type, data) {
+				if (type === 'set') this.address = data.join(',');
+				this.visible = false;
+			}
+		},
+		components: {
+			amap
+		},
+	}
+</script>
+
+
+<style lang="scss">
+	.set-map {
+		padding-top: 5px;
+
+		.map-button {
+			display: flex;
+			align-items: center;
+		}
+
+		.tips {
+			margin-left: 10px;
+			display: flex;
+			align-items: center;
+
+			span {
+				font-size: 12px;
+				opacity: 0.8;
+				margin-left: 2px;
+			}
+		}
+
+		.el-icon-success {
+			color: $--color-green;
+		}
+
+		.el-icon-warning {
+			color: $--color-orange;
+		}
+
+		.el-icon-setting {
+			margin-right: 5px;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/components/work/space/project/edit.vue

@@ -12,12 +12,6 @@
 						</el-option>
 					</el-select>
 				</el-form-item>
-				<el-form-item label="经度" prop="longitude" :rules="[{required: true, message: '请输入经度'}]">
-					<el-input type="text" v-model="projectForm.longitude" placeholder="请输入经度"></el-input>
-				</el-form-item>
-				<el-form-item label="纬度" prop="latitude" :rules="[{required: true, message: '请输入纬度'}]">
-					<el-input type="text" v-model="projectForm.latitude" placeholder="请输入纬度"></el-input>
-				</el-form-item>
 				<el-form-item label="项目区域" prop="address" :rules="[{required: true, message: '请选择项目区域'}]">
 					<city v-model="projectForm.address"></city>
 				</el-form-item>
@@ -29,6 +23,10 @@
 					<el-input type="textarea" v-model="projectForm.comment" placeholder="请输入项目描述" resize="none">
 					</el-input>
 				</el-form-item>
+				<el-form-item label="地图位置" class="hui-textarea">
+					<select-location ref="map" v-if="showMap" type="insert" :coordinates="projectForm.coordinates">
+					</select-location>
+				</el-form-item>
 				<el-form-item label="项目配图" class="hui-textarea">
 					<upload ref="upload" :list="responsibility" type="insert"></upload>
 				</el-form-item>
@@ -55,6 +53,7 @@
 	import upload from '@/components/common/upload'
 	import city from '@/components/common/city'
 	import tag from '@/components/common/tag'
+	import selectLocation from '@/components/work/common/selectLocation'
 	export default {
 		props: ['isUpdate', 'detailId'],
 		data() {
@@ -68,11 +67,11 @@
 					picture: '',
 					tagIds: '',
 					type: 1,
-					longitude: '',
-					latitude: ''
+					coordinates: ''
 				},
 				specific: '',
-				responsibility: []
+				responsibility: [],
+				showMap: false
 			}
 		},
 		created() {
@@ -81,9 +80,7 @@
 				getProjectDetailById(this.detailId).then(res => {
 					if (res.state) {
 						this.projectForm = res.data;
-						let address = res.data.coordinates.split(',');
-						this.projectForm.longitude = address[0];
-						this.projectForm.latitude = address[1];
+						this.showMap = true;
 						this.projectForm.address = JSON.parse(this.projectForm.address);
 						if (this.projectForm.picture) this.responsibility = JSON.parse(this.projectForm.picture);
 						if (this.projectForm.data) {
@@ -92,6 +89,8 @@
 						}
 					}
 				})
+			} else {
+				this.showMap = true;
 			}
 		},
 		methods: {
@@ -105,7 +104,7 @@
 						postData['picture'] = JSON.stringify(this.$refs.upload.fileList);
 						postData['address'] = JSON.stringify(this.projectForm.address);
 						postData['tagIds'] = this.$refs.tag.tagIds();
-						postData['coordinates'] = postData.longitude + ',' + postData.latitude;
+						postData['coordinates'] = this.$refs.map.address;
 						if (this.isUpdate) {
 							updateProject(postData).then(this.successFunc);
 						} else {
@@ -126,7 +125,8 @@
 		components: {
 			city,
 			upload,
-			tag
+			tag,
+			selectLocation
 		},
 	}
 </script>

virgo.wzfrontend/console/src/main.js

@@ -35,16 +35,6 @@ Vue.prototype.$confirm = (title, callback) => {
 		type: 'warning'
 	}).then(callback).catch(() => {});
 };
-
-import VueAMap from "vue-amap"; //导入
-Vue.use(VueAMap); //使用
-// 初始化vue-amap
-VueAMap.initAMapApiLoader({
-	key: "8d6519155e085eb1b83d1de7953b2414", // 你申请的高德地图的key 
-	plugin: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"],
-	v: "1.4.15",
-	uiVersion: "1.1"
-});
 //router拦截器
 import './uitls/permission'
 new Vue({

virgo.wzfrontend/console/src/views/work/index.vue

@@ -1,38 +1,11 @@
 <template>
-	<div id="map">
-		<iframe id="test"
-			src="https://m.amap.com/picker?key=880f8193c52d9dee80cd82212d9508cf&keywords=3e392dc7eb2cf2c04b1b8899776e8905"></iframe>
-	</div>
+	<div class="index"></div>
 </template>
-
 <script>
-	export default {
-		data() {
-			return {
-				serachValue: ''
-			}
-		},
-		created() {
-			this.$nextTick(() => {
-				var iframe = document.getElementById('test').contentWindow;
-				document.getElementById('test').onload = function() {
-					iframe.postMessage('hello', 'https://m.amap.com/picker/');
-				};
-				window.addEventListener("message", function(e) {
-					console.log(e)
-				}, false);
-			})
-		},
-		methods: {
-			initSearch() {}
-		},
-	}
+	
 </script>
 
+
 <style lang="scss">
-	#test,
-	#map {
-		width: 100%;
-		height: 100%;
-	}
+	.map {}
 </style>