SongZhen
2 years ago
58 changed files with 1481 additions and 2865 deletions
File diff suppressed because it is too large
|
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 |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 789 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 660 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 736 B |
|
After Width: | Height: | Size: 675 B |
|
After Width: | Height: | Size: 714 B |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,525 @@ |
|||
@import '../../c/config'; |
|||
@import '../../c/function'; |
|||
@import '../c/common'; |
|||
|
|||
.g-row { |
|||
padding: 0 6px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.g-left { |
|||
width: 460px; |
|||
} |
|||
|
|||
.g-center { |
|||
position: relative; |
|||
width: 884px; |
|||
} |
|||
|
|||
.g-right { |
|||
width: 460px; |
|||
} |
|||
} |
|||
|
|||
.m-map { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 690px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
|
|||
.m-box { |
|||
width: 460px; |
|||
background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(46, 164, 255, 0) 100%); |
|||
} |
|||
|
|||
.m-rybox { |
|||
width: 884px; |
|||
} |
|||
|
|||
.m-subbox { |
|||
@include scrollBar; |
|||
height: 334px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.m-jdjs { |
|||
height: 318px; |
|||
padding: 0 16px; |
|||
|
|||
&-js { |
|||
margin: 20px 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
&-img { |
|||
width: 200px; |
|||
height: 140px; |
|||
background: #00ACF7; |
|||
border-radius: 6px; |
|||
overflow: hidden; |
|||
|
|||
img { |
|||
width: 200px; |
|||
height: 140px; |
|||
} |
|||
} |
|||
|
|||
&-txt { |
|||
width: 213px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 24px; |
|||
margin-left: 16px; |
|||
padding-top: 14px; |
|||
} |
|||
} |
|||
|
|||
&-bg { |
|||
width: 428px; |
|||
height: 104px; |
|||
padding: 16px; |
|||
background: linear-gradient(20deg, rgba(1, 94, 234, 0.3) 0%, rgba(16, 50, 103, 0.3) 100%); |
|||
|
|||
&-title { |
|||
display: flex; |
|||
|
|||
&-img { |
|||
img { |
|||
width: 18px; |
|||
height: 18px; |
|||
} |
|||
} |
|||
|
|||
&-txt { |
|||
margin-left: 9px; |
|||
width: 79px; |
|||
height: 18px; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
|
|||
&-txt { |
|||
margin-top: 14px; |
|||
width: 391px; |
|||
height: 39px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@mixin rounded-corners { |
|||
width: 76px; |
|||
height: 76px; |
|||
background-size: 76px 76px; |
|||
padding-top: 16px; |
|||
|
|||
&-icon { |
|||
width: 26px; |
|||
margin: 0 auto; |
|||
|
|||
img { |
|||
width: 26px; |
|||
height: 26px; |
|||
} |
|||
} |
|||
|
|||
&-txt { |
|||
text-align: center; |
|||
color: #ffffff; |
|||
height: 12px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
|
|||
.m-jdhx { |
|||
height: 556px; |
|||
padding: 20px 16px 0; |
|||
|
|||
&-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding-top: 20px; |
|||
} |
|||
|
|||
&-card { |
|||
width: 180px; |
|||
height: 120px; |
|||
padding: 16px; |
|||
background: linear-gradient(90deg, rgba(1, 94, 234, 0.3) 0%, rgba(16, 50, 103, 0.3) 100%); |
|||
|
|||
&-title { |
|||
display: flex; |
|||
|
|||
&-icon { |
|||
padding-top: 2px; |
|||
|
|||
img { |
|||
width: 10px; |
|||
height: 10px; |
|||
} |
|||
} |
|||
|
|||
&-txt { |
|||
margin-left: 8px; |
|||
height: 16px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 22px; |
|||
} |
|||
} |
|||
|
|||
&-content { |
|||
margin-top: 15px; |
|||
|
|||
&-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
line-height: 22px; |
|||
|
|||
&-lable { |
|||
color: #A3B9DA; |
|||
} |
|||
|
|||
&-value { |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-f { |
|||
background: linear-gradient(90deg, rgba(16, 50, 103, 0.3) 0%, rgba(1, 94, 234, 0.3) 100%); |
|||
} |
|||
|
|||
&-h { |
|||
height: 144px; |
|||
} |
|||
|
|||
&-center { |
|||
margin-top: 6px; |
|||
|
|||
&-line {} |
|||
|
|||
&-content { |
|||
margin: 0 auto; |
|||
width: 240px; |
|||
height: 224px; |
|||
background: url(../../../../assets/images/shuju/overview/jiedao-img.png); |
|||
background-position: center center; |
|||
background-repeat: no-repeat; |
|||
background-size: 234px 186px; |
|||
|
|||
&-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
&-jumin { |
|||
background: url(../../../../assets/images/shuju/overview/renkou-bg.png); |
|||
@include rounded-corners; |
|||
} |
|||
|
|||
&-fangwu { |
|||
background: url(../../../../assets/images/shuju/overview/fangwu-bg.png); |
|||
@include rounded-corners; |
|||
} |
|||
|
|||
&-manyi { |
|||
background: url(../../../../assets/images/shuju/overview/manyidu-bg.png); |
|||
@include rounded-corners; |
|||
} |
|||
|
|||
&-fengxian { |
|||
background: url(../../../../assets/images/shuju/overview/fengxian-bg.png); |
|||
@include rounded-corners; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.m-jdwgy { |
|||
height: 220px; |
|||
} |
|||
|
|||
.m-rfsjtj { |
|||
height: 166px; |
|||
width: 100%; |
|||
padding: 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
&-item { |
|||
width: 200px; |
|||
|
|||
&-des { |
|||
width: 100%; |
|||
height: 16px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
&-jian { |
|||
height: 36px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #A3B9DA; |
|||
|
|||
span { |
|||
margin-right: 8px; |
|||
height: 36px; |
|||
font-size: 36px; |
|||
font-family: DIN Alternate; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #FFB73C; |
|||
} |
|||
} |
|||
|
|||
&-ren { |
|||
height: 36px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #A3B9DA; |
|||
|
|||
span { |
|||
margin-right: 8px; |
|||
height: 36px; |
|||
font-size: 36px; |
|||
font-family: DIN Alternate; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #08EBAE; |
|||
} |
|||
} |
|||
|
|||
&-change { |
|||
margin-top: 16px; |
|||
display: flex; |
|||
height: 36px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #A3B9DA; |
|||
|
|||
&-today { |
|||
width: 36px; |
|||
height: 18px; |
|||
font-size: 12px; |
|||
line-height: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
background-image: url(../../../../assets/images/shuju/overview/jinri-bg.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 36px 18px; |
|||
} |
|||
|
|||
&-new { |
|||
margin-left: 6px; |
|||
|
|||
span { |
|||
margin-left: 6px; |
|||
height: 15px; |
|||
font-size: 18px; |
|||
font-family: DIN Alternate; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #00D6D9; |
|||
} |
|||
} |
|||
|
|||
&-update { |
|||
margin-left: 18px; |
|||
|
|||
span { |
|||
margin-left: 6px; |
|||
height: 15px; |
|||
font-size: 18px; |
|||
font-family: DIN Alternate; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #279AFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-per { |
|||
position: absolute; |
|||
z-index: 100; |
|||
top: 20px; |
|||
left: 0; |
|||
right: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
padding-left: 10px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
width: 120px; |
|||
|
|||
.item-info { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
line-height: 40px; |
|||
vertical-align: bottom; |
|||
|
|||
div { |
|||
margin-bottom: 6px; |
|||
|
|||
&:first-child { |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
|
|||
img { |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
width: 20px; |
|||
height: 20px; |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
b { |
|||
font-weight: 500; |
|||
font-size: 24px; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-sqrfph { |
|||
padding: 16px; |
|||
|
|||
.table { |
|||
.tr { |
|||
display: flex; |
|||
height: 40px; |
|||
|
|||
.th { |
|||
width: 110px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #A3B9DA; |
|||
} |
|||
|
|||
.th:nth-child(1) { |
|||
width: 65px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.td { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
width: 110px; |
|||
height: 14px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
// padding: 0 8px; |
|||
// overflow: hidden; |
|||
// white-space: nowrap; |
|||
// text-overflow: ellipsis; |
|||
} |
|||
|
|||
.tdbg1 { |
|||
height: 40px; |
|||
background: url(../../../../assets/images/shuju/overview/no1-bg.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 30px 12px; |
|||
background-position: center center; |
|||
} |
|||
|
|||
.tdbg2 { |
|||
height: 40px; |
|||
background: url(../../../../assets/images/shuju/overview/no2-bg.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 30px 12px; |
|||
background-position: center center; |
|||
} |
|||
|
|||
.tdbg3 { |
|||
height: 40px; |
|||
background: url(../../../../assets/images/shuju/overview/no3-bg.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 30px 12px; |
|||
background-position: center center; |
|||
} |
|||
|
|||
.td:nth-child(1) { |
|||
width: 65px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.tr:nth-child(even) { |
|||
background: rgba(14, 56, 115, 0.4); |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.date-span { |
|||
float: right; |
|||
width: 90px; |
|||
height: 24px; |
|||
|
|||
::v-deep .el-input--medium .el-input__inner { |
|||
height: 24px; |
|||
line-height: 24px; |
|||
background: #04224a; |
|||
border: 1px solid #125aaa; |
|||
border-radius: 12px; |
|||
width: 90px; |
|||
padding: 0px; |
|||
text-align: center; |
|||
color: #a0cdff; |
|||
} |
|||
|
|||
::v-deep .el-input--medium .el-input__icon { |
|||
display: none; |
|||
} |
|||
|
|||
::v-deep .el-date-editor.el-input, |
|||
.el-date-editor.el-input__inner { |
|||
width: 90px; |
|||
border: 0; |
|||
} |
|||
} |
|||
@ -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> |
|||
@ -0,0 +1,37 @@ |
|||
<template> |
|||
<div class="m-subbox m-jdjs"> |
|||
<div class="m-jdjs-js"> |
|||
<div class="m-jdjs-js-img"> |
|||
<img src="../linshi/jiedaotu.jpg" /> |
|||
</div> |
|||
<div class="m-jdjs-js-txt"> |
|||
XX街道，现有房屋4600间，自 住房屋3800间、出租房屋600、闲 |
|||
置房屋200，现有居民4000户、 8400 |
|||
</div> |
|||
</div> |
|||
<div class="m-jdjs-bg"> |
|||
<div class="m-jdjs-bg-title"> |
|||
<div class="m-jdjs-bg-title-img"> |
|||
<img src="../../../../assets/images/shuju/overview/zjbg-icon.png" /> |
|||
</div> |
|||
<div class="m-jdjs-bg-title-txt">总结报告</div> |
|||
</div> |
|||
<div class="m-jdjs-bg-txt"> |
|||
根据数据分析结果，建议重点关注租户、党员、保障房人员三类 |
|||
群体，开展相关的社区服务和活动。 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "jdjs", |
|||
data() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,162 @@ |
|||
<template> |
|||
<div class="m-subbox m-jdhx"> |
|||
<div class="m-jdhx-top"> |
|||
<div class="m-jdhx-card"> |
|||
<div class="m-jdhx-card-title"> |
|||
<div class="m-jdhx-card-title-icon"> |
|||
<img |
|||
src="../../../../assets/images/shuju/overview/jumin-icon.png" |
|||
/> |
|||
</div> |
|||
<div class="m-jdhx-card-title-txt">主要居民类型</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content"> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">老年人</div> |
|||
<div class="m-jdhx-card-content-item-value">21%</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">租户</div> |
|||
<div class="m-jdhx-card-content-item-value">17%</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">低保人员</div> |
|||
<div class="m-jdhx-card-content-item-value">9%</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-jdhx-card m-jdhx-f m-jdhx-h"> |
|||
<div class="m-jdhx-card-title"> |
|||
<div class="m-jdhx-card-title-icon"> |
|||
<img |
|||
src="../../../../assets/images/shuju/overview/fangwu-icon.png" |
|||
/> |
|||
</div> |
|||
<div class="m-jdhx-card-title-txt">房屋性质/用途</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content"> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">自助</div> |
|||
<div class="m-jdhx-card-content-item-value">60%</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">出租</div> |
|||
<div class="m-jdhx-card-content-item-value">18%</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">办公</div> |
|||
<div class="m-jdhx-card-content-item-value">10%</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">仓储</div> |
|||
<div class="m-jdhx-card-content-item-value">12%</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-jdhx-center"> |
|||
<div class="m-jdhx-center-line"></div> |
|||
<div class="m-jdhx-center-content"> |
|||
<div class="m-jdhx-center-content-item"> |
|||
<div class="m-jdhx-center-content-item-jumin"> |
|||
<div class="m-jdhx-center-content-item-jumin-icon"> |
|||
<img |
|||
src="../../../../assets/images/shuju/overview/renkou-icon.png" |
|||
/> |
|||
</div> |
|||
<div class="m-jdhx-center-content-item-jumin-txt">人口</div> |
|||
</div> |
|||
<div class="m-jdhx-center-content-item-fangwu"> |
|||
<div class="m-jdhx-center-content-item-fangwu-icon"> |
|||
<img |
|||
src="../../../../assets/images/shuju/overview/fangwu2-icon.png" |
|||
/> |
|||
</div> |
|||
<div class="m-jdhx-center-content-item-fangwu-txt">房屋</div> |
|||
</div> |
|||
</div> |
|||
<div style="margin-top: 79px" class="m-jdhx-center-content-item"> |
|||
<div class="m-jdhx-center-content-item-manyi"> |
|||
<div class="m-jdhx-center-content-item-manyi-icon"> |
|||
<img |
|||
src="../../../../assets/images/shuju/overview/manyidu-icon.png" |
|||
/> |
|||
</div> |
|||
<div class="m-jdhx-center-content-item-manyi-txt">满意度</div> |
|||
</div> |
|||
<div class="m-jdhx-center-content-item-fengxian"> |
|||
<div class="m-jdhx-center-content-item-fengxian-icon"> |
|||
<img |
|||
src="../../../../assets/images/shuju/overview/fengxianry-icon.png" |
|||
/> |
|||
</div> |
|||
<div class="m-jdhx-center-content-item-fengxian-txt">风险人员</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-jdhx-center-line"></div> |
|||
</div> |
|||
<div class="m-jdhx-top"> |
|||
<div class="m-jdhx-card"> |
|||
<div class="m-jdhx-card-title"> |
|||
<div class="m-jdhx-card-title-icon"> |
|||
<img |
|||
src="../../../../assets/images/shuju/overview/manyi-icon.png" |
|||
/> |
|||
</div> |
|||
<div class="m-jdhx-card-title-txt">主要不满意事项</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content"> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">楼院卫生</div> |
|||
<div class="m-jdhx-card-content-item-value">67%</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">医护人员态度</div> |
|||
<div class="m-jdhx-card-content-item-value">13%</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">基础教育便利</div> |
|||
<div class="m-jdhx-card-content-item-value">20%</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-jdhx-card m-jdhx-f"> |
|||
<div class="m-jdhx-card-title"> |
|||
<div class="m-jdhx-card-title-icon"> |
|||
<img |
|||
src="../../../../assets/images/shuju/overview/fengxian-icon.png" |
|||
/> |
|||
</div> |
|||
<div class="m-jdhx-card-title-txt">风险人员</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content"> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">12345</div> |
|||
<div class="m-jdhx-card-content-item-value">78</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">生意满意度</div> |
|||
<div class="m-jdhx-card-content-item-value">96</div> |
|||
</div> |
|||
<div class="m-jdhx-card-content-item"> |
|||
<div class="m-jdhx-card-content-item-lable">社区满意度自查</div> |
|||
<div class="m-jdhx-card-content-item-value">122</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jdtphx", |
|||
data() {}, |
|||
}; |
|||
</script> |
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,16 @@ |
|||
<template> |
|||
<div class="m-subbox m-jdwgy"></div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "jdwgy", |
|||
data() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
|
|||
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<div class="m-per"> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/lnr.png" />老年人 |
|||
</div> |
|||
<div> |
|||
<b></b> |
|||
% |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/qsn.png" />青少年 |
|||
</div> |
|||
<div> |
|||
<b></b> |
|||
% |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/zyz.png" />志愿者 |
|||
</div> |
|||
<div> |
|||
<b></b> |
|||
% |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/dy.png" />党员 |
|||
</div> |
|||
<div> |
|||
<b></b> |
|||
% |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img |
|||
src="~@/assets/images/shuju/renfang/index/per/syry.png" |
|||
/>失业人员 |
|||
</div> |
|||
<div> |
|||
<b></b> |
|||
% |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/ygxl.png" /> |
|||
月更新率 |
|||
</div> |
|||
<div> |
|||
<b></b> |
|||
% |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "map-top", |
|||
data() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,61 @@ |
|||
<template> |
|||
<div class="m-subbox m-rfsjtj"> |
|||
<div class="m-rfsjtj-item"> |
|||
<div class="m-rfsjtj-item-des">采集房屋数</div> |
|||
<div class="m-rfsjtj-item-jian"> |
|||
<span>{{ numFormat(2317) }}</span> |
|||
间 |
|||
</div> |
|||
<div class="m-rfsjtj-item-change"> |
|||
<div class="m-rfsjtj-item-change-today">今日</div> |
|||
<div class="m-rfsjtj-item-change-new">新增<span>31</span></div> |
|||
<div class="m-rfsjtj-item-change-update">更新<span>217</span></div> |
|||
</div> |
|||
</div> |
|||
<div class="m-rfsjtj-item"> |
|||
<div class="m-rfsjtj-item-des">采集人口数</div> |
|||
<div class="m-rfsjtj-item-ren"> |
|||
<span>{{ numFormat(6302) }}</span> |
|||
人 |
|||
</div> |
|||
<div class="m-rfsjtj-item-change"> |
|||
<div class="m-rfsjtj-item-change-today">今日</div> |
|||
<div class="m-rfsjtj-item-change-new">新增<span>24</span></div> |
|||
<div class="m-rfsjtj-item-change-update">更新<span>466</span></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "rfsjtj", |
|||
data() {}, |
|||
methods: { |
|||
numFormat(num) { |
|||
num = num.toString().split("."); // 分隔小数点 |
|||
var arr = num[0].split("").reverse(); // 转换成字符数组并且倒序排列 |
|||
var res = []; |
|||
for (var i = 0, len = arr.length; i < len; i++) { |
|||
if (i % 3 === 0 && i !== 0) { |
|||
res.push(","); // 添加分隔符 |
|||
} |
|||
res.push(arr[i]); |
|||
} |
|||
res.reverse(); // 再次倒序成为正确的顺序 |
|||
if (num[1]) { |
|||
// 如果有小数的话添加小数部分 |
|||
res = res.join("").concat("." + num[1]); |
|||
} else { |
|||
res = res.join(""); |
|||
} |
|||
return res; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,15 @@ |
|||
<template> |
|||
<div class="m-subbox"></div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "sq12345", |
|||
data() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<div class="m-subbox m-sqrfph"> |
|||
<div class="table"> |
|||
<div class="tr"> |
|||
<div class="th">排名</div> |
|||
<div class="th">社区</div> |
|||
<div class="th">房屋更新数</div> |
|||
<div class="th">人口更新数</div> |
|||
<div class="th">人房更新总数</div> |
|||
</div> |
|||
<div class="tr" v-for="item in pmList" :key="item.num"> |
|||
<div :class="item.num < 4 ? `td tdbg${item.num}` : 'td'"> |
|||
{{ item.num }} |
|||
</div> |
|||
<div class="td">{{ item.shequ }}</div> |
|||
<div class="td">{{ item.fwgxs }}</div> |
|||
<div class="td">{{ item.rkgxs }}</div> |
|||
<div class="td">{{ item.rfgxzs }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "sqrfph", |
|||
data() { |
|||
return { |
|||
value2: "2023-02", |
|||
pmList: [ |
|||
{ |
|||
num: "1", |
|||
shequ: "XX社区", |
|||
fwgxs: "350", |
|||
rkgxs: "1720", |
|||
rfgxzs: "2070", |
|||
}, |
|||
{ |
|||
num: "2", |
|||
shequ: "XX社区", |
|||
fwgxs: "350", |
|||
rkgxs: "1720", |
|||
rfgxzs: "2070", |
|||
}, |
|||
{ |
|||
num: "3", |
|||
shequ: "XX社区", |
|||
fwgxs: "350", |
|||
rkgxs: "1720", |
|||
rfgxzs: "2070", |
|||
}, |
|||
{ |
|||
num: "4", |
|||
shequ: "XX社区", |
|||
fwgxs: "350", |
|||
rkgxs: "1720", |
|||
rfgxzs: "2070", |
|||
}, |
|||
{ |
|||
num: "5", |
|||
shequ: "XX社区", |
|||
fwgxs: "350", |
|||
rkgxs: "1720", |
|||
rfgxzs: "2070", |
|||
}, |
|||
{ |
|||
num: "6", |
|||
shequ: "XX社区", |
|||
fwgxs: "350", |
|||
rkgxs: "1720", |
|||
rfgxzs: "2070", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
@ -1,25 +1,317 @@ |
|||
<template> |
|||
<div> |
|||
<cpt-bread @tap="clickBreadItem" v-if="breadList.length > 1" :bread-list="breadList" /> |
|||
<cpt-bread |
|||
@tap="clickBreadItem" |
|||
v-if="breadList.length > 1" |
|||
:bread-list="breadList" |
|||
/> |
|||
<div class="g-row"> |
|||
<div class="g-left"> |
|||
<div class="m-box"> |
|||
<Title text="街道介绍" /> |
|||
<Jdjs /> |
|||
</div> |
|||
|
|||
<div class="m-box"> |
|||
<Title text="街道图谱画像" /> |
|||
<Jdtphx /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="g-center"> |
|||
<div class="m-map"> |
|||
<map-top /> |
|||
<grid-map |
|||
ref="map" |
|||
@clickAgency="clickAgencyItem" |
|||
:srcGridData="orgData" |
|||
@clickDotBtn="handleClickDotBtn" |
|||
/> |
|||
</div> |
|||
<div class="m-box m-rybox"> |
|||
<Title text="XX街道网格员" /> |
|||
<jdwgy /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="g-right"> |
|||
<div class="m-box"> |
|||
<Title text="人房数据统计" /> |
|||
<rfsjtj /> |
|||
</div> |
|||
|
|||
<div class="m-box"> |
|||
<Title text="各社区人房数据更新排行"> |
|||
<span class="date-span"> |
|||
<el-date-picker |
|||
v-model="rfphDate" |
|||
format="yyyy-MM" |
|||
value-format="yyyy-MM" |
|||
@change="change" |
|||
type="month" |
|||
:clearable="false" |
|||
placeholder="选择月" |
|||
> |
|||
</el-date-picker> |
|||
</span> |
|||
</Title> |
|||
<sqrfph /> |
|||
</div> |
|||
<div class="m-box"> |
|||
<Title text="各社区12345投诉事件统计" /> |
|||
<sq12345 /> |
|||
</div> |
|||
</div> |
|||
|
|||
<cpt-loading v-show="false" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import gridMap from "@/views/dataBoard/cpts/map/index"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import cptLoading from "@/views/dataBoard/cpts/loading"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import Jdjs from "@/views/dataBoard/overview/components/jdjs.vue"; |
|||
import Jdtphx from "@/views/dataBoard/overview/components/jdtphx.vue"; |
|||
import mapTop from "@/views/dataBoard/overview/components/map-top.vue"; |
|||
import jdwgy from "@/views/dataBoard/overview/components/jdwgy.vue"; |
|||
import rfsjtj from "@/views/dataBoard/overview/components/rfsjtj.vue"; |
|||
import sqrfph from "@/views/dataBoard/overview/components/sqrfph.vue"; |
|||
import sq12345 from "@/views/dataBoard/overview/components/sq12345.vue"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
function iniGetPerInfo() { |
|||
return { |
|||
unemployed_ratio: "--", |
|||
crowd_ratio: "--", |
|||
volunteer_ratio: "--", |
|||
month_update_ratio: "--", |
|||
aged_ratio: "--", |
|||
teenagers_ratio: "--", |
|||
}; |
|||
} |
|||
|
|||
export default { |
|||
name: "renfang", |
|||
|
|||
components: { |
|||
gridMap, |
|||
cptLoading, |
|||
cptBread, |
|||
Title, |
|||
Jdjs, |
|||
Jdtphx, |
|||
mapTop, |
|||
jdwgy, |
|||
rfsjtj, |
|||
sqrfph, |
|||
sq12345, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [], |
|||
loading: false, |
|||
rfphDate: "2023-03", |
|||
orgData: { |
|||
children: [], |
|||
}, //当前组织对象 |
|||
orgId: "", |
|||
orgLevel: "", |
|||
breadList: [ |
|||
{ |
|||
orgId: "", |
|||
orgLevel: "", |
|||
meta: { title: "人房总览3" }, |
|||
}, |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
displayedHouseId: "", |
|||
}; |
|||
}, |
|||
components: { |
|||
cptBread, |
|||
|
|||
mounted() { |
|||
const queryOrgId = getQueryPara("orgId"); |
|||
const queryOrgLevel = getQueryPara("orgLevel"); |
|||
this.init(queryOrgId, queryOrgLevel); |
|||
}, |
|||
computed: {}, |
|||
|
|||
watch: {}, |
|||
|
|||
methods: { |
|||
clickBreadItem(item) {}, |
|||
async init(queryOrgId, queryOrgLevel) { |
|||
if (queryOrgId) { |
|||
this.orgId = queryOrgId; |
|||
this.orgLevel = queryOrgLevel || "agency"; |
|||
} else { |
|||
this.orgId = this.$store.state.user.agencyId; |
|||
this.orgLevel = "agency"; |
|||
} |
|||
|
|||
//加载组织数据 |
|||
this.loading = false; |
|||
// await this.loadOrgData(); |
|||
await this.getMapData(); |
|||
await this.getSubMapData(); |
|||
this.getResiCategoryData(); |
|||
this.getPerInfo(); |
|||
|
|||
this.loading = true; |
|||
}, |
|||
|
|||
handleClickDotBtn(type, info) { |
|||
console.log("handleClickDotBtn", type, info); |
|||
if (type == "watch-resi") { |
|||
this.displayedResiId = info.user_id; |
|||
} else if (type == "watch-house") { |
|||
this.displayedHouseId = info.house_id; |
|||
} |
|||
}, |
|||
|
|||
clickBreadItem({ item }) { |
|||
this.toBread(item); |
|||
}, |
|||
|
|||
clickAgencyItem(item) { |
|||
console.log(item); |
|||
this.toBread({ |
|||
orgId: item.id, |
|||
orgLevel: item.level, |
|||
meta: { title: item.name }, |
|||
}); |
|||
}, |
|||
|
|||
toBread(item) { |
|||
const { orgId } = item; |
|||
const { breadList } = this; |
|||
let index = breadList.findIndex((val) => val.orgId === orgId); |
|||
// return console.log(item, breadList, index); |
|||
if (index >= 0) { |
|||
this.breadList = breadList.slice(0, index + 1); |
|||
} else { |
|||
breadList.push(item); |
|||
this.breadList = breadList; |
|||
} |
|||
this.init(item.orgId, item.orgLevel); |
|||
}, |
|||
|
|||
// 点击搜索结果条目，在地图上显示点和详情弹窗 |
|||
handleClickSearchItem(item) { |
|||
console.log("handleClickSearchItem", item); |
|||
if (!item.longitude) { |
|||
return this.$message.error("请先设置坐标"); |
|||
} |
|||
this.$refs.map.setDotMarker(item, [ |
|||
parseFloat(item.longitude), |
|||
parseFloat(item.latitude), |
|||
]); |
|||
}, |
|||
|
|||
//获取地图上显示的组织数据 |
|||
async getMapData() { |
|||
console.log("=========================getMapData"); |
|||
const url = "org_map"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60810589, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
let info = data[0]; |
|||
this.orgData = { |
|||
...info, |
|||
id: info.org_id, |
|||
name: info.org_name, |
|||
latitude: parseFloat(info.latitude), |
|||
longitude: parseFloat(info.longitude), |
|||
coordinates: info.coordinates || "", |
|||
children: [], |
|||
}; |
|||
this.orgId = this.orgData.org_id; |
|||
this.orgLevel = this.orgData.level; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//获取地图上显示的组织数据 |
|||
async getSubMapData() { |
|||
console.log("=========================getSubMapData"); |
|||
const url = "sub_org_map"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 61831860, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
const { orgData } = this; |
|||
orgData.children = data.map((item) => { |
|||
return { |
|||
...item, |
|||
id: item.org_id, |
|||
name: item.org_name, |
|||
latitude: parseFloat(item.latitude), |
|||
longitude: parseFloat(item.longitude), |
|||
coordinates: item.coordinates || "", |
|||
}; |
|||
}); |
|||
this.orgData = { ...orgData }; |
|||
console.log( |
|||
"==========================getSubMapData:result", |
|||
this.orgData |
|||
); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async loadOrgData() { |
|||
const url = "/gov/org/agency/maporg"; |
|||
let params = { |
|||
orgId: this.orgId, |
|||
level: this.orgLevel, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.orgData = data; |
|||
this.orgId = this.orgId; |
|||
this.orgLevel = this.orgData.level; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handelClickRkfxPei(val) { |
|||
console.log(val); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"></style> |
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
|
|||
|
After Width: | Height: | Size: 48 KiB |
@ -1,138 +1,139 @@ |
|||
<template> |
|||
<fixed1920 class="g-fx" id="g-scT"> |
|||
<div |
|||
v-loading.fullscreen.lock="loading" |
|||
:element-loading-text="$t('loading')" |
|||
:class="[ |
|||
'g-pg', |
|||
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
|||
{ |
|||
'z-sidebar--noside': true, |
|||
}, |
|||
{ 'z-iframe': $store.state.inIframe }, |
|||
]"> |
|||
<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" /> |
|||
<fixed1920 class="g-fx" id="g-scT"> |
|||
<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="[ |
|||
'g-pg', |
|||
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
|||
{ |
|||
'z-sidebar--noside': true, |
|||
}, |
|||
{ 'z-iframe': $store.state.inIframe }, |
|||
]"> |
|||
<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-left-bottom" src="~@/assets/images/shuju/main/corner-left-bottom.png" /> --> |
|||
<main-navbar ref="ref_navbar" v-if="!$store.state.inIframe" /> |
|||
<div |
|||
class="g-cnt" |
|||
:style="{ |
|||
minHeight: $store.state.fixed1920.height - 100 + 'px', |
|||
}"> |
|||
<main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" /> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</fixed1920> |
|||
<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" /> |
|||
<div class="g-cnt" :style="{ |
|||
minHeight: $store.state.fixed1920.height - 100 + 'px', |
|||
}"> |
|||
<main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" /> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</fixed1920> |
|||
</template> |
|||
<script> |
|||
import MainNavbar from "./main-navbar"; |
|||
import MainContent from "./main-content"; |
|||
import debounce from "lodash/debounce"; |
|||
import { mapGetters } from "vuex"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import fixed1920 from "@/views/components/fixed1920.vue"; |
|||
export default { |
|||
provide() { |
|||
return { |
|||
// 刷新 |
|||
refresh() { |
|||
this.$store.state.contentIsNeedRefresh = true; |
|||
this.$nextTick(() => { |
|||
this.$store.state.contentIsNeedRefresh = false; |
|||
}); |
|||
}, |
|||
}; |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
userType: localStorage.getItem("userType"), |
|||
}; |
|||
}, |
|||
components: { |
|||
MainNavbar, |
|||
MainContent, |
|||
fixed1920, |
|||
}, |
|||
watch: { |
|||
$route: "routeHandle", |
|||
}, |
|||
async created() { |
|||
this.windowResizeHandle(); |
|||
this.routeHandle(this.$route); |
|||
Promise.all([this.getWorkUserInfo()]).then(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$refs["ref_navbar"].changeCustomerName(customerName); |
|||
}, |
|||
// 窗口改变大小 |
|||
windowResizeHandle() { |
|||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
|||
window.addEventListener( |
|||
"resize", |
|||
debounce(() => { |
|||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
|||
}, 150) |
|||
); |
|||
}, |
|||
// 路由, 监听 |
|||
routeHandle(route) { |
|||
if (!route.meta.isTab) { |
|||
this.$store.state.mainShuju.activeName = ""; |
|||
this.$store.state.mainShuju.contentTabsActiveName = ""; |
|||
return false; |
|||
} |
|||
var tab = this.$store.state.contentTabs.filter((item) => item.name === route.name)[0]; |
|||
if (!tab) { |
|||
tab = { |
|||
...window.SITE_CONFIG["contentTabDefault"], |
|||
...route.meta, |
|||
name: route.name, |
|||
params: { |
|||
...route.params, |
|||
}, |
|||
query: { |
|||
...route.query, |
|||
}, |
|||
}; |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab); |
|||
} |
|||
this.$store.state.mainShuju.activeName = tab.menuId; |
|||
this.$store.state.mainShuju.contentTabsActiveName = tab.name; |
|||
}, |
|||
// 获取当前管理员信息 |
|||
async getWorkUserInfo() { |
|||
const url = "/epmetuser/customerstaff/staffbasicinfo"; |
|||
let params = {}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$store.state.user = { |
|||
...data, |
|||
}; |
|||
console.log("user---hahha", this.$store.state.user); |
|||
localStorage.setItem("roleList", data.roleList); |
|||
localStorage.setItem("customerId", data.customerId); |
|||
localStorage.setItem("staffId", data.id); |
|||
localStorage.setItem("agencyId", data.agencyId); |
|||
localStorage.setItem("level", data.level); |
|||
// if (!localStorage.getItem("customerName")) { |
|||
// localStorage.setItem("customerName", data.agencyName || ""); |
|||
// } |
|||
localStorage.setItem("customerNameDataBoard", data.agencyName || ""); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
import MainNavbar from "./main-navbar"; |
|||
import MainContent from "./main-content"; |
|||
import debounce from "lodash/debounce"; |
|||
import { |
|||
mapGetters |
|||
} from "vuex"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { |
|||
requestPost |
|||
} from "@/js/dai/request"; |
|||
import fixed1920 from "@/views/components/fixed1920.vue"; |
|||
export default { |
|||
provide() { |
|||
return { |
|||
// 刷新 |
|||
refresh() { |
|||
this.$store.state.contentIsNeedRefresh = true; |
|||
this.$nextTick(() => { |
|||
this.$store.state.contentIsNeedRefresh = false; |
|||
}); |
|||
}, |
|||
}; |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
userType: localStorage.getItem("userType"), |
|||
}; |
|||
}, |
|||
components: { |
|||
MainNavbar, |
|||
MainContent, |
|||
fixed1920, |
|||
}, |
|||
watch: { |
|||
$route: "routeHandle", |
|||
}, |
|||
async created() { |
|||
this.windowResizeHandle(); |
|||
this.routeHandle(this.$route); |
|||
Promise.all([this.getWorkUserInfo()]).then(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$refs["ref_navbar"].changeCustomerName(customerName); |
|||
}, |
|||
// 窗口改变大小 |
|||
windowResizeHandle() { |
|||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
|||
window.addEventListener("resize", debounce(() => { |
|||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
|||
}, 150)); |
|||
}, |
|||
// 路由, 监听 |
|||
routeHandle(route) { |
|||
if (!route.meta.isTab) { |
|||
this.$store.state.mainShuju.activeName = ""; |
|||
this.$store.state.mainShuju.contentTabsActiveName = ""; |
|||
return false; |
|||
} |
|||
var tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === route.name)[0]; |
|||
if (!tab) { |
|||
tab = { |
|||
...window.SITE_CONFIG["contentTabDefault"], |
|||
...route.meta, |
|||
name: route.name, |
|||
params: { |
|||
...route.params |
|||
}, |
|||
query: { |
|||
...route.query |
|||
}, |
|||
}; |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab); |
|||
} |
|||
this.$store.state.mainShuju.activeName = tab.menuId; |
|||
this.$store.state.mainShuju.contentTabsActiveName = tab.name; |
|||
}, |
|||
// 获取当前管理员信息 |
|||
async getWorkUserInfo() { |
|||
const url = "/epmetuser/customerstaff/staffbasicinfo"; |
|||
let params = {}; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$store.state.user = { |
|||
...data |
|||
}; |
|||
console.log("user---hahha", this.$store.state.user); |
|||
localStorage.setItem("roleList", data.roleList); |
|||
localStorage.setItem("customerId", data.customerId); |
|||
localStorage.setItem("staffId", data.id); |
|||
localStorage.setItem("agencyId", data.agencyId); |
|||
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> |
|||
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
|||
|
|||
Loading…
Reference in new issue