346 lines
8.8 KiB
Vue
346 lines
8.8 KiB
Vue
<template>
|
|
<div class="statistics" v-if="pageShow">
|
|
<!-- <div class="gird-select">
|
|
<img src="./components/img/gird-icon.png" alt="">
|
|
<span>{{girdName}}</span>
|
|
<img src="./components/img/down-icon.png" alt="">
|
|
</div>
|
|
<u-select v-model="showSelect" :list="myGirdList" value-name="id" label-name="girdName" @confirm="confirm"></u-select> -->
|
|
<div class="info-content">
|
|
<div class="title">今日概况</div>
|
|
<div class="el-row">
|
|
<div class="item" v-for="(item, index) in todayList" :key="index">
|
|
<h2>{{item.value}}</h2>
|
|
<p>{{item.label}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="title">业务透视</div>
|
|
<div class="business">
|
|
<div class="left">
|
|
<div class="item">
|
|
<p>受理率</p>
|
|
<h2>{{info.businessCountMap['受理率'] * 100 || '0'}}%</h2>
|
|
</div>
|
|
<div class="item">
|
|
<p>办结率</p>
|
|
<h2>{{info.businessCountMap['办结率'] * 100 || '0'}}%</h2>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="img">
|
|
<img src="./components/img/line-img.png" alt="">
|
|
<img src="./components/img/line-img.png" alt="">
|
|
</div>
|
|
<div class="num">
|
|
<div class="item bg1">
|
|
<h2>累计反馈</h2>
|
|
<p>{{info.businessCountMap['累计反馈'] || '0'}}</p>
|
|
</div>
|
|
<div class="item bg2">
|
|
<h2>累计受理</h2>
|
|
<p>{{info.businessCountMap['累计受理'] || '0'}}</p>
|
|
</div>
|
|
<div class="item bg3">
|
|
<h2>累计办理</h2>
|
|
<p>{{info.businessCountMap['累计办结'] || '0'}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="title" @click="toPercentageDetail">分类统计
|
|
<!-- <img src="./components/img/right-icon.png" alt=""> -->
|
|
</div>
|
|
<div class="percentage">
|
|
<div class="item" v-for="(item, index) in info.groupList" :key="index">
|
|
<div class="mini-title">{{item.groupName}}</div>
|
|
<div class="info">
|
|
<div class="line-bg" :style="`width:${item.width}%`"><div class="active-bg" :style="`width:${item.percentage*100}%`"></div></div>共{{item.totalNum}}条 | 已办结{{item.finishNum}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="info-content" @click="toUserList">
|
|
<div class="title">成员明细
|
|
<img src="./components/img/right-icon.png" alt="">
|
|
</div>
|
|
</div> -->
|
|
<div class="pad-b120"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {},
|
|
data() {
|
|
return {
|
|
todayList: [],
|
|
info: {},
|
|
pageShow: false,
|
|
myGirdList: [],
|
|
showSelect: false,
|
|
myGirdList: [],
|
|
girdName: '全部网格'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.girdList()
|
|
this.getStatistics()
|
|
},
|
|
methods: {
|
|
getStatistics() {
|
|
this.$http.post('/app/appclapeventinfo/countByGirdMember').then((res) => {
|
|
if (res.code == 0) {
|
|
this.info = res.data
|
|
Object.keys(res.data.todayCountMap).forEach((key) => {
|
|
var info = {
|
|
label: key,
|
|
value: res.data.todayCountMap[key]
|
|
}
|
|
this.todayList.push(info)
|
|
})
|
|
if(this.info.groupList.length) {
|
|
this.info.groupList.map((item, index) => {
|
|
if(item.finishNum) {
|
|
item.percentage = (item.finishNum/item.totalNum).toFixed(2)
|
|
}else {
|
|
item.percentage = 0
|
|
}
|
|
item.width = 56-(index*10)
|
|
})
|
|
}
|
|
}
|
|
this.pageShow = true
|
|
})
|
|
},
|
|
|
|
goDetail(item) {
|
|
uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
|
},
|
|
|
|
change(index) {
|
|
this.currentTabs = index
|
|
this.getList()
|
|
},
|
|
|
|
toPercentageDetail() {
|
|
uni.navigateTo({url: './PercentageDetail'})
|
|
},
|
|
toUserList() {
|
|
uni.navigateTo({url: './UserList'})
|
|
},
|
|
|
|
girdList() {
|
|
this.$http.post(`/app/appgirdmemberinfo/queryMyGirdList`, null, {
|
|
params: {
|
|
size: 9999,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.myGirdList = res.data
|
|
var all = {
|
|
id: '',
|
|
girdName: '全部'
|
|
}
|
|
this.myGirdList.unshift(all)
|
|
}
|
|
})
|
|
},
|
|
confirm(e) {
|
|
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.statistics {
|
|
background-color: #F3F7F8;
|
|
padding: 30px 30px 0;
|
|
.gird-select{
|
|
width: 100%;
|
|
background: #FFF;
|
|
border-radius: 16px;
|
|
margin: 0 0 24px;
|
|
text-align: center;
|
|
padding: 24px 0;
|
|
img{
|
|
width: 32px;
|
|
height: 32px;
|
|
vertical-align: middle;
|
|
}
|
|
span{
|
|
display: inline-block;
|
|
font-size: 34px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 48px;
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
.info-content{
|
|
width: 100%;
|
|
background: #FFF;
|
|
border-radius: 16px;
|
|
margin-bottom: 24px;
|
|
.title{
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333;
|
|
line-height: 48px;
|
|
padding: 24px 16px 24px 24px;
|
|
img{
|
|
float: right;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
.el-row{
|
|
display: flex;
|
|
padding: 32px 0 60px 0;
|
|
.item{
|
|
flex: 1;
|
|
text-align: center;
|
|
h2{
|
|
font-size: 64px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #3B424A;
|
|
line-height: 64px;
|
|
margin-bottom: 8px;
|
|
}
|
|
p{
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
.business{
|
|
display: flex;
|
|
padding: 40px 0 30px 0;
|
|
.left{
|
|
width: 220px;
|
|
padding: 20px 0 78px 50px;
|
|
.item{
|
|
margin-bottom: 58px;
|
|
}
|
|
h2{
|
|
font-size: 58px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #3B424A;
|
|
line-height: 64px;
|
|
letter-spacing: -4px;
|
|
}
|
|
p{
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #666;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
.right{
|
|
width: calc(100% - 220px);
|
|
display: flex;
|
|
.img{
|
|
width: 140px;
|
|
margin-top: 42px;
|
|
img{
|
|
width: 140px;
|
|
height: 144px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
.num{
|
|
width: calc(100% - 140px);
|
|
text-align: center;
|
|
.item{
|
|
height: 130px;
|
|
border-radius: 6px;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 4px;
|
|
color: #2F7EE5;
|
|
h2{
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
line-height: 48px;
|
|
padding-top: 20px;
|
|
}
|
|
p{
|
|
font-size: 40px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.bg1{
|
|
width: 272px;
|
|
background-image: url('./components/img/bg-1.png');
|
|
}
|
|
.bg2{
|
|
width: 234px;
|
|
background-image: url('./components/img/bg-2.png');
|
|
margin-left: 16px;
|
|
}
|
|
.bg3{
|
|
width: 208px;
|
|
background-image: url('./components/img/bg-3.png');
|
|
margin-left: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.percentage{
|
|
padding: 16px 0 0 26px;
|
|
.item{
|
|
width: 100%;
|
|
padding-bottom: 32px;
|
|
.mini-title{
|
|
font-size: 30px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #333;
|
|
line-height: 48px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.info{
|
|
width: 100%;
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999;
|
|
line-height: 48px;
|
|
.line-bg{
|
|
display: inline-block;
|
|
height: 14px;
|
|
background: #D7D8D9;
|
|
border-radius: 8px;
|
|
margin-right: 12px;
|
|
.active-bg{
|
|
height: 100%;
|
|
background: #257FF1;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
img{
|
|
width: 32px;
|
|
height: 32px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pad-b120{
|
|
background-color: #F3F7F8;
|
|
padding-bottom: 120px;
|
|
}
|
|
}
|
|
</style>
|