Newer
Older
HuangJiPC / src / pages / views / WatershedOneMap / newPart / sheHuiTwo.vue
@zhangdeliang zhangdeliang on 21 Jun 13 KB update
<template>
  <!-- 规划引领 阶段二区域治理-->
  <div class="sheHuiNetTwo">
    <div class="navBtn">
      <p :class="[swIndex == 1 ? 'active' : '']" @click="checkSw(1)">黄孝河</p>
      <p :class="[swIndex == 2 ? 'active' : '']" @click="checkSw(2)">机场河</p>
    </div>
    <div class="content">
      <!-- 黄孝河 -->
      <div class="nowGc animate__animated animate__fadeInRight" v-if="swIndex == 1">
        <!-- 动态箭头 -->
        <div class="anqu" style="width: 100px; left: 15px; bottom: 620px"></div>
        <div class="anqu" style="width: 100px; left: 15px; bottom: 360px"></div>
        <div class="anqu" style="width: 100px; left: 15px; bottom: 105px"></div>

        <div class="mingqu" style="width: 230px; left: 132px; bottom: 105px"></div>
        <div class="mingqu" style="width: 230px; left: 132px; bottom: 360px"></div>
        <div class="mingqu" style="width: 230px; left: 132px; bottom: 620px"></div>

        <div class="fuhe" style="width: 170px; left: 295.5px; bottom: 582px; transform: rotate(90deg)"></div>
        <div class="fuhe" style="width: 170px; left: 295.5px; bottom: 335px; transform: rotate(90deg)"></div>
        <div class="fuhe" style="width: 170px; left: 295.5px; bottom: 70px; transform: rotate(90deg)"></div>

        <!-- 策略1 -->
        <div class="line" style="width: 190px; left: 105px; bottom: 698px"></div>
        <div class="line" style="width: 60px; left: 75px; bottom: 671px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 190px; left: 105px; bottom: 438px"></div>
        <div class="line" style="width: 60px; left: 262px; bottom: 671px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 20px; left: 172px; bottom: 605px; transform: rotate(-90deg)"></div>

        <!-- 策略2 -->
        <div class="line" style="width: 170px; left: 105px; bottom: 255px"></div>
        <div class="line" style="width: 100px; left: 56px; bottom: 303px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 60px; left: 75px; bottom: 411px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 190px; left: 105px; bottom: 438px"></div>
        <div class="line" style="width: 60px; left: 262px; bottom: 411px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 20px; left: 172px; bottom: 340px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 50px; left: 250px; bottom: 330px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 50px; left: 250px; bottom: 291px; transform: rotate(-90deg)"></div>

        <!-- 策略3 -->
        <div class="line" style="width: 170px; left: 105px; bottom: 2px"></div>
        <div class="line" style="width: 100px; left: 56px; bottom: 58px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 60px; left: 75px; bottom: 158px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 190px; left: 105px; bottom: 183px"></div>
        <div class="line" style="width: 60px; left: 262px; bottom: 158px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 20px; left: 172px; bottom: 85px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 50px; left: 250px; bottom: 70px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 50px; left: 250px; bottom: 38px; transform: rotate(-90deg)"></div>
      </div>
      <!-- 机场河 -->
      <div class="nowJch animate__animated animate__fadeInRight" v-if="swIndex == 2">
        <!-- 策略1 -->
        <div class="fuhe" style="width: 170px; left: 297px; bottom: 560px; transform: rotate(90deg)"></div>
        <div class="mingqu" style="width: 140px; left: 163px; bottom: 505px"></div>
        <div class="mingqu" style="width: 165px; left: 130px; bottom: 600px"></div>
        <div class="line" style="width: 73px; left: 43px; bottom: 603px"></div>
        <div class="line" style="width: 35px; left: 87px; bottom: 585px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 135px; left: 10px; bottom: 510px"></div>
        <div class="line" style="width: 45px; left: 82px; bottom: 529px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 45px; left: 114px; bottom: 535px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 50px; left: 138px; bottom: 556px"></div>
        <div class="line" style="width: 53px; left: 140px; bottom: 642px; transform: rotate(-180deg)"></div>
        <div class="line" style="width: 20px; left: 160px; bottom: 623px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 25px; left: 128px; bottom: 625px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 75px; left: 131px; bottom: 557px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 25px; left: 12px; bottom: 525px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 25px; left: 27px; bottom: 525px; transform: rotate(90deg)"></div>

        <!-- 策略2 -->
        <div class="fuhe" style="width: 170px; left: 297px; bottom: 300px; transform: rotate(90deg)"></div>
        <div class="mingqu" style="width: 140px; left: 163px; bottom: 250px"></div>
        <div class="mingqu" style="width: 165px; left: 130px; bottom: 345px"></div>
        <div class="line" style="width: 73px; left: 43px; bottom: 350px"></div>
        <div class="line" style="width: 35px; left: 87px; bottom: 332px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 135px; left: 10px; bottom: 256px"></div>
        <div class="line" style="width: 45px; left: 82px; bottom: 276px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 45px; left: 114px; bottom: 280px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 50px; left: 138px; bottom: 301px"></div>
        <div class="line" style="width: 53px; left: 140px; bottom: 387px; transform: rotate(-180deg)"></div>
        <div class="line" style="width: 20px; left: 160px; bottom: 370px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 25px; left: 128px; bottom: 370px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 75px; left: 131px; bottom: 304px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 25px; left: 217px; bottom: 325px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 25px; left: 12px; bottom: 270px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 25px; left: 27px; bottom: 270px; transform: rotate(90deg)"></div>

        <!-- 策略3 -->
        <div class="fuhe" style="width: 170px; left: 297px; bottom: 70px; transform: rotate(90deg)"></div>
        <div class="mingqu" style="width: 140px; left: 163px; bottom: 22px"></div>
        <div class="mingqu" style="width: 165px; left: 130px; bottom: 116px"></div>
        <div class="line" style="width: 73px; left: 40px; bottom: 122px"></div>
        <div class="line" style="width: 35px; left: 165px; bottom: 95px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 135px; left: 14px; bottom: 27px"></div>
        <div class="line" style="width: 45px; left: 115px; bottom: 50px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 45px; left: 140px; bottom: 73px"></div>
        <div class="line" style="width: 30px; left: 225px; bottom: 95px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 43px; left: 83px; bottom: 48px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 50px; left: 140px; bottom: 159px; transform: rotate(-180deg)"></div>
        <div class="line" style="width: 25px; left: 156px; bottom: 142px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 25px; left: 128px; bottom: 142px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 35px; left: 87px; bottom: 100px; transform: rotate(90deg)"></div>
        <div class="line" style="width: 30px; left: 205px; bottom: 99px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 25px; left: 12px; bottom: 45px; transform: rotate(-90deg)"></div>
        <div class="line" style="width: 25px; left: 27px; bottom: 45px; transform: rotate(90deg)"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount } from 'vue';
