ngds/frontendEle/src/views/atlas/network.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <div class="filter-user" @keyup.enter="enterToGetData()" >
        <el-input v-model="mainUserName" size="small" style="width:300px;" class="top-member">
          <template slot="prepend">Top Member</template>
        </el-input>
        <el-input v-model="expandDeep" size="small" style="width:200px;" class="spread-depth">
          <template slot="prepend">Spread depth</template>
        </el-input>
        <el-input v-model="periodNum" size="small" style="width:150px;" v-show="false">
          <template slot="prepend">Period number</template>
        </el-input>
        <el-button type="primary" size="small" @click="getMainData()">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">Number of Layers: {{countTopDeep(data.TOP_NETWORK_DEEP,topDeep)}}</el-tag>
            <el-tag>Member Code: {{ node.label }}</el-tag>
            <el-tag>Name: {{data.REAL_NAME}}</el-tag>
            <el-tag type="danger">Location: {{data.RELATIVE_LOCATION}}</el-tag>
            <el-tag type="success">Level: {{data.DEC_LV_NAME}}</el-tag>
            <el-tag type="warning">Rank: {{data.EMP_LV_NAME}}, {{data.CROWN_LV_NAME}}</el-tag>
<!--            <el-tag type="warning">Star: {{data.CROWN_LV_NAME}}</el-tag>-->
            <el-tag>Joining Period: {{data.PERIOD_AT}}</el-tag>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import network from '@/utils/network'
import tool from '@/utils/tool'
import store from '@/utils/vuexStore'
import Pagination from '@/components/Pagination'
import baseInfo from '@/utils/baseInfo'

export default {
  name: 'atlas_network',
  components: {Pagination},
  mounted () {
    this.getData()
    store.state.socket.onMessageCallback = this.onMessageCallback
  },
  data () {
    return {
      loading: true,
      tabActiveName: 'first',
      // relation
      props: {
        label: 'USER_NAME',
        children: 'children',
        // isLeaf: 'leaf',
        icon: 'icon',
      },
      treeData: null,
      expandDeep: 5,
      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: 5,
        periodNum: null,
      },
      listTopDeep: 0,
    }
  },
  methods: {
    getData () {
      this.$message({
        message: 'Retrieving data, please wait.', // 正在获取数据，请稍后
      })
      // this.periodNum = baseInfo.nowPeriodNum()
      // this.filterForm.periodNum = baseInfo.nowPeriodNum()
      this.getMainData(null,true)
    },
    getMainData (userName = null, getList = false) {
      this.$message.closeAll()
      this.$message({
        message: 'Retrieving data, please wait.', // 正在获取数据，请稍后
      })
      let thisObj = this
      let requestData = {
        periodNum: this.periodNum
      }
      if (this.mainUserName !== null) {
        requestData = {userName: this.mainUserName,periodNum: this.periodNum}
      }
      network.getData('atlas/main-user-info', requestData).then(response => {
        thisObj.treeData = response
        thisObj.topDeep = Number(response[0].TOP_NETWORK_DEEP)
        thisObj.listPeriodNum = response[0].listPeriodNum
        if (getList) thisObj.getListData()
        thisObj.loading = false
      }).catch(response => {
        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 = ''
      network.getData('atlas/network', {
        id: userId,
        deep: thisObj.expandDeep,
        periodNum: this.periodNum
      }).then(response => {
        thisObj.$refs.tree.updateKeyChildren(userId, response.allData)
        thisObj.listPeriodNum = response.periodNum
        thisData.displayNone = 'display-none'
        thisData.isExpanded = true
      })
    },
    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
      network.getPageData(this, 'atlas/network-list', page, pageSize, this.filterForm, function (response) {
        obj.allData = response
        obj.listTopDeep = response.listTopDeep
      })
    },
    onMessageCallback (data) {
      // this.getData(this.currentPage, this.pageSize, false)
    },
    handleExport () {
      this.$confirm(`Are you sure you want to export the current data？`, 'Hint', { // 确定要导出当前数据吗？
        confirmButtonText: 'confirm', // 确定
        cancelButtonText: 'cancel', // 取消
        type: 'warning'
      }).then(() => {
        return network.getData(`atlas/network-list-export`, this.filterForm)
      }).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
      }).catch(response => {
      })
    },
    enterToGetData (ev) {
      this.getMainData()
    },
  }
}
</script>

<style scoped>
  .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;}
  .filter-user >>> .el-input__inner{border: 1px solid #DCDFE6;width: 100%;background: none;border-radius: 0;float: right;display: block; }
  .filter-user >>> .el-input-group__prepend{border-top: 1px solid #DCDFE6;border-left: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;border-right:none;}
  .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>