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

重点代码展示:

<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


 效果图展示:

        绿色的表示空闲的房间,红色边框的表示居住即将到期,白色的表示在租房间

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/237751.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

手动搭建koa+ts项目框架(路由篇)

文章目录 前言一、安装koa-router二、引入koa-router并使用三、优化路由配置总结如有启发&#xff0c;可点赞收藏哟~ 前言 本文基于手动搭建koats项目框架&#xff08;基础篇&#xff09;配置接口路由 一、安装koa-router npm i -S koa-router二、引入koa-router并使用 ./sr…

Citespace、vosviewer、R语言的文献计量学可视化分析

文献计量学是指用数学和统计学的方法&#xff0c;定量地分析一切知识载体的交叉科学。它是集数学、统计学、文献学为一体&#xff0c;注重量化的综合性知识体系。特别是&#xff0c;信息可视化技术手段和方法的运用&#xff0c;可直观的展示主题的研究发展历程、研究现状、研究…

Redis 五大经典业务问题

Redis 五大经典业务问题 一 缓存穿透 缓存穿透是指当请求的数据既不在缓存中也不存在于数据库中时&#xff0c;请求会直接穿透缓存层&#xff0c;到达数据库层。这通常是由于恶意攻击或者程序错误造成的&#xff0c;比如攻击者故意请求不存在的大量数据&#xff0c;导致缓存不…

【AI】ChatGLM3-6B上手体验

之前写过ChatGLM2-6B大语言模型的部署安装文档&#xff0c;现在ChatGLM模型已经更新迭代到第三代了&#xff0c;从官方公布的数据来看&#xff0c;模型的能力是得到了进一步的增强。 这次写文章主要是来记录一下使用过程&#xff0c;方便回头查看。 ChatGLM3-6B官方的视频教程…

【华为数据之道学习笔记】3-9元数据治理面临的挑战

华为在进行元数据治理以前&#xff0c;遇到的元数据问题主要表现为数据找不到、读不懂、不可信&#xff0c;数据分析师们往往会陷入数据沼泽中&#xff0c;例如以下常见的场景。 某子公司需要从发货数据里对设备保修和维保进行区分&#xff0c;用来不对过保设备进行服务场景分析…

智物发布MT6877平台无线AR智能眼镜参考设计,推动下一代无线AR发展

随着增强现实(AR)技术的不断发展&#xff0c;有线AR眼镜在连接和使用方面存在一些限制。为了解决这些问题&#xff0c;无线AR智能眼镜的推出势在必行。 新一代无线AR智能眼镜采用了天玑900&#xff08;MT6877&#xff09;平台作为参考设计&#xff0c;搭载了2.4GHz的八核处理器…

阻抗控制实现更快更精准(跟踪精度,较小且稳定的接触力)

阻抗控制是一种模拟人类肌肉阻抗特性的控制方法&#xff0c;可以实现更快更精准的机器人运动控制&#xff0c;同时具有较小的接触力和稳定的跟踪精度。 Kd 10; Bd 5 ; Md 2; 1e5/(0.0005*s^25*s1) 5e4/(0.1*s^21*s1) 1e4/(0.1*s^21*s1) 增益较小时容易跟踪性能不足&#xf…

0011Java安卓程序设计-ssm基于移动端的家庭客栈管理系统

文章目录 **摘** **要**目 录系统实现5.1小程序端5.2管理员功能模块开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘 要 网络的广泛应用给生活带来了十分的便利。所以把家庭客栈管理与现在网络相结合&#xff0c;利用java…

Linux实用操作篇-下篇

Linux实用操作篇-上篇&#xff1a;Linux实用操作-上篇-CSDN博客 一、网络传输 1.1 ping命令 网络是否可联通 可以通过ping命令&#xff0c;检查指定的网络服务器是否是可联通状态 语法: ping [-c num] ip或主机名 选项&#xff1a;-c&#xff0c;检查的次数&#xff0c;…

