修改选择系统id

src/components/d3.vue

@@ -89,17 +89,6 @@ export default {
     }
     function init() {
       if (!container.value) return
-      // if (instance) {
-      //   instance.graph.selectAll('*').remove()
-      // }
-      // instance = new RelationGraph(
-      //   container.value,
-      //   props.data,
-      //   props.config,
-      //   menuData,
-      //   colorList,
-      //   setCurNode
-      // )
       if (instance) {
         instance.update(props.data)
       } else {
@@ -114,9 +103,11 @@ export default {
       }
       setLegend()
     }
+
     function setKey(key) {
       instance.setKey(key)
     }
+
     watch(
       () => props.data,
       () => init(),

src/components/footer.vue

@@ -110,5 +110,5 @@ export default defineComponent({
   box-shadow 10px 6px 10px 0 #000
   margin-top 4px
 .search-bar
-  width 50%
+  width 46%
 </style>

src/components/main.vue

@@ -7,17 +7,17 @@
       class="graph"
       :data="graphData"
       @branch="fetchSubordinates"
-      @add="handleAdd"
+      @add="openAddDrawer"
       @curNode="curNode = $event"
-      @del="handleDelete"
+      @del="deleteNode"
     />
     <Side style="grid-area: side" />
     <Footer
       style="grid-area: footer"
       :node="curNode"
       @add="showSubjectDrawer = true"
-      @set="setKey"
-      @search="handleSearch"
+      @set="setLabelKey"
+      @search="searchSubject"
     />
   </div>
   <n-drawer v-model:show="showDrawer" :width="400" placement="left">
@@ -45,7 +45,7 @@
           />
         </n-form-item>
         <n-space justify="end">
-          <n-button :loading="isLoading" type="primary" @click="submit">
+          <n-button :loading="isLoading" type="primary" @click="submitNewNode">
             提交
           </n-button>
         </n-space>
@@ -102,6 +102,7 @@ export default {
     const systemOptions = ref([])
     const graphData = ref({ nodes: [], links: [] })
     const subjectNodes = ref([])
+
     function fetchSubjects() {
       ajax
         .get({
@@ -117,6 +118,8 @@ export default {
         })
     }
     fetchSubjects()
+
+    function getSelectOptions() {
       ajax
         .get({
           url: api.GET_RELATIONS,
@@ -136,9 +139,12 @@ export default {
           if (!res.data || !res.data.content) return
           systemOptions.value = res.data.content.map((item) => ({
             label: item.systemName,
-          value: item.id + '',
+            value: item.nodeId + '',
           }))
         })
+    }
+    getSelectOptions()
+
     function fetchSubordinates(params = null) {
       ajax
         .get({
@@ -168,7 +174,8 @@ export default {
           }
         })
     }
-    function handleAdd({ nodeId }) {
+
+    function openAddDrawer({ nodeId }) {
       formData.value = {
         propertyName: null,
         relationId: null,
@@ -177,10 +184,12 @@ export default {
       subjectId.value = nodeId
       showDrawer.value = true
     }
-    function setKey(key) {
+
+    function setLabelKey(key) {
       d3Ref.value.setKey(key)
     }
-    function submit(e) {
+
+    function submitNewNode(e) {
       e.preventDefault()
       formRef.value.validate((errors) => {
         if (!errors) {
@@ -205,8 +214,10 @@ export default {
         }
       })
     }
+
     const curNode = ref(null)
-    function handleDelete(data) {
+
+    function deleteNode(data) {
       dialog.error({
         title: '删除节点',
         content: `确定是否删除 '${
@@ -262,7 +273,8 @@ export default {
         }
       })
     }
-    const handleSearch = (key) => {
+
+    const searchSubject = (key) => {
       if (!key) {
         fetchSubjects()
         return
@@ -280,16 +292,16 @@ export default {
       formRef,
       formData,
       showDrawer,
-      submit,
+      submitNewNode,
       isLoading,
       relationOptions,
       systemOptions,
       graphData,
       mockData,
       fetchSubordinates,
-      handleAdd,
+      openAddDrawer,
       d3Ref,
-      setKey,
+      setLabelKey,
       rules: {
         subjectName: [
           {
@@ -321,12 +333,12 @@ export default {
         ],
       },
       curNode,
-      handleDelete,
+      deleteNode,
       showSubjectDrawer,
       subjectFormRef,
       subjectData,
       addSubject,
-      handleSearch,
+      searchSubject,
     }
   },
 }

src/util/useD3.js

 import * as d3 from 'd3'
 import RadialMenu from './menu'
-// import branch from '@/assets/images/branch.svg'
-// import more from '@/assets/images/more.svg'
-// import add from '@/assets/images/add.svg'
-// import del from '@/assets/images/delete.svg'
 
 // 求两点间的距离
 function getDis(s, t) {
@@ -96,12 +92,6 @@ const defaultConfig = {
   },
 }
 
-// const menuData = [
-//   { icon: branch, action: () => console.log('branch'), title: '分支' },
-//   { icon: more, action: () => console.log('more'), title: '更多' },
-//   { icon: add, action: () => console.log('add'), title: '新增' },
-//   { icon: del, action: () => console.log('del'), title: '删除' },
-// ]
 let menu = null
 
 export default class RelationGraph {