This commit is contained in:
yanran200730
2022-07-22 11:53:54 +08:00
parent d9e1f83d05
commit aae17797b7
2 changed files with 229 additions and 85 deletions

View File

@@ -9,9 +9,11 @@
:props="props"
node-key="id"
show-collapsable
default-expand-all
show-node-num
current-lable-class-name="aigrid-active"
:default-expanded-keys="defaultExpandedKeys"
ref="VueOkrTree"
@node-click="onNodeClick"
:data="treeData">
</VueOkrTree>
</div>
@@ -36,9 +38,10 @@
scale: 1,
x: '50%',
y: '50%',
defaultExpandedKeys: [],
treeData: [],
props: {
label: 'name',
label: 'girdName',
children: 'children'
}
}
@@ -101,19 +104,34 @@
this.isMove = false
},
onNodeClick (e) {
this.$emit('nodeClick', e)
},
getPartyOrg () {
this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
this.instance.post('/app/appgirdinfo/listAll3').then(res => {
if (res.code === 0) {
this.treeData = res.data.filter(e => !e.parentId)
this.treeData.map(p => this.addChild(p, res.data.map(v => {
this.treeData = res.data.filter(e => !e.parentGirdId)
const parentGirdId = this.treeData[0].id
const arr = res.data.filter(v => {
return v.parentGirdId === parentGirdId || !v.parentGirdId
})
this.treeData.map(p => this.addChild(p, arr.map(v => {
if (v.id === parentGirdId) {
this.defaultExpandedKeys.push(v.id)
}
return {
...v,
name: v.name.substr(0, 12)
girdName: v.girdName.substr(0, 8)
}
}), {parent: 'parentId'}))
}), {
parent: 'parentGirdId'
}))
this.$nextTick(() => {
this.autoScale()
this.$refs.VueOkrTree.setCurrentKey(parentGirdId)
})
}
})
@@ -150,6 +168,10 @@
height: 300%;
}
.aigrid-active {
background: linear-gradient(180deg, #42C6CE 0%, #307598 100%);
}
::v-deep .org-chart-container {
color: #FFFFFF;
font-size: 16px;
@@ -187,19 +209,51 @@
.org-chart-node-label {
width: 40px;
height: 330px;
height: 230px;
margin-right: 15px;
padding: 0 0;
border: 1px solid;
background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
.org-chart-node-label-inner {
width: 40px!important;
height: 230px!important;
border: 1px solid;
background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
line-height: 1.3;
padding: 10px 4px;
text-align: center;
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
&.aigrid-active {
background: linear-gradient(180deg, #42C6CE 0%, #307598 100%)!important;
}
}
&.is-root-label {
width: auto!important;
min-width: 240px;
height: 40px!important;
line-height: 40px!important;
min-height: 40px!important;
text-align: center;
.org-chart-node-label-inner {
padding: 0 30px!important;
color: #fff!important;
width: auto!important;
min-width: 240px;
height: 40px!important;
line-height: 40px!important;
min-height: 40px!important;
text-align: center;
background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
&.aigrid-active {
background: linear-gradient(180deg, #42C6CE 0%, #307598 100%)!important;
}
}
}
}
@@ -210,21 +264,6 @@
}
}
.is-root-label {
width: auto!important;
height: 40px!important;
line-height: 40px!important;
min-height: 40px!important;
text-align: center;
background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
.org-chart-node-label-inner {
padding: 0 30px!important;
color: #fff!important;
}
}
.org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
.org-chart-node.is-leaf:before {
border-radius: 0;