diff --git a/.env.development b/.env.development
index 28d1af1..2b5821c 100644
--- a/.env.development
+++ b/.env.development
@@ -6,7 +6,7 @@ ENV = 'development'
 VUE_APP_BASE_API  = 'http://192.168.99.72:11100'
 VUE_APP_WS_API = 'ws://192.168.99.72:11100'
 
-#VUE_APP_BASE_API  = 'http://192.168.99.107:11100'
+# VUE_APP_BASE_API  = 'http://192.168.99.107:11100'
 
 # 是否启用 babel-plugin-dynamic-import-node插件
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/.env.production b/.env.production
index e11f962..8adacef 100644
--- a/.env.production
+++ b/.env.production
@@ -2,7 +2,6 @@ ENV = 'production'
 
 # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
-# VUE_APP_BASE_API  = 'https://openapitest.aiyxlib.com'
 VUE_APP_BASE_API  = 'http://192.168.99.107:11100'
 # VUE_APP_BASE_API  = 'http://27.19.215.77:11100'
 # VUE_APP_BASE_API  = 'http://27.16.212.58:11100'
diff --git a/package.json b/package.json
index 53f9d2a..48d25b6 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "qs": "^6.10.1",
     "quill": "^1.3.7",
     "quill-image-resize-module": "^3.0.0",
+    "relation-graph": "^2.2.10",
     "screenfull": "4.2.0",
     "sm-crypto": "^0.3.2",
     "sortablejs": "1.8.4",
diff --git a/src/views/AIAssistant/AIDigitalHuman/index.vue b/src/views/AIAssistant/AIDigitalHuman/index.vue
index fa293e8..9688550 100644
--- a/src/views/AIAssistant/AIDigitalHuman/index.vue
+++ b/src/views/AIAssistant/AIDigitalHuman/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="app-container category-container" style="position: relative; height: calc(100vh - 140px);">
-    <iframe id="myIframe" style="position: absolute; top: 0; left: -34%; border: none; z-index: 9;" width="100%" height="100%" src="https://f.3dman.cn/art/sDpbYwwJ/fbx/CdYqVH95/index.html" />
+    <iframe id="myIframe" style="position: absolute; top: 0; left: -34%; border: none; z-index: 9;" width="100%" height="100%" :src="frameUrl" />
+    <!-- http://27.16.218.195:17001/art/sDpbYwwJ/fbx/CdYqVH95/index.html -->
+    <!-- https://f.3dman.cn/art/sDpbYwwJ/fbx/CdYqVH95/index.html -->
     <div class="chat-wrapper">
       <div ref="chatContent" class="chat-content">
         <Message
