各模块点击量分析

src/WebsiteManagement/dataStatistics/index.vue

@@ -7,6 +7,29 @@
       <div ref="userTypeAnalysis" style="margin-top: 20px"></div>
     </div>
 
+    <div class="card">
+      <cord-top
+        title="各模块点击量分析"
+        @returnWhere="getModuleClicksAnalysis"
+      />
+      <div class="module-clicks">
+        <div
+          class="pie-chart"
+          ref="moduleClicksAnalysis"
+          style="margin-top: 20px"
+        ></div>
+
+        <el-table :data="moduleClicksAnalysisTable" border style="width: 100%">
+          <el-table-column prop="module" :label="$t('模块名称')">
+          </el-table-column>
+          <el-table-column prop="clickcount" :label="$t('当前时段模块点击量')">
+          </el-table-column>
+          <el-table-column prop="sumclickcount" :label="$t('模块总点击量')">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
     <div class="card">
       <cord-top title="留言分析" @returnWhere="getMessageAnalysis" />
       <div ref="messageAnalysis" style="margin-top: 20px"></div>
@@ -22,13 +45,15 @@
 <script>
 import cordTop from "./modules/header.vue";
 import visitorStatistics from "./modules/visitorStatistics";
-import { Line, Column } from "@antv/g2plot";
+import { Line, Column, Pie } from "@antv/g2plot";
 
 export default {
   components: { visitorStatistics, cordTop },
   data() {
     return {
       userTypeAnalysis: null, //用户类型分析
+      moduleClicksAnalysis: null, //各模块点击量分析
+      moduleClicksAnalysisTable: null, //各模块点击量分析表格
       messageAnalysis: null, //留言分析
       serviceRequestAnalysis: null, //服务申请分析
       siteid: "", //站点id
@@ -38,12 +63,111 @@ export default {
     this.siteid = JSON.parse(sessionStorage.getItem("active_account")).siteid;
     // 获取用户类型分析
     this.getUserTypeAnalysis();
+    // 获取各模块点击量分析
+    this.getModuleClicksAnalysis();
     // 获取留言分析
     this.getMessageAnalysis();
     // 获取服务申请分析
     this.getServiceRequestAnalysis();
   },
   methods: {
+    // 获取各模块点击量分析
+    getModuleClicksAnalysis(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: 2025010309594403,
+          content,
+        })
+        .then((res) => {
+          console.log("获取各模块点击量分析", res);
+          if (res.code != 1) return;
+          let list = res.data;
+          this.moduleClicksAnalysisTable = list;
+          if (detail) {
+            this.moduleClicksAnalysis.changeData(list);
+          } else {
+            this.moduleClicksAnalysis = new Pie(
+              this.$refs.moduleClicksAnalysis,
+              {
+                height: 400,
+                appendPadding: 10,
+                angleField: "clickcount",
+                colorField: "module",
+                radius: 1,
+                innerRadius: 0.64,
+                data: list,
+                label: {
+                  type: "inner",
+                  offset: "-50%",
+                  autoRotate: false,
+                  style: { textAlign: "center" },
+                  formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+                },
+                statistic: {
+                  title: {
+                    offsetY: -8,
+                    customHtml: (container, view, datum) => {
+                      const text = datum ? datum.module : this.$t("点击量总数");
+                      return text;
+                    },
+                  },
+                  content: {
+                    offsetY: -4,
+                  },
+                },
+                legend: {
+                  layout: "horizontal",
+                  position: "bottom",
+                  flipPage: false,
+                },
+                // 添加 中心统计文本 交互
+                interactions: [
+                  { type: "element-selected" },
+                  { type: "element-active" },
+                  {
+                    type: "pie-statistic-active",
+                    cfg: {
+                      start: [
+                        {
+                          trigger: "element:mouseenter",
+                          action: "pie-statistic:change",
+                        },
+                        {
+                          trigger: "legend-item:mouseenter",
+                          action: "pie-statistic:change",
+                        },
+                      ],
+                      end: [
+                        {
+                          trigger: "element:mouseleave",
+                          action: "pie-statistic:reset",
+                        },
+                        {
+                          trigger: "legend-item:mouseleave",
+                          action: "pie-statistic:reset",
+                        },
+                      ],
+                    },
+                  },
+                ],
+              }
+            );
+            this.moduleClicksAnalysis.render();
+          }
+        });
+    },
     // 获取用户类型分析
     getUserTypeAnalysis(detail) {
       let content = {
@@ -74,12 +198,12 @@ export default {
           res.data.filter((v) => {
             list.push({
               date: v.date,
-              count: Math.ceil(Math.random() * 10) + 1 || v.visitorcount,
+              count: v.visitorcount,
               type: type[0],
             });
             list.push({
               date: v.date,
-              count: Math.ceil(Math.random() * 10) + 1 || v.logincount,
+              count: v.logincount,
               type: type[1],
             });
           });
@@ -239,4 +363,13 @@ export default {
   box-sizing: border-box;
   margin-top: 20px;
 }
+
+.module-clicks {
+  display: flex;
+  align-items: center;
+}
+
+.pie-chart {
+  width: 450px;
+}
 </style>

src/router/WebsiteManagement.js

@@ -1,5 +1,4 @@
-const WebsiteManagement = [
-    {
+const WebsiteManagement = [{
         path: '/consultManage',
         name: 'consultManage',
         meta: {
@@ -28,17 +27,15 @@ const WebsiteManagement = [
             keeproute: true,
         },
         component: () => import('@/WebsiteManagement/serviceAppointMag/index'),
-        children:[
-            {
-                path: '/serviceAppointMagDetail',
-                name: 'serviceAppointMag',
-                meta: {
-                    title: '服务预约管理详情',
-                    ast_nav: true,
-                },
-                component: () => import(/* webpackChunkName: "about" */ '@/WebsiteManagement/serviceAppointMag/detail/index'),
+        children: [{
+            path: '/serviceAppointMagDetail',
+            name: 'serviceAppointMag',
+            meta: {
+                title: '服务预约管理详情',
+                ast_nav: true,
             },
-        ]
+            component: () => import( /* webpackChunkName: "about" */ '@/WebsiteManagement/serviceAppointMag/detail/index'),
+        }, ]
     },
     {
         path: '/marketproductMag',
@@ -49,6 +46,15 @@ const WebsiteManagement = [
             keeproute: true,
         },
         component: () => import('@/WebsiteManagement/marketproductMag/index')
+    }, {
+        path: '/dataStatistics',
+        name: 'dataStatistics',
+        meta: {
+            title: '数据统计',
+            ast_nav: true,
+            keeproute: true,
+        },
+        component: () => import('@/WebsiteManagement/dataStatistics/index')
     },
 ];
-export default WebsiteManagement;
+export default WebsiteManagement;