SongZhen
2 years ago
29 changed files with 2858 additions and 199 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 560 B |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 704 B |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 883 B |
|
After Width: | Height: | Size: 808 B |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 16 KiB |
@ -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> |
||||
@ -0,0 +1,196 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="node-wrap" v-if="nodeConfig.key === '1'"> |
||||
|
<div class="node-wrap-box"> |
||||
|
<div class="node-box-after"> |
||||
|
<span>{{ nodeConfig.name }}</span> |
||||
|
</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.title === '网格党支部'"> |
||||
|
<span class="wgdzb"> |
||||
|
{{ item.name }} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div v-if="item.title === '楼院党小组'"> |
||||
|
<span class="lydxz"> |
||||
|
{{ item.name }} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div v-if="item.title === '党员中心户'"> |
||||
|
<span class="dyzxh"> |
||||
|
{{ item.name }} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="lxjtWrap" v-if="item.title === '联系家庭'"> |
||||
|
<el-popover popper-class="popperClass" placement="right" trigger="click"> |
||||
|
<!-- <el-button>click 激活</el-button> --> |
||||
|
<div class="popperList"> |
||||
|
<div style="margin-bottom: 13px">家庭类别</div> |
||||
|
<div class="listMsg"> |
||||
|
<img src="@/assets/images/home/jr.png" alt="" /> |
||||
|
<span>退役军人</span> |
||||
|
</div> |
||||
|
<div class="listMsg"> |
||||
|
<img src="@/assets/images/home/cjr.png" alt="" /> |
||||
|
<span>残疾人</span> |
||||
|
</div> |
||||
|
<div class="listMsg"> |
||||
|
<img src="@/assets/images/home/kclr.png" alt="" /> |
||||
|
<span>空巢老人</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span slot="reference" class="lxjt"> |
||||
|
{{ item.name }} |
||||
|
<img src="@/assets/images/home/cjr.png" alt="" /> |
||||
|
</span> |
||||
|
</el-popover> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nodeWrap v-if="item.children" :nodeConfig.sync="item"></nodeWrap> |
||||
|
<template v-if="index == 0"> |
||||
|
<div class="top-left-cover-line"></div> |
||||
|
<!-- <div class="bottom-left-cover-line"></div> --> |
||||
|
</template> |
||||
|
<template v-if="index == nodeConfig.children.length - 1"> |
||||
|
<div class="top-right-cover-line"></div> |
||||
|
<!-- <div class="bottom-right-cover-line"></div> --> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <addNode :childNodeP.sync="nodeConfig.childNode"></addNode> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nodeWrap v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode"></nodeWrap> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
// import { mapState, mapMutations } from "vuex"; |
||||
|
export default { |
||||
|
props: ["nodeConfig"], |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
mounted() {}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.node-box-after { |
||||
|
span { |
||||
|
font-size: 14px; |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
width: 168px; |
||||
|
height: 164px; |
||||
|
&::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 { |
||||
|
font-size: 14px; |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
width: 132px; |
||||
|
height: 96px; |
||||
|
&::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 { |
||||
|
font-size: 14px; |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
width: 132px; |
||||
|
height: 50px; |
||||
|
&::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 { |
||||
|
font-size: 14px; |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
height: 118px; |
||||
|
width: 5px; |
||||
|
&::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 { |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
height: 118px; |
||||
|
img { |
||||
|
position: absolute; |
||||
|
bottom: 26px; |
||||
|
left: -2px; |
||||
|
} |
||||
|
&::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%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,119 @@ |
|||||
|
<template> |
||||
|
<div class="moreLevel"> |
||||
|
<div class="flexDiv" v-for="(item, index) in cardList" :key="item.key"> |
||||
|
<div class="overlay"> |
||||
|
<div class="item"> |
||||
|
<span>{{ item.name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<template v-if="index == 0"> |
||||
|
<div class="top-left-cover-line"></div> |
||||
|
</template> |
||||
|
<template v-if="index == cardList.length - 1"> |
||||
|
<div class="top-right-cover-line"></div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "tree", |
||||
|
props: { |
||||
|
cardList: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.moreLevel { |
||||
|
width: 100%; |
||||
|
max-height: 164px; |
||||
|
border-top: 1px solid #2f87ff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.flexDiv { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
.overlay { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.item { |
||||
|
position: relative; |
||||
|
// width: 132px; |
||||
|
height: 96px; |
||||
|
margin-top: 27px; |
||||
|
.top-left-cover-line { |
||||
|
position: absolute; |
||||
|
height: 8px; |
||||
|
width: 50%; |
||||
|
background-color: red; |
||||
|
top: -4px; |
||||
|
} |
||||
|
span { |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
width: 132px; |
||||
|
&::after { |
||||
|
position: absolute; |
||||
|
// z-index: -1; |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
top: -12px; |
||||
|
left: -5px; |
||||
|
width: 132px; |
||||
|
height: 96px; |
||||
|
background-image: url(~@/assets/images/home/zbbg.png); |
||||
|
background-size: 100%; |
||||
|
} |
||||
|
} |
||||
|
&::before { |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
top: -27px; |
||||
|
left: 60px; |
||||
|
width: 1px; |
||||
|
height: 15px; |
||||
|
background: #2f87ff; |
||||
|
} |
||||
|
&::after { |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
bottom: -30px; |
||||
|
left: 60px; |
||||
|
width: 1px; |
||||
|
height: 40px; |
||||
|
background: #2f87ff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.top-left-cover-line { |
||||
|
position: absolute; |
||||
|
top: -1px; |
||||
|
left: -6px; |
||||
|
width: 50%; |
||||
|
height: 1px; |
||||
|
background: #00143d; |
||||
|
} |
||||
|
.top-right-cover-line { |
||||
|
position: absolute; |
||||
|
top: -1px; |
||||
|
right: -7px; |
||||
|
width: 52%; |
||||
|
height: 1px; |
||||
|
background: #00143d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,559 @@ |
|||||
|
<template> |
||||
|
<div class="organWrap"> |
||||
|
<div class="top-nav"> |
||||
|
<div class="top-nav-list"> |
||||
|
<div v-for="item in navList" :key="item.key" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">{{ item.name }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div style="width: 100%; height: 100%；position: relative;"> |
||||
|
<div style="width: 100px; height: 100px; background-color: aqua; color: #fff;" v-drag>222</div> |
||||
|
</div> --> |
||||
|
<div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'"> |
||||
|
<div class="flowLevel"> |
||||
|
<div>社区党委</div> |
||||
|
</div> |
||||
|
<div class="flowLevel-2"><div>网格党支部</div></div> |
||||
|
<div class="flowLevel-3"><div>楼院党小组</div></div> |
||||
|
<div class="flowLevel-4"><div>党员中心户</div></div> |
||||
|
<div class="flowLevel-5"><div>联系家庭</div></div> |
||||
|
<el-row> |
||||
|
<el-col :span="4"> |
||||
|
<div class="contentList"></div> |
||||
|
</el-col> |
||||
|
<el-col :span="20"> |
||||
|
<div class="dingflow-design"> |
||||
|
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import Tree from "./components/tree.vue"; |
||||
|
export default { |
||||
|
name: "organizational", |
||||
|
// components: { |
||||
|
// Tree, |
||||
|
// }, |
||||
|
data() { |
||||
|
return { |
||||
|
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: { |
||||
|
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: {}, |
||||
|
methods: { |
||||
|
chooseNav(item) { |
||||
|
this.navList.forEach((d) => { |
||||
|
if (item.key === d.key) { |
||||
|
d.ifActive = true; |
||||
|
} else { |
||||
|
d.ifActive = false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
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"; |
||||
|
@mixin navListCommon { |
||||
|
width: 120px; |
||||
|
height: 36px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
margin-right: 4px; |
||||
|
text-align: center; |
||||
|
line-height: 36px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
@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%; |
||||
|
} |
||||
|
|
||||
|
.organWrap { |
||||
|
margin-top: 18px; |
||||
|
.top-nav { |
||||
|
.top-nav-list { |
||||
|
display: flex; |
||||
|
margin-left: 28px; |
||||
|
.top-nav-item { |
||||
|
@include navListCommon; |
||||
|
background-image: url("~@/assets/images/home/noChooseMain.png"); |
||||
|
color: #96b1ce; |
||||
|
} |
||||
|
.top-nav-itemAC { |
||||
|
@include navListCommon; |
||||
|
background-image: url("~@/assets/images/home/chooseMain.png"); |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.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; |
||||
|
// margin-bottom: 45px; |
||||
|
// background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%); |
||||
|
} |
||||
|
.flowLevel { |
||||
|
@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 { |
||||
|
@include flowLevwlCommon; |
||||
|
top: 184px; |
||||
|
height: 119px; |
||||
|
line-height: 119px; |
||||
|
div { |
||||
|
padding-left: 80px; |
||||
|
&::after { |
||||
|
@include flowLevelAfter; |
||||
|
top: 26px; |
||||
|
left: 15px; |
||||
|
width: 180px; |
||||
|
height: 60px; |
||||
|
background-image: url(~@/assets/images/home/dzb.png); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.flowLevel-3 { |
||||
|
@include flowLevwlCommon; |
||||
|
top: 328px; |
||||
|
height: 85px; |
||||
|
line-height: 85px; |
||||
|
div { |
||||
|
padding-left: 80px; |
||||
|
&::after { |
||||
|
@include flowLevelAfter; |
||||
|
top: 10px; |
||||
|
left: 15px; |
||||
|
width: 180px; |
||||
|
height: 60px; |
||||
|
background-image: url(~@/assets/images/home/lydxz.png); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.flowLevel-4 { |
||||
|
@include flowLevwlCommon; |
||||
|
top: 429px; |
||||
|
height: 135px; |
||||
|
line-height: 135px; |
||||
|
div { |
||||
|
padding-left: 80px; |
||||
|
&::after { |
||||
|
@include flowLevelAfter; |
||||
|
top: 35px; |
||||
|
left: 15px; |
||||
|
width: 180px; |
||||
|
height: 60px; |
||||
|
background-image: url(~@/assets/images/home/dyzxh.png); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.flowLevel-5 { |
||||
|
@include flowLevwlCommon; |
||||
|
top: 598px; |
||||
|
height: 135px; |
||||
|
line-height: 135px; |
||||
|
div { |
||||
|
padding-left: 80px; |
||||
|
&::after { |
||||
|
@include flowLevelAfter; |
||||
|
top: 35px; |
||||
|
left: 15px; |
||||
|
width: 180px; |
||||
|
height: 60px; |
||||
|
background-image: url(~@/assets/images/home/lxjt.png); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue