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> |
||||
@ -1,139 +1,138 @@ |
|||||
<template> |
<template> |
||||
<fixed1920 class="g-fx" id="g-scT"> |
<fixed1920 class="g-fx" id="g-scT"> |
||||
<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="[ |
<div |
||||
'g-pg', |
v-loading.fullscreen.lock="loading" |
||||
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
:element-loading-text="$t('loading')" |
||||
{ |
:class="[ |
||||
'z-sidebar--noside': true, |
'g-pg', |
||||
}, |
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
||||
{ 'z-iframe': $store.state.inIframe }, |
{ |
||||
]"> |
'z-sidebar--noside': true, |
||||
<template v-if="!loading"> |
}, |
||||
<img class="i-corner z-left-top" src="~@/assets/images/shuju/main/corner-left-top.png" /> |
{ 'z-iframe': $store.state.inIframe }, |
||||
<img class="i-corner z-right-top" src="~@/assets/images/shuju/main/corner-right-top.png" /> |
]"> |
||||
|
<template v-if="!loading"> |
||||
|
<!-- <img class="i-corner z-left-top" src="~@/assets/images/shuju/main/corner-left-top.png" /> --> |
||||
|
<!--<img class="i-corner z-right-top" src="~@/assets/images/shuju/main/corner-right-top.png" /> |
||||
<img class="i-corner z-right-bottom" src="~@/assets/images/shuju/main/corner-right-bottom.png" /> |
<img class="i-corner z-right-bottom" src="~@/assets/images/shuju/main/corner-right-bottom.png" /> |
||||
<img class="i-corner z-left-bottom" src="~@/assets/images/shuju/main/corner-left-bottom.png" /> |
<img class="i-corner z-left-bottom" src="~@/assets/images/shuju/main/corner-left-bottom.png" /> --> |
||||
<main-navbar ref="ref_navbar" v-if="!$store.state.inIframe" /> |
<main-navbar ref="ref_navbar" v-if="!$store.state.inIframe" /> |
||||
<div class="g-cnt" :style="{ |
<div |
||||
minHeight: $store.state.fixed1920.height - 100 + 'px', |
class="g-cnt" |
||||
}"> |
:style="{ |
||||
<main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" /> |
minHeight: $store.state.fixed1920.height - 100 + 'px', |
||||
</div> |
}"> |
||||
</template> |
<main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" /> |
||||
</div> |
</div> |
||||
</fixed1920> |
</template> |
||||
|
</div> |
||||
|
</fixed1920> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import MainNavbar from "./main-navbar"; |
import MainNavbar from "./main-navbar"; |
||||
import MainContent from "./main-content"; |
import MainContent from "./main-content"; |
||||
import debounce from "lodash/debounce"; |
import debounce from "lodash/debounce"; |
||||
import { |
import { mapGetters } from "vuex"; |
||||
mapGetters |
import nextTick from "dai-js/tools/nextTick"; |
||||
} from "vuex"; |
import { requestPost } from "@/js/dai/request"; |
||||
import nextTick from "dai-js/tools/nextTick"; |
import fixed1920 from "@/views/components/fixed1920.vue"; |
||||
import { |
export default { |
||||
requestPost |
provide() { |
||||
} from "@/js/dai/request"; |
return { |
||||
import fixed1920 from "@/views/components/fixed1920.vue"; |
// 刷新 |
||||
export default { |
refresh() { |
||||
provide() { |
this.$store.state.contentIsNeedRefresh = true; |
||||
return { |
this.$nextTick(() => { |
||||
// 刷新 |
this.$store.state.contentIsNeedRefresh = false; |
||||
refresh() { |
}); |
||||
this.$store.state.contentIsNeedRefresh = true; |
}, |
||||
this.$nextTick(() => { |
}; |
||||
this.$store.state.contentIsNeedRefresh = false; |
}, |
||||
}); |
data() { |
||||
}, |
return { |
||||
}; |
loading: true, |
||||
}, |
userType: localStorage.getItem("userType"), |
||||
data() { |
}; |
||||
return { |
}, |
||||
loading: true, |
components: { |
||||
userType: localStorage.getItem("userType"), |
MainNavbar, |
||||
}; |
MainContent, |
||||
}, |
fixed1920, |
||||
components: { |
}, |
||||
MainNavbar, |
watch: { |
||||
MainContent, |
$route: "routeHandle", |
||||
fixed1920, |
}, |
||||
}, |
async created() { |
||||
watch: { |
this.windowResizeHandle(); |
||||
$route: "routeHandle", |
this.routeHandle(this.$route); |
||||
}, |
Promise.all([this.getWorkUserInfo()]).then(() => { |
||||
async created() { |
this.loading = false; |
||||
this.windowResizeHandle(); |
}); |
||||
this.routeHandle(this.$route); |
}, |
||||
Promise.all([this.getWorkUserInfo()]).then(() => { |
computed: {}, |
||||
this.loading = false; |
methods: { |
||||
}); |
changeCustomerName(customerName) { |
||||
}, |
this.$refs["ref_navbar"].changeCustomerName(customerName); |
||||
computed: {}, |
}, |
||||
methods: { |
// 窗口改变大小 |
||||
changeCustomerName(customerName) { |
windowResizeHandle() { |
||||
this.$refs["ref_navbar"].changeCustomerName(customerName); |
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
||||
}, |
window.addEventListener( |
||||
// 窗口改变大小 |
"resize", |
||||
windowResizeHandle() { |
debounce(() => { |
||||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
||||
window.addEventListener("resize", debounce(() => { |
}, 150) |
||||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
); |
||||
}, 150)); |
}, |
||||
}, |
// 路由, 监听 |
||||
// 路由, 监听 |
routeHandle(route) { |
||||
routeHandle(route) { |
if (!route.meta.isTab) { |
||||
if (!route.meta.isTab) { |
this.$store.state.mainShuju.activeName = ""; |
||||
this.$store.state.mainShuju.activeName = ""; |
this.$store.state.mainShuju.contentTabsActiveName = ""; |
||||
this.$store.state.mainShuju.contentTabsActiveName = ""; |
return false; |
||||
return false; |
} |
||||
} |
var tab = this.$store.state.contentTabs.filter((item) => item.name === route.name)[0]; |
||||
var tab = this.$store.state.contentTabs.filter( |
if (!tab) { |
||||
(item) => item.name === route.name)[0]; |
tab = { |
||||
if (!tab) { |
...window.SITE_CONFIG["contentTabDefault"], |
||||
tab = { |
...route.meta, |
||||
...window.SITE_CONFIG["contentTabDefault"], |
name: route.name, |
||||
...route.meta, |
params: { |
||||
name: route.name, |
...route.params, |
||||
params: { |
}, |
||||
...route.params |
query: { |
||||
}, |
...route.query, |
||||
query: { |
}, |
||||
...route.query |
}; |
||||
}, |
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab); |
||||
}; |
} |
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab); |
this.$store.state.mainShuju.activeName = tab.menuId; |
||||
} |
this.$store.state.mainShuju.contentTabsActiveName = tab.name; |
||||
this.$store.state.mainShuju.activeName = tab.menuId; |
}, |
||||
this.$store.state.mainShuju.contentTabsActiveName = tab.name; |
// 获取当前管理员信息 |
||||
}, |
async getWorkUserInfo() { |
||||
// 获取当前管理员信息 |
const url = "/epmetuser/customerstaff/staffbasicinfo"; |
||||
async getWorkUserInfo() { |
let params = {}; |
||||
const url = "/epmetuser/customerstaff/staffbasicinfo"; |
const { data, code, msg } = await requestPost(url, params); |
||||
let params = {}; |
if (code === 0) { |
||||
const { |
this.$store.state.user = { |
||||
data, |
...data, |
||||
code, |
}; |
||||
msg |
console.log("user---hahha", this.$store.state.user); |
||||
} = await requestPost(url, params); |
localStorage.setItem("roleList", data.roleList); |
||||
if (code === 0) { |
localStorage.setItem("customerId", data.customerId); |
||||
this.$store.state.user = { |
localStorage.setItem("staffId", data.id); |
||||
...data |
localStorage.setItem("agencyId", data.agencyId); |
||||
}; |
localStorage.setItem("level", data.level); |
||||
console.log("user---hahha", this.$store.state.user); |
// if (!localStorage.getItem("customerName")) { |
||||
localStorage.setItem("roleList", data.roleList); |
// localStorage.setItem("customerName", data.agencyName || ""); |
||||
localStorage.setItem("customerId", data.customerId); |
// } |
||||
localStorage.setItem("staffId", data.id); |
localStorage.setItem("customerNameDataBoard", data.agencyName || ""); |
||||
localStorage.setItem("agencyId", data.agencyId); |
} else { |
||||
localStorage.setItem("level", data.level); |
this.$message.error(msg); |
||||
// if (!localStorage.getItem("customerName")) { |
} |
||||
// localStorage.setItem("customerName", data.agencyName || ""); |
}, |
||||
// } |
}, |
||||
localStorage.setItem("customerNameDataBoard", data.agencyName || ""); |
}; |
||||
} else { |
|
||||
this.$message.error(msg); |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
</script> |
||||
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
||||
|
|||||
Loading…
Reference in new issue