diff --git a/src/project/saas/AppDataStatistics/AppDataStatistics.vue b/src/project/saas/AppDataStatistics/AppDataStatistics.vue index 16dbb9eb..714523a4 100644 --- a/src/project/saas/AppDataStatistics/AppDataStatistics.vue +++ b/src/project/saas/AppDataStatistics/AppDataStatistics.vue @@ -2,7 +2,7 @@
- +
@@ -13,7 +13,7 @@
{{ item.text }}
- +
@@ -22,6 +22,7 @@ import resident from './components/resident.vue' import update from './components/update' import wechat from './components/wechat' import message from './components/message' +import { mapState } from 'vuex' export default { name: "AppDataStatistics", @@ -51,11 +52,25 @@ export default { areaName: '', } }, + computed: { + ...mapState(['user']) + }, components: {resident, update, wechat, message}, methods: { tabClick(index) { this.tabIndex = index }, + areaSelect(e) { + this.areaId = e + this.refreshList() + }, + refreshList() { + this.$nextTick(() => this.$refs.list.getData()) + } + }, + onLoad() { + this.areaId = this.user.areaId + this.areaName = this.user.areaName }, onShow() { document.title = "数据统计" diff --git a/src/project/saas/AppDataStatistics/components/message.vue b/src/project/saas/AppDataStatistics/components/message.vue index 96e27981..35829b9a 100644 --- a/src/project/saas/AppDataStatistics/components/message.vue +++ b/src/project/saas/AppDataStatistics/components/message.vue @@ -4,25 +4,32 @@ 消息回复率
- +
+
+
+
+
单聊统计
-
-
居民好友
-
{{ (235625).toLocaleString('en-US') }}
+
+
单聊会话
+
{{ Number(privateCard.chatCnt).toLocaleString('en-US') }}
+
0
-
+
单聊消息
-
235
+
{{ Number(privateCard.messageCnt).toLocaleString('en-US') }}
+
0
+
@@ -30,22 +37,26 @@
-
+
活跃群聊
-
111
+
{{ Number(groupCard.chatHasMsg).toLocaleString('en-US') }}
+
0
-
+
活跃群成员
-
235
+
{{ Number(groupCard.memberHasMsg).toLocaleString('en-US') }}
+
0
-
+
群聊消息
-
{{ (235625).toLocaleString('en-US') }}
+
{{ Number(groupCard.msgTotal).toLocaleString('en-US') }}
+
0
+
@@ -57,14 +68,199 @@ export default { name: 'message', data() { return { - + privateCard: {}, + privateData: [], + privateDate: [], + privateMsg: [], + privateCurrent: 0, + groupCard: {}, + groupData: [], + groupDate: [], + groupMsg: [], + groupCurrent: 0, } }, + created() { + this.getData() + }, mounted() { + this.getEcharts1() + this.getEcharts2() + this.getEcharts3() this.getPrivateChat() this.getGroupChat() }, methods: { + getData() { + // 回复率 + this.$http.post(`/app/wxgroupstatistic/replyPercentage`).then(res=> { + if(res?.data) { + console.log(res); + } + }) + // 单聊统计 + this.$http.post('/app/wxgroupstatistic/getUserChatNumber').then(res=> { + if(res?.data) { + this.privateCard = res.data.单聊总和 + this.privateData = res.data.条形统计 + this.privateDate = this.privateData.map(v=> v.dateDay) + this.privateMsg = this.privateData.map(v=> v.memberHasMsg) + } + }) + // 群聊统计 + this.$http.post('/app/wxgroupstatistic/getgroupChatNumber').then(res=> { + if(res?.data) { + this.groupCard = res.data.群聊总和 + this.groupData = res.data.条形统计 + this.groupDate = this.groupData.map(v=> v.dateDay) + this.groupMsg = this.groupData.map(v=>v.chatHasMsg) + } + }) + }, + getEcharts1() { + let echarts1 = document.getElementById('echarts1'); + let myChart = echarts.init(echarts1); + let option = { + tooltip: { + trigger: 'item', + }, + title: { + zlevel: 0, + text: ['{name|昨日}\n{value|12}'], + top: 'center', + left: '46%', + textAlign: 'center', + textStyle: { + rich: { + name: { + color: '#999999', + fontSize: 13, + lineHeight: 15 + }, + value: { + color: '#333333', + fontSize: 13, + lineHeight: 16 + } + }, + }, + }, + color: ['#3975C6','#F0F2F5'], + series: [ + { + name: '昨天', + type: 'pie', + radius: ['50%', '70%'], + avoidLabelOverlap: false, + hoverAnimation: false, + labelLine: { + show: false, + }, + data: [ + { value: 580, name: '男' }, + { value: 484, name: '女' }, + ] + } + ] + }; + option && myChart.setOption(option); + }, + getEcharts2() { + let echarts2 = document.getElementById('echarts2'); + let myChart = echarts.init(echarts2); + let option = { + tooltip: { + trigger: "item", + }, + title: { + zlevel: 0, + text: ['{name|近7天}\n{value|12}'], + top: 'center', + left: '46%', + textAlign: 'center', + textStyle: { + rich: { + name: { + color: '#999999', + fontSize: 13, + lineHeight: 15 + }, + value: { + color: '#333333', + fontSize: 13, + lineHeight: 16 + } + }, + }, + }, + color: ['#3975C6','#F0F2F5'], + series: [ + { + name: '近7天', + type: 'pie', + radius: ['50%', '70%'], + avoidLabelOverlap: false, + hoverAnimation: false, + labelLine: { + show: false, + }, + data: [ + { value: 580, name: '男' }, + { value: 484, name: '女' }, + ] + } + ] + }; + option && myChart.setOption(option); + }, + getEcharts3() { + let echarts3 = document.getElementById('echarts3'); + let myChart = echarts.init(echarts3); + let option = { + tooltip: { + trigger: "item", + }, + title: { + zlevel: 0, + text: ['{name|近30天}\n{value|12}'], + top: 'center', + left: '46%', + textAlign: 'center', + textStyle: { + rich: { + name: { + color: '#999999', + fontSize: 13, + lineHeight: 15 + }, + value: { + color: '#333333', + fontSize: 13, + lineHeight: 16 + } + }, + }, + }, + color: ['#3975C6','#F0F2F5'], + series: [ + { + name: '近30天', + type: 'pie', + radius: ['50%', '70%'], + avoidLabelOverlap: false, + hoverAnimation: false, + labelLine: { + show: false, + }, + data: [ + { value: 580, name: '男' }, + { value: 484, name: '女' }, + ] + } + ] + }; + option && myChart.setOption(option); + }, getPrivateChat() { let privateDom = document.getElementById('privateChat'); let myChart = echarts.init(privateDom); @@ -199,8 +395,7 @@ export default { } .card { - padding: 24px 0; - box-sizing: border-box; + display: flex; text-align: center; align-items: center; @@ -210,6 +405,8 @@ export default { .item { flex: 1; + padding: 24px 0; + box-sizing: border-box; .item_name { color: #666666; @@ -226,6 +423,10 @@ export default { height: 30px; } } + .active { + border: 2px solid #3975C6; + border-radius: 16px; + } } .privateChat_box, @@ -241,5 +442,22 @@ export default { height: 100%; } } + + .echarts_list { + width: 100%; + height: 256px; + background: #FFF; + border-radius: 8px; + margin-top: 24px; + display: flex; + + #echarts1, + #echarts2, + #echarts3 { + flex: 1; + width: 100%; + height: 100%; + } + } } \ No newline at end of file diff --git a/src/project/saas/AppDataStatistics/components/resident.vue b/src/project/saas/AppDataStatistics/components/resident.vue index 278af156..525dce5b 100644 --- a/src/project/saas/AppDataStatistics/components/resident.vue +++ b/src/project/saas/AppDataStatistics/components/resident.vue @@ -1,17 +1,9 @@ diff --git a/src/project/saas/AppDataStatistics/components/wechat.vue b/src/project/saas/AppDataStatistics/components/wechat.vue index 6b6f59f2..66421598 100644 --- a/src/project/saas/AppDataStatistics/components/wechat.vue +++ b/src/project/saas/AppDataStatistics/components/wechat.vue @@ -7,20 +7,24 @@
居民好友
-
{{ (235625).toLocaleString('en-US') }}
+
{{ Number(friendsCard.customerTotal).toLocaleString('en-US') }}
昨日新增
-
235
+
{{ Number(friendsCard.addCustomerCount).toLocaleString('en-US') }} + +
昨日流失
-
18
+
{{ Number(friendsCard.removeCustomerCount).toLocaleString('en-US') }} +
-
+
+
@@ -30,24 +34,27 @@
居民群
-
{{ (5230).toLocaleString('en-US') }}
+
{{ Number(groupsCard.groupSum).toLocaleString('en-US') }}
群成员
-
235
+
{{ Number(groupsCard.totalSum).toLocaleString('en-US') }}
昨日新增
-
18
+
{{ Number(groupsCard.increaseSum).toLocaleString('en-US') }} +
昨日流失
-
18
+
{{ Number(groupsCard.decreaseSum).toLocaleString('en-US') }} +
-
+
+
@@ -58,14 +65,44 @@ export default { name: "wechat", data() { return { - + friendsCard: {}, + friendsData: [], + friendsMonth: [], + friendsNumber: [], + groupsCard: {}, + groupsData: [], + groupsMonth: [], + groupsNumber: [] } }, + created() { + this.getData() + }, mounted() { this.getFriendsEcharts() this.getGroupsEcharts() }, methods: { + getData() { + // 居民好友 + this.$http.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res=> { + if(res?.data) { + this.friendsCard = res.data.居民统计 + this.friendsData = res.data.居民好友数 + this.friendsMonth = this.friendsData.map(e=> e.month) + this.friendsNumber = this.friendsData.map(e=> e.totalNumber) + } + }) + // 居民群 + this.$http.post(`/app/wxgroupstatistic/getGroupNumber`).then(res=> { + if(res?.data) { + this.groupsCard = res.data.居民群统计 + this.groupsData = res.data.群成员数 + this.groupsMonth = this.groupsData.map(e=> e.month) + this.groupsNumber = this.groupsData.map(e=> e.totalNumber) + } + }) + }, getFriendsEcharts() { let friendsDom = document.getElementById('friends'); let myChart = echarts.init(friendsDom); @@ -75,7 +112,7 @@ export default { }, xAxis: { type: 'category', - data: ['1月', '2月', '3月', '4月', '5月'], + data: this.friendsMonth, axisTick: { show: false, } @@ -91,7 +128,7 @@ export default { }, series: [ { - data: [350, 230, 224, 218, 135], + data: this.friendsNumber, type: 'line', lineStyle: { color: '#3975C6', // 折线线条颜色 @@ -133,7 +170,7 @@ export default { }, xAxis: { type: 'category', - data: ['1月', '2月', '3月', '4月', '5月'], + data: this.groupsMonth, axisTick: { show: false, } @@ -149,7 +186,7 @@ export default { }, series: [ { - data: [350, 230, 224, 218, 135], + data: this.groupsNumber, type: 'line', lineStyle: { color: '#3975C6', // 折线线条颜色