派生自 wuyushui/SewerAndRainNetwork
src/components/panel/LegendPanel.vue
@@ -1,23 +1,224 @@ <template> <div class="legend-panel"> <div class="legend-icon unactive"> <i class="el-icon-more-outline"></i> <span >图例</span> <div class="legend-panel"> <div class="legend-icon unactive" @click="legendChange()"> <i class="el-icon-more-outline"></i> <span>图例</span> </div> <transition name="fade"> <div class="legend-content" v-show="legendControl"> <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index"> <p>{{ item.title }}</p> <ul> <li v-for="(ite,inde) in item.items" :key="inde"> <img :src='ite.legendImage' alt=''> <span>{{ ite.legendContent }}</span> </li> </ul> <div :class="index === 5 ? '':'under-line'"></div> </div> </div> </transition> </div> </div> </template> <script> export default { name: 'LegendPanel' 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: '暴雨蓝色预警' }, { 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: '暴风红色预警' }, { 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: '暴风红色预警' }, { 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: '销售企业' } ] }, { 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' } ] } ] } }, methods: { // 图标 控制内容的展示与隐藏 legendChange () { // if (this.legendControl === false) { // this.legendControl = true // } else { // this.legendControl = false // } this.legendControl = !this.legendControl } } } </script> <style lang="less" scoped> .legend-panel{ .legend-panel { position: absolute; z-index: 502; bottom: .11979rem; @@ -28,6 +229,91 @@ -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .legend-icon { width: 3.4rem; height: 1.6rem; border-radius: .3rem; background: white; text-align: center; } @keyframes bounce-in { 0% { transform: scale(0); opacity: 0.3; } //50% { // transform: scale(1.1); //} 100% { transform: scale(1); opacity: 1; } } .fade-enter-active { transform-origin: right bottom; animation: bounce-in .5s; } .fade-leave-active { transform-origin: right; animation: bounce-in 1s reverse; transform-origin: right bottom; animation: bounce-in .5s reverse; } .legend-content { position: absolute; right: 1rem; bottom: 3rem; width: 30rem; height: 30rem; border-radius: 1rem; background: #3c7699; .legend-content-box { p { text-align: center; color: #ffffff; font-size: 14px; margin-block-start: 0.3rem; margin-block-end: 0.2rem; } ul { list-style: none; display: flex; flex-wrap: wrap; padding-inline: 20px 0; margin-block: 0; li { width: 25%; height: 1.5rem; display: flex; align-items: center; img { height: 18px; width: 18px; } span { font-size: 12px; color: white; } } } } .under-line { height: 2px; background: #7bc5ef; margin-block-start: 0.5rem; margin-block-end: 0; } } } </style>
