From 58737013341e2363b39a33fea150f72ebd37cfc1 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 29 三月 2021 09:35:17 +0800
Subject: [PATCH] 文
---
src/components/BaseNav/SolidWaste/SolidWaste.js | 88 ++++-----
src/api/request.js | 13
src/components/BaseNav/WireSurface/index.js | 23 ++
src/components/BaseNav/SolidWaste/Popup.vue | 111 ++++++++++++
src/conf/MapConfig.js | 8
src/utils/axios.js | 3
package.json | 1
src/components/BaseNav/SolidWaste/SolidContent.vue | 79 ++++++--
src/components/plugin/MagicMarker.js | 72 ++-----
src/views/MapTemplate.vue | 21 +
src/components/BaseNav/PublicBounced/PublicBounced.vue | 80 ++++++++
src/Sgis.js | 1
12 files changed, 366 insertions(+), 134 deletions(-)
diff --git a/package.json b/package.json
index 1004223..abf1a54 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"leaflet.markercluster": "^1.4.1",
"lodash": "^4.17.10",
"nprogress": "^0.2.0",
+ "qs": "^6.10.1",
"rbush": "^3.0.1",
"screenfull": "^3.3.3",
"style-resources-loader": "^1.4.1",
diff --git a/src/Sgis.js b/src/Sgis.js
index e26ff26..6e794e0 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 '@/components/plugin/magicMarker.css'
import '@components/plugin/pulse/Pulse' // marker 澶栧湀娉�
import '@components/plugin/pulse/Pulse.css' // marker 澶栧湀娉� css
diff --git a/src/api/request.js b/src/api/request.js
index d623ca2..315f29b 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -1,9 +1,10 @@
import $http from '@utils/axios'
+import Qs from 'qs'
-// // 鍥哄簾鎺ュ彛
-// export const requestSolidWaste = (url, data = {}) => {
-// return $http.post('./static/SolidWaste.json', data)
-// }
-export const requestSolidWaste = (url) => {
- return $http.get('./static/SolidWaste.json')
+export const QueryStoragePlaceListByCompanyAndName = (data = {}) => {
+ return $http.post('/EPInterface/DataService/EPMapService.asmx/QueryStoragePlaceListByCompanyAndName', Qs.stringify(data), {
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })
}
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
new file mode 100644
index 0000000..550e6e8
--- /dev/null
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -0,0 +1,80 @@
+<template>
+ <div class="public-bounced" v-show="flag">
+ <div class="popup_title">{{ displayContent.Name }}</div>
+ <div class="popup_bottom">
+ <button @click="closePopup">纭畾</button>
+ </div>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: 'PublicBounced',
+ data () {
+ return {
+ displayContent: [],
+ flag: false
+ }
+ },
+ methods: {
+ setData (data) {
+ this.displayContent = data
+ this.flag = true
+ },
+ closePopup () {
+ this.flag = false
+ }
+ }
+}
+</script>
+
+<style scoped>
+.public-bounced {
+ width: 80%;
+ z-index: 499;
+ position: absolute;
+ top: 15%;
+ left: 10%;
+ background-color: rgba(128, 128, 128, 0.507);
+ padding: 1%;
+ border-radius: 20px;
+ margin: 10% auto;
+}
+
+.popup_title {
+ text-align: center;
+ font-weight: 600;
+ font-size: 30px;
+}
+
+.popup_center {
+ padding: 10%;
+ font-size: 20px;
+}
+
+.popup_bottom {
+ display: flex;
+ justify-content: space-around;
+}
+
+button {
+ width: 25%;
+ height: 20%;
+ padding: 2%;
+ border: 1px solid gray;
+ border-radius: 10px;
+}
+
+button:nth-child(1) {
+ background-color: orangered;
+ color: white;
+ font-size: 20px;
+}
+
+button:nth-child(2) {
+ background-color: gray;
+ color: black;
+ font-size: 20px;
+}
+</style>
diff --git a/src/components/BaseNav/SolidWaste/Popup.vue b/src/components/BaseNav/SolidWaste/Popup.vue
new file mode 100644
index 0000000..79a1a6d
--- /dev/null
+++ b/src/components/BaseNav/SolidWaste/Popup.vue
@@ -0,0 +1,111 @@
+<template>
+ <div class="box" @click.stop="clo_box">
+ <div class="popup_content">
+ <div class="popup_title">{{ this.title }}</div>
+ <div class="popup_center">
+ <div v-if="this.content_text">{{ this.content_text }}</div>
+ <slot></slot>
+ </div>
+ <div class="popup_bottom">
+ <button @click="popup_sub">纭畾{{ displayContent.Name }}</button>
+ <button @click="popup_clo">鍙栨秷</button>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'SolidContent',
+ data () {
+ return {
+ displayContent: []
+ }
+ },
+ props: {
+ title: {
+ type: String,
+ default: '榛樿鏍囬'
+ },
+ content_text: {
+ type: String,
+ default: ''
+ },
+ hidden: {
+ type: Boolean,
+ default: false
+ }
+ },
+ methods: {
+ // 鐐瑰嚮纭畾浜嬩欢
+ popup_sub () {
+ this.$emit('popup_sub')
+ },
+ // 鐐瑰嚮浜嗗彇娑堜簨浠�
+ popup_clo () {
+ this.$emit('popup_clo')
+ },
+ // 鐐瑰嚮浜嗗脊鍑烘浠ュ鍖哄煙
+ clo_box (e) {
+ if (e.target._prevClass === 'box') {
+ this.$emit('clo_box')
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.box {
+ width: 80%;
+ z-index: 999;
+ position: absolute;
+ top: 50%;
+ left: 25%;
+ background-color: rgba(128, 128, 128, 0.507);
+}
+
+.popup_content {
+ background-color: white;
+ padding: 1%;
+ border-radius: 20px;
+ width: 40%;
+ margin: 10% auto;
+}
+
+.popup_title {
+ text-align: center;
+ font-weight: 600;
+ font-size: 30px;
+}
+
+.popup_center {
+ padding: 10%;
+ font-size: 20px;
+}
+
+.popup_bottom {
+ display: flex;
+ justify-content: space-around;
+}
+
+button {
+ width: 25%;
+ height: 20%;
+ padding: 2%;
+ border: 1px solid gray;
+ border-radius: 10px;
+}
+
+button:nth-child(1) {
+ background-color: orangered;
+ color: white;
+ font-size: 20px;
+}
+
+button:nth-child(2) {
+ background-color: gray;
+ color: black;
+ font-size: 20px;
+}
+</style>
diff --git a/src/components/BaseNav/SolidWaste/SolidContent.vue b/src/components/BaseNav/SolidWaste/SolidContent.vue
index 3b6fb0b..804fa5f 100644
--- a/src/components/BaseNav/SolidWaste/SolidContent.vue
+++ b/src/components/BaseNav/SolidWaste/SolidContent.vue
@@ -1,53 +1,82 @@
<template>
- <div class="solid-content">
- <div class="content-left">
- <span>{{ displayContent.StoragePlaceName }}</span>
- </div>
- <div class="content-right">
- <SolidWasteTable :displayContent="displayContent"></SolidWasteTable>
+ <div class="public-bounced" v-show="flag">
+ <div class="popup_title">{{ displayContent.Name }}</div>
+ <div class="popup_bottom">
+ <button @click="closePopup">纭畾</button>
+ <button @click="closePopup">鍙栨秷</button>
</div>
</div>
</template>
<script>
-
-import SolidWasteTable from '@components/BaseNav/SolidWaste/SolidWasteTable'
+import '@components/BaseNav/SolidWaste/directive'
export default {
name: 'SolidContent',
- components: { SolidWasteTable },
data () {
return {
- displayContent: []
+ displayContent: [],
+ flag: false
}
},
methods: {
- setDate (data) {
- // console.log(data)
+ setData (data) {
this.displayContent = data
+ this.flag = true
+ },
+ closePopup () {
+ this.flag = false
}
}
}
</script>
-<style lang="less" scoped>
-span {
- font-size: 22px;
- color: red;
+<style scoped>
+.public-bounced {
+ width: 80%;
+ z-index: 499;
+ position: absolute;
+ top: 15%;
+ left: 10%;
+ background-color: rgba(128, 128, 128, 0.507);
+ padding: 1%;
+ border-radius: 20px;
+ margin: 10% auto;
}
-.solid-content {
- width: 100%;
+.popup_title {
+ text-align: center;
+ font-weight: 600;
+ font-size: 30px;
+}
+
+.popup_center {
+ padding: 10%;
+ font-size: 20px;
+}
+
+.popup_bottom {
display: flex;
- align-items: center;
justify-content: space-around;
+}
- .content-left {
- width: 35%;
- }
+button {
+ width: 25%;
+ height: 20%;
+ padding: 2%;
+ border: 1px solid gray;
+ border-radius: 10px;
+}
- .content-right {
- width: 60%;
- }
+button:nth-child(1) {
+ background-color: orangered;
+ color: white;
+ font-size: 20px;
+}
+
+button:nth-child(2) {
+ background-color: gray;
+ color: black;
+ font-size: 20px;
}
</style>
diff --git a/src/components/BaseNav/SolidWaste/SolidWaste.js b/src/components/BaseNav/SolidWaste/SolidWaste.js
index 3346804..8968cc9 100644
--- a/src/components/BaseNav/SolidWaste/SolidWaste.js
+++ b/src/components/BaseNav/SolidWaste/SolidWaste.js
@@ -1,4 +1,4 @@
-import { requestSolidWaste } from '@/api/request'
+import { QueryStoragePlaceListByCompanyAndName } from '@/api/request'
// 灞曠ず鍥剧墖
import defaultImg from '@assets/images/map-pages/basenav/solidwaste/voc.png'
import Setting from '@assets/images/map-pages/basenav/solidwaste/gf_green.png'
@@ -16,9 +16,9 @@
}
// 璇锋眰鏁版嵁 data 涓哄弬鏁帮紝 璇锋眰鍚庡彴鏁版嵁鏃� 鎼哄甫data鍙傛暟
- requestData () {
- requestSolidWaste().then(res => {
- // console.log(res)
+ requestData (data) {
+ QueryStoragePlaceListByCompanyAndName(data).then(res => {
+ console.log(res)
this.DrawTheSolidWasteContent(res.Result.DataInfo)
}).catch(err => {
console.log(err)
@@ -36,51 +36,44 @@
}
for (let i = 0; i < data.length; i++) {
// 缁忕含搴� 浣嶇疆
- const positionX = data[i].positionX
- const positionY = data[i].positionY
+ const positionX = data[i].Latitude
+ const positionY = data[i].Longitude
// 鍒ゆ柇 缁忕含搴︿綅缃俊鎭槸鍚﹀瓨鍦�
- // if (positionX != null && positionY != null) {
- // 鐢ㄤ簬 鍒ゆ柇 => 鍒ゆ柇鏄惁灞曠ず鑴夊啿鏁堟灉 => temp(涓存椂)
- const determineValueOne = data[i].LongDayWarning
- var determineValueTwo = data[i].StorageQty
- const positionArea = [positionX, positionY]
+ if (positionX != null && positionY != null) {
+ // 鐢ㄤ簬 鍒ゆ柇 => 鍒ゆ柇鏄惁灞曠ず鑴夊啿鏁堟灉 => temp(涓存椂)
+ const determineValueOne = data[i].LongDayWarning
+ var determineValueTwo = data[i].StorageQty
+ const positionArea = [positionX, positionY]
- // 鍥炬爣灞曠ず
- var iconUrl = this.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
- var Icon = new SolidWasteIcon({ iconUrl: iconUrl })
- // var url = Icon.options.iconUrl
+ // 鍥炬爣灞曠ず
+ var iconUrl = this.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
+ var Icon = new SolidWasteIcon({ iconUrl: iconUrl })
+ // var url = Icon.options.iconUrl
- const marker = this.L.marker([positionX, positionY], { icon: Icon })
+ const marker = this.L.marker([positionX, positionY], { icon: Icon })
- marker.bindPopup(() => {
- return this.SolidWastePopup.$el
- }, {
- className: 's-map-popup',
- minWidth: 600,
- closeButton: true,
- autoClose: false
- })
- // 鍒掕繃鍑虹幇 灞曠ず鏁版嵁
- marker.bindTooltip(data[i].StoragePlaceName, {
- permanent: true,
- offset: [0, -16],
- direction: 'top',
- className: ''
- })
- // 鐐瑰嚮 浜嬩欢
- marker.on('click', (e) => {
- try {
- // console.log(e)
- this.EffectOfPulse(e.target.getLatLng())
- this.SolidWastePopup.setDate(data[i])
- } catch (error) {
- console.log(error)
- }
- })
- // 璁剧疆鍐呭娣诲姞鍒板浘灞�
- this.SolidWasteLayerGroup.addLayer(marker)
- // }
+ // 鍒掕繃鍑虹幇 灞曠ず鏁版嵁
+ marker.bindTooltip(data[i].Name, {
+ permanent: true,
+ offset: [0, 16],
+ direction: 'bottom',
+ className: ''
+ })
+ // 鐐瑰嚮 浜嬩欢
+ marker.on('click', (e) => {
+ try {
+ // console.log(e)
+ this.EffectOfPulse(e.target.getLatLng())
+ this.SolidWastePopup.setData(data[i])
+ return this.SolidWastePopup.$el
+ } catch (error) {
+ console.log(error)
+ }
+ })
+ // 璁剧疆鍐呭娣诲姞鍒板浘灞�
+ this.SolidWasteLayerGroup.addLayer(marker)
+ }
}
}
@@ -132,8 +125,8 @@
fillColor: ''
})
if (markers) {
- markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
- this.L.layerGroup(markers).addLayer(layerGroup)
+ // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
+ // this.L.layerGroup(markers).addLayer(layerGroup)
} else {
var picGroupMarker = new this.L.FeatureGroup()
this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
@@ -146,7 +139,8 @@
PulseCountSetting () {
var HeightLightTime = 5
var PulseNumber = 5
- const pulseinterver = setInterval(() => {
+ const pulseinterver = setInterval((e) => {
+ console.log(e)
if (PulseNumber > 0) {
PulseNumber--
} else {
diff --git a/src/components/BaseNav/WireSurface/index.js b/src/components/BaseNav/WireSurface/index.js
new file mode 100644
index 0000000..6d04ade
--- /dev/null
+++ b/src/components/BaseNav/WireSurface/index.js
@@ -0,0 +1,23 @@
+
+// 寮曞叆鐢ㄤ簬澶勭悊鎺ュ彛鏁版嵁鑾峰彇鐨勬柟娉�
+import { getDataInitWireSurface } from '@src/api/request'
+
+class initWireSurface {
+ constructor (options) {
+ this.map = options.map
+ this.L = window.L
+ this.initWireSurfaceMap = new Map()
+ this.initWireSurfacePopup = this.L.layerGroup().addTo(this.map)
+ }
+
+ // 鑾峰彇椤甸潰绾�/闈㈡暟鎹�
+ getDataInitWireSurface () {
+ getDataInitWireSurface().then(res => {
+ console.log(res)
+ }).catch(error => {
+ console.log(error)
+ })
+ }
+}
+
+export default initWireSurface
diff --git a/src/components/plugin/MagicMarker.js b/src/components/plugin/MagicMarker.js
index f74a2a4..afe9916 100644
--- a/src/components/plugin/MagicMarker.js
+++ b/src/components/plugin/MagicMarker.js
@@ -1,49 +1,27 @@
-const init = (L) => {
- (function (window) {
- console.log(window)
- const setOptions = function (obj, options) {
- for (const i in options) {
- obj[i] = options[i]
- }
- return obj
+/* eslint-disable */
+!(function (i) {
+ var c = function (i, c) {
+ for (var n in c) i[n] = c[n]
+ return i
+ }
+ 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>' }
+ } else {
+ var n = { html: '<div class=\'magicDiv\'><div class=\'magictime ' + i.magic + '\'>' + i.html + '</div></div>' }
}
- 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',
- }
- }
- delete options.html
- const magicIconOpts = setOptions(opts, options)
- // console.log(magicIconOpts)
- const magicIcon = L.divIcon(magicIconOpts)
- return magicIcon
+ 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.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)
-}
-
-export default {
- init
-}
+ }), L.marker.magic = function (i, c) {
+ return new L.Marker.Magic(i, c)
+ }
+}(window))
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index e01a715..98ff85c 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -2,6 +2,7 @@
import TDT from './TDT'
import { LayerSewersLine, LayerSewersPoint } from './LayerSewers'
import { LayerWasteWater } from './LayerWasteWater'
+
const curWwwPath = window.document.location.href
const pathname = window.document.location.pathname
const pos = curWwwPath.indexOf(pathname)
@@ -22,7 +23,7 @@
minZoom: 3,
maxZoom: 18,
// center: [26, 104],
- center: [32.224016189575195, 118.77070426940918],
+ center: [38.828558921813965, 117.41676807403564],
zoom: 14,
worldCopyJump: true,
inertia: true,
@@ -38,7 +39,10 @@
// defaultBasemapCode: 'tianditu_img', // 榛樿鏄剧ず 鍦板浘绫诲瀷
IntranetBaseMaps: TDT.intranet,
InternetBaseMaps: TDT.internet,
- Layers: { LayerSewersLine: [LayerSewersLine, LayerWasteWater], layerSewersPoint: LayerSewersPoint } // 姹￠洦姘村浘灞傞厤缃�
+ Layers: {
+ LayerSewersLine: [LayerSewersLine, LayerWasteWater],
+ layerSewersPoint: LayerSewersPoint
+ } // 姹￠洦姘村浘灞傞厤缃�
}
/**
diff --git a/src/utils/axios.js b/src/utils/axios.js
index 20047e2..69078ed 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -83,7 +83,8 @@
// 鍒涘缓axios瀹炰緥
const Service = axios.create({
- timeout: 1000
+ timeout: 1000,
+ baseURL: 'http://10.246.162.140:8080/'
})
const CancelToken = axios.CancelToken
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 7665bb1..e248cee 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>
- <SolidContent ref="SolidWastePopup"></SolidContent>
+ <PublicBounced ref="PublicBounced"></PublicBounced>
</div>
</template>
@@ -36,9 +36,10 @@
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
-import SolidContent from '@components/BaseNav/SolidWaste/SolidContent'
// 搴曞浘涓氬姟js閫昏緫
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
+// 鍏叡灞曠ず鏁版嵁
+import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
export default {
name: 'MapTemplate',
@@ -54,10 +55,11 @@
LcServiceLayer,
Popup,
summarySheets,
- SolidContent
+ PublicBounced
},
data () {
return {
+ // isShowBtn: false,
map: null,
lcServiceLayerVisible: false,
basemapHelper: {},
@@ -77,9 +79,16 @@
},
methods: {
ChangeState () {
+ const data = {
+ companyId: 3900100145,
+ userCode: 'wenchun.deng',
+ name: '',
+ marginWarr: '',
+ longDayWarr: ''
+ }
const AddSolidWaste = new AddSolidWasteHelper({ map: this.map })
- AddSolidWaste.requestData()
- AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
+ AddSolidWaste.requestData(data)
+ AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.PublicBounced)
},
isShowHidden () {
this.isShowBtn = !this.isShowBtn
@@ -108,7 +117,7 @@
this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵�
this.vectorLayerHelper.initVectorLayers(this.config)
- this.ChangeState()
+ // this.ChangeState()
this.saveMapStatus()
// this.setMapObj(this.mapObj)
--
Gitblit v1.8.0