From 9ebe61e0dd331eeb53c3b0cb022c732ceb9e6b87 Mon Sep 17 00:00:00 2001
From: zhangshuaibao <15731629597@163.com>
Date: 星期三, 31 三月 2021 15:36:58 +0800
Subject: [PATCH] 修改弹窗折线统计
---
public/assets/images/map/wastewater/fs_yellow.png | 0
src/conf/layers/LayerWasteWater.js | 4
public/assets/images/map/wastewater/fs_green.png | 0
src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue | 49 -----------
src/api/mapApi.js | 2
src/components/LayerController/logic/WasteWater.js | 70 ++++++++++-------
src/views/MapTemplate.vue | 22 -----
src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue | 10 +-
src/api/mapUrl.js | 2
src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue | 64 ++++++++++++++++
src/components/LayerController/logic/SolidWaste.js | 2
11 files changed, 120 insertions(+), 105 deletions(-)
diff --git a/public/assets/images/map/wastewater/fs_green.png b/public/assets/images/map/wastewater/fs_green.png
new file mode 100644
index 0000000..e75d458
--- /dev/null
+++ b/public/assets/images/map/wastewater/fs_green.png
Binary files differ
diff --git a/public/assets/images/map/wastewater/fs_yellow.png b/public/assets/images/map/wastewater/fs_yellow.png
new file mode 100644
index 0000000..8d84aa8
--- /dev/null
+++ b/public/assets/images/map/wastewater/fs_yellow.png
Binary files differ
diff --git a/src/api/mapApi.js b/src/api/mapApi.js
index bffdbb6..533c5e1 100644
--- a/src/api/mapApi.js
+++ b/src/api/mapApi.js
@@ -16,6 +16,6 @@
return axios.get(mapUrl.getSolidWaste, data)
},
getWasteWater (data) {
- return axios.get(mapUrl.GetWasteWater, data)
+ return axios.get(mapUrl.getWasteWater, data)
}
}
diff --git a/src/api/mapUrl.js b/src/api/mapUrl.js
index 50b432b..fa3f330 100644
--- a/src/api/mapUrl.js
+++ b/src/api/mapUrl.js
@@ -7,4 +7,4 @@
export const getSolidWaste = $HOST + '/wasteSolid/getSolidWaste'
-export const GetWasteWater = $HOST + '/wasteWater/getWasteWater'
+export const getWasteWater = $HOST + '/wasteWater/getWasteWater'
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue b/src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue
new file mode 100644
index 0000000..697d24d
--- /dev/null
+++ b/src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue
@@ -0,0 +1,64 @@
+<template>
+ <!-- 妗� -->
+ <div class="win">
+ <div class="main">
+ <div class="main-matter">
+ <el-row type="flex" class="row-bg row-item-one" justify="space-around">
+ <el-col :span="12">姘哀鍖栫墿:{{ displayContent.Name }} 鏍囧噯: 100</el-col>
+ <el-col :span="12">浜屾哀鍖栫～:{{ displayContent.DeptSname }} 鏍囧噯: 50</el-col>
+ <el-col :span="12">鐑熷皹:{{ displayContent.EmissTypeName }} 鏍囧噯: 30</el-col>
+ <el-col :span="12">搴熸皵娴侀噺:{{ displayContent.EmissTypeName }}</el-col>
+ </el-row>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'EchartsTab',
+ props: ['displayContent'],
+ data () {
+ return {}
+ }
+}
+</script>
+
+<style scoped lang="less">
+
+.win {
+ position: relative;
+ margin-bottom: 13px;
+ background-color: rgba(33, 41, 69,0.9);
+}
+.main {
+ width: 100%;
+ height: 100%;
+ .main-matter{
+ font-size: 13px;
+ font-weight: normal;
+ border: 1px solid #396d83;
+ .row-item-one{
+ margin-bottom: 7px;
+ }
+ .el-row {
+ width: 100%;
+ color: #00d0f9;
+ display: flex;
+ font-size: 12px !important;
+ .el-col{
+ flex: 1;
+ width: 100%;
+ background-color: #243a55;;
+ text-align: center;
+ line-height: 28px;
+ margin-left: 6px;
+ border-radius: 4px;
+ &:nth-child(1){
+ margin-left:0;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
index cd60dbd..91cb387 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
@@ -1,15 +1,7 @@
<template>
- <!-- 妗� -->
- <div class="win">
- <!-- 鍥涗釜瑙掔殑杈规鏁堟灉 -->
<div class="main">
<div id="echarts" ref="main"></div>
- <div class="border_corner border_corner_left_top"></div>
- <div class="border_corner border_corner_right_top"></div>
- <div class="border_corner border_corner_left_bottom"></div>
- <div class="border_corner border_corner_right_bottom"></div>
</div>
- </div>
</template>
<script>
@@ -157,12 +149,8 @@
</script>
<style scoped lang="less">
- .win {
- /*width: 100%;*/
- /*height: 100%;*/
- position: relative;
- //display: inline-block;
- background-color: rgba(33, 41, 69,0.9);
+ .main{
+ background: #00fff6;
}
#echarts{
width: 600px;
@@ -170,38 +158,5 @@
position: relative;
margin: 0;
padding: 0;
- }
- .border_corner{
- z-index: 2500;
- position: absolute;
- width: 14px;
- height: 14px;
- background: rgba(0,0,0,0);
- border: 2px solid #47d5ea;
- }
- .border_corner_left_top{
- top: 0;
- left: 0;
- border-right: none;
- border-bottom: none;
- }
- .border_corner_right_top{
- top: 0;
- right: 0;
- border-left: none;
- border-bottom: none;
- }
- .border_corner_left_bottom{
- bottom: 0;
- left: 0;
- border-right: none;
- border-top: none;
- border-bottom-left-radius: 4px;
- }
- .border_corner_right_bottom{
- bottom: 0;
- right: 0;
- border-left: none;
- border-top: none;
}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue
index 1df30fe..9bde5ef 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue
@@ -1,11 +1,13 @@
<template>
<div>
<el-tabs v-model="activeName">
- <el-tab-pane label="鐢ㄦ埛绠＄悊" name="first">鐢ㄦ埛绠＄悊</el-tab-pane>
- <el-tab-pane label="閰嶇疆绠＄悊" name="second">閰嶇疆绠＄悊</el-tab-pane>
- <el-tab-pane label="瑙掕壊绠＄悊" name="third">瑙掕壊绠＄悊</el-tab-pane>
- <el-tab-pane label="瀹氭椂浠诲姟琛ュ伩" name="fourth">瀹氭椂浠诲姟琛ュ伩</el-tab-pane>
+ <el-tab-pane label="瀹炶瘯鏁版嵁" name="first">瀹炶瘯鏁版嵁</el-tab-pane>
+ <el-tab-pane label="鏃ユ暟鎹�" name="second">鏃ユ暟鎹�</el-tab-pane>
+ <el-tab-pane label="鏈堟暟鎹�" name="third">鏈堟暟鎹�</el-tab-pane>
+ <el-tab-pane label="浜哄伐鏁版嵁" name="fourth">浜哄伐鏁版嵁</el-tab-pane>
</el-tabs>
+ <EchartsTab :></EchartsTab>
+ <GasECharts></GasECharts>>
</div>
</template>
diff --git a/src/components/LayerController/logic/SolidWaste.js b/src/components/LayerController/logic/SolidWaste.js
index dfc5841..f0dad0a 100644
--- a/src/components/LayerController/logic/SolidWaste.js
+++ b/src/components/LayerController/logic/SolidWaste.js
@@ -20,7 +20,7 @@
layer: layer
})
const res = await mapApi.getSolidWaste()
- // console.log(res)
+ console.log(res)
const data = res.Result.DataInfo || {}
for (let i = 0; i < data.length; i++) {
// 缁忕含搴� 浣嶇疆
diff --git a/src/components/LayerController/logic/WasteWater.js b/src/components/LayerController/logic/WasteWater.js
index b862b44..a5ca19f 100644
--- a/src/components/LayerController/logic/WasteWater.js
+++ b/src/components/LayerController/logic/WasteWater.js
@@ -2,48 +2,62 @@
* 搴熸按
*/
const AnimalService = require('../service/AnimalService').default
-const AjaxUtils = require('../../../utils/AjaxUtils').default
+const mapApi = require('../../../api/mapApi').default
-// const getWasteWater = require('../../../utils/axios').default
+const testValue1 = '/assets/images/map/wastewater/fs_green.png'
+const testValue2 = '/assets/images/map/wastewater/fs_yellow.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], {
+ icon: L.icon({
+ iconUrl: iconUrl,
+ iconSize: [50, 50],
+ iconAnchor: [25, 25]
+ })
+ })
+ layer.addLayer(marker)
+ }
}
this.bindTooltip = (layer) => {
- return 'aaaa'
+ return '娴嬭瘯搴熸按'
}
this.clickListener = (e) => {
- console.log(e)
+ // console.log(e)
this.animalService.pulseEffect(e.latlng)
+ return this.PublicBounced.$el
+ }
+
+ // 鏍规嵁杩斿洖鍊肩殑涓嶅悓鏍囪涓嶅悓鍥剧墖
+ this.differentTypes = (testValue) => {
+ let testChange
+ if (testValue === 1) {
+ testChange = testValue1
+ } else {
+ testChange = testValue2
+ }
+ return testChange
}
}
diff --git a/src/conf/layers/LayerWasteWater.js b/src/conf/layers/LayerWasteWater.js
index f1d71de..c7d6a65 100644
--- a/src/conf/layers/LayerWasteWater.js
+++ b/src/conf/layers/LayerWasteWater.js
@@ -8,7 +8,7 @@
checked: true,
layers: [
{
- code: 'fsqy',
+ code: 'wasteWaterqy',
name: '浼佷笟',
sname: '浼佷笟', // 琛ㄥ悕
checked: true, // 榛樿閫変腑鐘舵��
@@ -25,7 +25,7 @@
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
- code: 'fspfk',
+ code: 'wasteWaterfk',
name: '鎺掓斁鍙�',
sname: '鎺掓斁鍙�',
checked: true, // 榛樿閫変腑鐘舵��
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 28deeac..436e2ea 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -18,7 +18,7 @@
<!-- <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>-->
<!-- <el-button type="primary" @click="ChangeWaterState" class="Waste-water">搴熸按</el-button>-->
- <el-button type="primary" @click="AddGasHelper" class="flue-gas">搴熸皵</el-button>
+<!-- <el-button type="primary" @click="AddGasHelper" class="flue-gas">搴熸皵</el-button>-->
<PublicBounced ref="PublicBounced"></PublicBounced>
</div>
</template>
@@ -60,7 +60,6 @@
},
data () {
return {
- // isShowBtn: false,
map: null,
lcServiceLayerVisible: false,
basemapHelper: {},
@@ -79,25 +78,6 @@
})
},
methods: {
- AddGasHelper () {
- const data = {
- companyId: 3900100145,
- id: '',
- monType: 2,
- userCode: 'wenchun.deng',
- monDuration: '',
- epName: '',
- secdDeptId: '',
- contrLevel: '',
- dataStatus: '',
- dataFlag: '',
- runStatus: '',
- emissTypeId: ''
- }
- const AddGas = new AddGasHelper({ map: this.map })
- AddGas.requestData(data)
- AddGas.SetPlueGasContent(this.config, this.$refs.PublicBounced)
- },
saveMapStatus () {
window.serviceLayerHelper = this.serviceLayerHelper
this.$store.commit('setMapObj', this.map)
--
Gitblit v1.8.0