149 lines
3.3 KiB
Vue
149 lines
3.3 KiB
Vue
<template>
|
|
<div class="AppSpecialGroups">
|
|
<div class="title">特殊人群总计 : {{ total }}人
|
|
<span v-if="!isGridMember" style="color:#999;">(只有网格员才有权限添加特殊人群)</span>
|
|
</div>
|
|
<div class="people-list">
|
|
<div class="item" @click="toList(item.label)" v-for="(item, index) in statisticsList" :key="index">
|
|
<div class="left">
|
|
<img src="./img/user-icon-mini.png" alt="">
|
|
<span>{{ item.label }}</span>
|
|
</div>
|
|
<div class="right">
|
|
{{ item.value }}<img src="./img/down-icon-666.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer" @click="toAdd" v-if="isGridMember">
|
|
<div class="btn">新增特殊人群信息</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
export default {
|
|
name: "AppSpecialGroups",
|
|
appName: "特殊人群",
|
|
data() {
|
|
return {
|
|
statisticsList: [],
|
|
total: 0
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
isGridMember() {
|
|
return this.user.girdCheckType > 0
|
|
}
|
|
},
|
|
methods: {
|
|
getStatistic() {
|
|
this.statisticsList = []
|
|
this.total = 0
|
|
this.$http.post(`/app/appspecialadjustment/statistic?type=0&range=0`).then((res) => {
|
|
if (res?.data) {
|
|
for (let i in res.data.map) {
|
|
var obj = {
|
|
label: i,
|
|
value: res.data.map[i],
|
|
}
|
|
this.total = this.total + res.data.map[i]
|
|
this.statisticsList.push(obj)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
toList(label) {
|
|
uni.navigateTo({ url: `./List?label=${label}`})
|
|
},
|
|
toAdd() {
|
|
uni.navigateTo({ url: './Add' })
|
|
}
|
|
},
|
|
created() {
|
|
this.getStatistic()
|
|
},
|
|
onShow() {
|
|
document.title = "特殊人群"
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppSpecialGroups {
|
|
.title {
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #666666;
|
|
line-height: 28px;
|
|
padding: 40px 0 20px 30px;
|
|
}
|
|
.people-list{
|
|
padding-bottom: 120px;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
padding: 30px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
margin: 0 30px 30px 30px;
|
|
width: calc(100% - 60px);
|
|
box-sizing: border-box;
|
|
.left {
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #666;
|
|
line-height: 48px;
|
|
width: calc(100% - 200px);
|
|
img {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin-right: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
span {
|
|
display: inline-block;
|
|
width: calc(100% - 60px);
|
|
word-break: break-all;
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
.right {
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #000;
|
|
line-height: 48px;
|
|
width: 200px;
|
|
text-align: right;
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: -4px 0 0 16px;
|
|
vertical-align: middle;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
height: 112px;
|
|
line-height: 112px;
|
|
text-align: center;
|
|
background: #1365DD;
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
</style>
|