|
|
|
@ -2,7 +2,7 @@ |
|
|
|
<div class="wrap"> |
|
|
|
<!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" --> |
|
|
|
<div class="content"> |
|
|
|
<div v-for="(item, index) in levelArr" :key="item" :class="[item > 9 ? 'lastLevel1' : '', item === 9 ? 'lastLevel' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 8 ? '90px' : '', lineHeight: item === 8 ? '90px' : '' }"> |
|
|
|
<div v-for="(item, index) in levelArr" :key="item" :class="[item > 9 ? 'lastLevel1' : '', item === 9 ? 'lastLevel' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 8 ? '180px' : '', lineHeight: item === 8 ? '180px' : '' }"> |
|
|
|
<div :class="[item === 8 ? 'otherTop' : '']">{{ getTitleNameMapFun(item) }}</div> |
|
|
|
</div> |
|
|
|
<el-row> |
|
|
|
@ -10,7 +10,7 @@ |
|
|
|
<div class="contentList"></div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="20"> |
|
|
|
<div class="dingflow-design" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
|
|
|
<div class="dingflow-design" :style="{ height: treeHeight + 'px' }" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
|
|
|
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
@ -29,13 +29,14 @@ export default { |
|
|
|
nowVal: 100, |
|
|
|
nodeConfig: {}, |
|
|
|
zoom: 0, |
|
|
|
treeHeight: 300, |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
"$store.state.chooseArea.chooseName"(n, v) { |
|
|
|
if (n.orgId) { |
|
|
|
this.levelArr = []; |
|
|
|
this.nodeConfig = {}; |
|
|
|
// this.levelArr = []; |
|
|
|
// this.nodeConfig = {}; |
|
|
|
// this.getTreeData(); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -65,6 +66,7 @@ export default { |
|
|
|
|
|
|
|
//获取背景层级 |
|
|
|
getDataPLevel(data) { |
|
|
|
console.log("data", data); |
|
|
|
data.forEach((item) => { |
|
|
|
this.levelArr.push(item.partyOrgLevel); |
|
|
|
if (item.children && item.children.length > 0) { |
|
|
|
@ -72,6 +74,7 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
const myArray = [...new Set(this.levelArr)]; |
|
|
|
this.treeHeight = myArray.length * 180 + 220; |
|
|
|
this.levelArr = this.getLevelArrNum(myArray); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -87,7 +90,7 @@ export default { |
|
|
|
this.hideChildrenData(item._children); |
|
|
|
} |
|
|
|
}); |
|
|
|
console.log(newData); |
|
|
|
this.nodeConfig = newData[0]; |
|
|
|
}, |
|
|
|
|
|
|
|
//获取树状结构 |
|
|
|
@ -103,9 +106,8 @@ export default { |
|
|
|
this.$message.error("暂无数据"); |
|
|
|
return; |
|
|
|
} |
|
|
|
// this.nodeConfig = data[0]; |
|
|
|
this.hideChildrenData(data); |
|
|
|
this.getDataPLevel(data); |
|
|
|
this.hideChildrenData(data); |
|
|
|
this.loading = false; |
|
|
|
} else { |
|
|
|
this.loading = false; |
|
|
|
@ -144,7 +146,7 @@ export default { |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@mixin flowLevwlCommon { |
|
|
|
position: absolute; |
|
|
|
width: 100%; |
|
|
|
@ -175,12 +177,12 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.lastLevel { |
|
|
|
height: 145px !important; |
|
|
|
margin-top: -45px !important; |
|
|
|
height: 180px !important; |
|
|
|
// margin-top: -45px !important; |
|
|
|
} |
|
|
|
.lastLevel1 { |
|
|
|
height: 145px !important; |
|
|
|
margin-top: -37px !important; |
|
|
|
height: 180px !important; |
|
|
|
// margin-top: -37px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.flowLevel-1 { |
|
|
|
@ -210,19 +212,19 @@ export default { |
|
|
|
.flowLevel-6, |
|
|
|
.flowLevel-7 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
height: 160px; |
|
|
|
height: 180px; |
|
|
|
} |
|
|
|
|
|
|
|
.flowLevel-2 { |
|
|
|
top: 181px; |
|
|
|
line-height: 110px; |
|
|
|
line-height: 180px; |
|
|
|
|
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 26px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -232,15 +234,15 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.flowLevel-3 { |
|
|
|
top: 329px; |
|
|
|
line-height: 120px; |
|
|
|
top: 379px; |
|
|
|
line-height: 180px; |
|
|
|
|
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 31px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -250,15 +252,15 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.flowLevel-4 { |
|
|
|
top: 475px; |
|
|
|
line-height: 128px; |
|
|
|
top: 578px; |
|
|
|
line-height: 180px; |
|
|
|
|
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -268,15 +270,15 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.flowLevel-5 { |
|
|
|
top: 623px; |
|
|
|
line-height: 130px; |
|
|
|
top: 776px; |
|
|
|
line-height: 180px; |
|
|
|
|
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -286,15 +288,14 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.flowLevel-6 { |
|
|
|
top: 771px; |
|
|
|
line-height: 130px; |
|
|
|
|
|
|
|
top: 974px; |
|
|
|
line-height: 180px; |
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -304,15 +305,15 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.flowLevel-7 { |
|
|
|
top: 922px; |
|
|
|
line-height: 130px; |
|
|
|
top: 1172px; |
|
|
|
line-height: 180px; |
|
|
|
|
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -323,22 +324,22 @@ export default { |
|
|
|
|
|
|
|
.otherTop { |
|
|
|
&::after { |
|
|
|
top: 15px !important; |
|
|
|
top: 60px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.flowLevel-8 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
top: 1070px; |
|
|
|
top: 1370px; |
|
|
|
height: 90px; |
|
|
|
line-height: 90px; |
|
|
|
line-height: 180px; |
|
|
|
|
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 14px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -349,16 +350,16 @@ export default { |
|
|
|
|
|
|
|
.flowLevel-9 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
top: 1179px; |
|
|
|
height: 135px; |
|
|
|
line-height: 135px; |
|
|
|
top: 1569px; |
|
|
|
height: 160px; |
|
|
|
line-height: 180px; |
|
|
|
|
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -369,16 +370,16 @@ export default { |
|
|
|
|
|
|
|
.flowLevel-10 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
top: 1338px; |
|
|
|
height: 135px; |
|
|
|
line-height: 135px; |
|
|
|
top: 1766px; |
|
|
|
height: 180px; |
|
|
|
line-height: 180px; |
|
|
|
|
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
top: 60px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
|
PLUTO
2 years ago
