战立标
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> |
|||
<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 |
Loading…
Reference in new issue