From d85228cc2a168a7a57bd3f7e4089bacada6aa835 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Tue, 25 Oct 2022 13:36:17 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=B9=B3=E5=8F=B0=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../regionalParty/unitsForm.vue | 6 - .../fuwuzuzhi/cpts/detail.vue | 128 ++--- .../communityService/fuwuzuzhi/cpts/edit.vue | 478 +++++++++--------- ...icpointnucleicmonitoring-add-or-update.vue | 336 ++++++------ .../point/icpointnucleicmonitoring-detail.vue | 164 ++---- ...pointvaccinesinoculation-add-or-update.vue | 348 ++++++------- .../icpointvaccinesinoculation-detail.vue | 163 ++---- src/views/modules/workSys/mapConfig.vue | 5 +- 8 files changed, 658 insertions(+), 970 deletions(-) diff --git a/src/views/modules/communityParty/regionalParty/unitsForm.vue b/src/views/modules/communityParty/regionalParty/unitsForm.vue index cf985eb3a..44e59cee0 100644 --- a/src/views/modules/communityParty/regionalParty/unitsForm.vue +++ b/src/views/modules/communityParty/regionalParty/unitsForm.vue @@ -147,13 +147,7 @@ import { Loading } from 'element-ui' // 引入Loading服务 import { requestPost } from '@/js/dai/request' import daiMap from "@/utils/dai-map"; - - var map -var search -var markers -var infoWindowList -var geocoder // 新建一个正逆地址解析类 let loading // 加载动画 export default { diff --git a/src/views/modules/communityService/fuwuzuzhi/cpts/detail.vue b/src/views/modules/communityService/fuwuzuzhi/cpts/detail.vue index 2b9322af5..11aca17de 100644 --- a/src/views/modules/communityService/fuwuzuzhi/cpts/detail.vue +++ b/src/views/modules/communityService/fuwuzuzhi/cpts/detail.vue @@ -38,7 +38,7 @@ 地图位置：
-
+
@@ -66,6 +66,7 @@ import { mapGetters } from "vuex"; import { requestPost } from "@/js/dai/request"; import { Loading } from 'element-ui' // 引入Loading服务 import nextTick from "dai-js/tools/nextTick"; +import daiMap from "@/utils/dai-map"; var map; var search; @@ -114,7 +115,7 @@ export default { diaDestroy () { if (map) { - map.destroy() + // map.destroy() } }, async initForm () { @@ -123,20 +124,8 @@ export default { await this.getInfo(); this.initLoading = true console.log(this.fmData) - // await nextTick(200) - this.$nextTick(() => { - this.initMap() - }) - - this.endLoading() - - }, - - // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 - initMap () { let { latitude, longitude } = this.$store.state.user; console.log('lat' + latitude + ',lon' + longitude) - if (this.fmData.latitude && this.fmData.longitude) { latitude = this.fmData.latitude longitude = this.fmData.longitude @@ -145,91 +134,39 @@ export default { latitude = 39.9088810666821; longitude = 116.39743841556731; } - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(latitude, longitude) - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById("app_detail"), { - center: center, // 设置地图中心点坐标 - zoom: 17.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); - - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); - - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + this.$nextTick(() => { + // if (!map) { + this.initMap(latitude, longitude) + // } else { + // map.setCenter(latitude, longitude); + // map.setMarker(latitude, longitude); + + // } + }) + this.endLoading() - // 监听地图平移结束 - map.on("panend", (e) => { - this.handleMoveCenter(e); - }); - this.handleMoveCenter(); }, + // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 + initMap (latitude, longitude) { - setMarker (lat, lng) { - markers.setGeometries([]); - markers.add([ + map = new daiMap( + document.getElementById("app_detail_fwzz"), + { latitude, longitude }, { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); - handleSearchMap () { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchRectangle({ - keyword: this.fmData.address, - bounds: map.getBounds(), - }) - .then((result) => { - let { data } = result; - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng }, - } = data[0]; - map.setCenter(new TMap.LatLng(lat, lng)); - this.setMarker(lat, lng); - this.fmData.latitude = lat; - this.fmData.longitude = lng; - } else { - this.$message.error("未检索到相关位置坐标"); - } - }); - }, + // 监听地图平移结束 + // map.on("dragend", (e) => { + // this.handleMoveCenter(e); + // }); + + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); - handleMoveCenter (e) { - //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); - this.fmData.latitude = lat; - this.fmData.longitude = lng; - this.setMarker(lat, lng); - - if (e && e.originalEvent) { - geocoder - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.fmData.address = result.result.address; - }); - } }, async getInfo () { @@ -247,10 +184,7 @@ export default { serviceTypeArr: data.serviceType.split(","), }; - await nextTick(800); - if (map) { - map.setCenter(new TMap.LatLng(data.latitude, data.longitude)); - } + } else { this.$message.error(msg); } diff --git a/src/views/modules/communityService/fuwuzuzhi/cpts/edit.vue b/src/views/modules/communityService/fuwuzuzhi/cpts/edit.vue index d37b1d612..c503ed1c7 100644 --- a/src/views/modules/communityService/fuwuzuzhi/cpts/edit.vue +++ b/src/views/modules/communityService/fuwuzuzhi/cpts/edit.vue @@ -1,191 +1,158 @@ @@ -195,6 +162,7 @@ import { mapGetters } from "vuex"; import { requestPost } from "@/js/dai/request"; import formVltHelper from "dai-js/tools/formVltHelper"; import nextTick from "dai-js/tools/nextTick"; +import daiMap from "@/utils/dai-map"; var map; var search; @@ -214,8 +182,13 @@ export default { }, }, - data() { + data () { return { + searchOptions: [], + searchValue: '', + resultList: [], + loading: false, + uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2", customerId: localStorage.getItem("customerId"), @@ -239,7 +212,7 @@ export default { }, components: {}, computed: { - dataRule() { + dataRule () { return { serviceTypeArr: [ { required: true, message: "服务类别不能为空", trigger: "blur" }, @@ -258,112 +231,125 @@ export default { }, watch: {}, - async mounted() { + async mounted () { this.initForm(); }, methods: { - async initForm() { + async initForm () { + let { latitude, longitude } = this.$store.state.user; + this.initMap(); this.getCategoryOpitons(); if (this.formId && this.formType != "add") { - this.getInfo(); + await this.getInfo(); + } else { + this.fmData.latitude = latitude + this.fmData.longitude = longitude } + + this.$nextTick(() => { + if (!map) { + this.initMap(this.fmData.latitude, this.fmData.longitude); + } else { + map.setCenter(this.fmData.latitude, this.fmData.longitude); + map.setMarker(this.fmData.latitude, this.fmData.longitude); + } + }) }, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 - initMap() { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(36.0722275, 120.38945519); - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById("app"), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); + initMap (latitude, longitude) { - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); - - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + map = new daiMap( + document.getElementById("app_fwzz"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 - map.on("panend", (e) => { + map.on("dragend", (e) => { this.handleMoveCenter(e); }); - this.handleMoveCenter(); - }, - setMarker(lat, lng) { - markers.setGeometries([]); - markers.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); - handleSearchMap() { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.fmData.address, - radius: 1000, - autoExtend: true, - center: map.getCenter(), - }) - .then((result) => { - let { data } = result; - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng }, - } = data[0]; - map.setCenter(new TMap.LatLng(lat, lng)); - this.setMarker(lat, lng); - this.fmData.latitude = lat; - this.fmData.longitude = lng; - } else { - this.$message.error("未检索到相关位置坐标"); - } - }); }, - handleMoveCenter(e) { + + async handleMoveCenter () { //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); + const { lat, lng } = map.getCenter(); this.fmData.latitude = lat; this.fmData.longitude = lng; - this.setMarker(lat, lng); - - if (e && e.originalEvent) { - geocoder - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.fmData.address = result.result.address; - }); + map.setMarker(lat, lng); + + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.fmData.address = data.address + this.searchValue = data.address + this.searchOptions = [] + + } + }, + + async remoteMethod (query) { + + if (query !== '') { + this.loading = true; + + const { msg, data } = await map.searchNearby(query); + this.loading = false; + this.resultList = [] + + if (msg == "success" && data.resultList && data.resultList.length > 0) { + + if (data.resultList && data.resultList.length > 0) { + this.resultList = data.resultList + this.searchOptions = this.resultList.map(item => { + return { value: `${item.hotPointID}`, label: `${item.address + item.name}` }; + + }); + } + } else { + this.searchOptions = [ + { + value: '0', + label: '未检索到结果' + } + ] + } + } else { + this.searchOptions = []; } }, - async getInfo() { + handleClickKey (index) { + let selPosition = this.resultList[index] + let lonlat = selPosition.lonlat.split(" ") + map.setCenter(lonlat[1], lonlat[0]); + map.setMarker(lonlat[1], lonlat[0]); + this.fmData.latitude = lonlat[1]; + this.fmData.longitude = lonlat[0]; + this.fmData.address = selPosition.address + selPosition.name + }, + + + resetData () { + this.searchValue = '' + this.searchOptions = [] + this.resultList = [] + + + }, + + async getInfo () { const url = "/heart/icServiceOrg/detail"; const params = { @@ -378,16 +364,12 @@ export default { serviceTypeArr: data.serviceType.split(","), }; - await nextTick(800); - if (map) { - map.setCenter(new TMap.LatLng(data.latitude, data.longitude)); - } } else { this.$message.error(msg); } }, - async getCategoryOpitons() { + async getCategoryOpitons () { const url = "/sys/dict/data/dictlist"; const params = { dictType: "ic_service_type", @@ -400,11 +382,11 @@ export default { } }, - watchImg(src) { + watchImg (src) { window.open(src); }, - async handleComfirm() { + async handleComfirm () { this.btnDisable = true; setTimeout(() => { this.btnDisable = false; @@ -419,7 +401,7 @@ export default { }); }, - async submit() { + async submit () { let url = ""; let params = { ...this.fmData, @@ -439,6 +421,7 @@ export default { type: "success", message: "操作成功", }); + this.resetData() this.$emit("afterEdit"); this.btnDisable = false; } else { @@ -447,7 +430,8 @@ export default { } }, - handleCancle() { + handleCancle () { + this.resetData() this.$emit("close"); }, }, diff --git a/src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue b/src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue index 56402097a..cb3f83a97 100644 --- a/src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue +++ b/src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue @@ -5,7 +5,7 @@ :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" - label-width="120px"> + label-width="150px"> + + +
+ + + + +
+
+ + - 查询 - - -
- -
-
- 经度 - - - 纬度 - - -
-
+
@@ -108,6 +85,8 @@