From cb0e263d36be16efbfbbb27f02139749f7ef5c2c Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期四, 01 四月 2021 09:54:39 +0800 Subject: [PATCH] 点击废水显示弹窗效果 --- src/components/LayerController/logic/WasteWater.js | 108 +++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 79 insertions(+), 29 deletions(-) diff --git a/src/components/LayerController/logic/WasteWater.js b/src/components/LayerController/logic/WasteWater.js index b862b44..16c4f17 100644 --- a/src/components/LayerController/logic/WasteWater.js +++ b/src/components/LayerController/logic/WasteWater.js @@ -2,48 +2,98 @@ * 搴熸按 */ const AnimalService = require('../service/AnimalService').default -const AjaxUtils = require('../../../utils/AjaxUtils').default +const mapApi = require('../../../api/mapApi').default +// 寮圭獥鏁版嵁寮曡繘 +const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default -// const getWasteWater = require('../../../utils/axios').default +const NormalImg = '/assets/images/map/wastewater/fs_green.png' // 姝e父 +const OffImg = '/assets/images/map/wastewater/fs_gray.png' // 鍋滆繍 +const AbnormalImg = '/assets/images/map/wastewater/fs_blue.png' // 寮傚父 +const MissImg = '/assets/images/map/wastewater/fs_yellow.png' // 缂哄け +const AlarmImg = '/assets/images/map/wastewater/fs_red.png' // 鎶ヨ闂儊 +const WarnImg = '/assets/images/map/wastewater/fs_orange.png' // 棰勮闂儊 module.exports = function () { /** * 杩斿洖marker瀵硅薄鏁扮粍 * @param L leaflet瀵硅薄 */ - this.init = (layer, L) => { - this.animalService = new AnimalService({ L: L, layer: layer }) - AjaxUtils.get4JsonDataByUrl('http://10.246.162.140:8080/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', { - companyId: 3900100145, - id: '', - monType: 1, - userCode: 'wenchun.deng', - monDuration: '', - epName: '', - secdDeptId: '', - contrLevel: '', - dataStatus: '', - dataFlag: '', - runStatus: '', - emissTypeId: '' - }, function (res) { - console.log(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], {})) - } + this.init = async (layer, L) => { + this.animalService = new AnimalService({ + L: L, + layer: layer }) + const res = await mapApi.getWasteWater() + console.log(res) + const data = res.Result.DataInfo + console.log(data) + for (let i = 0; i < data.length; i++) { + // 缁忕含搴� 浣嶇疆 + const positionX = data[i].Latitude + const positionY = data[i].Longitude + + // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁鐨勪笉鍚� + const testValue = data[i].ContrLevel + const iconUrl = this.differentTypes(testValue) + const marker = L.marker.magic([positionX, positionY], { + test: data[i], + icon: L.icon({ + iconUrl: iconUrl, + iconSize: [50, 50], + iconAnchor: [25, 25] + }) + }) + layer.addLayer(marker) + } } this.bindTooltip = (layer) => { - return 'aaaa' + return layer.options.test.Name } - this.clickListener = (e) => { - console.log(e) + this.clickListener = async (e) => { + // console.log(e) this.animalService.pulseEffect(e.latlng) + const dataValue = { + StoragePlaceId: e.layer.options.test.StoragePlaceId + } + const result = await mapApi.getWasteWater(dataValue) + const PublicBounced = window.Vue.extend(publicBounced) + const instance = new PublicBounced() + instance.setData(result) + instance.$mount() + document.body.appendChild(instance.$el) + } + + // 鏍规嵁杩斿洖鍊肩殑涓嶅悓鏍囪涓嶅悓鍥剧墖 + this.differentTypes = (testValue) => { + let testChange + switch (testValue) { + case 1: + testChange = NormalImg + break + case 2: + testChange = OffImg + break + case 3: + testChange = AbnormalImg + break + case 4: + testChange = MissImg + break + case 5: + testChange = NormalImg + break + case 6: + testChange = AlarmImg + break + case 7: + testChange = AbnormalImg + break + case 8: + testChange = WarnImg + break + } + return testChange } } -- Gitblit v1.8.0