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

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

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

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

效果：

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

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

代码：

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

找到刚才引入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. */
9. /* important section */
10. .jsmind-inner {
11. position: relative;
12. overflow: auto;
13. width: 100%;
14. height: 100%;
15. outline: none;
16. }
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. }
29. .jsmind-inner canvas {
30. position: absolute;
31. }
33. /* z-index:1 */
34. svg.jsmind {
35. position: absolute;
36. z-index: 1;
37. }
39. canvas.jsmind {
40. position: absolute;
41. z-index: 1;
42. }
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. }
53. /*background color is necessary*/
54. jmnode {
55. position: absolute;
56. cursor: default;
57. max-width: 400px;
58. box-shadow: 0;
59. }
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. }
74. /* 节点样式 */
75. jmnodes.theme-034 jmnode:hover {}
77. /* 鼠标悬停的节点样式 */
78. jmnodes.theme-034 jmnode.selected {
79. color: #192C44;
80. background-color: transparent;
81. }
83. jmnodes.theme-034 .topicbody {
84. pointer-events: none;
86. .title {
87. font-size: 12px;
88. }
90. .body {
91. display: flex;
92. align-items: center;
93. margin-top: 6px;
95. .left {
96. width: 7px;
97. height: 7px;
98. border-radius: 50%;
99. margin-right: 10px;
100. }
102. .right {
103. font-size: 12px;
104. }
105. }
106. }
108. jmnodes.theme-034 .acitve {
109. pointer-events: none;
111. .title {
112. font-size: 12px;
113. color: white;
114. }
116. .body {
117. display: flex;
118. align-items: center;
119. margin-top: 6px;
120. color: white !important;
122. .left {
123. width: 7px;
124. height: 7px;
125. background-color: #fff !important;
126. border-radius: 50%;
127. margin-right: 10px;
128. }
130. .right {
131. font-size: 12px;
132. color: white !important;
133. }
134. }
135. }
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. }
146. jmnodes.theme-034 jmnode.root.selected {
147. color: #192C44;
148. }
150. /* 根节点样式 */
151. jmnodes.theme-034 jmexpander {}
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>
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. }
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>