汉化

src/components/d3.vue

@@ -55,6 +55,11 @@ export default {
       System: '#58b2dc',
       Property: '#ffb11b',
       Subject: '#42b983',
+      Property_property: '#f582ae',
+      Property_produce: '#f3d2c1',
+      Property_manage: '#abd1c6',
+      Property_service: '#f9bc60',
+      Property_use: '#d9d4e7',
     }
     let instance = null
     const container = ref(null)
@@ -89,19 +94,40 @@ export default {
     }
     function init() {
       if (!container.value) return
+
+      const data = {
+        links: props.data.links,
+        nodes: props.data.nodes.map((node) => {
+          let key = node.nodeLabel
+          if (key === 'Property') {
+            const relation = props.data.links.find((link) => {
+              let targetId = link.target
+              if (link.target.id) {
+                targetId = link.target.id
+              }
+              return targetId == node.id
+            })
+            if (relation) {
+              key = switchRelation(relation.name)
+            }
+          }
+          node._label_key = key
+          return node
+        }),
+      }
       if (instance) {
-        instance.update(props.data)
+        instance.update(data)
       } else {
         instance = new RelationGraph(
           container.value,
-          props.data,
+          data,
           props.config,
           menuData,
           colorList,
           setCurNode
         )
       }
-      setLegend()
+      setLegend(data)
     }
 
     function setKey(key) {
@@ -117,21 +143,60 @@ export default {
     const nodeList = ref([])
     const linkList = ref([])
 
-    function setLegend() {
-      const { nodes, links } = props.data
+    function switchName(key) {
+      switch (key) {
+        case 'Subject':
+          return '主体'
+        case 'System':
+          return '系统'
+        case 'Property_property':
+          return '属性'
+        case 'Property_produce':
+          return '生产'
+        case 'Property_manage':
+          return '管理'
+        case 'Property_service':
+          return '服务'
+        case 'Property_use':
+          return '使用'
+        default:
+          return '未知'
+      }
+    }
+    function switchRelation(name) {
+      switch (name) {
+        case '属性':
+          return 'Property_property'
+        case '生产行为':
+          return 'Property_produce'
+        case '管理行为':
+          return 'Property_manage'
+        case '服务行为':
+          return 'Property_service'
+        case '使用行为':
+          return 'Property_use'
+        default:
+          return '未知'
+      }
+    }
+
+    function setLegend(data) {
+      const { nodes, links } = data
       if (!nodes || !links) return
       const nodeKey = {}
       const linkKey = {}
 
       nodes.forEach((node) => {
-        if (nodeKey.hasOwnProperty(node.nodeLabel)) {
-          nodeKey[node.nodeLabel] += 1
+        const key = node._label_key
+        if (nodeKey.hasOwnProperty(key)) {
+          nodeKey[key] += 1
         } else {
-          nodeKey[node.nodeLabel] = 1
+          nodeKey[key] = 1
         }
       })
+
       links.forEach((link) => {
-        const key = `${link.source.nodeLabel}_${link.target.nodeLabel}`
+        const key = `${link.source._label_key}-${link.target._label_key}`
         if (linkKey.hasOwnProperty(key)) {
           linkKey[key] += 1
         } else {
@@ -141,7 +206,7 @@ export default {
       const nodeResult = []
       for (const key in nodeKey) {
         nodeResult.push({
-          name: key,
+          name: switchName(key),
           val: nodeKey[key],
           color: {
             color: colorList[key],
@@ -150,10 +215,12 @@ export default {
           },
         })
       }
+
       const linkResult = []
       for (const key in linkKey) {
+        const name = key.split('-')
         linkResult.push({
-          name: key,
+          name: `${switchName(name[0])}_${switchName(name[1])}`,
           val: linkKey[key],
         })
       }
@@ -184,8 +251,8 @@ export default {
   position relative
 .legend
   position absolute
-  top 20px
-  left 20px
+  top 10px
+  left 14px
 </style>
 
 <style lang="stylus">

src/components/footer.vue

@@ -22,18 +22,18 @@
           </svg>
         </n-icon>
       </template>
-      Add Subject
+      新增主体
     </n-button>
     <n-input-group size="small" class="search-bar">
       <n-select
         v-model:value="searchType"
         style="width: 25%"
-        placeholder="请选择"
+        placeholder="请选择节点类型"
         :options="nodeOptions"
       />
       <n-input
         v-model:value="searchKey"
-        placeholder="Search Something..."
+        placeholder="请输入关键词..."
         clearable
         :on-clear="clear"
         @keypress.enter="search"
@@ -42,7 +42,7 @@
     </n-input-group>
     <n-space>
       <n-tag v-show="nodeVal" size="small" round :color="color">
-        {{ nodeVal && nodeVal.nodeLabel }}
+        {{ switchName(nodeVal && nodeVal._label_key) }}
       </n-tag>
       <n-button
         v-for="name in list"
@@ -60,7 +60,6 @@
 
 <script>
 import { defineComponent, ref, computed } from 'vue'
-import add from '@/assets/images/add.svg'
 
 export default defineComponent({
   name: 'Footer',
@@ -71,6 +70,10 @@ export default defineComponent({
         nodeLabel: 'Subject',
       }),
     },
+    data: {
+      type: Object,
+      default: () => {},
+    },
   },
   emits: ['set', 'add', 'search'],
   setup(props, ctx) {
@@ -79,19 +82,60 @@ export default defineComponent({
       System: '#58b2dc',
       Property: '#ffb11b',
       Subject: '#42b983',
+      Property_property: '#f582ae',
+      Property_produce: '#f3d2c1',
+      Property_manage: '#abd1c6',
+      Property_service: '#f9bc60',
+      Property_use: '#d9d4e7',
     }
-    const nodeVal = computed(
-      () =>
-        props.node || {
-          nodeLabel: 'Subject',
+    function switchRelation(name) {
+      switch (name) {
+        case '属性':
+          return 'Property_property'
+        case '生产行为':
+          return 'Property_produce'
+        case '管理行为':
+          return 'Property_manage'
+        case '服务行为':
+          return 'Property_service'
+        case '使用行为':
+          return 'Property_use'
+        default:
+          return '未知'
+      }
+    }
+    const nodeVal = computed(() => {
+      if (
+        !props.node ||
+        !props.data ||
+        props.data.links.length === 0 ||
+        props.data.nodes.length === 0
+      ) {
+        return { _label_key: 'Subject' }
+      }
+      const node = { ...props.node }
+      let key = props.node.nodeLabel
+      if (key === 'Property') {
+        const relation = props.data.links.find((link) => {
+          let targetId = link.target
+          if (link.target.id) {
+            targetId = link.target.id
+          }
+          return targetId == node.id
+        })
+        if (relation) {
+          key = switchRelation(relation.name)
         }
-    )
+      }
+      node._label_key = key
+      return node
+    })
     const color = computed(() => {
       if (!nodeVal.value) return {}
       return {
-        color: colorList[nodeVal.value.nodeLabel],
+        color: colorList[nodeVal.value._label_key],
         textColor: '#fff',
-        borderColor: colorList[nodeVal.value.nodeLabel],
+        borderColor: colorList[nodeVal.value._label_key],
       }
     })
     const curKey = ref('')
@@ -119,10 +163,31 @@ export default defineComponent({
     }
 
     const nodeOptions = ref([
-      { label: 'Subject', value: 'Subject' },
-      { label: 'Property', value: 'Property' },
-      { label: 'System', value: 'System' },
+      { label: '主体', value: 'Subject' },
+      { label: '附属节点', value: 'Property' },
+      { label: '系统', value: 'System' },
     ])
+
+    function switchName(key) {
+      switch (key) {
+        case 'Subject':
+          return '主体'
+        case 'System':
+          return '系统'
+        case 'Property_property':
+          return '属性'
+        case 'Property_produce':
+          return '生产'
+        case 'Property_manage':
+          return '管理'
+        case 'Property_service':
+          return '服务'
+        case 'Property_use':
+          return '使用'
+        default:
+          return '未知'
+      }
+    }
     return {
       curKey,
       setKey,
@@ -135,7 +200,7 @@ export default defineComponent({
       search,
       clear,
       nodeOptions,
-      add,
+      switchName,
     }
   },
 })

src/components/main.vue

@@ -15,9 +15,10 @@
     <Footer
       style="grid-area: footer"
       :node="curNode"
+      :data="graphData"
       @add="showSubjectDrawer = true"
       @set="setLabelKey"
-      @search="searchSubject"
+      @search="searchNodes"
     />
   </div>
   <n-drawer v-model:show="showDrawer" :width="400" placement="left">
@@ -274,7 +275,7 @@ export default {
       })
     }
 
-    const searchSubject = (type, key) => {
+    const searchNodes = (type, key) => {
       if (!key) {
         fetchSubjects()
         return
@@ -338,7 +339,7 @@ export default {
       subjectFormRef,
       subjectData,
       addSubject,
-      searchSubject,
+      searchNodes,
     }
   },
 }

src/util/useD3.js

@@ -77,7 +77,7 @@ const defaultConfig = {
   chargeStrength: -100, // 万有引力
   collide: 80, // 碰撞力的大小 （节点之间的间距）
   alphaDecay: 0.4, // 控制力学模拟衰减率
-  r: 45, // 圈圈的半径 [30 - 45]
+  r: 34, // 圈圈的半径 [30 - 45]
   nodeColor: 'skyblue', // 圈圈节点背景颜色
   fontColor: '#2c3e50', // 圈圈内文字的颜色
   linkSrc: 30, // 划线时候的弧度
@@ -89,6 +89,11 @@ const defaultConfig = {
     System: '#58b2dc',
     Property: '#ffb11b',
     Subject: '#42b983',
+    // Property_property: '#f582ae',
+    // Property_produce: '#f3d2c1',
+    // Property_manage: '#8bd3dd',
+    // Property_service: '#ffd803',
+    // Property_use: '#004643',
   },
 }
 
@@ -97,7 +102,6 @@ let menu = null
 export default class RelationGraph {
   constructor(selector, data, configs = {}, menuData, colorList, setCurNode) {
     this.menuData = menuData
-    this.colorLIst = colorList
     this.setCurNode = setCurNode
 
     const mapW = selector.offsetWidth
@@ -115,7 +119,8 @@ export default class RelationGraph {
         width: mapW,
         height: mapH,
       },
-      configs
+      configs,
+      { colorList }
     )
 
     // 需要高亮的node和link
@@ -175,7 +180,7 @@ export default class RelationGraph {
       .attr(
         'fill',
         (d) =>
-          (d && this.config.colorList[d.nodeLabel || 'default']) ||
+          (d && this.config.colorList[d._label_key || 'default']) ||
           this.config.nodeColor
       )
 
@@ -404,7 +409,7 @@ export default class RelationGraph {
 
   openMenu(self, d, types) {
     this.setCurNode(d)
-    menu = new RadialMenu().radius(50).thickness(40).appendTo(self.parentNode)
+    menu = new RadialMenu().radius(38).thickness(30).appendTo(self.parentNode)
     if (!types) {
       menu.show(this.menuData, d)
     } else {
@@ -532,11 +537,23 @@ export default class RelationGraph {
       const objIndex = obj.index
       this.dependsNode = this.dependsNode.concat([objIndex])
       this.dependsLinkAndText = this.dependsLinkAndText.concat([objIndex])
-      this.config.links.forEach((lkItem) => {
-        if (objIndex == lkItem.source.index) {
-          this.dependsNode = this.dependsNode.concat([lkItem.target.index])
-        } else if (objIndex == lkItem.target.index) {
-          this.dependsNode = this.dependsNode.concat([lkItem.source.index])
+
+      this.config.links.forEach((link) => {
+        if (objIndex == link.source.index) {
+          this.dependsNode = this.dependsNode.concat([link.target.index])
+        } else if (objIndex == link.target.index) {
+          this.dependsNode = this.dependsNode.concat([link.source.index])
+        }
+      })
+
+      /** 二级节点也要展示 不展示可以删除 */
+      const secondNodes = this.dependsNode.filter((e) => e !== objIndex)
+      this.dependsLinkAndText.push(...secondNodes)
+      this.config.links.forEach((link) => {
+        if (secondNodes.indexOf(link.source.index) >= 0) {
+          this.dependsNode = this.dependsNode.concat([link.target.index])
+        } else if (secondNodes.indexOf(link.target.index) >= 0) {
+          this.dependsNode = this.dependsNode.concat([link.source.index])
         }
       })
 
@@ -548,12 +565,11 @@ export default class RelationGraph {
 
       // 隐藏线
       this.SVG.selectAll('.edge')
-        .filter((d) => {
-          return (
+        .filter(
+          (d) =>
             this.dependsLinkAndText.indexOf(d.source.index) == -1 &&
             this.dependsLinkAndText.indexOf(d.target.index) == -1
-          )
-        })
+        )
         .transition()
         .style('opacity', 0.1)
     } else {