You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
413 lines
9.5 KiB
413 lines
9.5 KiB
<!-- 调用树组件 -->
|
|
<template>
|
|
<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 === 'unit_chief' ? 'lastLevel' : '', item === 'public_welfare_post' ? 'lastLevel1' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 'building_chief' ? '180px' : '', lineHeight: item === 'building_chief' ? '180px' : '' }">
|
|
<div :class="[item === 'building_chief' ? 'otherTop' : '']">{{ getTitleNameMapFun(item) }}</div>
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="3">
|
|
<div class="contentList"></div>
|
|
</el-col>
|
|
<el-col :span="21">
|
|
<div class="dingflow-design overflow-hidden" :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>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "JwTree",
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
levelArr: [],
|
|
nowVal: 100,
|
|
treeHeight: 300,
|
|
nodeConfig: {},
|
|
};
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
"$store.state.chooseArea.chooseName"(n, v) {
|
|
if (n.orgId) {
|
|
// this.levelArr = [];
|
|
// this.nodeConfig = {};
|
|
// this.getTreeData();
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
// const orgId = this.$store.state.chooseArea.chooseName.orgId;
|
|
// if (orgId) {
|
|
// this.getTreeData();
|
|
// }
|
|
this.$EventBus.$on('handelClickJWNode', (val) => {
|
|
this.levelArr.push(val[0].level)
|
|
const myArray = [...new Set(this.levelArr)];
|
|
this.treeHeight = myArray.length * 180 + 220;
|
|
this.levelArr = this.getLevelArrNum(myArray);
|
|
})
|
|
this.getTreeData();
|
|
},
|
|
methods: {
|
|
getLevelArrNum(myArray) {
|
|
let titleNameMap = new Map([
|
|
["province", 1],
|
|
["city", 2],
|
|
["district", 3],
|
|
["street", 4],
|
|
["community", 5],
|
|
["grid_manager", 6],
|
|
["building_chief", 7],
|
|
["unit_chief", 8],
|
|
["public_welfare_post", 9],
|
|
]);
|
|
const arr = [...myArray];
|
|
while (arr.length > 1) {
|
|
let lastItem = titleNameMap.get(arr[arr.length - 1]);
|
|
let secondLastItem = titleNameMap.get(arr[arr.length - 2]);
|
|
if (lastItem < secondLastItem) {
|
|
arr.pop();
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
return arr;
|
|
},
|
|
//获取背景层级
|
|
getDataPLevel(data) {
|
|
data.forEach((item) => {
|
|
this.levelArr.push(item.level);
|
|
if (item.children && item.children.length > 0) {
|
|
this.getDataPLevel(item.children);
|
|
}
|
|
});
|
|
const myArray = [...new Set(this.levelArr)].filter(item=>item!='village');
|
|
this.treeHeight = myArray.length * 180 + 220;
|
|
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() {
|
|
this.loading = true;
|
|
this.$http.get(`/gov/org/organizational/neighborhood/getNeighborhoodCommitteeOrgTreeList?agencyId=`).then((res) => {
|
|
const {
|
|
data: { code, msg, data },
|
|
} = res;
|
|
if (code === 0) {
|
|
if (data.length === 0) {
|
|
this.loading = false;
|
|
this.$message.error("暂无数据");
|
|
return;
|
|
}
|
|
this.getDataPLevel(data);
|
|
this.hideChildrenData(data);
|
|
this.loading = false;
|
|
} else {
|
|
this.loading = false;
|
|
this.$message.error(msg);
|
|
}
|
|
});
|
|
},
|
|
|
|
getTitleNameMapFun(i) {
|
|
let titleNameMap = new Map([
|
|
["province", "省委"],
|
|
["city", "市委"],
|
|
["district", "区委"],
|
|
["street", "乡(镇、街道)"],
|
|
["community", "社区"],
|
|
["grid_manager", "网格员"],
|
|
["building_chief", "楼组长"],
|
|
["unit_chief", "单元长"],
|
|
["public_welfare_post", "志愿者"],
|
|
]);
|
|
return titleNameMap.get(i);
|
|
},
|
|
|
|
zoomSize(e) {
|
|
e.preventDefault();
|
|
if (e.deltaY > 0) {
|
|
if (this.nowVal == 50) return;
|
|
this.nowVal -= 0.5;
|
|
} else if (e.deltaY < 0) {
|
|
if (this.nowVal == 300) return;
|
|
this.nowVal += 0.5;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@mixin flowLevwlCommon {
|
|
position: absolute;
|
|
width: 100%;
|
|
margin-bottom: 45px;
|
|
background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
|
|
color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
@mixin flowLevelAfter {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
background-size: 100%;
|
|
}
|
|
.wrap {
|
|
.content {
|
|
margin-top: 65px;
|
|
padding: 0 17px;
|
|
position: relative;
|
|
transition: transform 0.3s ease-in-out;
|
|
transform-origin: 50% 50%;
|
|
|
|
.contentList {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 109px;
|
|
}
|
|
|
|
.lastLevel {
|
|
height: 180px !important;
|
|
// margin-top: -45px !important;
|
|
}
|
|
.lastLevel1 {
|
|
height: 180px !important;
|
|
// margin-top: -37px !important;
|
|
}
|
|
|
|
.flowLevel-1 {
|
|
@include flowLevwlCommon;
|
|
top: -10px;
|
|
height: 164px;
|
|
line-height: 164px;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 51px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/dwbg.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowLevel-2,
|
|
.flowLevel-3,
|
|
.flowLevel-4,
|
|
.flowLevel-5,
|
|
.flowLevel-6,
|
|
.flowLevel-7 {
|
|
@include flowLevwlCommon;
|
|
height: 180px !important;
|
|
}
|
|
|
|
.flowLevel-2 {
|
|
top: 181px;
|
|
line-height: 180px;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/dzb.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowLevel-3 {
|
|
top: 379px;
|
|
line-height: 180px;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/lydxz.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowLevel-4 {
|
|
top: 577px;
|
|
line-height: 180px;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/dyzxh.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowLevel-5 {
|
|
top: 775px;
|
|
height: 180px !important;
|
|
line-height: 180px;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/lxjt.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowLevel-6 {
|
|
top: 974px;
|
|
line-height: 180px;
|
|
height: 180px !important;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/lxjt.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowLevel-7 {
|
|
top: 1172px;
|
|
line-height: 180px;
|
|
height: 180px !important;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/lxjt.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.otherTop {
|
|
&::after {
|
|
top: 60px !important;
|
|
}
|
|
}
|
|
|
|
.flowLevel-8 {
|
|
@include flowLevwlCommon;
|
|
top: 1371px;
|
|
height: 90px;
|
|
line-height: 180px;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/lxjt.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowLevel-9 {
|
|
@include flowLevwlCommon;
|
|
top: 1568px;
|
|
height: 135px;
|
|
line-height: 180px;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/dyzxh.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowLevel-10 {
|
|
@include flowLevwlCommon;
|
|
top: 1738px;
|
|
height: 135px;
|
|
line-height: 180px;
|
|
|
|
div {
|
|
padding-left: 80px;
|
|
|
|
&::after {
|
|
@include flowLevelAfter;
|
|
top: 60px;
|
|
left: 15px;
|
|
width: 180px;
|
|
height: 60px;
|
|
background-image: url(~@/assets/images/home/lxjt.png);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.overflow-hidden{
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|
|
|