大屏
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user