From 356bdf2316cb59af9bfed841b3225c1a64139e22 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Mon, 8 Mar 2021 17:51:33 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.03.08:=E4=BF=AE=E5=A4=8D=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E9=89=B4=E6=9D=83=E7=BB=84=E4=BB=B6name=E5=80=BC?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E9=97=AE=E9=A2=98'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                          |   1 +
 package.json                       |   1 +
 src/components/auth/auth.vue       |   2 +-
 src/components/auth/authAll.vue    |   2 +-
 src/components/auth/auths.vue      |   2 +-
 src/router/index.ts                |  15 ++
 src/utils/setIconfont.ts           |   2 +-
 src/views/fun/mindMap/index.vue    | 292 +++++++++++++++++++++++++++++
 src/views/fun/wangEditor/index.vue |   1 -
 9 files changed, 313 insertions(+), 5 deletions(-)
 create mode 100644 src/views/fun/mindMap/index.vue

diff --git a/README.md b/README.md
index 61d61de..9663d0f 100644
--- a/README.md
+++ b/README.md
@@ -115,6 +115,7 @@ cnpm run build
 - <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
 - <a href="https://github.com/wangeditor-team/wangEditor" target="_blank">wangeditor</a>
 - <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">cropperjs</a>
+- <a href="https://github.com/antvis/g6" target="_blank">@antv/g6</a>
 
 #### 特别感谢
 
diff --git a/package.json b/package.json
index cb6d439..0eeafef 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@antv/g6": "^4.1.16",
     "axios": "^0.21.1",
     "clipboard": "^2.0.6",
     "countup.js": "^2.0.7",
