Before Width: | Height: | Size: 560 B |
Before Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 704 B |
Before Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 35 KiB |
Before Width: | Height: | Size: 6.9 KiB |
Before Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 35 KiB |
Before Width: | Height: | Size: 883 B |
Before Width: | Height: | Size: 808 B |
Before Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 35 KiB |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 107 KiB |
Before Width: | Height: | Size: 16 KiB |
@ -1,237 +0,0 @@ |
|||||
<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> |
|
@ -1,196 +0,0 @@ |
|||||
<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> |
|
@ -1,119 +0,0 @@ |
|||||
<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> |
|
@ -1,559 +0,0 @@ |
|||||
<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,138 +1,139 @@ |
|||||
<template> |
<template> |
||||
<fixed1920 class="g-fx" id="g-scT"> |
<fixed1920 class="g-fx" id="g-scT"> |
||||
<div |
<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="[ |
||||
v-loading.fullscreen.lock="loading" |
'g-pg', |
||||
:element-loading-text="$t('loading')" |
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
||||
:class="[ |
{ |
||||
'g-pg', |
'z-sidebar--noside': true, |
||||
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
}, |
||||
{ |
{ 'z-iframe': $store.state.inIframe }, |
||||
'z-sidebar--noside': true, |
]"> |
||||
}, |
<template v-if="!loading"> |
||||
{ 'z-iframe': $store.state.inIframe }, |
<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" /> |
||||
<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 |
<div class="g-cnt" :style="{ |
||||
class="g-cnt" |
minHeight: $store.state.fixed1920.height - 100 + 'px', |
||||
:style="{ |
}"> |
||||
minHeight: $store.state.fixed1920.height - 100 + 'px', |
<main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" /> |
||||
}"> |
</div> |
||||
<main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" /> |
</template> |
||||
</div> |
</div> |
||||
</template> |
</fixed1920> |
||||
</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 { mapGetters } from "vuex"; |
import { |
||||
import nextTick from "dai-js/tools/nextTick"; |
mapGetters |
||||
import { requestPost } from "@/js/dai/request"; |
} from "vuex"; |
||||
import fixed1920 from "@/views/components/fixed1920.vue"; |
import nextTick from "dai-js/tools/nextTick"; |
||||
export default { |
import { |
||||
provide() { |
requestPost |
||||
return { |
} from "@/js/dai/request"; |
||||
// 刷新 |
import fixed1920 from "@/views/components/fixed1920.vue"; |
||||
refresh() { |
export default { |
||||
this.$store.state.contentIsNeedRefresh = true; |
provide() { |
||||
this.$nextTick(() => { |
return { |
||||
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 { |
||||
components: { |
loading: true, |
||||
MainNavbar, |
userType: localStorage.getItem("userType"), |
||||
MainContent, |
}; |
||||
fixed1920, |
}, |
||||
}, |
components: { |
||||
watch: { |
MainNavbar, |
||||
$route: "routeHandle", |
MainContent, |
||||
}, |
fixed1920, |
||||
async created() { |
}, |
||||
this.windowResizeHandle(); |
watch: { |
||||
this.routeHandle(this.$route); |
$route: "routeHandle", |
||||
Promise.all([this.getWorkUserInfo()]).then(() => { |
}, |
||||
this.loading = false; |
async created() { |
||||
}); |
this.windowResizeHandle(); |
||||
}, |
this.routeHandle(this.$route); |
||||
computed: {}, |
Promise.all([this.getWorkUserInfo()]).then(() => { |
||||
methods: { |
this.loading = false; |
||||
changeCustomerName(customerName) { |
}); |
||||
this.$refs["ref_navbar"].changeCustomerName(customerName); |
}, |
||||
}, |
computed: {}, |
||||
// 窗口改变大小 |
methods: { |
||||
windowResizeHandle() { |
changeCustomerName(customerName) { |
||||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
this.$refs["ref_navbar"].changeCustomerName(customerName); |
||||
window.addEventListener( |
}, |
||||
"resize", |
// 窗口改变大小 |
||||
debounce(() => { |
windowResizeHandle() { |
||||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
||||
}, 150) |
window.addEventListener("resize", debounce(() => { |
||||
); |
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
||||
}, |
}, 150)); |
||||
// 路由, 监听 |
}, |
||||
routeHandle(route) { |
// 路由, 监听 |
||||
if (!route.meta.isTab) { |
routeHandle(route) { |
||||
this.$store.state.mainShuju.activeName = ""; |
if (!route.meta.isTab) { |
||||
this.$store.state.mainShuju.contentTabsActiveName = ""; |
this.$store.state.mainShuju.activeName = ""; |
||||
return false; |
this.$store.state.mainShuju.contentTabsActiveName = ""; |
||||
} |
return false; |
||||
var tab = this.$store.state.contentTabs.filter((item) => item.name === route.name)[0]; |
} |
||||
if (!tab) { |
var tab = this.$store.state.contentTabs.filter( |
||||
tab = { |
(item) => item.name === route.name)[0]; |
||||
...window.SITE_CONFIG["contentTabDefault"], |
if (!tab) { |
||||
...route.meta, |
tab = { |
||||
name: route.name, |
...window.SITE_CONFIG["contentTabDefault"], |
||||
params: { |
...route.meta, |
||||
...route.params, |
name: route.name, |
||||
}, |
params: { |
||||
query: { |
...route.params |
||||
...route.query, |
}, |
||||
}, |
query: { |
||||
}; |
...route.query |
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab); |
}, |
||||
} |
}; |
||||
this.$store.state.mainShuju.activeName = tab.menuId; |
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab); |
||||
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"; |
// 获取当前管理员信息 |
||||
let params = {}; |
async getWorkUserInfo() { |
||||
const { data, code, msg } = await requestPost(url, params); |
const url = "/epmetuser/customerstaff/staffbasicinfo"; |
||||
if (code === 0) { |
let params = {}; |
||||
this.$store.state.user = { |
const { |
||||
...data, |
data, |
||||
}; |
code, |
||||
console.log("user---hahha", this.$store.state.user); |
msg |
||||
localStorage.setItem("roleList", data.roleList); |
} = await requestPost(url, params); |
||||
localStorage.setItem("customerId", data.customerId); |
if (code === 0) { |
||||
localStorage.setItem("staffId", data.id); |
this.$store.state.user = { |
||||
localStorage.setItem("agencyId", data.agencyId); |
...data |
||||
localStorage.setItem("level", data.level); |
}; |
||||
// if (!localStorage.getItem("customerName")) { |
console.log("user---hahha", this.$store.state.user); |
||||
// localStorage.setItem("customerName", data.agencyName || ""); |
localStorage.setItem("roleList", data.roleList); |
||||
// } |
localStorage.setItem("customerId", data.customerId); |
||||
localStorage.setItem("customerNameDataBoard", data.agencyName || ""); |
localStorage.setItem("staffId", data.id); |
||||
} else { |
localStorage.setItem("agencyId", data.agencyId); |
||||
this.$message.error(msg); |
localStorage.setItem("level", data.level); |
||||
} |
// 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> |
||||
|