hb_sis_zhfx/src/views/Home/components/map.vue

<template>
  <div class="map">
    <div class="back"></div>
    <div class="security-days" v-if="fcId === '0'">
      <div class="text">安全天数:</div>
      <div class="num">
        <span class="font-num">{{safeDay}}</span>
        <span class="unit">天</span>
      </div>
    </div>
    <div class="tab-box">
      <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click.stop="selectTab(index, tab.show)">
        <span class="svg-icon svg-icon-sm" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
          <SvgIcon :svgid="tab.icon"></SvgIcon>
        </span>
        <span>{{ tab.text }}</span>
      </div>
    </div>
    <div class="return" @click="backMap" v-show="mapName !== 'nx'">
      <span class="svg-icon svg-icon-sm">
        <svg-icon :svgid="'svg-arrow-dpwn-1'" />
      </span>
      返回
    </div>
    <!-- 指南针 -->
    <div class="compass">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
        <g id="渐变">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#000"
            opacity="0"
            d="M100.523,18.655c44.661,0,80.865,36.205,80.865,80.866
		c0,44.66-36.204,80.865-80.865,80.865c-44.661,0-80.865-36.205-80.865-80.865C19.658,54.86,55.863,18.655,100.523,18.655z"
          />
        </g>
        <g id="图层_2">
          <g>
            <g>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                fill="#606769"
                opacity="0.75"
                d="M100.523,56.301c-23.869,0-43.22,19.349-43.22,43.22 c0,23.869,19.351,43.219,43.22,43.219c23.87,0,43.22-19.35,43.22-43.219C143.743,75.65,124.394,56.301,100.523,56.301z M100.954,139.082c-21.765,0-39.414-17.648-39.414-39.416c0-21.77,17.649-39.418,39.414-39.418 c21.772,0,39.417,17.648,39.417,39.418C140.371,121.434,122.727,139.082,100.954,139.082z"
              />
            </g>
          </g>
        </g>
        <g id="图层_3">
          <g>
            <g>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                fill="#05BB4C"
                d="M100.523,18.655c-44.661,0-80.865,36.205-80.865,80.866 c0,44.66,36.205,80.865,80.865,80.865c44.661,0,80.865-36.205,80.865-80.865C181.389,54.86,145.185,18.655,100.523,18.655z M101.156,173.509c-40.862,0-73.988-33.126-73.988-73.987c0-40.863,33.126-73.989,73.988-73.989 c40.862,0,73.988,33.125,73.988,73.989C175.145,140.383,142.019,173.509,101.156,173.509z"
              />
            </g>
          </g>
        </g>
        <g id="图层_4">
          <g>
            <g>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                fill="#05BB4C"
                opacity="0.2"
                d="M100.582,4.724h-0.118c-52.356,0-94.797,42.441-94.797,94.798 c0,52.355,42.441,94.797,94.797,94.797h0.118c52.356,0,94.798-42.441,94.798-94.797C195.38,47.165,152.938,4.724,100.582,4.724z M101.169,189.813c-49.76,0-90.1-40.338-90.1-90.095c0-49.76,40.34-90.1,90.1-90.1c49.757,0,90.095,40.34,90.095,90.1 C191.264,149.475,150.926,189.813,101.169,189.813z"
              />
            </g>
          </g>
        </g>
        <g id="图层_1">
          <polyline fill="#606769" points="59.177,142.682 113.678,116.092 84.673,87.663" />
        </g>
        <g id="图层_7">
          <polygon fill="#BD3338" points="139.496,60.156 114.004,115.172 85.004,86.745" />
        </g>
      </svg>
    </div>
    <div class="map-img">
      <!-- 宁夏地图总览 -->
      <SvgMapNX v-if="mapName === 'nx'" :show="showType" :data="sourceMap" @clickLabel="clickLabel"></SvgMapNX>
      <!-- 麻黄山风电场 -->
      <MHSFDC v-if="mapName === 'MHS_FDC'" :data="sourceMap" @clickFj="clickFj"></MHSFDC>
    </div>
  </div>
</template>

