1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：前端的路人丁 分类：Toy博客 阅读(53) 违法举报

这篇具有很好参考价值的文章主要介绍了使用Jsmind实现前端流程图功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

效果：

jsmind教程,流程图

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

jsmind教程,流程图

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

代码：

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

npm install jsmind@latest --save

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

jsmind教程,流程图

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

/**
 * @license BSD
 * @copyright 2014-2023 hizzgdev@163.com
 * 
 * Project Home:
 *   https://github.com/hizzgdev/jsmind/
 */

/* important section */
.jsmind-inner {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
    outline: none;
}

/*box-shadow:0 0 2px #000;*/
.jsmind-inner {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jsmind-inner canvas {
    position: absolute;
}

/* z-index:1 */
svg.jsmind {
    position: absolute;
    z-index: 1;
}

canvas.jsmind {
    position: absolute;
    z-index: 1;
}

/* z-index:2 */
jmnodes {
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    width: 100% !important;
    right: 40px;
}

/*background color is necessary*/
jmnode {
    position: absolute;
    cursor: default;
    max-width: 400px;
    box-shadow: 0;
}

/* 自定义自己的主题 */
jmnodes.theme-034 jmnode {
    width: 200px;
    height: 62px;
    text-align: left;
    color: #192C44;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7px 20px;
    font-size: 13px;
    border-radius: 4px;
}

/* 节点样式 */
jmnodes.theme-034 jmnode:hover {}

/* 鼠标悬停的节点样式 */
jmnodes.theme-034 jmnode.selected {
    color: #192C44;
    background-color: transparent;
}

jmnodes.theme-034 .topicbody {
    pointer-events: none;

    .title {
        font-size: 12px;
    }

    .body {
        display: flex;
        align-items: center;
        margin-top: 6px;

        .left {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .right {
            font-size: 12px;
        }
    }
}

jmnodes.theme-034 .acitve {
    pointer-events: none;

    .title {
        font-size: 12px;
        color: white;
    }

    .body {
        display: flex;
        align-items: center;
        margin-top: 6px;
        color: white !important;

        .left {
            width: 7px;
            height: 7px;
            background-color: #fff !important;
            border-radius: 50%;
            margin-right: 10px;
        }

        .right {
            font-size: 12px;
            color: white !important;
        }
    }
}

/* 选中的节点样式 */
jmnodes.theme-034 jmnode.root {
    width: 180px;
    height: 55px;
    text-align: center;
    padding: 10px;
    font-size: 16px;
}

jmnodes.theme-034 jmnode.root.selected {
    color: #192C44;
}

/* 根节点样式 */
jmnodes.theme-034 jmexpander {}

/* 展开/关闭节点的控制点样式 */
jmnodes.theme-034 jmexpander:hover {}

vue文件代码如下：文章来源地址https://www.toymoban.com/news/detail-772368.html

<template>
  <div class="jsmind">
    <el-card>
      <div class="content" id="jsmind_container"></div>
    </el-card>
  </div>
</template>

<script>
import JSMind from "jsmind";
import "@/style/jsmind.scss";
import { nest034getJsmind } from "@/api/datapretreatment";
export default {
  components: {},
  data() {
    return {
      mindData: "", //jsmind相关配置
      jm: "", //jsmind对象
      curcodeInfo: null, //当前选中节点信息
    };
  },
  created() {},
  mounted() {
    this.handleMind();
  },
  watch: {
    curcodeInfo: {
      handler() {},
    },
  },
  computed: {},
  methods: {
    // 初始化jsmind-----主题需要去jsmind的style里面去修改自定义主题样式
    initjsmind() {
      // 初始化配置
      var options = {
        container: "jsmind_container",
        theme: "034",
        editable: false,
        view: {
          engine: "canvas", // 思维导图各节点之间线条的绘制引擎
          hmargin: 10, // 思维导图距容器外框的最小水平距离
          vmargin: 20, // 思维导图距容器外框的最小垂直距离
          line_width: 2, // 思维导图线条的粗细
          line_color: "#C6DDFFFF", // 思维导图线条的颜色
        },
        layout: {
          hspace: 80, // 节点之间的水平间距
          vspace: 10, // 节点之间的垂直间距
          pspace: 10, // 节点与连接线之间的水平间距(用于容纳节点收缩/展开控制器)
        },
      };
      this.jm = new JSMind(options);
      const mind = {
        /* 元数据，定义思维导图的名称、作者、版本等信息 */
        meta: {
          name: "流程图",
          author: "dingguowei",
          version: "0.2",
        },
        /* 数据格式声明 */
        format: "node_tree",
        /* 数据内容 */
        data: this.mindData,
      };
      this.jm.show(mind);
      var that = this;
      // 增加监听点击节点事件，获取当前选中的节点
      this.jm.add_event_listener(function (type, node) {
        if (that.jm.get_selected_node() !== null) {
          // 设置curcodeInfo属性，监听节点是否为根节点，根节点不会改变curcodeInfo也就不会查询右侧日志，只有子节点会改变topic
          if (that.jm.get_selected_node().isroot === false) {
            // 恢复上一个节点的状态
            if (that.curcodeInfo !== null) {
              that.curcodeInfo.topic.className = "topicbody";
            }

            // 不为根节点
            that.curcodeInfo = that.jm.get_selected_node();
            // 更新节点背景颜色
            that.curcodeInfo.topic.className = "acitve";
            that.jm.update_node(that.curcodeInfo.id);
            that.refresh(that.curcodeInfo);
          }
        }
      });
    },
    // 配置mind信息
    async handleMind() {
      var that = this;
      await nest034getJsmind().then((res) => {
        let mindData = {
          id: res.data.root.name,
          topic: res.data.root.name,
          "background-image": that.getbgcimg(res.data.root.status),
          children: [],
        };
        res.data.root.children.map((item) => {
          mindData.children.push({
            id: item.name,
            topic: this.gethtml(item),
            "background-image": that.getbgcimg(item.status),
            activeimg: that.getbgcimg(item.status, true),
            noacitveimg: that.getbgcimg(item.status),
          });
        });
        that.mindData = mindData;
        that.initjsmind();
      });
      //  获取节点 ID
      var node_id = this.jm.get_node("温度").id;
      // 选中节点
      this.jm.select_node(node_id);
    },
    // 获取背景图片
    getbgcimg(val, acitve) {
      let url = "";
      if (acitve) {
        switch (val) {
          case "processing":
            url = "./img/jsmind/curprocessing.png";
            break;
          case "error":
            url = "./img/jsmind/curerror.png";
            break;
          case "finse":
            url = "./img/jsmind/curfinse.png";
            break;
          case "notstart":
            url = "./img/jsmind/curnotstart.png";
            break;
          default:
            url = "./img/jsmind/curfinse.png";
            break;
        }
        return url;
      } else {
        switch (val) {
          case "processing":
            url = "./img/jsmind/processing.png";
            break;
          case "error":
            url = "./img/jsmind/error.png";
            break;
          case "finse":
            url = "./img/jsmind/finse.png";
            break;
          case "notstart":
            url = "./img/jsmind/notstart.png";
            break;
          default:
            url = "./img/jsmind/finse.png";
            break;
        }
        return url;
      }
    },
    // 生成html
    gethtml(val) {
      let divObj = document.createElement("div");
      divObj.className = "topicbody";
      // 要素名称
      let title = document.createElement("div");
      title.className = "title";
      title.innerHTML = val.name;
      divObj.appendChild(title);
      // 要素状态
      let body = document.createElement("div");
      body.className = "body";
      let left = document.createElement("div");
      left.className = "left";
      left.style.backgroundColor = {
        processing: "#015DF3FF",
        finse: "#00C553FF",
        notstart: "#C7C7C7FF",
        error: "#F98100FF",
      }[val.status];
      body.appendChild(left);
      let right = document.createElement("div");
      right.className = "right";
      right.innerHTML = {
        processing: "进行中",
        finse: "已完成",
        notstart: "未开始",
        error: "异常报警",
      }[val.status];
      right.style.color = {
        processing: "#015DF3FF",
        finse: "#00C553FF",
        notstart: "#C7C7C7FF",
        error: "#F98100FF",
      }[val.status];
      body.appendChild(right);
      divObj.appendChild(body);
      return divObj;
    },
    // 更新视图
    refresh(node) {
      this.mindData.children.map((item) => {
        if (item.id === node.id) {
          item["background-image"] = item["activeimg"];
        } else {
          item["background-image"] = item["noacitveimg"];
        }
      });
      const mind = {
        /* 元数据，定义思维导图的名称、作者、版本等信息 */
        meta: {
          name: "流程图",
          author: "dingguowei",
          version: "0.2",
        },
        /* 数据格式声明 */
        format: "node_tree",
        /* 数据内容 */
        data: this.mindData,
      };
      this.jm.show(mind);
    },
  },
};
</script>
<style lang="scss" scoped>
.jsmind {
  width: 100%;
  //   height: 460px;
  .content {
    height: 420px;
    width: 100%;
  }
}
</style>

到了这里，关于使用Jsmind实现前端流程图功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 流程图实现，基于vue2实现的流程图

    流程图实现，基于vue2实现的流程图

    flex布局 + 伪元素实现竖直的连接线+组件递归 2.1基础的（未截全，大致长这样）  2.2带有收缩功能的，可以展开和收缩并显示数量     4.项目源码地址 GitHub - yft-code/flow: 流程图 纯css实现流程图

    2024年02月16日
    浏览(45)
  • 前端流程图框架11个：开发组态图、思维导图、拓扑图必备

    前端流程图框架11个：开发组态图、思维导图、拓扑图必备

    在前端开发中，实现流程图通常涉及以下几个方面： HTML 结构 ：使用 HTML 标签来定义流程图的结构，如使用 div 元素表示节点，使用 svg 元素表示连接线等。 CSS 样式 ：使用 CSS 样式来定义流程图的外观，包括节点的样式、连接线的样式、文本的样式等。可以使用 CSS 属性来设

    2024年04月15日
    浏览(71)
  • 前端Web实战：从零打造一个类Visio的流程图拓扑图绘图工具

    前端Web实战：从零打造一个类Visio的流程图拓扑图绘图工具

    大家好，本系列从Web前端实战的角度，给大家分享介绍如何从零打造一个自己专属的绘图工具，实现流程图、拓扑图、脑图等类Visio的绘图工具。 免费好用、 专属自己的绘图工具 前端项目实战学习 如何从0搭建一个前端项目等基础框架 项目设计思路及优雅的架构技巧 开源项

    2024年02月16日
    浏览(34)

  • 生成一篇博客，详细讲解springboot的单点登录功能，有流程图，有源码demo

    SpringBoot是目前非常流行的一个Java开发框架，它以简洁的配置和快速的开发效率著称。在实际应用中，单点登录是一个非常重要的功能，它可以让用户在多个应用系统中使用同一个账号登录，提高用户体验和安全性。本文将详细讲解如何在SpringBoot中实现单点登录功能，并提供

    2024年02月08日
    浏览(44)
  • vscode流程图插件使用

    vscode流程图插件使用

    1.在vscode中点击左下角设置然后选择扩展。 2.在扩展中搜索Draw.io Integration，安装上面第一个插件。 3.安装插件后在工程中创建一个后缀为drawio的文件并且双击打开即可绘制流程图

    2024年02月11日
    浏览(40)
  • vue使用jsplumb 流程图

    vue使用jsplumb 流程图

    安装jsPlumb库：在Vue项目中使用npm或yarn安装jsPlumb库。 npm install jsplumb 创建一个Vue组件：创建一个Vue组件来容纳jsPlumb的功能和呈现。 效果图：  初始化jsPlumb一定要在mounted函数里面，要执行在dom渲染完成的时候 一定要设置绑定的容器，不然连线的容器外加入任何其他布局元素

    2024年02月12日
    浏览(37)
  • 流程图软件Visio的使用笔记

    流程图软件Visio的使用笔记

    一、概述 Microsoft Visio 是Office软件系列中的负责绘制流程图和示意图的软件，是一款便于IT和商务人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。 也是工作中常用的软件之一，我们经常用它来画流程图和电源树等，下面就使用软件做的一些笔记，希望对初

    2024年02月09日
    浏览(44)
  • Vue实现流程图，借鉴vue-tree-color 实现流程框架技术

    Vue实现流程图，借鉴vue-tree-color 实现流程框架技术

    实现组织架构图(vue-org-tree) 如果向使用原来的依赖可以使用这个人的，因为我也是根据这个博客大佬仿照Vue-org-tree实现的方案 对此有几点不惑，问了大佬，大佬也没有回复我 className 貌似不起作用，看了文章底部，她也意识到这个问题，但是没有给出详细的解决方案 node.js中

    2024年02月06日
    浏览(45)
  • vue 复杂的流程图实现--antv/g6

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

    可以先看下对应的文档：G6 Demos - AntV  npm install --save @antv/g6 实现如图：  

    2024年02月08日
    浏览(48)
  • 如何使用drawio画流程图以及导入导出

    如何使用drawio画流程图以及导入导出

    你可以在线使用drawio, 或者drawon创建很多不同类型的图表。 如何使用编辑器，让我们以一个最基本的流程图开始。 流程图，就是让你可视化的描述一个过程或者系统。 图形和很少部分的文字表达就可以让读者很快的理解他们需要什么。 为了便于大家更直观的理解，我们在

    2024年02月07日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包