统计
This commit is contained in:
@@ -56,7 +56,8 @@
|
|||||||
"vuedraggable": "^2.24.3",
|
"vuedraggable": "^2.24.3",
|
||||||
"vuex": "^3.2.0",
|
"vuex": "^3.2.0",
|
||||||
"vuex-persistedstate": "^4.0.0-beta.3",
|
"vuex-persistedstate": "^4.0.0-beta.3",
|
||||||
"wangeditor": "^4.7.10"
|
"wangeditor": "^4.7.10",
|
||||||
|
"wordcloud": "^1.2.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/runtime": "~7.12.0",
|
"@babel/runtime": "~7.12.0",
|
||||||
|
|||||||
@@ -7,12 +7,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="item_name">群聊敏感词</div>
|
<div class="item_name">群聊敏感词</div>
|
||||||
<div class="item_num">{{ Number(info.groupRecordSum)}}</div>
|
<div class="item_num">{{ Number(info.groupRecordSum) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="item_name">私聊敏感词</div>
|
<div class="item_name">私聊敏感词</div>
|
||||||
<div class="item_num">{{ Number(info.personRecordSum)}}</div>
|
<div class="item_num">{{ Number(info.personRecordSum) }}</div>
|
||||||
<!-- <img src="../img/down.png" alt="" class="imgs" v-show="info.personRecordSum !=0"> -->
|
<!-- <img src="../img/down.png" alt="" class="imgs" v-show="info.personRecordSum !=0"> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -21,7 +21,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="friends_box">
|
<div class="friends_box">
|
||||||
<div id="group" v-if="groupData.length > 0"></div>
|
<div id="group" v-if="groupData.length > 0"></div>
|
||||||
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
|
<AiEmpty
|
||||||
|
style="padding-top: 10px"
|
||||||
|
description="暂无数据"
|
||||||
|
v-else
|
||||||
|
></AiEmpty>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="head">
|
<div class="head">
|
||||||
@@ -29,173 +33,208 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="groups_box">
|
<div class="groups_box">
|
||||||
<div id="user" v-if="userData.length > 0"></div>
|
<div id="user" v-if="userData.length > 0"></div>
|
||||||
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
|
<AiEmpty
|
||||||
|
style="padding-top: 10px"
|
||||||
|
description="暂无数据"
|
||||||
|
v-else
|
||||||
|
></AiEmpty>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="groups_box" v-if="wordData">
|
||||||
|
<canvas id="main"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import echarts from 'echarts';
|
import echarts from "echarts";
|
||||||
|
import WordCloud from 'wordcloud';
|
||||||
export default {
|
export default {
|
||||||
name: "sensitive",
|
name: "sensitive",
|
||||||
props: {
|
props: {
|
||||||
departmentId: String
|
departmentId: String,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
info: {},
|
info: {},
|
||||||
groupData: [],
|
groupData: [],
|
||||||
userData: []
|
userData: [],
|
||||||
}
|
wordData: []
|
||||||
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getData()
|
this.getData();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getData() {
|
getData() {
|
||||||
// 居民好友
|
// 居民好友
|
||||||
this.$http.post(`/app/appsessionarchivekeywordrecord/getKeywordRecordStatistic?departmentId=${this.departmentId}`).then(res=> {
|
this.$http
|
||||||
if(res?.data) {
|
.post(
|
||||||
this.info = {...res.data}
|
`/app/appsessionarchivekeywordrecord/getKeywordRecordStatistic?departmentId=${this.departmentId}`
|
||||||
var groupMonth = res.data.groupRecordListMap.map(e=> e.dateDay)
|
)
|
||||||
this.groupData = res.data.groupRecordListMap.map(e=> e.cnt)
|
.then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.info = { ...res.data };
|
||||||
|
var groupMonth = res.data.groupRecordListMap.map((e) => e.dateDay);
|
||||||
|
this.groupData = res.data.groupRecordListMap.map((e) => e.cnt);
|
||||||
|
|
||||||
var userMonth = res.data.personRecordListMap.map(e=> e.dateDay)
|
var userMonth = res.data.personRecordListMap.map((e) => e.dateDay);
|
||||||
this.userData = res.data.personRecordListMap.map(e=> e.cnt)
|
this.userData = res.data.personRecordListMap.map((e) => e.cnt);
|
||||||
|
|
||||||
this.$nextTick(()=> {
|
res.data.wordNames.map((item) => {
|
||||||
this.getGroupEcharts(groupMonth, this.groupData)
|
var i = [item.wordName, item.wordCount*8]
|
||||||
this.getUserEcharts(userMonth, this.userData)
|
this.wordData.push(i)
|
||||||
})
|
})
|
||||||
}
|
this.$nextTick(() => {
|
||||||
})
|
this.getGroupEcharts(groupMonth, this.groupData);
|
||||||
|
this.getUserEcharts(userMonth, this.userData);
|
||||||
|
if(this.wordData) {
|
||||||
|
this.getKeyWordEcharts(this.wordData)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
getGroupEcharts(groupMonth, groupData) {
|
getGroupEcharts(groupMonth, groupData) {
|
||||||
let groupDom = document.getElementById('group');
|
let groupDom = document.getElementById("group");
|
||||||
let groupChart = echarts.init(groupDom);
|
let groupChart = echarts.init(groupDom);
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: "category",
|
||||||
data: groupMonth,
|
data: groupMonth,
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: "value",
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
}
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
x: 50,
|
||||||
|
y: 50,
|
||||||
},
|
},
|
||||||
grid:{
|
|
||||||
x:50,
|
|
||||||
y:50,
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: groupData,
|
data: groupData,
|
||||||
type: 'line',
|
type: "line",
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#3975C6', // 折线线条颜色
|
color: "#3975C6", // 折线线条颜色
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#3975C6', // 折角颜色
|
color: "#3975C6", // 折角颜色
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: "linear",
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 0,
|
x2: 0,
|
||||||
y2: 1,
|
y2: 1,
|
||||||
colorStops: [ // 渐变颜色
|
colorStops: [
|
||||||
|
// 渐变颜色
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#2891ff33',
|
color: "#2891ff33",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#2891ff00',
|
color: "#2891ff00",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
global: false,
|
global: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
option && groupChart.setOption(option);
|
option && groupChart.setOption(option);
|
||||||
},
|
},
|
||||||
getUserEcharts(userMonth, userData) {
|
getUserEcharts(userMonth, userData) {
|
||||||
let userDom = document.getElementById('user');
|
let userDom = document.getElementById("user");
|
||||||
let userChart = echarts.init(userDom);
|
let userChart = echarts.init(userDom);
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: "category",
|
||||||
data: userMonth,
|
data: userMonth,
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: "value",
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
}
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
x: 50,
|
||||||
|
y: 50,
|
||||||
},
|
},
|
||||||
grid:{
|
|
||||||
x:50,
|
|
||||||
y:50,
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: userData,
|
data: userData,
|
||||||
type: 'line',
|
type: "line",
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#3975C6', // 折线线条颜色
|
color: "#3975C6", // 折线线条颜色
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#3975C6', // 折角颜色
|
color: "#3975C6", // 折角颜色
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: "linear",
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 0,
|
x2: 0,
|
||||||
y2: 1,
|
y2: 1,
|
||||||
colorStops: [ // 渐变颜色
|
colorStops: [
|
||||||
|
// 渐变颜色
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#2891ff33',
|
color: "#2891ff33",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: '#2891ff00',
|
color: "#2891ff00",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
global: false,
|
global: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
option && userChart.setOption(option);
|
option && userChart.setOption(option);
|
||||||
}
|
},
|
||||||
|
getKeyWordEcharts(list) {
|
||||||
|
WordCloud(document.getElementById('main'), {
|
||||||
|
list: list
|
||||||
|
// [
|
||||||
|
// ['foo', 50],
|
||||||
|
// ['bar', 6],
|
||||||
|
// // ...
|
||||||
|
// ],
|
||||||
|
// 其他自定义选项
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -221,7 +260,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #FFF;
|
background: #fff;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
|
|
||||||
@@ -250,10 +289,11 @@ export default {
|
|||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 514px;
|
height: 514px;
|
||||||
background: #FFF;
|
background: #fff;
|
||||||
|
|
||||||
#user,
|
#user,
|
||||||
#group {
|
#group,
|
||||||
|
#main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,8 @@
|
|||||||
<img src="./img/user-img.png" alt="" v-if="item.type != 1 && !item.userAvatar">
|
<img src="./img/user-img.png" alt="" v-if="item.type != 1 && !item.userAvatar">
|
||||||
<div class="item-right">
|
<div class="item-right">
|
||||||
<div class="name-flex">
|
<div class="name-flex">
|
||||||
<p>{{item.userName}}</p>
|
<p v-if="item.type == 1">{{item.toName}}</p>
|
||||||
|
<p v-else>{{item.userName}}</p>
|
||||||
<div class="time">{{item.createTime.substring(0, 16)}}</div>
|
<div class="time">{{item.createTime.substring(0, 16)}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-html="item.text" class="item-content"></div>
|
<div v-html="item.text" class="item-content"></div>
|
||||||
@@ -71,14 +72,19 @@ export default {
|
|||||||
this.$http.post(`/app/appsessionarchivekeywordrecord/list`, null, {
|
this.$http.post(`/app/appsessionarchivekeywordrecord/list`, null, {
|
||||||
params: {
|
params: {
|
||||||
current: this.current,
|
current: this.current,
|
||||||
size: 10,
|
size: 15,
|
||||||
content: this.keyword,
|
content: this.keyword,
|
||||||
departmentId: this.deptUserList.length ? this.deptUserList[0].id : ''
|
departmentId: this.deptUserList.length ? this.deptUserList[0].id : ''
|
||||||
}
|
}
|
||||||
}).then(res=> {
|
}).then(res=> {
|
||||||
if(res?.data) {
|
if(res?.data) {
|
||||||
res.data.records.map((item) => {
|
res.data.records.map((item) => {
|
||||||
item.text = this.changeKeyRed(item.content, item.wordName)
|
if(item.type == 1) {
|
||||||
|
item.text = item.userName + ':' + this.changeKeyRed(item.content, item.wordName)
|
||||||
|
}else {
|
||||||
|
item.text = this.changeKeyRed(item.content, item.wordName)
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||||
this.pages = res.data.pages
|
this.pages = res.data.pages
|
||||||
|
|||||||
Reference in New Issue
Block a user