城阳pc工作端前端代码
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

<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>