xiaohaizhao 9 месяцев назад
Родитель
Сommit
700ea6dd6a
1 измененных файлов с 79 добавлено и 7 удалено
  1. 79 7
      src/WebsiteManagement/dataStatistics/index.vue

+ 79 - 7
src/WebsiteManagement/dataStatistics/index.vue

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