需求:實(shí)現(xiàn)流程圖功能，根據(jù)狀態(tài)不同顯示不同的顏色，點(diǎn)擊有對(duì)應(yīng)的點(diǎn)擊顏色
思想：根據(jù)jsmind構(gòu)建思維導(dǎo)圖，改變節(jié)點(diǎn)背景顏色，獲取點(diǎn)擊節(jié)點(diǎn)事件當(dāng)點(diǎn)擊節(jié)點(diǎn)是設(shè)置節(jié)點(diǎn)選中背景圖片。
注意：由于jsmind更新各版本api都有很大改動(dòng)，所以我使用的都是官方文檔注明的基于各版本都支持的api
效果：
?這里的要素是根據(jù)接口返回的，具體接口數(shù)據(jù)如下：
?root是根節(jié)點(diǎn)，chrldren是子要素，可以根據(jù)自己的需求自行改造
代碼：
先引入jsmind庫(kù)（我引入的最新版本0.5）
npm install jsmind@latest --save找到剛才引入vue中的jsmind的npm包，可以看到j(luò)smind.css,在這里可以修改我們想要的樣式，但是如果在這里修改是不會(huì)更新到git版本里面去，所以我們需要在src->style文件夾內(nèi)新scss文件，這樣我們改動(dòng)樣式可以更新到git版本控制中。
?新建一個(gè)scss文件內(nèi)容如下：（自己新建了一個(gè)主題名字為034，可以自行更改）文章來源：http://www.zghlxwxcb.cn/news/detail-772368.html
/**
* @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;
}
/* 節(jié)點(diǎn)樣式 */
jmnodes.theme-034 jmnode:hover {}
/* 鼠標(biāo)懸停的節(jié)點(diǎn)樣式 */
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;
}
}
}
/* 選中的節(jié)點(diǎn)樣式 */
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;
}
/* 根節(jié)點(diǎn)樣式 */
jmnodes.theme-034 jmexpander {}
/* 展開/關(guān)閉節(jié)點(diǎn)的控制點(diǎn)樣式 */
jmnodes.theme-034 jmexpander:hover {}vue文件代碼如下：文章來源地址http://www.zghlxwxcb.cn/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相關(guān)配置
jm: "", //jsmind對(duì)象
curcodeInfo: null, //當(dāng)前選中節(jié)點(diǎn)信息
};
},
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", // 思維導(dǎo)圖各節(jié)點(diǎn)之間線條的繪制引擎
hmargin: 10, // 思維導(dǎo)圖距容器外框的最小水平距離
vmargin: 20, // 思維導(dǎo)圖距容器外框的最小垂直距離
line_width: 2, // 思維導(dǎo)圖線條的粗細(xì)
line_color: "#C6DDFFFF", // 思維導(dǎo)圖線條的顏色
},
layout: {
hspace: 80, // 節(jié)點(diǎn)之間的水平間距
vspace: 10, // 節(jié)點(diǎn)之間的垂直間距
pspace: 10, // 節(jié)點(diǎn)與連接線之間的水平間距(用于容納節(jié)點(diǎn)收縮/展開控制器)
},
};
this.jm = new JSMind(options);
const mind = {
/* 元數(shù)據(jù)，定義思維導(dǎo)圖的名稱、作者、版本等信息 */
meta: {
name: "流程圖",
author: "dingguowei",
version: "0.2",
},
/* 數(shù)據(jù)格式聲明 */
format: "node_tree",
/* 數(shù)據(jù)內(nèi)容 */
data: this.mindData,
};
this.jm.show(mind);
var that = this;
// 增加監(jiān)聽點(diǎn)擊節(jié)點(diǎn)事件，獲取當(dāng)前選中的節(jié)點(diǎn)
this.jm.add_event_listener(function (type, node) {
if (that.jm.get_selected_node() !== null) {
// 設(shè)置curcodeInfo屬性，監(jiān)聽節(jié)點(diǎn)是否為根節(jié)點(diǎn)，根節(jié)點(diǎn)不會(huì)改變curcodeInfo也就不會(huì)查詢右側(cè)日志，只有子節(jié)點(diǎn)會(huì)改變topic
if (that.jm.get_selected_node().isroot === false) {
// 恢復(fù)上一個(gè)節(jié)點(diǎn)的狀態(tài)
if (that.curcodeInfo !== null) {
that.curcodeInfo.topic.className = "topicbody";
}
// 不為根節(jié)點(diǎn)
that.curcodeInfo = that.jm.get_selected_node();
// 更新節(jié)點(diǎn)背景顏色
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();
});
// 獲取節(jié)點(diǎn) ID
var node_id = this.jm.get_node("溫度").id;
// 選中節(jié)點(diǎn)
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);
// 要素狀態(tài)
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: "進(jìn)行中",
finse: "已完成",
notstart: "未開始",
error: "異常報(bào)警",
}[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 = {
/* 元數(shù)據(jù)，定義思維導(dǎo)圖的名稱、作者、版本等信息 */
meta: {
name: "流程圖",
author: "dingguowei",
version: "0.2",
},
/* 數(shù)據(jù)格式聲明 */
format: "node_tree",
/* 數(shù)據(jù)內(nèi)容 */
data: this.mindData,
};
this.jm.show(mind);
},
},
};
</script>
<style lang="scss" scoped>
.jsmind {
width: 100%;
// height: 460px;
.content {
height: 420px;
width: 100%;
}
}
</style>
到了這里，關(guān)于使用Jsmind實(shí)現(xiàn)前端流程圖功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
