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.
|
|
|
<template>
|
|
|
|
<div class="wrap">
|
|
|
|
<!-- -->
|
|
|
|
<div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'">
|
|
|
|
<div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]">
|
|
|
|
<div>{{ getTitleNameMapFun(item) }}</div>
|
|
|
|
</div>
|
|
|
|
<el-row>
|
|
|
|
<el-col :span="4">
|
|
|
|
<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)">
|
|
|
|
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: "DangTree",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
loading: false,
|
|
|
|
levelArr: [],
|
|
|
|
navList: [
|
|
|
|
{
|
|
|
|
name: "党委组织架构",
|
|
|
|
key: "1",
|
|
|
|
ifActive: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "居委组织架构",
|
|
|
|
key: "2",
|
|
|
|
ifActive: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "网格架构",
|
|
|
|
key: "3",
|
|
|
|
ifActive: false,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
nowVal: 100,
|
|
|
|
|
|
|
|
nodeConfig: {},
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {},
|
|
|
|
mounted() {
|
|
|
|
this.getTreeData();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
//获取背景层级
|
|
|
|
getDataPLevel(item) {
|
|
|
|
let arr = [...this.levelArr];
|
|
|
|
arr.push(item.partyOrgLevel);
|
|
|
|
this.levelArr = [...arr];
|
|
|
|
if (item.children) {
|
|
|
|
this.getDataPLevel(item.children[0]);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//获取树状结构
|
|
|
|
getTreeData() {
|
|
|
|
this.loading = true;
|
|
|
|
this.$http
|
|
|
|
.get("/actual/base/organizational/structure/partyCommitteeOrg")
|
|
|
|
.then((res) => {
|
|
|
|
const {
|
|
|
|
data: { code, data },
|
|
|
|
} = res;
|
|
|
|
if (code === 0) {
|
|
|
|
this.nodeConfig = data[0];
|
|
|
|
this.getDataPLevel(data[0]);
|
|
|
|
this.loading = false;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
this.loading = false;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
getTitleNameMapFun(i) {
|
|
|
|
let titleNameMap = new Map([
|
|
|
|
[1, "省委"],
|
|
|
|
[2, "市委"],
|
|
|
|
[3, "区委"],
|
|
|
|
[4, "党工委"],
|
|
|
|
[5, "党委"],
|
|
|
|
[6, "党总支"],
|
|
|
|
[7, "党支部"],
|
|
|
|
[8, "楼院党小组"],
|
|
|
|
[9, "党员中心户"],
|
|
|
|
[10, "联系家庭"],
|
|
|
|
]);
|
|
|
|
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">
|
|
|
|
@import "~@/assets/css/workflow.scss";
|
|
|
|
</style>
|