@@ -37,6 +39,7 @@ export default {
   },
   data() {
     return {
+      frameUrl: '',
       message: '',
       isSendButtonDisabled: true,
       isBotReplying: false,
@@ -54,6 +57,20 @@ export default {
   created() {
   },
   mounted() {
+    const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
+    console.log('linkSrc', linkSrc)
+    const lastColonIndex = linkSrc.lastIndexOf(':')
+    const firstSlashIndex = linkSrc.indexOf('/', lastColonIndex)
+
+    let newUrl
+    if (firstSlashIndex === -1) {
+      newUrl = linkSrc.slice(0, lastColonIndex)
+    } else {
+      newUrl = linkSrc.slice(0, lastColonIndex) + linkSrc.slice(firstSlashIndex)
+    }
+    console.log(newUrl)
+    this.frameUrl = newUrl + ':17001/art/sDpbYwwJ/fbx/CdYqVH95/index.html'
+
     this.sendWelcomeMessage()
     this.updateSendButtonState()
   },
diff --git a/src/views/AIAssistant/AIknowledgeGraph/index.vue b/src/views/AIAssistant/AIknowledgeGraph/index.vue
index 7c21a42..d57bd02 100644
--- a/src/views/AIAssistant/AIknowledgeGraph/index.vue
+++ b/src/views/AIAssistant/AIknowledgeGraph/index.vue
@@ -35,7 +35,8 @@
         <div v-if="selectedCategory.isType === 2" class="container-right">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <img style="display: block; height: calc(100vh - 184px);" src="@/assets/images/graph-img.png" alt=" ">
+          <!-- <img style="display: block; height: calc(100vh - 184px);" src="@/assets/images/graph-img.png" alt=" "> -->
+          <graph />
         </div>
       </div>
     </div>
@@ -44,10 +45,11 @@
 <script>
 import crudCategory from '@/api/system/category/category'
 import CRUD, { presenter, header } from '@crud/crud'
+import graph from '@/views/components/echarts/graph.vue'
 
 export default {
   name: 'AIknowledgeGraph',
-  components: { },
+  components: { graph },
   cruds() {
     return [
       CRUD({
diff --git a/src/views/archivesManage/managementLibrary/anjuan/tableList.vue b/src/views/archivesManage/managementLibrary/anjuan/tableList.vue
index 2dd5305..0baca15 100644
--- a/src/views/archivesManage/managementLibrary/anjuan/tableList.vue
+++ b/src/views/archivesManage/managementLibrary/anjuan/tableList.vue
@@ -253,14 +253,14 @@ export default {
     },
     // table - 当前选中得row
     clickRowHandler(row) {
-      this.parentsData.smartQuery = {
-        'retention': null,
-        'security_class': null,
-        'doc_type': null,
-        'medium_type': null,
-        'archive_year': null,
-        'fonds_no': null
-      }
+      // this.parentsData.smartQuery = {
+      //   'retention': null,
+      //   'security_class': null,
+      //   'doc_type': null,
+      //   'medium_type': null,
+      //   'archive_year': null,
+      //   'fonds_no': null
+      // }
       if (this.timer) {
         clearTimeout(this.timer)
       }
diff --git a/src/views/archivesManage/managementLibrary/file/index.vue b/src/views/archivesManage/managementLibrary/file/index.vue
index dc94ef6..52d3ded 100644
--- a/src/views/archivesManage/managementLibrary/file/index.vue
+++ b/src/views/archivesManage/managementLibrary/file/index.vue
@@ -194,14 +194,14 @@ export default {
     },
     // table - 当前选中得row
     clickRowHandler(row) {
-      this.parentsData.smartQuery = {
-        'retention': null,
-        'security_class': null,
-        'doc_type': null,
-        'medium_type': null,
-        'archive_year': null,
-        'fonds_no': null
-      }
+      // this.parentsData.smartQuery = {
+      //   'retention': null,
+      //   'security_class': null,
+      //   'doc_type': null,
+      //   'medium_type': null,
+      //   'archive_year': null,
+      //   'fonds_no': null
+      // }
       this.selections = this.crud.selections
     },
     // 触发单选
diff --git a/src/views/archivesManage/managementLibrary/juannei/index.vue b/src/views/archivesManage/managementLibrary/juannei/index.vue
index 4d1ca09..c758ffc 100644
--- a/src/views/archivesManage/managementLibrary/juannei/index.vue
+++ b/src/views/archivesManage/managementLibrary/juannei/index.vue
@@ -242,14 +242,14 @@ export default {
     },
     // table - 当前选中得row
     clickRowHandler(row) {
-      this.parentsData.smartQuery = {
-        'retention': null,
-        'security_class': null,
-        'doc_type': null,
-        'medium_type': null,
-        'archive_year': null,
-        'fonds_no': null
-      }
+      // this.parentsData.smartQuery = {
+      //   'retention': null,
+      //   'security_class': null,
+      //   'doc_type': null,
+      //   'medium_type': null,
+      //   'archive_year': null,
+      //   'fonds_no': null
+      // }
       if (this.timer) {
         clearTimeout(this.timer)
       }
diff --git a/src/views/archivesManage/managementLibrary/project/index.vue b/src/views/archivesManage/managementLibrary/project/index.vue
index dd105c4..432a6e6 100644
--- a/src/views/archivesManage/managementLibrary/project/index.vue
+++ b/src/views/archivesManage/managementLibrary/project/index.vue
@@ -167,14 +167,14 @@ export default {
     },
     // table - 当前选中得row
     clickRowHandler(row) {
-      this.parentsData.smartQuery = {
-        'retention': null,
-        'security_class': null,
-        'doc_type': null,
-        'medium_type': null,
-        'archive_year': null,
-        'fonds_no': null
-      }
+      // this.parentsData.smartQuery = {
+      //   'retention': null,
+      //   'security_class': null,
+      //   'doc_type': null,
+      //   'medium_type': null,
+      //   'archive_year': null,
+      //   'fonds_no': null
+      // }
       if (this.timer) {
         clearTimeout(this.timer)
       }
diff --git a/src/views/archivesStatistics/ureport/designer/index.vue b/src/views/archivesStatistics/ureport/designer/index.vue
index 13b286d..ec69564 100644
--- a/src/views/archivesStatistics/ureport/designer/index.vue
+++ b/src/views/archivesStatistics/ureport/designer/index.vue
@@ -8,7 +8,7 @@ export default {
   name: 'Ureport',
   data() {
     return {
-      src: '/ureport/designer',
+      src: '',
       height: document.documentElement.clientHeight - 94.5 + 'px;',
       loading: true
     }
@@ -18,10 +18,13 @@ export default {
       this.loading = false
     }, 230)
     const that = this
+
+    const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
+    this.src = linkSrc + '/ureport/designer'
+    // this.src = '/ureport/designer'
     window.onresize = function temp() {
       that.height = document.documentElement.clientHeight - 94.5 + 'px;'
     }
-    console.log('8888888')
   }
 }
 </script>
diff --git a/src/views/collectReorganizi/collectionLibrary/anjuan/tableList.vue b/src/views/collectReorganizi/collectionLibrary/anjuan/tableList.vue
index db7e20a..e5d7256 100644
--- a/src/views/collectReorganizi/collectionLibrary/anjuan/tableList.vue
+++ b/src/views/collectReorganizi/collectionLibrary/anjuan/tableList.vue
@@ -222,14 +222,14 @@ export default {
     },
     // table - 当前选中得row
     clickRowHandler(row) {
-      this.parentsData.smartQuery = {
-        'retention': null,
-        'security_class': null,
-        'doc_type': null,
-        'medium_type': null,
-        'archive_year': null,
-        'fonds_no': null
-      }
+      // this.parentsData.smartQuery = {
+      //   'retention': null,
+      //   'security_class': null,
+      //   'doc_type': null,
+      //   'medium_type': null,
+      //   'archive_year': null,
+      //   'fonds_no': null
+      // }
       if (this.timer) {
         clearTimeout(this.timer)
       }
diff --git a/src/views/collectReorganizi/collectionLibrary/file/index.vue b/src/views/collectReorganizi/collectionLibrary/file/index.vue
index 4418ca9..8685a71 100644
--- a/src/views/collectReorganizi/collectionLibrary/file/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/file/index.vue
@@ -200,14 +200,14 @@ export default {
     },
     // table - 当前选中得row
     clickRowHandler(row) {
-      this.parentsData.smartQuery = {
-        'retention': null,
-        'security_class': null,
-        'doc_type': null,
-        'medium_type': null,
-        'archive_year': null,
-        'fonds_no': null
-      }
+      // this.parentsData.smartQuery = {
+      //   'retention': null,
+      //   'security_class': null,
+      //   'doc_type': null,
+      //   'medium_type': null,
+      //   'archive_year': null,
+      //   'fonds_no': null
+      // }
       this.selections = this.crud.selections
     },
     // 触发单选
diff --git a/src/views/collectReorganizi/collectionLibrary/juannei/index.vue b/src/views/collectReorganizi/collectionLibrary/juannei/index.vue
index f2a9a6a..b7d12bf 100644
--- a/src/views/collectReorganizi/collectionLibrary/juannei/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/juannei/index.vue
@@ -184,14 +184,14 @@ export default {
     },
     // table - 当前选中得row
     clickRowHandler(row) {
-      this.parentsData.smartQuery = {
-        'retention': null,
-        'security_class': null,
-        'doc_type': null,
-        'medium_type': null,
-        'archive_year': null,
-        'fonds_no': null
-      }
+      // this.parentsData.smartQuery = {
+      //   'retention': null,
+      //   'security_class': null,
+      //   'doc_type': null,
+      //   'medium_type': null,
+      //   'archive_year': null,
+      //   'fonds_no': null
+      // }
       if (this.timer) {
         clearTimeout(this.timer)
       }
diff --git a/src/views/collectReorganizi/collectionLibrary/mixins/index.js b/src/views/collectReorganizi/collectionLibrary/mixins/index.js
index e13fb5f..5564f0d 100644
--- a/src/views/collectReorganizi/collectionLibrary/mixins/index.js
+++ b/src/views/collectReorganizi/collectionLibrary/mixins/index.js
@@ -41,6 +41,7 @@ export const collectionLibraryCrud = {
     },
     handleSearch(categoryLevel) {
       this.parentsData.$refs.classifyTree.setCurrentKey(null)
+      console.log('this.parentsData', this.parentsData)
       console.log(this.parentsData.smartQuery)
       // this.smartQuery = {
       //   'retention': null,
diff --git a/src/views/collectReorganizi/collectionLibrary/project/index.vue b/src/views/collectReorganizi/collectionLibrary/project/index.vue
index 1eb1c84..2d32902 100644
--- a/src/views/collectReorganizi/collectionLibrary/project/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/project/index.vue
@@ -165,14 +165,14 @@ export default {
     },
     // table - 当前选中得row
     clickRowHandler(row) {
-      this.parentsData.smartQuery = {
-        'retention': null,
-        'security_class': null,
-        'doc_type': null,
-        'medium_type': null,
-        'archive_year': null,
-        'fonds_no': null
-      }
+      // this.parentsData.smartQuery = {
+      //   'retention': null,
+      //   'security_class': null,
+      //   'doc_type': null,
+      //   'medium_type': null,
+      //   'archive_year': null,
+      //   'fonds_no': null
+      // }
       if (this.timer) {
         clearTimeout(this.timer)
       }
diff --git a/src/views/components/echarts/data.json b/src/views/components/echarts/data.json
new file mode 100644
index 0000000..f182901
--- /dev/null
+++ b/src/views/components/echarts/data.json
@@ -0,0 +1,1744 @@
+{
+  "nodes": [
+      {
+          "id": "0",
+          "name": "Myriel",
+          "symbolSize": 19.12381,
+          "x": -266.82776,
+          "y": 299.6904,
+          "value": 28.685715,
+          "category": 0
+      },
+      {
+          "id": "1",
+          "name": "Napoleon",
+          "symbolSize": 2.6666666666666665,
+          "x": -418.08344,
+          "y": 446.8853,
+          "value": 4,
+          "category": 0
+      },
+      {
+          "id": "2",
+          "name": "MlleBaptistine",
+          "symbolSize": 6.323809333333333,
+          "x": -212.76357,
+          "y": 245.29176,
+          "value": 9.485714,
+          "category": 1
+      },
+      {
+          "id": "3",
+          "name": "MmeMagloire",
+          "symbolSize": 6.323809333333333,
+          "x": -242.82404,
+          "y": 235.26283,
+          "value": 9.485714,
+          "category": 1
+      },
+      {
+          "id": "4",
+          "name": "CountessDeLo",
+          "symbolSize": 2.6666666666666665,
+          "x": -379.30386,
+          "y": 429.06424,
+          "value": 4,
+          "category": 0
+      },
+      {
+          "id": "5",
+          "name": "Geborand",
+          "symbolSize": 2.6666666666666665,
+          "x": -417.26337,
+          "y": 406.03506,
+          "value": 4,
+          "category": 0
+      },
+      {
+          "id": "6",
+          "name": "Champtercier",
+          "symbolSize": 2.6666666666666665,
+          "x": -332.6012,
+          "y": 485.16974,
+          "value": 4,
+          "category": 0
+      },
+      {
+          "id": "7",
+          "name": "Cravatte",
+          "symbolSize": 2.6666666666666665,
+          "x": -382.69568,
+          "y": 475.09113,
+          "value": 4,
+          "category": 0
+      },
+      {
+          "id": "8",
+          "name": "Count",
+          "symbolSize": 2.6666666666666665,
+          "x": -320.384,
+          "y": 387.17325,
+          "value": 4,
+          "category": 0
+      },
+      {
+          "id": "9",
+          "name": "OldMan",
+          "symbolSize": 2.6666666666666665,
+          "x": -344.39832,
+          "y": 451.16772,
+          "value": 4,
+          "category": 0
+      },
+      {
+          "id": "10",
+          "name": "Labarre",
+          "symbolSize": 2.6666666666666665,
+          "x": -89.34107,
+          "y": 234.56128,
+          "value": 4,
+          "category": 1
+      },
+      {
+          "id": "11",
+          "name": "文书档案",
+          "symbolSize": 66.66666666666667,
+          "x": -87.93029,
+          "y": -6.8120565,
+          "value": 100,
+          "category": 1
+      },
+      {
+          "id": "12",
+          "name": "Marguerite",
+          "symbolSize": 4.495239333333333,
+          "x": -339.77908,
+          "y": -184.69139,
+          "value": 6.742859,
+          "category": 1
+      },
+      {
+          "id": "13",
+          "name": "MmeDeR",
+          "symbolSize": 2.6666666666666665,
+          "x": -194.31313,
+          "y": 178.55301,
+          "value": 4,
+          "category": 1
+      },
+      {
+          "id": "14",
+          "name": "Isabeau",
+          "symbolSize": 2.6666666666666665,
+          "x": -158.05168,
+          "y": 201.99768,
+          "value": 4,
+          "category": 1
+      },
+      {
+          "id": "15",
+          "name": "Gervais",
+          "symbolSize": 2.6666666666666665,
+          "x": -127.701546,
+          "y": 242.55057,
+          "value": 4,
+          "category": 1
+      },
+      {
+          "id": "16",
+          "name": "Tholomyes",
+          "symbolSize": 17.295237333333333,
+          "x": -385.2226,
+          "y": -393.5572,
+          "value": 25.942856,
+          "category": 2
+      },
+      {
+          "id": "17",
+          "name": "Listolier",
+          "symbolSize": 13.638097333333334,
+          "x": -516.55884,
+          "y": -393.98975,
+          "value": 20.457146,
+          "category": 2
+      },
+      {
+          "id": "18",
+          "name": "Fameuil",
+          "symbolSize": 13.638097333333334,
+          "x": -464.79382,
+          "y": -493.57944,
+          "value": 20.457146,
+          "category": 2
+      },
+      {
+          "id": "19",
+          "name": "Blacheville",
+          "symbolSize": 13.638097333333334,
+          "x": -515.1624,
+          "y": -456.9891,
+          "value": 20.457146,
+          "category": 2
+      },
+      {
+          "id": "20",
+          "name": "Favourite",
+          "symbolSize": 13.638097333333334,
+          "x": -408.12122,
+          "y": -464.5048,
+          "value": 20.457146,
+          "category": 2
+      },
+      {
+          "id": "21",
+          "name": "Dahlia",
+          "symbolSize": 13.638097333333334,
+          "x": -456.44113,
+          "y": -425.13303,
+          "value": 20.457146,
+          "category": 2
+      },
+      {
+          "id": "22",
+          "name": "Zephine",
+          "symbolSize": 13.638097333333334,
+          "x": -459.1107,
+          "y": -362.5133,
+          "value": 20.457146,
+          "category": 2
+      },
+      {
+          "id": "23",
+          "name": "Fantine",
+          "symbolSize": 28.266666666666666,
+          "x": -313.42786,
+          "y": -289.44803,
+          "value": 42.4,
+          "category": 2
+      },
+      {
+          "id": "24",
+          "name": "MmeThenardier",
+          "symbolSize": 20.95238266666667,
+          "x": 4.6313396,
+          "y": -273.8517,
+          "value": 31.428574,
+          "category": 7
+      },
+      {
+          "id": "25",
+          "name": "Thenardier",
+          "symbolSize": 30.095235333333335,
+          "x": 82.80825,
+          "y": -203.1144,
+          "value": 45.142853,
+          "category": 7
+      },
+      {
+          "id": "26",
+          "name": "Cosette",
+          "symbolSize": 20.95238266666667,
+          "x": 78.64646,
+          "y": -31.512747,
+          "value": 31.428574,
+          "category": 6
+      },
+      {
+          "id": "27",
+          "name": "Javert",
+          "symbolSize": 31.923806666666668,
+          "x": -81.46074,
+          "y": -204.20204,
+          "value": 47.88571,
+          "category": 7
+      },
+      {
+          "id": "28",
+          "name": "Fauchelevent",
+          "symbolSize": 8.152382000000001,
+          "x": -225.73984,
+          "y": 82.41631,
+          "value": 12.228573,
+          "category": 4
+      },
+      {
+          "id": "29",
+          "name": "Bamatabois",
+          "symbolSize": 15.466666666666667,
+          "x": -385.6842,
+          "y": -20.206686,
+          "value": 23.2,
+          "category": 3
+      },
+      {
+          "id": "30",
+          "name": "Perpetue",
+          "symbolSize": 4.495239333333333,
+          "x": -403.92447,
+          "y": -197.69823,
+          "value": 6.742859,
+          "category": 2
+      },
+      {
+          "id": "31",
+          "name": "Simplice",
+          "symbolSize": 8.152382000000001,
+          "x": -281.4253,
+          "y": -158.45137,
+          "value": 12.228573,
+          "category": 2
+      },
+      {
+          "id": "32",
+          "name": "Scaufflaire",
+          "symbolSize": 2.6666666666666665,
+          "x": -122.41348,
+          "y": 210.37503,
+          "value": 4,
+          "category": 1
+      },
+      {
+          "id": "33",
+          "name": "Woman1",
+          "symbolSize": 4.495239333333333,
+          "x": -234.6001,
+          "y": -113.15067,
+          "value": 6.742859,
+          "category": 1
+      },
+      {
+          "id": "34",
+          "name": "Judge",
+          "symbolSize": 11.809524666666666,
+          "x": -387.84915,
+          "y": 58.7059,
+          "value": 17.714287,
+          "category": 3
+      },
+      {
+          "id": "35",
+          "name": "Champmathieu",
+          "symbolSize": 11.809524666666666,
+          "x": -338.2307,
+          "y": 87.48405,
+          "value": 17.714287,
+          "category": 3
+      },
+      {
+          "id": "36",
+          "name": "Brevet",
+          "symbolSize": 11.809524666666666,
+          "x": -453.26874,
+          "y": 58.94648,
+          "value": 17.714287,
+          "category": 3
+      },
+      {
+          "id": "37",
+          "name": "Chenildieu",
+          "symbolSize": 11.809524666666666,
+          "x": -386.44904,
+          "y": 140.05937,
+          "value": 17.714287,
+          "category": 3
+      },
+      {
+          "id": "38",
+          "name": "Cochepaille",
+          "symbolSize": 11.809524666666666,
+          "x": -446.7876,
+          "y": 123.38005,
+          "value": 17.714287,
+          "category": 3
+      },
+      {
+          "id": "39",
+          "name": "Pontmercy",
+          "symbolSize": 6.323809333333333,
+          "x": 336.49738,
+          "y": -269.55914,
+          "value": 9.485714,
+          "category": 6
+      },
+      {
+          "id": "40",
+          "name": "Boulatruelle",
+          "symbolSize": 2.6666666666666665,
+          "x": 29.187843,
+          "y": -460.13132,
+          "value": 4,
+          "category": 7
+      },
+      {
+          "id": "41",
+          "name": "Eponine",
+          "symbolSize": 20.95238266666667,
+          "x": 238.36697,
+          "y": -210.00926,
+          "value": 31.428574,
+          "category": 7
+      },
+      {
+          "id": "42",
+          "name": "Anzelma",
+          "symbolSize": 6.323809333333333,
+          "x": 189.69513,
+          "y": -346.50662,
+          "value": 9.485714,
+          "category": 7
+      },
+      {
+          "id": "43",
+          "name": "Woman2",
+          "symbolSize": 6.323809333333333,
+          "x": -187.00418,
+          "y": -145.02663,
+          "value": 9.485714,
+          "category": 6
+      },
+      {
+          "id": "44",
+          "name": "MotherInnocent",
+          "symbolSize": 4.495239333333333,
+          "x": -252.99521,
+          "y": 129.87549,
+          "value": 6.742859,
+          "category": 4
+      },
+      {
+          "id": "45",
+          "name": "Gribier",
+          "symbolSize": 2.6666666666666665,
+          "x": -296.07935,
+          "y": 163.11964,
+          "value": 4,
+          "category": 4
+      },
+      {
+          "id": "46",
+          "name": "Jondrette",
+          "symbolSize": 2.6666666666666665,
+          "x": 550.3201,
+          "y": 522.4031,
+          "value": 4,
+          "category": 5
+      },
+      {
+          "id": "47",
+          "name": "MmeBurgon",
+          "symbolSize": 4.495239333333333,
+          "x": 488.13535,
+          "y": 356.8573,
+          "value": 6.742859,
+          "category": 5
+      },
+      {
+          "id": "48",
+          "name": "Gavroche",
+          "symbolSize": 41.06667066666667,
+          "x": 387.89572,
+          "y": 110.462326,
+          "value": 61.600006,
+          "category": 8
+      },
+      {
+          "id": "49",
+          "name": "Gillenormand",
+          "symbolSize": 13.638097333333334,
+          "x": 126.4831,
+          "y": 68.10622,
+          "value": 20.457146,
+          "category": 6
+      },
+      {
+          "id": "50",
+          "name": "Magnon",
+          "symbolSize": 4.495239333333333,
+          "x": 127.07365,
+          "y": -113.05923,
+          "value": 6.742859,
+          "category": 6
+      },
+      {
+          "id": "51",
+          "name": "MlleGillenormand",
+          "symbolSize": 13.638097333333334,
+          "x": 162.63559,
+          "y": 117.6565,
+          "value": 20.457146,
+          "category": 6
+      },
+      {
+          "id": "52",
+          "name": "MmePontmercy",
+          "symbolSize": 4.495239333333333,
+          "x": 353.66415,
+          "y": -205.89165,
+          "value": 6.742859,
+          "category": 6
+      },
+      {
+          "id": "53",
+          "name": "MlleVaubois",
+          "symbolSize": 2.6666666666666665,
+          "x": 165.43939,
+          "y": 339.7736,
+          "value": 4,
+          "category": 6
+      },
+      {
+          "id": "54",
+          "name": "LtGillenormand",
+          "symbolSize": 8.152382000000001,
+          "x": 137.69348,
+          "y": 196.1069,
+          "value": 12.228573,
+          "category": 6
+      },
+      {
+          "id": "55",
+          "name": "Marius",
+          "symbolSize": 35.58095333333333,
+          "x": 206.44687,
+          "y": -13.805411,
+          "value": 53.37143,
+          "category": 6
+      },
+      {
+          "id": "56",
+          "name": "BaronessT",
+          "symbolSize": 4.495239333333333,
+          "x": 194.82993,
+          "y": 224.78036,
+          "value": 6.742859,
+          "category": 6
+      },
+      {
+          "id": "57",
+          "name": "Mabeuf",
+          "symbolSize": 20.95238266666667,
+          "x": 597.6618,
+          "y": 135.18481,
+          "value": 31.428574,
+          "category": 8
+      },
+      {
+          "id": "58",
+          "name": "Enjolras",
+          "symbolSize": 28.266666666666666,
+          "x": 355.78366,
+          "y": -74.882454,
+          "value": 42.4,
+          "category": 8
+      },
+      {
+          "id": "59",
+          "name": "Combeferre",
+          "symbolSize": 20.95238266666667,
+          "x": 515.2961,
+          "y": -46.167564,
+          "value": 31.428574,
+          "category": 8
+      },
+      {
+          "id": "60",
+          "name": "Prouvaire",
+          "symbolSize": 17.295237333333333,
+          "x": 614.29285,
+          "y": -69.3104,
+          "value": 25.942856,
+          "category": 8
+      },
+      {
+          "id": "61",
+          "name": "Feuilly",
+          "symbolSize": 20.95238266666667,
+          "x": 550.1917,
+          "y": -128.17537,
+          "value": 31.428574,
+          "category": 8
+      },
+      {
+          "id": "62",
+          "name": "Courfeyrac",
+          "symbolSize": 24.609526666666667,
+          "x": 436.17184,
+          "y": -12.7286825,
+          "value": 36.91429,
+          "category": 8
+      },
+      {
+          "id": "63",
+          "name": "Bahorel",
+          "symbolSize": 22.780953333333333,
+          "x": 602.55225,
+          "y": 16.421427,
+          "value": 34.17143,
+          "category": 8
+      },
+      {
+          "id": "64",
+          "name": "Bossuet",
+          "symbolSize": 24.609526666666667,
+          "x": 455.81955,
+          "y": -115.45826,
+          "value": 36.91429,
+          "category": 8
+      },
+      {
+          "id": "65",
+          "name": "Joly",
+          "symbolSize": 22.780953333333333,
+          "x": 516.40784,
+          "y": 47.242233,
+          "value": 34.17143,
+          "category": 8
+      },
+      {
+          "id": "66",
+          "name": "Grantaire",
+          "symbolSize": 19.12381,
+          "x": 646.4313,
+          "y": -151.06331,
+          "value": 28.685715,
+          "category": 8
+      },
+      {
+          "id": "67",
+          "name": "MotherPlutarch",
+          "symbolSize": 2.6666666666666665,
+          "x": 668.9568,
+          "y": 204.65488,
+          "value": 4,
+          "category": 8
+      },
+      {
+          "id": "68",
+          "name": "Gueulemer",
+          "symbolSize": 19.12381,
+          "x": 78.4799,
+          "y": -347.15146,
+          "value": 28.685715,
+          "category": 7
+      },
+      {
+          "id": "69",
+          "name": "Babet",
+          "symbolSize": 19.12381,
+          "x": 150.35959,
+          "y": -298.50797,
+          "value": 28.685715,
+          "category": 7
+      },
+      {
+          "id": "70",
+          "name": "Claquesous",
+          "symbolSize": 19.12381,
+          "x": 137.3717,
+          "y": -410.2809,
+          "value": 28.685715,
+          "category": 7
+      },
+      {
+          "id": "71",
+          "name": "Montparnasse",
+          "symbolSize": 17.295237333333333,
+          "x": 234.87747,
+          "y": -400.85983,
+          "value": 25.942856,
+          "category": 7
+      },
+      {
+          "id": "72",
+          "name": "Toussaint",
+          "symbolSize": 6.323809333333333,
+          "x": 40.942253,
+          "y": 113.78272,
+          "value": 9.485714,
+          "category": 1
+      },
+      {
+          "id": "73",
+          "name": "Child1",
+          "symbolSize": 4.495239333333333,
+          "x": 437.939,
+          "y": 291.58234,
+          "value": 6.742859,
+          "category": 8
+      },
+      {
+          "id": "74",
+          "name": "Child2",
+          "symbolSize": 4.495239333333333,
+          "x": 466.04922,
+          "y": 283.3606,
+          "value": 6.742859,
+          "category": 8
+      },
+      {
+          "id": "75",
+          "name": "Brujon",
+          "symbolSize": 13.638097333333334,
+          "x": 238.79364,
+          "y": -314.06345,
+          "value": 20.457146,
+          "category": 7
+      },
+      {
+          "id": "76",
+          "name": "MmeHucheloup",
+          "symbolSize": 13.638097333333334,
+          "x": 712.18353,
+          "y": 4.8131495,
+          "value": 20.457146,
+          "category": 8
+      }
+  ],
+  "links": [
+      {
+          "source": "1",
+          "target": "0"
+      },
+      {
+          "source": "2",
+          "target": "0"
+      },
+      {
+          "source": "3",
+          "target": "0"
+      },
+      {
+          "source": "3",
+          "target": "2"
+      },
+      {
+          "source": "4",
+          "target": "0"
+      },
+      {
+          "source": "5",
+          "target": "0"
+      },
+      {
+          "source": "6",
+          "target": "0"
+      },
+      {
+          "source": "7",
+          "target": "0"
+      },
+      {
+          "source": "8",
+          "target": "0"
+      },
+      {
+          "source": "9",
+          "target": "0"
+      },
+      {
+          "source": "11",
+          "target": "0"
+      },
+      {
+          "source": "11",
+          "target": "2"
+      },
+      {
+          "source": "11",
+          "target": "3"
+      },
+      {
+          "source": "11",
+          "target": "10"
+      },
+      {
+          "source": "12",
+          "target": "11"
+      },
+      {
+          "source": "13",
+          "target": "11"
+      },
+      {
+          "source": "14",
+          "target": "11"
+      },
+      {
+          "source": "15",
+          "target": "11"
+      },
+      {
+          "source": "17",
+          "target": "16"
+      },
+      {
+          "source": "18",
+          "target": "16"
+      },
+      {
+          "source": "18",
+          "target": "17"
+      },
+      {
+          "source": "19",
+          "target": "16"
+      },
+      {
+          "source": "19",
+          "target": "17"
+      },
+      {
+          "source": "19",
+          "target": "18"
+      },
+      {
+          "source": "20",
+          "target": "16"
+      },
+      {
+          "source": "20",
+          "target": "17"
+      },
+      {
+          "source": "20",
+          "target": "18"
+      },
+      {
+          "source": "20",
+          "target": "19"
+      },
+      {
+          "source": "21",
+          "target": "16"
+      },
+      {
+          "source": "21",
+          "target": "17"
+      },
+      {
+          "source": "21",
+          "target": "18"
+      },
+      {
+          "source": "21",
+          "target": "19"
+      },
+      {
+          "source": "21",
+          "target": "20"
+      },
+      {
+          "source": "22",
+          "target": "16"
+      },
+      {
+          "source": "22",
+          "target": "17"
+      },
+      {
+          "source": "22",
+          "target": "18"
+      },
+      {
+          "source": "22",
+          "target": "19"
+      },
+      {
+          "source": "22",
+          "target": "20"
+      },
+      {
+          "source": "22",
+          "target": "21"
+      },
+      {
+          "source": "23",
+          "target": "11"
+      },
+      {
+          "source": "23",
+          "target": "12"
+      },
+      {
+          "source": "23",
+          "target": "16"
+      },
+      {
+          "source": "23",
+          "target": "17"
+      },
+      {
+          "source": "23",
+          "target": "18"
+      },
+      {
+          "source": "23",
+          "target": "19"
+      },
+      {
+          "source": "23",
+          "target": "20"
+      },
+      {
+          "source": "23",
+          "target": "21"
+      },
+      {
+          "source": "23",
+          "target": "22"
+      },
+      {
+          "source": "24",
+          "target": "11"
+      },
+      {
+          "source": "24",
+          "target": "23"
+      },
+      {
+          "source": "25",
+          "target": "11"
+      },
+      {
+          "source": "25",
+          "target": "23"
+      },
+      {
+          "source": "25",
+          "target": "24"
+      },
+      {
+          "source": "26",
+          "target": "11"
+      },
+      {
+          "source": "26",
+          "target": "16"
+      },
+      {
+          "source": "26",
+          "target": "24"
+      },
+      {
+          "source": "26",
+          "target": "25"
+      },
+      {
+          "source": "27",
+          "target": "11"
+      },
+      {
+          "source": "27",
+          "target": "23"
+      },
+      {
+          "source": "27",
+          "target": "24"
+      },
+      {
+          "source": "27",
+          "target": "25"
+      },
+      {
+          "source": "27",
+          "target": "26"
+      },
+      {
+          "source": "28",
+          "target": "11"
+      },
+      {
+          "source": "28",
+          "target": "27"
+      },
+      {
+          "source": "29",
+          "target": "11"
+      },
+      {
+          "source": "29",
+          "target": "23"
+      },
+      {
+          "source": "29",
+          "target": "27"
+      },
+      {
+          "source": "30",
+          "target": "23"
+      },
+      {
+          "source": "31",
+          "target": "11"
+      },
+      {
+          "source": "31",
+          "target": "23"
+      },
+      {
+          "source": "31",
+          "target": "27"
+      },
+      {
+          "source": "31",
+          "target": "30"
+      },
+      {
+          "source": "32",
+          "target": "11"
+      },
+      {
+          "source": "33",
+          "target": "11"
+      },
+      {
+          "source": "33",
+          "target": "27"
+      },
+      {
+          "source": "34",
+          "target": "11"
+      },
+      {
+          "source": "34",
+          "target": "29"
+      },
+      {
+          "source": "35",
+          "target": "11"
+      },
+      {
+          "source": "35",
+          "target": "29"
+      },
+      {
+          "source": "35",
+          "target": "34"
+      },
+      {
+          "source": "36",
+          "target": "11"
+      },
+      {
+          "source": "36",
+          "target": "29"
+      },
+      {
+          "source": "36",
+          "target": "34"
+      },
+      {
+          "source": "36",
+          "target": "35"
+      },
+      {
+          "source": "37",
+          "target": "11"
+      },
+      {
+          "source": "37",
+          "target": "29"
+      },
+      {
+          "source": "37",
+          "target": "34"
+      },
+      {
+          "source": "37",
+          "target": "35"
+      },
+      {
+          "source": "37",
+          "target": "36"
+      },
+      {
+          "source": "38",
+          "target": "11"
+      },
+      {
+          "source": "38",
+          "target": "29"
+      },
+      {
+          "source": "38",
+          "target": "34"
+      },
+      {
+          "source": "38",
+          "target": "35"
+      },
+      {
+          "source": "38",
+          "target": "36"
+      },
+      {
+          "source": "38",
+          "target": "37"
+      },
+      {
+          "source": "39",
+          "target": "25"
+      },
+      {
+          "source": "40",
+          "target": "25"
+      },
+      {
+          "source": "41",
+          "target": "24"
+      },
+      {
+          "source": "41",
+          "target": "25"
+      },
+      {
+          "source": "42",
+          "target": "24"
+      },
+      {
+          "source": "42",
+          "target": "25"
+      },
+      {
+          "source": "42",
+          "target": "41"
+      },
+      {
+          "source": "43",
+          "target": "11"
+      },
+      {
+          "source": "43",
+          "target": "26"
+      },
+      {
+          "source": "43",
+          "target": "27"
+      },
+      {
+          "source": "44",
+          "target": "11"
+      },
+      {
+          "source": "44",
+          "target": "28"
+      },
+      {
+          "source": "45",
+          "target": "28"
+      },
+      {
+          "source": "47",
+          "target": "46"
+      },
+      {
+          "source": "48",
+          "target": "11"
+      },
+      {
+          "source": "48",
+          "target": "25"
+      },
+      {
+          "source": "48",
+          "target": "27"
+      },
+      {
+          "source": "48",
+          "target": "47"
+      },
+      {
+          "source": "49",
+          "target": "11"
+      },
+      {
+          "source": "49",
+          "target": "26"
+      },
+      {
+          "source": "50",
+          "target": "24"
+      },
+      {
+          "source": "50",
+          "target": "49"
+      },
+      {
+          "source": "51",
+          "target": "11"
+      },
+      {
+          "source": "51",
+          "target": "26"
+      },
+      {
+          "source": "51",
+          "target": "49"
+      },
+      {
+          "source": "52",
+          "target": "39"
+      },
+      {
+          "source": "52",
+          "target": "51"
+      },
+      {
+          "source": "53",
+          "target": "51"
+      },
+      {
+          "source": "54",
+          "target": "26"
+      },
+      {
+          "source": "54",
+          "target": "49"
+      },
+      {
+          "source": "54",
+          "target": "51"
+      },
+      {
+          "source": "55",
+          "target": "11"
+      },
+      {
+          "source": "55",
+          "target": "16"
+      },
+      {
+          "source": "55",
+          "target": "25"
+      },
+      {
+          "source": "55",
+          "target": "26"
+      },
+      {
+          "source": "55",
+          "target": "39"
+      },
+      {
+          "source": "55",
+          "target": "41"
+      },
+      {
+          "source": "55",
+          "target": "48"
+      },
+      {
+          "source": "55",
+          "target": "49"
+      },
+      {
+          "source": "55",
+          "target": "51"
+      },
+      {
+          "source": "55",
+          "target": "54"
+      },
+      {
+          "source": "56",
+          "target": "49"
+      },
+      {
+          "source": "56",
+          "target": "55"
+      },
+      {
+          "source": "57",
+          "target": "41"
+      },
+      {
+          "source": "57",
+          "target": "48"
+      },
+      {
+          "source": "57",
+          "target": "55"
+      },
+      {
+          "source": "58",
+          "target": "11"
+      },
+      {
+          "source": "58",
+          "target": "27"
+      },
+      {
+          "source": "58",
+          "target": "48"
+      },
+      {
+          "source": "58",
+          "target": "55"
+      },
+      {
+          "source": "58",
+          "target": "57"
+      },
+      {
+          "source": "59",
+          "target": "48"
+      },
+      {
+          "source": "59",
+          "target": "55"
+      },
+      {
+          "source": "59",
+          "target": "57"
+      },
+      {
+          "source": "59",
+          "target": "58"
+      },
+      {
+          "source": "60",
+          "target": "48"
+      },
+      {
+          "source": "60",
+          "target": "58"
+      },
+      {
+          "source": "60",
+          "target": "59"
+      },
+      {
+          "source": "61",
+          "target": "48"
+      },
+      {
+          "source": "61",
+          "target": "55"
+      },
+      {
+          "source": "61",
+          "target": "57"
+      },
+      {
+          "source": "61",
+          "target": "58"
+      },
+      {
+          "source": "61",
+          "target": "59"
+      },
+      {
+          "source": "61",
+          "target": "60"
+      },
+      {
+          "source": "62",
+          "target": "41"
+      },
+      {
+          "source": "62",
+          "target": "48"
+      },
+      {
+          "source": "62",
+          "target": "55"
+      },
+      {
+          "source": "62",
+          "target": "57"
+      },
+      {
+          "source": "62",
+          "target": "58"
+      },
+      {
+          "source": "62",
+          "target": "59"
+      },
+      {
+          "source": "62",
+          "target": "60"
+      },
+      {
+          "source": "62",
+          "target": "61"
+      },
+      {
+          "source": "63",
+          "target": "48"
+      },
+      {
+          "source": "63",
+          "target": "55"
+      },
+      {
+          "source": "63",
+          "target": "57"
+      },
+      {
+          "source": "63",
+          "target": "58"
+      },
+      {
+          "source": "63",
+          "target": "59"
+      },
+      {
+          "source": "63",
+          "target": "60"
+      },
+      {
+          "source": "63",
+          "target": "61"
+      },
+      {
+          "source": "63",
+          "target": "62"
+      },
+      {
+          "source": "64",
+          "target": "11"
+      },
+      {
+          "source": "64",
+          "target": "48"
+      },
+      {
+          "source": "64",
+          "target": "55"
+      },
+      {
+          "source": "64",
+          "target": "57"
+      },
+      {
+          "source": "64",
+          "target": "58"
+      },
+      {
+          "source": "64",
+          "target": "59"
+      },
+      {
+          "source": "64",
+          "target": "60"
+      },
+      {
+          "source": "64",
+          "target": "61"
+      },
+      {
+          "source": "64",
+          "target": "62"
+      },
+      {
+          "source": "64",
+          "target": "63"
+      },
+      {
+          "source": "65",
+          "target": "48"
+      },
+      {
+          "source": "65",
+          "target": "55"
+      },
+      {
+          "source": "65",
+          "target": "57"
+      },
+      {
+          "source": "65",
+          "target": "58"
+      },
+      {
+          "source": "65",
+          "target": "59"
+      },
+      {
+          "source": "65",
+          "target": "60"
+      },
+      {
+          "source": "65",
+          "target": "61"
+      },
+      {
+          "source": "65",
+          "target": "62"
+      },
+      {
+          "source": "65",
+          "target": "63"
+      },
+      {
+          "source": "65",
+          "target": "64"
+      },
+      {
+          "source": "66",
+          "target": "48"
+      },
+      {
+          "source": "66",
+          "target": "58"
+      },
+      {
+          "source": "66",
+          "target": "59"
+      },
+      {
+          "source": "66",
+          "target": "60"
+      },
+      {
+          "source": "66",
+          "target": "61"
+      },
+      {
+          "source": "66",
+          "target": "62"
+      },
+      {
+          "source": "66",
+          "target": "63"
+      },
+      {
+          "source": "66",
+          "target": "64"
+      },
+      {
+          "source": "66",
+          "target": "65"
+      },
+      {
+          "source": "67",
+          "target": "57"
+      },
+      {
+          "source": "68",
+          "target": "11"
+      },
+      {
+          "source": "68",
+          "target": "24"
+      },
+      {
+          "source": "68",
+          "target": "25"
+      },
+      {
+          "source": "68",
+          "target": "27"
+      },
+      {
+          "source": "68",
+          "target": "41"
+      },
+      {
+          "source": "68",
+          "target": "48"
+      },
+      {
+          "source": "69",
+          "target": "11"
+      },
+      {
+          "source": "69",
+          "target": "24"
+      },
+      {
+          "source": "69",
+          "target": "25"
+      },
+      {
+          "source": "69",
+          "target": "27"
+      },
+      {
+          "source": "69",
+          "target": "41"
+      },
+      {
+          "source": "69",
+          "target": "48"
+      },
+      {
+          "source": "69",
+          "target": "68"
+      },
+      {
+          "source": "70",
+          "target": "11"
+      },
+      {
+          "source": "70",
+          "target": "24"
+      },
+      {
+          "source": "70",
+          "target": "25"
+      },
+      {
+          "source": "70",
+          "target": "27"
+      },
+      {
+          "source": "70",
+          "target": "41"
+      },
+      {
+          "source": "70",
+          "target": "58"
+      },
+      {
+          "source": "70",
+          "target": "68"
+      },
+      {
+          "source": "70",
+          "target": "69"
+      },
+      {
+          "source": "71",
+          "target": "11"
+      },
+      {
+          "source": "71",
+          "target": "25"
+      },
+      {
+          "source": "71",
+          "target": "27"
+      },
+      {
+          "source": "71",
+          "target": "41"
+      },
+      {
+          "source": "71",
+          "target": "48"
+      },
+      {
+          "source": "71",
+          "target": "68"
+      },
+      {
+          "source": "71",
+          "target": "69"
+      },
+      {
+          "source": "71",
+          "target": "70"
+      },
+      {
+          "source": "72",
+          "target": "11"
+      },
+      {
+          "source": "72",
+          "target": "26"
+      },
+      {
+          "source": "72",
+          "target": "27"
+      },
+      {
+          "source": "73",
+          "target": "48"
+      },
+      {
+          "source": "74",
+          "target": "48"
+      },
+      {
+          "source": "74",
+          "target": "73"
+      },
+      {
+          "source": "75",
+          "target": "25"
+      },
+      {
+          "source": "75",
+          "target": "41"
+      },
+      {
+          "source": "75",
+          "target": "48"
+      },
+      {
+          "source": "75",
+          "target": "68"
+      },
+      {
+          "source": "75",
+          "target": "69"
+      },
+      {
+          "source": "75",
+          "target": "70"
+      },
+      {
+          "source": "75",
+          "target": "71"
+      },
+      {
+          "source": "76",
+          "target": "48"
+      },
+      {
+          "source": "76",
+          "target": "58"
+      },
+      {
+          "source": "76",
+          "target": "62"
+      },
+      {
+          "source": "76",
+          "target": "63"
+      },
+      {
+          "source": "76",
+          "target": "64"
+      },
+      {
+          "source": "76",
+          "target": "65"
+      },
+      {
+          "source": "76",
+          "target": "66"
+      }
+  ],
+  "categories": [
+      {
+          "name": "A"
+      },
+      {
+          "name": "B"
+      },
+      {
+          "name": "C"
+      },
+      {
+          "name": "D"
+      },
+      {
+          "name": "E"
+      },
+      {
+          "name": "F"
+      },
+      {
+          "name": "G"
+      },
+      {
+          "name": "H"
+      },
+      {
+          "name": "I"
+      }
+  ]
+}
\ No newline at end of file
diff --git a/src/views/components/echarts/graph-relation.vue b/src/views/components/echarts/graph-relation.vue
new file mode 100644
index 0000000..ec3f5a7
--- /dev/null
+++ b/src/views/components/echarts/graph-relation.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <div ref="myPage" style="height:calc(100vh);">
+      <RelationGraph
+        ref="graphRef"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick"
+      >
+        <template #node="{node}">
+          <div @mouseover="showNodeTips(node, $event)" @mouseout="hideNodeTips(node, $event)">
+            <div class="c-my-rg-node">
+              <i style="font-size: 30px;" :class="node.data.myicon" />
+            </div>
+            <div style="color: forestgreen;font-size: 16px;position: absolute;width: 160px;height:25px;line-height: 25px;margin-top:5px;margin-left:-48px;text-align: center;background-color: rgba(66,187,66,0.2);">
+              {{ node.text }}
+            </div>
+          </div>
+        </template>
+      </RelationGraph>
+      <div v-if="isShowNodeTipsPanel" :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }" style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;">
+        <div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">节点名称：{{ currentNode.text }}</div>
+        <div class="c-node-menu-item">id:{{ currentNode.text }}</div>
+        <div class="c-node-menu-item">图标:{{ currentNode.data.myicon }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 如果您没有在main.js文件中使用Vue.use(RelationGraph); 就需要使用下面这一行代码来引入relation-graph
+import RelationGraph from 'relation-graph'
+export default {
+  name: 'Demo',
+  components: { RelationGraph },
+  data() {
+    return {
+      isShowCodePanel: false,
+      isShowNodeTipsPanel: false,
+      nodeMenuPanelPosition: { x: 0, y: 0 },
+      currentNode: {},
+      graphOptions: {
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        defaultNodeColor: 'rgba(66,187,66,1)',
+        defaultJunctionPoint: 'border'
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+      }
+    }
+  },
+  mounted() {
+    this.showGraph()
+  },
+  methods: {
+    // https://relation-graph.com/#/docs/start
+    showGraph() {
+      const __graph_json_data = {
+        rootId: '1',
+        nodes: [
+          // 注意：在节点配置信息中，你的自定义属性需要像下面这样放到data标签中，否则数据会丢失
+          { id: '1', text: '文书档案', data: { myicon: 'el-icon-star-on' }},
+
+          { id: '2', text: '档案分类', data: { myicon: 'el-icon-star-on' }},
+          { id: '21', text: '行政管理', data: { myicon: 'el-icon-setting' }},
+          { id: '22', text: '党群工作', data: { myicon: 'el-icon-setting' }},
+          { id: '23', text: '经营管理', data: { myicon: 'el-icon-setting' }},
+          { id: '24', text: '生成管理', data: { myicon: 'el-icon-setting' }},
+
+          { id: '3', text: '保管期限', data: { myicon: 'el-icon-star-on' }},
+          { id: '31', text: '永久', data: { myicon: 'el-icon-setting' }},
+          { id: '32', text: '定期30年', data: { myicon: 'el-icon-setting' }},
+          { id: '33', text: '定期10年', data: { myicon: 'el-icon-setting' }},
+
+          { id: '4', text: '年度', data: { myicon: 'el-icon-star-on' }},
+          { id: '41', text: '2022', data: { myicon: 'el-icon-s-promotion' }},
+          { id: '42', text: '2023', data: { myicon: 'el-icon-s-promotion' }},
+          { id: '43', text: '2024', data: { myicon: 'el-icon-s-promotion' }},
+
+          { id: '5', text: '密级', data: { myicon: 'el-icon-star-on' }},
+          { id: '51', text: '公开', data: { myicon: 'el-icon-sunny' }},
+          { id: '52', text: '限制', data: { myicon: 'el-icon-sunny' }},
+          { id: '53', text: '秘密', data: { myicon: 'el-icon-sunny' }},
+          { id: '54', text: '机密', data: { myicon: 'el-icon-sunny' }},
+          { id: '55', text: '绝密', data: { myicon: 'el-icon-sunny' }}
+        ],
+        lines: [
+          { from: '1', to: '2', text: 'class' },
+          { from: '1', to: '3', text: 'retention' },
+          { from: '1', to: '4', text: 'year' },
+          { from: '1', to: '5', text: 'classification' },
+          { from: '2', to: '21', text: 'class_01' },
+          { from: '2', to: '22', text: 'class_02' },
+          { from: '2', to: '23', text: 'class_03' },
+          { from: '2', to: '24', text: 'class_04' },
+          { from: '3', to: '31', text: 'retention_01' },
+          { from: '3', to: '32', text: 'retention_02' },
+          { from: '3', to: '33', text: 'retention_03' },
+          { from: '4', to: '41', text: 'year_01' },
+          { from: '4', to: '42', text: 'year_02' },
+          { from: '4', to: '43', text: 'year_03' },
+          { from: '5', to: '51', text: 'classification_01' },
+          { from: '5', to: '52', text: 'classification_02' },
+          { from: '5', to: '53', text: 'classification_03' },
+          { from: '5', to: '54', text: 'classification_04' },
+          { from: '5', to: '55', text: 'classification_05' }
+        ]
+      }
+      this.$refs.graphRef.setJsonData(__graph_json_data, (graphInstance) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+      })
+    },
+    onNodeClick(nodeObject, $event) {
+      console.log('onNodeClick:', nodeObject)
+    },
+    onLineClick(lineObject, linkObject, $event) {
+      console.log('onLineClick:', lineObject)
+    },
+    showNodeTips(nodeObject, $event) {
+      this.currentNode = nodeObject
+      const _base_position = this.$refs.myPage.getBoundingClientRect()
+      console.log('showNodeMenus:', $event.clientX, $event.clientY, _base_position)
+      this.isShowNodeTipsPanel = true
+      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10
+      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10
+    },
+    hideNodeTips(nodeObject, $event) {
+      this.isShowNodeTipsPanel = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
+
+<style lang="scss" scoped>
+.c-my-rg-node {
+  height:80px;line-height: 80px;border-radius: 50%;cursor: pointer;
+  display: flex;
+  place-items: center;
+  justify-content: center;
+}
+.c-node-menu-item{
+  line-height: 30px;padding-left: 10px;cursor: pointer;color: #444444;font-size: 14px;border-top:#efefef solid 1px;
+}
+.c-node-menu-item:hover{
+  background-color: rgba(66,187,66,0.2);
+}
+</style>
diff --git a/src/views/components/echarts/graph.vue b/src/views/components/echarts/graph.vue
new file mode 100644
index 0000000..e0695b5
--- /dev/null
+++ b/src/views/components/echarts/graph.vue
@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <div ref="myPage" class="my-graph" style="height: calc(100vh - 184px);">
+
+      <RelationGraph
+        ref="graphRef"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick"
+        :on-canvas-click="onCanvasClick"
+      >
+        <template #node="{node}">
+          <div @mouseover="showNodeTips(node, $event)" @mouseout="hideNodeTips(node, $event)">
+            <div :class="node.id === 1 ? 'c-my-rg-node c-big-style': 'c-my-rg-node '" :style="{'height': node.width + 'px', 'line-height': node.width + 'px'}">
+              {{ node.size }}
+            </div>
+          </div>
+        </template>
+        <template #graph-plug>
+          <!-- <div
+            style="position:absolute;z-index:700;left:20px;top:20px;height:70px;padding: 20px;border: #efefef solid 1px;color: #555555;border-radius: 10px;background-color: rgba(255,255,255,0.79);font-size: 12px;"
+          /> -->
+          <div v-if="isShowNodeTipsPanel" :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }" style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;">
+            <div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">节点名称：{{ currentNode.text }}</div>
+            <div class="c-node-menu-item">id:{{ currentNode.id }}</div>
+          </div>
+        </template>
+      </RelationGraph>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import RelationGraph from 'relation-graph'
+const __graph_json_data_small = {
+  'rootId': '1',
+  'nodes': [
+    { id: '1', text: '文书档案', force_weight: 10000, color: '#ec6941', borderColor: '#ff875e', width: 150, height: 150 },
+
+    { id: '2', text: '档案分类' },
+    { id: '21', text: '行政管理' },
+    { id: '22', text: '党群工作' },
+    { id: '23', text: '经营管理' },
+    { id: '24', text: '生成管理' },
+
+    { id: '3', text: '保管期限' },
+    { id: '31', text: '永久' },
+    { id: '32', text: '定期30年' },
+    { id: '33', text: '定期10年' },
+
+    { id: '4', text: '年度' },
+    { id: '41', text: '2022' },
+    { id: '42', text: '2023' },
+    { id: '43', text: '2024' },
+
+    { id: '5', text: '密级' },
+    { id: '51', text: '公开' },
+    { id: '52', text: '限制' },
+    { id: '53', text: '秘密' },
+    { id: '54', text: '机密' },
+    { id: '55', text: '绝密' }
+  ],
+  'lines': [
+    { from: '1', to: '2', text: 'class', dashType: 1 },
+    { from: '1', to: '3', text: 'retention', dashType: 2 },
+    { from: '1', to: '4', text: 'year', dashType: 3 },
+    { from: '1', to: '5', text: 'classification', dashType: 4 },
+    { from: '2', to: '21', text: 'class_01' },
+    { from: '2', to: '22', text: 'class_02' },
+    { from: '2', to: '23', text: 'class_03' },
+    { from: '2', to: '24', text: 'class_04' },
+    { from: '3', to: '31', text: 'retention_01' },
+    { from: '3', to: '32', text: 'retention_02' },
+    { from: '3', to: '33', text: 'retention_03' },
+    { from: '4', to: '41', text: 'year_01' },
+    { from: '4', to: '42', text: 'year_02' },
+    { from: '4', to: '43', text: 'year_03' },
+    { from: '5', to: '51', text: 'classification_01' },
+    { from: '5', to: '52', text: 'classification_02' },
+    { from: '5', to: '53', text: 'classification_03' },
+    { from: '5', to: '54', text: 'classification_04' },
+    { from: '5', to: '55', text: 'classification_05' }
+  ]
+}
+export default {
+  name: 'Demo',
+  components: { RelationGraph },
+  data() {
+    return {
+      allData: __graph_json_data_small,
+      isShowCodePanel: false,
+      isShowNodeTipsPanel: false,
+      nodeMenuPanelPosition: { x: 0, y: 0 },
+      currentNode: {},
+      graphOptions: {
+        defaultNodeBorderWidth: 0,
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        defaultLineShape: 1,
+        disableNodeclickEffect: true,
+        layout: {
+          label: '自动布局',
+          layoutName: 'force',
+          layoutClassName: 'seeks-layout-force'
+        },
+        // defaultJunctionPoint: 'border',
+        defaultLineColor: 'rgba(0,0,0,0.8)'
+
+      }
+    }
+  },
+  mounted() {
+    this.showGraph()
+    this.resizeTimer = setInterval(async() => {
+      // const graphInstance = this.$refs.graphRef.getInstance();
+      // await graphInstance.zoomToFit();
+    }, 3000)
+  },
+  beforeDestroy() {
+    console.log('beforeDestroy:clear timer')
+    clearInterval(this.resizeTimer)
+  },
+  methods: {
+    async showGraph() {
+      // const data = __graph_json_data_small
+      const graphInstance = this.$refs.graphRef.getInstance()
+      await this.stopForceIfNeed()
+      await graphInstance.setJsonData(this.allData)
+      // if (this.useBigData) {
+      //   await graphInstance.setZoom(30)
+      // } else {
+      //   await graphInstance.setZoom(80)
+      // }
+    },
+    async stopForceIfNeed() {
+      const graphInstance = this.$refs.graphRef.getInstance()
+      await graphInstance.stopAutoLayout()
+    },
+    async updateLayouterOptions() {
+      await this.stopForceIfNeed()
+      const graphInstance = this.$refs.graphRef.getInstance()
+      graphInstance.layouter.maxLayoutTimes = this.graphOptions.layout.maxLayoutTimes
+      graphInstance.layouter.force_node_repulsion = this.graphOptions.layout.force_node_repulsion
+      graphInstance.layouter.force_line_elastic = this.graphOptions.layout.force_line_elastic
+      setTimeout(async() => {
+        await graphInstance.startAutoLayout()
+      }, 500)
+    },
+    onNodeClick(nodeObject, $event) {
+      console.log('onNodeClick:', nodeObject)
+      const allChildIds = this.deepGeAlltChildIds(nodeObject)
+      const graphInstance = this.$refs.graphRef.getInstance()
+      for (const node of graphInstance.getNodes()) {
+        if (allChildIds.includes(node.id)) {
+          node.opacity = 1
+          node.color = 'rgb(116,2,173)'
+        } else {
+          node.opacity = 0.1
+          node.color = undefined
+        }
+      }
+      for (const link of graphInstance.getLinks()) {
+        if (allChildIds.includes(link.fromNode.id) && allChildIds.includes(link.toNode.id)) {
+          link.relations.forEach(line => {
+            line.color = 'rgb(116,2,173)'
+          })
+        } else {
+          link.relations.forEach(line => {
+            line.color = ''
+          })
+        }
+      }
+    },
+    deepGeAlltChildIds(node, ids = []) {
+      if (ids.includes(node.id)) return
+      ids.push(node.id)
+      for (const cNode of node.lot.childs) {
+        this.deepGeAlltChildIds(cNode, ids)
+      }
+      return ids
+    },
+    onCanvasClick($event) {
+      console.log('onCanvasClick:')
+      const graphInstance = this.$refs.graphRef.getInstance()
+      for (const node of graphInstance.getNodes()) {
+        console.log('node', node)
+        node.opacity = 1
+        this.allData.nodes.forEach((item, index) => {
+          if (item.id === node.id) {
+            node.color = item.color
+          }
+        })
+      }
+      for (const link of graphInstance.getLinks()) {
+        link.relations.forEach(line => {
+          line.color = undefined
+        })
+      }
+    },
+    onLineClick(lineObject, linkObject, $event) {
+      console.log('onLineClick:', lineObject)
+    },
+    showNodeTips(nodeObject, $event) {
+      this.currentNode = nodeObject
+      const _base_position = this.$refs.graphRef.getInstance().options.fullscreen ? { x: 0, y: 0 } : this.$refs.myPage.getBoundingClientRect()
+      console.log('showNodeMenus:', this.$refs.graphRef.getInstance().options.fullscreen, $event.clientX, $event.clientY, _base_position)
+      this.isShowNodeTipsPanel = true
+      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10
+      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10
+    },
+    hideNodeTips(nodeObject, $event) {
+      this.isShowNodeTipsPanel = false
+    }
+  }
+}
+</script>
+
+<style>
+</style>
+
+<style lang="scss" scoped>
+::v-deep .rel-toolbar{
+  color: #000;
+  .c-current-zoom{
+    color: #000;
+  }
+}
+// .my-graph{
+//   // background: linear-gradient(to right, rgb(16, 185, 129), rgb(101, 163, 13));
+// }
+
+.c-my-rg-node {
+  border-radius: 50%;
+  cursor: pointer;
+  height: 80px;
+  line-height: 80px;
+  display: flex;
+  place-items: center;
+  justify-content: center;
+  align-items: center;
+}
+.c-node-menu-item{
+  line-height: 30px;padding-left: 10px;cursor: pointer;color: #444444;font-size: 14px;border-top:#efefef solid 1px;
+}
+.c-node-menu-item:hover{
+  background-color: rgba(66,187,66,0.2);
+}
+.c-big-style{
+  font-size: 30px;
+}
+</style>
diff --git a/src/views/components/echarts/graph1.vue b/src/views/components/echarts/graph1.vue
new file mode 100644
index 0000000..a9ade4d
--- /dev/null
+++ b/src/views/components/echarts/graph1.vue
@@ -0,0 +1,160 @@
+<template>
+  <div id="atlasChart" style="width:100%; height: calc(100vh - 184px);" />
+</template>
+
+<script>
+// import * as echarts from 'echarts'
+import echarts from 'echarts'
+
+export default {
+  data() {
+    return {
+      categories: [],
+      types: ['未作答', '较好', '一般', '较差'],
+      datas: [
+        { id: '1', name: '集合与逻辑用语', category: 1, url: 'knowMath' },
+        { id: '2', name: '等式与不等式', category: 1, url: 'knowMath' },
+        { id: '3', name: '基本初等函数', category: 1, url: 'knowMath' },
+        { id: '4', name: '三角函数', category: 1, url: 'knowMath' },
+        { id: '5', name: '平面向量', category: 1, url: 'knowMath' },
+        { id: '6', name: '复数', category: 1, url: 'knowMath' },
+        { id: '7', name: '空间向量与立体几何', category: 1, url: 'knowMath' },
+        { id: '8', name: '直线与圆', category: 1, url: 'knowMath' },
+        { id: '9', name: '平面解析几何', category: 1, url: 'knowMath' },
+        { id: '10', name: '数列', category: 1, url: 'knowMath' },
+        { id: '11', name: '导数', category: 1, url: 'knowMath' },
+        { id: '12', name: '计数原理与概率统计', category: 1, url: 'knowMath' }
+      ],
+      links: [
+        { target: '1', name: 'link02', des: 'link02des' },
+        { target: '2', name: 'link03', des: 'link03des' },
+        { target: '3', name: 'link04', des: 'link05des' },
+        { target: '4', name: 'link04', des: 'link05des' },
+        { target: '5', name: 'link04', des: 'link05des' },
+        { target: '6', name: 'link04', des: 'link05des' },
+        { target: '7', name: 'link04', des: 'link05des' },
+        { target: '8', name: 'link04', des: 'link05des' },
+        { target: '9', name: 'link04', des: 'link05des' },
+        { target: '10', name: 'link04', des: 'link05des' },
+        { target: '11', name: 'link04', des: 'link05des' },
+        { target: '12', name: 'link04', des: 'link05des' }
+      ]
+    }
+  },
+  created() {
+    this.$nextTick(function() {
+      this.montheahcrt()
+    })
+  },
+  methods: {
+    montheahcrt() {
+      var myChart = echarts.init(document.getElementById('atlasChart'))
+
+      for (var i = 0; i < this.types.length; i++) {
+        this.categories[i] = {
+          name: this.types[i]
+        }
+      }
+      var option = {
+        animationDurationUpdate: 1500, // 数据更新动画的时长。
+        animationEasingUpdate: 'quinticInOut', // 数据更新动画的缓动效果。
+        color: ['#008000', '#cc6633', '#c00', '#ccc'],
+        title: {
+          text: '掌握情况：', // 正标题
+          bottom: '20px', // 上下位置
+          left: '20px', // 左右位置
+          textStyle: { // 图例文字的样式
+            fontSize: 16,
+            fontWeight: 550,
+            color: '#666'
+          }
+        },
+        grid: {
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0
+        },
+        legend: [{
+          // selectedMode: 'single',
+          // 图例位置
+          bottom: '20px',
+          left: '120px',
+          textStyle: { // 图例文字的样式
+            fontSize: 16,
+            fontWeight: 550,
+            color: '#666'
+          },
+          icon: 'circle', //  'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+          itemGap: 35, // 图例之间的间距
+          data: this.categories.map(function(a) {
+            return a.name
+          })
+        }],
+
+        series: [{
+          type: 'graph', // 类型:关系图
+          layout: 'force', // 图的布局，类型为力导图
+          focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
+          draggable: true, // 指示节点是否可以拖动
+          symbolSize: 23, // 调整节点的大小
+          roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
+          edgeSymbol: ['circle', 'arrow'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
+          edgeSymbolSize: [2, 10], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
+          edgeLabel: {
+            normal: {
+              show: false,
+              formatter: function(x) {
+                return x.data.name
+              },
+              textStyle: {
+                fontSize: 14,
+                color: '#000'
+              }
+            }
+          },
+          force: { // 力引导图基本配置
+            layoutAnimation: true,
+            // xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
+            // yAxisIndex : 0, //y轴坐标
+            gravity: 0.02, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
+            edgeLength: 30, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
+            repulsion: 300 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
+            // repulsion: 3000, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
+            // edgeLength: 80 //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
+          },
+          lineStyle: {
+            normal: {
+              width: 1,
+              color: '#4b565b',
+              // color: 'target', // 决定边的颜色是与起点相同还是与终点相同
+              curveness: 0.1,
+              type: 'dashed' // 'dotted'点型虚线 'solid'实线 'dashed'线性虚线
+            }
+          },
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{b}',
+            textStyle: {
+              fontSize: 16,
+              fontWeight: 600,
+              color: '#666'
+            }
+          },
+          // 数据
+          data: this.datas,
+          links: this.links,
+          categories: this.categories
+        }]
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', function() {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+</style>
diff --git a/src/views/components/echarts/graph2.vue b/src/views/components/echarts/graph2.vue
new file mode 100644
index 0000000..0a89c25
--- /dev/null
+++ b/src/views/components/echarts/graph2.vue
@@ -0,0 +1,85 @@
+<template>
+  <div id="atlasChart" style="width:100%; height: calc(100vh - 184px);" />
+</template>
+
+<script>
+// import * as echarts from 'echarts'
+import echarts from 'echarts'
+require('echarts/theme/macarons')
+import data from './data.json'
+
+export default {
+  data() {
+    return {
+      datas: data
+    }
+  },
+  created() {
+    this.$nextTick(function() {
+      this.montheahcrt()
+    })
+  },
+  methods: {
+    montheahcrt() {
+      var myChart = echarts.init(document.getElementById('atlasChart'))
+
+      this.datas.nodes.forEach(function(node) {
+        node.label = {
+          show: node.symbolSize > 30
+        }
+      })
+      var option = {
+        title: {
+          text: '',
+          subtext: '',
+          top: 'bottom',
+          left: 'right'
+        },
+        tooltip: {},
+        legend: [
+          {
+            // selectedMode: 'single',
+            data: this.datas.categories.map(function(a) {
+              return a.name
+            })
+          }
+        ],
+        animationDuration: 1500,
+        animationEasingUpdate: 'quinticInOut',
+        series: [
+          {
+            name: 'Les Miserables',
+            type: 'graph',
+            legendHoverLink: false,
+            layout: 'none',
+            data: this.datas.nodes,
+            links: this.datas.links,
+            categories: this.datas.categories,
+            roam: true,
+            label: {
+              position: 'right',
+              formatter: '{b}'
+            },
+            lineStyle: {
+              color: 'source',
+              curveness: 0.3
+            },
+            emphasis: {
+              focus: 'adjacency',
+              lineStyle: {
+                width: 10
+              }
+            }
+          }
+        ]
+      }
+      myChart.setOption(option)
+      window.addEventListener('resize', function() {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+</style>
diff --git a/src/views/components/echarts/graph4.vue b/src/views/components/echarts/graph4.vue
new file mode 100644
index 0000000..e60669e
--- /dev/null
+++ b/src/views/components/echarts/graph4.vue
@@ -0,0 +1,253 @@
+<template>
+  <div id="chart" class="chart" />
+</template>
+<script>
+// import { expendNodes } from './mock'
+var echarts = require('echarts/lib/echarts')
+require('echarts/lib/chart/graph')
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+
+const data = [
+  {
+    id: 1,
+    name: '测试节点',
+    categary: '1',
+    symbolSize: 60
+  },
+  {
+    id: 2,
+    name: '测试节点',
+    categary: '1',
+    symbolSize: 40
+  },
+  {
+    id: 3,
+    name: '测试节点',
+    categary: '2'
+  },
+  {
+    id: 4,
+    name: '测试节点',
+    categary: ''
+  },
+  {
+    id: 5,
+    name: '测试节点测试节点',
+    categary: ''
+  },
+  {
+    id: 6,
+    name: '测试节点',
+    categary: '2'
+  },
+  {
+    id: 7,
+    name: '测试节点',
+    categary: ''
+  },
+  {
+    id: 8,
+    name: '测试节点',
+    categary: ''
+  },
+  {
+    id: 9,
+    name: '测试节点',
+    categary: ''
+  },
+  {
+    id: 10,
+    name: '测试节点',
+    categary: ''
+  }
+]
+// 节点连线
+const linkData = [
+  { source: '2', target: '3', name: '' },
+  { source: '3', target: '4', name: '' },
+  { source: '3', target: '5', name: '' },
+  { source: '5', target: '6', name: '' },
+  { source: '5', target: '7', name: '' },
+  { source: '5', target: '8', name: '' },
+  { source: '9', target: '10', name: '' },
+  { source: '10', target: '9', name: '' },
+  { source: '1', target: '2', name: '' },
+  { source: '1', target: '10', name: '' }
+
+]
+
+export default {
+  name: 'Charts',
+  props: {
+    // chartList: {
+    //   type: Object,
+    //   required: true
+    // }
+  },
+  data() {
+    return {
+      myChart: '',
+      seriesData: data,
+      seriesLinks: linkData,
+      categories: [],
+      lastClickId: '',
+      colors: ['#a3d2ca', '#056676', '#ea2c62', '#16a596', '#03c4a1', '#f5a25d',
+        '#8CD282', '#32e0c4', '#00FAE1', '#f05454']
+    }
+  },
+  watch: {
+    // chartList: {
+    //   handler(val) {
+    //     this.formatData(val || [], true)
+    //   }
+    // }
+  },
+  beforeDestroy() {},
+  methods: {
+    /**
+     * 节点点击事件
+     */
+    async nodeClick(params) {
+      const index = this.seriesData.findIndex(
+        (item) => item.id === params.data.id
+      )
+      console.log('点了节点:' + index + 1, 'clicked')
+    },
+    /**
+     * 设置echarts配置项,重绘画布
+     */
+    initCharts() {
+      // const that = this
+      if (!this.myChart) {
+        this.myChart = echarts.init(document.getElementById('chart'))
+        this.myChart.on('click', (params) => {
+          if (params.dataType === 'node') {
+            // 判断点击的是图表的节点部分
+            this.nodeClick(params)
+          }
+        })
+      }
+      // 指定图表的配置项和数据
+      const option = {
+        // 动画更新变化时间
+        animationDurationUpdate: 500,
+        animationEasingUpdate: 'quinticInOut',
+        tooltip: {
+          show: false
+        },
+        series: [
+          {
+            type: 'graph',
+            layout: 'force',
+            legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
+            hoverAnimation: true, // 是否开启鼠标悬停节点的显示动画
+            focusNodeAdjacency: true,
+            edgeLabel: {
+              position: 'middle', // 边上的文字样式
+              normal: {
+                show: true,
+                textStyle: {
+                  fontSize: 12
+                },
+                position: 'middle',
+                formatter: function(x) {
+                  return x.data.name
+                }
+              }
+            },
+            edgeSymbol: ['', 'arrow'],
+            force: {
+              edgeLength: 15,
+              repulsion: 200
+            },
+            roam: true,
+            draggable: true, // 每个节点的拖拉
+            itemStyle: {
+              normal: {
+                color: '#00FAE1',
+                cursor: 'pointer',
+                // color:Math.floor(Math.random()*16777215).toString(16),
+                // color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'],
+                label: {
+                  show: true,
+                  position: [-10, -15],
+                  textStyle: {
+                    // 标签的字体样式
+                    color: '#fff', // 字体颜色
+                    fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
+                    fontWeight: 'bold', // 'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
+                    fontFamily: 'sans-serif', // 文字的字体系列
+                    fontSize: 12 // 字体大小
+                  }
+
+                },
+                nodeStyle: {
+                  brushType: 'both',
+                  borderColor: 'rgba(255,215,0,0.4)',
+                  borderWidth: 1
+                }
+              },
+              // 鼠标放上去有阴影效果
+              emphasis: {
+                shadowColor: '#00FAE1',
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowBlur: 40
+
+              }
+            },
+            lineStyle: {
+              width: 2
+
+            },
+            label: {
+              fontSize: 18
+            },
+            symbolSize: 24, // 节点大小
+            links: this.seriesLinks,
+            data: this.seriesData,
+            categories: this.categories,
+            cursor: 'pointer'
+          }
+        ]
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      this.myChart.setOption(option)
+    },
+    /**
+     * 格式化数据到表格需要的数据
+     */
+    formatData(list, reset = false) {
+      const that = this
+      const nodes = list.seriesData
+      this.seriesData = []
+      this.seriesLinks = []
+      let colorIndex = 0
+      const data = []
+      const loadedCat = []
+      nodes.forEach((item, index) => {
+        if (item.categary && loadedCat.indexOf(item.categary) === -1) {
+          colorIndex = Math.floor((Math.random() * that.colors.length))
+          loadedCat.push(item.categary)
+          this.categories.push({ name: item.categary })
+        }
+        item.itemStyle = {
+          color: that.colors[colorIndex],
+          borderColor: '#ffffff'
+        }
+        data.push(item)
+      })
+      this.seriesData.push(...data)
+      this.seriesLinks.push(...list.linksData)
+      this.initCharts()
+    }
+
+  }
+}
+</script>
+<style scoped>
+.chart {
+  height: 100%;
+}
+</style>
diff --git a/src/views/components/echarts/graph5.vue b/src/views/components/echarts/graph5.vue
new file mode 100644
index 0000000..90fe56d
--- /dev/null
+++ b/src/views/components/echarts/graph5.vue
@@ -0,0 +1,217 @@
+<template>
+  <div id="knowledge-graph" style="width: 100%; height: calc(100vh - 184px);" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'KnowledgeGraph',
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      // 初始化 echarts 实例
+      const chart = echarts.init(document.getElementById('knowledge-graph'))
+
+      // 定义知识图谱数据，并为每个节点设置颜色
+      // const data = [
+      //   { name: '文书档案', itemStyle: { color: '#cc6633' }},
+      //   { name: '档案分类', itemStyle: { color: '#66cc33' }},
+      //   { name: '行政管理', itemStyle: { color: '#66cc33' }},
+      //   { name: '党群工作', itemStyle: { color: '#66cc33' }},
+      //   { name: '经营管理', itemStyle: { color: '#66cc33' }},
+      //   { name: '生成管理', itemStyle: { color: '#66cc33' }},
+      //   { name: '保管期限', itemStyle: { color: '#cc3399' }},
+      //   { name: '永久', itemStyle: { color: '#cc3399' }},
+      //   { name: '定期30年', itemStyle: { color: '#cc3399' }},
+      //   { name: '定期10年', itemStyle: { color: '#cc3399' }},
+      //   { name: '年度', itemStyle: { color: '#6699cc' }},
+      //   { name: '2022', itemStyle: { color: '#6699cc' }},
+      //   { name: '2023', itemStyle: { color: '#6699cc' }},
+      //   { name: '2024', itemStyle: { color: '#6699cc' }},
+      //   { name: '密级', itemStyle: { color: '#cc9966' }},
+      //   { name: '公开', itemStyle: { color: '#cc9966' }},
+      //   { name: '限制', itemStyle: { color: '#cc9966' }},
+      //   { name: '秘密', itemStyle: { color: '#cc9966' }},
+      //   { name: '机密', itemStyle: { color: '#cc9966' }},
+      //   { name: '绝密', itemStyle: { color: '#cc9966' }}
+      // ]
+
+      const data = [
+        { name: '文书档案' },
+        { name: '档案分类' },
+        { name: '行政管理' },
+        { name: '党群工作' },
+        { name: '经营管理' },
+        { name: '生成管理' },
+        { name: '保管期限' },
+        { name: '永久' },
+        { name: '定期30年' },
+        { name: '定期10年' },
+        { name: '年度' },
+        { name: '2022' },
+        { name: '2023' },
+        { name: '2024' },
+        { name: '密级' },
+        { name: '公开' },
+        { name: '限制' },
+        { name: '秘密' },
+        { name: '机密' },
+        { name: '绝密' }
+      ]
+
+      const links = [
+        { source: '文书档案', target: '档案分类' },
+        { source: '文书档案', target: '年度' },
+        { source: '文书档案', target: '保管期限' },
+        { source: '文书档案', target: '密级' },
+        { source: '保管期限', target: '永久' },
+        { source: '保管期限', target: '定期30年' },
+        { source: '保管期限', target: '定期10年' },
+        { source: '年度', target: '2022' },
+        { source: '年度', target: '2023' },
+        { source: '年度', target: '2024' },
+        { source: '密级', target: '公开' },
+        { source: '密级', target: '限制' },
+        { source: '密级', target: '秘密' },
+        { source: '密级', target: '机密' },
+        { source: '密级', target: '绝密' },
+        { source: '档案分类', target: '行政管理' },
+        { source: '档案分类', target: '党群工作' },
+        { source: '档案分类', target: '经营管理' },
+        { source: '档案分类', target: '生成管理' }
+      ]
+
+      // 配置项
+      const option = {
+        tooltip: {},
+        series: [
+          {
+            type: 'graph',
+            layout: 'force',
+            data: data,
+            links: links,
+            cursor: 'pointer',
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: 'rgba(255, 149, 0, 0.1)' // 0% 处的颜色
+              }, {
+                offset: 1,
+                color: 'rgba(255, 149, 0, 1)' // 100% 处的颜色
+              }],
+              global: false // 缺省为 false
+            },
+            legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
+            hoverAnimation: true, // 是否开启鼠标悬停节点的显示动画
+            focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
+            draggable: true, // 指示节点是否可以拖动
+            symbolSize: 60, // 调整节点的大小
+            roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
+            edgeSymbol: ['', 'arrow'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
+            edgeSymbolSize: [2, 6], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
+            edgeLabel: {
+              // position: 'middle', // 边上的文字样式
+              // normal: {
+              //   show: true,
+              //   textStyle: {
+              //     fontSize: 12
+              //   },
+              //   position: 'middle',
+              //   formatter: function(x) {
+              //     return x.data.name
+              //   }
+              // }
+            },
+            itemStyle: {
+              normal: {
+                // color: '#00FAE1',
+                cursor: 'pointer',
+                // color:Math.floor(Math.random()*16777215).toString(16),
+                label: {
+                  show: true,
+                  // position: [-10, -15],
+                  textStyle: {
+                    // 标签的字体样式
+                    color: '#000', // 字体颜色
+                    fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
+                    fontWeight: 'bold',
+                    fontFamily: 'sans-serif', // 文字的字体系列
+                    fontSize: 14 // 字体大小
+                  }
+                },
+                nodeStyle: {
+                  brushType: 'both',
+                  borderColor: 'rgba(255,215,0,0.4)',
+                  borderWidth: 1
+                }
+              }
+              // 鼠标放上去有阴影效果
+              // emphasis: {
+              //   shadowColor: '#00FAE1',
+              //   shadowOffsetX: 0,
+              //   shadowOffsetY: 0,
+              //   shadowBlur: 40
+              // }
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{b}',
+              textStyle: {
+                fontSize: 20,
+                fontWeight: 600,
+                color: '#000'
+              }
+            },
+            lineStyle: {
+              width: 2,
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(0, 255, 244, 0.01)' // 0% 处的颜色
+                }, {
+                  offset: 1, color: 'rgba(0, 255, 244, 1)' // 100% 处的颜色
+                }],
+                global: false
+              },
+              curveness: 0.2// 弧度
+            },
+            force: { // 力引导图基本配置
+              layoutAnimation: true,
+              xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项
+              yAxisIndex: 0, // y轴坐标
+              gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
+              edgeLength: 100, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
+              repulsion: 500 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
+            }
+          }
+        ]
+      }
+
+      // 使用配置项显示图表
+      chart.setOption(option)
+
+      // 监听窗口大小变化，自适应调整图表
+      window.addEventListener('resize', () => {
+        chart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 可以在这里添加样式 */
+</style>
diff --git a/src/views/components/echarts/graph6.vue b/src/views/components/echarts/graph6.vue
new file mode 100644
index 0000000..9d9d250
--- /dev/null
+++ b/src/views/components/echarts/graph6.vue
@@ -0,0 +1,219 @@
+<template>
+  <div id="knowledge-graph" style="width: 100%; height: calc(100vh - 184px);" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'KnowledgeGraph',
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    // https://relation-graph.com/#/docs/start
+    initChart() {
+      // 初始化 echarts 实例
+      const chart = echarts.init(document.getElementById('knowledge-graph'))
+
+      // 定义知识图谱数据，并为每个节点设置颜色
+      // const data = [
+      //   { name: '文书档案', itemStyle: { color: '#cc6633' }},
+      //   { name: '档案分类', itemStyle: { color: '#66cc33' }},
+      //   { name: '行政管理', itemStyle: { color: '#66cc33' }},
+      //   { name: '党群工作', itemStyle: { color: '#66cc33' }},
+      //   { name: '经营管理', itemStyle: { color: '#66cc33' }},
+      //   { name: '生成管理', itemStyle: { color: '#66cc33' }},
+      //   { name: '保管期限', itemStyle: { color: '#cc3399' }},
+      //   { name: '永久', itemStyle: { color: '#cc3399' }},
+      //   { name: '定期30年', itemStyle: { color: '#cc3399' }},
+      //   { name: '定期10年', itemStyle: { color: '#cc3399' }},
+      //   { name: '年度', itemStyle: { color: '#6699cc' }},
+      //   { name: '2022', itemStyle: { color: '#6699cc' }},
+      //   { name: '2023', itemStyle: { color: '#6699cc' }},
+      //   { name: '2024', itemStyle: { color: '#6699cc' }},
+      //   { name: '密级', itemStyle: { color: '#cc9966' }},
+      //   { name: '公开', itemStyle: { color: '#cc9966' }},
+      //   { name: '限制', itemStyle: { color: '#cc9966' }},
+      //   { name: '秘密', itemStyle: { color: '#cc9966' }},
+      //   { name: '机密', itemStyle: { color: '#cc9966' }},
+      //   { name: '绝密', itemStyle: { color: '#cc9966' }}
+      // ]
+
+      const data = [
+        { name: '文书档案' },
+        { name: '档案分类' },
+        { name: '行政管理' },
+        { name: '党群工作' },
+        { name: '经营管理' },
+        { name: '生成管理' },
+        { name: '保管期限' },
+        { name: '永久' },
+        { name: '定期30年' },
+        { name: '定期10年' },
+        { name: '年度' },
+        { name: '2022' },
+        { name: '2023' },
+        { name: '2024' },
+        { name: '密级' },
+        { name: '公开' },
+        { name: '限制' },
+        { name: '秘密' },
+        { name: '机密' },
+        { name: '绝密' }
+      ]
+
+      const links = [
+        { source: '文书档案', target: '档案分类' },
+        { source: '文书档案', target: '年度' },
+        { source: '文书档案', target: '保管期限' },
+        { source: '文书档案', target: '密级' },
+        { source: '保管期限', target: '永久' },
+        { source: '保管期限', target: '定期30年' },
+        { source: '保管期限', target: '定期10年' },
+        { source: '年度', target: '2022' },
+        { source: '年度', target: '2023' },
+        { source: '年度', target: '2024' },
+        { source: '密级', target: '公开' },
+        { source: '密级', target: '限制' },
+        { source: '密级', target: '秘密' },
+        { source: '密级', target: '机密' },
+        { source: '密级', target: '绝密' },
+        { source: '档案分类', target: '行政管理' },
+        { source: '档案分类', target: '党群工作' },
+        { source: '档案分类', target: '经营管理' },
+        { source: '档案分类', target: '生成管理' }
+      ]
+
+      // 配置项
+      const option = {
+        tooltip: {},
+        series: [
+          {
+            type: 'graph',
+            layout: 'force',
+            data: data,
+            links: links,
+            cursor: 'pointer',
+            // color: {
+            //   type: 'linear',
+            //   x: 0,
+            //   y: 0,
+            //   x2: 1,
+            //   y2: 1,
+            //   colorStops: [{
+            //     offset: 0,
+            //     color: 'rgba(255, 149, 0, 0.1)' // 0% 处的颜色
+            //   }, {
+            //     offset: 1,
+            //     color: 'rgba(255, 149, 0, 1)' // 100% 处的颜色
+            //   }],
+            //   global: false // 缺省为 false
+            // },
+            legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
+            hoverAnimation: true, // 是否开启鼠标悬停节点的显示动画
+            focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
+            draggable: true, // 指示节点是否可以拖动
+            symbolSize: 60, // 调整节点的大小
+            roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
+            edgeSymbol: ['', 'arrow'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
+            edgeSymbolSize: [2, 6], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
+            edgeLabel: {
+              // position: 'middle', // 边上的文字样式
+              // normal: {
+              //   show: true,
+              //   textStyle: {
+              //     fontSize: 12
+              //   },
+              //   position: 'middle',
+              //   formatter: function(x) {
+              //     return x.data.name
+              //   }
+              // }
+            },
+            itemStyle: {
+              normal: {
+                // color: '#00FAE1',
+                cursor: 'pointer',
+                // color:Math.floor(Math.random()*16777215).toString(16),
+                label: {
+                  show: true,
+                  // position: [-10, -15],
+                  textStyle: {
+                    // 标签的字体样式
+                    color: '#000', // 字体颜色
+                    fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
+                    fontWeight: 'bold',
+                    fontFamily: 'sans-serif', // 文字的字体系列
+                    fontSize: 14 // 字体大小
+                  }
+                },
+                nodeStyle: {
+                  brushType: 'both',
+                  borderColor: 'rgba(255,215,0,0.4)',
+                  borderWidth: 1
+                }
+              }
+              // 鼠标放上去有阴影效果
+              // emphasis: {
+              //   shadowColor: '#00FAE1',
+              //   shadowOffsetX: 0,
+              //   shadowOffsetY: 0,
+              //   shadowBlur: 40
+              // }
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{b}',
+              textStyle: {
+                fontSize: 20,
+                fontWeight: 600,
+                color: '#000'
+              }
+            },
+            lineStyle: {
+              width: 2,
+              color: '#999'
+              // color: {
+              //   type: 'linear',
+              //   x: 0,
+              //   y: 0,
+              //   x2: 1,
+              //   y2: 1,
+              //   colorStops: [{
+              //     offset: 0, color: 'rgba(0, 255, 244, 0.01)' // 0% 处的颜色
+              //   }, {
+              //     offset: 1, color: 'rgba(0, 255, 244, 1)' // 100% 处的颜色
+              //   }],
+              //   global: false
+              // }
+              // curveness: 0.2// 弧度
+            },
+            force: { // 力引导图基本配置
+              layoutAnimation: true,
+              xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项
+              yAxisIndex: 0, // y轴坐标
+              gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
+              edgeLength: 100, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
+              repulsion: 500 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
+            }
+          }
+        ]
+      }
+
+      // 使用配置项显示图表
+      chart.setOption(option)
+
+      // 监听窗口大小变化，自适应调整图表
+      window.addEventListener('resize', () => {
+        chart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 可以在这里添加样式 */
+</style>
diff --git a/src/views/system/archivesCategory/index.vue b/src/views/system/archivesCategory/index.vue
index a6be251..fb2279f 100644
--- a/src/views/system/archivesCategory/index.vue
+++ b/src/views/system/archivesCategory/index.vue
@@ -260,6 +260,12 @@ export default {
     },
     // 新增 - 判断当前节点类型，卷内/文件不可新建
     [CRUD.HOOK.beforeToAdd](crud, form, btn) {
+      if (this.selectedCategory.isType === 1) {
+        Vue.set(this.selectedCategory, 'parentName', this.selectedCategory.cnName)
+      } else {
+        Vue.set(this.selectedCategory, 'parentName', this.$refs.tree.getNode(this.selectedCategory.pid).data.cnName)
+      }
+
       const isCanAddKey = JSON.parse(localStorage.getItem('currentCategoryKey'))
       if (isCanAddKey.isType === 4 || isCanAddKey.isType === 5) {
         this.$message({ message: '此门类下不可新建门类', type: 'error', offset: 8 })
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index dd6ebee..7fb1397 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -238,6 +238,7 @@ export default {
     [CRUD.HOOK.afterRefresh]() {
       this.$refs.menu.setCheckedKeys([])
       this.$refs.fonds.setCheckedKeys([])
+      console.log('this.crud.data-afterRefresh', this.crud.data)
     },
     // 新增前初始化部门信息
     [CRUD.HOOK.beforeToAdd](crud, form) {
@@ -394,15 +395,32 @@ export default {
       }
     },
     // 改变数据
+    // update() {
+    //   // 无刷新更新 表格数据
+    //   console.log('this.currentId', this.currentId)
+    //   console.log('this.crud.data-update-before', this.crud.data)
+    //   crudRoles.get(this.currentId).then(res => {
+    //     console.log('res', res)
+    //     console.log('this.crud.data-update', this.crud.data)
+
+    //     for (let i = 0; i < this.crud.data.length; i++) {
+    //       if (res.menus[i].id === this.crud.data[i].menus.id) {
+    //         this.crud.data[i] = res
+    //         break
+    //       }
+    //       if (res.fonds.id === this.crud.data[i].fonds.id) {
+    //         this.crud.data[i] = res
+    //         break
+    //       }
+    //       console.log('2a', this.crud.data)
+    //     }
+    //   })
+    // }
     update() {
       // 无刷新更新 表格数据
       crudRoles.get(this.currentId).then(res => {
         for (let i = 0; i < this.crud.data.length; i++) {
-          if (res.menus[i].id === this.crud.data[i].menus.id) {
-            this.crud.data[i] = res
-            break
-          }
-          if (res.fonds.id === this.crud.data[i].fonds.id) {
+          if (res.id === this.crud.data[i].id) {
             this.crud.data[i] = res
             break
           }