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