From 46c6b7f02ad11651682d5597f58877f2284525cc Mon Sep 17 00:00:00 2001
From: feige <feige@qq.com>
Date: 星期日, 27 八月 2023 09:34:15 +0800
Subject: [PATCH] 增加了MapData.js和superMindMap.vue文件
---
ruoyi-ui/src/views/components/superMindmap.vue | 368 ++++++++++++++++++++++++++++++++++++++++
ruoyi-ui/src/views/components/MapData.js | 147 ++++++++++++++++
2 files changed, 515 insertions(+), 0 deletions(-)
diff --git a/ruoyi-ui/src/views/components/MapData.js b/ruoyi-ui/src/views/components/MapData.js
new file mode 100644
index 0000000..a443b72
--- /dev/null
+++ b/ruoyi-ui/src/views/components/MapData.js
@@ -0,0 +1,147 @@
+const webMap = {
+ "label": "鍓嶇",
+ "prop": "web",
+ "url": 'https://blog.csdn.net/weixin_41192489/category_9421858.html',
+ "link": "鍗氬",
+ "children":
+ [
+ {
+ "label": "缂栫▼璇█",
+ "prop": "codeType",
+ "disabled": true,
+ "children":
+ [
+ {
+ "label": "HTML",
+ "prop": "HTML",
+ },
+ {
+ "label": "CSS",
+ "prop": "CSS",
+ },
+ {
+ "label": "Javascript",
+ "prop": "Javascript",
+ },
+ ]
+ },
+ {
+ "label": "JS妗嗘灦",
+ "prop": "jsFrame",
+ "disabled": true,
+ "children":
+ [
+ {
+ "label": "Vue",
+ "prop": "Vue",
+ },
+ {
+ "label": "React",
+ "prop": "React",
+ },
+ {
+ "label": "Angular",
+ "prop": "Angular",
+ dicType: 'doc'
+ },
+ ]
+ },
+ {
+ "label": "UI妗嗘灦",
+ "prop": "uiFrame",
+ "disabled": true,
+ "url": '',
+ "children":
+ [
+ {
+ "label": "Element UI",
+ "prop": "element_ui",
+ "url": 'https://element.eleme.cn/#/zh-CN/component/i18n',
+ "link": "瀹樼綉",
+ },
+ {
+ "label": "iview UI",
+ "prop": "iview UI",
+ "url": 'http://v1.iviewui.com/docs/introduce',
+ "link": "瀹樼綉",
+ },
+ {
+ "label": "layUI",
+ "prop": "layUI",
+ "url": 'https://www.layui.com/doc/',
+ "link": "瀹樼綉",
+ },
+ {
+ "label": "Ant Design",
+ "prop": "Ant Design",
+ "url": 'https://www.antdv.com/docs/vue/introduce-cn/',
+ "link": "瀹樼綉",
+ },
+ ]
+ },
+ ]
+}
+const serverMap = {
+ "label": "鍚庣",
+ "prop": "server",
+ "url": 'https://blog.csdn.net/weixin_41192489/category_11044490.html',
+ "link": "鍗氬",
+ "children":
+ [
+ {
+ "label": "缂栫▼璇█",
+ "prop": "codeType",
+ disabled:true,
+ "children":
+ [
+ {
+ "label": "Node.js",
+ "prop": "nodejs",
+ dicType: 'doc'
+ },
+ {
+ "label": "Java",
+ "prop": "java",
+ },
+ ]
+ },
+ {
+ "label": "妗嗘灦",
+ "prop": "frame",
+ disabled:true,
+ "children":
+ [
+ {
+ "label": "Koa2",
+ "prop": "koa2",
+ },
+ ]
+ },
+ {
+ "label": "鏁版嵁搴�",
+ "prop": "database",
+ disabled:true,
+ "children":
+ [
+ {
+ "label": "Redis",
+ "prop": "Redis",
+ dicType: 'doc'
+ },
+ {
+ "label": "MongoDB",
+ "prop": "MongoDB",
+ dicType: 'doc'
+ },
+ {
+ "label": "MySQL",
+ "prop": "MySQL",
+ dicType: 'doc'
+ },
+ ]
+ },
+ ]
+}
+export default {
+ webMap, serverMap
+}
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/components/superMindmap.vue b/ruoyi-ui/src/views/components/superMindmap.vue
new file mode 100644
index 0000000..8c30a33
--- /dev/null
+++ b/ruoyi-ui/src/views/components/superMindmap.vue
@@ -0,0 +1,368 @@
+<template>
+ <div :id="id"></div>
+</template>
+<script>
+ import * as d3 from 'd3';
+
+ export default {
+ props: {
+ data: Object,
+ nodeWidth:
+ {
+ type: Number,
+ default: 160
+ },
+ nodeHeight:
+ {
+ type: Number,
+ default: 40
+ },
+ active:
+ {
+ type: String,
+ default: ''
+ }
+ },
+ data() {
+ return {
+ id: 'TreeMap' + randomString(4),
+ deep: 0,
+ treeData: null,
+ show: true,
+ demoData: {
+ "label": "涓浗",
+ link: "demo",
+ url: 'https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD/1122445?fr=aladdin',
+ "children":
+ [
+ {
+ "label": "娴欐睙",
+ disabled: true,
+ "children":
+ [
+ {"label": "鏉窞"},
+ {"label": "瀹佹尝"},
+ {"label": "娓╁窞"},
+ {"label": "缁嶅叴"}
+ ]
+ },
+ {
+ "label": "骞胯タ",
+ "children":
+ [
+ {
+ "label": "妗傛灄",
+ "children":
+ [
+ {"label": "绉�宄板尯"},
+ {"label": "鍙犲僵鍖�"},
+ {"label": "璞″北鍖�"},
+ {"label": "涓冩槦鍖�"}
+ ]
+ },
+ {"label": "鍗楀畞"},
+ {"label": "鏌冲窞"},
+ {"label": "闃插煄娓�"}
+ ]
+ },
+ ]
+ }
+ }
+ },
+ mounted() {
+ this.$nextTick(
+ () => {
+ this.drawMap()
+ }
+ )
+ },
+ methods: {
+ drawMap() {
+ let that = this
+ // 婧愭暟鎹�
+ let data = {}
+ // 鍒ゆ柇data鏄惁涓虹┖瀵硅薄
+ if (this.data && JSON.stringify(this.data) !== "{}") {
+ data = this.data
+ } else {
+ data = this.demoData
+ }
+ if (!this.treeData) {
+ this.treeData = data
+ } else {
+ // 娓呯┖鐢诲竷
+ d3.select('#' + this.id).selectAll("svg").remove();
+ }
+ let leafList = []
+ getTreeLeaf(data, leafList)
+ let leafNum = leafList.length
+ let TreeDeep = getDepth(data)
+ // 宸﹀彸鍐呰竟璺�
+ let mapPaddingLR = 10
+ // 涓婁笅鍐呰竟璺�
+ let mapPaddingTB = 0
+ let mapWidth = this.nodeWidth * TreeDeep + mapPaddingLR * 2;
+ let mapHeight = (this.nodeHeight - 4) * leafNum + mapPaddingTB * 2;
+ // 瀹氫箟鐢诲竷鈥斺�� 澶栬竟璺� 10px
+ let svgMap = d3.select('#' + this.id).append('svg').attr("width", mapWidth).attr("height", mapHeight).style("margin", "0px")
+ // 瀹氫箟鏍戠姸鍥剧敾甯�
+ let treeMap = svgMap.append("g").attr("transform", "translate(" + mapPaddingLR + "," + (mapHeight / 2 - mapPaddingTB) + ")");
+ // 灏嗘簮鏁版嵁杞崲涓哄彲浠ョ敓鎴愭爲鐘跺浘鐨勬暟鎹�(鏈夎妭鐐� nodes 鍜岃繛绾� links )
+ let treeData = d3.tree()
+ // 璁剧疆姣忎釜鑺傜偣鐨勫昂瀵�
+ .nodeSize(
+ // 鑺傜偣鍖呭惈鍚庢柟鐨勮繛鎺ョ嚎 [鑺傜偣楂樺害锛岃妭鐐瑰搴
+ [this.nodeHeight, this.nodeWidth]
+ )
+ // 璁剧疆鏍戠姸鍥捐妭鐐逛箣闂寸殑鍨傜洿闂撮殧
+ .separation(function (a, b) {
+ // 鏍峰紡涓�锛氳妭鐐归棿绛夐棿璺�
+ // return (a.parent == b.parent ? 1: 2) / a.depth;
+ // 鏍峰紡浜岋細鏍规嵁鑺傜偣瀛愯妭鐐圭殑鏁伴噺锛屽姩鎬佽皟鏁磋妭鐐归棿鐨勯棿璺�
+ let rate = (a.parent == b.parent ? (b.children ? b.children.length / 2 : 1) : 2) / a.depth
+ // 闂磋窛姣斾緥涓嶈兘灏忎簬0.7锛岄伩鍏嶉棿璺濆お灏忚�岄噸鍙�
+ if (rate < 0.7) {
+ rate = 0.7
+ }
+ return rate;
+ })(
+ // 鍒涘缓灞傜骇甯冨眬锛屽婧愭暟鎹繘琛屾暟鎹浆鎹�
+ d3.hierarchy(data).sum(function (node) {
+ // 鍑芥暟鎵ц鐨勬鏁帮紝涓烘爲鑺傜偣鐨勬�绘暟,node涓烘瘡涓妭鐐�
+ return node.value;
+ })
+ )
+ // 璐濆灏旀洸绾跨敓鎴愬櫒
+ let B茅zier_curve_generator = d3.linkHorizontal()
+ .x(function (d) {
+ return d.y;
+ })
+ .y(function (d) {
+ return d.x;
+ });
+ //缁樺埗杈�
+ treeMap.selectAll("path")
+ // 鑺傜偣鐨勫叧绯� links
+ .data(treeData.links())
+ .enter()
+ .append("path")
+ .attr("d", function (d) {
+ // 鏍规嵁name鍊肩殑闀垮害璋冩暣杩炵嚎鐨勮捣鐐�
+ var start = {
+ x: d.source.x,
+ // 杩炵嚎璧风偣鐨剎鍧愭爣
+ // 绗�1涓�10涓轰笌绾㈠渾鍦堢殑闂磋窛锛岀2涓�10涓簂ink鍐呮枃瀛椾笌杈规鐨勯棿璺濓紝绗�3涓�10涓烘爣绛炬枃瀛椾笌杩炵嚎璧风偣鐨勯棿璺�
+ y: d.source.y + 10 + (d.source.data.link ? (getPXwidth(d.source.data.link) + 10) : 0) + getPXwidth(d.source.data.label) + 10
+ };
+ var end = {x: d.target.x, y: d.target.y};
+ return B茅zier_curve_generator({source: start, target: end});
+ })
+ .attr("fill", "none")
+ .attr("stroke", "#c3c3c3")
+ // 铏氱嚎
+ // .attr("stroke-dasharray", "8")
+ .attr("stroke-width", 1);
+ // 鍒涘缓鍒嗙粍鈥斺�旇妭鐐�+鏂囧瓧
+ let groups = treeMap.selectAll("g")
+ // 鑺傜偣 nodes
+ .data(treeData.descendants()
+ )
+ .enter()
+ .append("g")
+ .attr("transform", function (d) {
+ var cx = d.x;
+ var cy = d.y;
+ return "translate(" + cy + "," + cx + ")";
+ });
+ //缁樺埗鑺傜偣(鑺傜偣鍓嶇殑鍦嗗湀)
+ groups.append("circle")
+ // 鏍戠殑灞曞紑鎶樺彔
+ .on("click", function (event, node) {
+ let data = node.data
+ if (data.children) {
+ data.childrenTemp = data.children
+ data.children = null
+ } else {
+ data.children = data.childrenTemp
+ data.childrenTemp = null
+ }
+ that.drawMap()
+ })
+ .attr("cursor", 'pointer')
+ .attr("r", 4)
+ .attr("fill", function (d) {
+ if (d.data.childrenTemp) {
+ return 'red'
+ } else {
+ return 'white'
+ }
+ })
+ .attr("stroke", "red")
+ .attr("stroke-width", 1);
+ //缁樺埗鏍囨敞(鑺傜偣鍓嶇殑鐭╁舰)
+ groups.append("rect")
+ .attr("x", 8)
+ .attr("y", -10)
+ .attr("width",
+ function (d) {
+ return d.data.link ? (getPXwidth(d.data.link) + 10) : 0
+ }
+ )
+ .attr("height", 22)
+ .attr("fill", "grey")
+ // 娣诲姞鍦嗚
+ .attr("rx", 4)
+ //缁樺埗閾炬帴鏂瑰紡
+ groups.append("text")
+ .attr("x", 12)
+ .attr("y", -5)
+ .attr("dy", 10)
+ .attr("fill", 'white')
+ .attr("font-size", 12)
+ .text(function (d) {
+ return d.data.link;
+ })
+ //缁樺埗鏂囧瓧
+ groups.append("text")
+ .on("click", function (event, node) {
+ let data = node.data
+ // 琚鐢ㄧ殑鑺傜偣锛岀偣鍑绘棤鏁�
+ if (data.disabled) {
+ return
+ }
+ // 鏈夊閾剧殑鑺傜偣锛屾墦寮�鏂扮獥鍙ｅ悗鎭㈠鍒版�濈淮瀵煎浘椤甸潰
+ if (data.url) {
+ window.open(data.url)
+ that.$emit('activeChange', 'map')
+ return
+ }
+ // 鏍囧噯鑺傜偣鈥斺�� 浼犲嚭 prop
+ if (data.dicType) {
+ that.$emit('dicTypeChange', data.dicType)
+ }
+ // 鏍囧噯鑺傜偣鈥斺�� 浼犲嚭 prop
+ if (data.prop) {
+ that.$emit('activeChange', data.prop)
+ }
+ })
+ .attr("x", function (d) {
+ return 12 + (d.data.link ? (getPXwidth(d.data.link) + 10) : 0)
+ })
+ .attr("fill",
+ function (d) {
+ if (d.data.prop === that.active) {
+ return '#409EFF'
+ }
+ }
+ )
+ .attr("font-weight",
+ function (d) {
+ if (d.data.prop === that.active) {
+ return 'bold'
+ }
+ })
+ .attr("font-size", 14)
+ .attr("cursor",
+ function (d) {
+ if (d.data.disabled) {
+ return 'not-allowed'
+ } else {
+ return 'pointer'
+ }
+ })
+ .attr("y", -5)
+ .attr("dy", 10)
+ .attr("slot", function (d) {
+ return d.data.prop;
+ })
+ .text(function (d) {
+ return d.data.label;
+ })
+ },
+ },
+ }
+
+ // 鑾峰彇鏍戠殑娣卞害
+ function getDepth(json) {
+ var arr = [];
+ arr.push(json);
+ var depth = 0;
+ while (arr.length > 0) {
+ var temp = [];
+ for (var i = 0; i < arr.length; i++) {
+ temp.push(arr[i]);
+ }
+ arr = [];
+ for (var i = 0; i < temp.length; i++) {
+ if (temp[i].children && temp[i].children.length > 0) {
+ for (var j = 0; j < temp[i].children.length; j++) {
+ arr.push(temp[i].children[j]);
+ }
+ }
+ }
+ if (arr.length >= 0) {
+ depth++;
+ }
+ }
+ return depth;
+ }
+
+ // 鎻愬彇鏍戠殑瀛愯妭鐐癸紝鏈�缁堟墍鏈夋爲鐨勫瓙鑺傜偣閮戒細瀛樺叆浼犲叆鐨刲eafList鏁扮粍涓�
+ function getTreeLeaf(treeData, leafList) {
+ // 鍒ゆ柇鏄惁涓烘暟缁�
+ if (Array.isArray(treeData)) {
+ treeData.forEach(item => {
+ if (item.children && item.children.length > 0) {
+ getTreeLeaf(item.children, leafList)
+ } else {
+ leafList.push(item)
+ }
+ })
+ } else {
+ if (treeData.children && treeData.children.length > 0) {
+ getTreeLeaf(treeData.children, leafList)
+ } else {
+ leafList.push(treeData)
+ }
+ }
+ }
+
+ // 鑾峰彇鍖呭惈姹夊瓧鐨勫瓧绗︿覆鐨勯暱搴�
+ function getStringSizeLength(string) {
+ //鍏堟妸涓枃鏇挎崲鎴愪袱涓瓧鑺傜殑鑻辨枃锛屽啀璁＄畻闀垮害
+ return string.replace(/[\u0391-\uFFE5]/g, "aa").length;
+ }
+
+ // 鐢熸垚闅忔満鐨勫瓧绗︿覆
+ function randomString(strLength) {
+ strLength = strLength || 32;
+ let strLib = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz"
+ let n = "";
+ for (let i = 0; i < strLength; i++) {
+ n += strLib.charAt(Math.floor(Math.random() * strLib.length));
+ }
+ return n
+ }
+
+ // 鑾峰彇瀛楃涓茬殑鍍忕礌瀹藉害
+ function getPXwidth(str, fontSize = "12px", fontFamily = "Microsoft YaHei") {
+ var span = document.createElement("span");
+ var result = {};
+ result.width = span.offsetWidth;
+ result.height = span.offsetHeight;
+ span.style.visibility = "hidden";
+ span.style.fontSize = fontSize;
+ span.style.fontFamily = fontFamily;
+ span.style.display = "inline-block";
+ document.body.appendChild(span);
+ if (typeof span.textContent != "undefined") {
+ span.textContent = str;
+ } else {
+ span.innerText = str;
+ }
+ result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
+ // 瀛楃涓茬殑鏄剧ず楂樺害
+ // result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
+ return result.width;
+ }
+</script>
\ No newline at end of file
--
Gitblit v1.9.1