3368 ng网络图

src/components/TreeChart/index.vue

@@ -1,201 +1,216 @@
 <template>
-  <div class="echarts-container"></div>
+  <div class="echarts-container" />
 </template>
 <script>
-import { TreeChart } from "echarts/charts";
-import { TooltipComponent } from "echarts/components";
-import * as echarts from "echarts/core";
-import { CanvasRenderer } from "echarts/renderers";
-echarts.use([TooltipComponent, TreeChart, CanvasRenderer]);
-let myChart;
-let option;
+import { TreeChart } from 'echarts/charts'
+import { TooltipComponent } from 'echarts/components'
+import * as echarts from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
+let myChart
+let option
 export default {
-  name: "TreeChart",
+  name: 'TreeChart',
   props: {
     treeData: {
       type: Object,
       default: () => {
-        return {};
-      },
+        return {}
+      }
     },
+    topDeep: Number,
+    type: String
   },
   mounted() {
-    this.init();
+    this.init()
     // 监听树图节点的点击事件
-    myChart.on("click", (e) => {
+    myChart.on('click', (e) => {
       // console.log('e:', e)
-      this.$emit("clickNode", e);
-    });
+      this.$emit('clickNode', e)
+    })
   },
   methods: {
     init() {
-      let that = this;
+      const that = this
       // console.log('$el:', this.$el)
-      myChart = echarts.init(this.$el);
+      myChart = echarts.init(this.$el)
       option = {
         tooltip: {
           // 提示框浮层设置
-          trigger: "item",
-          triggerOn: "mousemove", // 提示框触发条件
+          trigger: 'item',
+          triggerOn: 'mousemove', // 提示框触发条件
           enterable: true, // 鼠标是否可进入提示框浮层中，默认false
           confine: true, // 是否将tooltip框限制在图表的区域内
-          formatter: function (params) {
+          padding: [5, 10],
+          formatter: function(params) {
             // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
-            console.log("params:", params);
-            let str = params.data.REAL_NAME + "<br/>";
-            str +=
-              "<span>" +
-              that.$t("atlas.location") +
-              ": " +
-              params.data.TOP_NETWORK_DEEP +
-              "</span>" +
-              "<br/>" +
-              "<span>" +
+            console.log('params:', params)
+            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>" + 
-              "<br/>" +
-              "<span>" +
-                that.$t("atlas.highest") +
-              ": " +
-              params.data.EMP_LV_NAME + ',' + params.data.CROWN_LV_NAME
-              "</span>" + 
-              "<br/>" +
-              "<span>" +
-              String(params.data.PERIOD_AT) +
-              "</span>"
-              
-              
-            return str;
+              '</span>' +
+              '<span>' +
+              that.$t('atlas.highest') +
+              ': ' +
+              params.data.EMP_LV_NAME + params.data.CROWN_LV_NAME +
+              '</span>' +
+              '<span>' +
+              params.data.PERIOD_AT +
+              '</span>' +
+              '</div>'
           },
           // valueFormatter: function (value) { // tooltip 中数值显示部分的格式化回调函数
           //   return '$' + value.toFixed(2)
           // },
-          backgroundColor: "#FFF", // 提示框浮层的背景颜色
-          borderColor: "#1890FF", // 提示框浮层的边框颜色
+          backgroundColor: 'rgba(250,250,250,0.99)', // 提示框浮层的背景颜色
+          borderColor: '#1890FF', // 提示框浮层的边框颜色
           borderWidth: 1, // 提示框浮层的边框宽
           borderRadius: 8, // 提示框浮层圆角
-          padding: [6, 8], // 提示框浮层的内边距
           textStyle: {
             // 提示框浮层的文本样式
-            color: "#333", // 文字颜色
+            color: '#333', // 文字颜色
             fontWeight: 400, // 字体粗细
             fontSize: 14, // 字体大小
             lineHeight: 20, // 行高
             width: 60, // 文本显示宽度
             // 文字超出宽度是否截断或者换行；只有配置width时有效
-            overflow: "breakAll", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
-            ellipsis: "...",
+            overflow: 'breakAll', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
+            ellipsis: '...'
           },
           extraCssText:
-            "height:200px;box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: left;", // 额外添加到浮层的css样式
+            'min-height:100px;box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: left;', // 额外添加到浮层的css样式
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: 'rgba(255, 255, 255, 0)' },
+                  { offset: 1, color: 'rgba(37, 107, 230, 0.18)' }
+                ]
+              )
+            }
+          }
         },
         series: [
           {
-            width: "100%",
-            height: "100%",
-            type: "tree",
+            width: '100%',
+            height: '100%',
+            type: 'tree',
             data: [this.treeData],
-            name: "树图",
-            top: "10%", // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
-            left: "5%", // 组件离容器左侧的距离
-            bottom: "1%", // 组件离容器下侧的距离
-            right: "2%", // 组件离容器右侧的距离
-            layout: "orthogonal", // 树图的布局，正交orthogonal和径向radial两种
-            orient: "TB", // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
-            edgeShape: "polyline", // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
+            name: '树图',
+            top: '10%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
+            left: '5%', // 组件离容器左侧的距离
+            bottom: '1%', // 组件离容器下侧的距离
+            right: '2%', // 组件离容器右侧的距离
+            layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
+            orient: 'TB', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
+            edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
             roam: true, // 是否开启鼠标缩放或平移，默认false
             zoom: 1,
             scaleLimit: {
               min: 0.5,
-              max: 10,
+              max: 10
             },
             initialTreeDepth: -1, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
-            // symbol: 'arrow', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
-            symbolRotate: 270, // 配合arrow图形使用效果较好
+            // symbol: 'emptyCircle', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
+            // symbolRotate: 270, // 配合arrow图形使用效果较好
             symbolSize: 16, // 大于0时是圆圈，等于0时不展示，标记的大小
             itemStyle: {
               // 树图中每个节点的样式
-              color: "#1890FF", // 节点未展开时的填充色
-              borderColor: "rgba(255, 144, 0, 1)", // 图形的描边颜色
+              color: '#1890FF', // 节点未展开时的填充色
+              borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
               borderWidth: 0.5, // 描边线宽，为0时无描边
-              borderType: "dotted", // 描边类型
-              borderCap: "square", // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
-              shadowColor: "rgba(0,121,221,0.3)", // 阴影颜色
+              borderType: 'dotted', // 描边类型
+              borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
+              shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
               shadowBlur: 16, // 图形阴影的模糊大小
-              opacity: 1, // 图形透明度
+              opacity: 1 // 图形透明度
             },
             label: {
               // 每个节点对应的文本标签样式
               show: true, // 是否显示标签
-              distance: 8, // 文本距离图形元素的距离
-              position: "bottom", // 标签位置
-              verticalAlign: "middle", // 文字垂直对齐方式，默认自动，top，middle，bottom
-              align: "center", // 文字水平对齐方式，默认自动，left，right，center
+              distance: 5, // 文本距离图形元素的距离
+              position: 'bottom', // 标签位置
+              verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
+              align: 'center', // 文字水平对齐方式，默认自动，left，right，center
               fontSize: 14, // 字体大小
-              color: "#333", // 字体颜色
-              backgroundColor: "#F0F5FA", // 文字块的背景颜色
-              borderColor: "#1890FF", // 文字块边框颜色
+              color: '#333', // 字体颜色
+              backgroundColor: '#F0F5FA', // 文字块的背景颜色
+              borderColor: '#1890FF', // 文字块边框颜色
               borderWidth: 0.5, // 文字块边框宽度
-              borderType: "solid", // 文字块边框描边类型 solid dashed dotted
-              borderRadius: 4, // 文字块的圆角
-              padding: [6, 6], // 文字块内边距
-              shadowColor: "rgba(0,121,221,0.3)", // 文字块的背景阴影颜色
+              borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
+              borderRadius: 6, // 文字块的圆角
+              padding: [9, 6], // 文字块内边距
+              shadowColor: 'rgba(0,121,221,0.6)', // 文字块的背景阴影颜色
               shadowBlur: 6, // 文字块的背景阴影长度
               // width: 60,
               // 文字超出宽度是否截断或者换行；只有配置width时有效
-              overflow: "truncate", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
-              ellipsis: "...",
-              formatter: function (params) {
-            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
-            console.log("params:", params);
-            let str = params.data.REAL_NAME + "<br/>" + params.data.DEC_LV_NAME;
-            return str;
-          },
+              overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
+              ellipsis: '...',
+              formatter: function(params) {
+                return params.data.USER_NAME + '\n' + '\n' + params.data.REAL_NAME
+              }
             },
             lineStyle: {
               // 树图边的样式
-              color: "rgba(0,0,0,.35)", // 树图边的颜色
+              color: 'rgba(0,0,0,.35)', // 树图边的颜色
               width: 2, // 树图边的宽度
               curveness: 0.5, // 树图边的曲度
-              shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
-              shadowBlur: 10, // 图形阴影的模糊大小
+              shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+              shadowBlur: 10 // 图形阴影的模糊大小
             },
             emphasis: {
               // 树图中图形和标签高亮的样式
               disabled: false, // 是否关闭高亮状态，默认false
               // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
-              focus: "relative", // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
-              blurScope: "coordinateSystem", // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
+              focus: 'relative', // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
+              blurScope: 'coordinateSystem', // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
               itemStyle: {
                 // 该节点的样式
-                color: "#1890FF", // 图形的颜色
+                color: '#1890FF', // 图形的颜色
                 // borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
                 borderWidth: 1, // 描边线宽，为0时无描边
-                borderType: "solid", // 描边类型 solid dashed dotted
-                borderCap: "square", // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
-                shadowColor: "rgba(0,121,221,0.3)", // 阴影颜色
+                borderType: 'solid', // 描边类型 solid dashed dotted
+                borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
+                shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
                 shadowBlur: 12, // 图形阴影的模糊大小
-                opacity: 1, // 图形透明度
+                opacity: 1 // 图形透明度
               },
               lineStyle: {
                 // 树图边的样式
-                color: "rgba(0,0,0,.45)", // 树图边的颜色
+                color: 'rgba(0,0,0,.45)', // 树图边的颜色
                 width: 2, // 树图边的宽度
                 curveness: 0.5, // 树图边的曲度
-                shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
-                shadowBlur: 6, // 图形阴影的模糊大小
+                shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+                shadowBlur: 6 // 图形阴影的模糊大小
               },
               label: {
                 // 高亮标签的文本样式
-                color: "#333",
-                fontWeight: 600,
-              },
+                color: '#333',
+                fontWeight: 600
+              }
             },
             blur: {
               // 淡出状态的相关配置，开启emphasis.focus后有效
               itemStyle: {}, // 节点的样式
               lineStyle: {}, // 树图边的样式
-              label: {}, // 淡出标签的文本样式
+              label: {} // 淡出标签的文本样式
             },
             leaves: {
               // 叶子节点的特殊配置
@@ -203,30 +218,30 @@ export default {
                 // 叶子节点的文本标签样式
                 distance: 8,
                 // color: '#1890FF',
-                position: "right",
-                verticalAlign: "middle",
-                align: "left",
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left'
               },
               itemStyle: {}, // 叶子节点的样式
               emphasis: {}, // 叶子节点高亮状态的配置
               blur: {}, // 叶子节点淡出状态的配置
-              select: {}, // 叶子节点选中状态的配置
+              select: {} // 叶子节点选中状态的配置
             },
             animation: true, // 是否开启动画
             expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
             animationDuration: 500, // 初始动画的时长
-            animationEasing: "linear", // 初始动画的缓动效果
+            animationEasing: 'linear', // 初始动画的缓动效果
             animationDelay: 0, // 初始动画的延迟
             animationDurationUpdate: 500, // 数据更新动画的时长
-            animationEasingUpdate: "cubicInOut", // 数据更新动画的缓动效果
-            animationDelayUpdate: 0, // 数据更新动画的延迟
-          },
-        ],
-      };
-      myChart.setOption(option);
-    },
-  },
-};
+            animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
+            animationDelayUpdate: 0 // 数据更新动画的延迟
+          }
+        ]
+      }
+      myChart.setOption(option)
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .echarts-container {

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

@@ -1,8 +1,40 @@
 
 <template>
-  <div class="treeCharBody" v-loading="loading">
+  <div v-loading="loading" class="treeCharBody">
+    <div class="filter-user" style="margin: 5px 0" @keyup.enter="getMainData()">
+      <el-input
+        v-model="mainUserName"
+        size="small"
+        class="top-member"
+        style="width: 300px; margin-top: 10px"
+      >
+        <template slot="prepend">{{ $t("atlas.topMember") }}</template>
+      </el-input>
+      <el-input
+        v-model="expandDeep"
+        size="small"
+        style="width: 200px; margin-top: 10px"
+        class="spread-depth"
+      >
+        <template slot="prepend">{{ $t("atlas.spreadDepth") }}</template>
+      </el-input>
+      <el-input
+        v-show="false"
+        v-model="periodNum"
+        size="small"
+        style="width: 150px"
+      >
+        <template slot="prepend">{{ $t("atlas.periodNumber") }}</template>
+      </el-input>
+      <el-button
+        type="primary"
+        size="small"
+        style="margin-top: 10px"
+        @click="getMainData()"
+      >{{ $t("common.confirm") }}</el-button>
+    </div>
     <div v-if="treeChartShow" class="tree-chart">
-      <tree-chart :tree-data="treeData" @clickNode="getNodeData" />
+      <tree-chart :tree-data="treeData" :top-deep="topDeep" type="placement" @clickNode="getNodeData" />
     </div>
   </div>
 </template>
@@ -37,15 +69,13 @@ export default {
         pageSize: 20
       },
       listTopDeep: 0,
-      loading: false,
-      
+      loading: false
     }
   },
   created() {
     this.getMainData(null, true)
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
     getNodeData(e) {
       console.log(e)
@@ -71,11 +101,11 @@ export default {
         params = { userName: that.mainUserName, periodNum: that.periodNum }
       }
       this.loading = true
-      fetchMainUserInfo(params).then(response => {
+      fetchMainUserInfo(params).then((response) => {
         const treeData = Object.assign(response.data[0])
         console.log(treeData)
         that.treeData = {
-          name: treeData.USER_NAME
+          ...treeData
         }
         that.topDeep = Number(treeData.TOP_NETWORK_DEEP)
         that.listPeriodNum = treeData.listPeriodNum
@@ -83,10 +113,6 @@ export default {
           // that.getListData()
         }
         this.getChildData(treeData)
-        setTimeout(() => {
-          that.loading = false
-          // that.treeChartShow = true
-        }, 1.5 * 1000)
       })
     },
     getChildData(data, node) {
@@ -102,19 +128,19 @@ export default {
         return ''
       }
       this.loading = true
-      fetchPlacementNetwork({ id: userId, deep: this.expandDeep, periodNum: this.periodNum }).then(response => {
+      fetchPlacementNetwork({
+        id: userId,
+        deep: this.expandDeep,
+        periodNum: this.periodNum
+      }).then((response) => {
         this.listPeriodNum = response.data.periodNum
         data.isExpanded = true
         const resAllData = response.data.allData
-        console.log( response.data)
 
-        const allData = that.traversalTree(resAllData,that)
-        that.treeData.children = allData
+        that.treeData.children = that.traversalTree(resAllData, that)
 
         that.treeChartShow = true
-        setTimeout(() => {
-          this.loading = false
-        }, 1.5 * 1000)
+        this.loading = false
       })
     },
     traversalTree(tree) {
@@ -123,7 +149,6 @@ export default {
         item.name = item.USER_NAME
         if (item.children && item.children.length > 0) {
           that.traversalTree(item.children)
-           
         }
       })
       return tree
@@ -131,7 +156,7 @@ export default {
     getListData(page, pageSize) {
       this.filterForm.page = page
       this.filterForm.pageSize = pageSize
-      fetchPlacementNetworkList(this.filterForm).then(response => {
+      fetchPlacementNetworkList(this.filterForm).then((response) => {
         this.allData = response.data
         this.listTopDeep = response.data.listTopDeep
         this.treeData.children = response.data.list
@@ -141,14 +166,28 @@ export default {
       })
     }
   }
-
 }
 </script>
 <style lang="scss" scoped>
-.treeCharBody{
+.treeCharBody {
   min-height: calc(100vh - 100px);
 }
-.tree-chart{
+.filter-user {
+  font-size: 14px;
+  margin-bottom: 20px;
+  padding: 0px 20px;
+
+}
+.filter-user:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.filter-user .el-input-group {
+  float: left;
+  margin-right: 15px;
+}
+.tree-chart {
   width: 100%;
   height: 100%;
 }

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

@@ -1,11 +1,49 @@
 
 <template>
-  <div>
-    <TreeChart :tree-data="treeData" @clickNode="getNodeData" />
+  <div v-loading="loading" class="treeCharBody">
+    <div class="filter-user" style="margin: 5px 0" @keyup.enter="getMainData()">
+      <el-input
+        v-model="mainUserName"
+        size="small"
+        class="top-member"
+        style="width: 300px; margin-top: 10px"
+      >
+        <template slot="prepend">{{ $t("atlas.topMember") }}</template>
+      </el-input>
+      <el-input
+        v-model="expandDeep"
+        size="small"
+        style="width: 200px; margin-top: 10px"
+        class="spread-depth"
+      >
+        <template slot="prepend">{{ $t("atlas.spreadDepth") }}</template>
+      </el-input>
+      <el-input
+        v-show="false"
+        v-model="periodNum"
+        size="small"
+        style="width: 150px"
+      >
+        <template slot="prepend">{{ $t("atlas.periodNumber") }}</template>
+      </el-input>
+      <el-button
+        type="primary"
+        size="small"
+        style="margin-top: 10px"
+        @click="getMainData()"
+      >{{ $t("common.confirm") }}</el-button>
+    </div>
+    <div v-if="treeChartShow" class="tree-chart">
+      <tree-chart :tree-data="treeData" :top-deep="topDeep" type="sponsor" @clickNode="getNodeData" />
+    </div>
   </div>
 </template>
 <script>
+
+import { fetchMainUserInfo, fetchSponsorNetwork, fetchSponsorNetworkList} from '@/api/atlas'
 import treeChart from '@/components/TreeChart/index.vue'
+import tool from '@/utils/tool'
+
 export default {
   name: 'SponsorNetworkEx',
   components: {
@@ -13,16 +51,145 @@ export default {
   },
   data() {
     return {
-      treeData: {}
+      treeChartShow: false,
+      treeData: {
+        name: null,
+        children: null
+      },
+      tool: tool,
+      expandDeep: 5,
+      topDeep: 0,
+      mainUserName: '',
+      periodNum: null,
+      listPeriodNum: null,
+      filterForm: {
+        userName: null,
+        deep: 5,
+        periodNum: null,
+        page: 1,
+        pageSize: 20
+      },
+      listTopDeep: 0,
+      loading: false
     }
   },
+  created() {
+    this.getMainData(null, true)
+  },
+  mounted() {},
   methods: {
-    getNodeData() {
+    getNodeData(e) {
+      console.log(e)
+      if (e.collapsed === false) {
+        console.log(e.name + '---节点展开')
+      }
+    },
+    getList() {
+      this.treeData = {
+        name: null,
+        children: []
+      }
+    },
+    getMainData(userName = null, getList = false) {
+      const that = this
+      this.$message({
+        message: that.$t('common.awaitData')
+      })
+      let params = {
+        periodNum: that.periodNum
+      }
+      if (that.mainUserName !== null) {
+        params = { userName: that.mainUserName, periodNum: that.periodNum }
+      }
+      this.loading = true
+      fetchMainUserInfo(params).then((response) => {
+        const treeData = Object.assign(response.data[0])
+        console.log(treeData)
+        that.treeData = {
+          ...treeData
+        }
+        that.topDeep = Number(treeData.TOP_NETWORK_DEEP)
+        that.listPeriodNum = treeData.listPeriodNum
+        if (getList) {
+          // that.getListData()
+        }
+        this.getChildData(treeData)
+      })
+    },
+    getChildData(data, node) {
+      const that = this
+      const userId = data.USER_ID
+      if (that.leaf) {
+        return ''
+      }
+      if (that.isExpanded) {
+        return ''
+      }
+      if (data.children !== null && data.children.length > 0) {
+        return ''
+      }
+      this.loading = true
+      fetchSponsorNetwork({
+        id: userId,
+        deep: this.expandDeep,
+        periodNum: this.periodNum
+      }).then((response) => {
+        this.listPeriodNum = response.data.periodNum
+        data.isExpanded = true
+        const resAllData = response.data.allData
+
+        that.treeData.children = that.traversalTree(resAllData, that)
+
+        that.treeChartShow = true
+        this.loading = false
+      })
+    },
+    traversalTree(tree) {
+      const that = this
+      tree.forEach((item) => {
+        item.name = item.USER_NAME
+        if (item.children && item.children.length > 0) {
+          that.traversalTree(item.children)
+        }
+      })
+      return tree
+    },
+    getListData(page, pageSize) {
+      this.filterForm.page = page
+      this.filterForm.pageSize = pageSize
+      fetchSponsorNetworkList(this.filterForm).then((response) => {
+        this.allData = response.data
+        this.listTopDeep = response.data.listTopDeep
+        this.treeData.children = response.data.list
+        setTimeout(() => {
+          this.loading = false
+        }, 1.5 * 1000)
+      })
     }
   }
-
 }
 </script>
 <style lang="scss" scoped>
+.treeCharBody {
+  min-height: calc(100vh - 100px);
+}
+.filter-user {
+  font-size: 14px;
+  margin-bottom: 20px;
+  padding: 0px 20px;
 
+}
+.filter-user:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.filter-user .el-input-group {
+  float: left;
+  margin-right: 15px;
+}
+.tree-chart {
+  width: 100%;
+  height: 100%;
+}
 </style>