148 lines
3.3 KiB
Vue
148 lines
3.3 KiB
Vue
<template>
|
|
<div class="AppDataScreening">
|
|
<div class="header">
|
|
<div class="title" @click="linkTo('./userDetail')">
|
|
<span>居民群</span>
|
|
<u-icon name="arrow-right" color="#ddd" size="32"></u-icon>
|
|
</div>
|
|
<div class="num"><span>{{totalInfo.groupNumber}}</span>个</div>
|
|
<p class="text">共{{totalInfo.userNumber}}位群成员</p>
|
|
</div>
|
|
<div class="list">
|
|
<div class="title">
|
|
<span>组织信息</span>
|
|
<i>共{{orgInfo.total}}人</i>
|
|
</div>
|
|
<div class="item" v-for="(item, index) in orgInfo.Organizational" :key="index" @click="linkTo(`./orgList?id=${item.corpId}`)">
|
|
<div class="left">
|
|
<img src="./img/gird--select-icon.png" alt="">
|
|
<span>{{item.name}}</span>
|
|
</div>
|
|
<u-icon name="arrow-right" color="#ddd" size="32"></u-icon>
|
|
</div>
|
|
<AiEmpty description="暂无数据" v-if="!orgInfo.Organizational"/>
|
|
<!-- <p class="total">组织内共72人</p> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
export default {
|
|
name: "AppDataScreening",
|
|
appName: "数据总览",
|
|
data() {
|
|
return {
|
|
totalInfo: {},
|
|
orgInfo: {}
|
|
}
|
|
},
|
|
computed: {...mapState(['user'])},
|
|
created() {
|
|
this.getTotal()
|
|
},
|
|
onShow() {
|
|
document.title = '数据总览'
|
|
},
|
|
methods: {
|
|
linkTo(url) {
|
|
uni.navigateTo({ url })
|
|
},
|
|
getTotal() {
|
|
this.$http.post(`/app/wxcp/wxgroup/getGoupAndUserCount`).then(res => {
|
|
if (res?.code == 0) {
|
|
this.totalInfo = res.data
|
|
}
|
|
})
|
|
this.$http.post(`/app/appdvcpconfig/getOrganizationalInfo`).then(res => {
|
|
if (res?.code == 0) {
|
|
this.orgInfo = res.data
|
|
}
|
|
})
|
|
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppDataScreening {
|
|
padding-top: 32px;
|
|
.header{
|
|
margin-bottom: 32px;
|
|
padding: 0 32px 32px 32px;
|
|
background-color: #fff;
|
|
.num{
|
|
text-align: center;
|
|
color: #333;
|
|
font-size: 30px;
|
|
margin: 20px 0 24px 0;
|
|
span{
|
|
display: inline-block;
|
|
font-size: 56px;
|
|
font-weight: 600;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
.text{
|
|
color: #666;
|
|
font-size: 28px;
|
|
line-height: 44px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.list{
|
|
padding-left: 32px;
|
|
background-color: #fff;
|
|
.item{
|
|
padding: 34px 32px 34px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #ddd;
|
|
.left{
|
|
width: 600px;
|
|
img{
|
|
width: 56px;
|
|
height: 56px;
|
|
vertical-align: bottom;
|
|
margin-right: 14px;
|
|
}
|
|
span{
|
|
display: inline-block;
|
|
width: calc(100% - 70px);
|
|
word-break: break-all;
|
|
line-height: 44px;
|
|
font-size: 30px;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
.total{
|
|
line-height: 44px;
|
|
font-size: 28px;
|
|
color: #666;
|
|
padding: 40px 32px 24px 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.title{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
line-height: 88px;
|
|
color: #333;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
i{
|
|
font-style: normal;
|
|
padding-right: 32px;
|
|
font-size: 28px;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
</style>
|