|
|
@@ -1,250 +1,249 @@
|
|
|
<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;">
|
|
|
- <template slot="prepend">Top Member</template>
|
|
|
- </el-input>
|
|
|
- <el-input v-model="expandDeep" size="small" style="width:150px;">
|
|
|
- <template slot="prepend">Spread depth</template>
|
|
|
- </el-input>
|
|
|
- <el-input v-model="periodNum" size="small" style="width:150px;" v-show="false">
|
|
|
- <template slot="prepend">期数</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}}</el-tag>
|
|
|
- <el-tag type="warning">Star: {{data.STAR_LV_NAME}}</el-tag>
|
|
|
- <el-tag>Number of joining periods: {{data.PERIOD_AT}}</el-tag></span>
|
|
|
- </span>
|
|
|
- </el-tree>
|
|
|
+ <div class="filter-user" @keyup.enter="enterToGetData()" >
|
|
|
+ <el-input v-model="mainUserName" size="small" style="width:300px;">
|
|
|
+ <template slot="prepend">Top Member</template>
|
|
|
+ </el-input>
|
|
|
+ <el-input v-model="expandDeep" size="small" style="width:150px;">
|
|
|
+ <template slot="prepend">Spread depth</template>
|
|
|
+ </el-input>
|
|
|
+ <el-input v-model="periodNum" size="small" style="width:150px;" v-show="false">
|
|
|
+ <template slot="prepend">期数</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}}</el-tag>
|
|
|
+ <el-tag type="warning">Star: {{data.STAR_LV_NAME}}</el-tag>
|
|
|
+ <el-tag>Number of joining periods: {{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'
|
|
|
+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(`确定要导出当前数据吗？`, '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()
|
|
|
- },
|
|
|
- }
|
|
|
+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(`确定要导出当前数据吗？`, '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>
|
|
|
- .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;
|
|
|
- }
|
|
|
+ .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 .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__content {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
|
|
|
- .el-tree-node__children {
|
|
|
- position: relative;
|
|
|
- padding: 0 0 0 16px;
|
|
|
- }
|
|
|
+ .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;}
|
|
|
+ .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;
|
|
|
- }
|
|
|
+ .custom-tree-node {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
|
|
|
- .first-node:before {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ .first-node:before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- .custom-tree-node:before {
|
|
|
- position: absolute;
|
|
|
- width: 8px;
|
|
|
- content: '';
|
|
|
- top: 15px;
|
|
|
- left: -4px;
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
- }
|
|
|
+ .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;
|
|
|
- }
|
|
|
+ .el-tree-node__expand-icon {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
</style>
|
theo