devbox
木道寻08
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用Jsmind实现前端流程图功能_jsmind教程

作者：木道寻08 | 2024-08-04 19:00:51

赞

踩

jsmind教程

需求:实现流程图功能，根据状态不同显示不同的颜色，点击有对应的点击颜色

思想：根据jsmind构建思维导图，改变节点背景颜色，获取点击节点事件当点击节点是设置节点选中背景图片。

注意：由于jsmind更新各版本api都有很大改动，所以我使用的都是官方文档注明的基于各版本都支持的api

效果：

 这里的要素是根据接口返回的，具体接口数据如下：

 root是根节点，chrldren是子要素，可以根据自己的需求自行改造

代码：

先引入jsmind库（我引入的最新版本0.5）

npm install jsmind@latest --save

找到刚才引入vue中的jsmind的npm包，可以看到jsmind.css,在这里可以修改我们想要的样式，但是如果在这里修改是不会更新到git版本里面去，所以我们需要在src->style文件夹内新scss文件，这样我们改动样式可以更新到git版本控制中。

 新建一个scss文件内容如下：（自己新建了一个主题名字为034，可以自行更改）

  1. /**
  2.  * @license BSD
  3.  * @copyright 2014-2023 hizzgdev@163.com
  4.  * 
  5.  * Project Home:
  6.  *   https://github.com/hizzgdev/jsmind/
  7.  */
  8.  
  9. /* important section */
  10. .jsmind-inner {
  11.     position: relative;
  12.     overflow: auto;
  13.     width: 100%;
  14.     height: 100%;
  15.     outline: none;
  16. }
  17.  
  18. /*box-shadow:0 0 2px #000;*/
  19. .jsmind-inner {
  20.     moz-user-select: -moz-none;
  21.     -moz-user-select: none;
  22.     -o-user-select: none;
  23.     -khtml-user-select: none;
  24.     -webkit-user-select: none;
  25.     -ms-user-select: none;
  26.     user-select: none;
  27. }
  28.  
  29. .jsmind-inner canvas {
  30.     position: absolute;
  31. }
  32.  
  33. /* z-index:1 */
  34. svg.jsmind {
  35.     position: absolute;
  36.     z-index: 1;
  37. }
  38.  
  39. canvas.jsmind {
  40.     position: absolute;
  41.     z-index: 1;
  42. }
  43.  
  44. /* z-index:2 */
  45. jmnodes {
  46.     position: absolute;
  47.     z-index: 2;
  48.     background-color: rgba(0, 0, 0, 0);
  49.     width: 100% !important;
  50.     right: 40px;
  51. }
  52.  
  53. /*background color is necessary*/
  54. jmnode {
  55.     position: absolute;
  56.     cursor: default;
  57.     max-width: 400px;
  58.     box-shadow: 0;
  59. }
  60.  
  61. /* 自定义自己的主题 */
  62. jmnodes.theme-034 jmnode {
  63.     width: 200px;
  64.     height: 62px;
  65.     text-align: left;
  66.     color: #192C44;
  67.     background-repeat: no-repeat;
  68.     background-size: cover;
  69.     padding: 7px 20px;
  70.     font-size: 13px;
  71.     border-radius: 4px;
  72. }
  73.  
  74. /* 节点样式 */
  75. jmnodes.theme-034 jmnode:hover {}
  76.  
  77. /* 鼠标悬停的节点样式 */
  78. jmnodes.theme-034 jmnode.selected {
  79.     color: #192C44;
  80.     background-color: transparent;
  81. }
  82.  
  83. jmnodes.theme-034 .topicbody {
  84.     pointer-events: none;
  85.  
  86.     .title {
  87.         font-size: 12px;
  88.     }
  89.  
  90.     .body {
  91.         display: flex;
  92.         align-items: center;
  93.         margin-top: 6px;
  94.  
  95.         .left {
  96.             width: 7px;
  97.             height: 7px;
  98.             border-radius: 50%;
  99.             margin-right: 10px;
  100.         }
  101.  
  102.         .right {
  103.             font-size: 12px;
  104.         }
  105.     }
  106. }
  107.  
  108. jmnodes.theme-034 .acitve {
  109.     pointer-events: none;
  110.  
  111.     .title {
  112.         font-size: 12px;
  113.         color: white;
  114.     }
  115.  
  116.     .body {
  117.         display: flex;
  118.         align-items: center;
  119.         margin-top: 6px;
  120.         color: white !important;
  121.  
  122.         .left {
  123.             width: 7px;
  124.             height: 7px;
  125.             background-color: #fff !important;
  126.             border-radius: 50%;
  127.             margin-right: 10px;
  128.         }
  129.  
  130.         .right {
  131.             font-size: 12px;
  132.             color: white !important;
  133.         }
  134.     }
  135. }
  136.  
  137. /* 选中的节点样式 */
  138. jmnodes.theme-034 jmnode.root {
  139.     width: 180px;
  140.     height: 55px;
  141.     text-align: center;
  142.     padding: 10px;
  143.     font-size: 16px;
  144. }
  145.  
  146. jmnodes.theme-034 jmnode.root.selected {
  147.     color: #192C44;
  148. }
  149.  
  150. /* 根节点样式 */
  151. jmnodes.theme-034 jmexpander {}
  152.  
  153. /* 展开/关闭节点的控制点样式 */
  154. jmnodes.theme-034 jmexpander:hover {}

