网络管理

src/api/atlas.js

@@ -0,0 +1,72 @@
+import request from '@/utils/request'
+
+// atlas/main-user-info
+export function mainUserInfo(query) {
+    return request({
+      url: '/v1/atlas/main-user-info',
+      method: 'get',
+      data: query,
+      params: query
+    })
+}
+
+// atlas/relation
+export function getRelation(query) {
+    return request({
+      url: '/v1/atlas/relation',
+      method: 'get',
+      data: query,
+      params: query
+    })
+}
+
+// atlas/network
+export function getNetwork(query) {
+    return request({
+      url: '/v1/atlas/network',
+      method: 'get',
+      data: query,
+      params: query
+    })
+}
+
+//atlas/relation-list
+export function relationList(query) {
+    return request({
+      url: '/v1/atlas/relation-list',
+      method: 'get',
+      data: query,
+      params: query
+    })
+}
+
+//atlas/network-list
+export function networkList(query) {
+    return request({
+      url: '/v1/atlas/network-list',
+      method: 'get',
+      data: query,
+      params: query
+    })
+}
+
+
+// 导出数据
+export function relationListExport(query) {
+    return request({
+      url: '/v1/atlas/relation-list-export',
+      method: 'get',
+      data: query,
+      params: query
+    })
+}
+
+// 导出数据
+export function networkListExport(query) {
+    return request({
+      url: '/v1/atlas/network-list-export',
+      method: 'get',
+      data: query,
+      params: query
+    })
+}

src/lang/en.js

@@ -409,6 +409,29 @@ export default {
     changeStateSelectedDataNotice:'Are you sure to change the state of the selected data',
   },
 
+  // 网络管理
+  atlas: {
+    exportNotice:"Are you sure you want to export the current data?",
+    sponsorNetworkDiagram:'Sponsor Network Diagram',
+    sponsorNetworkList:'Sponsor Network List',
+    topMember:'Top Member',
+    spreadDepth:'Spread Depth',
+    numberOfPeriods:'Number Of Periods',
+    algebra:'Algebra',
+    memberCode:'Member Code',
+    name:'Name',
+    level:'Level',
+    highest:'Highest',
+    depth:'Depth',
+    subordinatesMember:'View the subordinates of this member',
+    getDataWait:'Getting data, please wait',
+    resettlementNetworkDiagram:'Resettlement network diagram',
+    numberOfLayers:'Number Of Layers',
+    location:'Location',
+    joiningPeriod:'Joining Period',
+    placementNetworkList:'Placement network list',
+  },
+
   // 管理员管理
   Administrator: {
     role: '角色',

src/lang/zh.js

@@ -412,6 +412,29 @@ export default {
     changeStateSelectedDataNotice:'确定要对所选数据修改状态吗？',
   },
 
+  // 网络管理
+  atlas: {
+    exportNotice:"确定要导出当前数据吗？",
+    sponsorNetworkDiagram:'开拓网络图',
+    sponsorNetworkList:'开拓网络列表',
+    topMember:'顶级会员',
+    spreadDepth:'展开深度',
+    numberOfPeriods:'期数',
+    algebra:'代数',
+    memberCode:'会员编号',
+    name:'姓名',
+    level:'级别',
+    highest:'聘级',
+    depth:'深度',
+    subordinatesMember:'查看该会员的下级',
+    getDataWait:'正在获取数据，请稍后',
+    resettlementNetworkDiagram:'安置网络图',
+    numberOfLayers:'层数',
+    location:'区位',
+    joiningPeriod:'加入期数',
+    placementNetworkList:'安置网络列表',
+  },
+
   // 管理员管理
   Administrator: {
     role: '角色',

src/router/index.js

@@ -130,6 +130,23 @@ export const constantRoutes = [
       },
     ]
   },
