派生自 wuyushui/SewerAndRainNetwork
src/components/panel/LegendPanel.vue
@@ -1,163 +1,57 @@ <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="legend-btn" @click="legendChange()"> <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> <!-- <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' 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] } }, methods: { // 图标 控制内容的展示与隐藏 legendChange () { this.legendControl = !this.legendControl if (!this.legendControl) { return document.getElementsByTagName('legend-btn')[0].classList.add('btn-active') } return document.getElementsByTagName('legend-btn')[0].classList.remove('btn-active') this.isShow = !this.isShow } } } </script> <style lang="less" > @import '@assets/css/map/_map-variable'; @import '@assets/css/map/map-elem-ui'; <style lang="less"> .legend-panel { position: absolute; z-index: 502; @@ -170,6 +64,7 @@ -ms-flex-align: end; //align-items: flex-end; transition: all .5s; .legend-btn { width: .2rem; height: .2rem; @@ -193,7 +88,7 @@ background: @background-color; margin-top: .04167rem; cursor: pointer; color: @color; //color: @color; margin-left: auto; font-size: 0.08333rem; } @@ -239,6 +134,7 @@ font-size: 0.07292rem; padding: .10417rem; border-left: .00521rem solid @background-color-split; p { text-align: center; margin: 0 !important; @@ -249,6 +145,7 @@ -webkit-margin-after: 0.2rem; margin-block-end: 0.2rem; margin-bottom: 0.05208rem !important; span { color: @color-title; font-size: .08333rem; @@ -264,22 +161,23 @@ 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; margin-right: .01042rem; } span { color: @color; } } } }
