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

应用图扑 HT for Web 搭建拓扑关系图

图片

拓扑结构在计算机网络设计和通信领域中非常重要,因为它描述了网络中的设备(即“点”)如何相互连接(即通过“线”)。这种结构不仅涉及物理布局,即物理拓扑,还可以涉及逻辑或虚拟的连接方式,即逻辑拓扑

图片

图片

图扑软件自研 HT for Web 产品曾参与搭建了众多拓扑可视化解决方案。如机房通信拓扑可视化,实现通过图形图像直观展示机房内部网络设备、服务器、存储设备以及之间连接关系的技术。帮助 IT 管理员和网络工程师更加直观地理解机房的网络结构,便于故障排查、网络优化和规划扩展。

在 HT 中,ht.Node 可充当拓扑图中的“点”角色,ht.Node 上可显示图片图标,这使得创建拓扑图时能够直观地表示每一个“点”的特征。至于拓扑图中的“线”,即用于体现两个节点之间关系的元素,可由 ht.Edge 类型承担这一任务。ht.Edge用于连接起始和目标两个节点,两个节点间可以有多条ht.Edge存在,也允许起始和目标为同一节点。

在搭建 HT 拓扑图前,我们需要先创建一个 HT 的 2D 视图:

const dm = new ht.DataModel(); // 创建一个数据模型const g2d = new ht.graph.GraphView(dm); // 创建一个 2D 视图g2d.addToDOM(); // 将 2D 视图添加到 body 中dm.setBackground('rgb(240,237,237)'); // 设置背景

2D 视图还可按照需求开启树层次渲染:

dm.setHierarchicalRendering(true);

2D 视图创建完成之后就可以创建“点”和“线”了:

