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

绘画存档统计

Browse Source
This commit is contained in:
liuye
2023-06-19 17:28:47 +08:00
parent f779b094cd
commit 656d878955
8 changed files with 1377 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
src/project/pidu/AppDataStatistics/components/sensitive.vue Normal file
View File

@@ -0,0 +1,277 @@
<template>
<div class="sensitive">
<div class="card">
<div class="item">
<div class="item_name">敏感词累计</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">{{ 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">{{ Number(friendsCard.removeCustomerCount).toLocaleString('en-US') }}
<img src="../img/down.png" alt="" class="imgs" v-show="friendsCard.removeCustomerCount !=0"></div>
</div>
</div>
<div class="head">
<span>群聊敏感词统计</span>
</div>
<div class="friends_box">
<div id="friends" v-if="friendsData.length > 0"></div>
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
</div>
<div class="head">
<span>单聊敏感词统计</span>
</div>
<div class="groups_box">
<div id="groups" v-if="groupsData.length > 0"></div>
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
name: "sensitive",
props: {
departmentId: String
},
data() {
return {
friendsCard: {},
friendsData: [],
friendsMonth: [],
friendsNumber: [],
groupsCard: {},
groupsData: [],
groupsMonth: [],
groupsNumber: []
}
},
created() {
this.getData()
},
methods: {
getData() {
// 居民好友
this.$http.post(`/app/wxgroupstatistic/getCustommerNumber?departmentId=${this.departmentId}`).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.$nextTick(()=> {
this.getFriendsEcharts(this.friendsMonth,this.friendsNumber)
})
}
})
// 居民群
this.$http.post(`/app/wxgroupstatistic/getGroupNumber?departmentId=${this.departmentId}`).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)
this.$nextTick(()=> {
this.getGroupsEcharts(this.groupsMonth,this.groupsNumber)
})
}
})
},
getFriendsEcharts(friendsMonth,friendsNumber) {
let friendsDom = document.getElementById('friends');
let myFriendsChart = echarts.init(friendsDom);
let option = {
tooltip: {
trigger: "axis",
},
xAxis: {
type: 'category',
data: friendsMonth,
axisTick: {
show: false,
}
},
yAxis: {
type: 'value',
axisLine: {
show: false,
},
axisTick: {
show: false,
}
},
grid:{
x:50,
y:50,
},
series: [
{
data: friendsNumber,
type: 'line',
lineStyle: {
color: '#3975C6', // 折线线条颜色
},
itemStyle: {
color: '#3975C6', // 折角颜色
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: '#2891ff33',
},
{
offset: 1,
color: '#2891ff00',
},
],
global: false,
},
},
}
]
};
option && myFriendsChart.setOption(option);
},
getGroupsEcharts(groupsMonth,groupsNumber) {
let groupsDom = document.getElementById('groups');
let myGroupsChart = echarts.init(groupsDom);
let option = {
tooltip: {
trigger: "axis",
},
xAxis: {
type: 'category',
data: groupsMonth,
axisTick: {
show: false,
}
},
yAxis: {
type: 'value',
axisLine: {
show: false,
},
axisTick: {
show: false,
}
},
grid:{
x:50,
y:50,
},
series: [
{
data: groupsNumber,
type: 'line',
lineStyle: {
color: '#3975C6', // 折线线条颜色
},
itemStyle: {
color: '#3975C6', // 折角颜色
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: '#2891ff33',
},
{
offset: 1,
color: '#2891ff00',
},
],
global: false,
},
},
}
]
};
option && myGroupsChart.setOption(option);
}
},
}
</script>
<style lang="scss" scoped>
.sensitive {
padding: 0 32px;
box-sizing: border-box;
.head {
margin-top: 32px;
span:first-child {
font-size: 32px;
color: #333333;
font-weight: 600;
}
span:last-child {
font-size: 26px;
color: #999999;
}
}
.card {
padding: 24px 0;
box-sizing: border-box;
display: flex;
text-align: center;
align-items: center;
background: #FFF;
border-radius: 16px;
margin-top: 24px;
.item {
flex: 1;
.item_name {
color: #666666;
}
.item_num {
color: #000000;
font-size: 36px;
font-weight: 600;
}
.imgs {
width: 30px;
height: 30px;
}
}
}
.friends_box,
.groups_box {
margin-top: 24px;
width: 100%;
height: 514px;
background: #FFF;
#friends,
#groups {
width: 100%;
height: 100%;
}
}
}
</style>