RelationGraph实现工单进度图——js技能提升

直接上图:
在这里插入图片描述
从上图中可以看到整个工单的进度是从【开始】指向【PCB判责】+【完善客诉】+【PCBA列表】,同时【完善客诉】又可以同时指向【PCB判责】+【PCBA列表】,后续各自指向自己的进度。

直接上代码:

1.安装

1.1 Npm 方式

npm i relation-graph

1.2 Yarn方式

yarn add relation-graph

2.使用

2.1 html部分代码

 <RelationGraphv-if="visible"ref="seeksRelationGraph"style="height: 300px;width: 80%;margin: 0 auto;border: 1px solid #666;":options="graphOptions"><template #node="{ node }"><div class="my-node"><div class="my-node-text">{{ node.text }}</div><divclass="my-node-detail"v-if="node.data && node.data.creatorName"><div @dblclick="handleCopy(node.data)">{{ node.data.taskOwnerName }}({{ node.data.taskOwner }}){{(node.data.completedTime || node.data.creationTime) | moment}}</div></div></div></template></RelationGraph>

2.2 script部分代码

 <script>import RelationGraph from 'relation-graph';//引入插件export default {name: 'Demo',components: { RelationGraph },//注册插件data() {return {//设置插件的参数graphOptions: {allowSwitchLineShape: true,allowSwitchJunctionPoint: true,// 这里可以参考"Graph 图谱"中的参数进行设置:http://relation-graph.com/#/docs/graphlayouts: [{label: '中心',layoutName: 'tree', //布局方式(tree树状布局/center中心布局/force自动布局)// layoutClassName: 'seeks-layout-center', //当使用这个布局时,会将此样式添加到图谱上// centerOffset_y: 130, //根节点y坐标偏移量(针对项目配置单位为px)min_per_width: 150, //节点距离限制:节点之间横向距离最小值min_per_height: 180, //节点距离限制:节点之间纵向距离最小值from: 'left',},],defaultLineMarker: {markerWidth: 40,markerHeight: 40,refX: 6,refY: 6,data: 'M2,2 L10,6 L2,10 L6,6 L2,2',},defaultNodeShape: 0, //默认的节点形状,0:圆形;1:矩形// defaultExpandHolderPosition: 'right', //节点展开关闭的按钮位置defaultLineShape: 1, //默认的线条样式(1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6)defaultJunctionPoint: 'border', //默认的连线与节点接触的方式(border:边缘/ltrb:上下左右/tb:上下/lr:左右)当布局为树状布局时应使用tb或者lr,这样才会好看// defaultNodeBorderWidth: 0.2, //节点边框粗细// defaultcolor: 'rgba(0, 186, 189, 1)', //默认的线条颜色// defaultNodeColor: 'rgba(0, 206, 209, 1)', //默认的节点背景颜色// defaultFocusRootNode: false, //默认为根节点添加一个被选中的样式// moveToCenterWhenResize: true, //当图谱的大小发生变化时,是否重新让图谱的内容看起来居中// 这里可以参考"Graph 图谱"中的参数进行设置moveToCenterWhenRefresh: false,// graphOffset_x: -500,// graphOffset_y: -100,},}},}</script>

接口返回的数据结构是这样的:
在这里插入图片描述
上图中的connections是线的关系,nodes是节点。

需要对上面的数据结构进行处理后,才能实现上面的效果:

