kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_wxcp_app into dev

Browse Source
This commit is contained in:
liuye
2022-12-22 16:36:19 +08:00
parent a0d296b740 8a546b7b7d
commit 486d8183df
5 changed files with 382 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/project/saas/AppDataStatistics/AppDataStatistics.vue
View File

@@ -2,7 +2,7 @@
<div class="AppDataStatistics">
<AiTopFixed>
<div class="area-content">
<AiAreaPicker v-model="areaId" :name.sync="areaName">
<AiAreaPicker v-model="areaId" :name.sync="areaName" :area-id="user.areaId" @select="areaSelect">
<div flex>
<img src="./img/location.png" alt="" class="icon-img">
<AiMore v-model="areaName" icon="arrow-down"/>
@@ -13,7 +13,7 @@
<div class="tab-list">
<div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
</div>
<component :is="tabList[tabIndex].component" class="component" />
<component ref='list' :is="tabList[tabIndex].component" :areaId="areaId" class="component" />
</div>
</template>
@@ -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 = "数据统计"

248
src/project/saas/AppDataStatistics/components/message.vue
View File

@@ -4,25 +4,32 @@
<span>消息回复率</span>
</div>
<div class="echarts_list">
<div id="echarts1"></div>
<div id="echarts2"></div>
<div id="echarts3"></div>
</div>
<div class="head">
<span>单聊统计</span>
</div>
<div class="card">
<div class="item">
<div class="item_name">居民好友</div>
<div class="item_num">{{ (235625).toLocaleString('en-US') }}</div>
<div class="item" :class="privateCurrent == 0? 'active':''" @click="privateCurrent = 0">
<div class="item_name">单聊会话</div>
<div class="item_num" v-if="privateCard">{{ Number(privateCard.chatCnt).toLocaleString('en-US') }}</div>
<div class="item_num" v-else>0</div>
</div>
<div class="item">
<div class="item" :class="privateCurrent == 1? 'active':''" @click="privateCurrent = 1">
<div class="item_name">单聊消息</div>
<div class="item_num">235</div>
<div class="item_num" v-if="privateCard">{{ Number(privateCard.messageCnt).toLocaleString('en-US') }}</div>
<div class="item_num" v-else>0</div>
</div>
</div>
<div class="privateChat_box">
<div id="privateChat"></div>
<!-- <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty> -->
</div>
<div class="head">
@@ -30,22 +37,26 @@
</div>
<div class="card">
<div class="item">
<div class="item" :class="groupCurrent == 0? 'active':''" @click="groupCurrent = 0">
<div class="item_name">活跃群聊</div>
<div class="item_num">111</div>
<div class="item_num" v-if="groupCard">{{ Number(groupCard.chatHasMsg).toLocaleString('en-US') }}</div>
<div class="item_num" v-else>0</div>
</div>
<div class="item">
<div class="item" :class="groupCurrent == 1? 'active':''" @click="groupCurrent = 1">
<div class="item_name">活跃群成员</div>
<div class="item_num">235</div>
<div class="item_num" v-if="groupCard">{{ Number(groupCard.memberHasMsg).toLocaleString('en-US') }}</div>
<div class="item_num" v-else>0</div>
</div>
<div class="item">
<div class="item" :class="groupCurrent == 2? 'active':''" @click="groupCurrent = 2">
<div class="item_name">群聊消息</div>
<div class="item_num">{{ (235625).toLocaleString('en-US') }}</div>
<div class="item_num" v-if="groupCard">{{ Number(groupCard.msgTotal).toLocaleString('en-US') }}</div>
<div class="item_num" v-else>0</div>
</div>
</div>
<div class="groupChat_box">
<div id="groupChat"></div>
<!-- <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty> -->
</div>
</div>
@@ -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%;
}
}
}
</style>

79
src/project/saas/AppDataStatistics/components/resident.vue
View File

