当前位置: 首页 > news >正文

【实践功能记录6】表格列悬浮展示tooltip信息

需求描述:

鼠标悬浮在表格的IP字段上时,使用tooltip展示IP信息,如图:

1.封装根据IP展示信息的组件

请求接口获取IP信息,注意请求接口时防抖

<!-- 根据IP展示资产信息 -->
<template><div><el-tooltip placement="left" trigger="hover" :show-after="500"><template #content><div v-if="state.ipAssetLoading">loading</div><div v-else><!-- IP信息 --><div><div class="font-bold">{{ t('alertQuery.ipInfo') }}:</div><div>{{ t('alertQuery.ipInfo_ip') }}: {{ state.showIp }}</div><div>{{ t('alertQuery.ipInfo_address') }}: {{ state.showAssetInfo.ipAddressInfo }}</div></div><!-- 资产信息 --><template v-if="!_.isEmpty(state.showAssetInfo.ipAssetInfo)"><el-divider></el-divider><div class="font-bold">{{ t('alertQuery.assetInfo') }}:</div><div v-for="item of state.showAssetInfo.ipAssetInfo" :key="item.key"><div>{{ item.label }}: {{ item.value }}</div></div></template></div></template><el-link type="primary" @mouseenter="initIpAsset(state.ipValue)" :underline="false">{{ state.ipValue }}</el-link></el-tooltip></div>
</template><script setup lang="ts">
import _ from '@lodash';
import { initIpInfoLink } from '@/utils/util';
import { getIpInfo } from '@/api/common';
import type { AssetInfo } from '@/api/common';const { t } = useI18n();
const state = reactive({ipAssetLoading: false,showAssetInfo: {} as AssetInfo,ipValue: '',showIp: '',
});
const props = defineProps<{ rowValue: string }>();watch(() => props.rowValue,() => {state.ipValue = props.rowValue;},{ immediate: true },
);// 获取IP地址及资产信息
const searchInfoDebounce = _.debounce((_ip) => getIpAsset(_ip), 500);
// 获取IP
async function initIpAsset(ip: string) {state.showIp = await initIpInfoLink(ip);searchInfoDebounce(state.showIp);
}
async function getIpAsset(ip: string) {try {state.ipAssetLoading = true;const res = await getIpInfo(ip);if (res?.code) throw new Error(res?.message);state.showAssetInfo.ipAddressInfo = res?.data?.ipAddressInfo ?? '';state.showAssetInfo.ipAssetInfo = res?.data?.ipAssetInfo ?? [];} catch (error) {if (error === 'cancel' || error?.code === RESPONSE_CODE.CANCEL) return;console.log(`[log] - getIpInfo - error:`, error);} finally {state.ipAssetLoading = false;}
}
</script>

获取IP信息的方法

// 获取IP
export async function initIpInfoLink(ip: string) {if (!ip) return '';ip = _.escape(ip);let _ip = ip;// 兼容特殊的这种写法 192.168.2.101(192.168.2.101)if (_ip.includes('(')) {_ip = _ip.substr(0, _ip.indexOf('('));}// IP:端口格式if (_ip.includes(':')) {_ip = _ip.substr(0, _ip.indexOf(':'));}return _ip;
}
2.请求接口的文件

为了防止接口重复请求时请求被中断,在请求接口的时候加上时间Date.now()

// 通用接口
import type { ResDto } from '@/utils/request';// 根据IP查询资产信息
export interface AssetInfo {ipAssetInfo: { label: string; value: string; key: string }[];ipAddressInfo: string;
}
export function getIpInfo(ip: string): ResDto<AssetInfo> {return SecRequest({method: 'POST',url: '/test/alert/ip?time=' + Date.now(),data: { ip },});
}
3.在表格列中调用方法

首先判断表格的字段是否符合IP格式,符合再去调用封装好的组件

<el-table-columnv-for="col of appState.headList":key="col.value":label="col.label":prop="col.value"align="center"><template #default="scope"><!--添加ip悬浮查看信息 --><template v-if="isFieldIP(scope.row[col?.value])"><ShowIpAsset :rowValue="scope.row[col?.value] ?? ''"></ShowIpAsset></template></template>
</el-table-column>// 导入组件
import ShowIpAsset from '@/components/VIpAsset/ShowIpAsset.vue';
// 判断字段内容是否符合IP格式
import { isFieldIP } from '@/utils/validate';

