344 lines
8.5 KiB
Vue
344 lines
8.5 KiB
Vue
<template>
|
|
<div class="statistics">
|
|
<AiTopFixed>
|
|
<AiTabPanes v-model="currentTab" :tabs="tabs" @click="getStaData"/>
|
|
</AiTopFixed>
|
|
<u-alert-tips type="error" title="该数据统计于每日24:00更新"/>
|
|
<template v-if="currentTab==0">
|
|
<div class="num-content">
|
|
<div class="item" v-for="(op,k) in overviewSta" :key="k">
|
|
<p v-text="k"/>
|
|
<h2 v-text="op"/>
|
|
<img :src="`${$cdn}sass/statics/${icons[k]}.png`" alt="">
|
|
<span class="right-line"/>
|
|
</div>
|
|
</div>
|
|
<div class="list-content">
|
|
<div class="title">
|
|
<div class="text">网格入群居民数排行(人)</div>
|
|
<div class="more" @click="getMore('girdGroupNumberCount')">
|
|
<u-icon name="arrow-right" color="#ddd" size="20" label-pos="left" label="更多"/>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<template v-if="getList('girdGroupNumberCount').length>0">
|
|
<div class="item" v-for="(op,i) in getList('girdGroupNumberCount')" :key="i">
|
|
<div class="name" flex>
|
|
<span v-text="i+1"/>
|
|
<p v-text="op.girdName"/>
|
|
</div>
|
|
<div class="num" v-text="op.personCount||0"/>
|
|
</div>
|
|
</template>
|
|
<AiEmpty img="https://cdn.cunwuyun.cn/dvcp/h5/homeEmpty.png" v-else description="暂无数据"/>
|
|
</div>
|
|
</div>
|
|
<div class="list-content">
|
|
<div class="title">
|
|
<div class="text">网格事件处理排行(件)</div>
|
|
<div class="more" @click="getMore('eventNumberCount')">
|
|
<u-icon name="arrow-right" color="#ddd" size="20" label-pos="left" label="更多"/>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<template v-if="getList('eventNumberCount').length>0">
|
|
<div class="item" v-for="(op,i) in getList('eventNumberCount')" :key="i">
|
|
<div class="name" flex>
|
|
<span v-text="i+1"/>
|
|
<p v-text="op.girdName"/>
|
|
</div>
|
|
<div class="num" v-text="op.eventCount||0"/>
|
|
</div>
|
|
</template>
|
|
<AiEmpty img="https://cdn.cunwuyun.cn/dvcp/h5/homeEmpty.png" v-else description="暂无数据"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="currentTab==1">
|
|
<div class="num-content">
|
|
<div class="item" v-for="(op,k) in overviewSta" :key="k">
|
|
<p v-text="k"/>
|
|
<h2 v-text="op"/>
|
|
<img :src="`${$cdn}sass/statics/${icons[k]}.png`" alt="">
|
|
<span class="right-line"/>
|
|
</div>
|
|
</div>
|
|
<div class="list-content" v-if="hasChartData">
|
|
<div class="title">
|
|
<div class="text" v-text="chartTitle"/>
|
|
</div>
|
|
<div class="content column" flex>
|
|
<div id="StaChart"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
|
|
export default {
|
|
name: 'statistics',
|
|
data() {
|
|
return {
|
|
checkType: 0,
|
|
sta: {},
|
|
tabs: ["团队统计", "个人统计"],
|
|
currentTab: 0,
|
|
chart: null,
|
|
chartTitle: "上报事件类型",
|
|
icons: {
|
|
居民群: "icon1",
|
|
入群居民: "icon2",
|
|
上报事件: "icon3",
|
|
办结事件: "icon4",
|
|
待办事件: "icon5",
|
|
居民信息录入: "icon6",
|
|
走访慰问: "icon7",
|
|
会议通知: "icon8",
|
|
事务记录: "icon9",
|
|
网格员: "icon10",
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
overviewSta() {
|
|
let {eventGirdMemberCount, wxGroupCount, eventCount, eventInfoCount, otherWorkCount} = this.sta
|
|
return {...eventGirdMemberCount, ...wxGroupCount, ...eventCount, ...eventInfoCount, ...otherWorkCount}
|
|
},
|
|
hasChartData() {
|
|
return this.sta.eventGroupCount?.length > 0
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
getStaData() {
|
|
if (this.currentTab == 1) {
|
|
this.$http.post("/app/statistics/people/queryGirdMemberCount").then(res => {
|
|
if (res?.data) {
|
|
this.sta = res.data
|
|
this.renderChart(0, () => {
|
|
let {eventGroupCount: list} = this.sta
|
|
this.chart.setOption({
|
|
series: {
|
|
data: list.map(e => ({name: e.groupName || "", value: e.eventNumber || 0}))
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
this.$http.post("/app/statistics/people/queryTeamInfoCount", null, {
|
|
params: {size: 5}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.sta = res.data
|
|
}
|
|
})
|
|
}
|
|
},
|
|
renderChart(count = 0, cb) {
|
|
let dom = document.getElementById("StaChart")
|
|
if (dom) {
|
|
this.chart = echarts.init(dom)
|
|
this.chart.setOption({
|
|
color: ["#3AA0FF", "#50CB74", "#FBD444", "#435289", "#9D73D9"],
|
|
series: {
|
|
name: this.chartTitle,
|
|
type: "funnel",
|
|
minSize: "25%",
|
|
label: {
|
|
formatter: '{b} {c}'
|
|
}
|
|
}
|
|
})
|
|
cb && cb()
|
|
} else {
|
|
if (count < 10) {
|
|
setTimeout(() => {
|
|
this.renderChart(++count, cb)
|
|
}, 200)
|
|
}
|
|
}
|
|
},
|
|
getMore(type) {
|
|
uni.navigateTo({url: `./staList?type=${type}`})
|
|
},
|
|
getList(key) {
|
|
return this.sta?.[key]?.records || []
|
|
}
|
|
},
|
|
created() {
|
|
document.title = '统计'
|
|
this.getStaData()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.statistics {
|
|
min-height: 100vh;
|
|
background-color: #F6F8F8;
|
|
padding-bottom: 100px;
|
|
box-sizing: border-box;
|
|
|
|
::v-deep.AiTopFixed {
|
|
.content {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.num-content {
|
|
width: calc(100% - 32px);
|
|
margin: 0 16px 32px 16px;
|
|
padding: 0 20px 0 4px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
display: inline-block;
|
|
width: 50%;
|
|
float: left;
|
|
position: relative;
|
|
margin-top: 36px;
|
|
padding: 0 44px 36px 48px;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #F5F6F9;
|
|
|
|
p {
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: bold;
|
|
color: #71777E;
|
|
line-height: 36px;
|
|
margin-top: -18px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 40px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: bold;
|
|
color: #333;
|
|
line-height: 56px;
|
|
}
|
|
|
|
img {
|
|
width: 72px;
|
|
height: 72px;
|
|
position: absolute;
|
|
right: 44px;
|
|
top: 0;
|
|
}
|
|
|
|
.right-line {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 72px;
|
|
border-right: 1px solid #F6F6F6;
|
|
}
|
|
}
|
|
|
|
.item:nth-of-type(2n) {
|
|
.right-line {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.border-b {
|
|
border-bottom: 1px solid #F6F6F6;
|
|
}
|
|
}
|
|
|
|
.list-content {
|
|
width: calc(100% - 60px);
|
|
margin: 40px 30px 32px;
|
|
border-radius: 16px;
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #fff;
|
|
padding: 28px 6px 0 50px;
|
|
|
|
.text {
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: bold;
|
|
color: #000;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.more {
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #666;
|
|
line-height: 40px;
|
|
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 0 50px 32px 50px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 28px 0;
|
|
border-bottom: 1px solid #E1E1E1;
|
|
|
|
.name {
|
|
width: calc(100% - 100px);
|
|
|
|
span {
|
|
display: inline-block;
|
|
min-width: 30px;
|
|
height: 30px;
|
|
background: #3399FF;
|
|
font-size: 20px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #FFF;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
margin-right: 34px;
|
|
vertical-align: top;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
p {
|
|
display: inline-block;
|
|
width: calc(100% - 70px);
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.num {
|
|
display: inline-block;
|
|
width: 100px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.back-img {
|
|
width: 132px;
|
|
height: 132px;
|
|
}
|
|
|
|
#StaChart {
|
|
width: 700px;
|
|
height: 500px;
|
|
}
|
|
}
|
|
</style>
|