@@ -1,17 +1,9 @@
<template>
<div class="resident">
<div class="resident_num">
<div class="num_item">
<p class="num_item_name">居民总数</p>
<p class="num_item_data">2036</p>
</div>
<div class="num_item">
<p class="num_item_name">居民总数</p>
<p class="num_item_data">2036</p>
</div>
<div class="num_item">
<p class="num_item_name">居民总数</p>
<p class="num_item_data">2036</p>
<div class="num_item" v-for="(item,index) in cardArray" :key="index">
<p class="num_item_name">{{ item }}</p>
<p class="num_item_data">{{ Number(data[item]).toLocaleString('en-US') }}</p>
</div>
</div>
@@ -19,36 +11,48 @@
<div class="specialPeople">
<h3>特殊人群</h3>
<div class="specialBox">
<div id="specialEcharts"></div>
<div id="specialEcharts" v-if="specialFlag"></div>
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
</div>
</div>
<!-- 年龄分布 -->
<div class="ageDistribution">
<h3>年龄分布</h3>
<div class="ageBox">
<div id="ageEcharts"></div>
<div id="ageEcharts" v-if="ageFlag"></div>
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
</div>
</div>
<!-- 男女比例 -->
<div class="ageProportion">
<h3>男女比例</h3>
<div class="proportionBox">
<div id="proportionEcharts"></div>
<div id="proportionEcharts" v-if="sexFlag"></div>
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import echarts from 'echarts';
export default {
name: "resident",
props: ['areaId'],
data() {
return {
data: {},
specialPeople: {},
specialFlag: true,
ageArray: [],
ageFlag: true,
sexArray: [],
sexFlag: true,
cardArray: ['居民总数','本地居民','流动人口']
}
},
created() {
this.getData()
},
mounted() {
this.getSpecialEcharts()
@@ -56,6 +60,23 @@ export default {
this.getAgeProportion()
},
methods: {
getData() {
this.$http.post(`/app/appresident/residentStatisticsByAreaId?areaId=${this.areaId}`).then(res=> {
if(res?.data) {
this.data = res.data
this.specialPeople = res.data.特殊人群
for(let key in this.specialPeople) {
if(this.specialPeople[key] == 0) {
this.specialFlag = false
}
}
this.ageArray = res.data.年龄层次.map(v=> v.v2)
this.ageFlag = !this.ageArray.every(e=> e==0)
this.sexArray = res.data.男女比例.map(v=> v.v2)
this.sexFlag = !this.sexArray.every(e=> e==0)
}
})
},
// 特殊人群
getSpecialEcharts() {
let specialDom = document.getElementById('specialEcharts');
@@ -110,10 +131,11 @@ export default {
maxSurfaceAngle: 80
},
data: [
{ value: 1048, name: '退伍军人' },
{ value: 735, name: '吸毒人员' },
{ value: 580, name: '刑满释放人员' },
{ value: 484, name: '高龄老人' },
{ value: this.specialPeople.吸毒人员, name: '吸毒人员' },
{ value: this.specialPeople.残疾人, name: '残疾人' },
{ value: this.specialPeople.刑满释放人员, name: '刑满释放人员' },
{ value: this.specialPeople.社区矫正人群, name: '社区矫正人群' },
{ value: this.specialPeople.精神病人, name: '精神病人' },
]
}
]
@@ -141,16 +163,15 @@ export default {
},
series: [
{
data: [136, 195, 162, 138, {
value: 98,
itemStyle: {
color: '#F3A963'
}
}],
data: this.ageArray,
type: 'bar',
itemStyle: {
normal: {
color: "#3975C6",
// 每个柱子的颜色
color: function(params) {
var colorList = ['#3975C6','#3975C6', '#3975C6', '#3975C6', '#F3A963',];
return colorList[params.dataIndex]
},
label: {
show: true, //开启显示
position: 'top', //在上方显示
@@ -222,8 +243,8 @@ export default {
maxSurfaceAngle: 80
},
data: [
{ value: 1048, name: '男' },
{ value: 735, name: '女' },
{ value: this.sexArray[1].v2, name: '男' },
{ value: this.sexArray[0].v2, name: '女' },
]
}
]

75
src/project/saas/AppDataStatistics/components/update.vue
View File

@@ -2,36 +2,12 @@
<div class="update">
<h3>更新统计</h3>
<div class="information">
<u-subsection :list="list" :current="1"></u-subsection>
<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
<div class="card_list">
<div class="card">
<div class="card_name">新增居民档案</div>
<div class="card_num">234</div>
</div>
<div class="card">
<div class="card_name">居民档案更新</div>
<div class="card_num">234</div>
</div>
<div class="card">
<div class="card_name">新增网格员</div>
<div class="card_num">234</div>
</div>
<div class="card">
<div class="card_name">减少网格员</div>
<div class="card_num">234</div>
</div>
<div class="card">
<div class="card_name">新增积分事件</div>
<div class="card_num">234</div>
</div>
<div class="card">
<div class="card_name">新增积分</div>
<div class="card_num">234</div>
</div>
<div class="card">
<div class="card_name">新增走访记录</div>
<div class="card_num">234</div>
<div class="card" v-for="(item,index) in dataArray" :key="index">
<div class="card_name">{{ item }}</div>
<div class="card_num">{{ Number(data[item]).toLocaleString('en-US') }}</div>
</div>
</div>
</div>
@@ -41,30 +17,41 @@
<script>
export default {
name: "update",
props: ['areaId'],
data() {
return {
list: [
{
name: '本日'
},
{
name: '本周'
},
{
name: '本月'
},
{
name: '本年'
}
{ name: '本日' },
{ name: '本周' },
{ name: '本月' },
{ name: '本年' }
],
current: 1,
current: 0,
data: {},
dataArray: ['新增居民档案','新增网格员','新增走访记录','新增矛盾调解','新增宣发记录'],
}
},
created() {
this.getData()
},
methods: {
sectionChange(e) {
this.current = e
this.getData()
},
getData() {
this.$http.post(`/app/wxgroupstatistic/updateStatistics`,null,{
params: {
areaId: this.areaId,
type: this.current
}
}).then(res=> {
if(res?.data) {
this.data = res.data
}
})
}
},
mounted() {},
methods: {},
}
</script>

65
src/project/saas/AppDataStatistics/components/wechat.vue
View File

@@ -7,20 +7,24 @@
<div class="card">
<div class="item">
<div class="item_name">居民好友</div>
<div class="item_num">{{ (235625).toLocaleString('en-US') }}</div>
<div class="item_num">{{ Number(friendsCard.customerTotal).toLocaleString('en-US') }}</div>
</div>
<div class="item">
<div class="item_name">昨日新增</div>
<div class="item_num">235 <img src="../img/up.png" alt="" class="imgs"></div>
<div class="item_num">{{ Number(friendsCard.addCustomerCount).toLocaleString('en-US') }}
<img src="../img/up.png" alt="" class="imgs" v-show="friendsCard.addCustomerCount != 0">
</div>
</div>
<div class="item">
<div class="item_name">昨日流失</div>
<div class="item_num">18 <img src="../img/down.png" alt="" class="imgs"></div>
<div class="item_num">{{ Number(friendsCard.removeCustomerCount).toLocaleString('en-US') }}
<img src="../img/down.png" alt="" class="imgs" v-show="friendsCard.removeCustomerCount !=0"></div>
</div>
</div>
<div class="friends_box">
<div id="friends"></div>
<div id="friends" v-if="friendsData.length"></div>
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
</div>
<div class="head">
@@ -30,24 +34,27 @@
<div class="card">
<div class="item">
<div class="item_name">居民群</div>
<div class="item_num">{{ (5230).toLocaleString('en-US') }}</div>
<div class="item_num">{{ Number(groupsCard.groupSum).toLocaleString('en-US') }}</div>
</div>
<div class="item">
<div class="item_name">群成员</div>
<div class="item_num">235</div>
<div class="item_num">{{ Number(groupsCard.totalSum).toLocaleString('en-US') }}</div>
</div>
<div class="item">
<div class="item_name">昨日新增</div>
<div class="item_num">18 <img src="../img/up.png" alt="" class="imgs"></div>
<div class="item_num">{{ Number(groupsCard.increaseSum).toLocaleString('en-US') }}
<img src="../img/up.png" alt="" class="imgs" v-show="groupsCard.increaseSum"></div>
</div>
<div class="item">
<div class="item_name">昨日流失</div>
<div class="item_num">18 <img src="../img/down.png" alt="" class="imgs"></div>
<div class="item_num">{{ Number(groupsCard.decreaseSum).toLocaleString('en-US') }}
<img src="../img/down.png" alt="" class="imgs" v-show="groupsCard.decreaseSum"></div>
</div>
</div>
<div class="groups_box">
<div id="groups"></div>
<div id="groups" v-if="groupsData.length"></div>
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
</div>
</div>
</template>
@@ -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', // 折线线条颜色