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 | 155 ++++++++++++---------------------------------------
1 files changed, 38 insertions(+), 117 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index f7329bc..87c4fce 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,21 +1,21 @@
<template>
<div class="legend-panel">
<transition name="fade">
- <div :class="'legend-content map-background'" v-show="legendControl">
- <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
- <p><span>{{ item.title }}</span></p>
- <div :class="index === 5 ? '':'map-under-line'"></div>
+ <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,inde) in item.items" :key="inde">
- <img :src='ite.legendImage' alt=''>
- <span>{{ ite.legendContent }}</span>
+ <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>
</transition>
<el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鍥句緥" placement="left">
- <div :class="this.legendControl?'legend-btn map-btn-active':'legend-btn map-btn-unactive'"
+ <div :class="this.isShow?'legend-btn map-btn-active':'legend-btn map-btn-unactive'"
@click="legendChange()">
<i class="el-icon-more-outline"></i>
</div>
@@ -23,129 +23,48 @@
</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 {
// 鎺у埗鍥句緥 鍐呭鐨� 鏄剧ず/闅愯棌
- legendControl: false,
- // 鍥鹃噷瀛樺偍鏁版嵁
- legendContents: [
- {
- title: '浼佷笟',
- items: [
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '涓浗鐭冲寲'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '娌圭敯浼佷笟 '
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鐐煎寲浼佷笟'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '閿�鍞紒涓�'
- }
- ]
- },
- {
- title: '姘存儏',
- items: [
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '姘存枃绔�'
- }
- ]
- },
- {
- title: '绠＄嚎',
- items: [
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '澶╃劧姘旂绾�'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '澶╃劧姘斿満绔�'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鎴愬搧娌圭绾�'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鎴愬搧娌瑰満绔�'
- }
- ]
- },
- {
- title: '鍙伴',
- items: [
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鍙伴瀹炴祴涓績'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鍙伴瀹炴祴璺緞'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鍙伴棰勬祴涓績'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鍙伴棰勬祴璺緞'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鍙伴褰撳墠涓績'
- }
- ]
- },
- {
- title: '闄嶆按绛夌骇(鍗曚綅锛歮m)',
- items: [
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '灏忛洦0-5'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '涓洦5-10'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '澶ч洦10-20'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦20-50'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '澶ф毚闆�50-100'
- }
- ]
- }
- ]
+ 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 () {
- this.legendControl = !this.legendControl
+ this.isShow = !this.isShow
+ const state = {
+ type: this.isShow,
+ num: 4
+ }
+ bus.$emit('changeState', state)
}
}
}
</script>
<style lang="less">
-@import '@assets/css/map/_map-variable';
.legend-panel {
position: absolute;
z-index: 502;
@@ -263,8 +182,10 @@
margin: 0.05208rem 0;
img {
- width: .08333rem;
- height: .08333rem;
+ // width: .08333rem;
+ // height: .08333rem;
+ width: 0.1rem;
+ height: 0.1rem;
margin-right: .01042rem;
}
--
Gitblit v1.8.0