3368 网络图增加子节点

.env.development

@@ -1,19 +1,20 @@
-# just a flag
-ENV='development'
-
-# base api
-#VUE_APP_BASE_API=''
-#VUE_APP_BASE_DO_API='http://local.ng.frontend.api.com'
-#VUE_APP_CDN_API='http://16.163.228.151:8041'
-#VUE_APP_BASE_WEBSITE='http://local.ng.frontend.ele.com'
-#VUE_APP_BASE_PAY_STACK_PUBLIC_KEY='pk_test_2eed10135c4a958c5073795b22854ded9d1a6c55'
-#VUE_APP_ACCESS_TOKEN_PREFIX='Bearer '
-
-
-
-#VUE_APP_BASE_API=''
-#VUE_APP_BASE_DO_API='http://16.163.228.151:8043'
-#VUE_APP_CDN_API='http://16.163.228.151:8041'
-#VUE_APP_BASE_WEBSITE='http://16.163.228.151:8045'
-#VUE_APP_BASE_PAY_STACK_PUBLIC_KEY='pk_test_2eed10135c4a958c5073795b22854ded9d1a6c55'
-#VUE_APP_ACCESS_TOKEN_PREFIX='Bearer '
+# just a flag
+ENV='development'
+
+# base api
+#VUE_APP_BASE_API=''
+#VUE_APP_BASE_DO_API='http://local.ng.frontend.api.com'
+#VUE_APP_CDN_API='http://16.163.228.151:8041'
+#VUE_APP_BASE_WEBSITE='http://local.ng.frontend.ele.com'
+#VUE_APP_BASE_PAY_STACK_PUBLIC_KEY='pk_test_2eed10135c4a958c5073795b22854ded9d1a6c55'
+#VUE_APP_ACCESS_TOKEN_PREFIX='Bearer '
+
+
+
+# base api
+VUE_APP_BASE_API=''
+VUE_APP_BASE_DO_API='http://16.163.228.151:8043'
+VUE_APP_CDN_API='http://16.163.228.151:8041'
+VUE_APP_BASE_WEBSITE='http://16.163.228.151:8045'
+VUE_APP_BASE_PAY_STACK_PUBLIC_KEY='pk_test_2eed10135c4a958c5073795b22854ded9d1a6c55'
+VUE_APP_ACCESS_TOKEN_PREFIX='Bearer '

src/components/TreeChart/index.vue

@@ -20,14 +20,29 @@ export default {
       }
     },
     topDeep: Number,