判断是否为IP字段

// 判断是否为IP字段
export function isFieldIP(ip: string) {ip = _.escape(ip);let _ip = ip;if (_ip?.includes(':')) {_ip = _ip.substr(0, _ip.indexOf(':'));}const reg =/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;return reg.test(_ip);
}

相关文章:

【实践功能记录6】表格列悬浮展示tooltip信息

需求描述&#xff1a; 鼠标悬浮在表格的IP字段上时&#xff0c;使用tooltip展示IP信息&#xff0c;如图&#xff1a; 1.封装根据IP展示信息的组件 请求接口获取IP信息&#xff0c;注意请求接口时防抖 <!-- 根据IP展示资产信息 --> <template><div><el-…...

AI论文速读 | 2024[SIGIR]基于大语言模型的下一个兴趣点推荐

论文标题&#xff1a;Large Language Models for Next Point-of-Interest Recommendation 作者&#xff1a;Peibo Li ; Maarten de Rijke ; Hao Xue &#xff08;薛昊&#xff09;; Shuang Ao ; Yang Song ; Flora D. Salim 机构&#xff1a;新南威尔士大学(UNSW)&#xff0c…...

Rust 实战丨通过实现 json! 掌握声明宏

在 Rust 编程语言中&#xff0c;宏是一种强大的工具&#xff0c;可以用于在编译时生成代码。json! 是一个在 Rust 中广泛使用的宏&#xff0c;它允许我们在 Rust 代码中方便地创建 JSON 数据。 声明宏&#xff08;declarative macros&#xff09;是 Rust 中的一种宏&#xff0…...

vue+elementUI实现在表格中添加输入框并校验的功能

背景&#xff1a; vue2elmui 需求&#xff1a; 需要在一个table中添加若干个输入框&#xff0c;并且在提交时需要添加校验 思路&#xff1a; 当需要校验的时候可以考虑添加form表单来触发校验&#xff0c;因此需要在table外面套一层form表单&#xff0c;表单的属性就是ref…...

为国产加油:“缺芯少屏”暂缓,另一领域,也要加把劲

说起咱中国之前的“缺芯少屏”&#xff0c;真的是让人挺闹心的。 不过呢&#xff0c;为了改变这个状况&#xff0c;咱们的工程师们可是费了不少劲儿&#xff0c;辛辛苦苦努力了数十年。现在好了&#xff0c;咱们也迎来了柔性屏的时代。 柔性屏 说起来&#xff0c;在触摸屏或者…...

【Qnx】Qnx coredump解析

Qnx coredump解析 coredump文件 Qnx运行的程序崩溃时&#xff0c;会生成coredump文件。 默认情况下这些文件默认会保存在/var/log/*.core 文件中。 解析coredump文件&#xff0c;可以帮忙加快分析程序崩溃的原因&#xff0c;比如了解崩溃的堆栈。 通常可以使用gdb和coreinfo…...

超级签名源码/超级签/ios分发/签名端本地linux服务器完成签名

该系统完全在linux下运行&#xff0c;不存在使用第三方收费工具&#xff0c;市面上很多系统都是使用的是第三方收费系统&#xff0c;例如&#xff1a;某心签名工具&#xff0c;某测侠等&#xff0c;不开源而且需要每年交费&#xff0c;这种系统只是在这些工具的基础上套了一层壳…...

RocketMQ在Centos7系统上单机部署

最近因为一些信创问题&#xff0c;要将RabbitMQ替换为RocketMQ&#xff0c;因此在此分享一些RocketMQ在Centos7系统上单机部署相关过程。 优缺点 RocketMQ的优点&#xff1a; 性能优越&#xff1a;RocketMQ在处理大量消息时&#xff0c;性能优于RabbitMQ。当面临每秒数万到数…...

Vue37-非单文件组件

