3368 网络图提交到测试环境

src/components/TreeChart/index.vue

@@ -24,10 +24,19 @@ export default {
     clickNodeList: Array
   },
   watch: {
-    clickNodeList:{
-      handler(newValue, old){
-        console.log(newValue,old)
-        this.init()
+    clickNodeList: {
+      handler(newValue, old) {
+        if (newValue) {
+          this.init()
+        }
+      }
+    },
+    treeData: {
+      handler(newValue, old) {
+        console.log(newValue)
+        if (newValue) {
+          this.init()
+        }
       }
     }
   },
@@ -55,33 +64,125 @@ export default {
           formatter: function(params) {
             // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
             // console.log('params:', params)
-            return "<div style='display: flex;flex-direction: column;'>" +
-              '<span>' +
-              (that.type == 'placement' ? (params.data.TOP_NETWORK_DEEP - that.topDeep) : '') +
+            // return "<div style='display: flex;flex-direction: column;'>" +
+            //   '<span>' +
+            //   (that.type == 'placement' ? (params.data.TOP_NETWORK_DEEP - that.topDeep) : '') +
+            //   '</span>' +
+            //   '<span>' +
+            //   params.data.USER_NAME +
+            //   '</span>' +
+            //   '<span>' +
+            //   params.data.REAL_NAME +
+            //   '</span>' +
+            //   '<span>' +
+            //   that.$t('atlas.location') +
+            //   ': ' +
+            //   (params.data.RELATIVE_LOCATION || '') +
+            //   '</span>' +
+            //   '<span>' +
+            //   params.data.DEC_LV_NAME +
+            //   '</span>' +
+            //   '<span>' +
+            //   that.$t('atlas.highest') +
+            //   ': ' +
+            //   params.data.EMP_LV_NAME + '，' + params.data.CROWN_LV_NAME +
+            //   '</span>' +
+            //   '<span>' +
+            //   params.data.PERIOD_AT +
+            //   '</span>' +
+            //   '</div>'
+            const relationStr = "<div style='display: flex;flex-direction: column;'>" +
+              '<div>' +
+              '<span style="color: #606266;">' + that.$t('atlas.numberLayers') + ': ' + '</span>' + '<span style="color: #000000;">' + (Number(params.data.TOP_NETWORK_DEEP) - Number(that.topDeep)) + '</span>' +
+              '</div>' +
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.memberCode') + ': ' +
               '</span>' +
-              '<span>' +
+              '<span style="color: #000000;">' +
               params.data.USER_NAME +
               '</span>' +
-              '<span>' +
+              '</div>' +
+
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.name') + ': ' +
+              '</span>' +
+              '<span style="color: #000000;">' +
               params.data.REAL_NAME +
               '</span>' +
-              '<span>' +
-              that.$t('atlas.location') +
-              ': ' +
-              (params.data.RELATIVE_LOCATION || '') +
+              '</div>' +
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.level') + ': ' +
               '</span>' +
-              '<span>' +
+              '<span style="color: #000000;">' +
               params.data.DEC_LV_NAME +
               '</span>' +
-              '<span>' +
-              that.$t('atlas.highest') +
-              ': ' +
+              '</div>' +
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.highest') + ': ' +
+              '</span>' +
+              '<span style="color: #000000;">' +
               params.data.EMP_LV_NAME + '，' + params.data.CROWN_LV_NAME +
               '</span>' +
-              '<span>' +
+              '</div>' +
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.periodNumber') + ': ' +
+              '</span>' +
+              '<span style="color: #000000;">' +
               params.data.PERIOD_AT +
               '</span>' +
+              '</div>' +
               '</div>'
+            const networkStr = "<div style='display: flex;flex-direction: column;'>" +
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.memberCode') + ': ' +
+              '</span>' +
+              '<span style="color: #000000;">' +
+              params.data.USER_NAME +
+              '</span>' +
+              '</div>' +
+
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.name') + ': ' +
+              '</span>' +
+              '<span style="color: #000000;">' +
+              params.data.REAL_NAME +
+              '</span>' +
+              '</div>' +
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.level') + ': ' +
+              '</span>' +
+              '<span style="color: #000000;">' +
+              params.data.DEC_LV_NAME +
+              '</span>' +
+              '</div>' +
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.highest') + ': ' +
+              '</span>' +
+              '<span style="color: #000000;">' +
+              params.data.EMP_LV_NAME + '，' + params.data.CROWN_LV_NAME +
+              '</span>' +
+              '</div>' +
+
+              '<div>' +
+              '<span style="color: #606266;">' +
+              that.$t('atlas.periodNumber') + ': ' +
+              '</span>' +
+              '<span style="color: #000000;">' +
+              params.data.PERIOD_AT +
+              '</span>' +
+              '</div>' +
+              '</div>'
+
+            return that.type === 'placement' ? relationStr : networkStr
           },
           // valueFormatter: function (value) { // tooltip 中数值显示部分的格式化回调函数
           //   return '$' + value.toFixed(2)
@@ -123,7 +224,7 @@ export default {
             type: 'tree',
             data: [this.treeData],
             name: '树图',
-            top: '10%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
+            top: '5%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
             left: '5%', // 组件离容器左侧的距离
             bottom: '1%', // 组件离容器下侧的距离
             right: '2%', // 组件离容器右侧的距离
@@ -139,12 +240,12 @@ 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'
-                }
+              // params.data节点的所有数据
+              if (params.data.leaf == true) {
+                return 'emptyCircle'
+              } else if (params.data.leaf == false) {
+                return 'circle'
+              }
             },
             // symbolRotate: 270, // 配合arrow图形使用效果较好
             symbolSize: 10, // 大于0时是圆圈，等于0时不展示，标记的大小

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" :clickNodeList="clickNodeList" />
+      <tree-chart :tree-data="treeData" :top-deep="topDeep" type="placement" :click-node-list="clickNodeList" @clickNode="getNodeData" />
     </div>
   </div>
 </template>
@@ -44,7 +44,7 @@ import treeChart from '@/components/TreeChart/index.vue'
 import tool from '@/utils/tool'
 
 export default {
-  name: 'placementNetworkEx',
+  name: 'PlacementNetworkEx',
   components: {
     treeChart
   },
@@ -70,8 +70,8 @@ export default {
       },
       listTopDeep: 0,
       loading: false,
-      clickNodeList:[],
-      clickNodeUserId:null
+      clickNodeList: [],
+      clickNodeUserId: null
     }
   },
   created() {
@@ -87,9 +87,7 @@ export default {
       if (e.data.children == null) {
         this.clickNodeUserId = e.data.USER_ID
         this.getChildData(e.data, 'clickNode')
-
       }
-      
     },
     getList() {
       this.treeData = {
@@ -135,26 +133,22 @@ export default {
       if (data.children !== null && data.children.length > 0) {
         return ''
       }
-      data.loading = true
+      that.loading = true
+      that.treeChartShow = false
       fetchPlacementNetwork({
         id: userId,
         deep: this.expandDeep,
         periodNum: this.periodNum
       }).then((response) => {
-        data.listPeriodNum = response.data.periodNum
-        data.isExpanded = true
+        that.listPeriodNum = response.data.periodNum
+        that.isExpanded = true
         const resAllData = response.data.allData
 
         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 {
+        } else {
           that.treeData.children = that.traversalTree(resAllData, that)
-
         }
 
         that.treeChartShow = true
@@ -174,7 +168,7 @@ export default {
     treeAddNode(tree) {
       const that = this
       tree.forEach((item) => {
-        if(item.USER_ID == that.clickNodeUserId){
+        if (item.USER_ID == that.clickNodeUserId) {
           item.children = this.clickNodeList
         }
         if (item.children && item.children.length > 0) {

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

@@ -83,6 +83,10 @@ export default {
       if (e.collapsed === false) {
         console.log(e.name + '---节点展开')
       }
+      if (e.data.children == null) {
+        this.clickNodeUserId = e.data.USER_ID
+        this.getChildData(e.data, 'clickNode')
+      }
     },
     getList() {
       this.treeData = {
@@ -119,9 +123,6 @@ export default {
     getChildData(data, type) {
       const that = this
       const userId = data.USER_ID
-      if (type === 'clickNode') {
-        console.log(data)
-      }
       if (data.leaf) {
         return ''
       }
@@ -132,6 +133,7 @@ export default {
         return ''
       }
       that.loading = true
+      that.treeChartShow = false
       fetchSponsorNetwork({
         id: userId,
         deep: this.expandDeep,
@@ -139,8 +141,12 @@ export default {
       }).then((response) => {
         that.listPeriodNum = response.data.periodNum
         const resAllData = response.data.allData
-
-        that.treeData.children = that.traversalTree(resAllData, that)
+        if (type === 'clickNode') {
+          this.clickNodeList = resAllData
+          that.treeData.children = that.treeAddNode(that.treeData.children)
+        } else {
+          that.treeData.children = that.traversalTree(resAllData, that)
+        }
 
         that.treeChartShow = true
         that.loading = false
@@ -156,6 +162,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