From b820052f5bd13f1a88131f39055c49437652bd2c Mon Sep 17 00:00:00 2001
From: zhangshuaibao <15731629597@163.com>
Date: 星期四, 25 三月 2021 17:08:40 +0800
Subject: [PATCH] 更改废水坐标显示代码
---
src/components/BaseNav/WasteWater.js | 175 +++++++++++++++++++++
src/api/request.js | 5
src/components/BaseNav/WasteWaterTable.vue | 69 ++++++++
src/components/BaseNav/SolidWaste.js | 24 +-
src/components/BaseNav/WasteWaterContent.vue | 52 ++++++
src/views/MapTemplate.vue | 23 ++
public/static/WasteWater.json | 117 ++++++++++++++
7 files changed, 450 insertions(+), 15 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 d623ca2..d6db6a3 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -7,3 +7,8 @@
export const requestSolidWaste = (url) => {
return $http.get('./static/SolidWaste.json')
}
+
+// 搴熸按鎺ュ彛
+export const requestWasteWater = (url) => {
+ return $http.get('./static/WasteWater.json')
+}
diff --git a/src/components/BaseNav/SolidWaste.js b/src/components/BaseNav/SolidWaste.js
index a32b0bb..1724257 100644
--- a/src/components/BaseNav/SolidWaste.js
+++ b/src/components/BaseNav/SolidWaste.js
@@ -28,7 +28,7 @@
// 鏍规嵁鑾峰彇鏁版嵁 鐢诲嚭 鍐呭
DrawTheSolidWasteContent (data) {
// 鍥炬爣鏍峰紡鎵╁睍
- var SolidWasteIcon = this.SolidWasteIcon()
+ const SolidWasteIcon = this.SolidWasteIcon()
// //鍔犺浇鏁版嵁鍓嶅鏋滃瓨鍦ㄥ浘灞傜粍 閭ｄ箞娓呴櫎鎺�
if (this.SolidWasteLayerGroup) {
@@ -43,13 +43,13 @@
// if (positionX != null && positionY != null) {
// 鐢ㄤ簬 鍒ゆ柇 => 鍒ゆ柇鏄惁灞曠ず鑴夊啿鏁堟灉 => temp(涓存椂)
const determineValueOne = data[i].LongDayWarning
- var determineValueTwo = data[i].StorageQty
+ const 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
+ const iconUrl = this.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
+ const Icon = new SolidWasteIcon({ iconUrl: iconUrl })
+ // let url = Icon.options.iconUrl
const marker = this.L.marker([positionX, positionY], { icon: Icon })
@@ -101,7 +101,7 @@
// 鏍规嵁绫诲瀷杩斿洖鍥剧墖鍔犺浇url
SolidWasteIconUrl (determineValueOne, determineValueTwo, position) {
- var EffectOfChange
+ let EffectOfChange
if (determineValueOne === 1 || determineValueTwo === 1) {
EffectOfChange = defaultImg
this.EffectOfPulse(position, this.solidWasteMarkersLabels, this.SolidWasteLayerGroup)
@@ -114,19 +114,19 @@
// 鑴夊啿鏁堟灉璁剧疆瀹炵幇
EffectOfPulse (position, markers, layerGroup) {
// // 鍖哄垎鐩存帴鎵ц 鍜屽垽鏂墽琛岀殑涓嶅悓鍖哄埆
- var differentColor = ''
+ let differentColor = ''
if (markers) {
differentColor = '#ff0000'
} else {
differentColor = '#98FB98'
}
// 鍧愭爣鏁版嵁锛氭姤璀︿紶杩涙潵鐨勬槸鏁扮粍 / 鐐瑰嚮浼犺繘鏉ョ殑鏄痮bject
- var FinalPosition = position instanceof Array ? {
+ const FinalPosition = position instanceof Array ? {
lat: position[0],
lng: position[1]
} : position
// 鎻掍欢 鏁堟灉瀹炵幇
- var pulsingIcon = this.L.icon.pulse({
+ const pulsingIcon = this.L.icon.pulse({
iconSize: [20, 20],
color: differentColor,
fillColor: ''
@@ -135,7 +135,7 @@
// markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
// this.L.layerGroup(markers).addLayer(layerGroup)
} else {
- var picGroupMarker = new this.L.FeatureGroup()
+ const picGroupMarker = new this.L.FeatureGroup()
this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
this.pulseHeighLightMarker = picGroupMarker.addTo(this.SolidWasteLayerGroup)
this.PulseCountSetting()
@@ -144,8 +144,8 @@
// 瀵瑰浘鏍囪剦鍐� 杩涜set璁剧疆 // 楂樹寒鍥惧眰
PulseCountSetting () {
- var HeightLightTime = 5
- var PulseNumber = 5
+ const HeightLightTime = 5
+ let PulseNumber = 5
const pulseinterver = setInterval(() => {
if (PulseNumber > 0) {
PulseNumber--
diff --git a/src/components/BaseNav/WasteWater.js b/src/components/BaseNav/WasteWater.js
new file mode 100644
index 0000000..4a3e2f4
--- /dev/null
+++ b/src/components/BaseNav/WasteWater.js
@@ -0,0 +1,175 @@
+import { requestWasteWater } from '@/api/request'
+// 灞曠ず鍥剧墖
+import defaultImg from '@components/BaseNav/magicMarker.png'
+import Setting from '@components/BaseNav/voc.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 () {
+ requestWasteWater().then(res => {
+ this.DrawTheWasteWaterContent(res.Result.DataInfo)
+ console.log(res)
+ }).catch(err => {
+ console.log(err)
+ })
+ }
+
+ // 鏍规嵁鑾峰彇鏁版嵁 鐢诲嚭 鍐呭
+ DrawTheWasteWaterContent (data) {
+ // 鍥炬爣鏍峰紡鎵╁睍
+ const WasteWaterIcon = this.WasteWaterIcon()
+
+ // //鍔犺浇鏁版嵁鍓嶅鏋滃瓨鍦ㄥ浘灞傜粍 閭ｄ箞娓呴櫎鎺�
+ if (this.WasteWaterLayerGroup) {
+ this.WasteWaterLayerGroup.clearLayers()
+ }
+ for (let i = 0; i < data.length; i++) {
+ // 缁忕含搴� 浣嶇疆
+ const positionX = data[i].positionX
+ const positionY = data[i].positionY
+
+ // 鍒ゆ柇 缁忕含搴︿綅缃俊鎭槸鍚﹀瓨鍦�
+ // 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([positionX, positionY], { icon: Icon })
+
+ marker.bindPopup(() => {
+ return this.WasteWaterPopup.$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.WasteWaterPopup.setDate(data[i])
+ } 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/WasteWaterContent.vue b/src/components/BaseNav/WasteWaterContent.vue
new file mode 100644
index 0000000..0ff5603
--- /dev/null
+++ b/src/components/BaseNav/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/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/WasteWaterTable.vue b/src/components/BaseNav/WasteWaterTable.vue
new file mode 100644
index 0000000..1768d8f
--- /dev/null
+++ b/src/components/BaseNav/WasteWaterTable.vue
@@ -0,0 +1,69 @@
+<template>
+ <el-tabs>
+ <el-tab-pane :label="displayContent.StoragePlaceName" name="">
+ <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/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 698833c..bd0b4f1 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -18,6 +18,8 @@
<!-- <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>
+ <el-button type="primary" @click="ChangeWaterState" class="Waste-water">搴熸按</el-button>
+ <WasteWaterContent ref="WasteWaterPopup"></WasteWaterContent>
</div>
</template>
@@ -37,8 +39,10 @@
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
import SolidContent from '@components/BaseNav/SolidContent'
+import WasteWaterContent from '@components/BaseNav/WasteWaterContent'
// 搴曞浘涓氬姟js閫昏緫
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste'
+import AddWasteWaterHelper from '@components/BaseNav/WasteWater'
export default {
name: 'MapTemplate',
@@ -54,7 +58,8 @@
LcServiceLayer,
Popup,
summarySheets,
- SolidContent
+ SolidContent,
+ WasteWaterContent
},
data () {
return {
@@ -82,9 +87,14 @@
AddSolidWaste.requestData()
AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
},
- isShowHidden () {
- this.isShowBtn = !this.isShowBtn
+ ChangeWaterState () {
+ const AddWasteWater = new AddWasteWaterHelper({ map: this.map })
+ AddWasteWater.requestData()
+ AddWasteWater.SetWasteWaterContent(this.config, this.$refs.WasteWaterPopup)
},
+ // isShowHidden () {
+ // this.isShowBtn = !this.isShowBtn
+ // },
saveMapStatus () {
window.serviceLayerHelper = this.serviceLayerHelper
this.$store.commit('setMapObj', this.map)
@@ -166,6 +176,13 @@
z-index: 999;
}
+.Waste-water {
+ position: absolute;
+ top: 88px;
+ left: 180px;
+ z-index: 999;
+}
+
.full-screen {
width: 100%;
height: 100%;
--
Gitblit v1.8.0