From e5502925619ecdbf8728086c73faeb5b654089c5 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 29 三月 2021 16:18:08 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
---
src/api/request.js | 7
src/components/BaseNav/WasteWater/directive.js | 132 +++++++++++
src/assets/css/map/leaflet.magicMarker.css | 13 +
src/components/BaseNav/WasteWater/WasteWater.js | 177 ++++++++++++++
src/components/plugin/MagicMarker.js | 62 +++-
src/views/MapTemplate.vue | 50 +++
src/assets/images/map-pages/basenav/Waste-water/fs_blue.png | 0
src/assets/images/map-pages/basenav/Waste-water/fs_orange.png | 0
src/assets/images/map-pages/basenav/Waste-water/fs_green.png | 0
src/assets/images/map-pages/basenav/Waste-water/fs_red.png | 0
src/img/fs_yellow.7fe82c5d.png | 0
src/assets/images/map-pages/basenav/Waste-water/fs_yellow.png | 0
src/conf/MapConfig.js | 18 +
src/assets/images/map-pages/basenav/Waste-water/fs_green_xc.png | 0
src/assets/images/map-pages/basenav/Waste-water/fs_bright_green.png | 0
src/components/BaseNav/WasteWater/WasteWaterContent.vue | 52 ++++
src/components/BaseNav/WasteWater/WasteWaterTable.vue | 69 +++++
public/static/WasteWater.json | 117 +++++++++
src/assets/images/map-pages/basenav/Waste-water/fs_gray.png | 0
19 files changed, 669 insertions(+), 28 deletions(-)
diff --git a/public/static/WasteWater.json b/public/static/WasteWater.json
new file mode 100644
index 0000000..44ed223
--- /dev/null
+++ b/public/static/WasteWater.json
@@ -0,0 +1,117 @@
+{
+ "Result": {
+ "IsSuccess": 1,
+ "code": 1,
+ "ErrorMsg": "",
+ "DataInfo": [
+ {
+ "StoragePlaceId": 124.0,
+ "StoragePlaceName": "鐐兼补閮ㄥ惈娌规薄姘存帓鏀惧彛",
+ "HazaWasteStorageDate": "0001-01-01T00:00:00",
+ "HazaWasteCatgrName": null,
+ "SurplusQuantityWarning": 0,
+ "LongDayWarning": 0,
+ "DesignFloorArea": 95.0,
+ "HazaWasteName": null,
+ "EstimateFloorArea": 0.0,
+ "HazaWasteDeptName": null,
+ "SurplusFloorArea": 95.0,
+ "HazaWasteStorageDays": 0.0,
+ "StorageQty": 0.0,
+ "HazaWasteStorageQty": 0.0,
+ "positionX": 32.234354069955536,
+ "positionY": 118.76172605141248
+ },
+ {
+ "StoragePlaceId": 123.0,
+ "StoragePlaceName": "姘村姟閮ㄧ儻鐑冨閮ㄦ帓姘村彛",
+ "HazaWasteStorageDate": "0001-01-01T00:00:00",
+ "HazaWasteCatgrName": null,
+ "SurplusQuantityWarning": 0,
+ "LongDayWarning": 0,
+ "DesignFloorArea": 260.0,
+ "HazaWasteName": null,
+ "EstimateFloorArea": 0.0,
+ "HazaWasteDeptName": null,
+ "SurplusFloorArea": 260.0,
+ "HazaWasteStorageDays": 0.0,
+ "StorageQty": 0.0,
+ "HazaWasteStorageQty": 0.0,
+ "positionX": 32.21783286123124,
+ "positionY": 118.74581627024358
+ },
+ {
+ "StoragePlaceId": 127.0,
+ "StoragePlaceName": "鑱氶啔閮ㄥ簾姘存帓鏀惧彛",
+ "HazaWasteStorageDate": "0001-01-01T00:00:00",
+ "HazaWasteCatgrName": null,
+ "SurplusQuantityWarning": 0,
+ "LongDayWarning": 0,
+ "DesignFloorArea": 351.0,
+ "HazaWasteName": null,
+ "EstimateFloorArea": 0.0,
+ "HazaWasteDeptName": null,
+ "SurplusFloorArea": 351.0,
+ "HazaWasteStorageDays": 0.0,
+ "StorageQty": 0.0,
+ "HazaWasteStorageQty": 0.0,
+ "positionX": 32.21761792102056,
+ "positionY": 118.7694434198091
+ },
+ {
+ "StoragePlaceId": 126.0,
+ "StoragePlaceName": "姘村姟閮ㄩ洦姘存帓鏀惧彛",
+ "HazaWasteStorageDate": "0001-01-01T00:00:00",
+ "HazaWasteCatgrName": null,
+ "SurplusQuantityWarning": 0,
+ "LongDayWarning": 1.0,
+ "DesignFloorArea": 54.0,
+ "HazaWasteName": null,
+ "EstimateFloorArea": 0.0,
+ "HazaWasteDeptName": null,
+ "SurplusFloorArea": 54.0,
+ "HazaWasteStorageDays": 0.0,
+ "StorageQty": 1.0,
+ "HazaWasteStorageQty": 0.0,
+ "positionX": 32.22328407752166,
+ "positionY": 118.7645304033338
+ },
+ {
+ "StoragePlaceId": 122.0,
+ "StoragePlaceName": "鐢熶骇搴熸按鎺掓斁鍙�",
+ "HazaWasteStorageDate": "0001-01-01T00:00:00",
+ "HazaWasteCatgrName": null,
+ "SurplusQuantityWarning": 0,
+ "LongDayWarning": 1.0,
+ "DesignFloorArea": 124.0,
+ "HazaWasteName": null,
+ "EstimateFloorArea": 0.0,
+ "HazaWasteDeptName": null,
+ "SurplusFloorArea": 124.0,
+ "HazaWasteStorageDays": 0.0,
+ "StorageQty": 1.0,
+ "HazaWasteStorageQty": 0.0,
+ "positionX": 32.22478169721047,
+ "positionY": 118.75309838487216
+ },
+ {
+ "StoragePlaceId": 129.0,
+ "StoragePlaceName": "鍖栧纭寲鍝佹帓姘村彛",
+ "HazaWasteStorageDate": "0001-01-01T00:00:00",
+ "HazaWasteCatgrName": null,
+ "SurplusQuantityWarning": 0,
+ "LongDayWarning": 0,
+ "DesignFloorArea": 78.0,
+ "HazaWasteName": null,
+ "EstimateFloorArea": 0.0,
+ "HazaWasteDeptName": null,
+ "SurplusFloorArea": 78.0,
+ "HazaWasteStorageDays": 0.0,
+ "StorageQty": 0.0,
+ "HazaWasteStorageQty": 0.0,
+ "positionX": 32.228692681454525,
+ "positionY": 118.77199913186048
+ }
+ ]
+ }
+}
diff --git a/src/api/request.js b/src/api/request.js
index 445b185..38364ca 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -15,3 +15,10 @@
}
})
}
+export function requestWasteWater (data = {}) {
+ return $http.post('EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', Qs.stringify(data), {
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })
+}
diff --git a/src/assets/css/map/leaflet.magicMarker.css b/src/assets/css/map/leaflet.magicMarker.css
new file mode 100644
index 0000000..b379bf1
--- /dev/null
+++ b/src/assets/css/map/leaflet.magicMarker.css
@@ -0,0 +1,13 @@
+.magicDiv{
+ height: 0;
+ width: 0;
+}
+.magicIcon{
+ position:relative;
+ top:-5px;
+ left:-16px;
+}
+.leaflet-div-icon{
+ background: transparent;
+ border:none;
+}
diff --git a/src/assets/images/map-pages/basenav/Waste-water/fs_blue.png b/src/assets/images/map-pages/basenav/Waste-water/fs_blue.png
new file mode 100644
index 0000000..af3c97b
--- /dev/null
+++ b/src/assets/images/map-pages/basenav/Waste-water/fs_blue.png
Binary files differ
diff --git a/src/assets/images/map-pages/basenav/Waste-water/fs_bright_green.png b/src/assets/images/map-pages/basenav/Waste-water/fs_bright_green.png
new file mode 100644
index 0000000..9d6dae8
--- /dev/null
+++ b/src/assets/images/map-pages/basenav/Waste-water/fs_bright_green.png
Binary files differ
diff --git a/src/assets/images/map-pages/basenav/Waste-water/fs_gray.png b/src/assets/images/map-pages/basenav/Waste-water/fs_gray.png
new file mode 100644
index 0000000..9ebebf7
--- /dev/null
+++ b/src/assets/images/map-pages/basenav/Waste-water/fs_gray.png
Binary files differ
diff --git a/src/assets/images/map-pages/basenav/Waste-water/fs_green.png b/src/assets/images/map-pages/basenav/Waste-water/fs_green.png
new file mode 100644
index 0000000..e75d458
--- /dev/null
+++ b/src/assets/images/map-pages/basenav/Waste-water/fs_green.png
Binary files differ
diff --git a/src/assets/images/map-pages/basenav/Waste-water/fs_green_xc.png b/src/assets/images/map-pages/basenav/Waste-water/fs_green_xc.png
new file mode 100644
index 0000000..dfa3415
--- /dev/null
+++ b/src/assets/images/map-pages/basenav/Waste-water/fs_green_xc.png
Binary files differ
diff --git a/src/assets/images/map-pages/basenav/Waste-water/fs_orange.png b/src/assets/images/map-pages/basenav/Waste-water/fs_orange.png
new file mode 100644
index 0000000..95c544c
--- /dev/null
+++ b/src/assets/images/map-pages/basenav/Waste-water/fs_orange.png
Binary files differ
diff --git a/src/assets/images/map-pages/basenav/Waste-water/fs_red.png b/src/assets/images/map-pages/basenav/Waste-water/fs_red.png
new file mode 100644
index 0000000..ac1b8f2
--- /dev/null
+++ b/src/assets/images/map-pages/basenav/Waste-water/fs_red.png
Binary files differ
diff --git a/src/assets/images/map-pages/basenav/Waste-water/fs_yellow.png b/src/assets/images/map-pages/basenav/Waste-water/fs_yellow.png
new file mode 100644
index 0000000..8d84aa8
--- /dev/null
+++ b/src/assets/images/map-pages/basenav/Waste-water/fs_yellow.png
Binary files differ
diff --git a/src/components/BaseNav/WasteWater/WasteWater.js b/src/components/BaseNav/WasteWater/WasteWater.js
new file mode 100644
index 0000000..c2f3d6b
--- /dev/null
+++ b/src/components/BaseNav/WasteWater/WasteWater.js
@@ -0,0 +1,177 @@
+import { requestWasteWater } from '@/api/request'
+// 灞曠ず鍥剧墖
+import defaultImg from '@assets/images/map-pages/basenav/Waste-water/fs_green.png'
+import Setting from '@assets/images/map-pages/basenav/Waste-water/fs_yellow.png'
+
+// 搴曞浘涓氬姟灞曠ず鐐�
+class AddWasteWaterHelper {
+ constructor (options) {
+ this.map = options.map
+ this.L = window.L
+ this.WasteWaterLayerGroup = this.L.layerGroup().addTo(this.map)
+ this.WasteWaterPopup = null
+ this.L.sgis = this.L.sgis || this.L
+ this.WasteWaterMarkersLabels = []
+ this.pulseHeighLightMarker = null
+ }
+
+ // 璇锋眰鏁版嵁 data 涓哄弬鏁帮紝 璇锋眰鍚庡彴鏁版嵁鏃� 鎼哄甫data鍙傛暟
+ requestData (data) {
+ requestWasteWater(data).then(res => {
+ console.log(res)
+ this.DrawWasteWaterContent(res.Result.DataInfo)
+ // console.log(res)
+ }).catch(err => {
+ console.log(err)
+ })
+ }
+
+ // 鏍规嵁鑾峰彇鏁版嵁 鐢诲嚭 鍐呭
+ DrawWasteWaterContent (data) {
+ // 鍥炬爣鏍峰紡鎵╁睍
+ const WasteWaterIcon = this.WasteWaterIcon()
+
+ // //鍔犺浇鏁版嵁鍓嶅鏋滃瓨鍦ㄥ浘灞傜粍 閭ｄ箞娓呴櫎鎺�
+ if (this.WasteWaterLayerGroup) {
+ this.WasteWaterLayerGroup.clearLayers()
+ }
+ for (let i = 0; i < data.length; i++) {
+ // 缁忕含搴� 浣嶇疆
+ const positionX = data[i].Latitude
+ const positionY = data[i].Longitude
+
+ // 鍒ゆ柇 缁忕含搴︿綅缃俊鎭槸鍚﹀瓨鍦�
+ // if (positionX != null && positionY != null) {
+ // 鐢ㄤ簬 鍒ゆ柇 => 鍒ゆ柇鏄惁灞曠ず鑴夊啿鏁堟灉 => temp(涓存椂)
+ const determineValueOne = data[i].LongDayWarning
+ const determineValueTwo = data[i].StorageQty
+ const positionArea = [positionX, positionY]
+
+ // 鍥炬爣灞曠ず
+ const iconUrl = this.WasteWaterIconUrl(determineValueOne, determineValueTwo, positionArea)
+ const Icon = new WasteWaterIcon({ iconUrl: iconUrl })
+ // let url = Icon.options.iconUrl
+
+ const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' })
+
+ marker.bindPopup(() => {
+ return this.WasteWaterPopup.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 1000,
+ closeButton: true,
+ autoClose: false
+ })
+ // 鍒掕繃鍑虹幇 灞曠ず鏁版嵁
+ marker.bindTooltip(data[i].Name, {
+ permanent: true,
+ offset: [0, -16],
+ direction: 'top',
+ className: ''
+ })
+ // 鐐瑰嚮浜嬩欢
+ marker.on('click', (e) => {
+ try {
+ // console.log(e)
+ this.EffectOfPulse(e.target.getLatLng())
+ this.WasteWaterPopup.setDate(data[i])
+ return this.WasteWaterPopup.$el
+ } catch (error) {
+ console.log(error)
+ }
+ })
+ // 璁剧疆鍐呭娣诲姞鍒板浘灞�
+ this.WasteWaterLayerGroup.addLayer(marker)
+ // }
+ }
+ }
+
+ // 搴熸按鎸夐挳鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃�
+ SetWasteWaterContent (config, containerPopup) {
+ this.WasteWaterPopup = containerPopup
+ }
+
+ // 鍥炬爣鏍峰紡鎵╁睍 => 鍏夊湀 鍥炬爣鑴夊啿
+ WasteWaterIcon () {
+ return this.L.Icon.extend({
+ options: {
+ iconSize: [50, 50],
+ iconAnchor: [25, 25]
+ }
+ })
+ }
+
+ // 鏍规嵁绫诲瀷杩斿洖鍥剧墖鍔犺浇url
+ WasteWaterIconUrl (determineValueOne, determineValueTwo, position) {
+ let EffectOfChange
+ if (determineValueOne === 1 || determineValueTwo === 1) {
+ EffectOfChange = defaultImg
+ this.EffectOfPulse(position, this.WasteWaterMarkersLabels, this.WasteWaterLayerGroup)
+ } else {
+ EffectOfChange = Setting
+ }
+ return EffectOfChange
+ }
+
+ // 鑴夊啿鏁堟灉璁剧疆瀹炵幇
+ EffectOfPulse (position, markers, layerGroup) {
+ // // 鍖哄垎鐩存帴鎵ц 鍜屽垽鏂墽琛岀殑涓嶅悓鍖哄埆
+ let differentColor = ''
+ if (markers) {
+ differentColor = '#ff0000'
+ } else {
+ differentColor = '#98FB98'
+ }
+ // 鍧愭爣鏁版嵁锛氭姤璀︿紶杩涙潵鐨勬槸鏁扮粍 / 鐐瑰嚮浼犺繘鏉ョ殑鏄痮bject
+ const FinalPosition = position instanceof Array ? {
+ lat: position[0],
+ lng: position[1]
+ } : position
+ // 鎻掍欢 鏁堟灉瀹炵幇
+ const pulsingIcon = this.L.icon.pulse({
+ iconSize: [20, 20], // 鎺у埗鍏夊湀澶у皬
+ color: differentColor,
+ fillColor: ' '
+ })
+ if (markers) {
+ // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
+ // this.L.layerGroup(markers).addLayer(layerGroup)
+ } else {
+ const picGroupMarker = new this.L.FeatureGroup()
+ this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
+ this.pulseHeighLightMarker = picGroupMarker.addTo(this.WasteWaterLayerGroup)
+ this.PulseCountSetting()
+ }
+ }
+
+ // 瀵瑰浘鏍囪剦鍐� 杩涜set璁剧疆 // 楂樹寒鍥惧眰
+ PulseCountSetting () {
+ const HeightLightTime = 5
+ let PulseNumber = 5
+ const pulseinterver = setInterval(() => {
+ if (PulseNumber > 0) {
+ PulseNumber--
+ } else {
+ this.pulseClear(pulseinterver)
+ PulseNumber = HeightLightTime
+ }
+ }, 1000)
+ }
+
+ // 鍦ㄦ墽琛屼笅涓墠娓呴櫎宸插瓨鍦ㄥ浘灞�
+ pulseClear (pulseinterver) {
+ clearInterval(pulseinterver)
+ pulseinterver = null
+
+ if (this.WasteWaterLayerGroup) {
+ // this.WasteWaterLayerGroup.clearLayers()
+ } else {
+ this.WasteWaterLayerGroup = this.L.layerGroup().addTo(this.map)
+ }
+ if ((this.pulseHeighLightMarker)) {
+ this.pulseHeighLightMarker.remove()
+ }
+ }
+}
+
+export default AddWasteWaterHelper
diff --git a/src/components/BaseNav/WasteWater/WasteWaterContent.vue b/src/components/BaseNav/WasteWater/WasteWaterContent.vue
new file mode 100644
index 0000000..22512f2
--- /dev/null
+++ b/src/components/BaseNav/WasteWater/WasteWaterContent.vue
@@ -0,0 +1,52 @@
+<template>
+ <div class="wastewater-content">
+ <div class="content-left">
+ <span>{{ displayContent.StoragePlaceName }}</span>
+ </div>
+ <div class="content-right">
+ <WasteWaterTable :displayContent="displayContent"></WasteWaterTable>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import WasteWaterTable from '@components/BaseNav/WasteWater/WasteWaterTable'
+
+export default {
+ name: 'WasteWaterContent',
+ components: { WasteWaterTable },
+ data () {
+ return {
+ displayContent: []
+ }
+ },
+ methods: {
+ setDate (data) {
+ this.displayContent = data
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+span {
+ font-size: 22px;
+ color: red;
+}
+
+.wastewater-content {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+
+ .content-left {
+ width: 35%;
+ }
+
+ .content-right {
+ width: 60%;
+ }
+}
+</style>
diff --git a/src/components/BaseNav/WasteWater/WasteWaterTable.vue b/src/components/BaseNav/WasteWater/WasteWaterTable.vue
new file mode 100644
index 0000000..7468710
--- /dev/null
+++ b/src/components/BaseNav/WasteWater/WasteWaterTable.vue
@@ -0,0 +1,69 @@
+<template>
+ <el-tabs>
+ <el-tab-pane :label="displayContent.StoragePlaceName" name="" class="ShowTable">
+ <el-table
+ :data="tableData" :fit="true">
+ <el-table-column
+ type="index"
+ label="搴忓彿">
+ </el-table-column>
+ <el-table-column
+ type="index"
+ label="搴忓彿">
+ </el-table-column>
+ <el-table-column
+ type="index"
+ label="搴忓彿">
+ </el-table-column>
+ <el-table-column label="搴熸按(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+
+</template>
+
+<script>
+export default {
+ name: 'WasteWaterTable',
+ props: ['displayContent'],
+ data () {
+ return {
+ tableData: [{
+ date: '闆嗗洟鍏徃',
+ name: '35',
+ province: '23',
+ city: '11',
+ address: 235,
+ zip: 23
+ }, {
+ date: '澶╂触鐭冲寲',
+ name: 32,
+ province: 33,
+ city: 44,
+ address: 53,
+ zip: 200333
+ }, {
+ date: '娴庡崡鐐煎寲',
+ name: 35,
+ province: 13,
+ city: 33,
+ address: 44,
+ zip: 200333
+ }]
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/components/BaseNav/WasteWater/directive.js b/src/components/BaseNav/WasteWater/directive.js
new file mode 100644
index 0000000..adc9450
--- /dev/null
+++ b/src/components/BaseNav/WasteWater/directive.js
@@ -0,0 +1,132 @@
+import Vue from 'vue'
+
+// 鑷畾涔夊厓绱犲疄鐜板脊妗嗘嫋鎷絒閲嶇偣]
+Vue.directive('draw', {
+ inserted: function (el, binding, vNode) {
+ el.setAttribute('style', 'position: fixed; z-index: 9999')
+ },
+ bind: function (el, bindding, vNode) {
+ el.setAttribute('draggable', true)
+ let left, top, width, height
+ el._dragstart = function (event) {
+ event.stopPropagation()
+ left = event.clientX - el.offsetLeft
+ top = event.clientY - el.offsetTop
+ width = el.offsetWidth
+ height = el.offsetHeight
+ }
+ el._checkPosition = function () { // 闃叉琚嫋鍑鸿竟鐣�
+ const width = el.offsetWidth
+ const height = el.offsetHeight
+ let left = Math.min(el.offsetLeft, document.body.clientWidth - width)
+ left = Math.max(0, left)
+ let top = Math.min(el.offsetTop, document.body.clientHeight - height)
+ top = Math.max(0, top)
+ el.style.left = left + 'px'
+ el.style.top = top + 'px'
+ el.style.width = width + 'px'
+ el.style.height = height + 'px'
+ }
+ el._dragEnd = function (event) {
+ event.stopPropagation()
+ left = event.clientX - left
+ top = event.clientY - top
+ el.style.left = left + 'px'
+ el.style.top = top + 'px'
+ el.style.width = width + 'px'
+ el.style.height = height + 'px'
+ el._checkPosition()
+ }
+ el._documentAllowDraop = function (event) {
+ event.preventDefault()
+ }
+ document.body.addEventListener('dragover', el._documentAllowDraop)
+ el.addEventListener('dragstart', el._dragstart)
+ el.addEventListener('dragend', el._dragEnd)
+ window.addEventListener('resize', el._checkPosition)
+ },
+
+ unbind: function (el, bindding, vNode) {
+ document.body.removeEventListener('dragover', el._documentAllowDraop)
+ el.removeEventListener('dragstart', el._dragstart)
+ el.removeEventListener('dragend', el._dragEnd)
+ window.removeEventListener('resize', el._checkPosition)
+ delete el._documentAllowDraop
+ delete el._dragstart
+ delete el._dragEnd
+ delete el._checkPosition
+ }
+})
+
+// v-dialogDrag: 寮圭獥鎷栨嫿
+Vue.directive('dialogDrag', {
+ bind (el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.el-dialog__header')
+ const dragDom = el.querySelector('.el-dialog')
+ dialogHeaderEl.style.cursor = 'move'
+
+ // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+ const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+ dialogHeaderEl.onmousedown = (e) => {
+ // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - dialogHeaderEl.offsetLeft
+ const disY = e.clientY - dialogHeaderEl.offsetTop
+
+ // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
+ let styL, styT
+
+ // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px
+ if (sty.left.includes('%')) {
+ styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
+ styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
+ } else {
+ styL = +sty.left.replace(/px/g, '')
+ styT = +sty.top.replace(/px/g, '')
+ }
+
+ document.onmousemove = function (e) {
+ // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ const l = e.clientX - disX
+ const t = e.clientY - disY
+
+ // 绉诲姩褰撳墠鍏冪礌
+ dragDom.style.left = `${l + styL}px`
+ dragDom.style.top = `${t + styT}px`
+
+ // 灏嗘鏃剁殑浣嶇疆浼犲嚭鍘�
+ // binding.value({x:e.pageX,y:e.pageY})
+ }
+
+ document.onmouseup = function (e) {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
+ }
+})
+
+// v-dialogDragWidth: 寮圭獥瀹藉害鎷栧ぇ 鎷栧皬
+Vue.directive('dialogDragWidth', {
+ bind (el, binding, vnode, oldVnode) {
+ const dragDom = binding.value.$el.querySelector('.el-dialog')
+
+ el.onmousedown = (e) => {
+ // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - el.offsetLeft
+
+ document.onmousemove = function (e) {
+ e.preventDefault() // 绉诲姩鏃剁鐢ㄩ粯璁や簨浠�
+
+ // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ const l = e.clientX - disX
+ dragDom.style.width = `${l}px`
+ }
+
+ document.onmouseup = function (e) {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
+ }
+})
diff --git a/src/components/plugin/MagicMarker.js b/src/components/plugin/MagicMarker.js
index afe9916..a9d75bd 100644
--- a/src/components/plugin/MagicMarker.js
+++ b/src/components/plugin/MagicMarker.js
@@ -1,27 +1,45 @@
/* eslint-disable */
-!(function (i) {
- var c = function (i, c) {
- for (var n in c) i[n] = c[n]
- return i
+(function (window) {
+ console.log(window)
+ const setOptions = function (obj, options) {
+ for (const i in options) {
+ obj[i] = options[i]
+ }
+ return obj
}
- L.Icon.Magic = function (i) {
- if (i.iconUrl) {
- var n = { html: '<div class=\'magicDiv\'><div class=\'magictime ' + i.magic + '\'>' + i.html + '<img id=\'migic\' src=\'' + i.iconUrl + '\'/></div></div>' }
+ L.Icon.Magic = function (options) {
+ let opts
+ // console.log(options)
+ if (options.iconUrl) {
+ opts = {
+ html: '<div class=\'magicDiv\'><div class=\'magictime ' + options.magic + '\'>' + options.html + '</div></div>'
+ // className: 'magicDiv',L
+ }
} else {
- var n = { html: '<div class=\'magicDiv\'><div class=\'magictime ' + i.magic + '\'>' + i.html + '</div></div>' }
+ opts = {
+ html: '<div class=\'magicDiv\'><div class=\'magictime ' + options.magic + '\'><img id=\'migic\' src=\'' + options.icon.options.iconUrl + '\'/></div></div>'
+ // className: 'magicDiv',
+ }
}
- delete i.html
- var a = c(n, i)
- console.log(a)
- var r = L.divIcon(a)
- return r
- }, L.icon.magic = function (i) {
- return new L.Icon.Magic(i)
- }, L.Marker.Magic = L.Marker.extend({
- initialize: function (i, c) {
- c.icon = L.icon.magic(c), L.Marker.prototype.initialize.call(this, i, c)
- }
- }), L.marker.magic = function (i, c) {
- return new L.Marker.Magic(i, c)
+ delete options.html
+ const magicIconOpts = setOptions(opts, options)
+ // console.log(magicIconOpts)
+ const magicIcon = L.divIcon(magicIconOpts)
+ return magicIcon
}
-}(window))
+
+ L.icon.magic = function (options) {
+ return new L.Icon.Magic(options)
+ }
+
+ L.Marker.Magic = L.Marker.extend({
+ initialize: function (latlng, options) {
+ options.icon = L.icon.magic(options)
+ L.Marker.prototype.initialize.call(this, latlng, options)
+ }
+ })
+
+ L.marker.magic = function (latlng, options) {
+ return new L.Marker.Magic(latlng, options)
+ }
+})(window)
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index 98ff85c..a039e8f 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -59,9 +59,27 @@
}
}
+/**
+ *
+ */
+// const MagicMaker = {
+// Current: 'vanishIn',
+// ARRAY: [
+// 'twisterInDown', 'twisterInUp', 'swap',
+// 'puffIn', 'vanishIn',
+// 'openDownLeftReturn', 'openDownRightReturn', 'openUpLeftReturn', 'openUpRightReturn',
+// 'perspectiveDownReturn', 'perspectiveUpReturn', 'perspectiveLeftReturn', 'perspectiveRightReturn',
+// 'slideDownReturn', 'slideUpReturn', 'slideLeftReturn', 'slideRightReturn',
+// 'swashIn', 'foolishIn',
+// 'tinRightIn', 'tinLeftIn', 'tinUpIn', 'tinDownIn',
+// 'boingInUp',
+// 'spaclInUp', 'spaceInRight', 'spaceInDown', 'spaceInLeft']
+// }
+
export default {
mapOptions,
mapConfig,
TokenConfig,
BLUEMAP_HOST
+ // MagicMaker
}
diff --git a/src/img/fs_yellow.7fe82c5d.png b/src/img/fs_yellow.7fe82c5d.png
new file mode 100644
index 0000000..8d84aa8
--- /dev/null
+++ b/src/img/fs_yellow.7fe82c5d.png
Binary files differ
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 681a454..8f55f31 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -17,7 +17,7 @@
<enterprise></enterprise>
<!-- <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
<el-button type="primary" @click="ChangeState" class="solid-waste">鍥哄簾</el-button>
- <PublicBounced ref="PublicBounced"></PublicBounced>
+ <el-button type="primary" @click="ChangeWaterState" class="Waste-water">搴熸按</el-button>
<el-button type="primary" @click="AddGasHelper" class="flue-gas">搴熸皵</el-button>
<PublicBounced ref="PublicBounced"></PublicBounced>
</div>
@@ -40,14 +40,11 @@
import Enterprise from '../components/table/enterprise'
// 搴曞浘涓氬姟js閫昏緫
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
-// import SolidContent from '@components/SolidWaste/SolidContent'
-// 搴熸皵
-import AddGasHelper from '@components/BaseNav/flueGas/flueGas'
+import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater'
+import AddGasHelper from '@components/flueGas/flueGas'
// import PopupGas from '@/components/flueGas/popup-gas'
// // 鍏叡灞曠ず鏁版嵁
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
-
-// import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
export default {
name: 'MapTemplate',
components: {
@@ -118,6 +115,28 @@
AddSolidWaste.requestData(data)
AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.PublicBounced)
},
+ ChangeWaterState () {
+ const data = {
+ companyId: 3900100145,
+ id: '',
+ monType: 1,
+ userCode: 'wenchun.deng',
+ monDuration: '',
+ epName: '',
+ secdDeptId: '',
+ contrLevel: '',
+ dataStatus: '',
+ dataFlag: '',
+ runStatus: '',
+ emissTypeId: ''
+ }
+ const AddWasteWater = new AddWasteWaterHelper({ map: this.map })
+ AddWasteWater.requestData(data)
+ AddWasteWater.SetWasteWaterContent(this.config, this.$refs.PublicBounced)
+ },
+ // isShowHidden () {
+ // this.isShowBtn = !this.isShowBtn
+ // },
saveMapStatus () {
window.serviceLayerHelper = this.serviceLayerHelper
this.$store.commit('setMapObj', this.map)
@@ -144,6 +163,7 @@
// this.ChangeState()
// this.AddGasHelper()
+ // this.ChangeWaterState()
this.saveMapStatus()
// this.setMapObj(this.mapObj)
@@ -206,6 +226,13 @@
z-index: 999;
}
+.Waste-water {
+ position: absolute;
+ top: 88px;
+ left: 280px;
+ z-index: 999;
+}
+
.full-screen {
width: 100%;
height: 100%;
@@ -235,5 +262,16 @@
.leaflet-custom-icon {
background: white;
}
+
+ .leaflet-marker-icon {
+ background: none;
+ }
+
+ #migic {
+ width: 48px;
+ height: 48px;
+ margin: -18px -20px;
+ z-index: 999;
+ }
}
</style>
--
Gitblit v1.8.0