|
@@ -2,6 +2,11 @@
|
|
|
<div class="container">
|
|
|
<visitorStatistics />
|
|
|
|
|
|
+ <div class="card">
|
|
|
+ <cord-top title="用户类型分析" @returnWhere="getUserTypeAnalysis" />
|
|
|
+ <div ref="userTypeAnalysis" style="margin-top: 20px"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="card">
|
|
|
<cord-top title="留言分析" @returnWhere="getMessageAnalysis" />
|
|
|
<div ref="messageAnalysis" style="margin-top: 20px"></div>
|
|
@@ -17,12 +22,13 @@
|
|
|
<script>
|
|
|
import cordTop from "./modules/header.vue";
|
|
|
import visitorStatistics from "./modules/visitorStatistics";
|
|
|
-import { Line } from "@antv/g2plot";
|
|
|
+import { Line, Column } from "@antv/g2plot";
|
|
|
|
|
|
export default {
|
|
|
components: { visitorStatistics, cordTop },
|
|
|
data() {
|
|
|
return {
|
|
|
+ userTypeAnalysis: null, //用户类型分析
|
|
|
messageAnalysis: null, //留言分析
|
|
|
serviceRequestAnalysis: null, //服务申请分析
|
|
|
siteid: "", //站点id
|
|
@@ -30,10 +36,82 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.siteid = JSON.parse(sessionStorage.getItem("active_account")).siteid;
|
|
|
+ // 获取用户类型分析
|
|
|
+ this.getUserTypeAnalysis();
|
|
|
+ // 获取留言分析
|
|
|
this.getMessageAnalysis();
|
|
|
+ // 获取服务申请分析
|
|
|
this.getServiceRequestAnalysis();
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 获取用户类型分析
|
|
|
+ getUserTypeAnalysis(detail) {
|
|
|
+ let content = {
|
|
|
+ siteid: this.siteid,
|
|
|
+ type: "近七日",
|
|
|
+ };
|
|
|
+ if (detail) {
|
|
|
+ if (detail.type) {
|
|
|
+ content.type = detail.type;
|
|
|
+ } else {
|
|
|
+ content.type = "";
|
|
|
+ content.where = detail;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$api
|
|
|
+ .requested({
|
|
|
+ id: 2025010309354603,
|
|
|
+ content,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("获取用户类型分析", res);
|
|
|
+ if (res.code != 1) return;
|
|
|
+ let type = [
|
|
|
+ this.$t("时间段内登陆用户"),
|
|
|
+ this.$t("游客每日的访客量柱"),
|
|
|
+ ];
|
|
|
+ let list = [];
|
|
|
+ res.data.filter((v) => {
|
|
|
+ list.push({
|
|
|
+ date: v.date,
|
|
|
+ count: Math.ceil(Math.random() * 10) + 1 || v.visitorcount,
|
|
|
+ type: type[0],
|
|
|
+ });
|
|
|
+ list.push({
|
|
|
+ date: v.date,
|
|
|
+ count: Math.ceil(Math.random() * 10) + 1 || v.logincount,
|
|
|
+ type: type[1],
|
|
|
+ });
|
|
|
+ });
|
|
|
+ if (detail) {
|
|
|
+ this.userTypeAnalysis.changeData(list);
|
|
|
+ } else {
|
|
|
+ this.userTypeAnalysis = new Column(this.$refs.userTypeAnalysis, {
|
|
|
+ height: 300,
|
|
|
+ data: list,
|
|
|
+ isGroup: true,
|
|
|
+ xField: "date",
|
|
|
+ yField: "count",
|
|
|
+ color: ["#3874F6", "#F29C37"],
|
|
|
+ seriesField: "type",
|
|
|
+ label: {
|
|
|
+ // 可手动配置 label 数据标签位置
|
|
|
+ position: "top", // 'top', 'middle', 'bottom'
|
|
|
+ // 可配置附加的布局方法
|
|
|
+ layout: [
|
|
|
+ // 柱形图数据标签位置自动调整
|
|
|
+ { type: "interval-adjust-position" },
|
|
|
+ // 数据标签防遮挡
|
|
|
+ { type: "interval-hide-overlap" },
|
|
|
+ // 数据标签文颜色自动调整
|
|
|
+ { type: "adjust-color" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.userTypeAnalysis.render();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
// 获取留言分析
|
|
|
getMessageAnalysis(detail) {
|
|
|
let content = {
|
|
@@ -68,9 +146,6 @@ export default {
|
|
|
height: 300,
|
|
|
data: list,
|
|
|
xField: "date",
|
|
|
- scrollbar: {
|
|
|
- type: "horizontal",
|
|
|
- },
|
|
|
seriesField: "type",
|
|
|
yField: "count",
|
|
|
color: "#5588F7",
|
|
@@ -126,9 +201,6 @@ export default {
|
|
|
height: 300,
|
|
|
data: list,
|
|
|
xField: "date",
|
|
|
- scrollbar: {
|
|
|
- type: "horizontal",
|
|
|
- },
|
|
|
seriesField: "type",
|
|
|
yField: "count",
|
|
|
color: "#F29C37",
|