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;标记将被放置在…

电脑视频怎么转音频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,上述代码就…

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 是两个非常有用的工具。下面将介绍如何使…

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

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

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

江琦 本文由同方有云联合创始人兼总经理江琦投递并参与《2023中国企业数智化转型升级先锋人物》榜单/奖项评选。 数据智能产业创新服务媒体 ——聚焦数智 改变商业 在这个飞速发展的数字时代&#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单例类管理信号和槽函数一、创建单例类二、主界面添加组件三、…

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

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

多线程的学习01

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

8.稳定性专题

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

C语言重点突破(四)自定义类型详解

前言 本文意在介绍C语言里的常规自定义类型&#xff0c;它是C语言里最重要的概念之一&#xff0c;是我们从简单使用C语言到综合运用必不可少的知识之一&#xff0c;在C语言中具有重要的地位和作用&#xff0c;掌握自定义类型的使用方法和技巧对于写出高质量的C程序是非常重要的…

prometheus监控kafka

一、前言 关于对kafka的监控&#xff0c;要求高的话可以使用kafka-exorter和jmx-exporter一起收集监控数据&#xff0c;要求不高的情况下可以使用kafka-exporter收集监控数据即可 二、部署 kafka-exporter 部署kafka-exporter&#xff0c;我是在k8s集群中部署的 编辑yaml文件…

0基础学习PyFlink——用户自定义函数之UDAF

大纲 UDAF入参并非表中一行&#xff08;Row&#xff09;的集合计算每个人考了几门课计算每门课有几个人考试计算每个人的平均分计算每课的平均分计算每个人的最高分和最低分 入参是表中一行&#xff08;Row&#xff09;的集合计算每个人的最高分、最低分以及所属的课程计算每课…

UI自动化测试工具推荐

UI自动化测试已经成为现代软件开发过程中不可或缺的一部分。它能够提供诸多优势&#xff0c;包括提高测试效率、减少人力成本、提升软件质量等。同时&#xff0c;可视化工具为UI自动化测试带来了更多便利和灵活性。然而&#xff0c;可视化工具也存在一些潜在的劣势。本文将探讨…

【iOS安全】提取app对应的URLScheme

获取app的URLScheme 在已越狱的iPhone上&#xff0c;使用Filza进入app列表目录&#xff1a; /private/var/containers/Bundle/Application/ 比如我要分析Microsoft Authenticator&#xff0c;明显对应的是这里面的“Authenticator”&#xff0c;那就在Filza中点击进入“Authen…

MySQL多表关联on和where速度对比实测谁更快

MySQL多表关联on和where速度对比实测谁更快 背景 今天发现有人在讨论&#xff1a;两张MySQL的数据表按照某一个字段进行关联的时候查询&#xff0c;我们使用on和where哪种查询方式更快。百闻不如一见&#xff0c;我们来亲自测试下。 先说结论 Where、对等查询的join速度基本…

Android WMS——概述(一)

Android 中的 WMS 指的是 Window Manager Service(窗口管理服务)。WMS 是 Android 系统中的核心服务,主要分为四大部分,分别是窗口管理,窗口动画,输入系统中转站和 Surface 管理 。负责管理应用程序窗口的创建、移动、调整大小和显示等操作。 一、功能简介 WMS 的职责可…