|
|
@ -2,7 +2,7 @@ |
|
|
<div class="wrap"> |
|
|
<div class="wrap"> |
|
|
<!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" --> |
|
|
<!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" --> |
|
|
<div class="content"> |
|
|
<div class="content"> |
|
|
<div v-for="(item, index) in levelArr" :key="item" :class="[item === 'unit_chief' ? 'lastLevel' : '', item === 'public_welfare_post' ? 'lastLevel1' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 'building_chief' ? '90px' : '', lineHeight: item === 'building_chief' ? '90px' : '' }"> |
|
|
<div v-for="(item, index) in levelArr" :key="item" :class="[item === 'unit_chief' ? 'lastLevel' : '', item === 'public_welfare_post' ? 'lastLevel1' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 'building_chief' ? '150px' : '', lineHeight: item === 'building_chief' ? '150px' : '' }"> |
|
|
<div :class="[item === 'building_chief' ? 'otherTop' : '']">{{ getTitleNameMapFun(item) }}</div> |
|
|
<div :class="[item === 'building_chief' ? 'otherTop' : '']">{{ getTitleNameMapFun(item) }}</div> |
|
|
</div> |
|
|
</div> |
|
|
<el-row> |
|
|
<el-row> |
|
|
@ -10,7 +10,7 @@ |
|
|
<div class="contentList"></div> |
|
|
<div class="contentList"></div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :span="20"> |
|
|
<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)"> |
|
|
<nodeWrapJw :nodeConfig.sync="nodeConfig"></nodeWrapJw> |
|
|
<nodeWrapJw :nodeConfig.sync="nodeConfig"></nodeWrapJw> |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
@ -27,6 +27,7 @@ export default { |
|
|
loading: false, |
|
|
loading: false, |
|
|
levelArr: [], |
|
|
levelArr: [], |
|
|
nowVal: 100, |
|
|
nowVal: 100, |
|
|
|
|
|
treeHeight: 300, |
|
|
nodeConfig: {}, |
|
|
nodeConfig: {}, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
@ -82,8 +83,25 @@ export default { |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
const myArray = [...new Set(this.levelArr)]; |
|
|
const myArray = [...new Set(this.levelArr)]; |
|
|
|
|
|
this.treeHeight = myArray.length * 180 + 100; |
|
|
this.levelArr = this.getLevelArrNum(myArray); |
|
|
this.levelArr = this.getLevelArrNum(myArray); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
hideChildrenData(data) { |
|
|
|
|
|
const newData = [...data]; |
|
|
|
|
|
newData.forEach((item) => { |
|
|
|
|
|
if (item.laneLevel === 1) { |
|
|
|
|
|
this.hideChildrenData(item.children); |
|
|
|
|
|
} |
|
|
|
|
|
if (item.children && item.children.length > 0 && item.laneLevel >= 2) { |
|
|
|
|
|
item._children = item.children; |
|
|
|
|
|
item.children = null; |
|
|
|
|
|
this.hideChildrenData(item._children); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
this.nodeConfig = newData[0]; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
//获取树状结构 |
|
|
//获取树状结构 |
|
|
getTreeData() { |
|
|
getTreeData() { |
|
|
this.loading = true; |
|
|
this.loading = true; |
|
|
@ -97,8 +115,8 @@ export default { |
|
|
this.$message.error("暂无数据"); |
|
|
this.$message.error("暂无数据"); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
this.nodeConfig = data[0]; |
|
|
|
|
|
this.getDataPLevel(data); |
|
|
this.getDataPLevel(data); |
|
|
|
|
|
this.hideChildrenData(data); |
|
|
this.loading = false; |
|
|
this.loading = false; |
|
|
} else { |
|
|
} else { |
|
|
this.loading = false; |
|
|
this.loading = false; |
|
|
@ -167,7 +185,7 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.lastLevel { |
|
|
.lastLevel { |
|
|
height: 145px !important; |
|
|
height: 160px !important; |
|
|
margin-top: -45px !important; |
|
|
margin-top: -45px !important; |
|
|
} |
|
|
} |
|
|
.lastLevel1 { |
|
|
.lastLevel1 { |
|
|
@ -202,19 +220,19 @@ export default { |
|
|
.flowLevel-6, |
|
|
.flowLevel-6, |
|
|
.flowLevel-7 { |
|
|
.flowLevel-7 { |
|
|
@include flowLevwlCommon; |
|
|
@include flowLevwlCommon; |
|
|
height: 126px; |
|
|
height: 180px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.flowLevel-2 { |
|
|
.flowLevel-2 { |
|
|
top: 181px; |
|
|
top: 181px; |
|
|
line-height: 110px; |
|
|
line-height: 180px; |
|
|
|
|
|
|
|
|
div { |
|
|
div { |
|
|
padding-left: 80px; |
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
|
&::after { |
|
|
&::after { |
|
|
@include flowLevelAfter; |
|
|
@include flowLevelAfter; |
|
|
top: 26px; |
|
|
top: 60px; |
|
|
left: 15px; |
|
|
left: 15px; |
|
|
width: 180px; |
|
|
width: 180px; |
|
|
height: 60px; |
|
|
height: 60px; |
|
|
@ -224,15 +242,15 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.flowLevel-3 { |
|
|
.flowLevel-3 { |
|
|
top: 329px; |
|
|
top: 379px; |
|
|
line-height: 120px; |
|
|
line-height: 185px; |
|
|
|
|
|
|
|
|
div { |
|
|
div { |
|
|
padding-left: 80px; |
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
|
&::after { |
|
|
&::after { |
|
|
@include flowLevelAfter; |
|
|
@include flowLevelAfter; |
|
|
top: 31px; |
|
|
top: 62px; |
|
|
left: 15px; |
|
|
left: 15px; |
|
|
width: 180px; |
|
|
width: 180px; |
|
|
height: 60px; |
|
|
height: 60px; |
|
|
@ -242,7 +260,7 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.flowLevel-4 { |
|
|
.flowLevel-4 { |
|
|
top: 475px; |
|
|
top: 577px; |
|
|
line-height: 128px; |
|
|
line-height: 128px; |
|
|
|
|
|
|
|
|
div { |
|
|
div { |
|
|
@ -250,7 +268,7 @@ export default { |
|
|
|
|
|
|
|
|
&::after { |
|
|
&::after { |
|
|
@include flowLevelAfter; |
|
|
@include flowLevelAfter; |
|
|
top: 35px; |
|
|
top: 43px; |
|
|
left: 15px; |
|
|
left: 15px; |
|
|
width: 180px; |
|
|
width: 180px; |
|
|
height: 60px; |
|
|
height: 60px; |
|
|
@ -260,7 +278,7 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.flowLevel-5 { |
|
|
.flowLevel-5 { |
|
|
top: 623px; |
|
|
top: 775px; |
|
|
line-height: 130px; |
|
|
line-height: 130px; |
|
|
|
|
|
|
|
|
div { |
|
|
div { |
|
|
@ -278,15 +296,15 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.flowLevel-6 { |
|
|
.flowLevel-6 { |
|
|
top: 771px; |
|
|
top: 991px; |
|
|
line-height: 130px; |
|
|
line-height: 171px; |
|
|
|
|
|
|
|
|
div { |
|
|
div { |
|
|
padding-left: 80px; |
|
|
padding-left: 80px; |
|
|
|
|
|
|
|
|
&::after { |
|
|
&::after { |
|
|
@include flowLevelAfter; |
|
|
@include flowLevelAfter; |
|
|
top: 35px; |
|
|
top: 55px; |
|
|
left: 15px; |
|
|
left: 15px; |
|
|
width: 180px; |
|
|
width: 180px; |
|
|
height: 60px; |
|
|
height: 60px; |
|
|
@ -296,7 +314,7 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.flowLevel-7 { |
|
|
.flowLevel-7 { |
|
|
top: 922px; |
|
|
top: 1161px; |
|
|
line-height: 130px; |
|
|
line-height: 130px; |
|
|
|
|
|
|
|
|
div { |
|
|
div { |
|
|
@ -315,7 +333,7 @@ export default { |
|
|
|
|
|
|
|
|
.otherTop { |
|
|
.otherTop { |
|
|
&::after { |
|
|
&::after { |
|
|
top: 15px !important; |
|
|
top: 43px !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
PLUTO
2 years ago
