张若晨
2 years ago
29 changed files with 1282 additions and 7 deletions
|
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; |
||||
|
} |
||||
|
} |
||||
@ -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> |
<template> |
||||
<div> |
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import gridMap from "@/views/dataBoard/cpts/map/index"; |
||||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
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 { |
export default { |
||||
|
name: "renfang", |
||||
|
|
||||
|
components: { |
||||
|
gridMap, |
||||
|
cptLoading, |
||||
|
cptBread, |
||||
|
Title, |
||||
|
Jdjs, |
||||
|
Jdtphx, |
||||
|
mapTop, |
||||
|
jdwgy, |
||||
|
rfsjtj, |
||||
|
sqrfph, |
||||
|
sq12345, |
||||
|
}, |
||||
|
|
||||
data() { |
data() { |
||||
return { |
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: { |
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> |
</script> |
||||
|
|
||||
<style lang="scss"></style> |
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/dataBoard/overview/index.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
|||||
|
After Width: | Height: | Size: 48 KiB |
Loading…
Reference in new issue