vue使用 jsplumb 生成流程图

1、安装jsPlumb：

npm install jsplumb

2、 在使用的 .vue 文件中引入

import { jsPlumb } from "jsplumb";

简单示例：

注意：注意看 id 为"item-3"和"item-9"那条数据的连线配置

其中有几个小图片，可以用自己的本地图片代替（图标大小的）

<template><div id="wrapper"><div class="line-wrap" v-if="flowChartData1.length == 2"><div :id="flowChartData1[1].id" class="state-item">{{ flowChartData1[1].lable }}</div></div><div class="line-wrap"><div v-for="(item, index) in flowChartData" :key="index" :id="item.id" :class="item.nodeName == 'start' || item.nodeName == 'end' || item.nodeName == 'summary' ? 'state-item-img' : 'state-item'"><img v-if="item.nodeName == 'start'" class="imgs" src="../assets/img/start.png" alt="" /><img v-else-if="item.nodeName == 'summary'" class="imgs" src="../assets/img/cent.png" alt="" /><img v-else-if="item.nodeName == 'end'" class="imgs" src="../assets/img/end.png" alt="" /><div v-else>{{ item.lable }}</div></div></div><div class="line-wrap" v-if="flowChartData1.length > 0 && flowChartData1.length < 3"><div :id="flowChartData1[0].id" class="state-item">{{ flowChartData1[0].lable }}</div></div></div>
</template>
<script>
import { jsPlumb } from "jsplumb";
export default {name: "LiuChengTu",data() {return {// 一行数据的// flowChartData: [//   { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始//   { id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },//   { id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },//   { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}] }, // 汇总/分发//   { id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },//   { id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },//   { id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },//   { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发//   { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束// ],// 两行数据的// flowChartData: [//   { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始//   { id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },//   { id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },//   { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}, {source: "item-3", target: "item-9"}] }, // 汇总/分发//   { id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },//   { id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },//   { id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },//   { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发//   { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束//   { id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据// ],// 三行数据的flowChartData: [{ id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始{ id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },{ id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },{ id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}, {source: "item-3", target: "item-9"}, {source: "item-3", target: "item-10"}] }, // 汇总/分发{ id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },{ id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },{ id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },{ id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发{ id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束{ id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据{ id: "item-10", lable: "改革处-经办人-接收待阅123", nodeName: "handleOut", connectId: [{source: "item-10", target: "item-7"}] }, // 第二行数据],flowChartData1: []};},mounted() {this.initJsPlumb();},methods: {initJsPlumb() {let jsPlumbConnectList = [];let listData = [];let fenfaData = [];// 处理数据this.flowChartData.forEach(ele=>{if(ele.connectId.length == 1) {if(ele.nodeName == "handleOut") {fenfaData.push(ele);}else {listData.push(ele);let plumbInsInfo = {source: ele.connectId[0].source,target: ele.connectId[0].target,anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}}else if(ele.connectId.length == 1){if(ele.nodeName == "handleOut") {fenfaData.push(ele);}else {listData.push(ele);ele.connectId.forEach((itemInfo,index)=>{if(index == 0) {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}else {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Bottom", "Left"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}})}}else {if(ele.nodeName == "handleOut") {fenfaData.push(ele);}else {listData.push(ele);ele.connectId.forEach((itemInfo,index)=>{if(index == 0) {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}else if(index == 1) {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Bottom", "Left"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}else {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Top", "Left"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}})}}})this.flowChartData = listData;this.flowChartData1 = fenfaData;if(this.flowChartData1.length > 0) {this.flowChartData1.forEach((ele, index)=>{if(index==0) {let plumbInsInfo = {source: ele.connectId[0].source,target: ele.connectId[0].target,anchor: ["Right", "Bottom"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}else {let plumbInsInfo = {source: ele.connectId[0].source,target: ele.connectId[0].target,anchor: ["Right", "Top"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}})}setTimeout(() => {let plumbIns = jsPlumb.getInstance();plumbIns.ready(function () {jsPlumbConnectList.forEach(ele=>{plumbIns.connect(ele);})})}, 500);return;// let plumbIns = jsPlumb.getInstance();plumbIns.ready(function () {plumbIns.connect({// 对应上述基本概念source: "item-0",target: "item-1",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-1",target: "item-2",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-2",target: "item-3",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-3",target: "item-4",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-4",target: "item-5",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-5",target: "item-6",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-6",target: "item-7",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-7",target: "item-8",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-3",target: "item-9",anchor: ["Bottom", "Left"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-9",target: "item-7",anchor: ["Right", "Bottom"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});});},},
};
</script>
<style lang="scss" scoped>
#wrapper {background: radial-gradient(ellipse at top left,rgba(255, 255, 255, 1) 40%,rgba(229, 229, 229, 0.9) 100%);padding: 60px 80px;
}
.state-item-img {width: 50px;height: 50px;color: #606266;border: 2px solid rgba(0, 0, 0, 0);text-align: center;line-height: 30px;font-family: sans-serif;border-radius: 4px;margin-right: 56px;font-size: 14px;.imgs {width: 50px;height: 50px;}
}
.state-item {width: 120px;height: 100px;color: #606266;background: #f6f6f6;border: 2px solid rgba(0, 0, 0, 0.05);text-align: center;line-height: 30px;font-family: sans-serif;border-radius: 4px;margin-right: 60px;font-size: 14px;padding: 5px 10px;display: flex;align-items: center;
}
.line-wrap {display: flex;margin-bottom: 100px;justify-content: center;align-items: center;
}
</style>

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

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

相关文章

Linux 权限的理解

Linux 权限的理解

内容摘要 本文内容包括shell的运行原理&#xff0c;包括外壳程序的原理、理解、和意义&#xff0c;以及从两个方面对于权限的理解&#xff08;人和事物的属性&#xff09;、修改文件的权限&#xff0c;包括修改文件的拥有者、修改文件拥有者所在的组的用户以及修改文件的三类用…
阅读更多...
域渗透AD渗透攻击利用 MS14-068漏洞利用过程 以及域渗透中票据是什么 如何利用

域渗透AD渗透攻击利用 MS14-068漏洞利用过程 以及域渗透中票据是什么 如何利用

目录 wmi协议远程执行 ptt票据传递使用 命令传递方式 明文口令传递 hash口令传递 票据分类 kerberos认证的简述流程 PTT攻击的过程 MS14-068 漏洞 执行过程 wmi协议远程执行 wmi服务是比smb服务高级一些的&#xff0c;在日志中是找不到痕迹的&#xff0c;但是这个主…
阅读更多...
鸿蒙中富文本编辑与展示

鸿蒙中富文本编辑与展示

富文本在鸿蒙系统如何展示和编辑的&#xff1f;在文章开头我们提出这个疑问&#xff0c;带着疑问来阅读这篇文章。 富文本用途可以展示图文混排的内容&#xff0c;在日常App 中非常常见&#xff0c;比如微博的发布与展示&#xff0c;朋友圈的发布与展示&#xff0c;都在使用富文…
阅读更多...
【树莓派 5B】anaconda换源 更换清华源

【树莓派 5B】anaconda换源 更换清华源

【树莓派 5B】anaconda换源 更换清华源 前言 本文基于树莓派5B上运行的 Raspberrypi-OS-64bit &#xff08;Debian 12 Bookworm&#xff09;平台&#xff0c;更换 Anaconda 官方源为清华大学镜像源&#xff0c;旨在解决网络连接超时、连接官方源失败、下载速度慢的问题。 参…
阅读更多...
spring (Aop) day 1024

spring (Aop) day 1024

ok了家人们&#xff0c;继续学习spring &#xff0c;这段知识点有点绕&#xff0c;建议搭配b站的视频去学&#xff0c;passion&#xff01;&#xff01;&#xff01; 八.AOP-面向切面编程 8.1 动态代理 8.1.1 概述 什么是代理&#xff1f;在现实生活中&#xff0c;代理很常见…
阅读更多...
学习虚幻C++开发日志——TSet

学习虚幻C++开发日志——TSet

TSet 官方文档&#xff1a;虚幻引擎中的Set容器 | 虚幻引擎 5.5 文档 | Epic Developer Community (epicgames.com) TSet 是通过对元素求值的可覆盖函数&#xff0c;使用数据值本身作为键&#xff0c;而不是将数据值与独立的键相关联。 默认情况下&#xff0c;TSet 不支持重…
阅读更多...
iOS 18.2开发者预览版 Beta 1版本发布，欧盟允许卸载应用商店

iOS 18.2开发者预览版 Beta 1版本发布，欧盟允许卸载应用商店

苹果今天为开发人员推送了iOS 18.2开发者预览版 Beta 1版本 更新&#xff08;内部版本号&#xff1a;22C5109p&#xff09;&#xff0c;本次更新距离上次发布 Beta / RC 间隔 2 天。该版本仅适用于支持Apple Intelligence的设备&#xff0c;包括iPhone 15 Pro系列和iPhone 16系…
阅读更多...
【设计模式系列】观察者模式

【设计模式系列】观察者模式

一、什么是观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了对象之间的一对多依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会得到通知并自动更新。这种模式也被称为发布-订阅模式&…
阅读更多...
「重磅」中国电信数据湖+数据中台实施方案（附60页方案）

「重磅」中国电信数据湖+数据中台实施方案（附60页方案）

来源：公众号-数据分析小兵 作者按 哈喽，大家好，我是数据分析小兵，今天小兵向大家分享中国电信基于数据湖的数据中台实施方案。 方案核心内容一：数据湖的搭建与实施 数据湖是一套针对海量多源异构数据，具备数据采集、数据存储、数据计算、数据访问、数据管理的技术架构…
阅读更多...
1.CentOS安装

1.CentOS安装

CentOS安装 新建虚拟机 选择安装方式 指定镜像方式 选择操作系统类型 设置虚拟机名称和位置 指定磁盘大小 点击“自定义硬件” 指定内存大小 指定镜像位置 点击“开启此虚拟机” 选择“Install CentOS 7”并回车 选择语言 选择安装“GNOME桌面”环境 配置安装位置 配置网络和…
阅读更多...
springboot高校科研项目和课题管理平台-计算机毕业设计源码18198

springboot高校科研项目和课题管理平台-计算机毕业设计源码18198

摘要 随着科技的快速发展和高校科研水平的持续提高&#xff0c;科研项目和课题的管理逐渐变得复杂多样。传统的管理方式&#xff0c;如使用纸质文档或简单的电子表格进行记录&#xff0c;已经无法满足现代高校科研管理的需求。这不仅影响了科研工作的效率&#xff0c;还可能导致…
阅读更多...
CentOS 7(Linux)详细安装教程

CentOS 7(Linux)详细安装教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 一、CentOS镜像的下载&#xff08;准备工作&#xff09; 我选择的是其他镜像源的下载地址&#xff1a; Index of /centos-vault/7.6.1810/isos/x86_64/ | 南阳理工学院开源镜…
阅读更多...
8个方法教会你提高企业培训效率

8个方法教会你提高企业培训效率

培训成本是企业中的一个复杂问题。它完全取决于课程内容、培训方法以及成本效益。在计算培训费用时&#xff0c;公司会面临许多关于包括哪些内容、如何进行以及假设情景的问题。 企业员工培训的每个方面都会产生自己的成本。例如&#xff1a; 地点&#xff1a;我们专门找个培训…
阅读更多...
冒泡排序（Python）

冒泡排序（Python）

冒泡排序&#xff1a;依次比较相邻的两个数&#xff0c;将大数放在后面&#xff0c;小数放在前面。 n个数排序共需进行n-1趟&#xff0c;第一趟排序结束时&#xff0c;最后一个元素为所有元素中的最大值。 冒泡排序的原理 1&#xff09;比较相邻元素&#xff1a;如果第一个比…
阅读更多...
婚纱相册必须去摄影店吗？其实自己会拍照就能实现，性价比更高

婚纱相册必须去摄影店吗？其实自己会拍照就能实现，性价比更高

一直以来&#xff0c;婚纱照都是新人们婚礼筹备中不可或缺的部分。然而&#xff0c;高昂的摄影店价格让不少新人望而却步。其实&#xff0c;只要掌握一些拍照技巧&#xff0c;自己在家就能制作出独一无二的婚纱相册&#xff0c;不仅性价比超高&#xff0c;还能留下更多珍贵的回…
阅读更多...
Android 中的串口开发

Android 中的串口开发

一&#xff1a;背景 本文着重讲安卓下的串口。 由于开源的Android在各种智能设备上的使用越来越多&#xff0c;如车载系统等。在我们的认识中&#xff0c;Android OS的物理接口一般只有usb host接口和耳机接口&#xff0c;但其实安卓支持各种各样的工业接口&#xff0c;如HDM…
阅读更多...
条码检测系统——基于MATLAB的一维条码识别

条码检测系统——基于MATLAB的一维条码识别

摘 要&#xff1a;条码技术是如今应用最广泛的识别和输入技术之一&#xff0c;由于其包含的信息量大&#xff0c;识别错误率低而在各个方面得到很大的重视。它发展迅速并被广泛应用于于工业、商业、图书出版、医疗卫生等各行各业。由我国目前发展现状来看&#xff0c;条码的正…
阅读更多...
攻坚金融关键业务系统，OceanBase亮相2024金融科技大会

攻坚金融关键业务系统，OceanBase亮相2024金融科技大会

10月15-16日&#xff0c;第六届中新数字金融应用博览会与2024金融科技大会&#xff08;简称“金博会”&#xff09;在苏州工业园区联合举办。此次大会融合了国家级重要金融科技资源——“中国金融科技大会”&#xff0c;围绕“赋能金融高质量发展&#xff0c;金融科技创新前行”…
阅读更多...
【C++指南】运算符重载详解

【C++指南】运算符重载详解

引言 C 提供了运算符重载这一特性&#xff0c;允许程序员为自定义类型&#xff08;如类和结构体&#xff09;定义运算符的行为。 通过运算符重载&#xff0c;可以使自定义类型对象像内置类型一样使用运算符&#xff0c;从而提高代码的可读性和易用性。 本文将详细介绍 C 中运算…
阅读更多...
【状态机DP】力扣2786. 访问数组中的位置使分数最大

【状态机DP】力扣2786. 访问数组中的位置使分数最大

给你一个下标从 0 开始的整数数组 nums 和一个正整数 x 。 你 一开始 在数组的位置 0 处&#xff0c;你可以按照下述规则访问数组中的其他位置&#xff1a; 如果你当前在位置 i &#xff0c;那么你可以移动到满足 i < j 的 任意 位置 j 。 对于你访问的位置 i &#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023