Merge remote-tracking branch 'origin/master'

YANGDL

2021-03-05 c4044fb60e53e5c83da4ee645d5160f914e422a3

 src/components/panel/LegendPanel.vue

@@ -4,157 +4,20 @@
      <i class="el-icon-more-outline"></i>
      <span>图例</span>
    </div>
    <div class="legendContent" v-show="legendCont">
      <div class="legendContent_Centent">
        <p>预警</p>
        <ul>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
        </ul>
        <hr class="underLine"/>
        <p>企业</p>
        <ul>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
        </ul>
        <hr class="underLine"/>
        <p>水情</p>
        <ul>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
        </ul>
        <hr class="underLine"/>
        <p>管线</p>
        <ul>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
        </ul>
        <hr class="underLine"/>
        <p>台风</p>
        <ul>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
        </ul>
        <hr class="underLine"/>
        <p>降水等级</p>
        <ul>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
        </ul>
    <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>
    </div>
    </transition>
  </div>
</template>

@@ -164,17 +27,191 @@
  data () {
    return {
      // 控制图例 内容的 显示/隐藏
      legendCont: false
      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.legendCont === false) {
        this.legendCont = true
      } else {
        this.legendCont = false
      }
      // if (this.legendControl === false) {
      //   this.legendControl = true
      // } else {
      //   this.legendControl = false
      // }
      this.legendControl = !this.legendControl
    }
  }
}
@@ -201,38 +238,66 @@
    text-align: center;
  }

  .legendContent {
  @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 bottom;
    animation: bounce-in .5s reverse;
  }

  .legend-content {
    position: absolute;
    right: 8rem;
    right: 1rem;
    bottom: 3rem;
    width: 30rem;
    height: 41rem;
    height: 30rem;
    border-radius: 1rem;
    background: #3c7699;
    .legendContent_Centent {
      width: 100%;
      height: 100%;

    .legend-content-box {
      p {
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        display: block;
        margin-block-start: 1rem;
        margin-block-end: 0;
        margin-block-start: 0.3rem;
        margin-block-end: 0.2rem;
      }

      ul {
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding-inline: 20px 0;
        margin-block: 0;

        li {
          width: 25%;
          text-align: center;
          line-height: 1.5rem;
          height: 1.5rem;
          display: flex;
          align-items: center;

          img {
            vertical-align: middle !important;
            height: 18px;
            width: 18px;
          }

          span {
            font-size: 12px;
            color: white;
@@ -241,12 +306,11 @@
      }
    }

    .underLine {
      border: none;
      background: none;
      width: 100%;
    .under-line {
      height: 2px;
      background: #7bc5ef;
      margin-block-start: 0.5rem;
      margin-block-end: 0;
    }
  }
}