一、组件的两种编写形式&#xff1a; 非单文件组件&#xff1b;单文件组件。 二、创建一个组件 2-1、组件中的el 组件中不写el&#xff0c;不说为谁服务。 2-2、组件中的data 因为对象形式&#xff0c;多处复用的话&#xff0c;有引用关系&#xff0c;改一处&#xff0c;另一…...

CSS实现经典打字小游戏《生死时速》

&#x1f33b; 前言 CSS 中有这样一个模块&#xff1a;Motion Path 运动模块&#xff0c;它可以使元素按照自定义的路径进行移动。本文将为你讲解这个模块属性的使用&#xff0c;并且利用它实现我小时候电脑课经常玩的一个打字游戏&#xff1a;金山打字的《生死时速》。 &…...

推箱子-小游戏

学习目标&#xff1a; 巩固Java基础&#xff0c;数据类型、二维数组、条件语句等&#xff1b; 效果展示&#xff1a;...

AI数字人的开源解决方案

目前&#xff0c;国内外已经涌现出一些优秀的数字人开源解决方案&#xff0c;这些解决方案为开发者提供了构建数字人应用的工具和基础设施。以下是一些比较知名的数字人开源解决方案。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1…...

java写一个验证码

生成验证码 内容&#xff1a;可以是小写字母&#xff0c;也可以是大写字母&#xff0c;还可以是数字 规则 长度为5 内容中是四位字母&#xff0c;1位数字。 其中数字只有1位&#xff0c;但是可以出现在任意的位置。 package User;import java.util.ArrayList; import jav…...

【星海随笔】ELK优化

ELS 再遇到大的日志文件的时候不会自动进行清理的,我们可以通过 logrotate 转储工具进行操作。 该命令是基于 Cron 实现,由系统执行,当然也可以手动进行执行例如 logrotate -f configfile# more /etc/logrotate.confweekly // 默认每一周执行一次rotate轮转工作 r…...

SQL Auto Increment

SQL Auto Increment 在关系型数据库中&#xff0c;自动增量&#xff08;Auto Increment&#xff09;是一个常见且实用的特性。它允许数据库自动为表中插入的新行分配唯一的标识符&#xff0c;通常用于主键字段。本文将深入探讨SQL中的自动增量功能&#xff0c;包括其工作原理、…...

网络安全练气篇——PHP编程语言基础

目录 PHP基础 一、PHP简介与环境搭建 什么是PHP&#xff1f; PHP环境安装 代码编辑选择 二、基本语法 PHP基本语法操作 PHP变量与输出 啥是常量? PHP注释 PHP单引号双引号声明 三、PHP表单 PHP表单 四、登录界面搭建与讲解 构建登陆页面 登陆页面端 服务器端…...

LabVIEW程序内存泄漏分析与解决方案

维护他人编写的LabVIEW程序时&#xff0c;若发现程序运行时间越长&#xff0c;占用内存越大直至崩溃&#xff0c;通常是内存泄漏导致的。本文从多角度分析内存泄漏的可能原因&#xff0c;包括数组和字符串处理、未释放的资源、循环中的对象创建等&#xff0c;并提供具体的解决方…...

JVM垃圾回收器介绍

Serial GC: 算法: 使用的是标记-清除算法。特点: 串行执行&#xff0c;适用于单CPU环境或较小的堆内存配置。在新生代和老年代的回收中都是单线程执行&#xff0c;因此在进行垃圾回收时会暂停所有应用线程&#xff08;Stop-The-World&#xff09;。 Parallel GC (也称为吞吐量优…...

subprocess隐藏cmd窗口

process subprocess.Popen(command, shellTrue, stdoutsubprocess.PIPE, stderrsubprocess.PIPE,creationflagssubprocess.CREATE_NO_WINDOW) 添加参数即可不显示cmd运行窗口 creationflagssubprocess.CREATE_NO_WINDOW...

编程前端看什么书比较好:深入解析与推荐

编程前端看什么书比较好&#xff1a;深入解析与推荐 在编程前端的学习道路上&#xff0c;书籍无疑是我们最宝贵的财富。一本好的书籍&#xff0c;不仅可以提供系统的知识体系&#xff0c;还能引导我们深入探索技术的奥秘。然而&#xff0c;面对市面上琳琅满目的前端书籍&#…...

