派生自 wuyushui/SewerAndRainNetwork
src/components/panel/LegendPanel.vue
@@ -1,158 +1,70 @@ <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> <ul > <!-- <div >--> <li v-for="(ite,inde) in item.items" :key="inde"> <img :src='ite.legendImage' alt=''> <span>{{ ite.legendContent }}</span> <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> <!-- </div>--> </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'" @click="legendChange()"> <div :class="this.isShow?'legend-btn map-btn-active':'legend-btn map-btn-unactive'" @click="legendChange()"> <i class="el-icon-more-outline"></i> <!-- <span>图例</span>--> </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 { // 控制图例 内容的 显示/隐藏 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: '降水等级(单位：mm)', 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'; <style lang="less"> .legend-panel { position: absolute; z-index: 502; @@ -165,6 +77,7 @@ -ms-flex-align: end; //align-items: flex-end; transition: all .5s; .legend-btn { width: .2rem; height: .2rem; @@ -234,6 +147,7 @@ font-size: 0.07292rem; padding: .10417rem; border-left: .00521rem solid @background-color-split; p { text-align: center; margin: 0 !important; @@ -244,6 +158,7 @@ -webkit-margin-after: 0.2rem; margin-block-end: 0.2rem; margin-bottom: 0.05208rem !important; span { color: @color-title; font-size: .08333rem; @@ -259,22 +174,25 @@ padding-inline: 0; font-size: .08333rem; li { list-style: none; display: flex; -webkit-box-align: center; align-items: center; margin: 0.05208rem 0; img { width: .08333rem; height: .08333rem; margin-right: .01042rem; } li { list-style: none; display: flex; -webkit-box-align: center; align-items: center; margin: 0.05208rem 0; span { color: @color; } img { // width: .08333rem; // height: .08333rem; width: 0.1rem; height: 0.1rem; margin-right: .01042rem; } span { color: @color; } } } }