vue文件代码如下：

  1. <template>
  2.   <div class="jsmind">
  3.     <el-card>
  4.       <div class="content" id="jsmind_container"></div>
  5.     </el-card>
  6.   </div>
  7. </template>
  8.  
  9. <script>
  10. import JSMind from "jsmind";
  11. import "@/style/jsmind.scss";
  12. import { nest034getJsmind } from "@/api/datapretreatment";
  13. export default {
  14.   components: {},
  15.   data() {
  16.     return {
  17.       mindData: "", //jsmind相关配置
  18.       jm: "", //jsmind对象
  19.       curcodeInfo: null, //当前选中节点信息
  20.     };
  21.   },
  22.   created() {},
  23.   mounted() {
  24.     this.handleMind();
  25.   },
  26.   watch: {
  27.     curcodeInfo: {
  28.       handler() {},
  29.     },
  30.   },
  31.   computed: {},
  32.   methods: {
  33.     // 初始化jsmind-----主题需要去jsmind的style里面去修改自定义主题样式
  34.     initjsmind() {
  35.       // 初始化配置
  36.       var options = {
  37.         container: "jsmind_container",
  38.         theme: "034",
  39.         editable: false,
  40.         view: {
  41.           engine: "canvas", // 思维导图各节点之间线条的绘制引擎
  42.           hmargin: 10, // 思维导图距容器外框的最小水平距离
  43.           vmargin: 20, // 思维导图距容器外框的最小垂直距离
  44.           line_width: 2, // 思维导图线条的粗细
  45.           line_color: "#C6DDFFFF", // 思维导图线条的颜色
  46.         },
  47.         layout: {
  48.           hspace: 80, // 节点之间的水平间距
  49.           vspace: 10, // 节点之间的垂直间距
  50.           pspace: 10, // 节点与连接线之间的水平间距(用于容纳节点收缩/展开控制器)
  51.         },
  52.       };
  53.       this.jm = new JSMind(options);
  54.       const mind = {
  55.         /* 元数据，定义思维导图的名称、作者、版本等信息 */
  56.         meta: {
  57.           name: "流程图",
  58.           author: "dingguowei",
  59.           version: "0.2",
  60.         },
  61.         /* 数据格式声明 */
  62.         format: "node_tree",
  63.         /* 数据内容 */
  64.         data: this.mindData,
  65.       };
  66.       this.jm.show(mind);
  67.       var that = this;
  68.       // 增加监听点击节点事件，获取当前选中的节点
  69.       this.jm.add_event_listener(function (type, node) {
  70.         if (that.jm.get_selected_node() !== null) {
  71.           // 设置curcodeInfo属性，监听节点是否为根节点，根节点不会改变curcodeInfo也就不会查询右侧日志，只有子节点会改变topic
  72.           if (that.jm.get_selected_node().isroot === false) {
  73.             // 恢复上一个节点的状态
  74.             if (that.curcodeInfo !== null) {
  75.               that.curcodeInfo.topic.className = "topicbody";
  76.             }
  77.  
  78.             // 不为根节点
  79.             that.curcodeInfo = that.jm.get_selected_node();
  80.             // 更新节点背景颜色
  81.             that.curcodeInfo.topic.className = "acitve";
  82.             that.jm.update_node(that.curcodeInfo.id);
  83.             that.refresh(that.curcodeInfo);
  84.           }
  85.         }
  86.       });
  87.     },
  88.     // 配置mind信息
  89.     async handleMind() {
  90.       var that = this;
  91.       await nest034getJsmind().then((res) => {
  92.         let mindData = {
  93.           id: res.data.root.name,
  94.           topic: res.data.root.name,
  95.           "background-image": that.getbgcimg(res.data.root.status),
  96.           children: [],
  97.         };
  98.         res.data.root.children.map((item) => {
  99.           mindData.children.push({
  100.             id: item.name,
  101.             topic: this.gethtml(item),
  102.             "background-image": that.getbgcimg(item.status),
  103.             activeimg: that.getbgcimg(item.status, true),
  104.             noacitveimg: that.getbgcimg(item.status),
  105.           });
  106.         });
  107.         that.mindData = mindData;
  108.         that.initjsmind();
  109.       });
  110.       //  获取节点 ID
  111.       var node_id = this.jm.get_node("温度").id;
  112.       // 选中节点
  113.       this.jm.select_node(node_id);
  114.     },
  115.     // 获取背景图片
  116.     getbgcimg(val, acitve) {
  117.       let url = "";
  118.       if (acitve) {
  119.         switch (val) {
  120.           case "processing":
  121.             url = "./img/jsmind/curprocessing.png";
  122.             break;
  123.           case "error":
  124.             url = "./img/jsmind/curerror.png";
  125.             break;
  126.           case "finse":
  127.             url = "./img/jsmind/curfinse.png";
  128.             break;
  129.           case "notstart":
  130.             url = "./img/jsmind/curnotstart.png";
  131.             break;
  132.           default:
  133.             url = "./img/jsmind/curfinse.png";
  134.             break;
  135.         }
  136.         return url;
  137.       } else {
  138.         switch (val) {
  139.           case "processing":
  140.             url = "./img/jsmind/processing.png";
  141.             break;
  142.           case "error":
  143.             url = "./img/jsmind/error.png";
  144.             break;
  145.           case "finse":
  146.             url = "./img/jsmind/finse.png";
  147.             break;
  148.           case "notstart":
  149.             url = "./img/jsmind/notstart.png";
  150.             break;
  151.           default:
  152.             url = "./img/jsmind/finse.png";
  153.             break;
  154.         }
  155.         return url;
  156.       }
  157.     },
  158.     // 生成html
  159.     gethtml(val) {
  160.       let divObj = document.createElement("div");
  161.       divObj.className = "topicbody";
  162.       // 要素名称
  163.       let title = document.createElement("div");
  164.       title.className = "title";
  165.       title.innerHTML = val.name;
  166.       divObj.appendChild(title);
  167.       // 要素状态
  168.       let body = document.createElement("div");
  169.       body.className = "body";
  170.       let left = document.createElement("div");
  171.       left.className = "left";
  172.       left.style.backgroundColor = {
  173.         processing: "#015DF3FF",
  174.         finse: "#00C553FF",
  175.         notstart: "#C7C7C7FF",
  176.         error: "#F98100FF",
  177.       }[val.status];
  178.       body.appendChild(left);
  179.       let right = document.createElement("div");
  180.       right.className = "right";
  181.       right.innerHTML = {
  182.         processing: "进行中",
  183.         finse: "已完成",
  184.         notstart: "未开始",
  185.         error: "异常报警",
  186.       }[val.status];
  187.       right.style.color = {
  188.         processing: "#015DF3FF",
  189.         finse: "#00C553FF",
  190.         notstart: "#C7C7C7FF",
  191.         error: "#F98100FF",
  192.       }[val.status];
  193.       body.appendChild(right);
  194.       divObj.appendChild(body);
  195.       return divObj;
  196.     },
  197.     // 更新视图
  198.     refresh(node) {
  199.       this.mindData.children.map((item) => {
  200.         if (item.id === node.id) {
  201.           item["background-image"] = item["activeimg"];
  202.         } else {
  203.           item["background-image"] = item["noacitveimg"];
  204.         }
  205.       });
  206.       const mind = {
  207.         /* 元数据，定义思维导图的名称、作者、版本等信息 */
  208.         meta: {
  209.           name: "流程图",
  210.           author: "dingguowei",
  211.           version: "0.2",
  212.         },
  213.         /* 数据格式声明 */
  214.         format: "node_tree",
  215.         /* 数据内容 */
  216.         data: this.mindData,
  217.       };
  218.       this.jm.show(mind);
  219.     },
  220.   },
  221. };
  222. </script>
  223. <style lang="scss" scoped>
  224. .jsmind {
  225.   width: 100%;
  226.   //   height: 460px;
  227.   .content {
  228.     height: 420px;
  229.     width: 100%;
  230.   }
  231. }
  232. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/929118
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号