vue 复杂的流程图实现--antv/g6

可以先看下对应的文档:G6 Demos - AntV

 npm install --save @antv/g6

实现如图:

<template><div class="drawflow"><div id="mountNode"></div></div>
</template>
<script>
import G6 from "@antv/g6";
export default {data() {return {registerEdgeLine: null,graph: null,registerEdgeNode: null,};},mounted() {this.init2();this.init();},methods: {init2() {},init() {const width = document.getElementById("mountNode").clientWidth;const spacing = width / 20;const anchorPoints = [[0.4, 0],[0.6, 0],[0.4, 1],[0.6, 1],];//生产水线G6.registerEdge("line-production-arrow", {draw(cfg, group) {var startPoint = cfg.startPoint,endPoint = cfg.endPoint;var keyShape = group.addShape("path", {attrs: {path: [["M", startPoint.x, startPoint.y],["L", endPoint.x, startPoint.y],["L", endPoint.x, endPoint.y],],stroke: "#03b329",lineWidth: 1,startArrow: false,endArrow: true,className: "edge-shape",},});return keyShape;},});//循环水出水线G6.registerEdge("line-circulate-arrow", {draw(cfg, group) {var startPoint = cfg.startPoint,endPoint = cfg.endPoint;var keyShape = group.addShape("path", {attrs: {path: [["M", startPoint.x, startPoint.y],["L", startPoint.x, startPoint.y - 120],["L", endPoint.x, endPoint.y - 120],["L", endPoint.x, endPoint.y],],stroke: "#FFC100",lineWidth: 1,startArrow: false,endArrow: true,className: "edge-shape",},});return keyShape;},});//循环水进水线G6.registerEdge("line-circulate-in-arrow", {draw(cfg, group) {var startPoint = cfg.startPoint,endPoint = cfg.endPoint;var keyShape = group.addShape("path", {attrs: {path: [["M", startPoint.x, startPoint.y],["L", startPoint.x, startPoint.y + 120],["L", endPoint.x, endPoint.y + 120],["L", endPoint.x, endPoint.y],],stroke: "#FFC100",lineWidth: 1,startArrow: false,endArrow: true,className: "edge-shape",},});return keyShape;},});//脱盐水站出水线G6.registerEdge("line-desalination-arrow", {draw(cfg, group) {var startPoint = cfg.startPoint,endPoint = cfg.endPoint;var keyShape = group.addShape("path", {attrs: {path: [["M", startPoint.x, startPoint.y],["L", startPoint.x, startPoint.y - 40],["L", endPoint.x, endPoint.y - 40],["L", endPoint.x, endPoint.y],],stroke: "#2BFF96",lineWidth: 1,startArrow: false,endArrow: true,className: "edge-shape",},});return keyShape;},});//污水站出水线G6.registerEdge("line-sewage-arrow", {draw(cfg, group) {var startPoint = cfg.startPoint,endPoint = cfg.endPoint;var keyShape = group.addShape("path", {attrs: {path: [["M", startPoint.x, startPoint.y],["L", startPoint.x, startPoint.y - 80],["L", endPoint.x, endPoint.y - 80],["L", endPoint.x, endPoint.y],],stroke: "#8a63f5",lineWidth: 1,startArrow: false,endArrow: true,className: "edge-shape",},});return keyShape;},});//污水站进水线G6.registerEdge("line-sewage-in-arrow", {draw(cfg, group) {var startPoint = cfg.startPoint,endPoint = cfg.endPoint;var keyShape = group.addShape("path", {attrs: {path: [["M", startPoint.x, startPoint.y],["L", startPoint.x, startPoint.y + 80],["L", endPoint.x, endPoint.y + 80],["L", endPoint.x, endPoint.y],],stroke: "#f37907",lineWidth: 1,startArrow: false,endArrow: true,className: "edge-shape",},});return keyShape;},});//消耗水线G6.registerEdge("line-consume-arrow", {draw(cfg, group) {var startPoint = cfg.startPoint,endPoint = cfg.endPoint;var keyShape = group.addShape("path", {attrs: {path: [["M", startPoint.x, startPoint.y],["L", startPoint.x, startPoint.y + 40],["L", endPoint.x, endPoint.y],],stroke: "#f30474",lineWidth: 1,startArrow: false,endArrow: true,className: "edge-shape",},});return keyShape;},});//外排污水水线G6.registerEdge("line-sewageConsume-arrow", {draw(cfg, group) {var startPoint = cfg.startPoint,endPoint = cfg.endPoint;var keyShape = group.addShape("path", {attrs: {path: [["M", startPoint.x, startPoint.y],["L", startPoint.x, startPoint.y + 80],["L", endPoint.x, endPoint.y],],stroke: "#f36f04",lineWidth: 1,startArrow: false,endArrow: true,className: "edge-shape",},});return keyShape;},});G6.registerNode("rectNode",{drawShape(cfg, group) {var keyShape = group.addShape("rect", {attrs: {width: 35,height: 250,x: 0,y: 0,radius: 4,lineWidth: 1,stroke: "#409eff",fill: "#0158CF",},});group.addShape("text", {attrs: {y: cfg.top || 160,x: 12,text: cfg.text,fill: "#fff",lineHeight: 20,},});return keyShape;},},"rect");G6.registerNode("textNode",{drawShape(cfg, group) {var keyShape = group.addShape("rect", {attrs: {width: 50,height: 30,x: 0,y: 0,radius: 4,lineWidth: 1,stroke: "transparent",fill: "transparent",},});group.addShape("text", {attrs: {y: cfg.textY || 25,x: cfg.textX || 15,text: cfg.text,fill: cfg.color || "#03b329",lineHeight: 20,},});return keyShape;},},"rect");let data = {nodes: [{id: "productionWater",x: (3 / 4) * spacing,y: 80,type: "textNode",text: "生产水",anchorPoints: [[0, 1]],},{id: "1",x: (1 / 2) * spacing,y: 150,type: "rectNode",text: "水\n循\n环\n系\n统",anchorPoints: anchorPoints,},{id: "2",x: 2 * spacing,y: 150,text: "脱\n盐\n水\n站",type: "rectNode",anchorPoints: anchorPoints,},{id: "3",x: 3 * spacing,y: 150,text: "冷\n凝\n鼓\n风",type: "rectNode",anchorPoints: anchorPoints,},{id: "4",x: 4 * spacing,y: 150,text: "脱\n硫\n单\n元",type: "rectNode",anchorPoints: anchorPoints,},{id: "5",x: 5 * spacing,y: 150,text: "硫\n铵\n单\n元",type: "rectNode",anchorPoints: anchorPoints,},{id: "6",x: 6 * spacing,y: 150,text: "粗\n苯\n蒸\n馏\n单\n元",type: "rectNode",anchorPoints: anchorPoints,},{id: "7",x: 7 * spacing,y: 150,text: "终\n冷\n洗\n苯\n单\n元",type: "rectNode",anchorPoints: anchorPoints,},{id: "8",x: 8 * spacing,y: 150,text: "制\n酸\n单\n元",type: "rectNode",anchorPoints: anchorPoints,},{id: "9",x: 9 * spacing,y: 150,text: "蒸\n氨\n单\n元",type: "rectNode",anchorPoints: anchorPoints,},{id: "10",x: 10 * spacing,y: 150,text: "油\n库\n单\n元",type: "rectNode",anchorPoints: anchorPoints,},{id: "11",x: 11 * spacing,y: 150,text: "汽\n化\n单\n元",type: "rectNode",anchorPoints: anchorPoints,},{id: "12",x: 12 * spacing,y: 150,text: "备\n煤\n系\n统\n焦\n处\n理\n系\n统",top: 200,type: "rectNode",anchorPoints: anchorPoints,},{id: "13",x: 13 * spacing,y: 150,text: "炼\n焦\n设\n施",type: "rectNode",anchorPoints: anchorPoints,},{id: "14",x: 14 * spacing,y: 150,text: "除\n尘\n设\n施",type: "rectNode",anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],},{id: "15",x: 15 * spacing,y: 150,text: "热\n力\n设\n施",type: "rectNode",anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],},{id: "16",x: 16 * spacing,y: 150,text: "干\n熄\n焦\n系\n统",type: "rectNode",anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],},{id: "17",x: 17 * spacing,y: 150,text: "汽\n轮\n发\n电\n站",type: "rectNode",anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],},{id: "18",x: 18.5 * spacing,y: 150,text: "污\n水\n处\n理\n站",type: "rectNode",anchorPoints: [[0.5, 0],[0.4, 1],[0.6, 1],],},{id: "consumeWater",x: 19.5 * spacing,y: 410,type: "textNode",text: "耗水",textX: -45,color: "#f30474",anchorPoints: [[0, 1]],},{id: "sewageConsumeWater",x: 19.5 * spacing,y: 450,type: "textNode",text: "外排废水",textX: -45,textY: 20,color: "#f36f04",anchorPoints: [[0, 1]],},],edges: [{source: "productionWater",target: "2",type: "line-production-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "3",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "4",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "5",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "6",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "7",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "8",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "9",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "10",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "11",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "12",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "13",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "14",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "15",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "16",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "1",target: "17",type: "line-circulate-arrow",sourceAnchor: 0,targetAnchor: 0,},{source: "17",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "17",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "16",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "15",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "14",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "13",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "12",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "11",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "10",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "9",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "8",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "7",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "6",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "5",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "4",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "3",target: "1",type: "line-circulate-in-arrow",sourceAnchor: 2,targetAnchor: 2,},{source: "2",target: "3",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "4",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "5",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "6",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "7",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "8",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "9",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "10",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "11",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "12",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "13",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "14",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "15",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "16",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "2",target: "17",type: "line-desalination-arrow",sourceAnchor: 1,targetAnchor: 1,},{source: "18",target: "17",type: "line-sewage-arrow",sourceAnchor: 0,targetAnchor: 4,},{source: "18",target: "16",type: "line-sewage-arrow",sourceAnchor: 0,targetAnchor: 4,},{source: "18",target: "15",type: "line-sewage-arrow",sourceAnchor: 0,targetAnchor: 4,},{source: "18",target: "14",type: "line-sewage-arrow",sourceAnchor: 0,targetAnchor: 4,},{source: "2",target: "18",type: "line-sewage-in-arrow",sourceAnchor: 3,targetAnchor: 1,},{source: "17",target: "18",type: "line-sewage-in-arrow",sourceAnchor: 5,targetAnchor: 1,},{source: "16",target: "18",type: "line-sewage-in-arrow",sourceAnchor: 5,targetAnchor: 1,},{source: "15",target: "18",type: "line-sewage-in-arrow",sourceAnchor: 5,targetAnchor: 1,},{source: "14",target: "18",type: "line-sewage-in-arrow",sourceAnchor: 5,targetAnchor: 1,},{source: "1",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "3",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "4",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "5",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "6",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "7",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "8",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "9",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "10",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "11",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "12",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "13",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "14",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "15",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "16",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "17",target: "consumeWater",type: "line-consume-arrow",sourceAnchor: 3,targetAnchor: 0,},{source: "18",target: "sewageConsumeWater",type: "line-sewageConsume-arrow",sourceAnchor: 2,targetAnchor: 0,},],};this.graph = new G6.Graph({container: "mountNode",width: width,height: 620,});this.graph.data(data);this.graph.render();},},
};
</script>
<style lang="scss" scoped>
.drawflow {height: 100%;width: 100%;#mountNode {width: 100%;height: 100%;}
}
</style>

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qwt QwtPlotMarker标记类详解

1.概述 QwtPlotMarker类是Qwt绘图库中用于在图表上绘制标记的类。标记可以是垂直或水平线、直线、文本或箭头等。它可用于标记某个特定的位置、绘制参考线或注释信息。 以下是类继承关系图&#xff1a; 2.常用方法 设置标记的坐标。传入x和y坐标值&#xff0c;标记将被放置在…

【23种设计模式】接口隔离原则

个人主页&#xff1a;金鳞踏雨 个人简介&#xff1a;大家好&#xff0c;我是金鳞&#xff0c;一个初出茅庐的Java小白 目前状况&#xff1a;22届普通本科毕业生&#xff0c;几经波折了&#xff0c;现在任职于一家国内大型知名日化公司&#xff0c;从事Java开发工作 我的博客&am…

电脑视频怎么转音频mp3

如果你在电脑上观看视频时喜欢上某个片段的背景音乐&#xff0c;且想将喜欢的背景音乐制作为手机铃声。我是建议你将此视频转换为 MP3 格式&#xff0c;因为 MP3 几乎与所有设备相兼容&#xff0c;让你可以在不同设备上不受限制地去聆听它。那该如何转换呢&#xff1f;无需担心…

vue路径中“@/“代表什么

举例&#xff1a; <img src"/../static/imgNew/adv/tupian.jpg"/>其中&#xff0c;/是webpack设置的路径别名&#xff0c;代表什么路径&#xff0c;要看webpack的build文件夹下webpack.base.conf.js里面对于是如何配置&#xff1a; 上图中代表src,上述代码就…

RabbitMQ 链接管理-发布者-消费者

RabbitMQ连接管理器 using RabbitMQ.Client; using System; public class RabbitMQConnectionManager { private readonly IConnectionFactory _connectionFactory; private IConnection _connection; public RabbitMQConnectionManager(string hostName) { …

LayerUI中按钮点击一次,触发了两次事件

form.on("submit(clericalServices)", function (data) {console.log("1111111");var getTpl clericalServicesT.innerHTML;laytpl(getTpl).render({}, function (html) {$("#type1Scope").append(html);});return false})点击一次&#xff0c;…

构建自动化测试环境:使用Docker和Selenium!

随着软件开发的日益复杂和迭代速度的加快&#xff0c;自动化测试被越来越广泛地应用于软件开发流程中。它能够提高测试效率、减少测试成本&#xff0c;并保证软件质量的稳定性。在构建自动化测试环境方面&#xff0c;Docker 和 Selenium 是两个非常有用的工具。下面将介绍如何使…

Python分享之多进程探索 (multiprocessing包)

在初步了解Python多进程之后&#xff0c;我们可以继续探索multiprocessing包中更加高级的工具。这些工具可以让我们更加便利地实现多进程。 进程池 进程池 (Process Pool)可以创建多个进程。这些进程就像是随时待命的士兵&#xff0c;准备执行任务(程序)。一个进程池中可以容…

CSS外边距重叠:原理、结果

引言 CSS中的外边距是控制元素间距的重要属性之一。然而&#xff0c;当涉及到相邻元素的外边距时&#xff0c;可能会出现外边距重叠的情况&#xff0c;这可能会对页面布局产生一些意想不到的影响。本文将深入探讨什么是外边距重叠以及它可能导致的结果&#xff0c;并提供一些代…

7-4、S加减速转动实现【51单片机控制步进电机-TB6600系列】

摘要&#xff1a;本节介绍实现步进电机S曲线运动的代码 一、目标功能 实现步进电机转动总角度720&#xff0c;其中加减速各90 加速段&#xff1a;加速类型&#xff1a;S曲线   加速角度&#xff1a;角度为90   起步速度&#xff1a;30RPM&#xff0c;   终止速度&#x…

【数智化人物展】同方有云联合创始人兼总经理江琦:云计算,引领数智化升级的动能...

江琦 本文由同方有云联合创始人兼总经理江琦投递并参与《2023中国企业数智化转型升级先锋人物》榜单/奖项评选。 数据智能产业创新服务媒体 ——聚焦数智 改变商业 在这个飞速发展的数字时代&#xff0c;我们置身于一个前所未有的机遇与挑战并存的时刻。数字化转型不再仅仅是一…

sprinbboot 2.7启动不生成日志文件

新增了一个springboot项目&#xff0c;通过idea 调试&#xff0c;并且在idea 的vm options中指定-Dlogging.configclasspath:logback-pro.xml 或者 -Dlogging.configclasspath:logback-dev.xml 都能正常生成对应的日志文件。 部署到测试环境以及生产环境&#xff0c;日志文件却…

ChinaSoft 论坛巡礼 | 开源软件生态健康度量论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…

jmeter疑难杂症

mac启动jmeter 进入jmeter文件夹下的bin目录 执行sh jmeter 如何线程与线程之间按照顺序执行 线程组内随机执行 选择线程组右键 >>> 添加 >>> 逻辑控制器 >>> 随机顺序控制器&#xff08;Random Order Controller&#xff09; 如何提取cookie的…

Qt中的单例模式

QT单例类管理信号和槽函数 Chapter1 Qt中的单例模式一、什么是单例模式&#xff1f;二、Qt中单例模式的实现2.1、静态成员变量2.2、静态局部变量2.3、Q_GLOBAL_STATIC 宏实例2 三、使用场景四、注意事项 Chapter2 QT单例类管理信号和槽函数一、创建单例类二、主界面添加组件三、…

golang连接池检查连接失败时如何重试

在Go中&#xff0c;可以通过使用database/sql包的DB类型的Ping方法来检查数据库连接的可用性。如果连接检查失败&#xff0c;可以选择进行重试。以下是一个简单的示例代码&#xff0c;演示了如何在连接检查失败时进行重试&#xff1a; import ("database/sql""…

图像去噪滤波算法汇总(Python)

前言 上篇文章&#xff1a;图像数据噪音种类以及Python生成对应噪音&#xff0c;汇总了常见的图片噪音以及噪音生成方法&#xff0c;主要用在数据增强上面&#xff0c;作为数据集填充的方式&#xff0c;可以避免模型过拟合。想要了解图像数据增强算法的可以去看本人所撰这篇文…

多线程的学习01

什么是线程 线程是为了解决并发编程引入的机制&#xff0c;线程相比进程来说更轻量。 创建线程比创建进程——开销更小 销毁线程比销毁进程——开销更小 调度线程比调度进程——开销更小 进程包含线程&#xff0c;同一进程里的若干线程之间&#xff0c;共享着内存资源和文件描…

[100天算法】-键值映射(day 42)

题目描述 实现一个 MapSum 类里的两个方法&#xff0c;insert 和 sum。对于方法 insert&#xff0c;你将得到一对&#xff08;字符串&#xff0c;整数&#xff09;的键值对。字符串表示键&#xff0c;整数表示值。如果键已经存在&#xff0c;那么原来的键值对将被替代成新的键…

8.稳定性专题

1. anr https://code84.com/303466.html 一句话&#xff0c;规定的时间没有干完要干的事&#xff0c;就会发生anrsystem_anr场景 input 5sservice 前台20s 后台60scontentprivider超市 比较少见 原因 主线程耗时 复杂layout iobinder对端block子线程同步锁blockbinder被占满导…