wanda-bm-guide/src/views/Device/index.vue

<template>
  <div class="device">

    <Dnav
      @handleEmit="handleEmit"
      :routerName="routerName"
    />

    <Modal
      :obj="obj"
      :routerName="routerName"
      @handlerouterName="handlerouterName"
    />
    <div class="baseimg">
      <img
        class="floor"
        :src="require(`../../assets/images/device/${src}.png`)"
        alt="bg"
      />
      <!-- 机房 -->
      <div
        v-show="src == 'B2'"
        class="basebtn"
        @click="handleModal"
      >
        <!-- <img
          src="../../assets/images/device/B2-hover.png"
          alt=""
        > -->
      </div>
    </div>
    <img
      class="tip"
      :src="require(`../../assets/images/device/floor${src}.png`)"
      alt=""
    />
    <!--楼层分布-->
    <div class="floor-switch">
      <div class="floor-switch-btn">
        <div
          v-show="type == 'Fire'"
          class="fire-legend"
        >
          <img
            class="legend"
            @click="isLegendDetailShow = !isLegendDetailShow"
            src="../../assets/images/device/legend-fire.png"
          />
        </div>

        <div>
          <img
            class="legend"
            @click="isLegendShow = !isLegendShow"
            src="../../assets/images/icon_legend.png"
          />
        </div>

        <ul>
          <li><img src="../../assets/images/icon_arrow.png" /></li>
          <li
            v-for="(item, index) in floorLists.data"
            :key="index"
            :class="{ active: index === floorLists.curIndex }"
            @click="handleTab(item.name, index, item.type)"
          >
            {{ item.name }}
          </li>
          <li>
            <img
              src="../../assets/images/icon_arrow.png"
              class="icon-arrow-down"
            />
          </li>
        </ul>
        <div
          class="map"
          v-show="isLegendShow"
          :style="{ top: type == 'Fire' ? '80px' : '0px' }"
        >
          <img
            :src="require(`../../assets/images/device/${ledgentSrc}.png`)"
            alt=""
          />
        </div>

        <div
          class="map1"
          v-show="isLegendDetailShow"
        >
          <img
            src="../../assets/images/device/legend-detail.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div
      class="mask"
      v-show="obj.show"
    ></div>
  </div>
</template>
<script>
import Dnav from "./Dnav";
import Modal from "./Modal";
export default {
  props: {
    routerName: {
      type: String
    }
  },
  name: "device",
  mounted() {
    // console.log(this.$props.routerName, 111);
  },
  data() {
    return {
      obj: {
        show: false,
        src: "main-list"
      },
      isLegendShow: false,
      isFireLegend: false,
      isLegendDetailShow: false,
      src: "B2",
      ledgentSrc: "legend-left",
      floorLists: {
        data: [
          {
            name: "F2",
            type: ""
          },
          {
            name: "F1",
            type: ""
          },
          {
            name: "B1",
            type: ""
          },
          {
            name: "B2",
            type: ""
          }
        ],
        curIndex: 3
      },
      type: "General"
    };
  },
  methods: {
    handleEmit(val) {
      // console.log(val)
      if (val.src.includes("Fire")) {
        const data = [
          {
            name: "F2",
            type: "fire"
          },
          {
            name: "F1",
            type: "fire"
          },
          {
            name: "B1",
            type: "fire"
          },
          {
            name: "B2",
            type: "fire"
          }
        ];
        this.$set(this.floorLists, "data", data);
        this.handleTab("B2", 3, "fire");
        this.type = "Fire";
        this.ledgentSrc = "legend-fire-left";
        this.isLegendShow = false;
        this.isLegendDetailShow = false;
      } else if (val.src.includes("General")) {
        const data = [
          {
            name: "F2",
            type: ""
          },
          {
            name: "F1",
            type: ""
          },
          {
            name: "B1",
            type: ""
          },
          {
            name: "B2",
            type: ""
          }
        ];

        this.$set(this.floorLists, "data", data);
        this.handleTab("B2", 3, "");
        this.type = "General";
        this.ledgentSrc = "legend-left";
        this.isLegendShow = false;
        this.isLegendDetailShow = false;
      } else {
        // console.log(1111)
        this.obj = val;
      }
    },
    handleTab(name, index, type) {
      this.floorLists.curIndex = index;
      if (name.includes("F1") || name.includes("B2")) {
        this.src = type + name;
      }
    },
    handleModal() {
      this.obj = {
        show: true,
        src: "room-layout",
        istab: true
      };
    },
    handlerouterName(val) {
      this.$emit("handlerouterName", val);
      // console.log(val);
      // this.$emit("handlerouterName", val);
      // this.$set(this.obj, "show", false);
    }
  },
  components: {
    Dnav,
    Modal
  },
  watch: {
    routerName: {
      immediate: true,
      handler: function(val) {
        if (val == "device1") {
          this.handleModal();
        } else {
          this.obj = {
            show: false,
            src: "room-layout",
            istab: true
          };
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.device {
  width: 100%;
  height: 100%;
  // height: 960px;
  // border: 1px solid red;
}
.baseimg {
  padding-top: 120px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // z-index: 20000;
  .basebtn {
    position: absolute;
    width: 304px;
    height: 121px;
    top: 145px;
    left: 649px;
    cursor: pointer;
    &:hover {
      background: url("../../assets/images/device/B2-hover.png");
    }
  }
}
.floor-switch {
  position: relative;
  color: #fff;
  padding-top: 94px;
  flex: 1;

  .floor-switch-image {
    position: relative;
    right: 134px;
    &.floor-switch-image-b2 {
      right: 116px;
    }
  }

  .floor-switch-btn {
    position: absolute;
    top: 94px;
    right: 20px;
    width: 61px;

    ul {
      border: 1px solid rgb(22, 73, 206);
      border-radius: 4px;
      background-color: rgba(22, 73, 206, 0.22);
      margin-top: 11px;

      li {
        margin: 0 auto;
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        cursor: pointer;

        &.active {
          border: 1px solid rgb(0, 174, 232);
          border-radius: 4px;
          background-color: rgba(0, 174, 232, 0.502);
        }

        .icon-arrow-down {
          transform: rotate(180deg);
        }
      }
    }
    .fire-legend {
      margin-bottom: 11px;
    }
    .map {
      position: absolute;
      right: 80px;
      top: 0;
    }
    .map1 {
      position: absolute;
      right: 80px;
      top: 0;
    }
    .legend {
      cursor: pointer;
    }
  }
}
.tip {
  width: 256px;
  height: 40px;
  position: fixed;
  top: 162px;
  left: 516px;
}
.floor {
  // height: 695px;
}
.mask {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1100;
  opacity: 0.8;
}
</style>