From 2a99c0727f88565eb2b8c0beeb609618413ff3b0 Mon Sep 17 00:00:00 2001
From: zhangshuaibao <15731629597@163.com>
Date: 星期一, 29 三月 2021 09:45:45 +0800
Subject: [PATCH] 文件整合，重新分弹框
---
src/components/BaseNav/WasteWater/directive.js | 132 ++++++++++++++++++++++
src/assets/css/map/leaflet.magicMarker.css | 13 ++
src/components/BaseNav/WasteWater/WasteWater.js | 20 +-
src/components/plugin/MagicMarker.js | 82 ++++++-------
src/views/MapTemplate.vue | 31 +++-
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/Sgis.js | 1
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 | 2
src/components/BaseNav/WasteWater/WasteWaterTable.vue | 2
src/assets/images/map-pages/basenav/Waste-water/fs_gray.png | 0
18 files changed, 238 insertions(+), 63 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index e26ff26..dcebdb5 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -16,6 +16,7 @@
import './components/plugin/Editable' // 鏍囩粯鎿嶄綔
import './components/plugin/MagicMarker' // 鍔ㄧ敾Marker
import './assets/css/map/magic.min.css' // 鍔ㄧ敾Marker css
+// import './assets/css/map/leaflet.magicMarker.css' // 鍔ㄧ敾marker
import '@components/plugin/pulse/Pulse' // marker 澶栧湀娉�
import '@components/plugin/pulse/Pulse.css' // marker 澶栧湀娉� css
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.js b/src/components/BaseNav/WasteWater/WasteWater.js
similarity index 90%
rename from src/components/BaseNav/WasteWater.js
rename to src/components/BaseNav/WasteWater/WasteWater.js
index 4a3e2f4..af1d4fb 100644
--- a/src/components/BaseNav/WasteWater.js
+++ b/src/components/BaseNav/WasteWater/WasteWater.js
@@ -1,7 +1,7 @@
import { requestWasteWater } from '@/api/request'
// 灞曠ず鍥剧墖
-import defaultImg from '@components/BaseNav/magicMarker.png'
-import Setting from '@components/BaseNav/voc.png'
+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 {
@@ -19,7 +19,7 @@
requestData () {
requestWasteWater().then(res => {
this.DrawTheWasteWaterContent(res.Result.DataInfo)
- console.log(res)
+ // console.log(res)
}).catch(err => {
console.log(err)
})
@@ -51,13 +51,13 @@
const Icon = new WasteWaterIcon({ iconUrl: iconUrl })
// let url = Icon.options.iconUrl
- const marker = this.L.marker([positionX, positionY], { icon: Icon })
+ const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' })
marker.bindPopup(() => {
return this.WasteWaterPopup.$el
}, {
className: 's-map-popup',
- minWidth: 600,
+ minWidth: 1000,
closeButton: true,
autoClose: false
})
@@ -68,7 +68,7 @@
direction: 'top',
className: ''
})
- // 鐐瑰嚮 浜嬩欢
+ // 鐐瑰嚮浜嬩欢
marker.on('click', (e) => {
try {
// console.log(e)
@@ -84,7 +84,7 @@
}
}
- // 鍥哄簾鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃�
+ // 搴熸按鎸夐挳鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃�
SetWasteWaterContent (config, containerPopup) {
this.WasteWaterPopup = containerPopup
}
@@ -127,9 +127,9 @@
} : position
// 鎻掍欢 鏁堟灉瀹炵幇
const pulsingIcon = this.L.icon.pulse({
- iconSize: [20, 20],
+ iconSize: [20, 20], // 鎺у埗鍏夊湀澶у皬
color: differentColor,
- fillColor: ''
+ fillColor: ' '
})
if (markers) {
// markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
@@ -156,7 +156,7 @@
}, 1000)
}
- // 娓呴櫎 鍥惧眰
+ // 鍦ㄦ墽琛屼笅涓墠娓呴櫎宸插瓨鍦ㄥ浘灞�
pulseClear (pulseinterver) {
clearInterval(pulseinterver)
pulseinterver = null
diff --git a/src/components/BaseNav/WasteWaterContent.vue b/src/components/BaseNav/WasteWater/WasteWaterContent.vue
similarity index 90%
rename from src/components/BaseNav/WasteWaterContent.vue
rename to src/components/BaseNav/WasteWater/WasteWaterContent.vue
index 0ff5603..22512f2 100644
--- a/src/components/BaseNav/WasteWaterContent.vue
+++ b/src/components/BaseNav/WasteWater/WasteWaterContent.vue
@@ -11,7 +11,7 @@
<script>
-import WasteWaterTable from '@components/BaseNav/WasteWaterTable'
+import WasteWaterTable from '@components/BaseNav/WasteWater/WasteWaterTable'
export default {
name: 'WasteWaterContent',
diff --git a/src/components/BaseNav/WasteWaterTable.vue b/src/components/BaseNav/WasteWater/WasteWaterTable.vue
similarity index 98%
rename from src/components/BaseNav/WasteWaterTable.vue
rename to src/components/BaseNav/WasteWater/WasteWaterTable.vue
index 1768d8f..7468710 100644
--- a/src/components/BaseNav/WasteWaterTable.vue
+++ b/src/components/BaseNav/WasteWater/WasteWaterTable.vue
@@ -1,6 +1,6 @@
<template>
<el-tabs>
- <el-tab-pane :label="displayContent.StoragePlaceName" name="">
+ <el-tab-pane :label="displayContent.StoragePlaceName" name="" class="ShowTable">
<el-table
:data="tableData" :fit="true">
<el-table-column
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 f74a2a4..a000501 100644
--- a/src/components/plugin/MagicMarker.js
+++ b/src/components/plugin/MagicMarker.js
@@ -1,49 +1,45 @@
-const init = (L) => {
- (function (window) {
- console.log(window)
- const setOptions = function (obj, options) {
- for (const i in options) {
- obj[i] = options[i]
+/* eslint-disable */
+(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 (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
}
- return obj
- }
- L.Icon.Magic = function (options) {
- let opts
- if (options.iconUrl) {
- opts = {
- html: "<div class='magicDiv'><div class='magictime " + options.magic + "'><img id='migic' src='" + options.iconUrl + "'/></div></div>"
- // className: 'magicDiv',
- }
- } else {
- opts = {
- html: "<div class='magicDiv'><div class='magictime " + options.magic + "'>" + options.html + '</div></div>'
- // className: 'magicDiv',
- }
+ } else {
+ opts = {
+ html: '<div class=\'magicDiv\'><div class=\'magictime ' + options.magic + '\'><img id=\'migic\' src=\'' + options.icon.options.iconUrl + '\'/></div></div>'
+ // className: 'magicDiv',
}
- delete options.html
- const magicIconOpts = setOptions(opts, options)
- // console.log(magicIconOpts)
- const magicIcon = L.divIcon(magicIconOpts)
- return magicIcon
}
+ delete options.html
+ const magicIconOpts = setOptions(opts, options)
+ // console.log(magicIconOpts)
+ const magicIcon = L.divIcon(magicIconOpts)
+ return magicIcon
+ }
- L.icon.magic = function (options) {
- return new L.Icon.Magic(options)
+ 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 = 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)
-}
-
-export default {
- init
-}
+ 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 e01a715..0b6c329 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -55,9 +55,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 59be60e..be50061 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -38,11 +38,11 @@
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
-import SolidContent from '@components/BaseNav/SolidContent'
-import WasteWaterContent from '@components/BaseNav/WasteWaterContent'
+import SolidContent from '@components/BaseNav/SolidWaste/SolidContent'
+import WasteWaterContent from '@components/BaseNav/WasteWater/WasteWaterContent'
// 搴曞浘涓氬姟js閫昏緫
-import AddSolidWasteHelper from '@components/BaseNav/SolidWaste'
-import AddWasteWaterHelper from '@components/BaseNav/WasteWater'
+import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
+import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater'
export default {
name: 'MapTemplate',
@@ -63,6 +63,7 @@
},
data () {
return {
+ show: true,
map: null,
lcServiceLayerVisible: false,
basemapHelper: {},
@@ -87,9 +88,11 @@
AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
},
ChangeWaterState () {
- const AddWasteWater = new AddWasteWaterHelper({ map: this.map })
- AddWasteWater.requestData()
- AddWasteWater.SetWasteWaterContent(this.config, this.$refs.WasteWaterPopup)
+ if (this.show) {
+ const AddWasteWater = new AddWasteWaterHelper({ map: this.map })
+ AddWasteWater.requestData()
+ AddWasteWater.SetWasteWaterContent(this.config, this.$refs.WasteWaterPopup)
+ }
},
// isShowHidden () {
// this.isShowBtn = !this.isShowBtn
@@ -118,7 +121,8 @@
this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵�
this.vectorLayerHelper.initVectorLayers(this.config)
- this.ChangeState()
+ // this.ChangeState()
+ // this.ChangeWaterState()
this.saveMapStatus()
// this.setMapObj(this.mapObj)
@@ -211,5 +215,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