据房间Id是否存在，判断当前房间是否到期且实时更改颜色

本文链接：https://blog.csdn.net/m0_61911999/article/details/132575587

重点代码展示：

<template>
  <el-col style="width: 100%;height: 100%;">
    <el-col :span="20">
      <el-card class="room_info">
        <avue-data-icons :option="option"></avue-data-icons>
      </el-card>
      <div style="width: 100%">
        <div v-for="it in roomlist" :key="it.floorId">
          <div v-if="it.children.length > 0">
            <div class="floorHeader">
              <div>{{ it.locationName }}/{{ it.name }}</div>
              <div>{{ it.children.length }}个房间</div>
            </div>
            <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
              <el-card class="room_card" v-for="item in it.children" :key="item.houseId"
                :style="{borderColor:expiration.includes(item.houseId)?'red':'#fff',backgroundColor:item.huoseState == 1?'#6aec6a':'#fff'}">
                <div class="cards">
                  <div class="head_card">
                    <el-tooltip class="item" :content="item.locationName + '|' + item.towerName" placement="top-start">
                      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.houseName }}
                      </div>
                    </el-tooltip>
                  </div>
                  <!-- 房间号 -->
                  <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                    {{ item.huoseNo }}
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-col>
</template>
<script>
  import API from '@/components/common/newApi';
  export default {
    data() {
      return {
        locationId: '',
        towerId: '',
        floorId: '',
        expiration: [], //房间到期数据
    },
    mounted() {
      this.getExpirationReminder()
    },
    methods: {
      //获取即将到期的房间
      getExpirationReminder() {
        let param = {
          locationId: '',
          towerId: '',
          floorId: '',
          huoseNo: '',
          houseName: ''
        }
        API.expirationReminderInfo(param).then(res => {
          if (res.data.code == 0) {
            this.expiration = res.data.data.map(item => {
              return item.houseId
            });
          }
        })
      },
     
    }
  };
</script>

实现原理及说明：

1、通过getExpirationReminder() 方法中对接口返回的数据进行处理；

首先，根据 res.data.data 获取到接口返回的数据数组。然后使用 map() 方法对数组进行遍历，对每个元素执行回调函数，并将返回值组成一个新的数组。从上述代码可知，回调函数是 (item) => item.houseId，代表对每个元素 item 提取出 houseId 属性的值作为新数组的元素。
 this.expiration = res.data.data.map(item => {
      return item.houseId
 });
       最终，将提取出的 houseId 组成的新数组赋值给 this.expiration，用于存储即将到期的房间的 houseId 值。

2、样式的设置：

边框颜色：

  borderColor 属性根据 expiration.includes(item.houseId) 的结果来决定边框颜色。expiration.includes(item.houseId) 表示判断 this.expiration 数组中是否包含当前房间的 houseId 值（据后端返回到期的房间ID，若返回了到期的房间ID，边框将会变成红色），如果包含则返回 true，边框颜色为红色；若不包含则返回 false，边框颜色为白色。

背景颜色：

  backgroundColor 属性根据 item.huoseState == 1 的结果来决定背景颜色。item.huoseState 表示房间的状态，如果状态为 1，则背景颜色为绿色（#6aec6a），否则背景颜色为白色（#fff）