Merge remote-tracking branch 'origin/master'

徐旺旺

2021-03-05 4e504ecb2eac4ff4b0335ca2d1e29fc498fd920f

Merge remote-tracking branch 'origin/master'

 public/assets/images/map/sewers/Èýͨ.png

 public/assets/images/map/sewers/ÖÐÐÄ¿ØÖƵã.png

 public/assets/images/map/sewers/Ò½Ôº.png

 public/assets/images/map/sewers/ËÄͨ.png

 public/assets/images/map/sewers/ÍäÍ·.png

 public/assets/images/map/sewers/±¨¾¯É豸.png

 public/assets/images/map/sewers/ÅÅ·Å¿ÚÖܱßÃô¸ÐÐÅÏ¢.png

 public/assets/images/map/sewers/Ãô¸ÐÄ¿±ê.png

 public/assets/images/map/sewers/¾ÈÔ®Îï×Ê.png

 public/assets/images/map/sewers/¼ì²âµã.png

 public/assets/images/map/sewers/Ë®Ìå.png

 public/assets/images/map/sewers/ÎÛË®ÅÅ¿Ú.png

 public/assets/images/map/sewers/ÎÛË®ÖÕµã.png

 public/assets/images/map/sewers/ÎÛË®Æðµã.png

 public/assets/images/map/sewers/±Ã.png

 public/assets/images/map/sewers/Á÷Á¿¼Æ.png

 public/assets/images/map/sewers/Ïû·Àµ¥Î».png

 public/assets/images/map/sewers/Һλ¼Æ.png

 public/assets/images/map/sewers/»·¾³¼à²âµ¥Î».png

 public/assets/images/map/sewers/¼à²âµãÖ¸±êÎÛȾÎï·ÖÎö.png

 public/assets/images/map/sewers/ÂëÍ·.png

 public/assets/images/map/sewers/Éç»áרҵӦ¼±¾ÈÔ®.png

 public/assets/images/map/sewers/񿾮.png

 public/assets/images/map/sewers/άÇÀÐÞ¶ÓÎé.png

 public/assets/images/map/sewers/×ÔÈ»±£»¤Çø.png

 public/assets/images/map/sewers/·§ÃÅ.png

 public/assets/images/map/sewers/¸ôÓͳØ.png

 public/assets/images/map/sewers/¼¯Ë®³Ø.png

 public/assets/images/map/sewers/ÓêË®ÅÅ¿Ú.png

 public/assets/images/map/sewers/Óêó÷×Ó.png

 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-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>
    </div>
    </transition>
  </div>
</template>

@@ -164,16 +27,189 @@
  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
      if (this.legendControl === false) {
        this.legendControl = true
      } else {
        this.legendCont = false
        this.legendControl = false
      }
    }
  }
@@ -201,38 +237,66 @@
    text-align: center;
  }

  .legendContent {
  @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: left center;
    animation: bounce-in 1s 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-centent {
      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 +305,11 @@
      }
    }

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