taicangPopulation2/src/views/components/xiaoqu/building.vue

<template>
  <transition>
    <div class="building-container" v-show="show" ref="houseItem">
      <div class="building-floor">
        <div
          class="floor-number"
          v-for="(item, index) in info.floor"
          :key="item"
        >
          {{ info.floor - index }} 层
        </div>
      </div>
      <div class="building-house-container">
        <div class="building-name">{{ info.deptname }}{{ info.name }}</div>
        <div class="house" v-for="(item, index) in list" :key="index">
          <colorCell
            :item="house"
            v-for="(house, houseIndex) in item"
            :key="index + houseIndex"
            @clickHouse="clickHouse(house)"
          ></colorCell>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from "vuex";
import { getNum } from "@/api/taicangpop/data";
import { getBuilding } from "@/api/taicangpop/building";
import colorCell from "./ColorCell/index.vue";
export default {
  data() {
    return {
      show: false,
      info: {},
      list: [],
    };
  },
  computed: {
    ...mapGetters([
      "queryParamsXiaoqu",
      "leftColor",
      "rightTopColor",
      "houseItem",
    ]),
  },
  components: {
    colorCell,
  },
  watch: {
    "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
      if (newValue) {
        this.getBuildingInfo();
        this.getBuildingList();
      } else {
        this.show = false;
      }
    },
  },
  created() {},
  methods: {
    clickHouse(item) {
      console.log(item);
      this.$store.commit("SET_BUILDING_WIDTH", {
        id: item.id,
        buildingId: item.building_id,
        deptId: item.dept_id,
        buildingWidth:
          this.houseItem.buildingWidth > 0
            ? this.houseItem.buildingWidth
            : window.innerWidth - this.$refs.houseItem.offsetWidth,
        name: item.name,
        color: item.color,
        isD: item.is_d,
        isJ: item.is_j,
        isK: item.is_k,
        isx: item.is_x,
        typename: item.typename,
        leftColor: item.leftColor,
        rightTopColor: item.rightTopColor,
      });
    },
    async getBuildingInfo() {
      let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
      this.info = info.data;
      this.show = true;
    },
    async getBuildingList() {
      let res = await getNum({
        buildingId: this.queryParamsXiaoqu.buildingId,
      });

      console.log(res.data.filter((item) => item.name == "101室"));

      this.list = this.filterFloor(res.data);

      console.log(this.list);
    },
    // 颜色处理
    handleColor(item) {
      if (!item.color) {
        item.leftColor = "#7b75ff";
        item.rightTopColor = "#7b75ff";
        return;
      }
      for (let key in this.leftColor) {
        if (item.color == key) {
          item.leftColor = this.leftColor[key];
          item.rightTopColor = this.rightTopColor[key];
        }
      }

      return item;
    },
    filterFloor(list) {
      const categorizedRooms = {};
      list.forEach((room) => {
        room.name = room.name.replace("室", "");
        const floor = (parseInt(room.name, 10) / 100) | 0;
        if (!categorizedRooms[floor]) {
          categorizedRooms[floor] = [];
        }
        categorizedRooms[floor].push(this.handleColor(room));
      });

      const totalFloors = this.info.floor;
      const sortedRoomsByFloor = [];
      for (let floor = 1; floor <= totalFloors; floor++) {
        const roomsForFloor = (categorizedRooms[floor] || []).sort(
          (a, b) => a.name - b.name
        );

        sortedRoomsByFloor.push(roomsForFloor);
      }

      return sortedRoomsByFloor.reverse();
    },
  },
};
</script>

<style lang="scss" scoped>
.building-container {
  position: absolute;
  z-index: 100;
  top: 75px;
  right: 0;
  height: calc(100% - 75px);
  display: flex;
  overflow-y: auto;
  background: #113666;
  border: 1px solid #2d6cad;
  .building-floor {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 85px;
    background: linear-gradient(
      rgba(149, 18, 58, 0.1),
      #95123a,
      rgba(149, 18, 58, 0.1)
    );
    padding-top: 85px;
    .floor-number {
      height: 23px;
      width: 50px;
      text-align: center;
      line-height: 23px;
      margin-bottom: 6px;
      font-size: 14px;
      color: #fff;
      font-family: "DIN-Regular-2.otf";
    }
  }
  .building-house-container {
    padding-top: 85px;
    position: relative;
    min-width: 135px;
    // max-width: 700px;
    // overflow-x: auto;
    // overflow-y: hidden;
    height: 100%;
    background: url("~@/assets/images/ui/img_home@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    .building-name {
      position: absolute;
      left: 130px;
      top: 25px;
      min-width: 135px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 18px;
      color: #f0fffc;
      font-family: "BY";
      background: url("~@/assets/images/ui/img_number_bg@2x.png");
      background-size: 100% 100%;
      padding: 0 10px;
    }
    .house {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin-bottom: 6px;
      height: 23px;
      .floor-item {
        cursor: pointer;
        margin-right: 6px;
        height: 100%;
        width: 60px;
        text-align: center;
        line-height: 23px;
        color: #fff;
        font-size: 14px;
      }
      & > .floor-item:first-child {
        margin-left: 8px;
      }
    }
  }
  .building-house-container .house:last-child {
    margin-bottom: 0;
  }
}

/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>