From 4df0471b7dff0494625ff09969b1a13b5359a26e Mon Sep 17 00:00:00 2001
From: XingChuan <m17600301067@163.com>
Date: 星期一, 31 五月 2021 22:41:47 +0800
Subject: [PATCH] 统计表弹框UI优化；增加点击企业名称缩放至企业；二级表展示功能优化。
---
src/components/panel/LegendPanel.vue | 346 ++++++++++++++++++++++++---------------------------------
1 files changed, 147 insertions(+), 199 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index caa82aa..87c4fce 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,186 +1,70 @@
<template>
<div class="legend-panel">
- <div class="legend-icon unactive" @click="legendChange()">
- <i class="el-icon-more-outline"></i>
- <span>鍥句緥</span>
- </div>
- <div class="legendContent" v-show="legendCont">
- <div class="legendContent_Centent">
- <p>棰勮</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>浼佷笟</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>姘存儏</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>绠＄嚎</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>鍙伴</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>闄嶆按绛夌骇</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
+ <transition name="fade">
+ <div :class="'legend-content map-background'" v-show="isShow">
+ <div class="legend-content-box" v-for="(item,index) in serviceLayers" :key="index">
+ <p><span>{{ item.name }}</span></p>
+ <div class="map-under-line"></div>
+ <ul>
+ <li v-for="(ite,idx) in item.layers" :key="idx">
+ <img :src="ite.legendImage===undefined?'../.././assets/images/map-pages/setting.png':ite.legendImage" alt=''>
+ <span>{{ ite.name }}</span>
+ </li>
+ </ul>
+ </div>
</div>
- </div>
+ </transition>
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鍥句緥" placement="left">
+ <div :class="this.isShow?'legend-btn map-btn-active':'legend-btn map-btn-unactive'"
+ @click="legendChange()">
+ <i class="el-icon-more-outline"></i>
+ </div>
+ </el-tooltip>
</div>
</template>
-
<script>
+import { LayerWasteWater } from '../../conf/layers/LayerWasteWater'
+import { LayerWasteGas } from '../../conf/layers/LayerWasteGas'
+import { LayerWasteSolid } from '../../conf/layers/LayerWasteSolid'
+import { LayerAirQuality } from '../../conf/layers/LayerAirQuality'
+import { LayerEnvRisk } from '../../conf/layers/LayerEnvRisk'
+import { LayerSoilGroundWater } from '../../conf/layers/LayerSoilGroundWater'
+import { LayerPipeLines } from '../../conf/layers/LayerPipeLines'
+import { LayerPk } from '../../conf/layers/LayerPk'
+import { LayerArea } from '../../conf/layers/LayerArea'
+import bus from '@/eventBus'
export default {
name: 'LegendPanel',
data () {
return {
// 鎺у埗鍥句緥 鍐呭鐨� 鏄剧ず/闅愯棌
- legendCont: false
+ isShow: false,
+ serviceLayers: [LayerSoilGroundWater, LayerEnvRisk, LayerAirQuality, LayerWasteSolid, LayerWasteGas, LayerWasteWater, LayerArea, LayerPk, LayerPipeLines]
}
+ },
+ mounted () {
+ const that = this
+ bus.$on('changeState', function (state) {
+ if (state.num !== 4 && state.type) {
+ that.isShow = false
+ }
+ })
},
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
- if (this.legendCont === false) {
- this.legendCont = true
- } else {
- this.legendCont = false
+ this.isShow = !this.isShow
+ const state = {
+ type: this.isShow,
+ num: 4
}
+ bus.$emit('changeState', state)
}
}
}
</script>
-<style lang="less" scoped>
+<style lang="less">
.legend-panel {
position: absolute;
z-index: 502;
@@ -191,63 +75,127 @@
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
- align-items: flex-end;
+ //align-items: flex-end;
+ transition: all .5s;
- .legend-icon {
- width: 3.4rem;
- height: 1.6rem;
- border-radius: .3rem;
- background: white;
+ .legend-btn {
+ width: .2rem;
+ height: .2rem;
+ //font-size: .08333rem;
+ border: .00521rem solid @background-color-light;
+ border-radius: @border-radius;
text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ background: @background-color;
+ margin-top: .04167rem;
+ cursor: pointer;
+ //color: @color;
+ margin-left: auto;
+ font-size: 0.08333rem;
}
- .legendContent {
- position: absolute;
- right: 8rem;
- bottom: 3rem;
- width: 30rem;
- height: 41rem;
- border-radius: 1rem;
- background: #3c7699;
- .legendContent_Centent {
- width: 100%;
- height: 100%;
+ @keyframes bounce-in {
+ 0% {
+ transform: scale(0);
+ opacity: 0.3;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+
+ .fade-enter-active {
+ transform-origin: right bottom;
+ animation: bounce-in .2s;
+ }
+
+ .fade-leave-active {
+ transform-origin: right bottom;
+ animation: bounce-in .2s reverse;
+ }
+
+ .legend-content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+
+ overflow: hidden;
+ min-height: 1.28646rem;
+
+ .legend-content-box {
+ font-size: 0.07292rem;
+ padding: .10417rem;
+ border-left: .00521rem solid @background-color-split;
+
p {
text-align: center;
- color: #ffffff;
- font-size: 14px;
- display: block;
- margin-block-start: 1rem;
- margin-block-end: 0;
+ margin: 0 !important;
+ //padding: 0;
+ //color: @color-title;
+ -webkit-margin-before: 0.3rem;
+ margin-block-start: 0.3rem;
+ -webkit-margin-after: 0.2rem;
+ margin-block-end: 0.2rem;
+ margin-bottom: 0.05208rem !important;
+
+ span {
+ color: @color-title;
+ font-size: .08333rem;
+ font-weight: 600;
+ }
}
+
ul {
- padding: 0;
list-style: none;
- display: flex;
flex-wrap: wrap;
- width: 100%;
+ margin: 0 !important;
+ padding: 0 !important;;
+ padding-inline: 0;
+ font-size: .08333rem;
+
li {
- width: 25%;
- text-align: center;
- line-height: 1.5rem;
+ list-style: none;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ margin: 0.05208rem 0;
+
img {
- vertical-align: middle !important;
+ // width: .08333rem;
+ // height: .08333rem;
+ width: 0.1rem;
+ height: 0.1rem;
+ margin-right: .01042rem;
}
+
span {
- font-size: 12px;
- color: white;
+ color: @color;
}
}
}
}
- .underLine {
- border: none;
- background: none;
- width: 100%;
- height: 2px;
- background: #7bc5ef;
- }
}
}
</style>
--
Gitblit v1.8.0