From 6b9e0f7957f1078cfafa7523eeefa0465188140e Mon Sep 17 00:00:00 2001 From: jiangyy Date: Tue, 25 Oct 2022 10:12:03 +0800 Subject: [PATCH] =?UTF-8?q?=E7=88=B1=E5=BF=83=E6=B4=BB=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityParty/heart/heartDetail.vue | 1 + .../communityParty/heart/heartForm.vue | 920 ++++++++---------- .../communityService/dqfwzx/cpts/edit.vue | 525 +++++----- 3 files changed, 656 insertions(+), 790 deletions(-) diff --git a/src/views/modules/communityParty/heart/heartDetail.vue b/src/views/modules/communityParty/heart/heartDetail.vue index b9b2869bf..09ac86ee0 100644 --- a/src/views/modules/communityParty/heart/heartDetail.vue +++ b/src/views/modules/communityParty/heart/heartDetail.vue @@ -183,6 +183,7 @@ import { mapGetters } from 'vuex' import { Loading } from 'element-ui' // 引入Loading服务 import { requestPost } from '@/js/dai/request' +import daiMap from "@/utils/dai-map"; let loading // 加载动画 diff --git a/src/views/modules/communityParty/heart/heartForm.vue b/src/views/modules/communityParty/heart/heartForm.vue index 093b3e690..03ebd009b 100644 --- a/src/views/modules/communityParty/heart/heartForm.vue +++ b/src/views/modules/communityParty/heart/heartForm.vue @@ -1,406 +1,335 @@ @@ -411,6 +340,7 @@ import { Loading } from "element-ui"; // 引入Loading服务 import { requestPost } from "@/js/dai/request"; import Tinymce from "@c/tinymce2/index.vue"; +import daiMap from "@/utils/dai-map"; let loading; // 加载动画 @@ -427,7 +357,7 @@ var infoWindowList_signin; var geocoder_signin; // 新建一个正逆地址解析类 export default { - data() { + data () { let endDisabledDate = (time) => { //这个关键属性我们一定要写在data的里面并且return的外面,这是动态改变区间的关键 let nowData = Date.now(); @@ -463,6 +393,12 @@ export default { }; return { formType: "add", //表单操作类型 add新增,edit编辑,detail详情 + searchOptionsAct: [], + searchValueAct: '', + resultListAct: [], + searchOptionsSignin: [], + searchValueSignin: '', + resultListSignin: [], btnDisable: false, customerId: "", actId: "", @@ -542,18 +478,18 @@ export default { }; }, components: { Tinymce }, - mounted() { + mounted () { this.customerId = localStorage.getItem("customerId"); this.loadSponsorlist(); - this.initMap(); + // this.initMap(); // this.replayImgList.push() }, methods: { - async initForm(type, actId) { + async initForm (type, actId) { this.$refs.ref_form.resetFields(); - + let { latitude, longitude } = this.$store.state.user; this.formType = type; if (actId) { this.startLoading(); @@ -564,13 +500,21 @@ export default { } else { this.actId = ""; this.formData.actId = ""; + this.formData.actLatitude = latitude + this.formData.actLongitude = longitude + this.formData.signInLatitude = latitude + this.formData.signInLongitude = longitude // this.formData = JSON.parse(JSON.stringify(this.formDataTemp)); // this.agencyIdArray = this.formData.sponsorPath.split(',') } + + this.$nextTick(() => { + this.initMap(this.formData.actLatitude, this.formData.actLongitude, this.formData.signInLatitude, this.formData.signInLongitude) + }) }, //获取主办方 - async loadSponsorlist() { + async loadSponsorlist () { const url = "/heart/work/act/sponsorlist"; let params = {}; @@ -587,7 +531,7 @@ export default { } }, - handleChangeAgency(val) { + handleChangeAgency (val) { let obj = this.$refs["myCascader"].getCheckedNodes()[0].data; if (obj) { this.formData.sponsorId = obj.gridId; @@ -608,7 +552,7 @@ export default { }, //加载form - async loadFormData() { + async loadFormData () { const url = "/heart/work/act/detail"; let params = { @@ -651,7 +595,7 @@ export default { } }, - async handleComfirm() { + async handleComfirm () { console.log(this.formData); this.btnDisable = true; @@ -690,7 +634,7 @@ export default { } }); }, - async addHeartAct() { + async addHeartAct () { let obj = { contentType: "rich_text", content: this.dormatHtml(this.formData.actContentHtml), @@ -730,7 +674,7 @@ export default { } }, - dormatHtml(content) { + dormatHtml (content) { let c = ""; if (content.indexOf("DOCTYPE") != -1) { c = content.slice(45, -16); @@ -739,19 +683,19 @@ export default { return c || content; }, - removePic(file, fileList) { + removePic (file, fileList) { this.formData.coverPic = ""; this.replayImgList = []; this.hideUploadBtn = fileList.length >= 1; }, // 最多上传3张图,超过时隐藏上传按钮 - handleEditChange(file, fileList) { + handleEditChange (file, fileList) { this.hideUploadBtn = fileList.length >= 1; }, - exceedPic() { + exceedPic () { this.$message.warning("只能上传1张封面图"); }, - beforeAvatarUpload(file) { + beforeAvatarUpload (file) { const isJPG = file.type === "image/jpeg"; const isLt2M = file.size / 1024 / 1024 < 10; @@ -760,194 +704,176 @@ export default { } return isLt2M; }, - handleSuccess(response, file, fileList) { + handleSuccess (response, file, fileList) { this.replayImgList.push(file); this.formData.coverPic = response.data.url; }, // 地图初始化函数,本例取名为init,开发者可根据实际情况定义 - initMap() { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(36.0722275, 120.38945519); - // 定义map变量,调用 TMap.Map() 构造函数创建地图 - map_act = new window.TMap.Map(document.getElementById("map_act_id"), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); - map_signin = new window.TMap.Map( - document.getElementById("map_signin_id"), + initMap (latitude1, longitude1, latitude2, longitude2) { + + map_act = new daiMap( + document.getElementById("app_heart_act"), + { latitude1, longitude1 }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); + map_signin = new daiMap( + document.getElementById("app_heart_signin"), + { latitude2, longitude2 }, { - center: center, // 设置地图中心点坐标 zoom: 16.2, // 设置地图缩放级别 pitch: 43.5, // 设置俯仰角 rotation: 45, // 设置地图旋转角度 } ); - - search_act = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers_act = new TMap.MultiMarker({ - map: map_act, - geometries: [], - }); - infoWindowList_act = Array(10); - - geocoder_act = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 - - search_signin = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers_signin = new TMap.MultiMarker({ - map: map_signin, - geometries: [], - }); - infoWindowList_signin = Array(10); - - geocoder_signin = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 // 监听地图平移结束 - map_act.on("panend", (e) => { + map_act.on("dragend", (e) => { this.handleMoveCenterAct(e); }); - this.handleMoveCenterAct(); + + map_act.setCenter(latitude1, longitude1); + map_act.setMarker(latitude1, longitude1); // 监听地图平移结束 - map_signin.on("panend", (e) => { + map_signin.on("dragend", (e) => { this.handleMoveCenterSignin(e); }); - this.handleMoveCenterSignin(); - }, - setMarkerAct(lat, lng) { - markers_act.setGeometries([]); - markers_act.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, + map_signin.setCenter(latitude2, longitude2); + map_signin.setMarker(latitude2, longitude2); - handleSearchMapAct() { - infoWindowList_act.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList_act.length = 0; - markers_act.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search_act - .searchNearby({ - keyword: this.formData.actAddress, - radius: 1000, - autoExtend: true, - center: map_act.getCenter(), - }) - .then((result) => { - let { data } = result; - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng }, - } = data[0]; - map_act.setCenter(new TMap.LatLng(lat, lng)); - this.setMarkerAct(lat, lng); - this.formData.actLatitude = lat; - this.formData.actLongitude = lng; - } else { - this.$message.error("未检索到相关位置坐标"); - } - }); }, - handleMoveCenterAct(e) { + + async handleMoveCenterAct () { //修改地图中心点 - const center = map_act.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); + const { lat, lng } = map_act.getCenter(); this.formData.actLatitude = lat; this.formData.actLongitude = lng; - this.setMarkerAct(lat, lng); - - if (e && e.originalEvent) { - geocoder_act - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.formData.actAddress = result.result.address; - }); + map_act.setMarker(lat, lng); + + let { msg, data } = await map_act.getAddress(lat, lng); + if (msg == "success") { + this.formData.actAddress = data.address + this.searchValueAct = data.address + this.searchOptionsAct = [] + } }, - setMarkerSignin(lat, lng) { - markers_signin.setGeometries([]); - markers_signin.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); + async handleMoveCenterSignin () { + //修改地图中心点 + const { lat, lng } = map_signin.getCenter(); + this.formData.signInLatitude = lat; + this.formData.signInLongitude = lng; + map_signin.setMarker(lat, lng); + + let { msg, data } = await map_signin.getAddress(lat, lng); + if (msg == "success") { + this.formData.signInAddress = data.address + this.searchValueSignin = data.address + this.searchOptionsSignin = [] + + } }, - handleSearchMapSignin() { - infoWindowList_signin.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList_signin.length = 0; - markers_signin.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search_signin - .searchNearby({ - keyword: this.formData.signInAddress, - radius: 1000, - autoExtend: true, - center: map_signin.getCenter(), - }) - .then((result) => { - let { data } = result; - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng }, - } = data[0]; - map_signin.setCenter(new TMap.LatLng(lat, lng)); - this.setMarkerSignin(lat, lng); - this.formData.signInLatitude = lat; - this.formData.signInLongitude = lng; - } else { - this.$message.error("未检索到相关位置坐标"); + async remoteMethodAct (query) { + + if (query !== '') { + this.loading = true; + + const { msg, data } = await map_act.searchNearby(query); + this.loading = false; + this.resultListAct = [] + + if (msg == "success" && data.resultList && data.resultList.length > 0) { + + if (data.resultList && data.resultList.length > 0) { + this.resultListAct = data.resultList + this.searchOptions = this.resultListAct.map(item => { + return { value: `${item.hotPointID}`, label: `${item.address + item.name}` }; + + }); } - }); + } else { + this.searchOptions = [ + { + value: '0', + label: '未检索到结果' + } + ] + } + } else { + this.searchOptions = []; + } }, + async remoteMethodSignin (query) { - handleMoveCenterSignin(e) { - //修改地图中心点 - const center = map_signin.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); - this.formData.signInLatitude = lat; - this.formData.signInLongitude = lng; - this.setMarkerSignin(lat, lng); - - if (e && e.originalEvent) { - geocoder_signin - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.formData.signInAddress = result.result.address; - }); + if (query !== '') { + this.loading = true; + + const { msg, data } = await map.searchNearby(query); + this.loading = false; + this.resultListSignin = [] + + if (msg == "success" && data.resultList && data.resultList.length > 0) { + + if (data.resultList && data.resultList.length > 0) { + this.resultListSignin = data.resultList + this.searchOptions = this.resultListSignin.map(item => { + return { value: `${item.hotPointID}`, label: `${item.address + item.name}` }; + + }); + } + } else { + this.searchOptions = [ + { + value: '0', + label: '未检索到结果' + } + ] + } + } else { + this.searchOptions = []; } }, - handleCancle() { + handleClickKeyAct (index) { + let selPosition = this.resultListAct[index] + let lonlat = selPosition.lonlat.split(" ") + map_act.setCenter(lonlat[1], lonlat[0]); + map_act.setMarker(lonlat[1], lonlat[0]); + this.formData.actLatitude = lonlat[1]; + this.formData.actLongitude = lonlat[0]; + this.formData.actAddress = selPosition.address + selPosition.name + }, + handleClickKeySignin (index) { + let selPosition = this.resultListSignin[index] + let lonlat = selPosition.lonlat.split(" ") + map_signin.setCenter(lonlat[1], lonlat[0]); + map_signin.setMarker(lonlat[1], lonlat[0]); + this.formData.signInLatitude = lonlat[1]; + this.formData.signInLongitude = lonlat[0]; + this.formData.signInAddress = selPosition.address + selPosition.name + }, + handleCancle () { this.resetData(); this.$emit("dialogCancle"); }, - resetData() { + resetData () { + this.searchValueAct = '' + this.searchOptionsAct = [] + this.resultListAct = [] + + this.searchValueSignin = '' + this.searchOptionsSignin = [] + this.resultListSignin = [] + this.actId = ""; this.replayImgList = []; this.agencyIdArray = []; @@ -995,7 +921,7 @@ export default { }; }, // 开启加载动画 - startLoading() { + startLoading () { loading = Loading.service({ lock: true, // 是否锁定 text: "正在加载……", // 加载中需要显示的文字 @@ -1003,7 +929,7 @@ export default { }); }, // 结束加载动画 - endLoading() { + endLoading () { // clearTimeout(timer); if (loading) { loading.close(); @@ -1011,7 +937,7 @@ export default { }, }, computed: { - dataRule() { + dataRule () { return { sponsorId: [ { required: true, message: "主办方不能为空", trigger: "change" }, diff --git a/src/views/modules/communityService/dqfwzx/cpts/edit.vue b/src/views/modules/communityService/dqfwzx/cpts/edit.vue index ff734b0d5..9afe76feb 100644 --- a/src/views/modules/communityService/dqfwzx/cpts/edit.vue +++ b/src/views/modules/communityService/dqfwzx/cpts/edit.vue @@ -1,283 +1,232 @@ @@ -286,6 +235,7 @@ import { mapGetters } from "vuex"; import { Loading } from "element-ui"; // 引入Loading服务 import { requestPost } from "@/js/dai/request"; +import daiMap from "@/utils/dai-map"; var map; var search; @@ -295,12 +245,15 @@ let loading; // 加载动画 var geocoder; // 新建一个正逆地址解析类 export default { - data() { + data () { return { uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2", customerId: "", formType: "add", //表单操作类型 add新增,edit编辑,detail详情 + searchOptions: [], + searchValue: '', + resultList: [], btnDisable: false, @@ -339,7 +292,7 @@ export default { }, components: {}, computed: { - dataRule() { + dataRule () { return { centerName: [ { required: true, message: "中心名称 不能为空", trigger: "blur" }, @@ -375,13 +328,13 @@ export default { props: {}, watch: {}, - async mounted() { + async mounted () { this.customerId = localStorage.getItem("customerId"); this.initMap(); }, methods: { - handleImgSuccess(index, res, file) { + handleImgSuccess (index, res, file) { if (res.code === 0 && res.msg === "success") { console.log("res.data.url", res.data.url); this.dataForm.matterList[index].matterImg = res.data.url; @@ -390,7 +343,7 @@ export default { } }, - beforeImgUpload(file) { + beforeImgUpload (file) { const isLt1M = file.size / 1024 / 1024 < 1; if (!isLt1M) { @@ -399,7 +352,7 @@ export default { return isLt1M; }, - handleAddStaff() { + handleAddStaff () { this.dataForm.matterList = [ ...this.dataForm.matterList, { @@ -411,7 +364,7 @@ export default { }, ]; }, - async handleDelStaff(index) { + async handleDelStaff (index) { const { matterList } = this.dataForm; let list = [...matterList]; let delItem = list.splice(index, 1); @@ -428,7 +381,7 @@ export default { this.dataForm.matterList = list; }, - async delStaff(matterId) { + async delStaff (matterId) { const { data, code, msg } = await requestPost( "/gov/org/icpartyservicecenter/delmatter", { @@ -438,104 +391,90 @@ export default { return code === 0; }, // 地图初始化函数,本例取名为init,开发者可根据实际情况定义 - initMap() { - let { latitude, longitude } = this.$store.state.user; - if (!latitude || latitude == "" || latitude == "0") { - 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"), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); - - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); + initMap (latitude, longitude) { - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + map = new daiMap( + document.getElementById("app_ggfw"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 - map.on("panend", (e) => { + map.on("dragend", (e) => { this.handleMoveCenter(e); }); - // this.handleMoveCenter(); + + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); + }, - setMarker(lat, lng) { - markers.setGeometries([]); - markers.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); + + async handleMoveCenter () { + //修改地图中心点 + const { lat, lng } = map.getCenter(); + this.formData.latitude = lat; + this.formData.longitude = lng; + map.setMarker(lat, lng); + + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.formData.address = data.address + this.searchValue = data.address + this.searchOptions = [] + + } }, - handleSearchMap() { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.dataForm.locationAddress, - 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.dataForm.latitude = lat; - this.dataForm.longitude = lng; - } else { - this.$message.error("未检索到相关位置坐标"); + 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 = []; + } }, - handleMoveCenter(e) { - //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); - this.dataForm.latitude = lat; - this.dataForm.longitude = lng; - this.setMarker(lat, lng); - - if (e && e.originalEvent) { - geocoder - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.dataForm.locationAddress = result.result.address; - }); - } + 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.formData.latitude = lonlat[1]; + this.formData.longitude = lonlat[0]; + this.formData.address = selPosition.address + selPosition.name }, - async initForm(type, row) { - this.$refs.ref_form.resetFields(); + async initForm (type, row) { + this.$refs.ref_form.resetFields(); + let { latitude, longitude } = this.$store.state.user; this.formType = type; console.log(row); if (row) { @@ -545,7 +484,7 @@ export default { } }, - async handleComfirm() { + async handleComfirm () { this.btnDisable = true; setTimeout(() => { this.btnDisable = false; @@ -560,7 +499,7 @@ export default { }); }, - async submit() { + async submit () { let url = ""; if (this.formType === "add") { url = "/gov/org/icpartyservicecenter/addpartyservicecenter"; @@ -609,11 +548,11 @@ export default { } }, - handleCancle() { + handleCancle () { this.resetData(); this.$emit("dialogCancle"); }, - resetData() { + resetData () { this.partyServiceCenterId = ""; this.dataForm = { centerName: "", @@ -631,7 +570,7 @@ export default { }; }, // 开启加载动画 - startLoading() { + startLoading () { loading = Loading.service({ lock: true, // 是否锁定 text: "正在加载……", // 加载中需要显示的文字 @@ -639,7 +578,7 @@ export default { }); }, // 结束加载动画 - endLoading() { + endLoading () { // clearTimeout(timer); if (loading) { loading.close();