Browse Source

可视化平台细节调整

shibei_master
jiangyy 4 years ago
parent
commit
e347de62cd
  1. BIN
      src/assets/img/modules/visual/popup.png
  2. 499
      src/assets/scss/modules/visual/basicInfoMain copy.scss
  3. 131
      src/assets/scss/modules/visual/basicInfoMain.scss
  4. 1151
      src/assets/scss/modules/visual/people.scss
  5. 57
      src/assets/scss/modules/visual/personCategory.scss
  6. 2
      src/views/modules/base/community/buildTable.vue
  7. 2
      src/views/modules/base/community/communityTable.vue
  8. 2
      src/views/modules/base/community/roomTable.vue
  9. 1074
      src/views/modules/visual/basicinfo/basicInfoMain copy.vue
  10. 142
      src/views/modules/visual/basicinfo/basicInfoMain.vue
  11. 475
      src/views/modules/visual/basicinfo/people.vue
  12. 33
      src/views/modules/visual/basicinfo/personCategory/index.vue

BIN
src/assets/img/modules/visual/popup.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

499
src/assets/scss/modules/visual/basicInfoMain copy.scss

@ -0,0 +1,499 @@
.div_top {
margin-left: 10px;
height: 35px;
.router_line {
width: 212px;
height: 1px;
border: 1px solid #ffffff;
opacity: 0.09;
/* opacity: 0.09; */
}
.div_router {
margin-top: 5px;
font-size: 16px;
.router_parents {
color: #a0c3d9;
.arrow {
padding: 0 5px;
}
}
.router_parents:hover {
cursor: pointer;
}
.router_child {
color: #ffffff;
}
}
}
.div_content {
display: flex;
.div_map {
box-sizing: border-box;
width: 100%;
// padding: 10px 5px 13px;
// margin-top: 8px;
height: calc(88vh - 15px);
color: #fff;
// background: url('../../../img/modules/visual/warning-box.png') no-repeat
// center;
// background-size: 100% 100%;
}
.div_data {
flex: 0 0 562px;
margin-left: 12px;
.div_search {
width: 100%;
height: 56px;
text-align: center;
background-color: #011168;
border-radius: 4px 0 0 4px;
border: none;
box-shadow: 0 0 10px inset #1a5afd;
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
opacity: 0.7;
display: flex;
justify-content: space-between;
.div_search_left {
display: flex;
justify-content: flex-start;
.icon {
display: flex;
align-items: center;
margin-left: 29px;
> img {
width: 24px;
height: 24px;
}
}
> span {
line-height: 56px;
margin-left: 10px;
}
}
.btn {
text-align: center;
flex: 0 0 113px;
height: 56px;
background: linear-gradient(90deg, #1a5afd, #26c4ff);
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 56px;
border-radius: 0 4px 4px 0;
}
}
.div_search:hover {
cursor: pointer;
}
.div_info {
box-sizing: border-box;
width: 100%;
margin-top: 21px;
height: calc(88vh - 87px);
color: #fff;
background: url('../../../img/modules/visual/warning-box.png') no-repeat
center;
background-size: 100% 100%;
// padding: 45px 21px 35px 24px;
.info_loading {
margin-top: 50px;
}
.info_tip {
padding: 31px 0 0 19px;
display: flex;
> img {
height: 34px;
width: 46px;
}
.tip_title {
line-height: 34px;
margin-left: 7px;
font-size: 22px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
}
}
.info_list {
margin-top: 9px;
.item {
.item_line {
margin-top: 13px;
margin-left: 24px;
width: 517px;
height: 0px;
border: 1px dotted #1797ff31;
border-width: 0.5px;
}
.last_line {
border: 1px dotted #1797ff00;
}
.list_item {
display: flex;
padding: 18px 59px 0;
justify-content: space-between;
.list_item_col {
flex: 0 0 240px;
display: flex;
> img {
height: 76px;
width: 76px;
}
.item_content {
margin-left: 10px;
height: 76px;
display: flex;
flex-direction: column;
justify-content: center;
.item_label {
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
.item_count {
margin-top: 10px;
font-size: 28px;
font-family: PingFang SC;
font-weight: bold;
color: #00fffc;
}
}
}
}
::v-deep .el-popper {
padding: 0px;
}
//
}
}
}
.div_info {
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
}
}
}
.div_community_info {
box-sizing: border-box;
flex: 0 0 calc(100vw - 620px);
// width: calc(100vw - 560px);
height: calc(88vh - 10px);
color: #fff;
background: url('../../../img/modules/visual/warning-box.png') no-repeat
center;
background-size: 100% 100%;
.div_select {
margin-top: 28px;
margin-left: 24px;
display: flex;
.customer_select {
display: flex;
justify-content: flex-start;
> span {
width: auto;
font-size: 22px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
line-height: 34px;
}
}
> img {
height: 34px;
width: 46px;
}
.tip_title {
line-height: 34px;
margin-left: 12px;
font-size: 22px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
}
}
.div_room_bar {
box-sizing: border-box;
margin-top: 9px;
height: calc(88vh - 120px);
}
.div_room {
// height: calc(88vh - 40px);
// margin-top: 9px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 21px 0 21px;
.item:hover {
cursor: pointer;
}
.item_sel {
box-shadow: 0 0 10px inset #1a5afd;
}
.item {
background-color: #011168;
margin-top: 12px;
width: 244px;
height: 190px;
border: 1px solid #037ddc;
border-radius: 8px;
text-align: center;
margin-left: 11px;
position: relative;
// &:first-child {
// margin-left: 0;
// }
.housename {
margin-top: 70px;
font-size: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
// line-height: 180px;
}
.icon_party {
position: absolute;
top: 13px;
left: 18px;
}
.icon_category {
position: absolute;
bottom: 14px;
left: 9px;
// margin-left: 7px;
> img {
margin-left: 5px;
width: 21px;
height: 20px;
}
}
.div_user:hover {
cursor: pointer;
}
.div_user {
position: absolute;
bottom: 10px;
right: 11px;
width: 88px;
height: 30px;
background: #073082;
border-radius: 15px;
> img {
width: 10px;
height: 6px;
margin-left: 4px;
}
> span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 30px;
}
}
}
}
.div_room::after {
content: '';
flex: 1;
}
}
.user_list {
position: relative;
z-index: 10;
background: #020340;
border: 1px solid #0a359b;
border-radius: 4px;
box-shadow: 0 0 10px inset #1a5afd;
.user_item {
padding: 13px 8px 0 14px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
.user_item_content {
display: flex;
// justify-content: space-between;
align-items: center;
.name {
max-width: 80%;
text-align: left;
}
> img {
margin-left: auto;
margin-top: 4px;
width: 8px;
height: 12px;
}
}
.item_line {
margin-top: 9px;
width: 70px;
height: 0px;
border: 1px dotted #1797ff31;
border-width: 0.5px;
}
.last_line {
border: 1px dotted #1797ff00;
}
}
}
.div_agency_tran {
transition: width 2s ease-out, opacity 1s ease-in, visibility 1s ease-in;
width: 0;
height: 470px;
z-index: 1000;
position: absolute;
top: 50px;
right: 600px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
.div_agency_list {
width: 320px;
height: 470px;
color: #fff;
background: url('../../../img/modules/visual/box-2.png') no-repeat center;
background-size: 100% 100%;
padding: 45px 20px 35px 20px;
.agency_main {
height: 100%;
position: relative;
}
.agency_main {
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
}
.no-data-img {
text-align: center;
margin-top: 50px;
margin-left: 15px;
}
.agency_list {
.agency_item {
// height: 60px;
padding: 15px 0;
font-size: 17px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
// line-height: 50px;
padding-left: 12px;
display: flex;
flex-direction: row;
align-items: center;
// padding-top: 15px;
.agency_item_name {
// line-height: 20px;
}
}
.agency_item_on {
background: #08216c;
border-radius: 2px;
}
.agency_item:hover {
cursor: pointer;
background-color: #011168;
border-radius: 4px 0 0 4px;
border: none;
box-shadow: 0 0 10px inset #1a5afd;
border-radius: 2px;
}
}
}
.arrow_tip {
margin-right: -2px;
> img {
width: 21px;
height: 176px;
}
}
.arrow_tip:hover {
cursor: pointer;
}
}
.div_agency_tran-fade-in {
width: 341px;
opacity: 1;
visibility: 1;
}
.div_agency_tran-fade-out {
visibility: 0;
opacity: 1;
width: 0;
right: 575px;
}
// .div_agency_list-fade-in {
// width: 341px;
// opacity: 1;
// visibility: 1;
// }
// .div_agency_list-fade-out {
// visibility: 0;
// opacity: 0;
// width: 0;
// }

131
src/assets/scss/modules/visual/basicInfoMain.scss

@ -42,6 +42,7 @@
// background: url('../../../img/modules/visual/warning-box.png') no-repeat
// center;
// background-size: 100% 100%;
position: relative;
}
.div_data {
@ -392,72 +393,98 @@
}
}
.div_agency_list {
z-index: 1000;
.m-sidebar {
position: absolute;
right: 0;
top: 50px;
right: 600px;
box-sizing: border-box;
width: 320px;
z-index: 1000;
width: 370px;
height: 470px;
color: #fff;
background: url('../../../img/modules/visual/box-2.png') no-repeat center;
background-size: 100% 100%;
padding: 45px 20px 35px 20px;
overflow: hidden;
.agency_main {
height: 100%;
position: relative;
.arrow_tip {
position: absolute;
top: 180px;
left: -20px;
}
.wrap {
display: flex;
justify-content: flex-start;
align-items: center;
background-color: rgba(rgb(173, 173, 173), 0);
transform: translateX(-5px);
transition: all ease 1s;
border-radius: 4px;
}
.agency_main {
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
.wrap-hidden {
transform: translateX(339px);
}
.no-data-img {
text-align: center;
margin-top: 50px;
margin-left: 15px;
}
.agency_list {
.agency_item {
// height: 60px;
padding: 15px 0;
font-size: 17px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
// line-height: 50px;
padding-left: 12px;
display: flex;
flex-direction: row;
align-items: center;
// padding-top: 15px;
.div_agency_list {
width: 320px;
height: 470px;
color: #fff;
background: url('../../../img/modules/visual/box-2.png') no-repeat center;
background-size: 100% 100%;
padding: 45px 20px 35px 20px;
.agency_item_name {
// line-height: 20px;
.agency_main {
height: 100%;
position: relative;
}
.agency_main {
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
}
.agency_item_on {
background: #08216c;
border-radius: 2px;
.no-data-img {
text-align: center;
margin-top: 50px;
margin-left: 15px;
}
.agency_list {
.agency_item {
// height: 60px;
padding: 15px 0;
font-size: 17px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
// line-height: 50px;
padding-left: 12px;
display: flex;
flex-direction: row;
align-items: center;
// padding-top: 15px;
.agency_item:hover {
cursor: pointer;
background-color: #011168;
border-radius: 4px 0 0 4px;
border: none;
box-shadow: 0 0 10px inset #1a5afd;
border-radius: 2px;
.agency_item_name {
// line-height: 20px;
}
}
.agency_item_on {
background: #08216c;
border-radius: 2px;
}
.agency_item:hover {
cursor: pointer;
background-color: #011168;
border-radius: 4px 0 0 4px;
border: none;
box-shadow: 0 0 10px inset #1a5afd;
border-radius: 2px;
}
}
}
.arrow_tip {
margin-right: -2px;
margin-left: 10px;
> img {
width: 22px;
height: 176px;
}
}
.arrow_tip:hover {
cursor: pointer;
}
}

1151
src/assets/scss/modules/visual/people.scss

File diff suppressed because it is too large

57
src/assets/scss/modules/visual/personCategory.scss

@ -76,10 +76,42 @@
width: 100%;
display: flex;
position: relative;
flex-direction: column;
align-items: space-between;
justify-content: space-between;
align-items: flex-start;
margin-top: 10px;
// border: 1px solid red;
.item_left {
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
.item_right {
width: 160px;
display: flex;
flex-direction: column;
align-items: space-between;
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
.item_right_row {
display: flex;
justify-content: space-between;
.item_right_title {
}
}
.row2 {
margin-top: 10px;
}
}
.num-item {
position: relative;
width: 100%;
@ -90,19 +122,6 @@
justify-content: space-between;
padding: 0 10px 0 9px;
// &::after {
// display: block;
// content: "";
// width: 8px;
// height: 8px;
// background: #f0f3f7;
// border-radius: 50%;
// position: absolute;
// left: 12px;
// top: 50%;
// transform: translate(0, -50%);
// }
div:nth-child(1) {
font-size: 16px;
font-family: PingFang SC;
@ -111,17 +130,15 @@
}
div:nth-child(2) {
display: flex;
align-items: center;
justify-content: space-between;
// width: 70%;
display: flex;
font-size: 20px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
.right-icon {
width: 10px;
height: 14px;
}
}
}

2
src/views/modules/base/community/buildTable.vue

@ -172,7 +172,7 @@
style="margin-left:15px"
type="red"
size="small"
@click="deleteBatch">批量删除</el-button>
@click="deleteBatch">删除</el-button>
</div>
</div>

2
src/views/modules/base/community/communityTable.vue

@ -193,7 +193,7 @@
style="margin-left:15px"
type="red"
size="small"
@click="deleteBatch">批量删除</el-button>
@click="deleteBatch">删除</el-button>
</div>
</div>

2
src/views/modules/base/community/roomTable.vue

@ -164,7 +164,7 @@
style="margin-left:15px"
type="red"
size="small"
@click="deleteBatch">批量删除</el-button>
@click="deleteBatch">删除</el-button>
</div>
</div>

1074
src/views/modules/visual/basicinfo/basicInfoMain copy.vue

File diff suppressed because it is too large

142
src/views/modules/visual/basicinfo/basicInfoMain.vue

@ -14,57 +14,6 @@
</div>
</div>
<!-- 组织列表 -->
<transition name="slideFade">
<div v-show="isshow&&(orgLevel!=='people' && orgLevel!=='search' && orgLevel!=='neighborHood')"
transiton="slideFade"
class="div_agency_list">
<div class="agency_main">
<el-scrollbar style="height:98%"
wrap-style="overflow-x:hidden">
<div v-if="subAgencyArray.length>0"
class="agency_list">
<div v-for="(item,index) in subAgencyArray"
:key="index"
@click="clickAgencyItem(item,index)"
:class="['agency_item',{'agency_item_on':index%2 ==0}]">
<div class="agency_item_name">{{item.name}}</div>
</div>
</div>
<div v-else>
<img src="@/assets/img/modules/visual/noData.png"
alt=""
srcset=""
class="no-data-img" />
</div>
</el-scrollbar>
<div @click="isshow=!isshow"
class="arrow_tip">
<img src="../../../../assets/img/modules/visual/sousuo.png"
alt />
</div>
</div>
</div>
</transition>
<!-- <transition name="slideFade">
<div v-if="isshow"
class="aaa"
transiton="slideFade">
<div>1111111</div>
<div class="arrow_tip"
@click="isshow=!isshow">
<img src="../../../../assets/img/modules/visual/sousuo.png"
alt />
</div>
</div>
</transition> -->
<people-search v-show="orgLevel==='search'"
@toSubAgency="toSubAgency"
ref="ref_search"></people-search>
@ -84,8 +33,44 @@
class="div_map"
id="map"
ref="map">
<!-- <div id="map"
class="map"></div> -->
<div class="m-sidebar">
<div class="wrap"
:class="[{'wrap-hidden':!showAgencyList}]">
<div @click="hideAgencyList"
class="arrow_tip">
<img src="@/assets/img/modules/visual/popup.png"
alt />
</div>
<div class="div_agency_list">
<div class="agency_main">
<el-scrollbar style="height:98%"
wrap-style="overflow-x:hidden">
<div v-if="subAgencyArray.length>0"
class="agency_list">
<div v-for="(item,index) in subAgencyArray"
:key="index"
@click="clickAgencyItem(item,index)"
:class="['agency_item',{'agency_item_on':index%2 ==0}]">
<div class="agency_item_name">{{item.name}}</div>
</div>
</div>
<div v-else>
<img src="@/assets/img/modules/visual/noData.png"
alt=""
srcset=""
class="no-data-img" />
</div>
</el-scrollbar>
</div>
</div>
</div>
</div>
</div>
<div class="div_data">
@ -269,7 +254,8 @@ const vueGis = {
name: 'HomeMap',
data () {
return {
isshow: true,
showAgencyList: true,
agencyFadeIn: true,
centerPoint: [],//
zoom: 14,//14
minZoom: 1,//
@ -327,7 +313,21 @@ const vueGis = {
},
methods: {
hideAgencyList () {
this.showAgencyList = !this.showAgencyList
// if (this.showAgencyList) {
// this.agencyFadeIn = false
// setTimeout(() => {
// this.showAgencyList = false
// }, 1000)
// } else {
// this.agencyFadeIn = true
// this.showAgencyList = true
// }
},
handleSearch () {
this.toSubAgency('search')
},
@ -997,38 +997,4 @@ export default vueGis;
</style>
<style lang="scss" scoped>
.aaa {
height: 100px;
width: 100px;
background-color: aquamarine;
}
.slideFade-enter {
animation: slideFade-dialog-fade-in 0.5s ease;
}
.slideFade-leave {
animation: slideFade-dialog-fade-out 0.5s ease forwards;
}
.slideFade-enter-active {
animation: slideFade-dialog-fade-in 0.5s ease;
}
.slideFade-leave-active {
animation: slideFade-dialog-fade-out 0.5s ease forwards;
}
@keyframes slideFade-dialog-fade-in {
from {
left: 110px;
}
to {
left: 0px;
}
}
@keyframes slideFade-dialog-fade-out {
from {
left: 0px;
}
to {
left: 100px;
}
}
</style>

475
src/views/modules/visual/basicinfo/people.vue

@ -7,9 +7,11 @@
<img src="@/assets/img/shuju/title-tip.png" />
<span>人员情况</span>
</div>
<div class="more" @click="showedMoreInfo = true">查看更多</div>
<div class="more"
@click="showedMoreInfo = true">查看更多</div>
<div class="ren">
<img class="pic-ren" src="@/assets/img/shuju/people/ren.png" />
<img class="pic-ren"
src="@/assets/img/shuju/people/ren.png" />
<div class="ren-name">
<span>{{ info.name }}</span>
<img src="@/assets/img/shuju/people/arrow.png" />
@ -106,13 +108,11 @@
</cpt-card>
</div>
<people-more
v-show="showedMoreInfo"
v-if="userId"
:userId="userId"
:gridName="info.gridName"
@close="showedMoreInfo = false"
/>
<people-more v-show="showedMoreInfo"
v-if="userId"
:userId="userId"
:gridName="info.gridName"
@close="showedMoreInfo = false" />
<div class="m-relation">
<cpt-card>
@ -122,168 +122,99 @@
</div>
<div class="info">
<div class="huzhu">
<img class="huzhu-bg" src="@/assets/img/shuju/people/huzhu.png" />
<img
class="huzhu-ico"
src="@/assets/img/shuju/people/huzhu-home.png"
/>
<img class="huzhu-bg"
src="@/assets/img/shuju/people/huzhu.png" />
<img class="huzhu-ico"
src="@/assets/img/shuju/people/huzhu-home.png" />
<div class="huzhu-name">{{ houseInfo.ownerName }}</div>
<p>户主</p>
</div>
<div
class="rel z-zuo-2"
@click="toUserInfo(houseInfo.userList[0].userId)"
v-if="houseInfo.userList[0]"
>
<img
class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo2.png"
/>
<div
class="rel-text"
:class="houseInfo.userList[0].isSelf == '1' ? 'z-on' : ''"
>
<span class="rel-call">{{
<div class="rel z-zuo-2"
@click="toUserInfo(houseInfo.userList[0].userId)"
v-if="houseInfo.userList[0]">
<img class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo2.png" />
<div class="rel-text"
:class="houseInfo.userList[0].isSelf == '1' ? 'z-on' : ''">
<div class="rel-call">岳父母或公婆</div>
<div class="rel-name">吉克隽逸</div>
<!-- <span class="rel-call">{{
houseInfo.userList[0].relation
}}</span>
<span class="rel-name"
>{{ houseInfo.userList[0].userName }}</span
>
<span class="rel-name">{{ houseInfo.userList[0].userName }}</span> -->
</div>
</div>
<div
class="rel z-you-2"
@click="toUserInfo(houseInfo.userList[1].userId)"
v-if="houseInfo.userList[1]"
>
<img
class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you2.png"
/>
<div
class="rel-text"
:class="houseInfo.userList[1].isSelf == '1' ? 'z-on' : ''"
>
<span class="rel-call">{{
houseInfo.userList[1].relation
}}</span>
<span class="rel-name"
>{{ houseInfo.userList[1].userName }}</span
>
<div class="rel z-you-2"
@click="toUserInfo(houseInfo.userList[1].userId)"
v-if="houseInfo.userList[1]">
<img class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you2.png" />
<div class="rel-text"
:class="houseInfo.userList[1].isSelf == '1' ? 'z-on' : ''">
<div class="rel-call">{{ houseInfo.userList[1].relation }}</div>
<div class="rel-name">{{ houseInfo.userList[1].userName }}</div>
</div>
</div>
<div
class="rel z-zuo-1"
@click="toUserInfo(houseInfo.userList[2].userId)"
v-if="houseInfo.userList[2]"
>
<img
class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo1.png"
/>
<div
class="rel-text"
:class="houseInfo.userList[2].isSelf == '1' ? 'z-on' : ''"
>
<span class="rel-call">{{
houseInfo.userList[2].relation
}}</span>
<span class="rel-name"
>{{ houseInfo.userList[2].userName }}</span
>
<div class="rel z-zuo-1"
@click="toUserInfo(houseInfo.userList[2].userId)"
v-if="houseInfo.userList[2]">
<img class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo1.png" />
<div class="rel-text"
:class="houseInfo.userList[2].isSelf == '1' ? 'z-on' : ''">
<div class="rel-call">{{ houseInfo.userList[2].relation }}</div>
<div class="rel-name">{{ houseInfo.userList[2].userName }}</div>
</div>
</div>
<div
class="rel z-you-1"
@click="toUserInfo(houseInfo.userList[3].userId)"
v-if="houseInfo.userList[3]"
>
<img
class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you1.png"
/>
<div
class="rel-text"
:class="houseInfo.userList[3].isSelf == '1' ? 'z-on' : ''"
>
<span class="rel-call">{{
houseInfo.userList[3].relation
}}</span>
<span class="rel-name"
>{{ houseInfo.userList[3].userName }}</span
>
<div class="rel z-you-1"
@click="toUserInfo(houseInfo.userList[3].userId)"
v-if="houseInfo.userList[3]">
<img class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you1.png" />
<div class="rel-text"
:class="houseInfo.userList[3].isSelf == '1' ? 'z-on' : ''">
<div class="rel-call">{{ houseInfo.userList[3].relation }}</div>
<span class="rel-name">{{ houseInfo.userList[3].userName }}</span>
</div>
</div>
<div
class="rel z-zuo-3"
@click="toUserInfo(houseInfo.userList[4].userId)"
v-if="houseInfo.userList[4]"
>
<img
class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo3.png"
/>
<div
class="rel-text"
:class="houseInfo.userList[4].isSelf == '1' ? 'z-on' : ''"
>
<span class="rel-call">{{
houseInfo.userList[4].relation
}}</span>
<span class="rel-name"
>{{ houseInfo.userList[4].userName }}</span
>
<div class="rel z-zuo-3"
@click="toUserInfo(houseInfo.userList[4].userId)"
v-if="houseInfo.userList[4]">
<img class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo3.png" />
<div class="rel-text"
:class="houseInfo.userList[4].isSelf == '1' ? 'z-on' : ''">
<div class="rel-call">{{ houseInfo.userList[4].relation }}</div>
<div class="rel-name">{{ houseInfo.userList[4].userName }}</div>
</div>
</div>
<div
class="rel z-you-3"
@click="toUserInfo(houseInfo.userList[5].userId)"
v-if="houseInfo.userList[5]"
>
<img
class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you3.png"
/>
<div
class="rel-text"
:class="houseInfo.userList[5].isSelf == '1' ? 'z-on' : ''"
>
<span class="rel-call">{{
houseInfo.userList[5].relation
}}</span>
<span class="rel-name"
>{{ houseInfo.userList[5].userName }}</span
>
<div class="rel z-you-3"
@click="toUserInfo(houseInfo.userList[5].userId)"
v-if="houseInfo.userList[5]">
<img class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you3.png" />
<div class="rel-text"
:class="houseInfo.userList[5].isSelf == '1' ? 'z-on' : ''">
<div class="rel-call">{{ houseInfo.userList[5].relation }}</div>
<div class="rel-name">{{ houseInfo.userList[5].userName }}</div>
</div>
</div>
</div>
@ -299,23 +230,20 @@
</div>
<div class="tb">
<cpt-tb
:col-list="demand.colList"
:loading="demand.loading"
:header="demand.header"
:list="demand.list"
@operate="handleOperateDemandList"
></cpt-tb>
<div class="m-pagination" v-if="demand.total > demand.pageSize">
<el-pagination
:current-page="demand.pageNo"
:page-size="demand.pageSize"
:total="demand.total"
background
layout="prev, pager, next"
@current-change="handlePageNoChangeDemand"
>
<cpt-tb :col-list="demand.colList"
:loading="demand.loading"
:header="demand.header"
:list="demand.list"
@operate="handleOperateDemandList"></cpt-tb>
<div class="m-pagination"
v-if="demand.total > demand.pageSize">
<el-pagination :current-page="demand.pageNo"
:page-size="demand.pageSize"
:total="demand.total"
background
layout="prev, pager, next"
@current-change="handlePageNoChangeDemand">
</el-pagination>
</div>
</div>
@ -327,83 +255,68 @@
<cpt-card>
<div class="title">
<img src="@/assets/img/shuju/title-tip.png" />
<a
:class="{ 'z-on': showedIncidentOrTopic == 'incident' }"
@click="showedIncidentOrTopic = 'incident'"
>上报事件</a
>
<a
:class="{ 'z-on': showedIncidentOrTopic == 'topic' }"
@click="showedIncidentOrTopic = 'topic'"
>发布话题</a
>
<a :class="{ 'z-on': showedIncidentOrTopic == 'incident' }"
@click="showedIncidentOrTopic = 'incident'">上报事件</a>
<a :class="{ 'z-on': showedIncidentOrTopic == 'topic' }"
@click="showedIncidentOrTopic = 'topic'">发布话题</a>
</div>
<div class="list-wrap" v-show="showedIncidentOrTopic == 'incident'">
<div class="list-wrap"
v-show="showedIncidentOrTopic == 'incident'">
<div class="list">
<div
class="item"
:key="'incident' + index"
v-for="(item, index) in incident.list"
@click="handleClickIncident(index)"
>
<div class="item"
:key="'incident' + index"
v-for="(item, index) in incident.list"
@click="handleClickIncident(index)">
<div class="item-title">{{ item.eventContent }}</div>
<div class="item-date">{{ item.reportTime }}</div>
</div>
</div>
<div
class="m-pagination"
v-if="incident.total > incident.pageSize"
>
<el-pagination
:current-page="incident.pageNo"
:page-size="incident.pageSize"
:total="incident.total"
background
layout="prev, pager, next"
@current-change="handlePageNoChangeIncident"
>
<div class="m-pagination"
v-if="incident.total > incident.pageSize">
<el-pagination :current-page="incident.pageNo"
:page-size="incident.pageSize"
:total="incident.total"
background
layout="prev, pager, next"
@current-change="handlePageNoChangeIncident">
</el-pagination>
</div>
<div v-if="incident.list.length == 0" class="m-hint">
<img
src="@/assets/img/modules/visual/noData.png"
class="no-data-img"
/>
<div v-if="incident.list.length == 0"
class="m-hint">
<img src="@/assets/img/modules/visual/noData.png"
class="no-data-img" />
</div>
</div>
<div class="list-wrap" v-show="showedIncidentOrTopic == 'topic'">
<div class="list-wrap"
v-show="showedIncidentOrTopic == 'topic'">
<div class="list">
<div
class="item"
:key="'topic' + index"
v-for="(item, index) in topic.list"
@click="handleClickTopic(index)"
>
<div class="item"
:key="'topic' + index"
v-for="(item, index) in topic.list"
@click="handleClickTopic(index)">
<div class="item-title">{{ item.topicContent }}</div>
<div class="item-date">{{ item.releaseTime }}</div>
</div>
</div>
<div class="m-pagination" v-if="topic.total > topic.pageSize">
<el-pagination
:current-page="topic.pageNo"
:page-size="topic.pageSize"
:total="topic.total"
background
layout="prev, pager, next"
@current-change="handlePageNoChangeTopic"
>
<div class="m-pagination"
v-if="topic.total > topic.pageSize">
<el-pagination :current-page="topic.pageNo"
:page-size="topic.pageSize"
:total="topic.total"
background
layout="prev, pager, next"
@current-change="handlePageNoChangeTopic">
</el-pagination>
</div>
<div v-if="topic.list.length == 0" class="m-hint">
<img
src="@/assets/img/modules/visual/noData.png"
class="no-data-img"
/>
<div v-if="topic.list.length == 0"
class="m-hint">
<img src="@/assets/img/modules/visual/noData.png"
class="no-data-img" />
</div>
</div>
</cpt-card>
@ -418,12 +331,10 @@
<div class="list-wrap">
<div class="list">
<div
class="item"
:key="'point' + index"
v-for="(item, index) in point.list"
@click="handleClickPoint(index)"
>
<div class="item"
:key="'point' + index"
v-for="(item, index) in point.list"
@click="handleClickPoint(index)">
<div class="item-row">
<div class="item-l">
<div class="item-point">{{ item.point }}</div>
@ -436,23 +347,21 @@
</div>
</div>
<div class="m-pagination" v-if="point.total > point.pageSize">
<el-pagination
:current-page="point.pageNo"
:page-size="point.pageSize"
:total="point.total"
background
layout="prev, pager, next"
@current-change="handlePageNoChangePoint"
>
<div class="m-pagination"
v-if="point.total > point.pageSize">
<el-pagination :current-page="point.pageNo"
:page-size="point.pageSize"
:total="point.total"
background
layout="prev, pager, next"
@current-change="handlePageNoChangePoint">
</el-pagination>
</div>
<div v-if="point.list.length == 0" class="m-hint">
<img
src="@/assets/img/modules/visual/noData.png"
class="no-data-img"
/>
<div v-if="point.list.length == 0"
class="m-hint">
<img src="@/assets/img/modules/visual/noData.png"
class="no-data-img" />
</div>
</div>
</cpt-card>
@ -460,29 +369,23 @@
</div>
</div>
<demand-info
v-if="demand.list.length > 0 && showedDemandInfo"
:userId="userId"
queryOrigin="personal-data"
:demandId="demand.srcList[demand.currentIndex].demandRecId"
@close="showedDemandInfo = false"
/>
<incident-info
v-if="incident.list.length > 0 && incident.showedInfo"
:resiEventId="incident.list[incident.currentIndex].resiEventId"
:epmetUserIdList="info.epmetUserIdList"
:icResiUserId="userId"
@close="incident.showedInfo = false"
/>
<topic-info
v-if="topic.list.length > 0 && topic.showedInfo"
:topicId="topic.list[topic.currentIndex].topicId"
:epmetUserIdList="info.epmetUserIdList"
:icResiUserId="userId"
@close="topic.showedInfo = false"
/>
<demand-info v-if="demand.list.length > 0 && showedDemandInfo"
:userId="userId"
queryOrigin="personal-data"
:demandId="demand.srcList[demand.currentIndex].demandRecId"
@close="showedDemandInfo = false" />
<incident-info v-if="incident.list.length > 0 && incident.showedInfo"
:resiEventId="incident.list[incident.currentIndex].resiEventId"
:epmetUserIdList="info.epmetUserIdList"
:icResiUserId="userId"
@close="incident.showedInfo = false" />
<topic-info v-if="topic.list.length > 0 && topic.showedInfo"
:topicId="topic.list[topic.currentIndex].topicId"
:epmetUserIdList="info.epmetUserIdList"
:icResiUserId="userId"
@close="topic.showedInfo = false" />
</div>
</template>
@ -498,7 +401,7 @@ import cptTb from "@/views/modules/visual/cpts/tb";
export default {
name: "HomeMap",
data() {
data () {
return {
showedMoreInfo: false,
showedDemandInfo: false,
@ -619,24 +522,24 @@ export default {
},
watch: {
uid(id) {
uid (id) {
this.userId = id;
},
userId() {
userId () {
this.getApiData();
window.scrollTo(0, 0);
},
},
async mounted() {
async mounted () {
this.userId = this.uid;
this.getApiData();
},
methods: {
handleSearch() {},
handleSearch () { },
async getApiData() {
async getApiData () {
await this.getInfo();
this.getHouseInfo();
this.getDemandData();
@ -645,12 +548,12 @@ export default {
this.getPointData();
},
toUserInfo(uid) {
toUserInfo (uid) {
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
},
//
async getInfo() {
async getInfo () {
const url = "/epmetuser/icresiuser/persondata";
let params = {
userId: this.userId,
@ -666,7 +569,7 @@ export default {
},
//
async getHouseInfo() {
async getHouseInfo () {
const url = "/epmetuser/icresiuser/ownerrelation";
let params = {
userId: this.userId,
@ -681,12 +584,12 @@ export default {
}
},
handlePageNoChangeDemand(val) {
handlePageNoChangeDemand (val) {
this.demand.pageNo = val;
this.getDemandData();
},
handleOperateDemandList(index, type) {
handleOperateDemandList (index, type) {
if (type == "查看") {
this.showedDemandInfo = true;
this.demand.currentIndex = index;
@ -694,7 +597,7 @@ export default {
},
//
async getDemandData() {
async getDemandData () {
const url = "/heart/userdemand/mydemand";
let params = {
epmetUserIdList: this.info.epmetUserIdList,
@ -724,18 +627,18 @@ export default {
}
},
handlePageNoChangeIncident(val) {
handlePageNoChangeIncident (val) {
this.incident.pageNo = val;
this.getIncidentData();
},
handleClickIncident(index) {
handleClickIncident (index) {
this.incident.showedInfo = true;
this.incident.currentIndex = index;
},
//
async getIncidentData() {
async getIncidentData () {
const url = "/gov/project/resievent/pageuserreported";
let params = {
epmetUserIdList: this.info.epmetUserIdList,
@ -755,18 +658,18 @@ export default {
}
},
handlePageNoChangeTopic(val) {
handlePageNoChangeTopic (val) {
this.topic.pageNo = val;
this.getTopicData();
},
handleClickTopic(index) {
handleClickTopic (index) {
this.topic.showedInfo = true;
this.topic.currentIndex = index;
},
//
async getTopicData() {
async getTopicData () {
const url = "/data/aggregator/resigroup/pageusertopic";
let params = {
epmetUserIdList: this.info.epmetUserIdList,
@ -786,18 +689,18 @@ export default {
}
},
handlePageNoChangePoint(val) {
handlePageNoChangePoint (val) {
this.point.pageNo = val;
this.getPointData();
},
handleClickPoint(index) {
handleClickPoint (index) {
this.point.showedInfo = true;
this.point.currentIndex = index;
},
//
async getPointData() {
async getPointData () {
const url = "/point/resi/point/pageuserpoint";
let params = {
epmetUserIdList: this.info.epmetUserIdList,

33
src/views/modules/visual/basicinfo/personCategory/index.vue

@ -46,25 +46,50 @@
</div>
</div>
<div class="top-item-num">
<div class="num-item">
<div class="item_left">较上月</div>
<div class="item_right">
<div class="item_right_row">
<div class="item_right_title">新人员增加</div>
<div>
<span v-if=" item.immigration!==0">{{ "+" }}</span>
<span>{{ item.immigration }}</span>
</div>
</div>
<div class="item_right_row row2">
<div class="item_right_title">原人员减少</div>
<div>
<span v-if=" item.emigration!==0">{{ "-" }}</span>
<span>{{ item.emigration }}</span>
</div>
</div>
</div>
<!-- <div class="num-item">
<div>较上月</div>
<div>
<div>
<span>新人员增加</span>
<span v-if=" item.immigration!==0">{{ "+" }}</span>
<span>{{ item.immigration }}</span>
</div>
</div>
</div>
<div class="num-item">
</div> -->
<!-- <div class="num-item">
<div>{{" "}}</div>
<div>
<div>
<span>原人员减少</span>
<span v-if=" item.emigration!==0">{{ "-" }}</span>
<span>{{ item.emigration }}</span>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>

Loading…
Cancel
Save