搜索系统改为下拉&点击后直接显示下级&去掉不需要元素

src/components/d3.vue

@@ -19,7 +19,7 @@
           {{ `${n.name}（${n.val}）` }}
         </n-tag>
       </n-space>
-      <n-space>
+      <!-- <n-space>
         <n-tag
           v-for="n in linkList"
           :key="n.name"
@@ -28,7 +28,7 @@
         >
           {{ `${n.name}（${n.val}）` }}
         </n-tag>
-      </n-space>
+      </n-space> -->
     </div>
   </div>
 </template>
@@ -70,12 +70,12 @@ export default {
     let instance = null
     const container = ref(null)
     const menuData = [
-      {
-        key: 'branch',
-        icon: branch,
-        action: (d) => ctx.emit('branch', d),
-        title: '分支',
-      },
+      // {
+      //   key: 'branch',
+      //   icon: branch,
+      //   action: (d) => ctx.emit('branch', d),
+      //   title: '分支',
+      // },
       {
         key: 'link',
         icon: link,
@@ -108,6 +108,9 @@ export default {
         ctx.emit('del-link', d)
       }
     }
+    const showBranch = (d) => {
+      ctx.emit('branch', d)
+    }
     function init() {
       if (!container.value) return
 
@@ -141,7 +144,8 @@ export default {
           menuData,
           colorList,
           setCurNode,
-          handleLinkClick
+          handleLinkClick,
+          showBranch
         )
       }
       setLegend(data)
@@ -153,7 +157,11 @@ export default {
 
     watch(
       () => props.data,
-      () => init(),
+      (cur, past) => {
+        if (JSON.stringify(cur) !== JSON.stringify(past)) {
+          init()
+        }
+      },
       { immediate: true }
     )
 

src/components/footer.vue

@@ -31,7 +31,16 @@
         placeholder="请选择节点类型"
         :options="nodeOptions"
       />
+      <n-select
+        v-if="searchType === 'System'"
+        v-model:value="searchKey"
+        placeholder="请选择"
+        :options="systemOptions"
+        :on-clear="clear"
+        clearable
+      />
       <n-input
+        v-else
         v-model:value="searchKey"
         placeholder="请输入关键词..."
         clearable
@@ -40,7 +49,7 @@
       />
       <n-button type="primary" ghost @click="search">搜索</n-button>
     </n-input-group>
-    <n-space v-if="!isNarrow">
+    <!-- <n-space v-if="!isNarrow">
       <n-tag v-show="nodeVal" size="small" round :color="color">
         {{ switchName(nodeVal && nodeVal._label_key) }}
       </n-tag>
@@ -54,12 +63,12 @@
       >
         {{ name }}
       </n-button>
-    </n-space>
+    </n-space> -->
   </div>
 </template>
 
 <script>
-import { defineComponent, ref, computed } from 'vue'
+import { defineComponent, ref, computed, watch } from 'vue'
 
 export default defineComponent({
   name: 'Footer',
@@ -74,6 +83,10 @@ export default defineComponent({
       type: Object,
       default: () => {},
     },
+    options: {
+      type: Array,
+      default: () => [],
+    },
   },
   emits: ['set', 'add', 'search'],
   setup(props, ctx) {
@@ -191,6 +204,12 @@ export default defineComponent({
     const isNarrow = computed(() => {
       return window.innerHeight / window.innerWidth > 0.75
     })
+    const systemOptions = computed(() => props.options)
+
+    watch(
+      () => searchType.value,
+      () => (searchKey.value = null)
+    )
     return {
       curKey,
       setKey,
@@ -205,6 +224,7 @@ export default defineComponent({
       nodeOptions,
       switchName,
       isNarrow,
+      systemOptions,
     }
   },
 })
@@ -221,6 +241,7 @@ export default defineComponent({
   margin-top 4px
   flex-wrap wrap
 .search-bar
-  flex 1
+  // flex 1
   margin 0 2%
+  max-width 40%
 </style>

src/components/main.vue

@@ -16,6 +16,7 @@
       style="grid-area: footer"
       :node="curNode"
       :data="graphData"
+      :options="systemOptions"
       @add="openSubjectDrawer"
       @set="setLabelKey"
       @search="searchNodes"
@@ -420,10 +421,14 @@ const searchNodes = (type, key) => {
     fetchSubjects()
     return
   }
+  let params = { type, nodeName: key }
+  if (type === 'System') {
+    params = { type, nodeId: key }
+  }
   ajax
     .get({
       url: api.GET_NODES,
-      params: { type, nodeName: key },
+      params,
     })
     .then((res) => {
       graphData.value = res.data.content

src/util/useD3.js

@@ -133,11 +133,13 @@ export default class RelationGraph {
     menuData,
     colorList,
     setCurNode,
-    handleLinkClick
+    handleLinkClick,
+    showBranch
   ) {
     this.menuData = menuData
     this.setCurNode = setCurNode
     this.handleLinkClick = handleLinkClick
+    this.showBranch = showBranch
 
     const mapW = selector.offsetWidth
     const mapH = selector.offsetHeight
@@ -489,6 +491,7 @@ export default class RelationGraph {
         d
       )
     }
+    this.showBranch(d)
     if (this.curHighlightKey) {
       this.setHighlights(this.curHighlightKey)
     }
@@ -650,7 +653,7 @@ export default class RelationGraph {
       this.SVG.selectAll('circle')
         .filter((d) => this.dependsNode.indexOf(d.index) == -1)
         .transition()
-        .style('opacity', 0.3)
+        .style('opacity', 0.2)
 
       // 隐藏线
       this.SVG.selectAll('.edge')
@@ -684,7 +687,7 @@ export default class RelationGraph {
           return d.index != sourceIndex && d.index != targetIndex
         })
         .transition()
-        .style('opacity', 0.3)
+        .style('opacity', 0.2)
 
       // 隐藏线
       this.SVG.selectAll('.edge')
@@ -733,13 +736,13 @@ export default class RelationGraph {
     this.SVG.selectAll('circle')
       .filter((d) => this.dependsNode.indexOf(d.index) < 0)
       .transition()
-      .style('opacity', 0.3)
+      .style('opacity', 0.2)
 
     // 隐藏线
     this.SVG.selectAll('.edge')
       .filter((d) => this.dependsLink.indexOf(d.index) < 0)
       .transition()
-      .style('opacity', 0.3)
+      .style('opacity', 0.2)
 
     return true
   }