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

<template>
  <div class="map">
    <div class="back"></div>
    <div class="security-days">
      <div class="text">安全天数:</div>
      <div class="num">
        <span class="font-num">{{ safeDay }}</span>
        <span class="unit">天</span>
      </div>
    </div>
    <div class="tab-box" v-if="currentMode == 'NX'">
      <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="name-box" v-if="currentMode != 'NX'">
      <div class="name-box-title" @click="onBackStation">
        {{ currentTitle }}
      </div>
      <div class="name-box-period" v-show="currentPeriod != 'ZERO'">
        <span class="name-box-period-label">{{ textType }}：</span>
        <span class="name-box-period-value"
          >{{ currentName }}{{ currentPeriod }}</span
        >
      </div>
    </div>
    <div class="return" @click="backMap('0', '全部')" v-show="mapIndex != -1">
      <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"
        :xtData="xtMap"
        @clickLabel="clickLabel"
      ></SvgMapNX>

      <!-- 麻黄山风电场 -->
      <MHSFDC
        v-if="mapName === 'MHS_FDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></MHSFDC>

      <!-- 香山风电场 -->
      <XSFDC
        v-if="mapName === 'XS_FDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></XSFDC>

      <!-- 牛首山风电场 -->
      <NSSFDC
        v-if="mapName === 'NSS_FDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></NSSFDC>

      <!-- 青山风电场 -->
      <QSFDC
        v-if="mapName === 'QS_FDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></QSFDC>

      <!-- 石板泉风电场 -->
      <SBQFDC
        v-if="mapName === 'SBQ_FDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></SBQFDC>

      <!-- 马场湖 -->
      <MCHGDC
        v-if="mapName === 'MCH_GDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></MCHGDC>

      <!-- 大武口 -->
      <DWKGDC
        v-if="mapName === 'DWK_GDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></DWKGDC>

      <!-- 平罗 -->
      <PLGDC
        v-if="mapName === 'PL_GDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></PLGDC>

      <!-- 宣和 -->
      <XHGDC
        v-if="mapName === 'XH_GDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></XHGDC>

      <!-- 海子井 -->
      <HZJGDC
        v-if="mapName === 'HZJ_GDC'"
        :data="sourceMap"
        @clickFj="clickFj"
        @changePeriod="changePeriod"
      ></HZJGDC>
    </div>
  </div>
</template>

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

// 麻黄山风电场
import MHSFDC from "./map/MHS_FDC.vue";
// 香山风电场
import XSFDC from "./map/XS_FDC.vue";
// 牛首山风电场
import NSSFDC from "./map/NSS_FDC.vue";
// 青山风电场
import QSFDC from "./map/QS_FDC.vue";
// 石板泉风电场
import SBQFDC from "./map/SBQ_FDC.vue";

// 马场湖
import MCHGDC from "./map/MCH_GDC.vue";
// 大武口
import DWKGDC from "./map/DWK_GDC.vue";
// 平罗
import PLGDC from "./map/PL_GDC.vue";
// 宣和
import XHGDC from "./map/XH_GDC.vue";
// 海子井
import HZJGDC from "./map/HZJ_GDC.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,
    XSFDC,
    NSSFDC,
    QSFDC,
    SBQFDC,
    MCHGDC,
    DWKGDC,
    PLGDC,
    XHGDC,
    HZJGDC,
    SvgIcon,
  },
  props: {
    wpId: {
      type: String,
      default: "0",
    },
    day: {
      type: String,
      default: "---",
    },
    data: {
      type: Object,
      default: () => {},
    },
    xtData: {
      type: Object,
      default: () => {},
    },
  },

  mounted() {
    this.fcId = this.wpId;
    this.safeDay = this.day;
    this.sourceMap = this.data;
    this.xtMap = this.xtData;
  },
  // 数据
  data() {
    return {
      textType: "期次",
      fcId: "",
      safeDay: "",
      showType: "all",
      sourceMap: {},
      mapIndex: -1,
      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"),
      nxmap: true,
      mapName: "nx",
      currentMode: "NX",
      currentTitle: "青山风电场",
      currentName: "麻黄山",
      currentPeriod: "一期",
    };
  },
  emits: {
    onEnter: null,
    onBack: null,
  },
  // 函数
  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("mapClicks", wpId, this.tabs[index].text);
    },
    backMap(wpId, planBtnName) {
      this.activeTab = 0;
      this.currentMode = "NX";
      this.mapName = "nx";
      this.mapIndex = -1;
      this.$store.dispatch("changeTqmapName", "");
      this.$emit("mapClickBack", wpId, planBtnName);
    },
    clickLabel(wpId, planBtnName) {
      this.mapName = wpId;
      this.currentTitle = planBtnName;
      this.mapIndex = 1;
      this.$emit("mapClick", wpId, planBtnName);
    },
    clickFj(wpId, planBtnName, textType) {
      this.$emit("mapClick", wpId, planBtnName);
    },
    changePeriod: function (name, period, textType) {
      if (textType) {
        this.textType = "期次";
      } else {
        this.textType = "线路";
      }
      this.currentName = name;
      this.currentPeriod = period;
      this.currentMode = "SUB";
    },
    // 返回当前场站
    onBackStation() {
      this.currentPeriod = "ZERO";
      this.$emit("backStation");
    },
  },
  watch: {
    wpId(res) {
      this.fcId = res;
    },
    day(res) {
      this.safeDay = res;
    },
    data(res) {
      this.sourceMap = res;
    },
    xtData(res) {
      this.xtMap = res;
    },
  },
};
</script>

<style lang="less">
.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;
      }
    }
  }

  .name-box {
    margin: 1.852vh;
    display: inline-block;
    z-index: 2;
    position: relative;

    .name-box-title {
      font-size: 2.222vh;
      font-weight: 400;
      color: #ffffff;
      line-height: 1;
      cursor: pointer;
    }

    .name-box-period {
      margin-top: 2.222vh;
      .name-box-period-label,
      .name-box-period-value {
        font-size: 1.481vh;
        font-weight: 400;
        line-height: 1;
      }

      .name-box-period-label {
        color: #fefefe;
      }

      .name-box-period-value {
        color: #05bb4c;
      }
    }
  }

  .tab-box {
    margin: 1.852vh 2.778vh;
    display: inline-block;
    z-index: 2;
    position: relative;

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

      &.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: 12px;
        margin-top: 2px;
      }
    }
  }

  .return {
    position: absolute;
    display: flex;
    z-index: 2;
    align-items: center;
    top: 0;
    right: 16px;
    font-size: @fontsize-l;
    color: fade(@white, 80);
    cursor: pointer;
    border: 1px solid transparent;
    padding: 6px 16px;
    .svg-icon {
      margin-right: 0.7407vh;
      svg {
        transform: rotate(90deg);
        use {
          transition: all 0.3s;
        }
      }
    }

    transition: all 0.3s;

    &:hover {
      color: @green;
      border: 1px solid @green;

      .svg-icon {
        svg {
          use {
            fill: @green;
          }
        }
      }
    }
  }

  .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);
    width: 100%;
    // height: calc(100% - 14.815vh);
    height: 100%;
    // margin: 7.407vh 0;
    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>