381 lines
10 KiB
Vue
381 lines
10 KiB
Vue
<template>
|
|
<ai-detail class="Statistics">
|
|
<template #title>
|
|
<ai-title title="企业统计" :isShowBack="true" @onBackClick="onBack" isShowBottomBorder>
|
|
</ai-title>
|
|
</template>
|
|
<template #content>
|
|
<ai-card title="基本信息">
|
|
<template #content>
|
|
<el-row :gutter="20">
|
|
<el-col :span="5">
|
|
<div class="title">群总数</div>
|
|
<div class="num">{{ info.groupCount }}</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="title">成员总数</div>
|
|
<div class="num">{{ info.userCount }}</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="title">成员活跃总数</div>
|
|
<div class="num">{{ info.activeCount }}</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="title">居民总人数</div>
|
|
<div class="num">{{ info.residentCount }}</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="title">群成员总数</div>
|
|
<div class="num">{{ info.groupuserCount }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
</ai-card>
|
|
<ai-card title="统计信息" class="chart-content">
|
|
<template #title>
|
|
<div class="tabs">
|
|
<div class="item" v-for="(item, index) in tabs" :key="index" :class="index == activeIndex ? 'active' : ''"
|
|
@click="tabClick(index)">{{ item }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<div class="echart" id="echart" v-if="activeIndex != 2 && activeIndex != 3"></div>
|
|
<div class="table" v-else-if="activeIndex == 2">
|
|
<ai-search-bar>
|
|
<template slot="right">
|
|
<el-input
|
|
v-model="innerMemberId"
|
|
size="small"
|
|
placeholder="输入群成员ID"
|
|
@keyup.enter.native="(page.current = 1), getTableData()"
|
|
clearable
|
|
prefix-icon="iconfont iconSearch"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
icon="iconfont iconSearch"
|
|
size="small"
|
|
@click="(page.current = 1), getTableData()"
|
|
>查询
|
|
</el-button>
|
|
<el-button
|
|
icon="el-icon-refresh-right"
|
|
size="small"
|
|
@click="resetSearch"
|
|
>重置
|
|
</el-button
|
|
>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table :tableData="gropList" :total="page.total" :current.sync="page.current" :size.sync="page.size"
|
|
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
|
|
<!-- <el-table-column slot="options" align="center" label="操作" fixed="right" width="240px">
|
|
<div class="table-options" slot-scope="{ row }">
|
|
<el-button type="text">打开</el-button>
|
|
</div>
|
|
</el-table-column> -->
|
|
</ai-table>
|
|
</div>
|
|
<div class="table" v-else-if="activeIndex == 3">
|
|
<ai-table :tableData="userList" :total="userPage.total" :current.sync="userPage.current"
|
|
:size.sync="userPage.size"
|
|
@getList="getUserTableData" :col-configs="userColConfigs" :dict="dict">
|
|
<!-- <el-table-column slot="options" align="center" label="操作" fixed="right" width="240px">
|
|
<div class="table-options" slot-scope="{ row }">
|
|
<el-button type="text">打开</el-button>
|
|
</div>
|
|
</el-table-column> -->
|
|
</ai-table>
|
|
</div>
|
|
</template>
|
|
</ai-card>
|
|
</template>
|
|
</ai-detail>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
|
|
export default {
|
|
name: 'Statistics',
|
|
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
info: {},
|
|
activeIndex: 0,
|
|
tabs: ['概览', '群统计', '群列表', '成员与好友统计'],
|
|
listData: [],
|
|
pieData: [],
|
|
myChart: null,
|
|
gropList: [],
|
|
page: {current: 1, size: 10, total: 0},
|
|
innerMemberId: '',
|
|
userList: [],
|
|
userPage: {current: 1, size: 10, total: 0}
|
|
}
|
|
},
|
|
computed: {
|
|
colConfigs() {
|
|
return [
|
|
{label: "群名", prop: "name", width: 200},
|
|
{label: "创建时间", prop: "createTime", align: 'center', width: 150},
|
|
{label: "群成员数", prop: "memberCount", align: 'center', width: 100},
|
|
{label: "群主ID", prop: "owner", align: 'center', width: 150},
|
|
{label: "群公告", prop: "notice"},
|
|
]
|
|
},
|
|
userColConfigs() {
|
|
return [
|
|
{label: "部门", prop: "departmentName"},
|
|
{label: "姓名", prop: "name", align: 'center'},
|
|
{label: "添加好友人数", prop: "residentCount", align: 'center'}
|
|
]
|
|
},
|
|
params() {
|
|
return this.$route.query || {}
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.getTableData()
|
|
this.getUserTableData()
|
|
},
|
|
mounted() {
|
|
this.getInfo()
|
|
},
|
|
|
|
methods: {
|
|
chartInit() {
|
|
var option = {}
|
|
if (this.activeIndex != 1) {
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['群总数', '成员总数', '成员活跃总数', '居民总人数', '群成员总数']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.listData[5],
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '群总数',
|
|
type: 'line',
|
|
data: this.listData[0]
|
|
},
|
|
{
|
|
name: '成员总数',
|
|
type: 'line',
|
|
data: this.listData[1]
|
|
},
|
|
{
|
|
name: '成员活跃总数',
|
|
type: 'line',
|
|
data: this.listData[2]
|
|
},
|
|
{
|
|
name: '居民总人数',
|
|
type: 'line',
|
|
data: this.listData[3]
|
|
},
|
|
{
|
|
name: '群成员总数',
|
|
type: 'line',
|
|
data: this.listData[4]
|
|
},
|
|
]
|
|
};
|
|
} else {
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: this.pieData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
}
|
|
this.myChart.setOption(option);
|
|
},
|
|
getInfo() {
|
|
this.myChart = echarts.init(document.getElementById("echart"));
|
|
this.instance.post(`/appCorpStat/getLatestInfo?corpId=${this.params.corpId}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.info = res.data
|
|
this.getCharInfo()
|
|
}
|
|
})
|
|
},
|
|
getCharInfo() {
|
|
this.instance.post(`/appCorpStat/getLatestThreeMonthStat?corpId=${this.params.corpId}`).then(res => {
|
|
if (res.code === 0) {
|
|
if (res.data && res.data.length) {
|
|
this.listData = []
|
|
this.listData[0] = res.data.map(v => v.groupCount)
|
|
this.listData[1] = res.data.map(v => v.userCount)
|
|
this.listData[2] = res.data.map(v => v.activeCount)
|
|
this.listData[3] = res.data.map(v => v.residentCount)
|
|
this.listData[4] = res.data.map(v => v.groupuserCount)
|
|
this.listData[5] = res.data.map(v => v.statDate)
|
|
this.chartInit()
|
|
}
|
|
}
|
|
})
|
|
|
|
this.instance.post(`/wxcp/wxgroup/groupStatistic?corpId=${this.params.corpId}`).then(res => {
|
|
if (res.code === 0) {
|
|
if (res.data) {
|
|
this.pieData = []
|
|
Object.getOwnPropertyNames(res.data).forEach((key) => {
|
|
var e = {
|
|
value: res.data[key],
|
|
name: key
|
|
}
|
|
this.pieData.push(e)
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
resetSearch() {
|
|
this.innerMemberId = ''
|
|
this.page.current = 1
|
|
this.getTableData()
|
|
},
|
|
getTableData() {
|
|
this.instance.post(`/wxcp/wxgroup/list?corpId=${this.params.corpId}¤t=${this.page.current}&size=${this.page.size}&innerMemberId=${this.innerMemberId}`,).then(res => {
|
|
if (res.code === 0) {
|
|
if (res.data) {
|
|
this.gropList = res.data.records
|
|
this.page.total = res.data.total
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getUserTableData() {
|
|
this.instance.post(`/wxcp/wxuser/userStat?corpId=${this.params.corpId}¤t=${this.userPage.current}&size=${this.userPage.size}&mainDepartment=1`,).then(res => {
|
|
if (res.code === 0) {
|
|
if (res.data) {
|
|
this.userList = res.data.records
|
|
this.userPage.total = res.data.total
|
|
}
|
|
}
|
|
})
|
|
},
|
|
onBack() {
|
|
this.$router.push({})
|
|
},
|
|
tabClick(index) {
|
|
this.activeIndex = index
|
|
this.myChart.dispose()
|
|
if (index != 2 && index != 3) {
|
|
this.$nextTick(() => {
|
|
this.myChart = echarts.init(document.getElementById("echart"));
|
|
this.chartInit()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.cover {
|
|
display: block;
|
|
width: 300px;
|
|
height: 140px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.subTitle {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.title {
|
|
line-height: 60px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: #666;
|
|
}
|
|
|
|
.num {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.tabs {
|
|
.item {
|
|
display: inline-block;
|
|
padding: 0 20px;
|
|
line-height: 54px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
color: #26f;
|
|
border-bottom: 2px solid #26f;
|
|
}
|
|
}
|
|
|
|
.chart-content {
|
|
height: calc(100% - 240px);
|
|
|
|
:deep( .ai-card__body ){
|
|
height: calc(100% - 70px);
|
|
}
|
|
|
|
.echart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
:deep( .ai-detail__content--wrapper ){
|
|
height: 100%;
|
|
}
|
|
</style>
|