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
        ref="build"
        class="building-house-container"
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-text="加载中"
      >
        <div class="building-name">{{ info.deptname }}{{ info.name }}</div>
        <div class="house" v-for="(item, index) in groupedRooms" :key="index">
          <colorCell
            :active="currentIndex == house.id ? 'activeCell' : ''"
            :isClcik="true"
            :item="house"
            v-for="(house, houseIndex) in item"
            :key="houseIndex"
            @clickHouse="clickHouse(house, house.id)"
          ></colorCell>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from "vuex";
import { getNumNew } from "@/api/taicangpop/data";
import { getBuilding } from "@/api/taicangpop/building";
import colorCell from "./ColorCell/index.vue";
import { v4 as uuidv4 } from "uuid";
export default {
  data() {
    return {
      loading: true,
      show: false,
      info: {},
      list: [],
      currentIndex: 0,
    };
  },
  computed: {
    ...mapGetters([
      "queryParamsXiaoqu",
      "leftColor",
      "rightTopColor",
      "houseItem",
      "refreshBuild",
    ]),
    groupedRooms() {
      if (this.list.length == 0) return;

      if (this.info.deptname == "嘉华园") {
        // 对房间数据进行排序
        const sortedRooms = this.list.sort((a, b) => {
          a.keyId = uuidv4();
          b.keyId = uuidv4();
          a = this.handleColor(a);
          b = this.handleColor(b);
          // 提取房间号的后半部分进行比较
          let roomA = parseInt(a.name.split("-")[1]);
          let roomB = parseInt(b.name.split("-")[1]);
          return roomA - roomB;
        });
        return [sortedRooms];
      } else {
        // 初始化每层楼的数组
        let floors = Array.from({ length: this.info.floor }, () => []);

        // 遍历房间数据
        this.list.forEach((room) => {
          // 提取房间号前几位作为楼层号
          let floor = (parseInt(room.name) / 100) | 0;
          room.keyId = uuidv4();
          // 将房间加入对应楼层数组
          if (floor > 0 && floor <= this.info.floor) {
            floors[floor - 1].push(this.handleColor(room));
          }
        });

        // 对每层楼的房间进行排序
        floors.forEach((floorRooms) => {
          floorRooms.sort((a, b) => parseInt(a.name) - parseInt(b.name));
        });
        // console.log(floors);
        return floors.reverse();
      }
    },
  },
  components: {
    colorCell,
  },
  watch: {
    "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
      if (newValue) {
        this.show = true;
        this.getBuildingInfo();
        this.getBuildingList();
      } else {
        this.reset();
        this.show = false;
      }
    },
    "houseItem.id"(newValue, oldValue) {
      if (!newValue) this.currentIndex = 0;
    },
    refreshBuild(newValue, oldValue) {
      if (newValue > 1) {
        this.getBuildingList();
      }
    },
  },
  created() {},
  methods: {
    reset() {
      // this.show = false;
      this.info = {};
      this.list = [];
      this.currentIndex = 0;
    },
    clickHouse(item, keyId) {
      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,
        keyId: keyId,
      });
      this.currentIndex = keyId;
    },
    async getBuildingInfo() {
      let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
      this.info = info.data;
    },
    async getBuildingList() {
      this.loading = true;
      this.$refs.build.scrollIntoView({
        behavior: "smooth", // 平滑滚动
      });
      let res = await getNumNew({
        buildingId: this.queryParamsXiaoqu.buildingId,
      });
      this.currentIndex = this.houseItem.keyId;
      this.list = res.data;
      this.loading = false;
      this.$store.commit("SET_REFRESH", 1);
    },

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

      return item;
    },
  },
};
</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: 300px;
    // 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: 90px;
      top: 30px;
      min-width: 170px;
      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;
      }
    }
    .house:hover {
      background: #ffb82f;
      // padding: 2px 0;
    }
  }
  .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>