工单管理
This commit is contained in:
liuye
330
src/project/xbot/AppDataStatistics/components/sensitive.vue
Normal file
330
src/project/xbot/AppDataStatistics/components/sensitive.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="sensitive">
|
||||
<div class="card">
|
||||
<div class="item">
|
||||
<div class="item_name">敏感词累计</div>
|
||||
<div class="item_num">{{ Number(info.recordSum) }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item_name">群聊敏感词</div>
|
||||
<div class="item_num">{{ Number(info.groupRecordSum) }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item_name">私聊敏感词</div>
|
||||
<div class="item_num">{{ Number(info.personRecordSum) }}</div>
|
||||
<!-- <img src="../img/down.png" alt="" class="imgs" v-show="info.personRecordSum !=0"> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="head">
|
||||
<span>群聊敏感词统计</span>
|
||||
</div>
|
||||
<div class="friends_box">
|
||||
<div id="group" v-if="groupData.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="user" v-if="userData.length > 0"></div>
|
||||
<AiEmpty
|
||||
style="padding-top: 10px"
|
||||
description="暂无数据"
|
||||
v-else
|
||||
></AiEmpty>
|
||||
</div>
|
||||
|
||||
<div class="groups_box" v-if="wordData">
|
||||
<div id="main"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import "echarts-wordcloud";
|
||||
|
||||
export default {
|
||||
name: "sensitive",
|
||||
props: {
|
||||
departmentId: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
groupData: [],
|
||||
userData: [],
|
||||
wordData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.$http
|
||||
.post(
|
||||
`/app/appsessionarchivekeywordrecord/getKeywordRecordStatistic?departmentId=${this.departmentId}`
|
||||
)
|
||||
.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);
|
||||
this.userData = res.data.personRecordListMap.map((e) => e.cnt);
|
||||
|
||||
res.data.wordNames.map((item) => {
|
||||
var i = { name: item.wordName, value: item.wordCount };
|
||||
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) {
|
||||
let groupDom = document.getElementById("group");
|
||||
let groupChart = echarts.init(groupDom);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: groupMonth,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
x: 50,
|
||||
y: 50,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: groupData,
|
||||
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 && groupChart.setOption(option);
|
||||
},
|
||||
getUserEcharts(userMonth, userData) {
|
||||
let userDom = document.getElementById("user");
|
||||
let userChart = echarts.init(userDom);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: userMonth,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
x: 50,
|
||||
y: 50,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: userData,
|
||||
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 && userChart.setOption(option);
|
||||
},
|
||||
getKeyWordEcharts(data) {
|
||||
var chart = echarts.init(document.getElementById("main"));
|
||||
|
||||
chart.setOption({
|
||||
series: [
|
||||
{
|
||||
type: "wordCloud",
|
||||
sizeRange: [15, 80],
|
||||
rotationRange: [0, 0],
|
||||
rotationStep: 45,
|
||||
gridSize: 8,
|
||||
shape: "pentagon",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
textStyle: {
|
||||
normal: {
|
||||
color: function () {
|
||||
return (
|
||||
"rgb(" +
|
||||
[
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(",") +
|
||||
")"
|
||||
);
|
||||
},
|
||||
fontFamily: "sans-serif",
|
||||
fontWeight: "normal",
|
||||
},
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333",
|
||||
},
|
||||
},
|
||||
data,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
|
||||
#user,
|
||||
#group,
|
||||
#main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user