From 0ca297f9622764653a7262b51bdff73b553dee79 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期四, 01 四月 2021 10:55:54 +0800 Subject: [PATCH] 弹框接收信息展示修改 --- src/components/LayerController/logic/SolidWaste.js | 104 ++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 76 insertions(+), 28 deletions(-) diff --git a/src/components/LayerController/logic/SolidWaste.js b/src/components/LayerController/logic/SolidWaste.js index c92dca2..3eee0e3 100644 --- a/src/components/LayerController/logic/SolidWaste.js +++ b/src/components/LayerController/logic/SolidWaste.js @@ -1,51 +1,99 @@ /** * 鍥哄簾 */ + +// 鍖哄垎涓嶅悓绫诲瀷 浣跨敤涓嶅悓img +const defaultImg = '/assets/images/map/solidwaste/voc.png' +const setting = '/assets/images/map/solidwaste/gf_green.png' + +// 璇锋眰鎺ュ彛鏁版嵁 +const mapApi = require('../../../api/mapApi').default +// 浣跨敤灏佽鏂规硶 const AnimalService = require('../service/AnimalService').default -const AjaxUtils = require('../../../utils/AjaxUtils').default + +const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default module.exports = function () { /** * 杩斿洖marker瀵硅薄鏁扮粍 * @param L leaflet瀵硅薄 */ - this.init = (layer, L) => { + this.init = async (layer, L) => { this.animalService = new AnimalService({ L: L, - layer: layer, - LayerPopup: null + layer: layer }) - // AjaxUtils.get4JsonDataByUrl('http://10.246.162.140:8080/EPInterface/DataService/EPMapService.asmx/QueryStoragePlaceListByCompanyAndName', { - // AjaxUtils.get4JsonDataByUrl('http://xearth.cn:3000/wasteSolid/getSolidWaste', { - AjaxUtils.get4JsonDataByUrl('http://localhost:8888/static/SolidWaste.json', { - companyId: 3900100145, - userCode: 'wenchun.deng', - name: '', - marginWarr: '', - longDayWarr: '' - }, function (res) { - const data = res.data.Result.DataInfo - for (let i = 0; i < data.length; i++) { - // 缁忕含搴� 浣嶇疆 - const positionX = data[i].Latitude - const positionY = data[i].Longitude - layer.addLayer(L.marker([positionX, positionY], {})) - } - }) + const result = await mapApi.getSolidWaste() + const getSolidWasteData = result.Result.DataInfo || {} + // 寰幆閬嶅巻鏁版嵁 鏍规嵁杩涜marker 鐨勫垱寤� + for (let i = 0; i < getSolidWasteData.length; i++) { + // 缁忕含搴� 浣嶇疆 + const positionX = getSolidWasteData[i].Latitude + const positionY = getSolidWasteData[i].Longitude + + // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁鐨勪笉鍚� 1.鎺ュ彛鎺ュ彛鏁版嵁鏉ヨ繘琛屾暟鎹殑鍒ゆ柇 2.鏍规嵁鏁版嵁绫诲瀷鐨勪笉鍚岋紝杩涜涓嶅悓绫诲瀷鐨勫浘鐗囨樉绀� + const judgeValue = getSolidWasteData[i].StorageQty + var iconUrl = this.differentTypes(judgeValue) + + const marker = L.marker([positionX, positionY], { + totransferData: getSolidWasteData[i], + icon: L.icon({ + iconUrl: iconUrl, + iconSize: [50, 50], + iconAnchor: [25, 25] + }) + }) + layer.addLayer(marker) + } } this.bindTooltip = (layer) => { - return '娴嬭瘯鍥哄簾' + return layer.options.totransferData.Name } this.clickListener = (e) => { + // 鐐瑰嚮marker鐨刾ulse()鍏夋尝 this.animalService.pulseEffect(e.latlng) - console.log(e) - console.log(this.PublicBounced) - // return this.PublicBounced.$el + /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */ + // this.setPanTo(e.latlng, 200) + /* 鐐瑰嚮鏁版嵁鐨勬帴鍙h姹� */ + this.requestSolidWasteData(e).then(e) } - // 鍥哄簾鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃� - // SetSolidWasteContent (config, containerPopup) { - // this.SolidWastePopup = containerPopup + + // 涓嶅悓绫诲瀷鍥剧墖灏佽 + this.differentTypes = (judgeValue) => { + var effectOfChange + if (judgeValue === 1) { + effectOfChange = defaultImg + } else { + effectOfChange = setting + } + return effectOfChange + } + + // 鏍规嵁鐐瑰嚮涓嶅悓鏁版嵁 杩涜鎺ュ彛鐨勬暟鎹姹� + this.requestSolidWasteData = async (e) => { + // 鍩烘湰淇℃伅灞曠ず + const dataValue = { + StoragePlaceId: e.layer.options.totransferData.StoragePlaceId + } + const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue) + // 璇︾粏淇℃伅灞曠ず + const resultDetailed = await mapApi.getSolidWasteDetail(dataValue) + + const PublicBounced = window.Vue.extend(publicBounced) + const instance = new PublicBounced() + instance.$mount() + document.body.appendChild(instance.$el) + instance.setData(resultBasic.Result.DataInfo, resultDetailed, 'gufei') + } + + // flayTo() + // this.setPanTo = (pos, value) => { + // var position = pos + // position = this.map.latLngToLayerPoint(position) + // position.y += value + // position = this.map.layerPointToLatLng(position) + // this.map.flyTo(position) // } } -- Gitblit v1.8.0