const node1 = createNode('symbols/电信/icon_交换机.json', { x: 0, y: 0 }, "交换机");const node2 = createNode('symbols/电信/icon_路由.json', { x: 300, y: 0 }, "路由");createEdge(node1, node2);function createNode(icon, position, name) {     const node = new ht.Node(); // 创建一个 ht.Node 节点     node.s({         'label': name,         'label.color': "#fff"     });     node.setImage(icon);     node.p(position);     node.setSize({ width: 100, height: 100 });     dm.add(node); // 将节点加到数据模型中     return node;}function createEdge(source, target, color, reverse) {     const edge = new ht.Edge(source, target); // 创建一个 ht.Edge     dm.add(edge); // 将连线节点加到数据模型中     return edge;}

运行代码后的效果:

图片

复杂连线

以上展示了一个简洁的示例,直观地展现了如何在图扑自研 HT for Web 中创建节点并将它们通过连线相连。实际应用中的情形往往更为复杂,需要根据实际数据构建拓扑结构。在这个过程中,核心步骤依旧是首先创建 ht.Node 实例以表示各个节点,再利用 ht.Edge 实例来实现节点之间的连接。接下来,让我们通过复杂一些的示例来演示。

创建节点

为了批量创建节点并方便管理节点数据,示例中定义了结构化的数据格式,并将数据存储在一个 JSON 文件中,再通过 ht.Default.xhrLoad() 去获取到 JSON 文件中的数据。获取到数据后就可批量创建节点。

在实际的运用场景中,也可以通过任何 web 端通讯方式 HTTP/AJAX、WebSocket 去获取数据。

equipment.json 文件中定义的数据格式:

[    {        "name": "核心交换机1", // 设备名称        "code": "EQ_ASBB1425", // 设备编码(唯一标识)        "icon": "symbols/user/900-word/电信拓扑图标/icon_核心交换机.json", // 设备 icon// 设备在图纸中的位置"size": 60, // 节点大小        "position": {            "x": 0,            "y": 100        }    },    {        "name": "核心交换机2",        "code": "EQ_ASBB1478",        "icon": "symbols/user/900-word/电信拓扑图标/icon_核心交换机.json",        "position": {            "x": 200,            "y": 0        }    },    {        "name": "服务器1",        "code": "EQ_BCGJ2121",        "icon": "symbols/user/900-word/电信拓扑图标/空白服务器.json",        "position": {            "x": 200,            "y": 250        }    },   ...]

获取到数据并批量创建节点:

ht.Default.xhrLoad('./equipment.json', function (json) {       const data = ht.Default.parse(json);       data.forEach((item) => {             createNode(item);        })})function createNode(data) {        const node = new ht.Node();        node.setTag(data.code); // 设置节点唯一标识        node.setImage(data.icon);        node.p(data.position);        node.s('2d.movable', false); // 禁止移动        node.setSize({ width: data.size || 150, height: data.size || 150 });        dm.add(node);         return node;}

图片

创建连线

与节点数据相同,示例中定义了连线对应格式,并且也是存储在一个 JSON 文件中,再通过 ht.Default.xhrLoad() 获取数据。JSON 文件中定义了连线中最重要的几个因素:起始节点、目标节点、连线颜色。

[    {        "source": "EQ_ASBB1425", // 起始节点的唯一标识        "target": "EQ_BCGJ2121", // 结束节点的唯一标识        "color": "rgb(0,199,7)" // 连线颜色    },    {        "source": "EQ_ASBB1425",        "target": "EQ_BCGJ2131",        "color": "rgb(0,199,7)"},...]

获取数据并且批量创建连线,这一步需要在创建节点之后执行:

ht.Default.xhrLoad('./connectData.json', function (json) {      const connectData = ht.Default.parse(json);      connectData.forEach((item) => {            createEdge(item);      })})function createEdge(data) {    const source = dm.getDataByTag(data.source);    const target = dm.getDataByTag(data.target);    const edge = new ht.Edge(source, target);    edge.s({        "edge.color": data.color || "rgb(0,199,7)",        "edge.width": 4,        "shadow2.offset.x": -4,        "shadow2.offset.y": 7,        "shadow2": true,        "shadow2.color": "rgba(0,0,0,0.18)",})dm.add(edge);    dm.moveToTop(edge); // 将节点移动至顶部    return edge;}

图片

到这里,基本上整个拓扑的效果都已经展示出来了,但是可能还存在一些问题。如终端路由之间的连线被服务器挡住了,可能会被认为是路由 1—服务器 1—服务器 2—路由 2 这样的连接。

图片

这种情况下,就可以采用其他的连线方式。ht.Edge 提供了多种的连线方式,可以通过 edge.s(‘edge.type’, 连接方式) 进行设置。下面展示几种不同的连接方式:

1.弯曲:edge.s(‘edge.type’, ‘flex2’)

图片

2.正交:edge.s(‘edge.type’, ‘ortho2’)

图片

3.先水平后垂直:edge.s(‘edge.type’, ‘h.v2’)

图片

4.先水平后垂直:edge.s(‘edge.type’, ‘v.h2’)

图片

......

ht.Edge 还有很多种的连线方式,这里就先介绍以上几种方式。

在这个示例内,两个路由之间的连线需要跨域多个其他的连线,为了使得连线更加美观易懂,于是我就这条连线采用了 points 的连线方式,这种方式有极高的灵活性,可在连线路径上自由地添加控制点,从而实现非常多样化的效果。

points 类型的连线,有两个非常重要的属性:

  • edge.points:控制点信息;

  • edge.segments:用来标识在绘制时如何使用 points 数组中的顶点信息。

将示例中这条连线的连线类型改为 points,并设置上相应的属性:

edge.s({    'edge.type': 'points',    'edge.center': true,    'edge.points': [        { "x": 680, "y": 105 },        { "x": 490, "y": 200 },        { "x": 470, "y": 200 },        { "x": 410, "y": 230 },        { "x": 400, "y": 250 },        { "x": 360, "y": 270 },        { "x": 340, "y": 270 },        { "x": 260, "y": 310 },        { "x": 250, "y": 330 },        { "x": 80, "y": 415 }    ],    'edge.segments': [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]});

使用以上 points 连线类型实现的效果:

图片

增加背景和装饰

可创建一些 ht.Shape 节点作为背景装饰,突出显示特定的设备区域。

createShape([    { x: -100, y: 130 },    { x: 230, y: -50 },    { x: 340, y: 15 },    { x: 10, y: 195 },    { x: -100, y: 130 }], [1, 2, 2, 2, 5])createShape([    { x: -155, y: 354 },    { x: 575, y: -30 },    { x: 805, y: 110 },    { x: 60, y: 510 },    { x: -155, y: 355 },], [1, 2, 2, 2, 5]);createShape([    { x: 300, y: 470 },    { x: 660, y: 275 },    { x: 805, y: 350 },    { x: 435, y: 550 },    { x: 300, y: 470 },], [1, 2, 2, 2, 5])function createShape(points, segments) {    const shape = new ht.Shape();    shape.setPoints(points);    shape.setSegments(segments);    shape.s({        'shape.background': "#fff",        "shape.border.color": "rgba(13,46,79,0.67)",        "shape.border.width": 0.5,    })    dm.add(shape);    dm.moveToTop(shape);    return shape;}

添加背景后的效果如下:

图片

增加一些装饰的节点,这些节点本质上也都是 ht.Node,只是显示了不同的图标/图片,效果如下:

图片

添加箭头

在复杂的网络拓扑中,连线上常常需要表示数据流动方向。在使用图扑 HT 绘制连线时,ht.Edge 提供了 icons 属性,通过 icons 属性,可在 ht.Edge 上定义一系列图标并设置它们在连线上的位置。

在设置 icons 属性前,需要先注册好图标:

ht.Default.setImage('toArrow', {    width: 40,    height: 20,    comps: [        {            type: 'shape',points: [5, 2, 10, 10, 5, 18, 20, 10],            closePath: true,            background: 'rgb(0,199,7)',            borderWidth: 1,            borderColor: 'rgb(0,199,7)',            gradient: 'spread.vertical'        }    ]});ht.Default.setImage('fromArrow', {    width: 12,    height: 12,    comps: [        {            type: 'circle',            rect: [1, 1, 10, 10],            background: 'rgb(0,199,7)'        }    ]});

在 ht.Edge 上设置 icons:

edge.addStyleIcon("fromArrow", {     position: 15, // 图标位置     keepOrien: true, // 图标是否默认自动调整方向以保持最好的阅读效果     names: ['fromArrow']});edge.addStyleIcon("toArrow", {     position: 19,     keepOrien: true,     names: ['toArrow']});

设置 icons 之后的效果:

图片

流动动画

在图扑自研产品 HT for Web 中,使用 ht-flow.js 插件,能够为 ht.Edge 连线添加流动动画效果。这种效果可用于表示数据传输、能源流动或任何类型的动态连接。使用 ht-flow.js 插件实现的流动效果配置起来也十分简单,正确引入 ht-flow.js 插件后,使用 g2d.enableFlow(60); 开启流动,再在 ht.Edge 上设置相应的流动属性即可。

ht.Edge 配置流动效果的一些属性说明:

  • flow:布尔值,设置为 true 以启用流动效果。

  • flow.count:控制流动组的个数,默认为 1。

  • flow.step:控制流动的步进,默认为 3。

  • flow.element.count: 每个流动组中的元素的个数,默认为 10。

  • flow.element.space: 流动组中元素的间隔,默认为 3.5。

  • flow.element.image: 字符串类型,指定流动组中元素的图片,图片需要提前通过 ht.Default.setImage 注册。目前支持设置。

  • flow.element.background: 流动组中元素的背景颜色,默认为 rgba(255, 255, 114, 0.4)。

  • flow.element.shadow.begincolor: 字符串类型,表示流动组中的元素的渐变阴影的中心颜色,默认为 rgba(255, 255, 0, 0.3)。

  • flow.element.shadow.endcolor: 字符串类型,表示流动组中的元素的渐变阴影的边缘颜色,默认为 rgba(255, 255, 0, 0)。

  • flow.element.shadow.visible:流动阴影是否可见。

  • flow.begin.percent:开始的位置,值为 0 - 1,默认是 0。

  • flow.element.autorotate:是否自动朝向,根据连线的角度自动朝向。

在示例的 ht.Edge 上设置流动属性:

edge.s({        "flow": true,        "flow.element.background": "rgba(240, 225, 19, 0.5)",        "flow.element.shadow.begincolor": "rgba(240, 225, 19, 0.5)",        "flow.element.shadow.endcolor": "rgba(240, 225, 19, 0)",        "flow.element.count": 1 });

设置完成后的效果:

图片

在更为复杂的场景中,仅仅依赖简单的样式配置难以满足设计需求,为此 ht-flow.js 提供了 flow.element.image 属性,该属性支持将流动的元素设置为图片或图标,还支持设置为多个图片/图标流动的效果。

在流动上设置图标,需要先注册图标:

ht.Default.setImage('dataIcon1', {    "width": 50,    "height": 50,    "comps": [        {            "type": "shape",            "background": "rgb(125,195,125)",            "borderColor": "#979797",            "points": [                2.94441,                16.1039,                26.41008,                16.1039,                26.41008,                4.28571,                47.05559,                25.58442,                27.23783,                45.71429,                27.23783,                33.84863,                2.94441,                33.84863,                2.94441,                16.1039            ]        }    ]})ht.Default.setImage('dataIcon2', {    "width": 50,    "height": 50,    "comps": [        {            "type": "shape",            "background": "#32D3EB",            "borderColor": "#979797",            "points": [                2.94441,                16.1039,                26.41008,                16.1039,                26.41008,                4.28571,                47.05559,                25.58442,                27.23783,                45.71429,                27.23783,                33.84863,                2.94441,                33.84863,                2.94441,                16.1039            ]        }    ]});在 ht.Edge 上设置属性:edge.s({    "flow": true,    "flow.element.count": 2,    "flow.element.image": ["dataIcon1", "dataIcon2"],    "flow.element.max": 20,    "flow.element.min": 20,    "flow.element.shadow.visible": false,    "flow.element.space": 50,    "flow.element.autorotate": true});

设置完成后的效果:

图片

拓扑可视化优点

  1. 直观性:将抽象的关系和数据通过图形呈现,使得人们可以直观地理解和分析系统或网络的结构。

  2. 互动性:现代拓扑可视化工具通常支持用户与图形的交互操作,如缩放、拖拽节点、探索节点之间的路径等,进一步提升了分析的深度和广度。

  3. 动态性:能够实时反映系统或网络的变化,及时展现新增元素和调整后的结构关系,对于监控和管理系统状态尤为重要。

  4. 灵活性:用户可以根据需要选择不同的布局算法,调整图形的展示方式,更好地适应不同的分析场景。

相关文章:

应用图扑 HT for Web 搭建拓扑关系图

拓扑结构在计算机网络设计和通信领域中非常重要,因为它描述了网络中的设备(即“点”)如何相互连接(即通过“线”)。这种结构不仅涉及物理布局,即物理拓扑,还可以涉及逻辑或虚拟的连接方式&#…...

Django Aggregation 使用指南

Django Aggregation 使用指南 在构建Django应用时,我们经常需要对数据库中的数据进行汇总或聚合操作。例如,计算某个字段的平均值、最大值或最小值。这篇文章将详细介绍如何在Django中使用聚合查询,并结合实例进行说明。 聚合查询简介 Dja…...

嵌入式学习——Linux操作系统——文件编程练习

1.使用fread和fwrite方式完成任意普通文件的拷贝功能。 模拟 文件下载 #include <stdio.h>void do_copy(FILE *fp_s,FILE *fp_d) {char buf[100] {0};int ret;while (ret fread(buf,sizeof(char),sizeof(buf),fp_s))fwrite(buf,sizeof(char),ret,fp_d); }//./a.out sr…...

用JavaScript实现了一个简单的图像坐标点标注工具

这段代码实现了一个简单的图像标注工具&#xff0c;允许用户在加载的图像上进行点选标注&#xff0c;并且通过右键确认一个点序列来形成一个多边形。 标注效果如下 实现代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"U…...

Pytorch深度解析:Transformer嵌入层源码逐行解读

前言 本部分博客需要先阅读博客&#xff1a; 《Transformer实现以及Pytorch源码解读&#xff08;一&#xff09;-数据输入篇》 作为知识储备。 Embedding使用方式 如下面的代码中所示&#xff0c;embedding一般是先实例化nn.Embedding(vocab_size, embedding_dim)。实例化的…...

HSP_10章 Python面向对象编程oop_基础部分

文章目录 P107 类与实例的关系1.类与实例的关系示意图2.类与实例的代码分析 P109 对象形式和传参机制1. 类与对象的区别和联系2. 属性/成员变量3. 类的定义和使用4. 对象的传递机制 P110 对象的布尔值P111 成员方法1. 基本介绍2. 成员方法的定义和基本使用3.注意事项和使用细节…...

JavaWeb系列十七: jQuery选择器 上

jQuery选择器 jQuery基本选择器jquery层次选择器基础过滤选择器内容过滤选择器可见度过滤选择器 选择器是jQuery的核心, 在jQuery中, 对事件处理, 遍历 DOM和Ajax 操作都依赖于选择器jQuery选择器的优点 $(“#id”) 等价于 document.getElementById(“id”);$(“tagName”) 等价…...

Gone框架介绍30 - 使用`goner/gin`提供Web服务

gone是可以高效开发Web服务的Golang依赖注入框架 github地址&#xff1a;https://github.com/gone-io/gone 文档地址&#xff1a;https://goner.fun/zh/ 使用goner/gin提供Web服务 文章目录 使用goner/gin提供Web服务注册相关的Goners编写Controller挂载路由路由处理函数io.Rea…...

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据&#xff0c;优化了分类算法&#xff0c;支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类&#xff1b;一键生成危险点报告和交跨报告&#xff1b;还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:289…...

STM32学习之一:什么是STM32

目录 1.什么是STM32 2.STM32命名规则 3.STM32外设资源 4. STM32的系统架构 5. 从0到1搭建一个STM32工程 学习stm32已经很久了&#xff0c;因为种种原因&#xff0c;也有很久一段时间没接触过stm32了。等我捡起来的时候&#xff0c;发现很多都已经忘记了&#xff0c;重新捡…...

AI绘画Stable Diffusion 超强一键去除图片中的物体,免费使用!

大家好&#xff0c;我是设计师阿威 在生成图像时总有一些不完美的小瑕疵&#xff0c;比如多余的物体或碍眼的水印&#xff0c;它们破坏了图片的美感。但别担心&#xff0c;今天我们将介绍一款神奇的工具——sd-webui-cleaner&#xff0c;它可以帮助我们使用Stable Diffusion轻…...

零基础STM32单片机编程入门(一)初识STM32单片机

文章目录 一.概要二.单片机型号命名规则三.STM32F103系统架构四.STM32F103C8T6单片机启动流程五.STM32F103C8T6单片机主要外设资源六.编程过程中芯片数据手册的作用1.单片机外设资源情况2.STM32单片机内部框图3.STM32单片机管脚图4.STM32单片机每个管脚可配功能5.单片机功耗数据…...

Github上前十大开源Rust项目

在github上排名前十的Rust开源项目整理出来与大家共享&#xff0c;以当前的Star数为准。 Deno Deno 是 V8 上的安全 TypeScript 运行时。Deno 是一个建立在V8、Rust和Tokio之上的 JavaScript、TypeScript 和 WebAssembly 的运行时环境&#xff0c;具有自带安全的设置和出色的开…...

硬件开发笔记(二十):AD21导入外部下载的元器件原理图库、封装库和3D模型

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139707771 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

竞赛选题 python opencv 深度学习 指纹识别算法实现

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python opencv 深度学习 指纹识别算法实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;4分创新点&#xff1a;4分 该项目较为新颖…...

RK3568开发笔记(三):瑞芯微RK3588芯片介绍,入手开发板的核心板介绍

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139905873 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

EtherCAT主站IgH解析(二)-- 如何将Igh移植到Linux/Windows/RTOS等多操作系统

版权声明&#xff1a;本文为本文为博主原创文章&#xff0c;转载请注明出处 https://www.cnblogs.com/wsg1100 如有错误&#xff0c;欢迎指正。 本文简单介绍如何将 igh 移植到 zephyr、freertos、rtems、rtthread等RTOS &#xff0c;甚至 windows 上。 ##前言 目前&#xff0…...

ansible copy模块参选选项

copy模块用于将文件从ansible控制节点&#xff08;管理主机&#xff09;或者远程主机复制到远程主机上。其操作类似于scp&#xff08;secure copy protocol&#xff09;。 关键参数标红。 参数&#xff1a; src:&#xff08;source&#xff1a;源&#xff09; 要复制到远程…...

展厅设计主要的六大要素

1、从创意开始 展示设计的开始必须创意在先。根据整体的风格思路进行创意&#xff0c;首先要考虑的是主体的造型、大小高度位置以及它和周围展厅的关系。另外其他道具设计制作与运作方式也必须在创意中有明确的体现。 2、平面感 平面感是指对展示艺术设计平面图纸审美和功能两个…...

【数据结构与算法】最小生成树,Prim算法,Kruskal算法 详解

最小生成树的实际应用背景。 最节省经费的前提下&#xff0c;在n个城市之间建立通信联络网。 Kruskal算法&#xff08;基于并查集&#xff09; void init() {for (int i 1; i < n; i) {pre[i] i;} }ll root(ll a) {ll i a;while (pre[i] ! i) {i pre[i];}return i p…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...