356 lines
9.1 KiB
Vue
356 lines
9.1 KiB
Vue
<template>
|
|
<div class="module-content">
|
|
<h4>内容</h4>
|
|
<ul class="data-list">
|
|
<li>
|
|
<p>今日老师发布内容数</p>
|
|
<h5>{{ currentData.advisorGroupContent }}</h5>
|
|
</li>
|
|
<li>
|
|
<p>今日助教发布内容数</p>
|
|
<h5>{{ currentData.assistantGroupContent }}</h5>
|
|
</li>
|
|
<li>
|
|
<p>今日用户互动内容数</p>
|
|
<h5>{{ currentData.customerGroupContent }}</h5>
|
|
</li>
|
|
<li>
|
|
<p>今日老师私聊内容数</p>
|
|
<h5>{{ currentData.advisorPrivateContent }}</h5>
|
|
</li>
|
|
<li>
|
|
<p>今日助教私聊内容数</p>
|
|
<h5>{{ currentData.assistantPrivateContent }}</h5>
|
|
</li>
|
|
<li>
|
|
<p>今日用户私聊内容数</p>
|
|
<h5>{{ currentData.customerPrivateContent }}</h5>
|
|
</li>
|
|
</ul>
|
|
<div class="chart-header">
|
|
<h5>内容趋势</h5>
|
|
<el-form :inline="true" size="mini" :model="formInline" class="my-form">
|
|
<el-form-item label="" prop="timeType">
|
|
<el-select
|
|
v-model="timeType"
|
|
class="filter-item"
|
|
style="width: 100px"
|
|
>
|
|
<el-option
|
|
v-for="item in [
|
|
{ label: '总数据', id: 1 },
|
|
{ label: '年', id: 2 },
|
|
{ label: '月', id: 3 },
|
|
{ label: '周', id: 4 },
|
|
{ label: '日', id: 5 }
|
|
]"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="" prop="username">
|
|
<el-date-picker
|
|
v-if="timeType === 2"
|
|
v-model="time"
|
|
type="year"
|
|
placeholder="选择年"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
style="width: 100px"
|
|
/>
|
|
<el-date-picker
|
|
v-else-if="timeType === 3"
|
|
v-model="time"
|
|
type="month"
|
|
placeholder="选择月"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
style="width: 100px"
|
|
/>
|
|
<el-date-picker
|
|
v-else-if="timeType === 4"
|
|
v-model="time"
|
|
type="week"
|
|
format="yyyy 第 WW 周"
|
|
placeholder="选择周"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
style="width: 100px"
|
|
:picker-options="{ firstDayOfWeek: 1 }"
|
|
/>
|
|
<el-date-picker
|
|
v-else-if="timeType === 5"
|
|
v-model="time"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
style="width: 100px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-button type="primary" @click="onSubmit">搜索</el-button>
|
|
<el-button @click="toExport">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<LineChart ref="lineChartRef" :option="echartOption" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import LineChart from "./LineChart";
|
|
import { getCircleStatistics } from "@/api/circle";
|
|
import dayjs from "dayjs";
|
|
export default {
|
|
components: { LineChart },
|
|
props: {
|
|
currentData: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
formInline: {
|
|
groupId: this.$route.query.id,
|
|
startDate: "",
|
|
endDate: ""
|
|
},
|
|
timeType: 1,
|
|
time: "",
|
|
dataList: [],
|
|
echartOption: {
|
|
tooltip: {
|
|
trigger: "axis"
|
|
},
|
|
legend: {
|
|
data: [
|
|
"老师发布内容数",
|
|
"助教发布内容数",
|
|
"用户互动内容数",
|
|
"老师私聊内容数",
|
|
"助教私聊内容数",
|
|
"用户私聊内容数"
|
|
]
|
|
},
|
|
grid: {
|
|
top: "40px",
|
|
left: "20px",
|
|
right: "20px",
|
|
bottom: "3%",
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: "value"
|
|
},
|
|
series: []
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
timeType(value) {
|
|
this.time = this.formInline.startDate = this.formInline.endDate = "";
|
|
},
|
|
time(value) {
|
|
this.formInline.startDate = value;
|
|
if (value === null || value === "") {
|
|
return (this.formInline.endDate = null);
|
|
}
|
|
if (this.formInline.startDate !== null) {
|
|
this.formInline.startDate = dayjs(this.formInline.startDate).format(
|
|
"YYYY-MM-DD HH:mm:ss"
|
|
);
|
|
}
|
|
if (this.timeType == 2) {
|
|
this.formInline.endDate = dayjs(value)
|
|
.add(1, "year")
|
|
.format("YYYY-MM-DD HH:mm:ss");
|
|
} else if (this.timeType == 3) {
|
|
this.formInline.endDate = dayjs(value)
|
|
.add(1, "month")
|
|
.format("YYYY-MM-DD HH:mm:ss");
|
|
} else if (this.timeType == 4) {
|
|
this.formInline.startDate = dayjs(value)
|
|
.subtract(1, "day")
|
|
.format("YYYY-MM-DD HH:mm:ss");
|
|
this.formInline.endDate = dayjs(value)
|
|
.add(6, "day")
|
|
.format("YYYY-MM-DD HH:mm:ss");
|
|
} else if (this.timeType == 5) {
|
|
this.formInline.endDate = dayjs(value)
|
|
.add(1, "day")
|
|
.format("YYYY-MM-DD HH:mm:ss");
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
const ret = await getCircleStatistics(this.formInline);
|
|
if (ret && ret.data) {
|
|
this.dataList = ret.data;
|
|
const xAxisData = [];
|
|
const seriesData = {
|
|
advisorGroupContent: {
|
|
name: "老师发布内容数",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: []
|
|
},
|
|
assistantGroupContent: {
|
|
name: "助教发布内容数",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: []
|
|
},
|
|
customerGroupContent: {
|
|
name: "用户互动内容数",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: []
|
|
},
|
|
advisorPrivateContent: {
|
|
name: "老师私聊内容数",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: []
|
|
},
|
|
assistantPrivateContent: {
|
|
name: "助教私聊内容数",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: []
|
|
},
|
|
customerPrivateContent: {
|
|
name: "用户私聊内容数",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: []
|
|
}
|
|
};
|
|
this.dataList.forEach(item => {
|
|
for (const key in seriesData) {
|
|
seriesData[key].data.push(item[key]);
|
|
}
|
|
xAxisData.push(item.date);
|
|
});
|
|
this.echartOption.xAxis.data = [];
|
|
this.echartOption.xAxis.data = xAxisData;
|
|
this.echartOption.series = [];
|
|
for (const key in seriesData) {
|
|
this.echartOption.series.push(seriesData[key]);
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$refs.lineChartRef.drawChart();
|
|
});
|
|
}
|
|
},
|
|
onSubmit() {
|
|
this.getData();
|
|
},
|
|
formatJson(filterVal, jsonData) {
|
|
return jsonData.map(v =>
|
|
filterVal.map(j => {
|
|
return v[j];
|
|
})
|
|
);
|
|
},
|
|
async toExport() {
|
|
this.downloadLoading = true;
|
|
const { data, code, message } = await getCircleStatistics(
|
|
this.formInline
|
|
);
|
|
if (code === 0) {
|
|
import("@/utils/export2Excel").then(excel => {
|
|
const tHeader = [
|
|
"日期",
|
|
"老师发布内容数",
|
|
"助教发布内容数",
|
|
"用户互动内容数",
|
|
"老师私聊内容数",
|
|
"助教私聊内容数",
|
|
"用户私聊内容数"
|
|
];
|
|
const filterVal = [
|
|
"date",
|
|
"advisorGroupContent",
|
|
"assistantGroupContent",
|
|
"customerGroupContent",
|
|
"advisorPrivateContent",
|
|
"assistantPrivateContent",
|
|
"customerPrivateContent"
|
|
];
|
|
const excelData = this.formatJson(filterVal, data);
|
|
excel.export_json_to_excel({
|
|
header: tHeader,
|
|
data: excelData,
|
|
filename: "圈子内容统计"
|
|
});
|
|
console.log("list=>", data);
|
|
});
|
|
} else {
|
|
this.$message.error(message);
|
|
}
|
|
this.downloadLoading = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.my-form {
|
|
::v-deep .el-form-item--mini.el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.module-content {
|
|
margin-bottom: 20px;
|
|
h4 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.data-list {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 20px;
|
|
li {
|
|
width: 250px;
|
|
margin-right: 20px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
padding: 10px;
|
|
p {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
}
|
|
h5 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
.chart-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
h5 {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|