elink-star
/
epmet-work-pc-chengyang
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

居委架构前端对接

feature
SongZhen 2 years ago
parent
285fcc27ea
commit
35d8c30392
11 changed files with 952 additions and 938 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/assets/css/workflow.scss
  2. 237
      src/components/GridTree/addNode.vue
  3. 202
      src/components/GridTree/nodeWrap.vue
  4. 237
      src/components/JwTree/addNode.vue
  5. 201
      src/components/JwTree/nodeWrap.vue
  6. 8
      src/components/Tree/nodeWrap.vue
  7. 2
      src/js/store/modules/chooseArea.js
  8. 10
      src/main.js
  9. 39
      src/views/dataBoard/organizational/dangTree/index.vue
  10. 473
      src/views/dataBoard/organizational/gridTree/index.vue
  11. 474
      src/views/dataBoard/organizational/jwTree/index.vue

7
src/assets/css/workflow.scss
View File

@ -1423,11 +1423,11 @@ html {
.flowLevel-7 {
@include flowLevwlCommon;
height: 126px;
line-height: 126px;
}
.flowLevel-2 {
top: 181px;
line-height: 110px;
div {
padding-left: 80px;
@ -1445,6 +1445,7 @@ html {
.flowLevel-3 {
top: 329px;
line-height: 120px;
div {
padding-left: 80px;
@ -1462,6 +1463,7 @@ html {
.flowLevel-4 {
top: 475px;
line-height: 128px;
div {
padding-left: 80px;
@ -1479,6 +1481,7 @@ html {
.flowLevel-5 {
top: 623px;
line-height: 130px;
div {
padding-left: 80px;
@ -1496,6 +1499,7 @@ html {
.flowLevel-6 {
top: 771px;
line-height: 130px;
div {
padding-left: 80px;
@ -1513,6 +1517,7 @@ html {
.flowLevel-7 {
top: 922px;
line-height: 130px;
div {
padding-left: 80px;

237
src/components/GridTree/addNode.vue
View File

@ -0,0 +1,237 @@
<template>
<div class="add-node-btn-box">
<div class="add-node-btn">
<el-popover placement="right-start" v-model="visible">
<div class="add-node-popover-body">
<a class="add-node-popover-item approver" @click="addType(1)">
<div class="item-wrapper">
<span class="iconfont"></span>
</div>
<p>审批人</p>
</a>
<a class="add-node-popover-item notifier" @click="addType(2)">
<div class="item-wrapper">
<span class="iconfont"></span>
</div>
<p>抄送人</p>
</a>
<a class="add-node-popover-item condition" @click="addType(4)">
<div class="item-wrapper">
<span class="iconfont"></span>
</div>
<p>条件分支</p>
</a>
</div>
<!-- <button class="btn" type="button" slot="reference">
<span class="iconfont"></span>
</button> -->
</el-popover>
</div>
</div>
</template>
<script>
export default {
props: ["childNodeP"],
data() {
return {
visible: false,
};
},
methods: {
addType(type) {
this.visible = false;
if (type != 4) {
var data;
if (type == 1) {
data = {
nodeName: "审核人",
error: true,
type: 1,
settype: 1,
selectMode: 0,
selectRange: 0,
directorLevel: 1,
examineMode: 1,
noHanderAction: 1,
examineEndDirectorLevel: 0,
childNode: this.childNodeP,
nodeUserList: [],
};
} else if (type == 2) {
data = {
nodeName: "抄送人",
type: 2,
ccSelfSelectFlag: 1,
childNode: this.childNodeP,
nodeUserList: [],
};
}
this.$emit("update:childNodeP", data);
} else {
this.$emit("update:childNodeP", {
nodeName: "路由",
type: 4,
childNode: null,
conditionNodes: [
{
nodeName: "条件1",
error: true,
type: 3,
priorityLevel: 1,
conditionList: [],
nodeUserList: [],
childNode: this.childNodeP,
},
{
nodeName: "条件2",
type: 3,
priorityLevel: 2,
conditionList: [],
nodeUserList: [],
childNode: null,
},
],
});
}
},
},
};
</script>
<style scoped lang="scss">
.add-node-btn-box {
width: 240px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 1px;
height: 100%;
background-color: #2f87ff;
}
.add-node-btn {
user-select: none;
width: 240px;
padding: 20px 0 32px;
display: flex;
-webkit-box-pack: center;
justify-content: center;
flex-shrink: 0;
-webkit-box-flex: 1;
flex-grow: 1;
.btn {
outline: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
width: 30px;
height: 30px;
background: #3296fa;
border-radius: 50%;
position: relative;
border: none;
line-height: 30px;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
.iconfont {
color: #fff;
font-size: 16px;
}
&:hover {
transform: scale(1.3);
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
}
&:active {
transform: none;
background: #1e83e9;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
}
}
}
</style>
<style lang="scss">
.add-node-popover-body {
display: flex;
.add-node-popover-item {
margin-right: 10px;
cursor: pointer;
text-align: center;
flex: 1;
color: #191f25 !important;
.item-wrapper {
user-select: none;
display: inline-block;
width: 80px;
height: 80px;
margin-bottom: 5px;
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 50%;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
.iconfont {
font-size: 35px;
line-height: 80px;
}
}
&.approver {
.item-wrapper {
color: #ff943e;
}
}
&.notifier {
.item-wrapper {
color: #3296fa;
}
}
&.condition {
.item-wrapper {
color: #15bc83;
}
}
&:hover {
.item-wrapper {
background: #3296fa;
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4);
}
.iconfont {
color: #fff;
}
}
&:active {
.item-wrapper {
box-shadow: none;
background: #eaeaea;
}
.iconfont {
color: inherit;
}
}
}
}
</style>

202
src/components/GridTree/nodeWrap.vue
View File

@ -0,0 +1,202 @@
<template>
<div>
<div class="node-wrap" v-if="nodeConfig.laneLevel === 1">
<div class="node-wrap-box">
<div class="node-box-after">
<div class="nodeBoxTop" @click="gotoPersonnel">{{ spliceNameFun(nodeConfig, 18) }}</div>
</div>
</div>
</div>
<div class="branch-wrap">
<div class="branch-box-wrap">
<div class="branch-box">
<div class="col-box" v-for="(item, index) in nodeConfig.children" :key="index">
<div class="condition-node">
<div class="condition-node-box">
<div class="auto-judge">
<div v-if="item.laneLevel >= 2 && item.laneLevel <= 6 && item.level !== 'building_chief'">
<div @click="gotoPersonnel" class="wgdzb" :title="getAllName(item)">{{ spliceNameFun(item, 18) }}</div>
</div>
<div v-if="item.level === 'building_chief'">
<div @click="gotoPersonnel" class="lydxz" :title="getAllName(item)">
{{ spliceNameFun(item, 18) }}
</div>
</div>
<div v-if="item.level === 'unit_chief'">
<div @click="gotoPersonnel" class="dyzxh" :title="item.name">
{{ spliceNameFun(item, 3) }}
</div>
</div>
</div>
</div>
</div>
<nodeWrapGrid v-if="item.children" :nodeConfig.sync="item"></nodeWrapGrid>
<template v-if="index == 0">
<div class="top-left-cover-line"></div>
</template>
<template v-if="index == nodeConfig.children.length - 1">
<div class="top-right-cover-line"></div>
</template>
</div>
</div>
</div>
</div>
<nodeWrapGrid v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode"></nodeWrapGrid>
</div>
</template>
<script>
export default {
props: ["nodeConfig"],
data() {
return {
homeTypeArr: [],
};
},
mounted() {},
computed: {},
watch: {},
methods: {
getAllName(item) {
return item.organizationName + item.name;
},
spliceNameFun(row, num) {
let allName = row.name ? row.name : "";
if (num === 18) {
allName = row.organizationName + row.name;
console.log(typeof allName);
}
if (allName.length > num) {
return allName.substring(0, num) + "...";
}
return allName;
},
gotoPersonnel() {
this.$router.push("/organizational/orgPersonnel");
},
},
};
</script>
<style scoped lang="scss">
@mixin spanLevel {
font-size: 14px;
color: #fff;
word-break: break-all;
}
@mixin normalLevel {
display: flex;
align-items: center;
justify-content: space-around;
}
.node-box-after {
.nodeBoxTop {
font-size: 14px;
cursor: pointer;
position: relative;
color: #fff;
display: inline-block;
width: 168px;
height: 164px;
padding-top: 10px;
text-align: center;
background-image: url(~@/assets/images/home/firstLevel.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -7px;
// left: -16px;
// width: 168px;
// height: 164px;
// background-image: url(~@/assets/images/home/firstLevel.png);
// background-size: 100%;
// }
}
}
.auto-judge {
.wgdzb {
@include spanLevel;
width: 132px;
height: 96px;
text-align: center;
padding-top: 5px;
background-image: url(~@/assets/images/home/zbbg.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -7px;
// left: 0;
// width: 132px;
// height: 96px;
// background-image: url(~@/assets/images/home/zbbg.png);
// background-size: 100%;
// }
}
.lydxz {
@include spanLevel;
@include normalLevel;
width: 216px;
height: 50px;
padding-top: 5px;
background-image: url(~@/assets/images/home/lydxzTree.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -2px;
// left: -40px;
// width: 216px;
// height: 50px;
// background-image: url(~@/assets/images/home/lydxzTree.png);
// background-size: 100%;
// }
}
.dyzxh {
@include spanLevel;
@include normalLevel;
height: 118px;
width: 30px;
writing-mode: tb-rl;
margin-top: -12px;
background-image: url(~@/assets/images/home/dyzxhTree.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -19px;
// left: -8px;
// width: 30px;
// height: 118px;
// background-image: url(~@/assets/images/home/dyzxhTree.png);
// background-size: 100%;
// }
}
.lxjt {
@include spanLevel;
display: flex;
align-items: center;
justify-content: space-around;
height: 118px;
width: 30px;
writing-mode: tb-rl;
margin-top: -12px;
background-image: url(~@/assets/images/home/dyzxhTree.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -19px;
// left: -8px;
// width: 30px;
// height: 118px;
// }
}
}
</style>

237
src/components/JwTree/addNode.vue
View File

@ -0,0 +1,237 @@
<template>
<div class="add-node-btn-box">
<div class="add-node-btn">
<el-popover placement="right-start" v-model="visible">
<div class="add-node-popover-body">
<a class="add-node-popover-item approver" @click="addType(1)">
<div class="item-wrapper">
<span class="iconfont"></span>
</div>
<p>审批人</p>
</a>
<a class="add-node-popover-item notifier" @click="addType(2)">
<div class="item-wrapper">
<span class="iconfont"></span>
</div>
<p>抄送人</p>
</a>
<a class="add-node-popover-item condition" @click="addType(4)">
<div class="item-wrapper">
<span class="iconfont"></span>
</div>
<p>条件分支</p>
</a>
</div>
<!-- <button class="btn" type="button" slot="reference">
<span class="iconfont"></span>
</button> -->
</el-popover>
</div>
</div>
</template>
<script>
export default {
props: ["childNodeP"],
data() {
return {
visible: false,
};
},
methods: {
addType(type) {
this.visible = false;
if (type != 4) {
var data;
if (type == 1) {
data = {
nodeName: "审核人",
error: true,
type: 1,
settype: 1,
selectMode: 0,
selectRange: 0,
directorLevel: 1,
examineMode: 1,
noHanderAction: 1,
examineEndDirectorLevel: 0,
childNode: this.childNodeP,
nodeUserList: [],
};
} else if (type == 2) {
data = {
nodeName: "抄送人",
type: 2,
ccSelfSelectFlag: 1,
childNode: this.childNodeP,
nodeUserList: [],
};
}
this.$emit("update:childNodeP", data);
} else {
this.$emit("update:childNodeP", {
nodeName: "路由",
type: 4,
childNode: null,
conditionNodes: [
{
nodeName: "条件1",
error: true,
type: 3,
priorityLevel: 1,
conditionList: [],
nodeUserList: [],
childNode: this.childNodeP,
},
{
nodeName: "条件2",
type: 3,
priorityLevel: 2,
conditionList: [],
nodeUserList: [],
childNode: null,
},
],
});
}
},
},
};
</script>
<style scoped lang="scss">
.add-node-btn-box {
width: 240px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 1px;
height: 100%;
background-color: #2f87ff;
}
.add-node-btn {
user-select: none;
width: 240px;
padding: 20px 0 32px;
display: flex;
-webkit-box-pack: center;
justify-content: center;
flex-shrink: 0;
-webkit-box-flex: 1;
flex-grow: 1;
.btn {
outline: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
width: 30px;
height: 30px;
background: #3296fa;
border-radius: 50%;
position: relative;
border: none;
line-height: 30px;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
.iconfont {
color: #fff;
font-size: 16px;
}
&:hover {
transform: scale(1.3);
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
}
&:active {
transform: none;
background: #1e83e9;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
}
}
}
</style>
<style lang="scss">
.add-node-popover-body {
display: flex;
.add-node-popover-item {
margin-right: 10px;
cursor: pointer;
text-align: center;
flex: 1;
color: #191f25 !important;
.item-wrapper {
user-select: none;
display: inline-block;
width: 80px;
height: 80px;
margin-bottom: 5px;
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 50%;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
.iconfont {
font-size: 35px;
line-height: 80px;
}
}
&.approver {
.item-wrapper {
color: #ff943e;
}
}
&.notifier {
.item-wrapper {
color: #3296fa;
}
}
&.condition {
.item-wrapper {
color: #15bc83;
}
}
&:hover {
.item-wrapper {
background: #3296fa;
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4);
}
.iconfont {
color: #fff;
}
}
&:active {
.item-wrapper {
box-shadow: none;
background: #eaeaea;
}
.iconfont {
color: inherit;
}
}
}
}
</style>

201
src/components/JwTree/nodeWrap.vue
View File

@ -0,0 +1,201 @@
<template>
<div>
<div class="node-wrap" v-if="nodeConfig.laneLevel === 1">
<div class="node-wrap-box">
<div class="node-box-after">
<div class="nodeBoxTop" @click="gotoPersonnel">{{ spliceNameFun(nodeConfig, 18) }}</div>
</div>
</div>
</div>
<div class="branch-wrap">
<div class="branch-box-wrap">
<div class="branch-box">
<div class="col-box" v-for="(item, index) in nodeConfig.children" :key="index">
<div class="condition-node">
<div class="condition-node-box">
<div class="auto-judge">
<div v-if="item.laneLevel >= 2 && item.laneLevel <= 6 && item.level !== 'building_chief'">
<div @click="gotoPersonnel" class="wgdzb" :title="getAllName(item)">{{ spliceNameFun(item, 18) }}</div>
</div>
<div v-if="item.level === 'building_chief'">
<div @click="gotoPersonnel" class="lydxz" :title="getAllName(item)">
{{ spliceNameFun(item, 18) }}
</div>
</div>
<div v-if="item.level === 'unit_chief' || item.level === 'public_welfare_post'">
<div @click="gotoPersonnel" class="dyzxh" :title="item.name">
{{ spliceNameFun(item, 3) }}
</div>
</div>
</div>
</div>
</div>
<nodeWrapJw v-if="item.children" :nodeConfig.sync="item"></nodeWrapJw>
<template v-if="index == 0">
<div class="top-left-cover-line"></div>
</template>
<template v-if="index == nodeConfig.children.length - 1">
<div class="top-right-cover-line"></div>
</template>
</div>
</div>
</div>
</div>
<nodeWrapJw v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode"></nodeWrapJw>
</div>
</template>
<script>
export default {
props: ["nodeConfig"],
data() {
return {
homeTypeArr: [],
};
},
mounted() {},
computed: {},
watch: {},
methods: {
getAllName(item) {
return item.organizationName + item.name;
},
spliceNameFun(row, num) {
let allName = row.name ? row.name : "";
if (num === 18) {
allName = row.organizationName + row.name;
}
if (allName.length > num) {
return allName.substring(0, num) + "...";
}
return allName;
},
gotoPersonnel() {
this.$router.push("/organizational/orgPersonnel");
},
},
};
</script>
<style scoped lang="scss">
@mixin spanLevel {
font-size: 14px;
color: #fff;
word-break: break-all;
}
@mixin normalLevel {
display: flex;
align-items: center;
justify-content: space-around;
}
.node-box-after {
.nodeBoxTop {
font-size: 14px;
cursor: pointer;
position: relative;
color: #fff;
display: inline-block;
width: 168px;
height: 164px;
padding-top: 10px;
text-align: center;
background-image: url(~@/assets/images/home/firstLevel.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -7px;
// left: -16px;
// width: 168px;
// height: 164px;
// background-image: url(~@/assets/images/home/firstLevel.png);
// background-size: 100%;
// }
}
}
.auto-judge {
.wgdzb {
@include spanLevel;
width: 132px;
height: 96px;
text-align: center;
padding-top: 5px;
background-image: url(~@/assets/images/home/zbbg.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -7px;
// left: 0;
// width: 132px;
// height: 96px;
// background-image: url(~@/assets/images/home/zbbg.png);
// background-size: 100%;
// }
}
.lydxz {
@include spanLevel;
@include normalLevel;
width: 216px;
height: 50px;
padding-top: 5px;
background-image: url(~@/assets/images/home/lydxzTree.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -2px;
// left: -40px;
// width: 216px;
// height: 50px;
// background-image: url(~@/assets/images/home/lydxzTree.png);
// background-size: 100%;
// }
}
.dyzxh {
@include spanLevel;
@include normalLevel;
height: 118px;
width: 30px;
writing-mode: tb-rl;
margin-top: -12px;
background-image: url(~@/assets/images/home/dyzxhTree.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -19px;
// left: -8px;
// width: 30px;
// height: 118px;
// background-image: url(~@/assets/images/home/dyzxhTree.png);
// background-size: 100%;
// }
}
.lxjt {
@include spanLevel;
display: flex;
align-items: center;
justify-content: space-around;
height: 118px;
width: 30px;
writing-mode: tb-rl;
margin-top: -12px;
background-image: url(~@/assets/images/home/dyzxhTree.png);
background-size: 100%;
// &::after {
// position: absolute;
// content: "";
// display: block;
// top: -19px;
// left: -8px;
// width: 30px;
// height: 118px;
// }
}
}
</style>

8
src/components/Tree/nodeWrap.vue
View File

@ -83,18 +83,12 @@ export default {
computed: {},
watch: {},
methods: {
getIncludes(name) {
if (name.includes("街道党工委") || name.includes("街道党总支")) {
return true;
}
},
getAllName(item) {
return item.partyOrgName + item.principalName;
},
spliceNameFun(row, num) {
let allName = row.principalName;
let allName = row.principalName ? row.principalNam : "";
if (num === 18) {
allName = row.partyOrgName + row.principalName;
}

2
src/js/store/modules/chooseArea.js
View File

@ -1,5 +1,5 @@
const state = {
chooseName: "金湖路社区",
chooseName: "",
};
const mutations = {

10
src/main.js
View File

@ -35,10 +35,16 @@ import util from "@js/util";
import Moment from "moment";
import getQueryPara from "dai-js/modules/getQueryPara";
import NodeWrap from "@/components/Tree/nodeWrap.vue";
import AddNode from "@/components/Tree/addNode.vue";
// import AddNode from "@/components/Tree/addNode.vue";
import NodeWrapJw from "@/components/JwTree/nodeWrap.vue";
import NodeWrapGrid from "@/components/GridTree/nodeWrap.vue";
// import AddNodeJw from "@/components/JwTree/addNode.vue";
//按钮
Vue.component("nodeWrap", NodeWrap);
Vue.component("addNode", AddNode);
// Vue.component("addNode", AddNode);
Vue.component("nodeWrapJw", NodeWrapJw);
Vue.component("nodeWrapGrid", NodeWrapGrid);
// Vue.component("addNodeJw", AddNodeJw);
// 兼容token传参登录
if (getQueryPara("token")) {

39
src/views/dataBoard/organizational/dangTree/index.vue
View File

@ -26,25 +26,7 @@ export default {
return {
loading: false,
levelArr: [],
navList: [
{
name: "党委组织架构",
key: "1",
ifActive: true,
},
{
name: "居委组织架构",
key: "2",
ifActive: false,
},
{
name: "网格架构",
key: "3",
ifActive: false,
},
],
nowVal: 100,
nodeConfig: {},
};
},
@ -55,31 +37,34 @@ export default {
},
computed: {},
mounted() {
console.log(this.$store.state.chooseArea.chooseName);
// console.log(this.$store.state.chooseArea.chooseName);
this.getTreeData();
},
methods: {
//获取背景层级
getDataPLevel(item) {
let arr = [...this.levelArr];
arr.push(item.partyOrgLevel);
this.levelArr = [...arr];
if (item.children) {
this.getDataPLevel(item.children[0]);
getDataPLevel(data) {
for (let i = 0; i < data.length; i++) {
if (data[i].children) {
this.levelArr.push(data[i].partyOrgLevel);
this.getDataPLevel(data[i].children);
} else {
this.levelArr.push(data[i].partyOrgLevel);
}
}
this.levelArr = new Set(this.levelArr);
},
//获取树状结构
getTreeData() {
this.loading = true;
this.$http
.get("/actual/base/organizational/structure/partyCommitteeOrg")
.get(`/actual/base/organizational/structure/partyCommitteeOrg?agencyId=${this.$store.state.chooseArea.chooseName}`)
.then((res) => {
const {
data: { code, data },
} = res;
if (code === 0) {
this.nodeConfig = data[0];
this.getDataPLevel(data[0]);
this.getDataPLevel(data);
this.loading = false;
}
})

473
src/views/dataBoard/organizational/gridTree/index.vue
View File

@ -11,7 +11,7 @@
</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>
<nodeWrapGrid :nodeConfig.sync="nodeConfig"></nodeWrapGrid>
</div>
</el-col>
</el-row>
@ -25,465 +25,40 @@ export default {
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",
},
],
},
],
},
],
levelArr: [],
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: "谢苗苗",
// },
// ],
// },
// ],
// },
// ],
},
nodeConfig: {},
};
},
computed: {},
mounted() {
// this.getTreeData();
this.getTreeData();
},
methods: {
//获取背景层级
getDataPLevel(item) {
let arr = [...this.levelArr];
arr.push(item.partyOrgLevel);
this.levelArr = [...arr];
if (item.children) {
this.getDataPLevel(item.children[0]);
getDataPLevel(data) {
for (let i = 0; i < data.length; i++) {
if (data[i].children) {
this.levelArr.push(data[i].level);
this.getDataPLevel(data[i].children);
} else {
this.levelArr.push(data[i].level);
}
}
this.levelArr = new Set(this.levelArr);
},
//获取树状结构
getTreeData() {
this.loading = true;
this.$http
.get("/actual/base/organizational/structure/partyCommitteeOrg")
.get(`/gov/org/organizational/neighborhood/getGridCommitteeOrgTreeList?agencyId=${this.$store.state.chooseArea.chooseName}`)
.then((res) => {
const {
data: { code, data },
} = res;
if (code === 0) {
this.nodeConfig = data[0];
this.getDataPLevel(data[0]);
this.getDataPLevel(data);
this.loading = false;
}
})
@ -494,16 +69,14 @@ export default {
getTitleNameMapFun(i) {
let titleNameMap = new Map([
[1, "省委"],
[2, "市委"],
[3, "区委"],
[4, "党工委"],
[5, "党委"],
[6, "党总支"],
[7, "党支部"],
[8, "楼院党小组"],
[9, "党员中心户"],
[10, "联系家庭"],
["province", "省委"],
["city", "市委"],
["district", "区委"],
["street", "乡(镇、街道)"],
["community", "社区"],
["grid_manager", "网格"],
["building_chief", "楼院"],
["unit_chief", "微网格"],
]);
return titleNameMap.get(i);
},

474
src/views/dataBoard/organizational/jwTree/index.vue
View File

@ -11,7 +11,7 @@
</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>
<nodeWrapJw :nodeConfig.sync="nodeConfig"></nodeWrapJw>
</div>
</el-col>
</el-row>
@ -25,465 +25,40 @@ export default {
data() {
return {
loading: false,
levelArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
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",
},
],
},
],
},
],
levelArr: [],
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: "谢苗苗",
// },
// ],
// },
// ],
// },
// ],
},
nodeConfig: {},
};
},
computed: {},
mounted() {
// this.getTreeData();
this.getTreeData();
},
methods: {
//获取背景层级
getDataPLevel(item) {
let arr = [...this.levelArr];
arr.push(item.partyOrgLevel);
this.levelArr = [...arr];
if (item.children) {
this.getDataPLevel(item.children[0]);
getDataPLevel(data) {
for (let i = 0; i < data.length; i++) {
if (data[i].children) {
this.levelArr.push(data[i].level);
this.getDataPLevel(data[i].children);
} else {
this.levelArr.push(data[i].level);
}
}
this.levelArr = new Set(this.levelArr);
},
//获取树状结构
getTreeData() {
this.loading = true;
this.$http
.get("/actual/base/organizational/structure/partyCommitteeOrg")
.get(`/gov/org/organizational/neighborhood/getNeighborhoodCommitteeOrgTreeList?agencyId=${this.$store.state.chooseArea.chooseName}`)
.then((res) => {
const {
data: { code, data },
} = res;
if (code === 0) {
this.nodeConfig = data[0];
this.getDataPLevel(data[0]);
this.getDataPLevel(data);
this.loading = false;
}
})
@ -494,16 +69,15 @@ export default {
getTitleNameMapFun(i) {
let titleNameMap = new Map([
[1, "省委"],
[2, "市委"],
[3, "区委"],
[4, "党工委"],
[5, "党委"],
[6, "党总支"],
[7, "党支部"],
[8, "楼院党小组"],
[9, "党员中心户"],
[10, "联系家庭"],
["province", "省委"],
["city", "市委"],
["district", "区委"],
["street", "乡(镇、街道)"],
["community", "社区"],
["grid_manager", "网格长"],
["building_chief", "楼组长"],
["unit_chief", "单元长"],
["public_welfare_post", "志愿者"],
]);
return titleNameMap.get(i);
},

Write Preview
Loading…
Cancel
Save