-    type: String
+    type: String,
+    clickNodeList: Array
+  },
+  watch: {
+    clickNodeList:{
+      handler(newValue, old){
+        console.log(newValue,old)
+        this.init()
+      }
+    }
   },
   mounted() {
     this.init()
     // 监听树图节点的点击事件
     myChart.on('click', (e) => {
-      // console.log('e:', e)
+      console.log('e:', e)
       this.$emit('clickNode', e)
+      if(e.type == 'click' && e.data.children == null){
+        setTimeout(() => {
+          // console.log(this.clickNodeList)
+          // e.data.children = this.clickNodeList
+        }, 1000)
+      }
     })
   },
   methods: {
@@ -45,7 +60,7 @@ export default {
           padding: [5, 10],
           formatter: function(params) {
             // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
-            console.log('params:', params)
+            // console.log('params:', params)
             return "<div style='display: flex;flex-direction: column;'>" +
               '<span>' +
               (that.type == 'placement' ? (params.data.TOP_NETWORK_DEEP - that.topDeep) : '') +
@@ -129,8 +144,16 @@ export default {
             },
             initialTreeDepth: -1, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
             // symbol: 'emptyCircle', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
+            symbol: function(value, params) {
+                  // params.data节点的所有数据
+                if (params.data.leaf == true) {
+                    return 'emptyCircle'
+                  } else if (params.data.leaf == false) {
+                    return 'circle'
+                }
+            },
             // symbolRotate: 270, // 配合arrow图形使用效果较好
-            symbolSize: 16, // 大于0时是圆圈，等于0时不展示，标记的大小
+            symbolSize: 10, // 大于0时是圆圈，等于0时不展示，标记的大小
             itemStyle: {
               // 树图中每个节点的样式
               color: '#1890FF', // 节点未展开时的填充色
@@ -145,7 +168,7 @@ export default {
             label: {
               // 每个节点对应的文本标签样式
               show: true, // 是否显示标签
-              distance: 5, // 文本距离图形元素的距离
+              distance: 15, // 文本距离图形元素的距离
               position: 'bottom', // 标签位置
               verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
               align: 'center', // 文字水平对齐方式，默认自动，left，right，center
@@ -165,7 +188,7 @@ export default {
               ellipsis: '...',
               formatter: function(params) {
                 // return params.data.USER_NAME + '\n' + '\n' + params.data.REAL_NAME
-                return params.data.REAL_NAME + ' (' +  params.data.USER_NAME + ') '
+                return params.data.REAL_NAME
               }
             },
             lineStyle: {
@@ -219,9 +242,9 @@ export default {
                 // 叶子节点的文本标签样式
                 distance: 8,
                 // color: '#1890FF',
-                position: 'right',
+                position: 'bottom',
                 verticalAlign: 'middle',
-                align: 'left'
+                align: 'center'
               },
               itemStyle: {}, // 叶子节点的样式
               emphasis: {}, // 叶子节点高亮状态的配置

src/views/atlas/placement-network-ex.vue

@@ -34,7 +34,7 @@
       >{{ $t("common.confirm") }}</el-button>
     </div>
     <div v-if="treeChartShow" class="tree-chart">
-      <tree-chart :tree-data="treeData" :top-deep="topDeep" type="placement" @clickNode="getNodeData" />
+      <tree-chart :tree-data="treeData" :top-deep="topDeep" type="placement" @clickNode="getNodeData" :clickNodeList="clickNodeList" />
     </div>
   </div>
 </template>
@@ -69,7 +69,9 @@ export default {
         pageSize: 20
       },
       listTopDeep: 0,
-      loading: false
+      loading: false,
+      clickNodeList:[],
+      clickNodeUserId:null
     }
   },
   created() {
@@ -78,10 +80,16 @@ export default {
   mounted() {},
   methods: {
     getNodeData(e) {
-      console.log(e)
-      if (e.collapsed === false) {
+      // console.log(e)
+      if (e.collapsed === false && e.data.children == null) {
         console.log(e.name + '---节点展开')
       }
+      if (e.data.children == null) {
+        this.clickNodeUserId = e.data.USER_ID
+        this.getChildData(e.data, 'clickNode')
+
+      }
+      
     },
     getList() {
       this.treeData = {
@@ -115,29 +123,39 @@ export default {
         this.getChildData(treeData)
       })
     },
-    getChildData(data, node) {
+    getChildData(data, type) {
       const that = this
       const userId = data.USER_ID
-      if (that.leaf) {
+      if (data.leaf) {
         return ''
       }
-      if (that.isExpanded) {
+      if (data.isExpanded) {
         return ''
       }
       if (data.children !== null && data.children.length > 0) {
         return ''
       }
-      this.loading = true
+      data.loading = true
       fetchPlacementNetwork({
         id: userId,
         deep: this.expandDeep,
         periodNum: this.periodNum
       }).then((response) => {
-        this.listPeriodNum = response.data.periodNum
+        data.listPeriodNum = response.data.periodNum
         data.isExpanded = true
         const resAllData = response.data.allData
 
-        that.treeData.children = that.traversalTree(resAllData, that)
+        if (type === 'clickNode') {
+          console.log('clickNode',data.USER_ID)
+          this.clickNodeList = resAllData
+          that.treeData.children = that.treeAddNode(that.treeData.children)
+          this.$nextTick(() => {
+            that.treeData.children = that.treeAddNode(that.treeData.children)
+          });
+        }else {
+          that.treeData.children = that.traversalTree(resAllData, that)
+
+        }
 
         that.treeChartShow = true
         this.loading = false
@@ -153,6 +171,18 @@ export default {
       })
       return tree
     },
+    treeAddNode(tree) {
+      const that = this
+      tree.forEach((item) => {
+        if(item.USER_ID == that.clickNodeUserId){
+          item.children = this.clickNodeList
+        }
+        if (item.children && item.children.length > 0) {
+          that.treeAddNode(item.children)
+        }
+      })
+      return tree
+    },
     getListData(page, pageSize) {
       this.filterForm.page = page
       this.filterForm.pageSize = pageSize

src/views/atlas/sponsor-network-ex.vue

@@ -116,32 +116,34 @@ export default {
         this.getChildData(treeData)
       })
     },
-    getChildData(data, node) {
+    getChildData(data, type) {
       const that = this
       const userId = data.USER_ID
-      if (that.leaf) {
+      if (type === 'clickNode') {
+        console.log(data)
+      }
+      if (data.leaf) {
         return ''
       }
-      if (that.isExpanded) {
+      if (data.isExpanded) {
         return ''
       }
       if (data.children !== null && data.children.length > 0) {
         return ''
       }
-      this.loading = true
+      that.loading = true
       fetchSponsorNetwork({
         id: userId,
         deep: this.expandDeep,
         periodNum: this.periodNum
       }).then((response) => {
-        this.listPeriodNum = response.data.periodNum
-        data.isExpanded = true
+        that.listPeriodNum = response.data.periodNum
         const resAllData = response.data.allData
 
         that.treeData.children = that.traversalTree(resAllData, that)
 
         that.treeChartShow = true
-        this.loading = false
+        that.loading = false
       })
     },
     traversalTree(tree) {