import bus from '@/utils/util';
import Popup from './Popup.vue';

export default {
  name: 'sheHuiNetTwo',
  components: { Popup },
  setup() {
    const allData = reactive({
      swIndex: 1,
      checkedLegend: [
        { isCheck: false, layername: 'rainAndwu' },
        { isCheck: false, layername: 'layer1' },
        { isCheck: false, layername: 'layer3' },
        { isCheck: false, layername: 'layer4' },
        { isCheck: false, layername: 'layer5' },
        { isCheck: false, layername: 'layer6' },
        { isCheck: false, layername: 'layer8' },
        { isCheck: false, layername: 'layer9' },
        { isCheck: false, layername: 'layer11' },
        { isCheck: false, layername: 'layer12' },
      ],
    });
    // 初始化图例数据
    async function initLayer() {
      for (let i = 0; i < 14; i++) {
        mapbox._map.on('click', 'layer' + i + '_layer', function (e) {
          e.preventDefault();
          const features = mapbox._map.queryRenderedFeatures(e.point);
          // 判断是否点击当前点位
          features.map((item) => {
            if (item.layer.id == 'layer' + i + '_layer') {
              // 拼接显示详情内容
              bus.emit('pointToDetail', item);
            }
          });
        });
        mapbox.changeTypeOfmouse('layer' + i + '_layer'); //切换鼠标样式
      }
      bus.on('pointToDetail', (param) => {
        mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties));
      });
    }
    async function checkSw(index) {
      allData.swIndex = index;
    }
    onMounted(() => {
      initLayer();
      //设置初始化视角
      mapbox._map.setPitch(60).setBearing(0);
      setTimeout(() => {
        mapbox.flyto([114.265596, 30.620028], 12.5, 0.8);
      }, 300);
      // 设置默认选中的图例图层
      setTimeout(() => {
        bus.emit('showDefaultLegend', allData.checkedLegend);
      });
    });
    onBeforeUnmount(() => {
      //清空图例默认开启,true 代表关闭图层
      bus.emit('showDefaultLegend', [
        { isCheck: true, layername: 'rainAndwu' },
        { isCheck: true, layername: 'layer1' },
        { isCheck: true, layername: 'layer3' },
        { isCheck: true, layername: 'layer4' },
        { isCheck: true, layername: 'layer5' },
        { isCheck: true, layername: 'layer6' },
        { isCheck: true, layername: 'layer8' },
        { isCheck: true, layername: 'layer9' },
        { isCheck: true, layername: 'layer11' },
        { isCheck: true, layername: 'layer12' },
      ]);
      //清除选中图层
      !!window.timertuokuan && clearInterval(window.timertuokuan);
      !!window.timerspread && clearInterval(window.timerspread);
      !!window.timerbushui && clearInterval(window.timerbushui);
      //清除弹窗
      bus.off('pointToDetail');
      if (!!mapbox._popup) {
        mapbox._popup.remove();
      }
    });
    return {
      ...toRefs(allData),
      initLayer,
      checkSw,
    };
  },
};
</script>
<style lang="less">
.sheHuiNetTwo {
  position: relative;
  .navBtn {
    position: absolute;
    right: 0px;
    top: -45px;
    width: 160px;
    height: 30px;
    display: flex;
    p {
      height: 25px;
      padding: 0 10px;
      line-height: 27px;
      text-align: center;
      color: #d4f7ff;
      cursor: pointer;
    }
    .active {
      background: #16a2aa;
      border-radius: 10px;
      color: #000;
      transition: 200ms;
    }
  }
  .content {
    height: 735px;
    overflow: auto;
    margin: 20px 0px 50px 0px;
    padding-left: 10px;
    .nowJch {
      width: 407px;
      height: 1059px;
      background: url('@/assets/newImgs/nowJch.png') no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 60px;
      position: relative;
      .anqu {
        position: absolute;
        height: 14px;
        background: url('@/assets/newImgs/ahArrow.png') no-repeat center;
        background-size: 100% 100%;
      }
      .mingqu {
        position: absolute;
        height: 14px;
        background: url('@/assets/newImgs/mqArrow.png') no-repeat center;
        background-size: 100% 100%;
      }
      .fuhe {
        position: absolute;
        height: 28px;
        background: url('@/assets/newImgs/ahArrow.png') no-repeat center;
        background-size: 100% 100%;
      }
      .line {
        position: absolute;
        height: 5px;
        background: url('@/assets/newImgs/lineArrow.png') no-repeat center;
      }
    }

    .nowGc {
      width: 407px;
      height: 1059px;
      background: url('@/assets/newImgs/nowHxh.png') no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 60px;
      position: relative;
      .anqu {
        position: absolute;
        height: 14px;
        background: url('@/assets/newImgs/ahArrow.png') no-repeat center;
        background-size: 100% 100%;
      }
      .mingqu {
        position: absolute;
        height: 14px;
        background: url('@/assets/newImgs/mqArrow.png') no-repeat center;
        background-size: 100% 100%;
      }
      .fuhe {
        position: absolute;
        height: 33px;
        background: url('@/assets/newImgs/ahArrow.png') no-repeat center;
        background-size: 100% 100%;
      }
      .line {
        position: absolute;
        height: 5px;
        background: url('@/assets/newImgs/lineArrow.png') no-repeat center;
      }
    }
  }
}
</style>