xiaohaizhao 9 月之前
父节点
当前提交
6782a24844

+ 129 - 6
src/WebsiteManagement/dataStatistics/index.vue

@@ -2,6 +2,15 @@
   <div class="container">
     <visitorStatistics />
 
+    <div class="card">
+      <cord-top title="访客趋势分析" @returnWhere="getVisitorTrend" />
+      <div ref="visitorTrend" style="margin-top: 20px"></div>
+    </div>
+    <div class="card">
+      <cord-top title="访问量趋势分析" @returnWhere="getPageViewTrend" />
+      <div ref="pageViewTrend" style="margin-top: 20px"></div>
+    </div>
+
     <div class="card">
       <cord-top title="用户类型分析" @returnWhere="getUserTypeAnalysis" />
       <div ref="userTypeAnalysis" style="margin-top: 20px"></div>
@@ -56,6 +65,8 @@ export default {
   components: { visitorStatistics, cordTop, rankingList },
   data() {
     return {
+      visitorTrend: null, //访客趋势
+      pageViewTrend: null, //访问量趋势
       userTypeAnalysis: null, //用户类型分析
       moduleClicksAnalysis: null, //各模块点击量分析
       moduleClicksAnalysisTable: null, //各模块点击量分析表格
@@ -66,6 +77,10 @@ export default {
   },
   created() {
     this.siteid = JSON.parse(sessionStorage.getItem("active_account")).siteid;
+    // 获取访客趋势
+    this.getVisitorTrend();
+    // 获取访问量趋势
+    this.getPageViewTrend();
     // 获取用户类型分析
     this.getUserTypeAnalysis();
     // 获取各模块点击量分析
@@ -76,6 +91,117 @@ export default {
     this.getServiceRequestAnalysis();
   },
   methods: {
+    // 获取访客趋势
+    getVisitorTrend(detail) {
+      let content = {
+        nocache: true,
+        siteid: this.siteid,
+        type: "近七日",
+        datatype: "访客",
+      };
+      if (detail) {
+        if (detail.type) {
+          content.type = detail.type;
+        } else {
+          content.type = "";
+          content.where = detail;
+        }
+      }
+      this.$api
+        .requested({
+          id: 2025010214275903,
+          content,
+        })
+        .then((res) => {
+          if (res.code != 1) return;
+          let type = this.$t("访客数量");
+          let list = res.data.map((v) => {
+            v.type = type;
+            return v;
+          });
+          if (detail) {
+            this.visitorTrend.update({
+              scrollbar: list.length > 14 ? { type: "horizontal" } : null,
+            });
+            this.visitorTrend.changeData(list);
+          } else {
+            this.visitorTrend = new Line(this.$refs.visitorTrend, {
+              height: 300,
+              data: list,
+              xField: "date",
+              seriesField: "type",
+              yField: "count",
+              color: "#5588F7",
+              tooltip: {
+                formatter: (datum) => {
+                  return {
+                    name: type,
+                    value: datum.count,
+                  };
+                },
+              },
+              point: {
+                shape: "breath-point",
+              },
+            });
+            this.visitorTrend.render();
+          }
+        });
+    },
+    // 获取访问量趋势
+    getPageViewTrend(detail) {
+      let content = {
+        nocache: true,
+        siteid: this.siteid,
+        type: "近七日",
+        datatype: "访问量",
+      };
+      if (detail) {
+        if (detail.type) {
+          content.type = detail.type;
+        } else {
+          content.type = "";
+          content.where = detail;
+        }
+      }
+      this.$api
+        .requested({
+          id: 2025010214275903,
+          content,
+        })
+        .then((res) => {
+          if (res.code != 1) return;
+          let type = this.$t("重复访客数量");
+          let list = res.data.map((v) => {
+            v.type = type;
+            return v;
+          });
+          if (detail) {
+            this.pageViewTrend.update({
+              scrollbar: list.length > 14 ? { type: "horizontal" } : null,
+            });
+            this.pageViewTrend.changeData(list);
+          } else {
+            this.pageViewTrend = new Line(this.$refs.pageViewTrend, {
+              height: 300,
+              data: list,
+              xField: "date",
+              yField: "count",
+              color: "#F29C37",
+              seriesField: "type",
+              tooltip: {
+                formatter: (datum) => {
+                  return { name: type, value: datum.count };
+                },
+              },
+              point: {
+                shape: "breath-point",
+              },
+            });
+            this.pageViewTrend.render();
+          }
+        });
+    },
     // 获取各模块点击量分析
     getModuleClicksAnalysis(detail) {
       let content = {
@@ -198,10 +324,7 @@ export default {
         })
         .then((res) => {
           if (res.code != 1) return;
-          let type = [
-            this.$t("时间段内登陆用户"),
-            this.$t("游客每日的访客量柱"),
-          ];
+          let type = [this.$t("登录用户"), this.$t("游客")];
           let list = [];
           res.data.filter((v) => {
             list.push({
@@ -269,7 +392,7 @@ export default {
         })
         .then((res) => {
           if (res.code != 1) return;
-          let type = this.$t("留言量分析");
+          let type = this.$t("留言量");
           let list = res.data.map((v) => {
             v.type = type;
             return v;
@@ -325,7 +448,7 @@ export default {
         })
         .then((res) => {
           if (res.code != 1) return;
-          let type = this.$t("申请量分析");
+          let type = this.$t("申请量");
           let list = res.data.map((v) => {
             v.type = type;
             return v;

+ 1 - 0
src/WebsiteManagement/dataStatistics/modules/header.vue

@@ -13,6 +13,7 @@
     >
       <el-radio-button
         v-for="item in shortcutDate"
+        type="primary"
         :key="item.label"
         :label="item.value"
         >{{ $t(item.label) }}</el-radio-button

+ 1 - 136
src/WebsiteManagement/dataStatistics/modules/visitorStatistics.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="cards" v-if="visitor && visits">
       <div class="card" v-if="visitor">
-        <div class="title">{{ $t("访客统计") }}(uv)</div>
+        <div class="title">{{ $t("访客统计") }}</div>
         <div class="content">
           <div class="item">
             <el-tooltip :content="visitor.day" placement="top-start">
@@ -140,31 +140,11 @@
         </div>
       </div>
     </div>
-
-    <div class="cards" style="margin-top: 20px">
-      <div class="card">
-        <cord-top
-          title="访客趋势分析"
-          size="mini"
-          @returnWhere="getVisitorTrend"
-        />
-        <div ref="visitorTrend" style="margin-top: 20px"></div>
-      </div>
-      <div class="card">
-        <cord-top
-          title="访问量趋势分析"
-          size="mini"
-          @returnWhere="getPageViewTrend"
-        />
-        <div ref="pageViewTrend" style="margin-top: 20px"></div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
 import cordTop from "./header.vue";
-import { Line } from "@antv/g2plot";
 
 /* 访客统计模块 */
 export default {
@@ -173,17 +153,13 @@ export default {
   data() {
     return {
       visitor: null, //访客
-      visitorTrend: null, //访客趋势
       visits: null, //访问量
-      pageViewTrend: null, //访问量趋势
     };
   },
   created() {
     this.siteid = JSON.parse(sessionStorage.getItem("active_account")).siteid;
     this.getCardData("访客");
     this.getCardData("访问量");
-    this.getVisitorTrend();
-    this.getPageViewTrend();
   },
   methods: {
     getCardData(type) {
@@ -205,117 +181,6 @@ export default {
           }
         });
     },
-    // 获取访客趋势
-    getVisitorTrend(detail) {
-      let content = {
-        nocache: true,
-        siteid: this.siteid,
-        type: "近七日",
-        datatype: "访客",
-      };
-      if (detail) {
-        if (detail.type) {
-          content.type = detail.type;
-        } else {
-          content.type = "";
-          content.where = detail;
-        }
-      }
-      this.$api
-        .requested({
-          id: 2025010214275903,
-          content,
-        })
-        .then((res) => {
-          if (res.code != 1) return;
-          let type = "UV" + this.$t("访客数量");
-          let list = res.data.map((v) => {
-            v.type = type;
-            return v;
-          });
-          if (detail) {
-            this.visitorTrend.update({
-              scrollbar: list.length > 7 ? { type: "horizontal" } : null,
-            });
-            this.visitorTrend.changeData(list);
-          } else {
-            this.visitorTrend = new Line(this.$refs.visitorTrend, {
-              height: 300,
-              data: list,
-              xField: "date",
-              seriesField: "type",
-              yField: "count",
-              color: "#5588F7",
-              tooltip: {
-                formatter: (datum) => {
-                  return {
-                    name: type,
-                    value: datum.count,
-                  };
-                },
-              },
-              point: {
-                shape: "breath-point",
-              },
-            });
-            this.visitorTrend.render();
-          }
-        });
-    },
-    // 获取访问量趋势
-    getPageViewTrend(detail) {
-      let content = {
-        nocache: true,
-        siteid: this.siteid,
-        type: "近七日",
-        datatype: "访问量",
-      };
-      if (detail) {
-        if (detail.type) {
-          content.type = detail.type;
-        } else {
-          content.type = "";
-          content.where = detail;
-        }
-      }
-      this.$api
-        .requested({
-          id: 2025010214275903,
-          content,
-        })
-        .then((res) => {
-          if (res.code != 1) return;
-          let type = this.$t("重复访客数量");
-          let list = res.data.map((v) => {
-            v.type = type;
-            return v;
-          });
-          if (detail) {
-            this.pageViewTrend.update({
-              scrollbar: list.length > 7 ? { type: "horizontal" } : null,
-            });
-            this.pageViewTrend.changeData(list);
-          } else {
-            this.pageViewTrend = new Line(this.$refs.pageViewTrend, {
-              height: 300,
-              data: list,
-              xField: "date",
-              yField: "count",
-              color: "#F29C37",
-              seriesField: "type",
-              tooltip: {
-                formatter: (datum) => {
-                  return { name: type, value: datum.count };
-                },
-              },
-              point: {
-                shape: "breath-point",
-              },
-            });
-            this.pageViewTrend.render();
-          }
-        });
-    },
   },
 };
 </script>