From b376aad2139fbc2dfe57c0568a90fc634a3af1ce Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 08 三月 2021 17:57:31 +0800
Subject: [PATCH] Merge branch 'master' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into master
---
src/components/panel/RightSearchPanel.vue | 37 +++--------
src/components/panel/MenuTopic.vue | 8 +-
src/conf/Topic.js | 36 ++++++++---
src/conf/TDT.js | 4
src/main.js | 1
src/components/LayerController/modules/LcBaseMap.vue | 10 +++
src/conf/MapConfig.js | 1
src/components/plugin/Leaflet.GridLayer.FadeOut.js | 76 +++++++++++++++++++++++++
src/components/helpers/BasemapHelper.js | 3 +
src/components/panel/topicSearch/DischargeSearch.vue | 2
10 files changed, 134 insertions(+), 44 deletions(-)
diff --git a/src/components/LayerController/modules/LcBaseMap.vue b/src/components/LayerController/modules/LcBaseMap.vue
index e5af6f2..3afc8d8 100644
--- a/src/components/LayerController/modules/LcBaseMap.vue
+++ b/src/components/LayerController/modules/LcBaseMap.vue
@@ -16,6 +16,7 @@
data () {
return {
isShow: true,
+ currentBaseMapCode: 'tianditu_img',
basemapList: []
}
},
@@ -34,7 +35,14 @@
const code = itm.code
this.basemapList.forEach((item) => {
if (item.code === code) {
- this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
+ console.log(this.currentBaseMapCode)
+ if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) {
+ this.currentBaseMapCode = code
+ this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
+ } else {
+ this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false)
+ }
+
this.basemapHelper.getBasemapList().forEach((item) => {
item.layer.bringToBack()
})
diff --git a/src/components/helpers/BasemapHelper.js b/src/components/helpers/BasemapHelper.js
index 9b29e4e..cfb5703 100644
--- a/src/components/helpers/BasemapHelper.js
+++ b/src/components/helpers/BasemapHelper.js
@@ -11,6 +11,7 @@
this.basemapList = []
this.basemapMap = new Map()
this.basemapLayerGroup = this.L.layerGroup().addTo(options.map)
+ this.currentBaseMapCode = null
}
/**
@@ -58,6 +59,8 @@
this.basemapLayerGroup.addLayer(basemap.layer)
if (showAnnotation) {
this.basemapLayerGroup.addLayer(basemap.annotation)
+ } else {
+ this.basemapLayerGroup.removeLayer(basemap.annotation)
}
}
diff --git a/src/components/panel/MenuTopic.vue b/src/components/panel/MenuTopic.vue
index 6f949fe..2b5383a 100644
--- a/src/components/panel/MenuTopic.vue
+++ b/src/components/panel/MenuTopic.vue
@@ -7,12 +7,12 @@
@click="toggle()">
<div id="menu-special-context" class="menu-special-context">
<el-checkbox-button v-show="isShow" class="menu-special-item" v-model="topicSelectAll.check" :checked="topicSelectAll.checked" @change="checkedSpecialChangeAll(topicSelectAll)">
- <div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="topicSelectAll.icon" ></div>
+ <div style="height: 1rem;width: 1rem;display: inline-flex;"><img :src="topicSelectAll.icon" ></div>
{{ topicSelectAll.name }}</el-checkbox-button>
<el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="topicCheckedList" size="medium" @change="checkedGroupSpecialChange">
- <el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
- <div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="item.icon" ></div>
+ <el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
+ <div style="height: 1rem;width: 1rem;display: inline-flex;"><img :src="item.icon" ></div>
{{item.name}}</el-checkbox-button>
</el-checkbox-group>
<!-- <ul class="menu-special-item" v-for="item in SpecialList" :key="item.id">-->
@@ -53,7 +53,7 @@
this.$store.commit('setTopic', this.topicCheckedList)
},
checkedSpecialChangeAll (val) {
- this.topicCheckedList = val.check ? this.topicList.map(item => item.name) : []
+ this.topicCheckedList = val.check ? this.topicList.map(item => item) : []
this.isIndeterminate = false
this.$store.commit('setTopic', this.topicCheckedList)
},
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 9462fe7..4976bac 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,7 +1,7 @@
<template>
<div id="right-panel">
<div class="panel-tab">
- <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
+ <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleClick(item)">
<img :src="item.icon" style="width: 24px;height: 24px;"></div>
<!-- <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
@@ -20,21 +20,16 @@
<script>
import $ from 'jquery'
-import EnvProtectSearch from './topicSearch/EnvProtectSearch'
-import DischargeSearch from './topicSearch/DischargeSearch'
-import { TopicList } from '../../conf/Topic'
-
-import SewersSearch from '@components/panel/topicSearch/SewersSearch'
+import { TopicComp, TopicList } from '../../conf/Topic'
export default {
name: 'MonitorPanel',
- components: { EnvProtectSearch, DischargeSearch },
+ components: TopicComp,
data () {
return {
- topicMenu: [],
topicList: TopicList,
topicCheckedList: [],
isPanelVisible: false,
- gcComp: SewersSearch,
+ gcComp: 'sewersSearch',
gdVisible: true,
hbVisible: false,
@@ -45,21 +40,10 @@
}
},
- computed: {},
- watch: {
- '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
- console.log(oldVal)
- console.log(newVal)
- this.topicCheckedList = newVal
- this.topicMenu = []
- this.topicList.forEach((item) => {
- this.topicCheckedList.forEach((itm) => {
- if (item.name === itm) {
- // item.checked = tr
- this.topicMenu.push(item)
- }
- })
- })
+ computed: {
+ topicMenu () {
+ console.log(this.$store.state.map.topic.topicCheckedList)
+ return this.$store.state.map.topic.topicCheckedList
}
},
methods: {
@@ -69,8 +53,9 @@
handlePage (page) {
},
- handleGd () {
- this.title = '绠￠亾淇℃伅鏌ヨ'
+ handleClick (item) {
+ this.title = item.name
+ this.gcComp = item.comp
},
toggleMonitorPanel () {
const el = $('.btn-stretch')
diff --git a/src/components/panel/topicSearch/DischargeSearch.vue b/src/components/panel/topicSearch/DischargeSearch.vue
index 0b14697..ed987f9 100644
--- a/src/components/panel/topicSearch/DischargeSearch.vue
+++ b/src/components/panel/topicSearch/DischargeSearch.vue
@@ -91,7 +91,7 @@
components: {},
data () {
return {
- isPanelVisible: false,
+ isPanelVisible: true,
total: 0,
list: [],
form: {
diff --git a/src/components/plugin/Leaflet.GridLayer.FadeOut.js b/src/components/plugin/Leaflet.GridLayer.FadeOut.js
new file mode 100644
index 0000000..be038a2
--- /dev/null
+++ b/src/components/plugin/Leaflet.GridLayer.FadeOut.js
@@ -0,0 +1,76 @@
+/* eslint-disable */
+// Adds a fade-out animation to grid layers when they're removed from the map
+
+(function () {
+ var gridProto = L.GridLayer.prototype
+ var onRemoveProto = gridProto.onRemove
+ var onAddProto = gridProto.onAdd
+ var fadeDuration = 200
+
+ L.GridLayer.include({
+
+ onAdd: function (map) {
+ if (this._fadeOutTime) {
+ var now = performance.now() || (+new Date())
+ L.Util.cancelAnimFrame(this._fadeOutFrame)
+ this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now
+ L.Util.requestAnimFrame(this._fadeIn, this)
+ } else {
+ onAddProto.call(this, map)
+ }
+ },
+
+ onRemove: function (map) {
+ if (this._fadeOutTime) {
+ // We're removing this *again* quickly after removing and re-adding
+ var now = performance.now() || (+new Date())
+
+ this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now
+ }
+ this._fadeOutTime = (performance.now() || (+new Date())) + fadeDuration * 2
+ this._fadeOutMap = this._map
+
+ L.Util.requestAnimFrame(this._fadeOut, this)
+ },
+
+ _fadeOut: function () {
+ if (!this._fadeOutTime || !this._container) { return }
+
+ var now = performance.now() || (+new Date())
+
+ var opacity = Math.min((this._fadeOutTime - now) / fadeDuration, 1)
+ // console.log('fadeout:', opacity);
+ if (opacity < 0) {
+ this._fadeOutTime = false
+
+ onRemoveProto.call(this, this._fadeOutMap)
+
+ return
+ }
+
+ L.DomUtil.setOpacity(this._container, opacity * this.options.opacity)
+
+ this._fadeOutFrame = L.Util.requestAnimFrame(this._fadeOut, this)
+ },
+
+ // Only runs when the gridlayer is quickly re-added while it's being faded out
+ _fadeIn: function _fadeIn () {
+ if (!this._fadeOutTime || !this._container) { return }
+
+ var now = performance.now() || (+new Date())
+
+ var opacity = (now - this._fadeOutTime) / fadeDuration
+ // console.log('fadein:', opacity);
+
+ if (opacity > 1) {
+ this._fadeOutTime = false
+ return
+ }
+
+ L.DomUtil.setOpacity(this._container, opacity * this.options.opacity)
+
+ L.Util.requestAnimFrame(this._fadeIn, this)
+ }
+
+ })
+})()
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index 4512d66..8e502d3 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -34,6 +34,7 @@
const mapConfig = {
IsLoadMapByToken: true, // 鏄惁閫氳繃token鍔犺浇鍦板浘
showBaseMapType: 1, // 1鏄剧ず澶╁湴鍥撅紝2鏄剧ずarcgis鍦板浘
+ // defaultBasemapCode: 'tianditu_img', // 榛樿鏄剧ず 鍦板浘绫诲瀷
IntranetBaseMaps: TDT.intranet,
InternetBaseMaps: TDT.internet,
Layers: { LayerSewersLine: [LayerSewersLine], layerSewersPoint: LayerSewersPoint } // 姹￠洦姘村浘灞傞厤缃�
diff --git a/src/conf/TDT.js b/src/conf/TDT.js
index 1c5ad9e..0c5b418 100644
--- a/src/conf/TDT.js
+++ b/src/conf/TDT.js
@@ -4,7 +4,7 @@
const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 澶囩敤tk: f1b72b5e7cb1175acddfa485f1bc9770
const intranet = [
{
- code: 'sinopec_img',
+ code: 'tianditu_img',
name: '涓煶鍖栧ぉ鍦板浘褰卞儚',
icon_actived: '/assets/images/map-pages/icon/img.png',
icon_deactived: '/assets/images/map-pages/icon/img.png',
@@ -40,7 +40,7 @@
}
},
{
- code: 'sinopec_vec',
+ code: 'tianditu_vec',
name: '涓煶鍖栧ぉ鍦板浘鐭㈤噺',
icon_actived: '/assets/images/map-pages/icon/road.png',
icon_deactived: '/assets/images/map-pages/icon/road.png',
diff --git a/src/conf/Topic.js b/src/conf/Topic.js
index fb1faa3..a8e25e4 100644
--- a/src/conf/Topic.js
+++ b/src/conf/Topic.js
@@ -4,54 +4,70 @@
icon: '/assets/images/menu/special.png'
}
+export const TopicComp = {
+ dischargeSearch: () => import('@components/panel/topicSearch/DischargeSearch'),
+ envProtectSearch: () => import('@components/panel/topicSearch/EnvProtectSearch'),
+ sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue')
+}
+
export const TopicList = [{
name: '姹℃煋婧�',
id: 1,
check: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'dischargeSearch'
}, {
name: '搴熸按鐩戞祴',
id: 2,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'envProtectSearch'
}, {
name: '搴熸皵鐩戞祴',
id: 3,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'dischargeSearch'
}, {
name: '鍥哄簾绠＄悊',
id: 4,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'envProtectSearch'
}, {
name: '鐜椋庨櫓',
id: 5,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'dischargeSearch'
}, {
name: '鍦熷￥鍙婂湴涓嬫按',
id: 6,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'dischargeSearch'
}, {
name: '姹￠洦姘寸缃�',
id: 7,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'envProtectSearch'
}, {
name: '棰勮鎶ヨ',
id: 8,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'sewersSearch'
}, {
name: '鎸囨爣缁熻',
id: 9,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'envProtectSearch'
}, {
name: '搴旀�ュ湴鍥�',
id: 10,
checked: false,
- icon: '/assets/images/menu/special.png'
+ icon: '/assets/images/menu/special.png',
+ comp: 'sewersSearch'
}]
diff --git a/src/main.js b/src/main.js
index 95591a3..28cfbd5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@
import L from 'leaflet'
import 'leaflet.markercluster'
import 'leaflet-canvas-markers'
+import './components/plugin/Leaflet.GridLayer.FadeOut'
Vue.config.productionTip = false
Vue.use(ElementUI)
--
Gitblit v1.8.0