This commit is contained in:
liuye
2023-06-21 15:54:43 +08:00
parent 09a9ffd3a1
commit cdc1531293
3 changed files with 116 additions and 69 deletions

View File

@@ -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",

View File

@@ -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%;
} }

View File

@@ -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