派生自 wuyushui/SewerAndRainNetwork
src/components/panel/LegendPanel.vue
@@ -1,155 +1,70 @@ <template> <div class="legend-panel"> <transition name="fade"> <div class="legend-content" 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 ? '':'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> <div class="legend-icon unactive" @click="legendChange()"> <i class="el-icon-more-outline"></i> <span>图例</span> </div> <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 { // 控制图例 内容的 显示/隐藏 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" scoped> @import '@assets/css/map/_map-variable'; <style lang="less"> .legend-panel { position: absolute; z-index: 502; @@ -162,12 +77,13 @@ -ms-flex-align: end; //align-items: flex-end; transition: all .5s; .legend-icon { width: .29167rem; height: .31771rem; .legend-btn { width: .2rem; height: .2rem; //font-size: .08333rem; border: .00521rem solid rgba(0,255,246,.15); border-radius: .03125rem; border: .00521rem solid @background-color-light; border-radius: @border-radius; text-align: center; display: -webkit-box; display: -ms-flexbox; @@ -185,7 +101,7 @@ background: @background-color; margin-top: .04167rem; cursor: pointer; color: @color; //color: @color; margin-left: auto; font-size: 0.08333rem; } @@ -219,13 +135,11 @@ -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; background: rgba(0,16,30,.9); border-radius: .05208rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; border: .00521rem solid @color; box-shadow: 0 0 .03rem @color; overflow: hidden; min-height: 1.28646rem; @@ -233,6 +147,7 @@ font-size: 0.07292rem; padding: .10417rem; border-left: .00521rem solid @background-color-split; p { text-align: center; margin: 0 !important; @@ -243,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; @@ -252,47 +168,34 @@ ul { list-style: none; //display: flex; flex-wrap: wrap; margin: 0 !important; padding: 0 !important;; padding-inline: 0; //color: #00fff6; //font-size: .07292rem; font-size: .08333rem; li { //width: 100%; //display: flex; //justify-content: space-around; //margin-left: 15px; //margin-right: 15px; 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 { //width: 80px; //font-size: 12px; color: @color; } img { // width: .08333rem; // height: .08333rem; width: 0.1rem; height: 0.1rem; margin-right: .01042rem; } span { color: @color; } } } } .under-line { height: 1px; background: @background-color-split; margin-block-start: 0; margin-block-end: 0; } } } </style>