+  {
+    path: '/atlas',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/atlas/relation-opt', // 开拓网络
+        component: () => import('@/views/atlas/relation-opt'),
+        name: 'atlas_relation-opt',
+      },
+      {
+        path: '/atlas/network-opt', // 安置网络
+        component: () => import('@/views/atlas/network-opt'),
+        name: 'atlas_network-opt',
+      },
+    ]
+  },
   {
     path: '/login',
     component: () => import('@/views/login/index'),

src/views/atlas/network-opt.vue

@@ -0,0 +1,348 @@
+<template>
+    <div v-loading="loading">
+      <div class="white-box">
+        <el-tabs v-model="tabActiveName">
+          <el-tab-pane :label="$t('atlas.resettlementNetworkDiagram')" name="first" v-if="permission.hasPermission(`atlas/network`)"><!-- 安置网络图 -->
+            <div class="filter-user" @keyup.enter="enterToGetData()">
+              <el-input v-model="mainUserName" size="small" style="width:300px;">
+                <template slot="prepend">{{ $t('atlas.topMember') }}<!-- 顶级会员 --></template>
+              </el-input>
+              <el-input v-model="expandDeep" size="small" style="width:200px;">
+                <template slot="prepend">{{ $t('atlas.spreadDepth') }}<!-- 展开深度 --></template>
+              </el-input>
+              <el-input v-model="periodNum" size="small" style="width:150px;" v-show="false">
+                <template slot="prepend">{{ $t('atlas.numberOfPeriods') }}<!-- 期数 --></template>
+              </el-input>
+              <el-button type="primary" size="small" @click="getMainData()">{{ $t('common.confirm') }}<!-- 确定 --></el-button>
+            </div>
+            <el-tree :props="props" :data="treeData" node-key="USER_ID" @node-click="getChildData" ref="tree" :indent="0"
+                     default-expand-all :height="tool.getTableHeight(true)">
+              <span :id="'node_'+data.USER_ID" :class="'custom-tree-node '+data.className"
+                    slot-scope="{ node, data }">
+                <span :class="'el-icon-loading '+ data.displayNone"></span>
+                <span :class="data.icon"></span>
+                <span>
+                  <el-tag type="danger">{{ $t('atlas.numberOfLayers') }} ：{{countTopDeep(data.TOP_NETWORK_DEEP,topDeep)}}</el-tag>
+                  <el-tag><!-- 会员编号 -->{{ $t('atlas.memberCode') }}：{{ node.label }}</el-tag>
+                  <el-tag>{{ $t('atlas.name') }}<!-- 姓名 -->：{{data.REAL_NAME}}</el-tag>
+                  <el-tag type="danger"><!-- 区位 -->{{ $t('atlas.location') }}：{{data.RELATIVE_LOCATION}}</el-tag>
+                  <el-tag type="success"><!-- 级别 -->{{ $t('atlas.level') }}：{{data.DEC_LV_NAME}}</el-tag>
+                  <el-tag type="warning"><!-- 聘级 -->{{ $t('atlas.highest') }}：{{data.EMP_LV_NAME}}, {{data.CROWN_LV_NAME}}</el-tag>
+                  <el-tag><!-- 加入期数 -->{{ $t('atlas.joiningPeriod') }}：{{data.PERIOD_AT}}</el-tag>
+                </span>
+              </span>
+            </el-tree>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('atlas.placementNetworkList')" name="two" v-if="permission.hasPermission(`atlas/network-list`)"><!-- 安置网络列表 -->
+            <div class="filter-user">
+              <el-input v-model="filterForm.userName" size="small" style="width:300px;">
+                <template slot="prepend"><!-- 会员编号 -->{{ $t('atlas.memberCode') }}</template>
+              </el-input>
+              <el-input v-model="filterForm.deep" size="small" style="width:150px;">
+                <template slot="prepend"><!-- 深度 -->{{ $t('atlas.depth') }}</template>
+              </el-input>
+              <el-input v-model="filterForm.periodNum" size="small" style="width:150px;" v-show="false">
+                <template slot="prepend"><!-- 期数 -->{{ $t('atlas.numberOfPeriods') }}</template>
+              </el-input>
+              <el-button type="primary" size="small" @click="handleFilter">{{ $t('common.confirm') }}<!-- 确定 --></el-button>
+            </div>
+  
+            <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight(true)">
+              <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''">
+                <template slot-scope="scope">
+                  <template v-if="scope.row[tableHeader.index].other.tag" >
+                    <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
+                  </template>
+                  <template v-else-if="scope.row[tableHeader.index].other.progress" >
+                    <el-progress type="circle" :percentage="Number.parseInt(percentList['MOVE_PERCENT'][scope.row.ID])"
+                                 :width="50"
+                                 :stroke-width="3"></el-progress>
+                  </template>
+                  <template v-else>
+                    <template v-if="tableHeader.index === 'USER_NAME'">
+                      <el-tooltip class="item" effect="dark" :content="$t('atlas.subordinatesMember')" placement="top"><!-- 查看该会员的下级 -->
+                      <el-button @click.native="handleShow(scope.row)" size="small" type="primary">
+                        {{scope.row[tableHeader.index].value}}
+                      </el-button>
+                      </el-tooltip>
+                    </template>
+                    <template v-else>
+                    <div v-html="scope.row[tableHeader.index].value"></div>
+                    </template>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="white-box-footer">
+              <el-button type="success" size="small" @click="handleExport"
+                         v-show="permission.hasPermission(`atlas/network-list-export`)">{{ $t('common.exportExcel') }}<!-- 导出Excel -->
+              </el-button>
+              <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import tool from '@/utils/tool'
+  import store from '@/utils/vuexStore'
+  import permission from '@/utils/permission'
+  import Pagination from '@/components/Pagination'
+  import baseInfo from '@/utils/baseInfo'
+  import { mainUserInfo, getNetwork, networkList, networkListExport } from '@/api/atlas'
+  
+  export default {
+    name: 'atlas_network-opt',
+    components: {Pagination},
+    mounted() {
+      this.getData()
+      store.state.socket.onMessageCallback = this.onMessageCallback
+    },
+    data() {
+      return {
+        loading: true,
+        tabActiveName: 'first',
+        permission: permission,
+        //relation
+        props: {
+          label: 'USER_NAME',
+          children: 'children',
+          //isLeaf: 'leaf',
+          icon: 'icon',
+        },
+        treeData: null,
+        expandDeep: 2,
+        topDeep: 0,
+        mainUserName: '',
+        periodNum: null,
+        listPeriodNum: null,
+        allData: null,
+        tableHeaders: null,
+        tableData: null,
+        currentPage: 1,
+        totalPages: 1,
+        totalCount: 1,
+        pageSize: 20,
+        tool: tool,
+        filterForm: {
+          userName: null,
+          deep: 2,
+          periodNum: null,
+        },
+        listTopDeep: 0,
+      }
+    },
+    methods: {
+      getData() {
+        this.$message({
+          message: this.$t('atlas.getDataWait'), // 正在获取数据，请稍后
+        })
+        this.periodNum = baseInfo.nowPeriodNum()
+        this.filterForm.periodNum = baseInfo.nowPeriodNum()
+        if (permission.hasPermission(`atlas/network-list`) && !permission.hasPermission(`atlas/network`)) {
+          this.tabActiveName = 'two'
+          this.getListData()
+        }
+        if (permission.hasPermission(`atlas/network`)) {
+          this.tabActiveName = 'first'
+          if(permission.hasPermission(`atlas/network-list`)){
+            this.getMainData(null,true)
+          }else{
+            this.getMainData()
+          }
+        }
+      },
+      getMainData (userName = null, getList = false) {
+        this.$message.closeAll()
+        this.$message({
+          message: this.$t('atlas.getDataWait'),//正在获取数据，请稍后
+        })
+        let thisObj = this
+        let requestData = {
+          periodNum: this.periodNum
+        }
+        if (this.mainUserName !== null) {
+          requestData = {userName: this.mainUserName,periodNum: this.periodNum}
+        }
+
+        mainUserInfo(requestData).then(response=>{
+            thisObj.treeData = response.data
+            thisObj.topDeep = Number(response.data[0].TOP_NETWORK_DEEP)
+            thisObj.listPeriodNum = response.data[0].listPeriodNum
+            if(getList) thisObj.getListData()
+            thisObj.loading = false
+        }).catch(err => {
+            this.$message({
+                message: err,
+                type: 'error'
+            })
+            thisObj.loading = false
+        })
+      },
+      getChildData (data, node) {
+        let thisObj = this
+        let userId = data.USER_ID
+        let thisData = data
+        if (thisData.leaf) {
+          return ''
+        }
+        if (thisData.isExpanded) {
+          return ''
+        }
+        if (thisData.children !== null && thisData.children.length > 0) {
+          return ''
+        }
+        thisData.displayNone = ''
+        getNetwork({
+          id: userId,
+          deep: thisObj.expandDeep,
+          periodNum: this.periodNum
+        }).then(response => {
+            thisObj.$refs.tree.updateKeyChildren(userId, response.data.allData)
+            thisObj.listPeriodNum = response.data.periodNum
+            thisData.displayNone = 'display-none'
+            thisData.isExpanded = true
+        }).catch(err => {
+            this.$message({
+              message: err,
+              type: 'error'
+            })
+        })
+      },
+      countTopDeep(deep,topDeep){
+        return Number(deep)-Number(topDeep)
+      },
+      handleCurrentChange (page) {
+        this.getListData(page, this.pageSize)
+      },
+      handleSizeChange (pageSize) {
+        this.getListData(this.currentPage, pageSize)
+      },
+      handleFilter () {
+        this.getListData(1, this.pageSize)
+        this.tabActiveName = 'two'
+      },
+      handleShow(row) {
+        this.loading = true
+        this.filterForm.userName = row.SEE_USER_NAME
+        this.getListData(1, this.pageSize)
+        this.tabActiveName = 'two'
+      },
+      getListData (page, pageSize) {
+        let obj = this
+        let filterData = this.filterForm
+        const paramsData = Object.assign({
+            page: (page === null || page == undefined) ? 1 : page,
+            pageSize: (pageSize === null || pageSize == undefined) ? obj.pageSize : pageSize
+          }, filterData)
+        networkList(paramsData).then(response => {
+            obj.tableHeaders = response.data.columnsShow ? response.data.columnsShow : []
+            obj.tableData = response.data.list
+            obj.filterTypes = response.data.filterTypes
+            obj.allData = response.data.list
+            obj.listTopDeep = response.data.listTopDeep
+            obj.periodNum = response.data.periodNum
+            obj.currentPage = page
+            obj.totalPages = parseInt(response.data.totalPages)
+            obj.totalCount = parseInt(response.data.totalCount)
+            obj.pageSize = pageSize
+            obj.loading = false
+        }).catch(err => {
+            obj.loading = false
+            this.$message({
+              message: err,
+              type: 'error'
+            })
+        })
+      },
+      onMessageCallback(data) {
+        //this.getData(this.currentPage, this.pageSize, false)
+      },
+      handleExport(){
+        this.$confirm(this.$t('atlas.exportNotice'), this.$t('common.hint'), {//`确定要导出当前数据吗？`, '提示'
+          confirmButtonText: this.$t('common.confirm'), // 确定
+          cancelButtonText: this.$t('common.cancel'), // 取消
+          type: 'warning'
+        }).then(() => {
+            networkListExport(this.filterForm).then(response => {
+                this.$message({
+                    message: response.data,
+                    type: 'success'
+                })
+            }).catch(err => {
+                this.$message({
+                message: err,
+                type: 'error'
+                })
+            })
+        })
+      },
+      enterToGetData (ev) {
+        this.getMainData()
+      },
+    }
+  }
+  </script>
+  
+  <style>
+    .filter-user{font-size: 14px;margin-bottom: 20px;}
+    .filter-user:after{content: '';display: table;
+      clear: both;}
+    .filter-user .el-input-group{float: left;margin-right: 15px;}
+    .el-tree {
+      padding-bottom: 20px;
+      font-size: 14px;
+      overflow-x: auto;
+    }
+  
+    .el-tree .el-tag {
+      height: 20px;
+      line-height: 18px;vertical-align: middle;
+    }
+    .el-tree-node{position: relative;}
+  
+    .el-tree-node__content {
+      height: 30px;
+      line-height: 30px;
+    }
+  
+    .el-tree-node__children {
+      position: relative;
+      padding: 0 0 0 16px;
+    }
+  
+    .el-tree-node:before {
+      position: absolute;
+      content: '';
+      top: 0px;
+      left: -4px;
+      height: 100%;
+      border-left: 1px solid #ccc;
+    }
+    .el-tree-node:last-child:before{height: 15px;}
+  
+    .custom-tree-node {
+      position: relative;
+      padding-left: 5px;
+    }
+  
+    .first-node:before {
+      display: none;
+    }
+  
+    .custom-tree-node:before {
+      position: absolute;
+      width: 8px;
+      content: '';
+      top: 15px;
+      left: -4px;
+      border-bottom: 1px solid #ccc;
+    }
+  
+    .el-tree-node__expand-icon {
+      display: none !important;
+    }
+  </style>
+  

src/views/atlas/relation-opt.vue

@@ -0,0 +1,349 @@
+<template>
+    <div v-loading="loading">
+      <div class="white-box">
+        <el-tabs v-model="tabActiveName">
+          <el-tab-pane :label="$t('atlas.sponsorNetworkDiagram')" name="first" v-if="permission.hasPermission(`atlas/relation`)"><!-- 开拓网络图 -->
+            <div class="filter-user">
+              <el-input v-model="mainUserName" size="small" style="width:300px;">
+                <template slot="prepend">{{ $t('atlas.topMember') }}<!-- 顶级会员 --></template>
+              </el-input>
+              <el-input v-model="expandDeep" size="small" style="width:200px;">
+                <template slot="prepend">{{ $t('atlas.spreadDepth') }}<!-- 展开深度 --></template>
+              </el-input>
+              <el-input v-model="periodNum" size="small" style="width:150px;" v-show="false">
+                <template slot="prepend">{{ $t('atlas.numberOfPeriods') }}<!-- 期数 --></template>
+              </el-input>
+              <el-button type="primary" size="small" @click="getMainData()">{{ $t('common.confirm') }}<!-- 确定 --></el-button>
+            </div>
+            <el-tree :props="props" :data="treeData" node-key="USER_ID" @node-click="getChildData" ref="tree" :indent="0"
+                     default-expand-all>
+                  <span :id="'node_'+data.USER_ID" :class="'custom-tree-node '+data.className"
+                        slot-scope="{ node, data }">
+                      <span :class="'el-icon-loading '+ data.displayNone"></span>
+                      <span :class="data.icon"></span>
+                      <span>
+                        <el-tag type="danger"><!-- 代数 -->{{ $t('atlas.algebra') }}：  {{countTopDeep(data.TOP_RELATION_DEEP,topDeep)}}</el-tag>
+                        <el-tag><!-- 会员编号 -->{{ $t('atlas.memberCode') }}：{{ node.label }}</el-tag>
+                        <el-tag type="success">{{ $t('atlas.name') }}<!-- 姓名 -->：{{data.REAL_NAME}}</el-tag>
+                        <el-tag type="warning">{{ $t('atlas.level') }}<!-- 级别 -->：{{data.DEC_LV_NAME}}</el-tag>
+                        <el-tag type="warning">{{ $t('atlas.highest') }}：<!-- 聘级 -->{{data.EMP_LV_NAME}}, {{data.CROWN_LV_NAME}}</el-tag>
+  <!--                      <el-tag type="warning">Star：&lt;!&ndash; 星级 &ndash;&gt;{{data.CROWN_LV_NAME}}</el-tag>-->
+                      </span>
+                  </span>
+            </el-tree>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('atlas.sponsorNetworkList')" name="two" v-if="permission.hasPermission(`atlas/relation-list`)"><!-- 开拓网络列表 -->
+            <div class="filter-user">
+              <el-input v-model="filterForm.userName" size="small" style="width:300px;">
+                <template slot="prepend"><!-- 会员编号 -->{{ $t('atlas.memberCode') }}</template>
+              </el-input>
+              <el-input v-model="filterForm.deep" size="small" style="width:150px;">
+                <template slot="prepend"><!-- 深度 -->{{ $t('atlas.depth') }}</template>
+              </el-input>
+              <el-input v-model="filterForm.periodNum" size="small" style="width:150px;" v-show="false">
+                <template slot="prepend"><!-- 期数 -->{{ $t('atlas.numberOfPeriods') }}</template>
+              </el-input>
+              <el-button type="primary" size="small" @click="handleFilter">{{ $t('common.confirm') }}<!-- 确定 --></el-button>
+            </div>
+  
+            <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight(true)">
+              <!--<el-table-column type="selection" width="55" v-if="tableHeaders"></el-table-column>-->
+              <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''">
+                <template slot-scope="scope">
+                  <template v-if="scope.row[tableHeader.index].other.tag" >
+                    <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
+                  </template>
+                  <template v-else-if="scope.row[tableHeader.index].other.progress" >
+                    <el-progress type="circle" :percentage="Number.parseInt(percentList['MOVE_PERCENT'][scope.row.ID])"
+                                 :width="50"
+                                 :stroke-width="3"></el-progress>
+                  </template>
+                  <template v-else>
+                    <template v-if="tableHeader.index === 'USER_NAME'">
+                      <el-tooltip class="item" effect="dark" :content="$t('atlas.subordinatesMember')" placement="top"><!-- 查看该会员的下级 -->
+                        <el-button @click.native="handleShow(scope.row)" size="small" type="primary">
+                          {{scope.row[tableHeader.index].value}}
+                        </el-button>
+                      </el-tooltip>
+                    </template>
+                    <template v-else>
+                      <div v-html="scope.row[tableHeader.index].value"></div>
+                    </template>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="white-box-footer">
+              <el-button type="success" size="small" @click="handleExport"
+                         v-show="permission.hasPermission(`atlas/relation-list-export`)">{{ $t('common.exportExcel') }}<!-- 导出Excel -->
+              </el-button>
+              <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+    import tool from '@/utils/tool'
+    import store from '@/utils/vuexStore'
+    import permission from '@/utils/permission'
+    import Pagination from '@/components/Pagination'
+    import baseInfo from '@/utils/baseInfo'
+    import { mainUserInfo, getRelation, relationList, relationListExport } from '@/api/atlas'
+  
+    export default {
+      name: 'atlas_relation-opt',
+      components: {Pagination},
+      mounted() {
+        this.getData()
+        store.state.socket.onMessageCallback = this.onMessageCallback
+      },
+      data() {
+        return {
+          loading: true,
+          tabActiveName: 'first',
+          permission: permission,
+          //relation
+          props: {
+            label: 'USER_NAME',
+            children: 'children',
+            //isLeaf: 'leaf',
+            icon: 'icon',
+          },
+          treeData: null,
+          expandDeep: 2,
+          topDeep: 0,
+          mainUserName: '',
+          periodNum: null,
+          listPeriodNum: null,
+          allData: null,
+          tableHeaders: null,
+          tableData: null,
+          currentPage: 1,
+          totalPages: 1,
+          totalCount: 1,
+          pageSize: 20,
+          tool: tool,
+          filterForm: {
+            userName: null,
+            deep: 2,
+            periodNum: null,
+          },
+          listTopDeep: 0,
+        }
+      },
+      methods: {
+        getData() {
+          this.$message({
+            message: this.$t('atlas.getDataWait'),//正在获取数据，请稍后
+            duration: 0
+          })
+          this.periodNum = baseInfo.nowPeriodNum()
+          this.filterForm.periodNum = baseInfo.nowPeriodNum()
+          if (permission.hasPermission(`atlas/relation-list`) && !permission.hasPermission(`atlas/relation`)) {
+            this.tabActiveName = 'two'
+            this.getListData()
+          }
+          if (permission.hasPermission(`atlas/relation`)) {
+            this.tabActiveName = 'first'
+            if (permission.hasPermission(`atlas/relation-list`)) {
+              this.getMainData(null, true)
+            } else {
+              this.getMainData()
+            }
+          }
+        },
+        getMainData (userName = null, getList = false) {
+          this.$message.closeAll()
+          this.$message({
+            message: this.$t('atlas.getDataWait'),//正在获取数据，请稍后
+          })
+          let thisObj = this
+          let requestData = {
+            periodNum: this.periodNum
+          }
+          if (this.mainUserName !== null) {
+            requestData = {userName: this.mainUserName,periodNum: this.periodNum}
+          }
+          mainUserInfo(requestData).then(response=>{
+            thisObj.treeData = response.data
+            thisObj.topDeep = Number(response.data[0].TOP_RELATION_DEEP)
+            thisObj.listPeriodNum = response.data[0].listPeriodNum
+            if(getList) thisObj.getListData()
+            thisObj.loading = false
+          }).catch(err => {
+            this.$message({
+                message: err,
+                type: 'error'
+            })
+            thisObj.loading = false
+          })
+        },
+        getChildData (data, node) {
+          let thisObj = this
+          let userId = data.USER_ID
+          let thisData = data
+          if (thisData.leaf) {
+            return ''
+          }
+          if (thisData.isExpanded) {
+            return ''
+          }
+          if (thisData.children !== null && thisData.children.length > 0) {
+            return ''
+          }
+          this.$message({
+            message: this.$t('atlas.getDataWait'),//正在获取数据，请稍后
+          })
+          thisData.displayNone = ''
+          getRelation({
+            id: userId,
+            deep: thisObj.expandDeep,
+            periodNum: this.periodNum
+          }).then(response => {
+            thisObj.$refs.tree.updateKeyChildren(userId, response.data.allData)
+            thisData.listPeriodNum = response.data.periodNum
+            thisData.displayNone = 'display-none'
+            thisData.isExpanded = true
+          }).catch(err => {
+            this.$message({
+                message: err,
+                type: 'error'
+            })
+          })
+        },
+        countTopDeep(deep,topDeep){
+          return Number(deep)-Number(topDeep)
+        },
+        getListData(page, pageSize) {
+          let obj = this
+          let filterData = this.filterForm
+          const paramsData = Object.assign({
+            page: (page === null || page == undefined) ? 1 : page,
+            pageSize: (pageSize === null || pageSize == undefined) ? obj.pageSize : pageSize
+          }, filterData)
+          relationList(paramsData).then(response => {
+            obj.tableHeaders = response.data.columnsShow ? response.data.columnsShow : []
+            obj.tableData = response.data.list
+            obj.filterTypes = response.data.filterTypes
+            obj.allData = response.data.list
+            obj.listTopDeep = response.data.listTopDeep
+            obj.periodNum = response.data.periodNum
+            obj.currentPage = page
+            obj.totalPages = parseInt(response.data.totalPages)
+            obj.totalCount = parseInt(response.data.totalCount)
+            obj.pageSize = pageSize
+            obj.loading = false
+          }).catch(err => {
+            obj.loading = false
+            this.$message({
+                message: err,
+                type: 'error'
+            })
+          })
+        },
+        handleCurrentChange(page) {
+          this.getListData(page, this.pageSize)
+        },
+        handleSizeChange(pageSize) {
+          this.getListData(this.currentPage, pageSize)
+        },
+        handleFilter() {
+          this.getListData(1, this.pageSize)
+          this.tabActiveName = 'two'
+        },
+        handleShow(row) {
+          this.loading = true
+          this.filterForm.userName = row.SEE_USER_NAME
+          this.filterForm.deep = 1
+          this.getListData(1, this.pageSize)
+          this.tabActiveName = 'two'
+        },
+        onMessageCallback(data) {
+          //this.getData(this.currentPage, this.pageSize, false)
+        },
+        handleExport(){
+          this.$confirm(this.$t('atlas.exportNotice'), this.$t('common.hint'), {
+            confirmButtonText: this.$t('common.confirm'), // 确定
+            cancelButtonText: this.$t('common.cancel'), // 取消
+            type: 'warning'
+          }).then(() => {
+            relationListExport(this.filterForm).then(response => {
+                this.$message({
+                   message: response.data,
+                   type: 'success'
+                })
+            }).catch(err => {
+                this.$message({
+                   message: err,
+                   type: 'error'
+                })
+            })
+          })
+        },
+      }
+    }
+  </script>
+  
+  <style>
+    .filter-user{font-size: 14px;margin-bottom: 20px;}
+    .filter-user:after{content: '';display: table;
+      clear: both;}
+    .filter-user .el-input-group{float: left;margin-right: 15px;}
+    .el-tree {
+      padding-bottom: 20px;
+      font-size: 14px;
+      overflow-x: auto;
+    }
+  
+    .el-tree .el-tag {
+      height: 20px;
+      line-height: 18px;vertical-align: middle;
+    }
+    .el-tree-node{position: relative;}
+  
+    .el-tree-node__content {
+      height: 30px;
+      line-height: 30px;
+    }
+  
+    .el-tree-node__children {
+      position: relative;
+      padding: 0 0 0 16px;
+    }
+  
+    .el-tree-node:before {
+      position: absolute;
+      content: '';
+      top: 0px;
+      left: -4px;
+      height: 100%;
+      border-left: 1px solid #ccc;
+    }
+    .el-tree-node:last-child:before{height: 15px;}
+  
+    .custom-tree-node {
+      position: relative;
+      padding-left: 5px;
+    }
+  
+    .first-node:before {
+      display: none;
+    }
+  
+    .custom-tree-node:before {
+      position: absolute;
+      width: 8px;
+      content: '';
+      top: 15px;
+      left: -4px;
+      border-bottom: 1px solid #ccc;
+    }
+  
+    .el-tree-node__expand-icon {
+      display: none !important;
+    }
+  </style>
+