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.
528 lines
17 KiB
528 lines
17 KiB
2 years ago
|
<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="[`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: "GridTree",
|
||
|
data() {
|
||
|
return {
|
||
|
loading: false,
|
||
|
levelArr: [1, 2, 3],
|
||
|
navList: [
|
||
|
{
|
||
|
name: "党委组织架构",
|
||
|
key: "1",
|
||
|
ifActive: true,
|
||
|
},
|
||
|
{
|
||
|
name: "居委组织架构",
|
||
|
key: "2",
|
||
|
ifActive: false,
|
||
|
},
|
||
|
{
|
||
|
name: "网格架构",
|
||
|
key: "3",
|
||
|
ifActive: false,
|
||
|
},
|
||
|
],
|
||
|
cardList: [
|
||
|
{
|
||
|
title: "社区党委",
|
||
|
key: "1",
|
||
|
name: "南昌路社区党委 (党委书记:解书记)",
|
||
|
children: [
|
||
|
{
|
||
|
title: "网格党支部",
|
||
|
name: "第一网格党支部(支部书记:王艺发)",
|
||
|
key: "1",
|
||
|
children: [
|
||
|
{
|
||
|
title: "楼院党小组",
|
||
|
name: "第一楼院党小组 (组长:韩文国)",
|
||
|
key: "1",
|
||
|
},
|
||
|
{
|
||
|
title: "楼院党小组",
|
||
|
name: "第二楼院党小组 (组长:褚丽兰)",
|
||
|
key: "2",
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
title: "网格党支部",
|
||
|
name: "第二网格党支部 (支部书记:尤芬紫)",
|
||
|
key: "2",
|
||
|
children: [
|
||
|
{
|
||
|
title: "楼院党小组",
|
||
|
name: "第一楼院党小组 (组长:韩文国)",
|
||
|
key: "1",
|
||
|
},
|
||
|
{
|
||
|
title: "楼院党小组",
|
||
|
name: "第二楼院党小组 (组长:褚丽兰)",
|
||
|
key: "2",
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
title: "网格党支部",
|
||
|
name: "第三网格党支部 (支部书记:凤桥强)",
|
||
|
key: "3",
|
||
|
children: [
|
||
|
{
|
||
|
title: "楼院党小组",
|
||
|
name: "第一楼院党小组 (组长:韩文国)",
|
||
|
key: "1",
|
||
|
},
|
||
|
{
|
||
|
title: "楼院党小组",
|
||
|
name: "第二楼院党小组 (组长:褚丽兰)",
|
||
|
key: "2",
|
||
|
},
|
||
|
{
|
||
|
title: "楼院党小组",
|
||
|
name: "第三楼院党小组 (组长:王丽丽)",
|
||
|
key: "3",
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
nowVal: 100,
|
||
|
|
||
|
nodeConfig: {
|
||
|
partyOrgName: "市北区委",
|
||
|
partyOrgLevel: 1,
|
||
|
partyOrgPid: "0",
|
||
|
principalName: "栾秀杰",
|
||
|
laneLevel: 1,
|
||
|
children: [
|
||
|
{
|
||
|
partyOrgName: "市北区委",
|
||
|
partyOrgLevel: 2,
|
||
|
partyOrgPid: "0",
|
||
|
principalName: "栾秀杰",
|
||
|
laneLevel: 2,
|
||
|
children: [
|
||
|
{
|
||
|
partyOrgName: "市北区委",
|
||
|
partyOrgLevel: 3,
|
||
|
partyOrgPid: "0",
|
||
|
principalName: "栾秀杰",
|
||
|
laneLevel: 3,
|
||
|
// children: [
|
||
|
// {
|
||
|
// partyOrgName: "市北区委",
|
||
|
// partyOrgLevel: 4,
|
||
|
// partyOrgPid: "0",
|
||
|
// principalName: "栾秀杰",
|
||
|
// laneLevel: 4,
|
||
|
// children: [
|
||
|
// {
|
||
|
// partyOrgName: "市北区委",
|
||
|
// partyOrgLevel: 5,
|
||
|
// partyOrgPid: "0",
|
||
|
// principalName: "栾秀杰",
|
||
|
// laneLevel: 5,
|
||
|
// children: [
|
||
|
// {
|
||
|
// partyOrgName: "市北区委",
|
||
|
// partyOrgLevel: 6,
|
||
|
// partyOrgPid: "0",
|
||
|
// principalName: "栾秀杰",
|
||
|
// laneLevel: 6,
|
||
|
// children: [
|
||
|
// {
|
||
|
// partyOrgName: "市北区委",
|
||
|
// partyOrgLevel: 7,
|
||
|
// partyOrgPid: "0",
|
||
|
// principalName: "栾秀杰",
|
||
|
// laneLevel: 7,
|
||
|
// // children: [
|
||
|
// // {
|
||
|
// // partyOrgName: "市北区委",
|
||
|
// // partyOrgLevel: 8,
|
||
|
// // partyOrgPid: "0",
|
||
|
// // principalName: "栾秀杰",
|
||
|
// // laneLevel: 8,
|
||
|
// // children: [
|
||
|
// // {
|
||
|
// // partyOrgName: "市北区委",
|
||
|
// // partyOrgLevel: 9,
|
||
|
// // partyOrgPid: "0",
|
||
|
// // principalName: "栾秀杰",
|
||
|
// // laneLevel: 9,
|
||
|
// // children: [
|
||
|
// // {
|
||
|
// // partyOrgName: "市北区委",
|
||
|
// // partyOrgLevel: 10,
|
||
|
// // partyOrgPid: "0",
|
||
|
// // principalName: "栾秀杰",
|
||
|
// // laneLevel: 10,
|
||
|
// // },
|
||
|
// // ],
|
||
|
// // },
|
||
|
// // ],
|
||
|
// // },
|
||
|
// // ],
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// ],
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
|
||
|
// title: "社区党委",
|
||
|
// name: "南昌路社区党委(党委书记:解书记)",
|
||
|
// key: "1",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "网格党支部",
|
||
|
// name: "第一网格党支部 (支部书记:王艺发)",
|
||
|
// type: 2,
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "楼院党小组",
|
||
|
// type: 3,
|
||
|
// name: "第一楼院党小组 (组长:韩文国)",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "周游",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "王阳明",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "刘艳萍",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "谢苗苗",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "杨军",
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// {
|
||
|
// title: "楼院党小组",
|
||
|
// type: 3,
|
||
|
// name: "第二楼院党小组 (组长:褚丽兰)",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "周游",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "王阳明",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "刘艳萍",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "谢苗苗",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "杨军",
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// {
|
||
|
// title: "网格党支部",
|
||
|
// name: "第二网格党支部 (支部书记:尤芬紫)",
|
||
|
// type: 3,
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "楼院党小组",
|
||
|
// type: 3,
|
||
|
// name: "第一楼院党小组 (组长:韩文国)",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "周游",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "王阳明",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "联系家庭",
|
||
|
// type: 5,
|
||
|
// name: "王宇",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "联系家庭",
|
||
|
// type: 5,
|
||
|
// name: "刘冰冰",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "联系家庭",
|
||
|
// type: 5,
|
||
|
// name: "杨飞宇",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "联系家庭",
|
||
|
// type: 5,
|
||
|
// name: "齐天",
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "刘艳萍",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "谢苗苗",
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// {
|
||
|
// title: "楼院党小组",
|
||
|
// type: 3,
|
||
|
// name: "第二楼院党小组 (组长:褚丽兰)",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "周游",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "王阳明",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "刘艳萍",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "谢苗苗",
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// {
|
||
|
// title: "网格党支部",
|
||
|
// name: "第三网格党支部 (支部书记:凤桥强)",
|
||
|
// type: 3,
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "楼院党小组",
|
||
|
// type: 3,
|
||
|
// name: "第一楼院党小组 (组长:韩文国)",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "周游",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "王阳明",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "刘艳萍",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "谢苗苗",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "杨军",
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// {
|
||
|
// title: "楼院党小组",
|
||
|
// type: 3,
|
||
|
// name: "第二楼院党小组 (组长:褚丽兰)",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "周游",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "王阳明",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "刘艳萍",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "谢苗苗",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "杨军",
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// {
|
||
|
// title: "楼院党小组",
|
||
|
// type: 3,
|
||
|
// name: "第三楼院党小组 (组长:王丽丽)",
|
||
|
// children: [
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "周游",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "王阳明",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "刘艳萍",
|
||
|
// },
|
||
|
// {
|
||
|
// title: "党员中心户",
|
||
|
// type: 4,
|
||
|
// name: "谢苗苗",
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// ],
|
||
|
// },
|
||
|
// ],
|
||
|
},
|
||
|
};
|
||
|
},
|
||
|
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>
|