<script>
// 宁夏地图总览
import SvgMapNX from "./map/svg-map-nx.vue";

// 麻黄山风电场
import MHSFDC from "./map/MHS_FDC.vue";

import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
import compassIcon from "@/assets/icon/svg_fill/compass.svg";
export default {
  // 名称
  name: "Map",
  // 使用组件
  components: {
    SvgMapNX,
    MHSFDC,
    SvgIcon,
  },
  props:{
    wpId:{
      type:String,
      default:"0"
    },
    day:{
      type:String,
      default:"---"
    },
    data:{
      type:Object,
      default:() => {}
    }
  },

  mounted(){
    this.fcId = this.wpId;
    this.safeDay = this.day;
    this.sourceMap = this.data;
  },
  // 数据
  data() {
    return {
      fcId:"",
      safeDay:"",
      showType: "all",
      sourceMap:{},
      tabs: [
        {
          icon: "svg-all",
          text: "全部",
          show: "all"
        },
        {
          icon: "svg-wind-site",
          text: "风场",
          show: "fc"
        },
        {
          icon: "svg-photovoltaic",
          text: "电站",
          show: "gf"
        },
      ],
      compassIcon: compassIcon,
      activeTab: 0,
      img: require("@assets/map/map-nx.png"),
      nxSvgFile: require("@assets/map/map-nx.svg"),
      mapName: "nx",
    };
  },
  // 函数
  methods: {
    selectTab(index, showType) {
      this.activeTab = index;
      this.showType = showType;
      let wpId = (showType === "all" ? "0" : showType === "fc" ? "-1" : "-2");
      this.safeDay = "---";
      this.mapName = "nx";
      this.$emit("mapClick", wpId);
    },
    backMap() {
      // this.mapName = "nx";
      // this.$emit("mapClick", wpId);
    },
    clickLabel(wpId) {
      this.mapName = wpId;
      this.$emit("mapClick", wpId);
    },
    clickFj(wpId){
      this.$emit("mapClick", wpId);
    }
  },
  watch:{
    wpId(res){
      this.fcId = res;
    },
    day(res){
      this.safeDay = res;
    },
    data(res){
      this.sourceMap = res;
    }
  }
};
</script>

<style lang="less" scoped>
.map {
  position: relative;
  width: 100%;
  height: 100%;

  .back {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: url(../../../assets/background-home.png) no-repeat;
    background-size: 100% 100%;
  }

  .security-days {
    margin: 1.852vh;

    .text {
      font-size: 2.222vh;
      color: @write;
    }

    .num {
      color: @green;
      font-size: 3.704vh;

      .unit {
        font-size: 2.222vh;
        position: relative;
        margin-left: 0.556vh;
        top: -0.185vh;
      }
    }
  }

  .tab-box {
    margin: 1.852vh 2.778vh;

    .tab-item {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: @fontsize-l;
      cursor: pointer;
      width: 6.481vh;
      padding: 0.741vh 0;

      &.active {
        color: @green;
        position: relative;
        background-image: @greenLinearTop;

        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0.463vh;
          border: 0.093vh solid @green;
          border-top: 0;
          left: 0;
          bottom: 0;
          box-sizing: border-box;
        }
      }

      .svg-icon {
        margin-right: 0.556vh;
      }
    }
  }

  .return {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    right: 16px;
    font-size: @fontsize-l;
    color: fade(@white, 80);
    cursor: pointer;
    .svg-icon {
      margin-right: 0.7407vh;
      svg {
        transform: rotate(90deg);
      }
    }
  }

  .compass {
    position: absolute;
    right: 16px;
    bottom: 32px;
    border-radius: 50%;

    &::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      box-shadow: inset 0px -5px 10px 0px @green;
    }
    svg {
      height: 45px;
      width: 45px;
    }
  }

  .map-img {
    width: calc(100% - 14.815vh);
    height: calc(100% - 14.815vh);
    margin: 7.407vh;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    @keyframes rotate {
      from {
        transform: rotateX(70deg);
      }
      to {
        transform: rotateX(0deg);
      }
    }

    img {
      width: 100%;
      animation: rotate 3s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }
  }
}
</style>