Qwen3-TTS-12Hz-1.7B-Base应用场景:智能音箱多语种交互语音引擎升级

Qwen3-TTS-12Hz-1.7B-Base应用场景&#xff1a;智能音箱多语种交互语音引擎升级 重要提示&#xff1a;本文仅讨论技术实现方案&#xff0c;所有内容均基于公开技术文档和测试数据&#xff0c;不涉及任何政治敏感内容&#xff0c;完全符合内容安全规范。 1. 智能音箱语音交互的现…...

危废尾气治理厂家怎么选?CO超低排放技术与全场景危废焚烧烟气治理解决方案

随着我国危废处置行业监管体系持续完善&#xff0c;《危险废物焚烧污染控制标准》&#xff08;GB 18484-2020&#xff09;对危废焚烧烟气中一氧化碳&#xff08;CO&#xff09;等污染物设置了明确排放限值&#xff0c;北京、海南等多地更是出台严于国标的地方标准&#xff0c;其…...

08_Claude Code之高级工作流与自动化:循环、调度与并行批处理

08 Claude Code之高级工作流与自动化&#xff1a;循环、调度与并行批处理 Claude Code 的真正价值在于自动化能力&#xff0c;而不仅仅是对话工具。本文深度讲解 Plan Mode 的量化对比&#xff08;多文件重构成功率从62%到89%&#xff09;、非交互批处理脚本、并行处理架构、CI…...

YimMenu:GTA5游戏体验增强与安全防护指南

YimMenu&#xff1a;GTA5游戏体验增强与安全防护指南 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu 项目…...

Enformer深度学习模型:基因序列预测的混合架构革命

Enformer深度学习模型&#xff1a;基因序列预测的混合架构革命 【免费下载链接】enformer-pytorch Implementation of Enformer, Deepminds attention network for predicting gene expression, in Pytorch 项目地址: https://gitcode.com/gh_mirrors/en/enformer-pytorch …...

RDMA设计64:数据吞吐量性能测试分析

本博文主要交流设计思路&#xff0c;在本博客已给出相关博文约190篇&#xff0c;希望对初学者有用。 注意这里只是抛砖引玉&#xff0c;切莫认为参考这就可以完成商用IP 设计。 这里将在基于 XCZU47DR FPGA 核心的开发板上对 RoCE v2 高速传输系统进行数据吞吐量、包吞吐量及传…...

牙齿龋齿检测数据集 YOLO模型如何训练牙齿病害数据集 权重识别龋齿

牙齿龋齿检测数据集&#xff0c;2554张&#xff0c;提供yolo和voc两种标注方式 1类&#xff0c;标注数量&#xff1a; caries: 6946 image num: 2554 &#x1f9b7; 龋齿检测数据集 (Dental Caries Detection Dataset) 属性详细描述数据集名称齿科龋齿目标检测数据集图像总数2…...

ai辅助开发c语言:如何利用快马智能编程助手精通数据结构与算法

今天想和大家分享一个特别实用的学习经验——如何用AI辅助工具高效学习C语言的数据结构与算法。作为一个刚接触数据结构的小白&#xff0c;我在实现单链表时遇到了不少坑&#xff0c;但通过InsCode(快马)平台的AI编程助手&#xff0c;整个过程变得轻松多了。 链表创建与节点插入…...

避坑指南:雅特力AT32F403A V2库在Keil5中的常见配置错误及解决方法

雅特力AT32F403A V2库在Keil5中的高频配置问题与实战修复方案 当国产MCU逐渐成为嵌入式开发的新选择&#xff0c;雅特力AT32F403A凭借其出色的性价比获得了不少工程师的青睐。但在实际开发中&#xff0c;特别是在Keil5环境下使用V2库时&#xff0c;不少开发者都会遇到一些看似简…...

FastAPI CSP:实现配置的终极指南

FastAPI CSP&#xff1a;实现配置的终极指南 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi FastAPI是一个高性能、易于学习、快速编码…...