From af97afdfc673efbd05ff21f02da8f93eb9b721e6 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期四, 08 四月 2021 17:20:52 +0800
Subject: [PATCH] 统一样式-图层控制面板折叠效果添加。
---
src/components/panel/RightSearchPanel.vue | 27 ++++-
src/components/table/summarySheets.vue | 99 +++++++++++++++++--
src/conf/LayerTopic.js | 1
src/assets/css/map/map-panel-style.less | 52 ++++++++--
src/components/panel/ToolBoxPanel.vue | 20 ++--
src/conf/layers/LayerEnvRisk.js | 15 ++-
src/components/LayerController/logic/Company.js | 16 ++
src/conf/LayerPipeLine.js | 1
src/views/MapTemplate.vue | 6
src/components/LayerController/LayerController.vue | 15 ++-
src/components/LayerController/modules/LcServiceLayer.vue | 28 ++++-
src/conf/layers/LayerBasin.js | 1
12 files changed, 218 insertions(+), 63 deletions(-)
diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less
index 8b5390c..494c67d 100644
--- a/src/assets/css/map/map-panel-style.less
+++ b/src/assets/css/map/map-panel-style.less
@@ -246,20 +246,52 @@
}
/***************Company 鍥惧眰 鎮诞妗嗘牱寮忋��*********************************/
-.company-bindTooltip {
+.company-bindTooltip{
+ position: absolute;
+ top:0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ justify-items: center;
+ img{display: block;width: 30px;height: 30px;margin-left: -15px;margin-top: -15px}
+ ul{
+ width: 120px;
+ margin-left: -60px;
+ text-align: center;
+ display: flex;
+ position: absolute;
+ top:20px;
+ left:0;
+ li{
+ position: absolute;
+ top:0;
+ left:0;
+ width: 100%;
+ font-weight: 900;
+ text-shadow: 0 0 4px #fff;
+ color: red;
+ font-size: 16px;
+ height: 20px;
+ line-height: 18px;
+ overflow: visible;
+ }
+ }
+}
+/*.company-bindTooltip {
//background: @background-color-split;
background: none;
border: none;
color: red;
- font-size: 16px;
+ //font-size: 16px;
box-shadow: none;
- //text-shadow: 0 0 5px #fff;
- //filter:Dropshadow(offx=1,offy=0,color=white)
- //Dropshadow(offx=0,offy=1,color=white)
- //Dropshadow(offx=0,offy=-1,color=white)
- //Dropshadow(offx=-1,offy=0,color=white);
- //box-shadow: none;
- //-webkit-text-stroke: .5px #fff;
+ text-shadow: 0 0 5px #fff;
+ filter:Dropshadow(offx=1,offy=0,color=white)
+ Dropshadow(offx=0,offy=1,color=white)
+ Dropshadow(offx=0,offy=-1,color=white)
+ Dropshadow(offx=-1,offy=0,color=white);
+ box-shadow: none;
+ -webkit-text-stroke: 0.1px #fff;
+ font: 16px "Microsoft YaHei", Arial, Helvetica, sans-serif;
ul{
position: relative;
li:not(:first-child){
@@ -273,7 +305,7 @@
text-shadow: 0 0 4px #fff;
}
}
-}
+}*/
.company-bindTooltip:before{
display: none;
}
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index e494157..fe80364 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -247,14 +247,19 @@
background: #0E3565;
}
.el-button--default{
- padding: 15px 3px;
+ padding: 0;
background:@background-color4;
color:@color-tool;
position: absolute;
- top:0;
- left: 100%;
- margin-left: .02rem;
- border:1px solid @color-tool;
+ top:24px;
+ right:0.02rem;
+ border:none;//1px solid @color-tool;
+ width: 0.2rem;
+ height: 0.2rem;
+ text-align: center;
+ line-height: 0.2rem;
+ margin-top: -0.1rem;
+ border-radius: 50%;
// border-radius: 0.03rem 50% 50% 0.03rem;
}
.el-button--default:hover{
diff --git a/src/components/LayerController/logic/Company.js b/src/components/LayerController/logic/Company.js
index 82490b9..6c68380 100644
--- a/src/components/LayerController/logic/Company.js
+++ b/src/components/LayerController/logic/Company.js
@@ -28,21 +28,29 @@
const positionY = data[i].Longitude
var iconUrl = companyImg
+ const htmls = '<div><img src="' + iconUrl + '"><ul><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li></ul></div>'
+ var myIcon = L.divIcon({
+ html: htmls,
+ className: 'company-bindTooltip',
+ iconSize: 16
+ })
+
const marker = L.marker([positionX, positionY], {
- icon: L.icon({
+ /* icon: L.icon({
iconUrl: iconUrl,
iconSize: [30, 30],
iconAnchor: [15, 15]
- }),
+ }), */
+ icon: myIcon,
test: data[i]
})
- const htmls = '<ul><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li></ul>'
+ /* const htmls = '<ul><li>' + data[i].name + '</li></ul>'
marker.bindTooltip(htmls, {
permanent: true,
offset: [0, 5],
direction: 'bottom',
className: 'company-bindTooltip'
- })
+ }) */
layer.addLayer(marker)
}
}
diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue
index 3308d0e..b404bc8 100644
--- a/src/components/LayerController/modules/LcServiceLayer.vue
+++ b/src/components/LayerController/modules/LcServiceLayer.vue
@@ -4,12 +4,12 @@
<div class="wms-panel">
<el-scrollbar class="wms-panel-scrollbar">
<div v-for="item in serviceLayers" :key="item.code" class="layerbox">
+ <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down -->
<!-- 涓�绾у浘灞傞亶鍘� -->
- <div style="padding-left:10px;padding-top:10px">
- <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
- @change="swAllLayers(item)"/>{{ item.name }}
+ <div style="padding-left:25px;padding-top:10px;color:#fff">
+ <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }}
</div>
- <div class="layerbox-item">
+ <div class="layerbox-item" v-show="item.isShow">
<!-- 浜岀骇鍥惧眰閬嶅巻 -->
<div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code">
<input type="checkbox"
@@ -24,7 +24,8 @@
:name="'wmsSublayers_'+item.code+'_'+layer.code"
:checked="layer.checked"
:value="layer.code"
- @change="swWmsLayer(layer)"/>{{ layer.name }}
+ @change="swWmsLayer(layer)"/>
+ <span :style="'color:'+layer.color">{{ layer.name }}</span>
</div>
</div>
</div>
@@ -117,6 +118,23 @@
}
.layerbox {
width: 100%;
+ position: relative;
+ .downUp{
+ position: absolute;
+ top:3px;
+ left: -2px;
+ height: 30px;
+ width: 30px;
+ text-align: center;
+ line-height: 30px;
+ cursor: pointer;
+ font-size: 20px;
+ transition: all 1.5s;
+ }
+ .downUp.active{
+ transform: rotate(-90deg);
+ }
+ .downUp:hover{font-size: 26px;font-weight: 900}
.layerbox-item {
padding-left: 30px;
padding-top: 5px;
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 41d70da..28910bb 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -4,14 +4,14 @@
<div style=" display: inline-flex;">
<div class="panel-tab">
<div class="container">
- <ul>
+ <!-- <ul>
<li style="text-align: right">
<div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default">
<i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
<i class=" el-icon-d-arrow-left" v-else ></i>
</div>
</li>
- </ul>
+ </ul> -->
<ul v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
<el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
<li>
@@ -26,6 +26,10 @@
<div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
</div>
<div :class="'search-container map-background'" v-show="selectGroup" >
+ <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default ">
+ <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
+ <i class=" el-icon-d-arrow-left" v-else ></i>
+ </div>
<div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
<component :title="title" :is="gcComp"></component>
</div>
@@ -258,19 +262,28 @@
// background-color: #061e51 !important;
// border: solid 1px #0e639e !important;
//}
- .el-button--default {
- padding: 15px 3px;
+ .el-button--default.special-button {
+ padding: 0;
background:@background-color4;
color:@color-tool;
- border:1px solid @color-tool;
+ position: absolute;
+ top:24px;
+ right:0.02rem;
+ border:none;//1px solid @color-tool;
+ width: 0.2rem;
+ height: 0.2rem;
+ text-align: center;
+ line-height: 0.2rem;
+ margin-top: -0.1rem;
+ border-radius: 50%;
+ z-index: 999;
}
- .el-button--default:hover{
+ .el-button--default.special-button:hover{
background:@background-color;
border:1px solid @color;
box-shadow: 0 0 2px @color;
color:@color;
}
-
.el-form-item__label {
color: rgb(52, 224, 255);
color: @color;
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index e019544..9733c83 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -41,9 +41,9 @@
<!-- </div>-->
<lc-base-map v-show="item.index==='2'"></lc-base-map>
</el-popover>
- <el-button @click="changeSelect" class="special-button">
+ <!-- <el-button @click="changeSelect" class="special-button">
<i class="el-icon-d-arrow-left"></i>
- </el-button>
+ </el-button> -->
</el-row>
</transition>
</div>
@@ -382,12 +382,15 @@
},
changeSelect () {
this.selectGroup = false
- this.isShow = !this.isShow
- this.active = -1
},
changeSelectMouse () {
- this.selectGroup = true
- this.isShow = []
+ this.selectGroup = !this.selectGroup
+ if (this.selectGroup) {
+ this.isShow = []
+ } else {
+ this.isShow = !this.isShow
+ this.active = -1
+ }
}
}
}
@@ -494,10 +497,7 @@
border:1px solid @color-tool;
}
.special-button:hover{
- background:@background-color;
- border:1px solid @color;
- box-shadow: 0 0 2px @color;
- color:@color;
+ color: #00fff6;
}
}
}
diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue
index 6592090..41239cf 100644
--- a/src/components/table/summarySheets.vue
+++ b/src/components/table/summarySheets.vue
@@ -1,45 +1,87 @@
<template>
<div class="summary-sheets">
- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="left">
- <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
- <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
- <!--<span class="icon-name">缁熻琛�</span>-->
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left">
+ <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn" >
+ <i class="el-icon-tickets icon"></i>
</div>
</el-tooltip>
- <!-- <Dialog ref="summarySheets" title="浼佷笟鎸囨爣鍒嗙被缁熻">-->
- <!-- <tab-handover></tab-handover>-->
- <!-- </Dialog >-->
- <div class="dialog" v-drag v-show="dialogShow">
+ <transition name="animationChange">
+ <div class="subtopic" v-if="subtopic">
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom">
+ <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
+ <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
+ <!--<span class="icon-name">缁熻琛�</span>-->
+ </div>
+ </el-tooltip>
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎸囨爣" placement="bottom">
+ <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog()" >
+ <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
+ <i class="el-icon-office-building icon"></i>
+ </div>
+ </el-tooltip>
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="棰勬姤璀�" placement="bottom">
+ <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog()" >
+ <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" class="icon">
+ <!--<span class="icon-name">棰勬姤璀�</span>-->
+ </div>
+ </el-tooltip>
+ </div>
+ </transition>
+ <Dialog ref="summarySheets" title="浼佷笟棰勮鎶ヨ鍒嗙被缁熻" >
<tab-handover></tab-handover>
- </div>
+ </Dialog>
+ <Dialog ref="warnDialog" title="浼佷笟棰勮鎶ヨ鍒嗙被缁熻" >
+ <warn></warn>
+ </Dialog>
+ <Dialog ref="indexStatisticsDialog" title="浼佷笟鎸囨爣鍒嗙被缁熻">
+ <index-statistics></index-statistics>
+ </Dialog>
</div>
</template>
<script>
import tabHandover from '@components/table/components/tabHandover'
// import Dialog from '@views/popup/Dialog'
+import Dialog from '../../views/popup/Dialog'
+import Warn from './components/Warn'
+import IndexStatistics from './components/IndexStatistics'
import '@/components/BaseNav/SolidWaste/directive/dir'
export default {
name: 'summary-sheet.vue',
components: {
- tabHandover
+ tabHandover,
+ Dialog,
+ Warn,
+ IndexStatistics
// Dialog
},
data () {
return {
summaryVisible: false,
- dialogShow: false
+ dialogShow: false,
+ comp: Warn,
+ warnVisible: false,
+ companyVisible: false,
+ subtopic: false
}
},
methods: {
closeBtn () {
- this.dialogShow = !this.dialogShow
- // const summary = document.getElementById('summary')
- // summary.style.display = 'none'
this.$refs.summarySheets.show()
this.summaryVisible = true
+ },
+ showWarnDialog () {
+ this.$refs.warnDialog.show()
+ this.warnVisible = true
+ },
+ showStatisDialog () {
+ this.$refs.indexStatisticsDialog.show()
+ this.companyVisible = true
+ },
+ subtopicBtn () {
+ this.subtopic = !this.subtopic
}
},
mounted () {
@@ -48,19 +90,48 @@
this.$refs.summarySheets.$on('closeDialog', () => {
that.summaryVisible = false
})
+ this.$refs.warnDialog.$on('closeDialog', () => {
+ that.warnVisible = false
+ })
+ this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
+ that.companyVisible = false
+ })
})
}
}
</script>
<style scoped lang="less">
+ .animationChange-enter-active, .animationChange-leave-active {
+ transition: all 0.5s;
+ }
+
+ .animationChange-enter, .animationChange-leave-to {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+
.summary-sheets {
position: absolute;
+ display: inline-flex;
+ overflow: hidden;
top: 0.42979rem;
left: 0.14583rem;
/*width: 850px;*/
/*height: 265px;*/
z-index: 500;
+ .subtopic{
+ display: inline-flex;
+ .iconBtn{
+ margin-left: 0.03rem;
+ border-color:#DCDFE6;
+ color:#fff;
+ }
+ .iconBtn.active-button{
+ border-color:#00fff6 !important;
+ color:#00fff6 !important;
+ }
+ }
.dialog {
//width: 800px;
diff --git a/src/conf/LayerPipeLine.js b/src/conf/LayerPipeLine.js
index 46807c3..289a7fe 100644
--- a/src/conf/LayerPipeLine.js
+++ b/src/conf/LayerPipeLine.js
@@ -9,5 +9,6 @@
code: 'sewersPipeLine',
name: '绠＄嚎鏁版嵁',
checked: true,
+ isShow: true,
layers: [LayerPipeLines, LayerPk, LayerArea]
}
diff --git a/src/conf/LayerTopic.js b/src/conf/LayerTopic.js
index 1e1fe7d..5c8f956 100644
--- a/src/conf/LayerTopic.js
+++ b/src/conf/LayerTopic.js
@@ -13,5 +13,6 @@
code: 'sewersTopic',
name: '涓撻鍥惧眰',
checked: true,
+ isShow: true,
layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater]
}
diff --git a/src/conf/layers/LayerBasin.js b/src/conf/layers/LayerBasin.js
index 1476068..af3dae6 100644
--- a/src/conf/layers/LayerBasin.js
+++ b/src/conf/layers/LayerBasin.js
@@ -7,6 +7,7 @@
code: 'sewersBasin',
name: '鍖哄煙鍥惧眰',
checked: true,
+ isShow: true,
layers: [
{
code: 'basinCj',
diff --git a/src/conf/layers/LayerEnvRisk.js b/src/conf/layers/LayerEnvRisk.js
index 5e24a1f..eef22d8 100644
--- a/src/conf/layers/LayerEnvRisk.js
+++ b/src/conf/layers/LayerEnvRisk.js
@@ -14,7 +14,8 @@
sname: '椋庨櫓缁熻鍥�', // 琛ㄥ悕
checked: true, // 榛樿閫変腑鐘舵��
url: WFS_URL + '?TYPENAME=鍏徃',
- minZoom: 10
+ minZoom: 10,
+ color: ''
},
{
code: 'envRiskMaterial',
@@ -22,7 +23,8 @@
sname: '鐗╄祫搴�',
checked: true, // 榛樿閫変腑鐘舵��
wfs: WFS_URL + '?TYPENAME=鐮佸ご',
- minZoom: 10
+ minZoom: 10,
+ color: ''
},
{
code: 'envRiskMajor',
@@ -30,7 +32,8 @@
sname: '閲嶅ぇ椋庨櫓',
checked: true, // 榛樿閫変腑鐘舵��
wfs: WFS_URL + '?TYPENAME=瑁呯疆鍖�',
- minZoom: 10
+ minZoom: 10,
+ color: 'red'
},
{
code: 'envRiskFirst',
@@ -38,7 +41,8 @@
sname: '涓�绾ч闄�',
checked: true, // 榛樿閫変腑鐘舵��
wfs: WFS_URL + '?TYPENAME=瑁呯疆鍖�',
- minZoom: 10
+ minZoom: 10,
+ color: 'sandybrown'
},
{
code: 'envRiskSecond',
@@ -46,7 +50,8 @@
sname: '浜岀骇椋庨櫓',
checked: true, // 榛樿閫変腑鐘舵��
wfs: WFS_URL + '?TYPENAME=瑁呯疆鍖�',
- minZoom: 10
+ minZoom: 10,
+ color: 'yellow'
}
]
}
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index e19b47f..1b70723 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -10,7 +10,7 @@
<!-- <menu-special></menu-special>-->
<legend-panel></legend-panel>
<summary-sheets></summary-sheets>
- <enterprise></enterprise>
+ <!-- <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>-->
<!-- <el-button type="primary" @click="ChangeWaterState" class="Waste-water">搴熸按</el-button>-->
@@ -31,7 +31,7 @@
import Popup from '@views/popup/Popup'
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
-import Enterprise from '../components/table/enterprise'
+// import Enterprise from '../components/table/enterprise'
// // 鍏叡灞曠ず鏁版嵁
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
@@ -39,7 +39,7 @@
export default {
name: 'MapTemplate',
components: {
- Enterprise,
+ // Enterprise,
LegendPanel,
// MenuSpecial,
ToolBoxPanel,
--
Gitblit v1.8.0