diff --git a/src/components/auth/auth.vue b/src/components/auth/auth.vue
index 061636f..832ef63 100644
--- a/src/components/auth/auth.vue
+++ b/src/components/auth/auth.vue
@@ -8,13 +8,13 @@
 import { computed } from "vue";
 import { useStore } from "/@/store/index.ts";
 export default {
+  name: "auth",
   props: {
     value: {
       type: String,
       default: () => "",
     },
   },
-  nane: "auth",
   setup(props) {
     const store = useStore();
     // 获取 vuex 中的用户权限
diff --git a/src/components/auth/authAll.vue b/src/components/auth/authAll.vue
index ba23b15..b47901c 100644
--- a/src/components/auth/authAll.vue
+++ b/src/components/auth/authAll.vue
@@ -9,7 +9,7 @@ import { computed } from "vue";
 import { useStore } from "/@/store/index.ts";
 import { judementSameArr } from "/@/utils/arrayOperation.ts";
 export default {
-  nane: "authAll",
+  name: "authAll",
   props: {
     value: {
       type: Array,
diff --git a/src/components/auth/auths.vue b/src/components/auth/auths.vue
index db80c65..b9293ab 100644
--- a/src/components/auth/auths.vue
+++ b/src/components/auth/auths.vue
@@ -8,13 +8,13 @@
 import { computed } from "vue";
 import { useStore } from "/@/store/index.ts";
 export default {
+  name: "auths",
   props: {
     value: {
       type: Array,
       default: () => [],
     },
   },
-  nane: "auths",
   setup(props) {
     const store = useStore();
     // 获取 vuex 中的用户权限
diff --git a/src/router/index.ts b/src/router/index.ts
index d1220e0..d0e4cf7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -406,6 +406,21 @@ export const dynamicRoutes = [
                         auth: ['admin', 'test'],
                         icon: 'iconfont icon-caijian'
                     }
+                },
+                {
+                    path: '/fun/mindMap',
+                    name: 'mindMap',
+                    component: () => import('/@/views/fun/mindMap/index.vue'),
+                    meta: {
+                        title: 'G6 思维导图',
+                        isLink: '',
+                        isHide: false,
+                        isKeepAlive: true,
+                        isAffix: false,
+                        isIframe: false,
+                        auth: ['admin', 'test'],
+                        icon: 'iconfont icon-siweidaotu'
+                    }
                 }
             ]
         },
diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts
index 7364339..9f3dcde 100644
--- a/src/utils/setIconfont.ts
+++ b/src/utils/setIconfont.ts
@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-    '//at.alicdn.com/t/font_2298093_sctkh48ml1.css',
+    '//at.alicdn.com/t/font_2298093_eee6zjvjt5a.css',
     '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
 ]
 // 第三方 js url
diff --git a/src/views/fun/mindMap/index.vue b/src/views/fun/mindMap/index.vue
new file mode 100644
index 0000000..b1fda67
--- /dev/null
+++ b/src/views/fun/mindMap/index.vue
@@ -0,0 +1,292 @@
+<template>
+  <div :style="{height: `calc(100vh - ${initTagViewHeight}`}">
+    <div class="layout-view-bg-white">
+      <div id="antvG6" style="height:100%;"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, onMounted, nextTick } from "vue";
+import G6 from "@antv/g6";
+import { useStore } from "/@/store/index.ts";
+export default {
+  name: "mindMap",
+  setup() {
+    const store = useStore();
+    const state = reactive({});
+    // 设置主内容的高度
+    const initTagViewHeight = computed(() => {
+      let { isTagsview } = store.state.themeConfig;
+      if (isTagsview) return `114px`;
+      else return `80px`;
+    });
+    // 初始化 antv/G6
+    const initAntvG6 = () => {
+      console.log(G6);
+
+      const fontSize = 12;
+      // 自定义节点
+      G6.registerNode("line", {
+        draw: (cfg, group) => {
+          const width = cfg.label.length * 10;
+          const rect = group.addShape("rect", {
+            attrs: {
+              x: 0,
+              y: -10,
+              ...cfg.style,
+              width,
+              height: 20,
+              lineWidth: 0,
+              opacity: 0,
+            },
+            name: "rect-shape",
+            draggable: true,
+          });
+          const label = group.addShape("text", {
+            attrs: {
+              text: cfg.label,
+              fill: "#000",
+              fontSize,
+              x: 0,
+              y: -5,
+            },
+            name: "label-shape",
+            draggable: true,
+          });
+          const labelBBox = label.getBBox();
+          // const icon = group.addShape('circle', {
+          //   attrs: {
+          //     x: labelBBox.maxX + 10,
+          //     y: (labelBBox.minY + labelBBox.maxY) / 2,
+          //     r: 5,
+          //     stroke: '#000'
+          //   },
+          //   name: 'circle-shape',
+          //   draggable: true
+          // });
+          const bboxWidth = label.getBBox().width + 20;
+          rect.attr({ width: bboxWidth });
+          group.addShape("path", {
+            attrs: {
+              lineWidth: 1,
+              fill: "#ccc",
+              stroke: "#0092ff",
+              path: [
+                ["M", 0, 0],
+                ["L", bboxWidth, 0],
+              ],
+            },
+            name: "path-shape",
+            draggable: true,
+          });
+          return rect;
+        },
+      });
+      //获取宽度
+      const width = document.getElementById("antvG6").clientWidth;
+      const height = document.getElementById("antvG6").clientHeight;
+
+      // return false;
+      const graph = new G6.TreeGraph({
+        container: "antvG6",
+        width,
+        height,
+        pixelRatio: 2,
+        modes: {
+          default: ["collapse-expand", "drag-canvas", "zoom-canvas"],
+        },
+        // 节点类型及样式
+        defaultNode: {
+          type: "rect",
+          // size: 16,
+          width: "auto",
+          anchorPoints: [
+            [0, 0.5],
+            [1, 0.5],
+          ],
+          style: {
+            fill: "#005ff2", //背景色
+            stroke: "#005ff2", //边框
+          },
+          labelCfg: {
+            style: {
+              fill: "#ffffff",
+              fontSize,
+            },
+          },
+        },
+        //  连线类型及样式
+        defaultEdge: {
+          type: "cubic-horizontal",
+          // polyline
+          style: {
+            stroke: "#0092ff",
+          },
+        },
+        // 布局
+        layout: {
+          type: "mindmap",
+          direction: "H",
+          getHeight: function getHeight() {
+            return 16;
+          },
+          getWidth: function getWidth() {
+            return 16;
+          },
+          getVGap: function getVGap() {
+            return 10;
+          },
+          getHGap: function getHGap() {
+            return 100;
+          },
+        },
+      });
+      graph.node(function (node) {
+        // depth 类似节点标识
+        if (node.depth == 0) {
+          return {
+            // size:[100,60],
+            style: {
+              fill: "#005ff2", //背景色
+              stroke: "#005ff2", //边框
+            },
+            // label:node.id
+          };
+        }
+        if (node.depth == 1) {
+          return {
+            style: {
+              //渐变色
+              fill:
+                "l(0) 0:rgba(0,36,186,1) 0.5:rgba(0,36,186,0.5) 1:rgba(0,0,0,0.1)",
+            },
+          };
+        }
+        if (node.depth == 2) {
+          return {
+            type: "line",
+          };
+        }
+        return {
+          // label: node.id, // 设置显示名称
+          labelCfg: {
+            // position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left', // 设置显示左右
+            offset: 5,
+          },
+        };
+      });
+      const data = {
+        id: "id1",
+        label: "遗属补助小专项",
+        children: [
+          {
+            id: "id1-1",
+            label: "已死亡",
+            children: [
+              {
+                id: "id1-1-1",
+                label: "问题数：35个",
+              },
+              {
+                id: "id1-1-2",
+                label: "人数：50人",
+              },
+              {
+                id: "id1-1-3",
+                label: "资金：340万",
+              },
+            ],
+          },
+          {
+            id: "id1-2",
+            label: "姓名与身份证不符",
+            children: [
+              {
+                id: "id1-2-1",
+                label: "问题数：35个",
+              },
+              {
+                id: "id1-2-2",
+                label: "人数：50人",
+              },
+              {
+                id: "id1-2-3",
+                label: "资金：340万",
+              },
+            ],
+          },
+          {
+            id: "id1-3",
+            label: "未查到身份证信息",
+            children: [
+              {
+                id: "id1-3-1",
+                label: "问题数：35个",
+              },
+              {
+                id: "id1-3-2",
+                label: "人数：50人",
+              },
+              {
+                id: "id1-3-3",
+                label: "资金：340万",
+              },
+            ],
+          },
+          {
+            id: "id1-4",
+            label: "领取低保",
+            children: [
+              {
+                id: "id1-4-1",
+                label: "问题数：35个",
+              },
+              {
+                id: "id1-4-2",
+                label: "人数：50人",
+              },
+              {
+                id: "id1-4-3",
+                label: "资金：340万",
+              },
+            ],
+          },
+          {
+            id: "id1-5",
+            label: "年龄不符合",
+            children: [
+              {
+                id: "id1-5-1",
+                label: "问题数：35个",
+              },
+              {
+                id: "id1-5-2",
+                label: "人数：50人",
+              },
+              {
+                id: "id1-5-3",
+                label: "资金：340万",
+              },
+            ],
+          },
+        ],
+      };
+      graph.data(data);
+      graph.render();
+      graph.fitView();
+    };
+    // 页面加载时
+    onMounted(() => {
+      initAntvG6();
+    });
+    return {
+      initTagViewHeight,
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+</style>
\ No newline at end of file
diff --git a/src/views/fun/wangEditor/index.vue b/src/views/fun/wangEditor/index.vue
index 265fe8c..e2b9841 100644
--- a/src/views/fun/wangEditor/index.vue
+++ b/src/views/fun/wangEditor/index.vue
@@ -13,7 +13,6 @@ import { toRefs, reactive, onMounted } from "vue";
 import wangeditor from "wangeditor";
 export default {
   name: "wangeditor",
-  components: {},
   setup() {
     const state = reactive({});
     // 初始化富文本