diff --git a/src/views/modules/communityService/sqzzz/cpts/edit.vue b/src/views/modules/communityService/sqzzz/cpts/edit.vue index d18430a0b..a7302d375 100644 --- a/src/views/modules/communityService/sqzzz/cpts/edit.vue +++ b/src/views/modules/communityService/sqzzz/cpts/edit.vue @@ -1,246 +1,217 @@ @@ -263,10 +234,15 @@ var geocoder; // 新建一个正逆地址解析类 export default { components: {}, props: {}, - data() { + data () { return { formType: "add", //表单操作类型 add新增,edit编辑,detail详情 + searchOptions: [], + searchValue: '', + resultList: [], + loading: false, + btnDisable: false, orgId: "", @@ -289,7 +265,7 @@ export default { }; }, computed: { - dataRule() { + dataRule () { return { organizationName: [ { required: true, message: "组织名称 不能为空", trigger: "blur" }, @@ -324,25 +300,67 @@ export default { }, watch: {}, - async mounted() { + async mounted () { this.getCategoryList(); this.getVolunteerList(); - this.initMap(); + }, methods: { - querySearchVolunteer(queryString, cb) { + + 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 = []; + } + }, + + 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.dataForm.latitude = lonlat[0]; + this.dataForm.longitude = lonlat[1]; + this.dataForm.address = selPosition.address + selPosition.name + }, + + querySearchVolunteer (queryString, cb) { const { volunteerList } = this; var results = queryString ? volunteerList.filter((item) => { - return item.value.indexOf(queryString) !== -1; - }) + return item.value.indexOf(queryString) !== -1; + }) : volunteerList; // 调用 callback 返回建议列表的数据 cb(results); }, - handleSelectVolunteer(index, vItem) { + handleSelectVolunteer (index, vItem) { this.dataForm.organizationPersonnel[index] = { personName: vItem.name, personPhone: vItem.mobile, @@ -350,7 +368,7 @@ export default { }; }, - async getVolunteerList() { + async getVolunteerList () { const url = "/epmetuser/icresiuser/volunteer-list"; const params = {}; const { data, code, msg } = await requestPost(url, params); @@ -368,7 +386,7 @@ export default { } }, - async getCategoryList() { + async getCategoryList () { const url = "/sys/dict/data/dictlist"; const params = { dictType: "self_org_category", @@ -380,21 +398,42 @@ export default { this.$message.error(msg); } }, - handleAddStaff() { + handleAddStaff () { this.dataForm.organizationPersonnel = [ ...this.dataForm.organizationPersonnel, { personName: "", personPhone: "", icResiUserId: "" }, ]; }, - handleDelStaff(index) { + handleDelStaff (index) { const { organizationPersonnel } = this.dataForm; organizationPersonnel.splice(index, 1); this.dataForm.organizationPersonnel = organizationPersonnel; }, - // 地图初始化函数,本例取名为init,开发者可根据实际情况定义 - initMap() { + async initForm (type, row) { + this.$refs.ref_form.resetFields(); + + this.formType = type; + console.log(row); + let { latitude, longitude } = this.$store.state.user; + if (row) { + this.dataForm = { ...this.dataForm, ...row }; + this.orgId = this.dataForm.orgId; + + } else { + this.dataForm.latitude = latitude + this.dataForm.longitude = longitude + } + if (!map) { + this.initMap(this.dataForm.latitude, this.dataForm.longitude); + } + + + }, + + // 地图初始化函数,本例取名为init,开发者可根据实际情况定义 + initMap (latitude, longitude) { map = new daiMap( document.getElementById("app"), @@ -410,22 +449,27 @@ export default { map.on("dragend", (e) => { this.handleMoveCenter(e); }); - }, - async handleSearchMap() { - const { msg, data } = await map.searchNearby(this.dataForm.address); - if (msg == "success") { - const { lat, lng } = data; - map.setCenter(lat, lng); - map.setMarker(lat, lng); - this.dataForm.latitude = lat; - this.dataForm.longitude = lng; - } else { - this.$message.error("未检索到相关位置坐标"); - } + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); + }, - async handleMoveCenter(e) { + // async handleSearchMap () { + // const { msg, data } = await map.searchNearby(this.keyWords); + // if (msg == "success") { + // const { lat, lng } = data; + // map.setCenter(lat, lng); + // map.setMarker(lat, lng); + // this.dataForm.latitude = lat; + // this.dataForm.longitude = lng; + // this.handleMoveCenter() + // } else { + // this.$message.error("未检索到相关位置坐标"); + // } + // }, + + async handleMoveCenter () { //修改地图中心点 const { lat, lng } = map.getCenter(); this.dataForm.latitude = lat; @@ -434,28 +478,16 @@ export default { let { msg, data } = await map.getAddress(lat, lng); if (msg == "success") { - this.dataForm.address = data.address; + this.dataForm.address = data.address + this.searchValue = data.address + this.searchOptions = [] + } }, - async initForm(type, row) { - this.$refs.ref_form.resetFields(); - - this.formType = type; - console.log(row); - if (row) { - this.dataForm = { ...this.dataForm, ...row }; - this.orgId = this.dataForm.orgId; - await nextTick(800); - if (map) { - map.setCenter(row.latitude, row.longitude); - map.setMarker(row.latitude, row.longitude); - } - } - }, - async handleComfirm() { + async handleComfirm () { this.btnDisable = true; setTimeout(() => { this.btnDisable = false; @@ -488,7 +520,7 @@ export default { }); }, - async submit() { + async submit () { let url = ""; if (this.formType === "add") { url = "/heart/iccommunityselforganization/addcommunityselforganization"; @@ -516,11 +548,16 @@ export default { } }, - handleCancle() { + handleCancle () { this.resetData(); this.$emit("dialogCancle"); }, - resetData() { + resetData () { + + this.searchValue = '' + this.searchOptions = [] + this.resultList = [] + this.orgId = ""; this.dataForm = { organizationName: "", @@ -538,7 +575,7 @@ export default { }; }, // 开启加载动画 - startLoading() { + startLoading () { loading = Loading.service({ lock: true, // 是否锁定 text: "正在加载……", // 加载中需要显示的文字 @@ -546,7 +583,7 @@ export default { }); }, // 结束加载动画 - endLoading() { + endLoading () { // clearTimeout(timer); if (loading) { loading.close(); diff --git a/src/views/modules/shequzhili/event/cpts/add.vue b/src/views/modules/shequzhili/event/cpts/add.vue index b3dd77459..0219f9df8 100644 --- a/src/views/modules/shequzhili/event/cpts/add.vue +++ b/src/views/modules/shequzhili/event/cpts/add.vue @@ -143,36 +143,35 @@ label-width="150px" style="display: block">
-
-
-
- - - 查询 -
-
- - + + + 查询 +
+
@@ -238,7 +237,7 @@ import { Loading } from "element-ui"; // 引入Loading服务 import { requestPost } from "@/js/dai/request"; import formVltHelper from "dai-js/tools/formVltHelper"; - +import daiMap from "@/utils/dai-map"; import { isCard } from "@/utils/validate"; let loading; // 加载动画 @@ -388,6 +387,7 @@ export default { async mounted () { const { user } = this.$store.state; this.agencyId = user.agencyId; + let { latitude, longitude } = this.$store.state.user; if (!latitude || latitude == "" || latitude == "0") { latitude = 39.9088810666821; @@ -398,6 +398,10 @@ export default { this.formData.longitude = longitude; this.initMap(); + map.setCenter(this.formData.latitude, this.formData.longitude); + map.setMarker(this.formData.latitude, this.formData.longitude); + this.handleMoveCenter() + this.loadGrid(); this.getCategoryList(); }, @@ -567,126 +571,47 @@ export default { // 地图初始化函数,本例取名为init,开发者可根据实际情况定义 initMap () { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng( - this.formData.latitude, - this.formData.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); + let { latitude, longitude } = this.$store.state.user; - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + map = new daiMap( + document.getElementById("map_event"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 - map.on("panend", () => { - this.handleMoveCenter(); + map.on("dragend", (e) => { + this.handleMoveCenter(e); }); - this.handleMoveCenter(); - // this.convert() }, - - setMarker (lat, lng) { - markers.setGeometries([]); - markers.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, - - handleSearchMap () { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.keyWords, - 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.formData.latitude = lat; - this.formData.longitude = lng; - this.convert(); - } else { - this.$message.error("未检索到相关位置坐标"); - } - }); + async handleSearchMap () { + const { msg, data } = await map.searchNearby(this.formData.address); + if (msg == "success") { + const { lat, lng } = data; + map.setCenter(lat, lng); + map.setMarker(lat, lng); + this.formData.latitude = lat; + this.formData.longitude = lng; + } else { + this.$message.error("未检索到相关位置坐标"); + } }, - handleMoveCenter () { + async handleMoveCenter (e) { //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); + const { lat, lng } = map.getCenter(); this.formData.latitude = lat; this.formData.longitude = lng; - this.setMarker(lat, lng); - this.convert(lat, lng); - }, + map.setMarker(lat, lng); - convert (lat, lng) { - markers.setGeometries([]); - // var input = document.getElementById('location').value.split(','); - let location; - if (lat && lng) { - location = new TMap.LatLng(lat, lng); - } else { - location = new TMap.LatLng( - this.formData.latitude, - this.formData.longitude - ); + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.formData.address = data.address; } - - // map.setCenter(location); - markers.updateGeometries([ - { - id: "main", // 点标注数据数组 - position: location, - }, - ]); - geocoder - .getAddress({ location: location }) // 将给定的坐标位置转换为地址 - .then((result) => { - if (!this.isFirst) { - //再次查询时再赋值 - this.formData.address = result.result.address; - } - - if (this.isFirst) { - this.isFirst = false; - } - }); }, resetData () { @@ -711,11 +636,17 @@ export default { }, }; - +