<template>
|
<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-centent" 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>
|
</template>
|
|
<script>
|
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: '暴雨蓝色预警'
|
},
|
{
|
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
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.legend-panel {
|
position: absolute;
|
z-index: 502;
|
bottom: .11979rem;
|
right: .14583rem;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: column;
|
flex-direction: column;
|
-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.2);
|
}
|
100% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
|
.fade-enter-active {
|
transform-origin: right center;
|
animation: bounce-in 1s;
|
}
|
|
.fade-leave-active {
|
transform-origin: right;
|
animation: bounce-in 1s reverse;
|
}
|
|
.legend-content {
|
position: absolute;
|
right: 1rem;
|
bottom: 3rem;
|
width: 30rem;
|
height: 30rem;
|
border-radius: 1rem;
|
background: #3c7699;
|
|
.legend-content-centent {
|
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>
|