this.taskRecords = {"nodes": [{"taskName": "完善客诉","taskNodeName": "WanShanKeSu"},{"taskName": "PCB判责","taskNodeName": "PCBPanZe"},{"taskName": "PCBA判责","taskNodeName": "PCBAPanZe"},{"taskName": "客服处理","taskNodeName": "KeFuChuLi"},{"taskName": "OA审批","taskNodeName": "OAShenPi"}],"connections": [{"from": "","to": "WanShanKeSu","depth": null},{"from": "","to": "PCBPanZe","depth": null},{"from": "","to": "PCBAPanZe","depth": null},{"from": "WanShanKeSu","to": "PCBPanZe","depth": null},{"from": "WanShanKeSu","to": "PCBAPanZe","depth": null},{"from": "PCBPanZe","to": "KeFuChuLi","depth": null},{"from": "PCBAPanZe","to": "KeFuChuLi","depth": null},{"from": "KeFuChuLi","to": "OAShenPi","depth": null},{"from": "OAShenPi","to": "KeFuChuLi","depth": null}]
}
showSeeksGraph() {let nodeArr = [];let endArr = [];let nodeObj = {start: [],end: [],};this.taskRecords.connections.forEach((item) => {if (!item.from) {item.from = 'start';}endArr.push(item.from);});this.taskRecords.nodes &&this.taskRecords.nodes.forEach((item) => {nodeArr.push(item.taskNodeName);nodeObj[item.taskNodeName] = [];});this.taskRecords.connections &&this.taskRecords.connections.forEach((item) => {nodeObj[item.from].push(item.to);});console.log(222, this.taskRecords.connections);for (let key in nodeObj) {if (nodeObj[key].length) {nodeObj[key].forEach((item) => {if (nodeObj[item].length > 1) {let arr = nodeObj[item].filter((n) => nodeObj[key].indexOf(n) > -1);let len = Math.floor(arr.length / 2);let centerIndex = this.taskRecords.connections.findIndex((no) => no.from == key && no.to == item);let currentObj = this.taskRecords.connections[centerIndex];this.taskRecords.connections.splice(centerIndex, 1);this.taskRecords.connections.splice(len, 0, currentObj);}});}}nodeArr &&nodeArr.forEach((item) => {if (endArr.indexOf(item) == -1) {this.taskRecords.connections.push({from: item,to: 'end',});}});let nodes = [{text: '开始',id: 'start',},];this.taskRecords.nodes &&this.taskRecords.nodes.forEach((item) => {nodes.push({id: item.taskNodeName,text: item.taskName,color: item.color,...item,});});nodes.push({text: '结束',id: 'end',});console.log('this.taskRecords.connections',nodes,this.taskRecords.connections);//需要指定 节点参数和连接线的参数this.graph_json_data = {rootId: 'start',nodes: nodes,lines: this.taskRecords.connections,};this.$refs.seeksRelationGraph.setJsonData(this.graph_json_data,(seeksRGGraph) => {});},

上面的代码就可以实现了。如果要i

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

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

相关文章

JavaScript下载文件(简单模式、跨域问题、文件压缩)

文章目录 简介简单文件下载通过模拟form表单提交通过XMLHttpRequest方式 跨域(oss)下载并压缩文件完整示例文件压缩跨域设置 简介 相信各位开发朋友都遇到过下载的文件的需求&#xff0c;有的非常简单&#xff0c;基本链接的形式就可以。 有的就比较复杂&#xff0c;涉及跨域…

【顶刊核心变量】中国地级市绿色金融试点改革试验区名单数据(2010-2023年)

一、测算方式&#xff1a; 参考《中国工业经济》崔惠玉&#xff08;2023&#xff09;老师的研究&#xff0c;2017 年&#xff0c;国务院决定将浙江、广东、江西、贵州和新疆的部分地区作为绿色金融改革创新试验 区的首批试点地区。试点地区在顶层设计、组织体系、产品创新、配…

Biomamba求职| 国奖+4篇一作SCI

转眼间我也要参加秋招啦&#xff0c;认真的求职帖&#xff0c;各位老师/老板欢迎联系~其它需要求职的小伙伴也欢迎把简历发给我们&#xff0c;大家一起找工作。 一、基本信息 姓名&#xff1a;Biomamba 性别&#xff1a;男 出厂年份&#xff1a;1998 籍贯&#xff1a;浙江…

flutter升级,从3.10.6升级到3.16.9 混编项目iOS跑不起来

flutter升级&#xff0c;从3.10.6升级到3.16.9&#xff0c;如果直接去终端用命令行flutter upgrade v3.16.9很难保证不进入 dev分支升级成beta版本。 所以采取了 https://docs.flutter.dev/release/archive 点击这里去进行升级&#xff0c;这个时候也不要直接替换&#xff0c…

Visual Studio 2022安装(含重生版)

前言&#xff1a; 昨天调试代码的时候发现程序怎么都运行不了&#xff0c;错误显示无法找到文件啊啊啊&#xff0c;能力有限&#xff0c;找不出错误源&#xff0c;然后就狠心删掉所有相关文件来“重新开始”&#xff01; 正文&#xff1a; 1.官网下载&#xff08;内定中文版…

GS-SLAM论文阅读笔记-CG-SLAM

前言 这是一篇不是最新的工作&#xff0c;我之前没有阅读&#xff0c;但是我前几天阅读GLC-SLAM的时候&#xff0c;发现它的一部分内容参考了CG-SLAM&#xff0c;并且CG-SLAM最近被ECCV2024接收&#xff0c;说明这是一片值得参考的好文章&#xff0c;接下来就阅读一下吧&#…

QUUID 使用详解

UUID 通常由 128 位&#xff08;16 字节&#xff09;组成&#xff0c;通常表示为 32 个十六进制数字&#xff0c;分为五个部分&#xff0c;格式如下&#xff1a; QUuid 是 Qt 框架中用于生成和处理 UUID&#xff08;通用唯一标识符&#xff09;的类。UUID 是一种标准的标识符格…

sklearn机器学习实战——随机森林回归与特征重要性分析全过程(附完整代码和结果图)

sklearn机器学习实战——随机森林回归与特征重要性分析全过程&#xff08;附完整代码和结果图&#xff09; 关于作者 作者&#xff1a;小白熊 作者简介&#xff1a;精通python、matlab、c#语言&#xff0c;擅长机器学习&#xff0c;深度学习&#xff0c;机器视觉&#xff0c;目…

知识图谱入门——7:阶段案例:使用 Protégé、Jupyter Notebook 中的 spaCy 和 Neo4j Desktop 搭建知识图谱

在 Windows 环境中结合使用 Protg、Jupyter Notebook 中的 spaCy 和 Neo4j Desktop&#xff0c;可以高效地实现从自然语言处理&#xff08;NLP&#xff09;到知识图谱构建的全过程。本案例将详细论述环境配置、步骤实现以及一些扩展和不足之处。 源文件已上传我的资源区。 文章…

【VScode】如何使用详细步骤【笔记】、配置 C / C ++【笔记】

2024 - 10 - 10 - 笔记 - 24 作者(Author)&#xff1a;郑龙浩(仟濹) 该笔记写于 2024-07-02 摘抄到博客上的时间是 2024-10-10 VScode配置 C / C 笔记 我是看了下方链接的视频后为了方便后期复习做的笔记: B站某UP主的视频如下&#xff1a; VScode配置C/C开发环境&#xff…

VMware桥接模式无法连接网络

windows下打开控制面板&#xff0c;找到WLAN&#xff0c;记住下面的名称&#xff08;带有VMware的都是虚拟机的网卡&#xff0c;要找到物理主机的网卡&#xff09; 回到VMware&#xff0c;编辑——打开虚拟网络编辑器 桥接选择上面的WLAN下的网络名称&#xff0c;确定即可。&…

需求9——通过一个小需求来体会service层的作用

昨天在完成了睿哥的需求验收之后&#xff0c;暂时没有其他任务&#xff0c;因此今天可能会比较有空闲时间。趁着这个机会&#xff0c;我打算把之前完成的一些需求进行总结&#xff0c;方便以后复习和参考。 在8月份的时候&#xff0c;我负责了一个需求&#xff0c;该需求的具体…

基于xml配置文件的Spring事务

在项目中对事务属性通常传播属性&#xff0c;回滚属性&#xff0c;隔离级别&#xff0c;超时属性都取默认值&#xff0c;只有只读属性会如下的配置&#xff1a; 什么意思&#xff1a;Service层你的类里的方法&#xff0c;以get&#xff0c;find&#xff0c;select等开头的方法是…

Robust多模态模型的开发

本文所涉及所有资源均在 传知代码平台 可获取。 目录 Robust 多模态模型&#xff1a;寻找遗失的模态&#xff01; 一、研究背景 二、模型结构和代码 三、数据集介绍 六、性能展示 六、实现过程 七、运行过程 Robust 多模态模型&#xff1a;寻找遗失的模态&#xff01; 近年来&a…

threejs-基础材质设置

一、介绍 主要内容&#xff1a;基础材质(贴图、高光、透明、环境、光照、环境遮蔽贴图) 主要属性&#xff1a; side: three.DoubleSide, //设置双面 color: 0xffffff, //颜色 map: texture, //纹理 transparent: true, // 透明度 aoMap: aoTexture, //ao贴图 aoMapIntensity: 1…

Linux下载安装MySQL8.4

这里写目录标题 一、准备工作查看系统环境查看系统架构卸载已安装的版本 二、下载MySQL安装包官网地址 三、安装过程上传到服务器目录解压缩&#xff0c;设置目录及权限配置my.cnf文件初始化数据库配置MySQL开放端口 一、准备工作 查看系统环境 确认Linux系统的版本和架构&am…

【js逆向学习】极志愿 javascript+python+rpc

JSRPC使用方式 逆向目标逆向过程逆向分析1、什么是 websocket2、websocket的原理3、总体过程3.1 环境说明3.2 python服务端代码3.3 python客户端代码 4、Sekiro-RPC4.1 执行方式4.2 客户端环境4.3 参数说明4.4 SK API4.5 python代码调试4.6 代码注入流程 逆向总结 逆向目标 网…

AI资深导师指导-ChatGPT深度科研工作应用、论文撰写、数据分析及机器学习与AI绘图

2022年11月30日&#xff0c;可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5&#xff0c;将人工智能的发展推向了一个新的高度。2023年4月&#xff0c;更强版本的ChatGPT4.0上线&#xff0c;文本、语音、图像等多模态交互方式使其在…

太速科技-607-基于FMC的12收和12发的光纤子卡

基于FMC的12收和12发的光纤子卡 一、板卡概述 本卡是一个FPGA夹层卡&#xff08;FMC&#xff09;模块&#xff0c;可提供高达2个CXP模块接口&#xff0c;提供12路收&#xff0c;12路发的光纤通道。每个通道支持10Gbps,通过Aurora协议&#xff0c;可以组成X4&#xff0…

LivePortrait:创新的肖像动画技术与深度伪造的预防措施

文章链接&#xff1a;https://arxiv.org/pdf/2407.03168 代码仓库&#xff1a;https://liveportrait.github.io 在数字媒体和娱乐领域&#xff0c;将静态肖像照片转换成动态视频是一个引人入胜的话题。最近&#xff0c;由快手科技的研究团队发表在arXiv上的一篇论文介绍了一种…