+
活跃群聊
-
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 @@
-
-
-
-
居民总数
-
2036
+
+
{{ item }}
+
{{ Number(data[item]).toLocaleString('en-US') }}
@@ -19,36 +11,48 @@
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', // 折线线条颜色