科技提升安全,基于YOLOv5系列模型【n/s/m/l/x】开发构建商超扶梯场景下行人安全行为姿态检测识别系统

在商超等人流量较为密集的场景下经常会报道出现一些行人在扶梯上摔倒、受伤等问题&#xff0c;随着AI技术的快速发展与不断普及&#xff0c;越来越多的商超、地铁等场景开始加装专用的安全检测预警系统&#xff0c;核心工作原理即使AI模型与摄像头图像视频流的实时计算&#xf…

Springboot管理系统数据权限过滤——ruoyi实现方案

本文主要简述&#xff0c;Ruoyi框架使用的权限过滤实现方案&#xff0c;实现简单易懂。主要知识点有&#xff1a; 注解定义&#xff1b;面向切面编程&#xff0c;在执行有数据权限注解的方法之前获取用户组织权限&#xff0c;拼接到domain对象的params参数中&#xff1b; 1. …

市场全局复盘 20231208

一、板块成交额排名&#xff1a; 资金流入前三个板块K 线&#xff1a; 行业成交额排名&#xff1a; 个股资金流入排名&#xff1a; select 成交额排名 ,近日指标提示 ,短线主题 ,涨停分析,CODE,名称,DDE大单净量,现价,量比,连板天,周涨停,月涨停,年涨停天,连涨天,…

pycharm手动安装包

1.下载对应的包 TTS PyPI 2.手动解压&#xff0c;找到文件放到pycharm对应项目的lib文件夹中 以TTS包为例&#xff0c;找到下载并解压的包中的2个文件&#xff0c;一个名称一个info结尾 3.放到项目的lib文件夹中 eg&#xff1a;路径&#xff1b;C:\doc\myProject\speaker\venv…

ERROR: [BD 41-237] Bus Interface property FREQ_HZ does not match between

在自定义IP出现以上错误时可以通过双击模块clk属性 如果是灰色无法二次编辑时&#xff0c;在封装IP时&#xff0c;选择以下菜单

计算机循环神经网络(RNN)

计算机循环神经网络&#xff08;RNN&#xff09; 一、引言 循环神经网络&#xff08;RNN&#xff09;是一种常见的深度学习模型&#xff0c;适用于处理序列数据&#xff0c;如文本、语音、时间序列等。RNN通过捕捉序列数据中的时间依赖关系和上下文信息&#xff0c;能够解决很…

【人工智能 | 知识表示】问题规约法 谓词/符号逻辑,良好的知识表示是解题的关键!(笔记总结系列)

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

QEMU源码全解析 —— virtio(2)

接前一篇文章&#xff1a; 本文内容参考&#xff1a; 《趣谈Linux操作系统》 —— 刘超&#xff0c;极客时间 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 上一回对于virtio进行了简介&#xff0c;并说明了其基本原理以及框架。对…

在工作中灵活运用CHATGPT

问CHAT&#xff1a;基于微课技术的小学创新课堂教学模式开题&#xff0c;重要变更&#xff0c;侧重说明对照课题申请书、根据评议专家意见所作的研究计划调整 CHAT回复&#xff1a;在本研究项目的开题阶段&#xff0c;我们设想通过利用微课技术来提高小学创新课堂的教学质量。 …

外包干了3个月,技术退步明显

先说一下自己的情况。大专生&#xff0c;19年通过校招进入湖南某软件公司&#xff0c;干了接近3年的测试&#xff0c;今年年上旬&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01;而我已经在一个企业干了三年&#xff0c…

使用Mockjs模拟(假数据)接口(axios)

一、什么是MockJs Mock.js官网 Mock.wiki.git mock测试就是在测试过程中&#xff0c;对于某些不容易构造或者不容易获取的对象&#xff0c;用一个虚拟的对象来创建以便测试的测试方法。 二、安装mockjs npm install mockjs 三、 MockJs使用 简单使用&#xff1a; // 使用…
最新文章