|
|
@@ -15,23 +15,26 @@
|
|
|
</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-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>-->
|
|
|
+ <div v-if="treeChartShow" class="tree-chart">
|
|
|
+ <tree-chart :tree-data="treeData" :top-deep="topDeep" type="network" @clickNode="getNodeData" :clickNodeList="clickNodeList" />
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane :label="$t('atlas.placementNetworkList')" name="two" v-if="permission.hasPermission(`atlas/network-list`)"><!-- 安置网络列表 -->
|
|
|
<div class="filter-user">
|
|
|
@@ -92,10 +95,11 @@ import baseInfo from '@/utils/baseInfo'
|
|
|
import permission from '@/utils/permission'
|
|
|
import tool from '@/utils/tool'
|
|
|
import store from '@/utils/vuexStore'
|
|
|
+ import treeChart from "@/components/TreeChart/index.vue";
|
|
|
|
|
|
export default {
|
|
|
name: 'atlas_network-ex',
|
|
|
- components: {Pagination},
|
|
|
+ components: {treeChart, Pagination},
|
|
|
mounted() {
|
|
|
this.getData()
|
|
|
store.state.socket.onMessageCallback = this.onMessageCallback
|
|
|
@@ -112,7 +116,7 @@ import store from '@/utils/vuexStore'
|
|
|
//isLeaf: 'leaf',
|
|
|
icon: 'icon',
|
|
|
},
|
|
|
- treeData: null,
|
|
|
+ // treeData: null,
|
|
|
expandDeep: 2,
|
|
|
topDeep: 0,
|
|
|
mainUserName: '',
|
|
|
@@ -132,9 +136,28 @@ import store from '@/utils/vuexStore'
|
|
|
periodNum: null,
|
|
|
},
|
|
|
listTopDeep: 0,
|
|
|
+ //tree
|
|
|
+ treeChartShow: false,
|
|
|
+ treeData: {
|
|
|
+ name: null,
|
|
|
+ children: null
|
|
|
+ },
|
|
|
+ clickNodeList:[],
|
|
|
+ clickNodeUserId:null
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ //tree
|
|
|
+ getNodeData(e) {
|
|
|
+ // console.log(e)
|
|
|
+ if (e.collapsed === false && e.data.children == null) {
|
|
|
+ console.log(e.name + '---节点展开')
|
|
|
+ }
|
|
|
+ if (e.data.children == null) {
|
|
|
+ this.clickNodeUserId = e.data.USER_ID
|
|
|
+ this.getChildData(e.data, 'clickNode')
|
|
|
+ }
|
|
|
+ },
|
|
|
getData() {
|
|
|
this.$message({
|
|
|
message: this.$t('atlas.getDataWait'), // 正在获取数据，请稍后
|
|
|
@@ -144,6 +167,7 @@ import store from '@/utils/vuexStore'
|
|
|
if (permission.hasPermission(`atlas/network-list`) && !permission.hasPermission(`atlas/network`)) {
|
|
|
this.tabActiveName = 'two'
|
|
|
this.getListData()
|
|
|
+ console.log(this.treeData)
|
|
|
}
|
|
|
if (permission.hasPermission(`atlas/network`)) {
|
|
|
this.tabActiveName = 'first'
|
|
|
@@ -166,13 +190,17 @@ import store from '@/utils/vuexStore'
|
|
|
if (this.mainUserName !== null) {
|
|
|
requestData = {userName: this.mainUserName,periodNum: this.periodNum}
|
|
|
}
|
|
|
-
|
|
|
mainUserInfo(requestData).then(response=>{
|
|
|
- thisObj.treeData = response.data
|
|
|
+ const treeData = Object.assign(response.data[0])
|
|
|
+ thisObj.treeData = {...treeData}
|
|
|
thisObj.topDeep = Number(response.data[0].TOP_NETWORK_DEEP)
|
|
|
thisObj.listPeriodNum = response.data[0].listPeriodNum
|
|
|
if(getList) thisObj.getListData()
|
|
|
+ this.getChildData(treeData)
|
|
|
+
|
|
|
thisObj.loading = false
|
|
|
+ thisObj.treeChartShow = false
|
|
|
+
|
|
|
}).catch(err => {
|
|
|
this.$message({
|
|
|
message: err,
|
|
|
@@ -181,7 +209,7 @@ import store from '@/utils/vuexStore'
|
|
|
thisObj.loading = false
|
|
|
})
|
|
|
},
|
|
|
- getChildData (data, node) {
|
|
|
+ getChildData (data, type) {
|
|
|
let thisObj = this
|
|
|
let userId = data.USER_ID
|
|
|
let thisData = data
|
|
|
@@ -200,10 +228,22 @@ import store from '@/utils/vuexStore'
|
|
|
deep: thisObj.expandDeep,
|
|
|
periodNum: this.periodNum
|
|
|
}).then(response => {
|
|
|
- thisObj.$refs.tree.updateKeyChildren(userId, response.data.allData)
|
|
|
+ // thisObj.$refs.tree.updateKeyChildren(userId, response.data.allData)
|
|
|
thisObj.listPeriodNum = response.data.periodNum
|
|
|
thisData.displayNone = 'display-none'
|
|
|
thisData.isExpanded = true
|
|
|
+ const resAllData = response.data.allData
|
|
|
+
|
|
|
+ if (type === 'clickNode') {
|
|
|
+ console.log('clickNode', thisData.USER_ID)
|
|
|
+ thisObj.clickNodeList = resAllData
|
|
|
+ thisObj.treeData.children = thisObj.treeAddNode(thisObj.treeData.children)
|
|
|
+ } else {
|
|
|
+ thisObj.treeData.children = thisObj.traversalTree(resAllData, thisObj)
|
|
|
+ }
|
|
|
+
|
|
|
+ thisObj.treeChartShow = true
|
|
|
+ thisObj.loading = false
|
|
|
}).catch(err => {
|
|
|
this.$message({
|
|
|
message: err,
|
|
|
@@ -211,6 +251,28 @@ import store from '@/utils/vuexStore'
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ },
|
|
|
countTopDeep(deep,topDeep){
|
|
|
return Number(deep)-Number(topDeep)
|
|
|
},
|
|
|
@@ -287,7 +349,7 @@ import store from '@/utils/vuexStore'
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
- .filter-user{font-size: 14px;margin-bottom: 20px;}
|
|
|
+ .filter-user{font-size: 14px;margin-bottom: 5px;}
|
|
|
.filter-user:after{content: '';display: table;
|
|
|
clear: both;}
|
|
|
.filter-user .el-input-group{float: left;margin-right: 15px;}
|
tyler